Tailwind About Components (88)

About from Solstice

Company About Page with Mission, Stats, Values, Investors, and Team

A marketing about-us page for an education company, opening with a large heading, a four-stat summary bar (founded, funding, team size, nationalities), a values section with photos and a checklist, an investor logo grid, and a team section with portrait cards. Light background with orange accents and generous spacing.

<section class="overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative mb-32">
      <div class="hidden lg:block absolute top-0 left-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_231_9230)" stroke="#F0F0F0"></path>
          <defs><linearGradient id="paint0_linear_231_9230" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="hidden lg:block absolute top-0 right-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_231_9229)" stroke="#F0F0F0"></path>
          <defs><linearGradient id="paint0_linear_231_9229" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="relative z-10">
        <h1 class="text-center text-5xl lg:text-7xl font-bold font-heading max-w-lg lg:max-w-3xl mx-auto pt-14 pb-32">On a mission to make learning fun</h1>
        <div class="border border-gray-200 bg-white rounded-3xl flex flex-wrap">
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-gray-200 px-12">
              <p class="text-gray-600 mb-2 text-center">Founded</p>
              <h2 class="text-4xl lg:text-5xl font-semibold text-center">2023</h2>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="lg:border-r border-gray-200 px-12">
              <p class="text-gray-600 mb-2 text-center">Total funding</p>
              <h2 class="text-4xl lg:text-5xl font-semibold text-center">$9.6M</h2>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-gray-200 px-12">
              <p class="text-gray-600 mb-2 text-center">Team members</p>
              <h2 class="text-4xl lg:text-5xl font-semibold text-center">110</h2>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="px-12">
              <p class="text-gray-600 mb-2 text-center">Nationalities</p>
              <h2 class="text-4xl lg:text-5xl font-semibold text-center">24</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h2 class="text-4xl lg:text-5xl font-semibold text-center mb-14">Dedicated to Infusing Joy into Education</h2>
    <div class="flex flex-wrap mb-32 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <p class="text-gray-600 text-lg">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy.</p>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <p class="text-gray-600 text-lg">Guided by our fervent belief in the power of education, we weave a tapestry of dynamic interactions that seamlessly blend technology, interactivity, and meaningful human connections.</p>
      </div>
    </div>
    <div class="flex flex-wrap mb-32 -mx-8">
      <div class="w-full lg:w-1/2 px-8">
        <h2 class="text-3xl lg:text-5xl font-bold font-heading mb-20 max-w-xs lg:max-w-lg">A company with values</h2>
        <img class="rounded-3xl mb-8 w-full lg:w-auto" src="solstice-assets/images/about/picture1.png" alt="">
        <img class="rounded-3xl mb-8 w-full lg:w-auto" src="solstice-assets/images/about/picture2.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-8">
        <p class="text-gray-600 text-lg mb-6">Diversity, inclusion, and belonging are fundamental to our success. We believe the best solutions occur when a plurality of backgrounds, experiences, and identities work together.</p>
        <div class="flex flex-col gap-2 mb-14">
          <div class="flex items-center flex-wrap gap-3">
            <div class="w-4 h-4 rounded-full bg-orange-500 border border-orange-600 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M12.4733 4.8067C12.4114 4.74421 12.3376 4.69461 12.2564 4.66077C12.1752 4.62692 12.088 4.6095 12 4.6095C11.912 4.6095 11.8249 4.62692 11.7436 4.66077C11.6624 4.69461 11.5886 4.74421 11.5267 4.8067L6.56001 9.78003L4.47334 7.6867C4.40899 7.62454 4.33303 7.57566 4.2498 7.54286C4.16656 7.51006 4.07768 7.49397 3.98822 7.49552C3.89877 7.49706 3.8105 7.51622 3.72844 7.55188C3.64639 7.58754 3.57217 7.63902 3.51001 7.70336C3.44785 7.76771 3.39897 7.84367 3.36617 7.92691C3.33337 8.01014 3.31728 8.09903 3.31883 8.18848C3.32038 8.27793 3.33953 8.36621 3.37519 8.44826C3.41085 8.53031 3.46233 8.60454 3.52667 8.6667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3388 6.30362 11.3726C6.38486 11.4065 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4065 6.81639 11.3726C6.89763 11.3388 6.97137 11.2892 7.03334 11.2267L12.4733 5.7867C12.541 5.72427 12.595 5.6485 12.632 5.56417C12.6689 5.47983 12.688 5.38876 12.688 5.2967C12.688 5.20463 12.6689 5.11356 12.632 5.02923C12.595 4.94489 12.541 4.86912 12.4733 4.8067Z" fill="white"></path>
              </svg>
            </div>
            <span class="text-lg text-gray-600">Trustworthy</span>
          </div>
          <div class="flex items-center flex-wrap gap-3">
            <div class="w-4 h-4 rounded-full bg-orange-500 border border-orange-600 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M12.4733 4.8067C12.4114 4.74421 12.3376 4.69461 12.2564 4.66077C12.1752 4.62692 12.088 4.6095 12 4.6095C11.912 4.6095 11.8249 4.62692 11.7436 4.66077C11.6624 4.69461 11.5886 4.74421 11.5267 4.8067L6.56001 9.78003L4.47334 7.6867C4.40899 7.62454 4.33303 7.57566 4.2498 7.54286C4.16656 7.51006 4.07768 7.49397 3.98822 7.49552C3.89877 7.49706 3.8105 7.51622 3.72844 7.55188C3.64639 7.58754 3.57217 7.63902 3.51001 7.70336C3.44785 7.76771 3.39897 7.84367 3.36617 7.92691C3.33337 8.01014 3.31728 8.09903 3.31883 8.18848C3.32038 8.27793 3.33953 8.36621 3.37519 8.44826C3.41085 8.53031 3.46233 8.60454 3.52667 8.6667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3388 6.30362 11.3726C6.38486 11.4065 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4065 6.81639 11.3726C6.89763 11.3388 6.97137 11.2892 7.03334 11.2267L12.4733 5.7867C12.541 5.72427 12.595 5.6485 12.632 5.56417C12.6689 5.47983 12.688 5.38876 12.688 5.2967C12.688 5.20463 12.6689 5.11356 12.632 5.02923C12.595 4.94489 12.541 4.86912 12.4733 4.8067Z" fill="white"></path>
              </svg>
            </div>
            <span class="text-lg text-gray-600">Reliable</span>
          </div>
          <div class="flex items-center flex-wrap gap-3">
            <div class="w-4 h-4 rounded-full bg-orange-500 border border-orange-600 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M12.4733 4.8067C12.4114 4.74421 12.3376 4.69461 12.2564 4.66077C12.1752 4.62692 12.088 4.6095 12 4.6095C11.912 4.6095 11.8249 4.62692 11.7436 4.66077C11.6624 4.69461 11.5886 4.74421 11.5267 4.8067L6.56001 9.78003L4.47334 7.6867C4.40899 7.62454 4.33303 7.57566 4.2498 7.54286C4.16656 7.51006 4.07768 7.49397 3.98822 7.49552C3.89877 7.49706 3.8105 7.51622 3.72844 7.55188C3.64639 7.58754 3.57217 7.63902 3.51001 7.70336C3.44785 7.76771 3.39897 7.84367 3.36617 7.92691C3.33337 8.01014 3.31728 8.09903 3.31883 8.18848C3.32038 8.27793 3.33953 8.36621 3.37519 8.44826C3.41085 8.53031 3.46233 8.60454 3.52667 8.6667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3388 6.30362 11.3726C6.38486 11.4065 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4065 6.81639 11.3726C6.89763 11.3388 6.97137 11.2892 7.03334 11.2267L12.4733 5.7867C12.541 5.72427 12.595 5.6485 12.632 5.56417C12.6689 5.47983 12.688 5.38876 12.688 5.2967C12.688 5.20463 12.6689 5.11356 12.632 5.02923C12.595 4.94489 12.541 4.86912 12.4733 4.8067Z" fill="white"></path>
              </svg>
            </div>
            <span class="text-lg text-gray-600">Compassionate</span>
          </div>
          <div class="flex items-center flex-wrap gap-3">
            <div class="w-4 h-4 rounded-full bg-orange-500 border border-orange-600 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M12.4733 4.8067C12.4114 4.74421 12.3376 4.69461 12.2564 4.66077C12.1752 4.62692 12.088 4.6095 12 4.6095C11.912 4.6095 11.8249 4.62692 11.7436 4.66077C11.6624 4.69461 11.5886 4.74421 11.5267 4.8067L6.56001 9.78003L4.47334 7.6867C4.40899 7.62454 4.33303 7.57566 4.2498 7.54286C4.16656 7.51006 4.07768 7.49397 3.98822 7.49552C3.89877 7.49706 3.8105 7.51622 3.72844 7.55188C3.64639 7.58754 3.57217 7.63902 3.51001 7.70336C3.44785 7.76771 3.39897 7.84367 3.36617 7.92691C3.33337 8.01014 3.31728 8.09903 3.31883 8.18848C3.32038 8.27793 3.33953 8.36621 3.37519 8.44826C3.41085 8.53031 3.46233 8.60454 3.52667 8.6667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3388 6.30362 11.3726C6.38486 11.4065 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4065 6.81639 11.3726C6.89763 11.3388 6.97137 11.2892 7.03334 11.2267L12.4733 5.7867C12.541 5.72427 12.595 5.6485 12.632 5.56417C12.6689 5.47983 12.688 5.38876 12.688 5.2967C12.688 5.20463 12.6689 5.11356 12.632 5.02923C12.595 4.94489 12.541 4.86912 12.4733 4.8067Z" fill="white"></path>
              </svg>
            </div>
            <span class="text-lg text-gray-600">Productive</span>
          </div>
          <div class="flex items-center flex-wrap gap-3">
            <div class="w-4 h-4 rounded-full bg-orange-500 border border-orange-600 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M12.4733 4.8067C12.4114 4.74421 12.3376 4.69461 12.2564 4.66077C12.1752 4.62692 12.088 4.6095 12 4.6095C11.912 4.6095 11.8249 4.62692 11.7436 4.66077C11.6624 4.69461 11.5886 4.74421 11.5267 4.8067L6.56001 9.78003L4.47334 7.6867C4.40899 7.62454 4.33303 7.57566 4.2498 7.54286C4.16656 7.51006 4.07768 7.49397 3.98822 7.49552C3.89877 7.49706 3.8105 7.51622 3.72844 7.55188C3.64639 7.58754 3.57217 7.63902 3.51001 7.70336C3.44785 7.76771 3.39897 7.84367 3.36617 7.92691C3.33337 8.01014 3.31728 8.09903 3.31883 8.18848C3.32038 8.27793 3.33953 8.36621 3.37519 8.44826C3.41085 8.53031 3.46233 8.60454 3.52667 8.6667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3388 6.30362 11.3726C6.38486 11.4065 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4065 6.81639 11.3726C6.89763 11.3388 6.97137 11.2892 7.03334 11.2267L12.4733 5.7867C12.541 5.72427 12.595 5.6485 12.632 5.56417C12.6689 5.47983 12.688 5.38876 12.688 5.2967C12.688 5.20463 12.6689 5.11356 12.632 5.02923C12.595 4.94489 12.541 4.86912 12.4733 4.8067Z" fill="white"></path>
              </svg>
            </div>
            <span class="text-lg text-gray-600">People-first</span>
          </div>
        </div>
        <img class="rounded-3xl w-full lg:w-auto" src="solstice-assets/images/about/picture3.png" alt="">
      </div>
    </div>
    <h2 class="text-center text-4xl lg:text-5xl mb-9 font-bold font-heading">Our investors</h2>
    <div class="bg-gray-50 rounded-3xl mb-32 flex flex-wrap py-8">
      <div class="w-full md:w-1/2 lg:w-1/3 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo4.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo5.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo6.png" alt="">
      </div>
    </div>
    <h2 class="text-4xl font-bold font-heading text-center mb-4">Meet the team</h2>
    <p class="text-center text-gray-600 mb-4">A dynamic group of individuals united by passion and expertise</p>
    <div class="mb-16 flex justify-center"><a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Careers</a></div>
    <div class="flex flex-wrap mb-32 -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="relative bg-no-repeat bg-cover rounded-3xl w-full max-w-sm mx-auto" style="height:440px;background-image:url('solstice-assets/images/about/men-picture.png')">
          <div class="absolute bottom-0 left-0 bg-white rounded-tr-3xl rounded-bl-3xl px-6 py-3">
            <h2 class="text-2xl font-bold font-heading mb-2">David Petrucci</h2>
            <p class="text-sm text-gray-600">Founder &amp; CEO</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="relative bg-no-repeat bg-cover rounded-3xl w-full max-w-sm mx-auto" style="height:440px;background-image:url('solstice-assets/images/about/woman-picture1.png')">
          <div class="absolute bottom-0 left-0 bg-white rounded-tr-3xl rounded-bl-3xl px-6 py-3">
            <h2 class="text-2xl font-bold font-heading mb-2">Malika Gil</h2>
            <p class="text-sm text-gray-600">Operations Manager</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="relative bg-no-repeat bg-cover rounded-3xl w-full max-w-sm mx-auto" style="height:440px;background-image:url('solstice-assets/images/about/woman-picture2.png')">
          <div class="absolute bottom-0 left-0 bg-white rounded-tr-3xl rounded-bl-3xl px-6 py-3">
            <h2 class="text-2xl font-bold font-heading mb-2">Erika Newton</h2>
            <p class="text-sm text-gray-600">Growth Marketer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

