Component:
Feature E-commerce Modern

Name: Feature E-commerce Modern
Availability: InStock
Free
Tags: Feature Page Section Content E-commerce Modern
Colors:
Description:
This carefully crafted Feature component is perfect for E-commerce landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Feature
@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 text-center">
    <div class="max-w-4xl mx-auto space-y-6">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">Why Choose StyleHub?</h2>
      <p class="text-lg text-gray-600 md:text-xl">
        Experience the difference with our commitment to quality, convenience, and customer satisfaction.</p>
    </div>
    <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <div
        class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
        <div class="bg-orange-100 rounded-full p-3 mb-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-truck h-10 w-10 text-orange-500">
            <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path>
            <path d="M15 18H9"></path>
            <path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path>
            <circle cx="17" cy="18" r="2"></circle>
            <circle cx="7" cy="18" r="2"></circle>
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Fast &amp; Reliable Delivery</h3>
        <p class="text-gray-600">Get your orders delivered swiftly and securely right to your doorstep, every time.</p>
      </div>
      <div
        class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
        <div class="bg-orange-100 rounded-full p-3 mb-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-shield-check h-10 w-10 text-orange-500">
            <path
              d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
            </path>
              <path d="m9 12 2 2 4-4"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Secure Payment Options</h3>
        <p class="text-gray-600">Shop with peace of mind using our encrypted and secure payment gateways.</p>
      </div>
      <div
        class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
        <div class="bg-orange-100 rounded-full p-3 mb-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-gift h-10 w-10 text-orange-500">
            <rect x="3" y="8" width="18" height="4" rx="1"></rect>
            <path d="M12 8v13"></path>
            <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"></path>
            <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Exclusive Member Rewards</h3>
        <p class="text-gray-600">Join our loyalty program and unlock special discounts, early access, and more.</p>
      </div>
      <div
        class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
        <div class="bg-orange-100 rounded-full p-3 mb-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-star h-10 w-10 text-orange-500">
            <polygon
              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
            </polygon>
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Curated Product Selection</h3>
        <p class="text-gray-600">Discover unique and high-quality items hand-picked by our fashion experts.</p>
      </div>
      <div
        class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
        <div class="bg-orange-100 rounded-full p-3 mb-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-credit-card h-10 w-10 text-orange-500">
            <rect width="20" height="14" x="2" y="5" rx="2"></rect>
            <line x1="2" x2="22" y1="10" y2="10"></line>
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Flexible Payment Plans</h3>
        <p class="text-gray-600">Enjoy convenient payment options, including buy now, pay later solutions.</p>
      </div>
      <div
        class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
        <div class="bg-orange-100 rounded-full p-3 mb-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-headset h-10 w-10 text-orange-500">
            <path
              d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z">
            </path>
            <path d="M21 16v2a4 4 0 0 1-4 4h-5"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">24/7 Customer Support</h3>
        <p class="text-gray-600">Our dedicated support team is always here to assist you with any queries.</p>
      </div>
    </div>
    <div class="mt-12">
      <button data-slot="button"
        class="inline-flex items-center justify-center gap-2 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">
        Explore Our Benefits
        <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-arrow-right h-6 w-6">
          <path d="M5 12h14"></path>
          <path d="M12 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>
  </div>
</section>
Feature E-commerce Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
