Update src/app/pricing/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code, Award, UsersRound, Globe, Handshake } from "lucide-react";
+
+export default function AboutPage() {
+    const navItems = [
+        { name: "Features", id: "/#features" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/#contact" }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Features", href: "/#features" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Integrations", href: "#" },
+                { label: "Changelog", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About", href: "/about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Documentation", href: "#" },
+                { label: "Help Center", href: "#" },
+                { label: "Community", href: "#" },
+                { label: "Status", href: "#" },
+            ],
+        },
+        {
+            title: "Legal",            items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Security", href: "#" },
+            ],
+        },
+    ];
+
+    return (
+        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="SaasApp"
+                    button={{ text: "Get Started", href: "/#" }}
+                />
+                <div id="about" data-section="about">
+                    <AboutMetric
+                        title="About Our Company"
+                        metrics={[
+                            { icon: UsersRound, label: "Team Members", value: "50+" },
+                            { icon: Award, label: "Years in Business", value: "10+" },
+                            { icon: Globe, label: "Countries Served", value: "30+" },
+                            { icon: Handshake, label: "Happy Clients", value: "500+" },
+                        ]}
+                        metricsAnimation="slide-up"
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <FooterBaseReveal
+                    columns={footerColumns}
+                    copyrightText="2024 SaasApp. All rights reserved."
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/contact/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Mail, HelpCircle, Zap, Shield, Rocket, Target, Sparkles, Crown, Users, Layers, Code } from "lucide-react";
+
+export default function ContactPage() {
+    const navItems = [
+        { name: "Features", id: "/#features" },
+        { name: "Pricing", id: "/#pricing" },
+        { name: "About", id: "/#about" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="SaasApp"
+                    button={{ text: "Get Started", href: "/#" }}
+                />
+                <ContactSplit
+                    tag="Get in Touch"
+                    title="We'd Love to Hear From You"
+                    description="Have questions, feedback, or just want to say hello? Reach out to us using the form below."
+                    tagIcon={Mail}
+                    background={{ variant: "plain" }}
+                    useInvertedBackground={false}
+                    inputPlaceholder="Your Email"
+                    buttonText="Send Message"
+                    termsText="By sending this message you're confirming that you agree with our Privacy Policy."
+                    onSubmit={(email) => console.log('Contact form submitted with email:', email)}
+                />
+                <FaqDouble
+                    tag="Support"
+                    title="Frequently Asked Questions"
+                    description="Find answers to the most common questions about our service."
+                    tagIcon={HelpCircle}
+                    faqsAnimation="blur-reveal"
+                    textboxLayout="default"
+                    useInvertedBackground={true}
+                    faqs={[
+                        { id: '1', title: 'How can I contact support?', content: 'You can reach our support team via email at support@saasapp.com or by filling out the contact form on this page.' },
+                        { id: '2', title: 'What are your operating hours?', content: 'Our support team is available Monday to Friday, 9 AM to 5 PM EST.' },
+                        { id: '3', title: 'Do you offer a knowledge base?', content: 'Yes, we have a comprehensive knowledge base with articles and tutorials to help you get started.' },
+                        { id: '4', title: 'Where can I find pricing information?', content: 'Our pricing details are available on the pricing page. You can find a link in the navigation bar.' },
+                    ]}
+                />
+                <FooterBaseReveal
+                    columns={[
+                        {
+                            title: "Product",                            items: [
+                                { label: "Features", href: "/#features" },
+                                { label: "Pricing", href: "/#pricing" },
+                                { label: "Integrations", href: "#" },
+                                { label: "Changelog", href: "#" },
+                            ],
+                        },
+                        {
+                            title: "Company",                            items: [
+                                { label: "About", href: "/#about" },
+                                { label: "Blog", href: "#" },
+                                { label: "Careers", href: "#" },
+                                { label: "Contact", href: "/contact" },
+                            ],
+                        },
+                        {
+                            title: "Resources",                            items: [
+                                { label: "Documentation", href: "#" },
+                                { label: "Help Center", href: "#" },
+                                { label: "Community", href: "#" },
+                                { label: "Status", href: "#" },
+                            ],
+                        },
+                        {
+                            title: "Legal",                            items: [
+                                { label: "Privacy", href: "#" },
+                                { label: "Terms", href: "#" },
+                                { label: "Security", href: "#" },
+                            ],
+                        },
+                    ]}
+                    copyrightText="2024 SaasApp. All rights reserved."
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -9,15 +9,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
 import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+
 import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";
 
 export default function SaasTemplatePage() {
     const navItems = [
-        { name: "Features", id: "features" },
+        { name: "Features", id: "/#features" },
-        { name: "Pricing", id: "pricing" },
+        { name: "Pricing", id: "/#pricing" },
-        { name: "About", id: "about" },
+        { name: "About", id: "/#about" },
-        { name: "Contact", id: "contact" },
+        { name: "Contact", id: "/contact" },
     ];
 
     const avatars = [
@@ -29,28 +29,18 @@ export default function SaasTemplatePage() {
 
     const features: FeatureCard[] = [
         {
-            bentoComponent: "globe",
+            bentoComponent: "globe",            title: "Global Reach",            description: "Connect with users worldwide through our distributed infrastructure"},
-            title: "Global Reach",
-            description: "Connect with users worldwide through our distributed infrastructure",
-        },
         {
-            bentoComponent: "marquee",
+            bentoComponent: "marquee",            variant: "text",            centerIcon: Zap,
-            variant: "text",
-            centerIcon: Zap,
             texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
-            title: "Built for Speed",
+            title: "Built for Speed",            description: "Lightning fast performance with optimized delivery"},
-            description: "Lightning fast performance with optimized delivery",
-        },
         {
-            bentoComponent: "3d-stack-cards",
+            bentoComponent: "3d-stack-cards",            items: [
-            items: [
                 { icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
                 { icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
                 { icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
             ],
-            title: "Built for Scale",
+            title: "Built for Scale",            description: "Deploy to any region with automatic failover support"}
-            description: "Deploy to any region with automatic failover support",
-        }
     ];
 
     return (
@@ -69,12 +59,10 @@ export default function SaasTemplatePage() {
                     description="Create stunning, responsive websites with our comprehensive component library designed"
                     buttons={[
                         {
-                            text: "Get Started",
+                            text: "Get Started",                            onClick: () => console.log("Get Started clicked"),
-                            onClick: () => console.log("Get Started clicked"),
                         },
                         {
-                            text: "Learn More",
+                            text: "Learn More",                            onClick: () => console.log("Learn More clicked"),
-                            onClick: () => console.log("Learn More clicked"),
                         },
                     ]}
                     marqueeItems={[
@@ -105,24 +93,16 @@ export default function SaasTemplatePage() {
                     features={[
                         {
                             icon: Layers,
-                            title: "Modular Architecture",
+                            title: "Modular Architecture",                            description: "Build with composable components that scale with your needs"},
-                            description: "Build with composable components that scale with your needs",
-                        },
                         {
                             icon: Code,
-                            title: "Developer Experience",
+                            title: "Developer Experience",                            description: "Clean APIs and comprehensive documentation for faster development"},
-                            description: "Clean APIs and comprehensive documentation for faster development",
-                        },
                         {
                             icon: Shield,
-                            title: "Enterprise Security",
+                            title: "Enterprise Security",                            description: "Bank-level encryption and compliance with industry standards"},
-                            description: "Bank-level encryption and compliance with industry standards",
-                        },
                         {
                             icon: Rocket,
-                            title: "Lightning Fast",
+                            title: "Lightning Fast",                            description: "Optimized for performance with sub-second response times"},
-                            description: "Optimized for performance with sub-second response times",
-                        },
                     ]}
                 />
                 <TestimonialCardFifteen
@@ -144,91 +124,51 @@ export default function SaasTemplatePage() {
                     useInvertedBackground={false}
                     plans={[
                         {
-                            id: "starter",
+                            id: "starter",                            badge: "Starter",                            badgeIcon: Zap,
-                            badge: "Starter",
+                            price: "$19/mo",                            subtitle: "Perfect for individuals",                            buttons: [
-                            badgeIcon: Zap,
-                            price: "$19/mo",
-                            subtitle: "Perfect for individuals",
-                            buttons: [
                                 { text: "Get Started", onClick: () => console.log("Starter clicked") },
                             ],
                             features: [
-                                "Up to 5 projects",
+                                "Up to 5 projects",                                "Basic analytics",                                "24/7 email support",                                "API access"],
-                                "Basic analytics",
-                                "24/7 email support",
-                                "API access",
-                            ],
                         },
                         {
-                            id: "pro",
+                            id: "pro",                            badge: "Pro",                            badgeIcon: Rocket,
-                            badge: "Pro",
+                            price: "$49/mo",                            subtitle: "For growing teams",                            buttons: [
-                            badgeIcon: Rocket,
-                            price: "$49/mo",
-                            subtitle: "For growing teams",
-                            buttons: [
                                 { text: "Get Started", onClick: () => console.log("Pro clicked") },
                             ],
                             features: [
-                                "Unlimited projects",
+                                "Unlimited projects",                                "Advanced analytics",                                "Priority support",                                "Custom integrations",                                "Team collaboration"],
-                                "Advanced analytics",
-                                "Priority support",
-                                "Custom integrations",
-                                "Team collaboration",
-                            ],
                         },
                         {
-                            id: "enterprise",
+                            id: "enterprise",                            badge: "Enterprise",                            badgeIcon: Crown,
-                            badge: "Enterprise",
+                            price: "$99/mo",                            subtitle: "For large organizations",                            buttons: [
-                            badgeIcon: Crown,
-                            price: "$99/mo",
-                            subtitle: "For large organizations",
-                            buttons: [
                                 { text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
                             ],
                             features: [
-                                "Everything in Pro",
+                                "Everything in Pro",                                "Dedicated account manager",                                "Custom SLA",                                "On-premise deployment",                                "Advanced security"],
-                                "Dedicated account manager",
-                                "Custom SLA",
-                                "On-premise deployment",
-                                "Advanced security",
-                            ],
                         },
                     ]}
                 />
-                <ContactCenter
-                    tag="Contact"
-                    tagIcon={Mail}
-                    title="Ready to get started?"
-                    description="Join thousands of developers building better products with our platform."
-                    background={{ variant: "animated-grid" }}
-                    useInvertedBackground={false}
-                    inputPlaceholder="Enter your email"
-                    buttonText="Get Early Access"
-                    onSubmit={(email) => console.log("Email submitted:", email)}
-                />
                 <FooterBaseReveal
                     columns={[
                         {
-                            title: "Product",
+                            title: "Product",                            items: [
-                            items: [
+                                { label: "Features", href: "/#features" },
-                                { label: "Features", href: "#features" },
+                                { label: "Pricing", href: "/#pricing" },
-                                { label: "Pricing", href: "#pricing" },
                                 { label: "Integrations", href: "#" },
                                 { label: "Changelog", href: "#" },
                             ],
                         },
                         {
-                            title: "Company",
+                            title: "Company",                            items: [
-                            items: [
+                                { label: "About", href: "/#about" },
-                                { label: "About", href: "#about" },
                                 { label: "Blog", href: "#" },
                                 { label: "Careers", href: "#" },
-                                { label: "Contact", href: "#contact" },
+                                { label: "Contact", href: "/contact" },
                             ],
                         },
                         {
-                            title: "Resources",
+                            title: "Resources",                            items: [
-                            items: [
                                 { label: "Documentation", href: "#" },
                                 { label: "Help Center", href: "#" },
                                 { label: "Community", href: "#" },
@@ -236,8 +176,7 @@ export default function SaasTemplatePage() {
                             ],
                         },
                         {
-                            title: "Legal",
+                            title: "Legal",                            items: [
-                            items: [
                                 { label: "Privacy", href: "#" },
                                 { label: "Terms", href: "#" },
                                 { label: "Security", href: "#" },

src/app/pricing/page.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code, DollarSign, Gem, Star } from "lucide-react";
+
+export default function PricingPage() {
+    const navItems = [
+        { name: "Features", id: "/#features" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/#contact" }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Features", href: "/#features" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Integrations", href: "#" },
+                { label: "Changelog", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About", href: "/about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Documentation", href: "#" },
+                { label: "Help Center", href: "#" },
+                { label: "Community", href: "#" },
+                { label: "Status", href: "#" },
+            ],
+        },
+        {
+            title: "Legal",            items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Security", href: "#" },
+            ],
+        },
+    ];
+
+    return (
+        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="SaasApp"
+                    button={{ text: "Get Started", href: "/#" }}
+                />
+                <div id="pricing" data-section="pricing">
+                    <PricingCardNine
+                        tag="Pricing"
+                        tagIcon={DollarSign}
+                        title="Simple, transparent pricing"
+                        description="Choose the plan that works best for you. All plans include a 14-day free trial."
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
+                        plans={[
+                            {
+                                id: "starter",                                title: "Starter",                                price: "$19",                                period: "/month",                                features: [
+                                    "Up to 5 projects",                                    "Basic analytics",                                    "24/7 email support",                                    "API access"],
+                                button: { text: "Get Started", href: "#" },
+                            },
+                            {
+                                id: "pro",                                title: "Pro",                                price: "$49",                                period: "/month",                                features: [
+                                    "Unlimited projects",                                    "Advanced analytics",                                    "Priority support",                                    "Custom integrations",                                    "Team collaboration"],
+                                button: { text: "Get Started", href: "#" },
+                            },
+                            {
+                                id: "enterprise",                                title: "Enterprise",                                price: "$99",                                period: "/month",                                features: [
+                                    "Everything in Pro",                                    "Dedicated account manager",                                    "Custom SLA",                                    "On-premise deployment",                                    "Advanced security"],
+                                button: { text: "Contact Sales", href: "#" },
+                            },
+                        ]}
+                    />
+                </div>
+                <FooterBaseReveal
+                    columns={footerColumns}
+                    copyrightText="2024 SaasApp. All rights reserved."
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}