About (Variant 1)

About sections
React
Astro
Svelte
Html
ColorSwatch
Supabase
Mongodb
Json
Firebase
---
import { Image } from "astro:assets";
import Asset1 from "@/assets/templates/uno/about/image-circle.png";
import Asset2 from "@/assets/templates/uno/about/planet.png";
import Asset3 from "@/assets/templates/uno/about/double-lines.svg";
---
<section class="w-full relative pt-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div
    class="hidden md:block absolute top-0 right-0 h-full w-3/12 lg:w-full lg:max-w-sm xl:max-w-md bg-violet-800"
  >
    <Image
      src={Asset1}
      decoding="async"
      loading="lazy"
      alt="prodkt"
      class="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-1/2 z-10 lg:w-72 xl:w-auto"
    />

    <Image
      src={Asset2}
      decoding="async"
      loading="lazy"
      alt="prodkt"
      class="absolute top-0 right-0 -mt-6 z-10 lg:w-80 xl:w-auto"
    />
  </div>
  <div
    class="hidden md:block absolute top-1/2 right-0 w-186 h-186 mr-20 -mt-20 transform -translate-y-1/2 bg-gradient-to-t from-blue-500 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"
  >
  </div>

  <Image
    src={Asset3}
    decoding="async"
    loading="lazy"
    alt="prodkt"
    class="hidden md:block absolute top-0 right-0 mt-12 -mr-80 lg:-mr-40 xl:-mr-0 h-full"
  />

  <div class="relative container mx-auto px-4 mb-64 md:mb-0 z-10">
    <div class="max-w-md xl:max-w-2xl mx-auto md:mx-0">
      <div class="mb-16">
        <h2
          class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-4"
        >
          About Us
        </h2>
        <p
          class="max-w-xl text-xl text-gray-500 leading-relaxed tracking-tight mb-6"
        >
          Prodkt provide instant support, and boost conversions like never
          before. Join thousands of satisfied customers who have already
          elevated their online presence with our AI chat assistant.
        </p>
        <a
          class="inline-flex items-center text-sm font-medium text-violet-500 hover:text-white uppercase"
          href="#"
        >
          <span class="mr-2">GET TO KNOW US</span>
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.92 6.62C17.8185 6.37565 17.6243 6.18147 17.38 6.08C17.2598 6.02876 17.1307 6.00158 17 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.29289 7.70711C6.48043 7.89464 6.73478 8 7 8H14.59L6.29 16.29C6.19627 16.383 6.12188 16.4936 6.07111 16.6154C6.02034 16.7373 5.9942 16.868 5.9942 17C5.9942 17.132 6.02034 17.2627 6.07111 17.3846C6.12188 17.5064 6.19627 17.617 6.29 17.71C6.38296 17.8037 6.49356 17.8781 6.61542 17.9289C6.73728 17.9797 6.86799 18.0058 7 18.0058C7.13201 18.0058 7.26272 17.9797 7.38458 17.9289C7.50644 17.8781 7.61704 17.8037 7.71 17.71L16 9.41V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V7C17.9984 6.86932 17.9712 6.74022 17.92 6.62Z"
              fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="max-w-xl">
        <div class="flex flex-wrap -mx-4 -mb-8">
          <div class="w-full sm:w-1/2 px-4 mb-8">
            <div class="relative p-6 rounded-3xl overflow-hidden">
              <div
                class="absolute top-0 left-0 w-full h-full backdrop-filter backdrop-blur-md bg-gray-500 bg-opacity-20 group-hover:bg-violet-400 group-hover:bg-opacity-100 transition duration-150"
              >
              </div>
              <div class="relative">
                <span class="block text-4xl xl:text-5xl font-medium text-white"
                  >2,000+</span
                >
                <span class="block text-xl tracking-tight text-gray-500"
                  >It is long established</span
                >
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-8">
            <div class="relative p-6 rounded-3xl overflow-hidden">
              <div
                class="absolute top-0 left-0 w-full h-full backdrop-filter backdrop-blur-md bg-gray-500 bg-opacity-20 group-hover:bg-violet-400 group-hover:bg-opacity-100 transition duration-150"
              >
              </div>
              <div class="relative">
                <span class="block text-4xl xl:text-5xl font-medium text-white"
                  >2,000+</span
                >
                <span class="block text-xl tracking-tight text-gray-500"
                  >It is long established</span
                >
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-8">
            <div class="relative p-6 rounded-3xl overflow-hidden">
              <div
                class="absolute top-0 left-0 w-full h-full backdrop-filter backdrop-blur-md bg-gray-500 bg-opacity-20 group-hover:bg-violet-400 group-hover:bg-opacity-100 transition duration-150"
              >
              </div>
              <div class="relative">
                <span class="block text-4xl xl:text-5xl font-medium text-white"
                  >2,000+</span
                >
                <span class="block text-xl tracking-tight text-gray-500"
                  >It is long established</span
                >
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-8">
            <div class="relative p-6 rounded-3xl overflow-hidden">
              <div
                class="absolute top-0 left-0 w-full h-full backdrop-filter backdrop-blur-md bg-gray-500 bg-opacity-20 group-hover:bg-violet-400 group-hover:bg-opacity-100 transition duration-150"
              >
              </div>
              <div class="relative">
                <span class="block text-4xl xl:text-5xl font-medium text-white"
                  >2,000+</span
                >
                <span class="block text-xl tracking-tight text-gray-500"
                  >It is long established</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="md:hidden relative h-112 bg-violet-800">
      <Image
        src={Asset1}
        decoding="async"
        loading="lazy"
        alt="prodkt"
        class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 z-10 w-64"
      />

      <Image
        src={Asset2}
        decoding="async"
        loading="lazy"
        alt="prodkt"
        class="absolute top-0 right-0 mt-24 z-10 w-64"
      />

      <div
        class="absolute top-0 right-0 w-128 h-128 mr-20 -mt-40 bg-gradient-to-t from-blue-500 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"
      >
      </div>

      <Image
        src={Asset3}
        decoding="async"
        loading="lazy"
        alt="prodkt"
        class="absolute top-0 right-0 h-128 -mt-20 object-cover"
      />
    </div>
  </div>
</section>

Code Blocks Soon

  • Headers
  • Hero sections
  • Feature sections
  • CTA sections
  • Content sections
  • Team sections
  • Social Proof
  • Testimonial sections
  • Footers

Design Soon

  • Prodkt UI kit
  • Tovuti UI kit
  • Remix LXP UI kit
  • Leveln' Diabetes UI kit
  • Explor UI kit
  • Signal UI kit

Stack Soon

  • MacOS stack
  • Windows stack
  • Tovuti stack
  • Remix LXP stack
  • Signal stack

Flows Soon

  • New User Experience
  • Account Management
  • Commerce & Finance
  • Social
  • Content
  • Miscellaneous

© 2023 Bryan Funk