117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { Tablet, Rocket, Crown, Check } from "lucide-react";
|
|
import { GridPattern } from "./GridPattern";
|
|
|
|
interface Package {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
timeline: string;
|
|
priceRange: string;
|
|
features: string[];
|
|
}
|
|
|
|
const packages: Package[] = [
|
|
{
|
|
icon: <Tablet className="w-8 h-8" />,
|
|
title: "The Blueprint",
|
|
timeline: "Product Definition in 1 Week",
|
|
priceRange: "$1,500 - $2,500",
|
|
features: [
|
|
"Strategy & roadmap",
|
|
"User flows & wireframes",
|
|
"Technical architecture"
|
|
]
|
|
},
|
|
{
|
|
icon: <Rocket className="w-8 h-8" />,
|
|
title: "The Prototype",
|
|
timeline: "Working Demo in 2 Weeks",
|
|
priceRange: "$6,000 - $8,000",
|
|
features: [
|
|
"Functional web or mobile prototype",
|
|
"Core features implemented",
|
|
"User testing ready"
|
|
]
|
|
},
|
|
{
|
|
icon: <Crown className="w-8 h-8" />,
|
|
title: "The Launchpad",
|
|
timeline: "Market-Ready MVP in 6 Weeks",
|
|
priceRange: "$20,000 - $30,000",
|
|
features: [
|
|
"Full website or app",
|
|
"SEO-optimized & scalable",
|
|
"Ready for launch"
|
|
]
|
|
}
|
|
];
|
|
|
|
export const PackagesSection = () => {
|
|
return (
|
|
<section className="relative py-20 bg-background overflow-hidden">
|
|
<GridPattern strokeDasharray="4 2" />
|
|
|
|
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-4">
|
|
Choose Your Speed. We'll Deliver Your Launch.
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
|
{packages.map((pkg, index) => (
|
|
<motion.div
|
|
key={pkg.title}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.15 }}
|
|
viewport={{ once: true }}
|
|
className="group relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-[20px] p-8 hover:border-accent/50 hover:shadow-xl hover:shadow-accent/5 hover:scale-[1.02] transition-all duration-300"
|
|
>
|
|
{/* Icon */}
|
|
<div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
|
|
{pkg.icon}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
|
|
{pkg.title}
|
|
</h3>
|
|
|
|
{/* Timeline */}
|
|
<p className="text-muted-foreground mb-4">
|
|
{pkg.timeline}
|
|
</p>
|
|
|
|
{/* Price Range */}
|
|
<div className="text-3xl font-semibold text-foreground mb-8">
|
|
{pkg.priceRange}
|
|
</div>
|
|
|
|
{/* Features List */}
|
|
<ul className="space-y-4">
|
|
{pkg.features.map((feature, idx) => (
|
|
<li key={idx} className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<Check className="w-5 h-5 text-accent" />
|
|
</div>
|
|
<span className="text-muted-foreground leading-relaxed">
|
|
{feature}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|