Spaces:
Build error
Build error
File size: 3,923 Bytes
0b66a33 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import { Zap, Shield, Globe, GitBranch, Palette, Database, Lock, Cpu } from 'lucide-react';
const features = [
{
icon: Zap,
title: 'Lightning Fast',
description: 'Go from idea to deployed app in under 60 seconds. Our AI understands your intent and generates production-quality code instantly.',
color: 'from-yellow-400 to-orange-500',
},
{
icon: Shield,
title: 'Type-Safe by Default',
description: 'Every line of generated code is fully typed with TypeScript. Catch errors before they reach your users.',
color: 'from-blue-400 to-cyan-500',
},
{
icon: Globe,
title: 'Deploy Anywhere',
description: 'One-click deployments to Vercel, Netlify, or any platform. Your app goes live the moment you ship it.',
color: 'from-green-400 to-emerald-500',
},
{
icon: GitBranch,
title: 'Git-Native Workflow',
description: 'Built-in version control with visual diffs. Roll back any change, branch with confidence, and collaborate seamlessly.',
color: 'from-purple-400 to-violet-500',
},
{
icon: Palette,
title: 'Beautiful by Default',
description: 'Every component follows design best practices. Responsive, accessible, and stunning on every device.',
color: 'from-pink-400 to-rose-500',
},
{
icon: Database,
title: 'Full-Stack Supabase',
description: 'Integrated Supabase backend with auth, database, and storage. Your app is full-stack from the first prompt.',
color: 'from-brand-400 to-indigo-500',
},
{
icon: Lock,
title: 'Enterprise Security',
description: 'SOC 2 compliant infrastructure. Your code and data are encrypted at rest and in transit. Always.',
color: 'from-red-400 to-pink-500',
},
{
icon: Cpu,
title: 'AI That Understands',
description: 'Context-aware AI that remembers your project structure, patterns, and preferences across sessions.',
color: 'from-teal-400 to-cyan-500',
},
];
export default function Features() {
return (
<section id="features" className="py-24 px-4 sm:px-6 lg:px-8 relative">
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand-500/20 to-transparent" />
</div>
<div className="max-w-7xl mx-auto">
<div className="text-center mb-16">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 mb-4">
<span className="text-xs font-medium text-brand-300 uppercase tracking-wider">Features</span>
</div>
<h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
Everything you need to <span className="gradient-text">ship fast</span>
</h2>
<p className="text-lg text-surface-300 max-w-2xl mx-auto">
From frontend to backend, design to deployment — Lovable handles the full stack so you can focus on what matters.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{features.map((feature, index) => (
<div
key={feature.title}
className="group glass-card p-6 hover:bg-white/[0.08] transition-all duration-300 hover:-translate-y-1"
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
<feature.icon className="w-5 h-5 text-white" />
</div>
<h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
<p className="text-sm text-surface-300 leading-relaxed">{feature.description}</p>
</div>
))}
</div>
</div>
</section>
);
} |