80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
|
import { motion } from 'framer-motion';
|
||
|
|
import { Layers, Shield, Settings, MousePointerClick, Smartphone, BarChart3 } from 'lucide-react';
|
||
|
|
import { cn } from '../lib/utils';
|
||
|
|
|
||
|
|
export default function Features() {
|
||
|
|
const features = [
|
||
|
|
{
|
||
|
|
icon: <Layers />,
|
||
|
|
title: "Modular Structure",
|
||
|
|
description: "Build once, reuse infinitely. Component-based architecture for your digital products."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <Shield />,
|
||
|
|
title: "Bank-grade Security",
|
||
|
|
description: "Enterprise-level protection for your content and customer data out of the box."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <Settings />,
|
||
|
|
title: "Zero Setup Required",
|
||
|
|
description: "Skip the technical headaches. Everything works seamlessly perfectly from day one."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <MousePointerClick />,
|
||
|
|
title: "One-Click Deployment",
|
||
|
|
description: "Push your products live to thousands of customers with a single action."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <Smartphone />,
|
||
|
|
title: "Mobile Optimized",
|
||
|
|
description: "Flawless experience across all devices. Never lose a sale due to poor UX."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <BarChart3 />,
|
||
|
|
title: "Advanced Analytics",
|
||
|
|
description: "Deep insights into customer behavior, drop-off points, and conversion rates."
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="py-24 bg-neutral-950/50" id="features">
|
||
|
|
<div className="container mx-auto px-6 max-w-7xl">
|
||
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-8">
|
||
|
|
<div className="max-w-2xl">
|
||
|
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
|
||
|
|
Everything you need. <br/><span className="text-neutral-500">Nothing you don't.</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-lg text-muted-foreground font-light">
|
||
|
|
A comprehensive toolkit designed specifically for modern digital creators and founders.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button className="h-12 px-6 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 text-white font-medium text-sm transition-colors whitespace-nowrap self-start md:self-auto">
|
||
|
|
View All Features
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
{features.map((feature, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||
|
|
className="p-8 rounded-3xl bg-neutral-900/30 border border-white/5 hover:bg-neutral-800/50 hover:border-white/10 transition-all group"
|
||
|
|
>
|
||
|
|
<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 text-neutral-300 group-hover:text-white group-hover:scale-110 transition-all">
|
||
|
|
{feature.icon}
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-medium mb-3">{feature.title}</h3>
|
||
|
|
<p className="text-neutral-400 font-light leading-relaxed text-sm">
|
||
|
|
{feature.description}
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|