94 lines
4.6 KiB
TypeScript
94 lines
4.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Check } from 'lucide-react';
|
|
|
|
export const Pricing: React.FC = () => {
|
|
return (
|
|
<section id="pricing" className="py-32 bg-background relative overflow-hidden scroll-mt-32">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
|
|
<div className="text-center mb-20">
|
|
<h2 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tighter">
|
|
Invest in Your System.
|
|
</h2>
|
|
<p className="text-xl text-gray-400 max-w-xl mx-auto">
|
|
Costs less than a single session with a personal trainer.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
{/* Monthly Plan */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="p-8 rounded-3xl bg-surfaceHighlight/30 border border-white/5 backdrop-blur-sm flex flex-col h-full hover:bg-surfaceHighlight/50 transition-all"
|
|
>
|
|
<div className="mb-8">
|
|
<h3 className="text-xl font-medium text-gray-300 mb-2">Monthly</h3>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-4xl font-bold text-white">$14.99</span>
|
|
<span className="text-gray-500">/mo</span>
|
|
</div>
|
|
</div>
|
|
<ul className="space-y-4 mb-8 flex-1">
|
|
{["Full AI Co-Pilot Access", "Dynamic Macro Adjustment", "Basic Training Integration", "Community Support"].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-gray-400">
|
|
<Check size={16} className="text-white" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button
|
|
onClick={() => alert('Redirecting to checkout...')}
|
|
className="w-full py-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold transition-all cursor-pointer"
|
|
>
|
|
Start Monthly
|
|
</button>
|
|
</motion.div>
|
|
|
|
{/* Annual Plan - Highlighted */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="relative p-8 rounded-3xl bg-black/40 border border-primary-500/30 backdrop-blur-md flex flex-col h-full shadow-[0_0_40px_rgba(6,182,212,0.1)]"
|
|
>
|
|
<div className="absolute top-0 right-0 bg-primary-500 text-black text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-2xl">
|
|
BEST VALUE
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<h3 className="text-xl font-medium text-primary-400 mb-2">Annual</h3>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-4xl font-bold text-white">$9.99</span>
|
|
<span className="text-gray-500">/mo</span>
|
|
</div>
|
|
<div className="text-sm text-gray-500 mt-2">Billed $119.88 yearly</div>
|
|
</div>
|
|
|
|
<ul className="space-y-4 mb-8 flex-1">
|
|
{["Everything in Monthly", "Unlimited Strategy Changes", "Priority Support", "Advanced Trend Analytics"].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-gray-300">
|
|
<div className="bg-primary-500/20 p-0.5 rounded-full">
|
|
<Check size={14} className="text-primary-400" />
|
|
</div>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
onClick={() => alert('Redirecting to checkout...')}
|
|
className="w-full py-4 rounded-xl bg-primary-500 hover:bg-primary-400 text-black font-bold transition-all shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-pointer"
|
|
>
|
|
Start 14-Day Free Trial
|
|
</button>
|
|
<p className="text-center text-xs text-gray-500 mt-4">Cancel anytime.</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |