About-us E-commerce Modern

                <!--
@type: About Us
@industry: E-commerce
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<section class="w-full py-12 md:py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4">
    <div class="grid gap-12 lg:grid-cols-2 items-center">
      <div class="relative flex justify-center">
        <img alt="Our Team at StyleHub" loading="lazy" width="500" height="600" decoding="async" data-nimg="1"
          class="w-full max-w-lg h-auto rounded-2xl shadow-2xl object-cover"
          src="https://landinggo.com/assets/img/stock/team/team-pexels-1080x1618.webp">
        <div class="absolute -bottom-6 -right-2 bg-white border-2 border-orange-500 text-orange-500 rounded-xl p-4 shadow-lg">
          <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" class="lucide lucide-users h-6 w-6">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            <div>
              <div class="font-semibold text-lg">Join Our Journey</div>
              <div class="text-sm">Be part of something great.</div>
            </div>
          </div>
        </div>
      </div>
      <div class="space-y-8 text-center lg:text-left">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">About StyleHub: Our Story</h2>
        <p class="text-lg text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
          Founded with a passion for bringing exceptional style and quality to every home, StyleHub is more than just an
          e-commerce platform. We are a community dedicated to curated fashion and a seamless shopping experience.
        </p>
        <div class="space-y-6">
          <div class="flex items-start gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" class="lucide lucide-heart h-8 w-8 text-orange-500 flex-shrink-0 mt-1">
              <path
                d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
              </path>
            </svg>
            <div>
              <h3 class="text-xl font-semibold text-gray-900">Customer-Centric</h3>
              <p class="text-gray-600">Your satisfaction is our priority. We're dedicated to providing an exceptional shopping experience.</p>
            </div>
          </div>
          <div class="flex items-start gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" class="lucide lucide-award h-8 w-8 text-orange-500 flex-shrink-0 mt-1">
              <path
                d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
              </path>
              <circle cx="12" cy="8" r="6"></circle>
            </svg>
            <div>
              <h3 class="text-xl font-semibold text-gray-900">Quality &amp; Craftsmanship</h3>
              <p class="text-gray-600">We meticulously select products that meet the highest standards of quality and design.</p>
            </div>
          </div>
          <div class="flex items-start gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" class="lucide lucide-leaf h-8 w-8 text-orange-500 flex-shrink-0 mt-1">
              <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
              <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
            </svg>
            <div>
              <h3 class="text-xl font-semibold text-gray-900">Sustainable Practices</h3>
              <p class="text-gray-600">Committed to ethical sourcing and environmentally friendly operations.</p>
            </div>
          </div>
        </div>
        <div class="flex flex-col gap-4 min-[400px]:flex-row">
          <button data-slot="button"
            class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
            Meet Our Team
          </button>
          <button data-slot="button"
            class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-200 rounded-lg text-lg font-semibold text-gray-700 hover:bg-gray-50 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
            Our Mission
          </button>
        </div>
      </div>
    </div>
  </div>
</section>