Cerca componenti

Categorie

Componenti Contenitore

Contenitore

Elemento wrapper che limita la larghezza del contenuto

Componente contenitore 3D

Un componente contenitore reattivo per dashboard con una combinazione di colori vivaci ed elementi di progettazione 3D, che supporta la modalità oscura.

Aperto Anteprima

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col justify-center items-center py-10">
    <div class="bg-gradient-to-r from-purple-400 to-pink-600 shadow-lg rounded-lg p-6 md:p-8 transform transition-all duration-300 hover:scale-105">
        <h2 class="text-white text-2xl font-bold text-center mb-4">Dashboard Overview</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Statistics</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=1" alt="Statistics Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Overview of user data and engagement metrics.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Revenue Insights</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=2" alt="Revenue Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Detailed revenue analysis for the current period.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Profiles</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Brief information about some users.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Latest Updates</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=3" alt="Updates Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Latest updates from the dashboard activities.</p>
            </div>
        </div>
        <button class="mt-4 bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300">View More Details</button>
    </div>
</div>

Componente contenitore

Un contenitore reattivo in modalità scura per i contenuti del blog con un semplice design in scala di grigi.

Aperto Anteprima

                <div class="container mx-auto p-4 dark:bg-gray-900 bg-white text-gray-800 dark:text-gray-200 rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold mb-4 text-center">Blog Post Title</h1>
  <img src="https://picsum.photos/seed/unsplash/800/400" alt="Blog Post Image" class="w-full h-auto rounded-md mb-4">
  <div class="prose dark:prose-invert max-w-none">
    <p>This is an example of a blog post content paragraph within the container. It demonstrates a simple layout for reading and content consumption in dark mode.</p>
    <p>The container is designed to be responsive and uses Tailwind CSS classes for styling, including dark mode support with the <code class="language-text">dark:</code> prefix.</p>
    <p>Grayscale colors are used for a clean and minimalist look.</p>
  </div>
</div>

Componente contenitore

Un componente contenitore in stile 3D adatto per siti Web aziendali/aziendali, con colori vivaci ed elementi interattivi e un design reattivo con supporto per temi scuri.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition-transform duration-300 hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-vibrant-600 shadow-md">
        <h2 class="text-xl font-bold text-vibrant-600 dark:text-vibrant-300 ml-4">Business Name</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-4">This container is designed to showcase important information while maintaining a 3D effect that engages users.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature One</h3>
            <p class="text-white">Description of feature one with engaging content.</p>
        </div>
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature Two</h3>
            <p class="text-white">Description of feature two with engaging content.</p>
        </div>
    </div>
</div>

Componente contenitore

Un componente contenitore progettato in stile brutalista per l'e-commerce, caratterizzato da un layout reattivo con supporto per il tema scuro, utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
    <div class="flex flex-wrap gap-4">
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
    </div>
    <footer class="text-center mt-4 text-gray-400">
        <p>© 2023 E-commerce Store</p>
    </footer>
</div>

Contenitore Portfolio Glassmorphism

Un componente contenitore Glassmorphism reattivo con supporto per la modalità oscura su misura per un sito Web di portfolio che utilizza Tailwind CSS. Presenta un effetto vetro smerigliato, una combinazione di colori triadica, più elementi interattivi e utilizza picsum.photos per le immagini e randomuser.me per gli avatar.

Aperto Anteprima

                <div class="container mx-auto p-8">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Title</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Name</a>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4">
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag1</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag2</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tag3</span>
        </div>
        <div class="mt-6 flex items-center">
          <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">Developer</p>
          </div>
        </div>
        <div class="mt-6">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
          <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
        </div>
      </div>
    </div>
  </div>

    <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mt-8">
      <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/another/400/300" alt="Project Image">
        </div>
        <div class="p-8">
          <div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Another Project</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Name</a>
          <p class="mt-2 text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="mt-4">
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagA</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagB</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tagC</span>
          </div>
          <div class="mt-6 flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
          <div class="mt-6">
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
            <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
          </div>
        </div>
      </div>
    </div>
</div>

Componente contenitore brutalista

