<!--
@type: Integration
@industry: E-commerce
@style: Modern
@category: Page Section, Content, Support
@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">Connect Your Favorite Tools
</h2>
<p class="text-lg text-gray-600 md:text-xl">
StyleHub integrates seamlessly with the platforms you already use, streamlining your operations and enhancing your e-commerce experience.
</p>
</div>
<div class="mt-12 flex grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-white">
<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">Payment Gateways</h3>
<p class="text-gray-600">Seamlessly connect with leading payment providers like Stripe, PayPal, and more for secure transactions.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-white">
<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">Shipping & Logistics</h3>
<p class="text-gray-600">Automate your shipping with integrations for FedEx, UPS, DHL, and other major carriers.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-bar-chart h-10 w-10 text-white">
<line x1="12" y1="20" x2="12" y2="10"></line>
<line x1="18" y1="20" x2="18" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="16"></line>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Analytics</h3>
<p class="text-gray-600">Gain deep insights into your sales and customer behavior with Google Analytics, Mixpanel, etc.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-mail h-10 w-10 text-white">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Email Marketing</h3>
<p class="text-gray-600">Sync customer data with Mailchimp, Klaviyo, and other platforms for targeted campaigns.</p>
</div>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-package h-10 w-10 text-white">
<path d="m7.5 4.27 9 5.15"></path>
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Management</h3>
<p class="text-gray-600">Manage your inventory with ease using integrations with Shopify, WooCommerce, and other platforms.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-users h-10 w-10 text-white">
<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>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">CRM & ERP Systems</h3>
<p class="text-gray-600">Integrate with Salesforce, HubSpot, and other enterprise solutions for unified operations.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 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-globe h-10 w-10 text-white">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
<path d="M2 12h20"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Custom APIs</h3>
<p class="text-gray-600">Extend functionality with our robust API, allowing you to build custom connections and workflows.</p>
</div>
</div>
<div class="mt-12">
<a href="#"
class="border-b-2 border-white flex items-center gap-2 text-center justify-center max-w-max mx-auto font-semibold hover:border-orange-500">
<span>View All Integrations</span>
<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-4 w-4">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</section>
