modifying pricing

frontend/src/app/pricing/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Check } from "lucide-react";
+import { Check, Sparkles, Calendar, Rocket, Building2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
@@ -8,95 +8,178 @@ import { cn } from "@/lib/utils";
 export default function PricingPage() {
     const tiers = [
         {
-            name: "Free",
-            price: "$0",
-            description: "Perfect for experimenting and personal projects.",
+            name: "Free Trial",
+            price: "Free",
+            priceDetail: "5 videos included",
+            description: "Book a discovery call with our team and get 5 free videos to experience the magic.",
             features: [
-                "5 video credits per month",
-                "720p video quality",
-                "Standard generation speed",
-                "Public community access",
+                "5 free video generations",
+                "1080p HD video quality",
+                "Full feature access",
+                "1-on-1 onboarding session",
+                "Priority support during trial",
+                "No credit card required",
             ],
-            cta: "Get Started",
-            href: "/app",
+            cta: "Book a Call",
+            href: "https://calendly.com/aditya-vidsimplify/demo-call",
             popular: false,
+            icon: Calendar,
+            gradient: "from-emerald-500 to-teal-600",
+            borderColor: "border-emerald-500/30",
+            iconBg: "bg-emerald-500/10",
+            iconColor: "text-emerald-400",
         },
         {
-            name: "Pro",
-            price: "$29",
-            description: "For content creators and professionals.",
+            name: "Girl Founders",
+            price: "$0.099",
+            priceDetail: "per minute",
+            description: "Special pricing for women entrepreneurs building the future. We believe in supporting diversity in tech.",
             features: [
-                "50 video credits per month",
+                "Pay only for what you generate",
                 "1080p HD video quality",
                 "Fast generation speed",
                 "Priority support",
                 "Commercial usage rights",
-                "Remove watermarks",
+                "No watermarks",
+                "API access included",
+                "Dedicated Slack channel",
             ],
-            cta: "Upgrade to Pro",
-            href: "/auth/signin",
+            cta: "Apply Now",
+            href: "https://calendly.com/aditya-vidsimplify/demo-call",
             popular: true,
+            icon: Sparkles,
+            gradient: "from-pink-500 via-rose-500 to-violet-600",
+            borderColor: "border-pink-500/50",
+            iconBg: "bg-pink-500/10",
+            iconColor: "text-pink-400",
+            badge: "💜 Supporting Women in Tech",
+        },
+        {
+            name: "Regular",
+            price: "$0.12",
+            priceDetail: "per minute",
+            description: "Perfect for content creators, educators, and professionals who need quality animations.",
+            features: [
+                "Pay only for what you generate",
+                "1080p HD video quality",
+                "Fast generation speed",
+                "Priority support",
+                "Commercial usage rights",
+                "No watermarks",
+                "API access included",
+            ],
+            cta: "Get Started",
+            href: "https://calendly.com/aditya-vidsimplify/demo-call",
+            popular: false,
+            icon: Rocket,
+            gradient: "from-blue-500 to-cyan-500",
+            borderColor: "border-blue-500/30",
+            iconBg: "bg-blue-500/10",
+            iconColor: "text-blue-400",
         },
         {
             name: "Enterprise",
             price: "Custom",
-            description: "For teams and high-volume needs.",
+            priceDetail: "tailored for you",
+            description: "For teams with high-volume needs, custom integrations, and dedicated support requirements.",
             features: [
-                "Unlimited video credits",
-                "4K video quality",
-                "Instant generation",
+                "Volume-based pricing",
+                "4K video quality available",
+                "Instant generation priority",
                 "Dedicated account manager",
                 "Custom branding & templates",
-                "API access",
+                "White-label solutions",
+                "SLA guarantees",
+                "On-premise deployment option",
             ],
             cta: "Contact Sales",
-            href: "mailto:sales@vidsimplify.com",
+            href: "mailto:aditya@vidsimplify.com",
             popular: false,
+            icon: Building2,
+            gradient: "from-violet-500 to-purple-600",
+            borderColor: "border-violet-500/30",
+            iconBg: "bg-violet-500/10",
+            iconColor: "text-violet-400",
         },
     ];
 
     return (
         <div className="min-h-screen bg-slate-950 text-slate-200 py-24 px-4 sm:px-6 lg:px-8">
-            <div className="max-w-7xl mx-auto">
+            {/* Background gradient effects */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-pink-500/10 rounded-full blur-3xl"></div>
+                <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            </div>
+
+            <div className="max-w-7xl mx-auto relative z-10">
                 <div className="text-center mb-16">
-                    <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl mb-4">
+                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-pink-500/10 to-violet-500/10 border border-pink-500/20 mb-6">
+                        <Sparkles className="w-4 h-4 text-pink-400" />
+                        <span className="text-sm font-medium text-pink-300">Pay Per Minute Pricing</span>
+                    </div>
+                    <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl mb-4">
                         Simple, transparent pricing
                     </h1>
-                    <p className="text-xl text-slate-400 max-w-2xl mx-auto">
-                        Choose the plan that best fits your needs. All plans include access to our core AI generation features.
+                    <p className="text-xl text-slate-400 max-w-3xl mx-auto">
+                        Only pay for what you create. No subscriptions, no hidden fees.
+                        Generate stunning AI animations at a fraction of traditional costs.
                     </p>
                 </div>
 
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+                {/* Pricing comparison highlight */}
+                <div className="mb-12 p-6 rounded-2xl bg-gradient-to-r from-slate-900/80 to-slate-800/50 border border-white/5 backdrop-blur-sm text-center">
+                    <p className="text-slate-400 mb-2">💡 <span className="text-white font-medium">Example:</span> A 2-minute video costs just</p>
+                    <div className="flex flex-wrap justify-center gap-6 text-lg">
+                        <span className="text-pink-400 font-semibold">$0.20 for Girl Founders</span>
+                        <span className="text-slate-500">|</span>
+                        <span className="text-blue-400 font-semibold">$0.24 for Regular Users</span>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-1 gap-8 lg:grid-cols-4">
                     {tiers.map((tier) => (
                         <div
                             key={tier.name}
                             className={cn(
-                                "relative flex flex-col p-8 bg-slate-900/50 backdrop-blur-sm border rounded-2xl transition-all duration-200 hover:scale-105",
+                                "relative flex flex-col p-6 bg-slate-900/50 backdrop-blur-sm border rounded-2xl transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1",
                                 tier.popular
-                                    ? "border-blue-500/50 shadow-2xl shadow-blue-500/10 z-10 scale-105"
-                                    : "border-white/10 hover:border-white/20"
+                                    ? `${tier.borderColor} shadow-2xl shadow-pink-500/10 z-10`
+                                    : `${tier.borderColor} hover:border-white/20`
                             )}
                         >
-                            {tier.popular && (
-                                <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-blue-600 to-violet-600 text-white text-sm font-medium rounded-full shadow-lg">
-                                    Most Popular
+                            {tier.badge && (
+                                <div className={cn(
+                                    "absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-gradient-to-r text-white text-xs font-medium rounded-full shadow-lg whitespace-nowrap",
+                                    tier.gradient
+                                )}>
+                                    {tier.badge}
                                 </div>
                             )}
 
-                            <div className="mb-8">
-                                <h3 className="text-lg font-semibold text-white mb-2">{tier.name}</h3>
-                                <div className="flex items-baseline gap-1">
-                                    <span className="text-4xl font-bold text-white">{tier.price}</span>
-                                    {tier.price !== "Custom" && <span className="text-slate-500">/month</span>}
+                            <div className="mb-6">
+                                <div className={cn(
+                                    "w-12 h-12 rounded-xl flex items-center justify-center mb-4",
+                                    tier.iconBg
+                                )}>
+                                    <tier.icon className={cn("w-6 h-6", tier.iconColor)} />
+                                </div>
+                                <h3 className="text-xl font-semibold text-white mb-3">{tier.name}</h3>
+                                <div className="flex items-baseline gap-1 mb-1">
+                                    <span className={cn(
+                                        "text-4xl font-bold bg-gradient-to-r bg-clip-text text-transparent",
+                                        tier.gradient
+                                    )}>
+                                        {tier.price}
+                                    </span>
                                 </div>
-                                <p className="mt-4 text-sm text-slate-400">{tier.description}</p>
+                                <p className="text-sm text-slate-500 mb-3">{tier.priceDetail}</p>
+                                <p className="text-sm text-slate-400 leading-relaxed">{tier.description}</p>
                             </div>
 
-                            <ul className="space-y-4 mb-8 flex-1">
+                            <ul className="space-y-3 mb-6 flex-1">
                                 {tier.features.map((feature) => (
                                     <li key={feature} className="flex items-start gap-3 text-sm text-slate-300">
-                                        <Check className="h-5 w-5 text-blue-500 shrink-0" />
+                                        <Check className={cn("h-5 w-5 shrink-0 mt-0.5", tier.iconColor)} />
                                         <span>{feature}</span>
                                     </li>
                                 ))}
@@ -105,18 +188,65 @@ export default function PricingPage() {
                             <Button
                                 asChild
                                 className={cn(
-                                    "w-full",
+                                    "w-full font-semibold transition-all duration-200",
                                     tier.popular
-                                        ? "bg-blue-600 hover:bg-blue-700 text-white"
-                                        : "bg-slate-800 hover:bg-slate-700 text-white"
+                                        ? `bg-gradient-to-r ${tier.gradient} hover:opacity-90 text-white shadow-lg shadow-pink-500/25`
+                                        : "bg-slate-800 hover:bg-slate-700 text-white border border-white/10"
                                 )}
-                                variant={tier.popular ? "default" : "outline"}
                             >
                                 <Link href={tier.href}>{tier.cta}</Link>
                             </Button>
                         </div>
                     ))}
                 </div>
+
+                {/* FAQ / Additional Info Section */}
+                <div className="mt-20 text-center">
+                    <h2 className="text-2xl font-bold text-white mb-8">Frequently Asked Questions</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto text-left">
+                        <div className="p-6 rounded-xl bg-slate-900/50 border border-white/5">
+                            <h3 className="text-white font-semibold mb-2">How is video length calculated?</h3>
+                            <p className="text-slate-400 text-sm">
+                                We measure the final rendered video duration. A 2-minute video is charged for exactly 2 minutes of usage.
+                            </p>
+                        </div>
+                        <div className="p-6 rounded-xl bg-slate-900/50 border border-white/5">
+                            <h3 className="text-white font-semibold mb-2">What qualifies for Girl Founders pricing?</h3>
+                            <p className="text-slate-400 text-sm">
+                                Women-led startups and female entrepreneurs. Book a call with us to verify and get instant access to discounted rates.
+                            </p>
+                        </div>
+                        <div className="p-6 rounded-xl bg-slate-900/50 border border-white/5">
+                            <h3 className="text-white font-semibold mb-2">Are there any hidden fees?</h3>
+                            <p className="text-slate-400 text-sm">
+                                None at all. You pay only for the video minutes you generate. No platform fees, no setup costs, no surprises.
+                            </p>
+                        </div>
+                        <div className="p-6 rounded-xl bg-slate-900/50 border border-white/5">
+                            <h3 className="text-white font-semibold mb-2">Can I try before I buy?</h3>
+                            <p className="text-slate-400 text-sm">
+                                Absolutely! Book a discovery call with us and receive 5 free video generations to experience the full platform.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* CTA Section */}
+                <div className="mt-20 p-8 rounded-2xl bg-gradient-to-r from-pink-500/10 via-violet-500/10 to-blue-500/10 border border-white/10 text-center">
+                    <h2 className="text-2xl font-bold text-white mb-3">Ready to create stunning animations?</h2>
+                    <p className="text-slate-400 mb-6 max-w-2xl mx-auto">
+                        Book a quick call with our team. We&apos;ll walk you through the platform and set you up with 5 free videos to get started.
+                    </p>
+                    <Button
+                        asChild
+                        className="bg-gradient-to-r from-pink-500 to-violet-600 hover:opacity-90 text-white font-semibold px-8 py-3 text-lg shadow-lg shadow-pink-500/25"
+                    >
+                        <Link href="https://calendly.com/aditya-vidsimplify/demo-call">
+                            <Calendar className="w-5 h-5 mr-2" />
+                            Book Your Free Call
+                        </Link>
+                    </Button>
+                </div>
             </div>
         </div>
     );