About from Nightsable

Tailwind CSS

Nightsable

Dark Centered Text Block with Read More Button

A dark-background section with a centered multi-line paragraph of body text and an outlined pill-shaped Read more button below it. Two decorative sparkle icons flank the text, one lime green on the left and one gray on the right.

<section class="pt-20 pb-24 lg:pb-32 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative text-center md:max-w-4xl mx-auto">
      <h2 class="mb-8 text-3xl text-white tracking-tight leading-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</h2>
      <a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Read more</a>
      <img class="absolute top-8 -left-20" src="nightsable-assets/images/abouts/star.svg" alt="">
      <img class="absolute top-48 -right-20" src="nightsable-assets/images/abouts/star-light.svg" alt="">
    </div>
  </div>
</section>

About from Casper

Tailwind CSS

Casper

About Us Split Hero with Stats Grid and 3D Robot Illustration

A split-screen About Us section with a dark left panel containing a heading, descriptive paragraph, a "Get to know us" link, and a 2x2 grid of statistic cards showing "2,000+" with captions. The right side features a purple gradient panel with a 3D robot illustration in an arch-shaped frame and a decorative ringed planet.

<section class="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">
    <img class="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-1/2 z-10 lg:w-72 xl:w-auto" src="casper-assets/about/image-circle.png" alt="">
    <img class="absolute top-0 right-0 -mt-6 z-10 lg:w-80 xl:w-auto" src="casper-assets/about/planet.png" alt="">
  </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>
  <img class="hidden md:block absolute top-0 right-0 mt-12 -mr-80 lg:-mr-40 xl:-mr-0 h-full" src="casper-assets/about/double-lines.svg" alt="">
  <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">Casper 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">
      <img class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 z-10 w-64" src="casper-assets/about/image-circle.png" alt="">
      <img class="absolute top-0 right-0 mt-24 z-10 w-64" src="casper-assets/about/planet.png" alt="">
      <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>
      <img class="absolute top-0 right-0 h-128 -mt-20 object-cover" src="casper-assets/about/double-lines.svg" alt="">
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

About from Mirga

Tailwind CSS

Mirga

Split Hero with Headline and Stats Panel

A two-column hero section with a large headline and tagline on the left and a stats card on the right showing completed projects and years of operation with a dark "More" button. Both cards sit on a light gray background with rounded white containers.

<section class="py-12 md:py-24 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 lg:w-2/3 p-3">
        <div class="bg-white rounded-4xl py-16 px-12 h-full">
          <div class="flex flex-col justify-between h-full">
            <h1 class="font-heading mb-16 text-6xl sm:text-9xl xl:text-11xl text-neutral-800 font-semibold max-w-4xl font-heading">
              <span class="mr-3">Empowering through online</span>
              <span class="relative inline-block">
                <span class="relative z-10">learning.</span>
                <span class="absolute -bottom-2 left-0 h-2.5 w-full bg-green-100 rounded-full"></span>
              </span>
            </h1>
            <p class="text-neutral-600 text-2xl font-semibold tracking-tight">Your journey to digital excellence starts here.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="bg-white rounded-4xl py-16 px-12 h-full">
          <div class="flex flex-col items-start justify-between h-full">
            <div class="mb-16 lg:mb-44">
              <span class="inline-block text-neutral-600 text-2xl font-semibold mb-6 tracking-tight">Completed Projects</span>
              <h2 class="font-heading text-8xl md:text-10xl font-semibold mb-12 font-heading">400+</h2>
              <span class="inline-block text-neutral-600 text-2xl font-semibold mb-6 tracking-tight">Years of operation</span>
              <h2 class="font-heading text-8xl md:text-10xl font-semibold font-heading">35</h2>
            </div>
            <a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

