121 lines
4.9 KiB
TypeScript
121 lines
4.9 KiB
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
import {
|
|
Zap,
|
|
MessageSquare,
|
|
BarChart3,
|
|
ShieldCheck,
|
|
LayoutDashboard,
|
|
RefreshCcw
|
|
} from "lucide-react"
|
|
|
|
const features = [
|
|
{
|
|
title: "Dynamic Shopify Sync",
|
|
description: "Real-time product and inventory synchronization across your entire vendor network.",
|
|
icon: RefreshCcw,
|
|
color: "text-emerald-400",
|
|
bg: "bg-emerald-500/10",
|
|
border: "border-emerald-500/20"
|
|
},
|
|
{
|
|
title: "Encrypted E2E Chat",
|
|
description: "Secure, real-time communication between vendors and suppliers with full encryption.",
|
|
icon: MessageSquare,
|
|
color: "text-blue-400",
|
|
bg: "bg-blue-500/10",
|
|
border: "border-blue-500/20"
|
|
},
|
|
{
|
|
title: "Advanced Analytics",
|
|
description: "Deep insights into sales performance, order trends, and connection efficiency.",
|
|
icon: BarChart3,
|
|
color: "text-purple-400",
|
|
bg: "bg-purple-500/10",
|
|
border: "border-purple-500/20"
|
|
},
|
|
{
|
|
title: "Premium Dashboard",
|
|
description: "A state-of-the-art glassmorphic interface designed for clarity and speed.",
|
|
icon: LayoutDashboard,
|
|
color: "text-orange-400",
|
|
bg: "bg-orange-500/10",
|
|
border: "border-orange-500/20"
|
|
},
|
|
{
|
|
title: "Military-Grade Security",
|
|
description: "Multi-layer protection for all your trade data and sensitive business relationships.",
|
|
icon: ShieldCheck,
|
|
color: "text-red-400",
|
|
bg: "bg-red-500/10",
|
|
border: "border-red-500/20"
|
|
},
|
|
{
|
|
title: "Instant Scaling",
|
|
description: "Add vendors or suppliers in seconds and watch your business ecosystem grow.",
|
|
icon: Zap,
|
|
color: "text-yellow-400",
|
|
bg: "bg-yellow-500/10",
|
|
border: "border-yellow-500/20"
|
|
}
|
|
]
|
|
|
|
export function LandingFeatures() {
|
|
return (
|
|
<section id="features" className="py-24 relative overflow-hidden">
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center mb-20">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="text-4xl md:text-5xl font-black tracking-tighter text-white mb-6"
|
|
>
|
|
EVERYTHING YOU NEED TO <br />
|
|
<span className="text-indigo-400">DOMINATE THE MARKET.</span>
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="text-slate-400 max-w-2xl mx-auto font-medium"
|
|
>
|
|
We built JUNO to be the ultimate operating system for modern commerce.
|
|
Fast, secure, and beautiful.
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{features.map((feature, index) => (
|
|
<motion.div
|
|
key={feature.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.1 }}
|
|
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
|
className={`p-8 rounded-3xl border border-white/5 bg-white/[0.02] backdrop-blur-sm group hover:bg-white/[0.04] transition-all duration-300 relative overflow-hidden`}
|
|
>
|
|
{/* Accent Glow */}
|
|
<div className={`absolute top-0 right-0 w-32 h-32 ${feature.bg} blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
|
|
|
|
<div className={`w-14 h-14 rounded-2xl ${feature.bg} flex items-center justify-center mb-6 border ${feature.border} group-hover:scale-110 transition-transform duration-500`}>
|
|
<feature.icon className={`w-7 h-7 ${feature.color}`} />
|
|
</div>
|
|
|
|
<h3 className="text-xl font-black text-white mb-4 tracking-tight uppercase">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-slate-400 font-medium leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|