Spaces:
Build error
Build error
File size: 2,703 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 | import { motion } from "framer-motion";
import { Upload, Cpu, Globe, CheckCircle } from "lucide-react";
const steps = [
{ icon: Upload, title: "Upload Metadata", description: "Submit song details anonymously — no legal names needed." },
{ icon: Cpu, title: "Verify Ownership", description: "Automatic digital provenance record for your music." },
{ icon: Globe, title: "Distribute Globally", description: "Instantly delivered to 150+ stores worldwide." },
{ icon: CheckCircle, title: "Get Paid Instantly", description: "Earnings available immediately, no waiting." },
];
const HowItWorks = () => {
return (
<section className="py-24 md:py-32 relative overflow-hidden bg-card">
<div className="container mx-auto px-6">
<motion.div
className="mb-16 md:mb-20 max-w-lg lg:ml-auto lg:mr-[10%] lg:text-right"
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">
How It <span className="text-gradient-primary">Works</span>
</h2>
<p className="text-muted-foreground text-base">
Every part of distribution automated so you stay creative.
</p>
</motion.div>
{/* Staggered two-column layout */}
<div className="grid sm:grid-cols-2 gap-6 lg:gap-8 max-w-4xl mx-auto">
{steps.map((step, i) => (
<motion.div
key={step.title}
className={`p-6 md:p-8 bg-background border border-border hover:border-primary/30 transition-all group ${
i % 2 !== 0 ? "sm:mt-12" : ""
}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: i * 0.1 }}
>
<div className="flex items-start gap-4">
<div className="w-12 h-12 shrink-0 bg-secondary border border-border flex items-center justify-center group-hover:border-primary/50 transition-colors">
<step.icon className="w-5 h-5 text-primary" />
</div>
<div>
<div className="text-xs font-mono text-muted-foreground mb-1">Step {i + 1}</div>
<h3 className="text-lg font-bold mb-2 tracking-tight">{step.title}</h3>
<p className="text-sm text-muted-foreground leading-relaxed">{step.description}</p>
</div>
</div>
</motion.div>
))}
</div>
</div>
</section>
);
};
export default HowItWorks;
|