About from Flow

Tailwind CSS

Flow

About us split-screen section with heading, body text, and outlined Read more button

A marketing content section with a large sans-serif "About us" heading on the left and a paragraph of company mission text on the right, ending in an outlined pill-shaped "Read more" button. The layout is a two-column split on a plain white background.

<section class="py-12 lg:py-24">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
                    <div>
                        <h1 class="font-heading text-6xl">About us</h1>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="lg:max-w-lg md:ml-auto">
                        <p class="text-xl font-medium mb-10">At Flow, we're committed to a sustainable future. As a pioneering force in the green energy sector, we've been at the forefront of the transition to clean, renewable power sources. Our mission is simple yet profound: to create a world where energy is not only abundant but also environmentally responsible. We believe that by harnessing the power of nature, we can power the world and protect it simultaneously.</p>
                        <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-teal-900 hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Read more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

About from Vista

Tailwind CSS

Vista

Dark About Page Mission Section with Stats, Careers Card, and CTA Banner

A full-page dark marketing layout for a bookkeeping company, opening with a large mission headline above a glowing logo mark, followed by investor and team stats, two-column company copy, a careers card with an Open positions button, and a pink gradient call-to-action banner with a Get Started button.

<section class="bg-darkPink-900 pt-24 pb-28">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center mb-28 text-5xl md:text-7xl font-bold max-w-4xl mx-auto">Our mission is to make bookkeeping simple</h1>
        <div class="relative mx-auto mb-32 max-w-sm">
            <div class="absolute left-0 top-0 bg-pink-500 blur-3xl filter opacity-50 rounded-full h-full w-full"></div>
            <img class="relative z-50" style="height:400px" src="vista-assets/images/logos/vista-logo-small-dark.svg" alt="">
        </div>
        <div class="border-b border-pink-500 pb-9 mb-20">
            <div class="flex flex-wrap items-stretch -m-4">
                <div class="w-full md:w-1/3 lg:w-1/2 p-4">
                    <div class="border-r border-transparent md:border-white md:border-opacity-10 flex flex-col justify-center h-full">
                        <p class="text-white text-center md:text-left text-opacity-50 mb-2">Investors</p>
                        <p class="text-white text-center md:text-left mx-auto md:mx-0 text-2xl font-semibold max-w-xs">Funded by industry-leading investors</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 lg:w-1/4 p-4">
                    <div class="border-r border-transparent md:border-white md:border-opacity-10 flex flex-col justify-center h-full">
                        <p class="text-white text-opacity-50 mb-2 text-center">Team members</p>
                        <p class="text-white text-5xl font-bold text-center">110</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 lg:w-1/4 p-4">
                    <div class="flex flex-col justify-center h-full">
                        <p class="text-white text-opacity-50 mb-2 text-center">Founded in</p>
                        <p class="text-white text-5xl font-bold text-center">2024</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-4 mb-32">
            <div class="w-full lg:w-1/2 p-4">
                <p class="text-white text-xl max-w-lg">Vista emerged on the scene in 2024, a visionary solution born from the collective expertise of its founders. United by a shared passion for redefining the bookkeeping landscape, they embarked on a journey to create a cutting-edge SaaS platform. </p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <p class="text-white text-xl max-w-3xl">Vista is more than a software; it's the culmination of years of industry insight and dedication to revolutionize the way businesses manage their financial records. Built on the pillars of efficiency, accuracy, and collaboration, Vista sets a new standard for bookkeeping solutions, empowering businesses to navigate their financial landscape with ease and confidence. </p>
            </div>
        </div>
        <div class="bg-pinkSecondary-900 rounded-3xl py-20 px-4 mb-32">
            <p class="uppercase text-center text-sweetPink-400 tracking-widest text-xs mb-4">CAREERS</p>
            <h2 class="font-heading text-white text-center text-4xl md:text-5xl font-bold mb-4">Join our amazing global team</h2>
            <p class="text-white text-opacity-70 mb-10 text-center max-w-4xl mx-auto">We're a small but strong team that enjoys having a lot of ownership and autonomy. We take pride in our work and come from places such as Pipe, AngelList, and - to name a few.</p>
            <div class="flex justify-center">
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink">
                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-3 px-5 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                        <p class="text-pinkSecondary-900">Open positions</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="rounded-3xl bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 py-20 px-7 md:px-14 relative overflow-hidden">
            <img class="absolute top-0 right-0 object-cover h-80" src="vista-assets/images/about/illustration-pink.svg" alt="">
            <div class="relative z-50">
                <h2 class="font-heading text-white text-4xl md:text-5xl font-bold mb-10 max-w-md md:max-w-lg">Ready to make accounting a breeze?</h2>
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-3 px-5 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                        <p class="text-pinkSecondary-900">Get Started</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

