adding navbar correctly

frontend/src/app/pricing/page.tsx

@@ -4,6 +4,7 @@ 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";
+import { Navbar } from "@/components/landing/Navbar";
 
 export default function PricingPage() {
     const tiers = [
@@ -104,150 +105,153 @@ export default function PricingPage() {
     ];
 
     return (
-        <div className="min-h-screen bg-slate-950 text-slate-200 py-24 px-4 sm:px-6 lg:px-8">
-            {/* 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">
-                    <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-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>
+        <>
+            <Navbar />
+            <div className="min-h-screen bg-slate-950 text-slate-200 py-24 px-4 sm:px-6 lg:px-8">
+                {/* 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>
 
-                {/* 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 className="max-w-7xl mx-auto relative z-10">
+                    <div className="text-center mb-16">
+                        <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-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>
 
-                <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-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
-                                    ? `${tier.borderColor} shadow-2xl shadow-pink-500/10 z-10`
-                                    : `${tier.borderColor} hover:border-white/20`
-                            )}
-                        >
-                            {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>
-                            )}
+                    {/* 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="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",
+                    <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-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
+                                        ? `${tier.borderColor} shadow-2xl shadow-pink-500/10 z-10`
+                                        : `${tier.borderColor} hover:border-white/20`
+                                )}
+                            >
+                                {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.price}
-                                    </span>
+                                        {tier.badge}
+                                    </div>
+                                )}
+
+                                <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="text-sm text-slate-500 mb-3">{tier.priceDetail}</p>
+                                    <p className="text-sm text-slate-400 leading-relaxed">{tier.description}</p>
                                 </div>
-                                <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-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={cn("h-5 w-5 shrink-0 mt-0.5", tier.iconColor)} />
-                                        <span>{feature}</span>
-                                    </li>
-                                ))}
-                            </ul>
+                                <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={cn("h-5 w-5 shrink-0 mt-0.5", tier.iconColor)} />
+                                            <span>{feature}</span>
+                                        </li>
+                                    ))}
+                                </ul>
 
-                            <Button
-                                asChild
-                                className={cn(
-                                    "w-full font-semibold transition-all duration-200",
-                                    tier.popular
-                                        ? `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"
-                                )}
-                            >
-                                <Link href={tier.href}>{tier.cta}</Link>
-                            </Button>
-                        </div>
-                    ))}
-                </div>
+                                <Button
+                                    asChild
+                                    className={cn(
+                                        "w-full font-semibold transition-all duration-200",
+                                        tier.popular
+                                            ? `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"
+                                    )}
+                                >
+                                    <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>
+                    {/* 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>
-                </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>
+                    {/* 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>
-        </div>
+        </>
     );
 }