86 lines
3.8 KiB
TypeScript
86 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { motion } from "framer-motion"
|
|
import { CheckCircle2, ArrowRight } from "lucide-react"
|
|
|
|
const solutions = [
|
|
{
|
|
role: "For Vendors",
|
|
title: "Scale your reach, simplify your supply.",
|
|
description: "Connect with global suppliers, sync your Shopify store, and manage orders from a single, high-performance interface.",
|
|
features: [
|
|
"Seamless Shopify Integration",
|
|
"Real-time Inventory Tracking",
|
|
"Direct Encrypted Chat with Suppliers",
|
|
"Unified Order Management"
|
|
],
|
|
cta: "Sign Up as Vendor",
|
|
gradient: "from-blue-600 to-indigo-600",
|
|
bg: "bg-blue-500/5"
|
|
},
|
|
{
|
|
role: "For Suppliers",
|
|
title: "Your products, in every shopify window.",
|
|
description: "Distribute your catalog to thousands of vendors instantly. Track performance and communicate securely with your partners.",
|
|
features: [
|
|
"Global Catalog Distribution",
|
|
"Automated Product Syncing",
|
|
"Detailed Partner Analytics",
|
|
"Reliable Payment Settlements"
|
|
],
|
|
cta: "Sign Up as Supplier",
|
|
gradient: "from-indigo-600 to-purple-600",
|
|
bg: "bg-purple-500/5"
|
|
}
|
|
]
|
|
|
|
export function LandingSolutions() {
|
|
return (
|
|
<section id="solutions" className="py-24 bg-white/5 border-y border-white/5 relative">
|
|
<div className="container mx-auto px-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{solutions.map((sol, index) => (
|
|
<motion.div
|
|
key={sol.role}
|
|
initial={{ opacity: 0, x: index === 0 ? -20 : 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
className={`p-10 rounded-[40px] border border-white/10 ${sol.bg} relative overflow-hidden group`}
|
|
>
|
|
{/* Role Badge */}
|
|
<div className="inline-block px-4 py-1.5 rounded-full bg-white/10 border border-white/10 text-xs font-black uppercase tracking-widest text-white mb-6">
|
|
{sol.role}
|
|
</div>
|
|
|
|
<h3 className="text-3xl md:text-4xl font-black text-white mb-6 leading-tight tracking-tighter uppercase">
|
|
{sol.title}
|
|
</h3>
|
|
|
|
<p className="text-slate-300 font-medium mb-8 text-lg">
|
|
{sol.description}
|
|
</p>
|
|
|
|
<ul className="space-y-4 mb-10">
|
|
{sol.features.map((feat) => (
|
|
<li key={feat} className="flex items-center gap-3 text-slate-300 font-bold">
|
|
<CheckCircle2 className="w-5 h-5 text-indigo-400" />
|
|
{feat}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Link
|
|
href={sol.role === "For Vendors" ? "/signup?role=vendor" : "/signup?role=supplier"}
|
|
className={`w-full py-5 rounded-2xl bg-gradient-to-r ${sol.gradient} text-white font-black shadow-xl shadow-indigo-600/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2 group`}
|
|
>
|
|
{sol.cta} <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|