Spaces:
Build error
Build error
File size: 3,274 Bytes
1295969 | 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 | import { motion } from "framer-motion";
import { Check, X, Zap, Target, BarChart, Lock, UserX, Share2 } from "lucide-react";
const comparisonData = [
{ feature: "Annual Fee", legacy: "$20–$100/yr", retro: "$0 Forever", icon: Zap },
{ feature: "Identity", legacy: "Personal Info Required", retro: "Completely Private", icon: UserX },
{ feature: "Payment Speed", legacy: "60–90 Days", retro: "Instant", icon: Zap },
{ feature: "Payout Accuracy", legacy: "Unverified Estimates", retro: "ZK-Proven", icon: Target },
{ feature: "Audio Monitoring", legacy: "Basic Tools", retro: "Pro Spectrum", icon: BarChart },
{ feature: "Security", legacy: "Centralized", retro: "Global Encryption", icon: Lock },
{ feature: "Ownership", legacy: "Platform-Owned", retro: "Sovereign", icon: Share2 },
];
const Comparison = () => {
return (
<section className="py-24 md:py-32 relative bg-background overflow-hidden">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/3 blur-[120px] rounded-full pointer-events-none" />
<div className="container mx-auto px-6 relative z-10">
{/* Offset header */}
<motion.div
className="mb-16 md:mb-20 lg:ml-[8%]"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 tracking-tight">
The <span className="text-gradient-primary">Upgrade</span>
</h2>
<p className="text-muted-foreground max-w-lg text-base">
Built for the way music is made and sold today.
</p>
</motion.div>
<div className="space-y-2 max-w-5xl mx-auto">
{comparisonData.map((item, i) => (
<motion.div
key={item.feature}
className="grid grid-cols-3 md:grid-cols-12 gap-px bg-border overflow-hidden"
initial={{ opacity: 0, x: i % 2 === 0 ? -15 : 15 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: i * 0.04 }}
>
{/* Feature */}
<div className="col-span-1 md:col-span-4 bg-card p-4 md:p-5 flex items-center gap-3">
<item.icon className="w-4 h-4 text-muted-foreground shrink-0 hidden sm:block" />
<span className="font-medium text-sm text-foreground">{item.feature}</span>
</div>
{/* Legacy */}
<div className="col-span-1 md:col-span-4 bg-card p-4 md:p-5 flex items-center gap-2">
<X className="w-3.5 h-3.5 text-destructive/50 shrink-0" />
<span className="text-sm text-muted-foreground">{item.legacy}</span>
</div>
{/* Retrosync */}
<div className="col-span-1 md:col-span-4 bg-primary/5 p-4 md:p-5 flex items-center gap-2">
<Check className="w-3.5 h-3.5 text-primary shrink-0" />
<span className="text-sm font-medium text-primary">{item.retro}</span>
</div>
</motion.div>
))}
</div>
</div>
</section>
);
};
export default Comparison;
|