About from FilyTreck

Tailwind CSS

FilyTreck

Split-screen feature section with productivity heading and team photos

A marketing feature section presenting two alternating rows: a photo with heading, body copy, and a blue Read more button, followed by a bold heading, checklist of benefits, and a team high-five photo. It promotes productivity and time tracking benefits with a light background and rounded photos.

<section class="py-24 md:py-40">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-8 xl:-m-16 xl:mb-14">
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <div class="relative overflow-hidden rounded-3xl" style="height: 496px;">
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <h3 class="mb-10 font-heading text-3xl font-medium leading-tight">Discover the convenient route to turbocharge your productivity effortlessly, allowing you to accomplish tasks faster and more efficiently, all while maintaining precision and accuracy in your work.</h3>
                <p class="mb-14 text-xl text-gray-500 font-medium leading-relaxed">The easy way to work faster: Effortless Time Tracking for Enhanced Productivity. Streamline your tasks and optimize your work process, all while gaining valuable insights into your time management.</p>
                <div class="flex">
                    <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Read more</a>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-8 xl:-m-16">
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <h3 class="mb-16 font-heading text-4xl md:text-5xl font-bold leading-tight">The easy way to work faster</h3>
                <ul>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Streamline tasks effortlessly</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Boost productivity with simplicity</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Accelerate your work pace</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Effortless speed and efficiency</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-0">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Work smarter, not harder</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <div class="relative overflow-hidden rounded-3xl" style="height: 512px;">
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