Un componente contenitore semplice ma audace progettato con uno stile brutalista e una combinazione di colori vivaci, adatto per siti Web aziendali o aziendali, che supporta la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-4">
    <div class="bg-yellow-400 dark:bg-yellow-600 border-4 border-red-800 dark:border-red-500 rounded-lg shadow-xl p-6">
        <h1 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4">Business Title</h1>
        <p class="text-base text-gray-800 dark:text-gray-200 mb-6">This is a simple yet bold container designed for a business or corporate website. The design embraces a brutalist style with vibrant colors.</p>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="w-full h-auto rounded-lg mb-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-blue-900 dark:border-blue-200 mr-2">
            <div class="text-sm">
                <p class="font-bold text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">CEO, Company Name</p>
            </div>
        </div>
    </div>
</div>

Componente contenitore

Un contenitore di dashboard semplice e reattivo con microinterazioni coinvolgenti e un tema scuro, incentrato su colori analoghi.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-blue-700 dark:text-blue-300">User Profile</span>
            </div>
            <img src="https://picsum.photos/300/200?random=1" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-green-700 dark:text-green-300">Analytics</span>
            </div>
            <img src="https://picsum.photos/300/200?random=2" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-red-700 dark:text-red-300">Notifications</span>
            </div>
            <img src="https://picsum.photos/300/200?random=3" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-yellow-700 dark:text-yellow-300">Settings</span>
            </div>
            <img src="https://picsum.photos/300/200?random=4" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
    </div>
</div>

Contenitore di social media

Un componente contenitore reattivo con colori vivaci, microinterazioni coinvolgenti e supporto per temi scuri, adatto per le interfacce dei social media. Le caratteristiche includono sottili effetti di passaggio del mouse e un layout pulito.

Aperto Anteprima

                <div class="container mx-auto p-4 md:p-8 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black rounded-lg shadow-xl">
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <h2 class="text-xl font-bold text-white dark:text-gray-200">User Profile</h2>
    </div>
    <button class="px-4 py-2 bg-white bg-opacity-20 text-white text-sm font-semibold rounded-full hover:bg-opacity-30 transition-all duration-300 ease-in-out">Follow</button>
  </div>

  <p class="text-white dark:text-gray-300 leading-relaxed mb-6">
    This is a sample container component for social media interfaces. It features vibrant colors, subtle hover effects for buttons, and is fully responsive.
  </p>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
      <h3 class="text-lg font-semibold text-white mb-2">Recent Post</h3>
      <p class="text-white text-sm dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    </div>
    <div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
      <h3 class="text-lg font-semibold text-white mb-2">Notifications</h3>
      <p class="text-white text-sm dark:text-gray-300">You have 3 new notifications. ...</p>
    </div>
  </div>

  <div class="mt-6 pt-4 border-t border-white border-opacity-20 flex justify-around text-white">
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Messages</a>
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Settings</a>
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Logout</a>
  </div>
</div>

Componente contenitore

Componente contenitore reattivo con supporto della modalità oscura per l'e-commerce

Aperto Anteprima

                <div class="container mx-auto p-4 bg-gray-900 text-gray-100">
  <div class="dark:bg-gray-800 rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4 dark:text-gray-200">Product Listing</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 1</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$19.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 2</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$29.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 3</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$39.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Componente contenitore

Un componente contenitore in stile retrò/vintage per i portafogli, con una combinazione di colori monocromatica e supporto per la modalità scura.

Aperto Anteprima

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h1 class="text-4xl font-bold text-gray-100 dark:text-gray-200 mb-4">My Portfolio</h1>
    <p class="text-gray-300 dark:text-gray-400 mb-6">Showcasing my work from the nostalgic eras of the 80s and 90s.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 1</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 1 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 2</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 2 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 3</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 3 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 4</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 4 with a brief overview of the key elements and technologies used.</p>
        </div>
    </div>

    <div class="mt-10 text-center">
        <h3 class="text-3xl font-bold text-gray-200 dark:text-gray-300 mb-4">About Me</h3>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-32 h-32 mx-auto mb-4">
        <p class="text-gray-300 dark:text-gray-400 max-w-md mx-auto">I'm a passionate developer with a love for retro designs and a knack for turning ideas into reality. Let's connect!</p>
    </div>
</div>