About from asitrastudio

Tailwind CSS

asitrastudio

Real Estate Firm Intro with Stats Cards

A centered introductory paragraph about a real estate investment firm with an underlined text link, followed by a row of four rounded outlined cards displaying key metrics such as clients, projects, units sold, and area designed. The layout is a centered stack transitioning into a horizontal row of stat cards on a light background.

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl px-8 mb-20 mx-auto text-center">
      <p class="text-xl lg:text-2xl tracking-tight mb-10">
        <span>KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
        <span class="italic text-coolGray-600">London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span>
        <span>KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture. In those carefully selected markets and locations, we bring capital and expertise to such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture.</span>
      </p>
      <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
        <span class="mr-4">Get to know us</span>
        <span class="group-hover:rotate-45 transform transition duration-100">
          <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </a>
    </div>
    <div class="max-w-sm mx-auto sm:max-w-none">
      <div class="flex flex-wrap">
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">700+</h5>
              <span class="block text-coolGray-600">Clients</span>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">40 000+</h5>
              <span class="block text-coolGray-600">Projects</span>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">10 000+</h5>
              <span class="block text-coolGray-600">Units sold</span>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">
                <span>9 999+m</span>
                <sup>2</sup>
              </h5>
              <span class="block text-coolGray-600">Designed</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

About from Consulty

Tailwind CSS

Consulty

About Us Split Section with Portrait and Founding Year Badge

A split-screen marketing section pairing a portrait photo on a peach rounded panel, with a white badge showing the founding year 1994, beside an 'About our company' heading, short body text, and a black pill 'Read More About Us' call-to-action button. Content is left-aligned on a plain white background.

<section class="pt-32 pb-48 px-8 md:px-24">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <img class="object-cover rounded-2xl object-right" style="height:600px;" src="consulty-assets/about/picture1.png" alt="">
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <div class="pt-14">
                <h1 class="font-heading text-4xl font-medium mb-4 tracking-tight">About our company</h1>
                <p class="text-gray-700 text-lg mb-6 max-w-lg tracking-tight">It is a long established fact that a reader will be content distracted by the readable content of a page when it looking at its layout. The point of using is that it has the many variations of passages distribution.</p>
                <a href="#" class="bg-black h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 tracking-tight hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                    <span class="text-white text-sm font-semibold tracking-tight">Read More About Us</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>