Update src/app/page.tsx

src/app/page.tsx

@@ -4,19 +4,20 @@ import ReactLenis from "lenis/react";
 import HeroCentered from "@/components/sections/hero/HeroCentered";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
-import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
 import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactForm from "@/components/form/ContactForm";
-import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import { Zap, Shield, Sparkles, Mail, Lock, BarChart } from "lucide-react";
 
 export default function SaasTemplatePage() {
     const navItems = [
         { name: "Features", id: "features" },
+        { name: "Testimonials", id: "testimonials" },
         { name: "Pricing", id: "pricing" },
-        { name: "About", id: "about" },
+        { name: "FAQ", id: "faq" },
         { name: "Contact", id: "contact" },
     ];
 
@@ -28,225 +29,59 @@ export default function SaasTemplatePage() {
     ];
 
     const features: FeatureCard[] = [
-        {
+        { bentoComponent: "globe", title: "Global Reach", description: "Connect with users worldwide" },
-            bentoComponent: "globe",
+        { bentoComponent: "marquee", variant: "text", centerIcon: Zap, texts: ["Fast", "Reliable"], title: "Built for Speed", description: "Lightning fast delivery" },
-            title: "Global Reach",
-            description: "Connect with users worldwide through our distributed infrastructure",
-        },
-        {
-            bentoComponent: "marquee",
-            variant: "text",
-            centerIcon: Zap,
-            texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
-            title: "Built for Speed",
-            description: "Lightning fast performance with optimized delivery",
-        },
         { 
             bentoComponent: "3d-stack-cards", 
+            title: "Scaleable", 
+            description: "Reliable infrastructure", 
             items: [ 
-                { icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
+                { icon: Shield, title: "Security", subtitle: "Bank-level", detail: "256-bit encryption" },
-                { icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
+                { icon: Lock, title: "Privacy", subtitle: "User-focused", detail: "Zero data sharing" },
-                { icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
+                { icon: BarChart, title: "Analytics", subtitle: "Real-time", detail: "Advanced dashboarding" }
-            ],
+            ] 
-            title: "Built for Scale",
-            description: "Deploy to any region with automatic failover support",
         }
     ];
 
     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
+                <NavbarLayoutFloatingInline navItems={navItems} brandName="SaasApp" button={{ text: "Get Started", href: "#contact" }} />
-                    navItems={navItems}
+                <HeroCentered background={{ variant: "rotated-rays-animated-grid" }} avatars={avatars} avatarText="Trusted by 1000+ users" title="Build Modern Web Experiences" description="Create stunning, responsive websites with our comprehensive component library" buttons={[{ text: "Get Started", href: "#contact" }]} />
-                    brandName="SaasApp"
+                <FeatureBento features={features} animationType="none" tag="Features" title="Powerful Features" description="Everything you need to build and scale" textboxLayout="default" useInvertedBackground={false} />
-                    button={{ text: "Get Started", href: "#" }}
+                <div id="testimonials" data-section="testimonials">
-                />
+                    <TestimonialCardFive 
-                <HeroCentered
+                        title="Customer Stories"
-                    background={{ variant: "rotated-rays-animated-grid" }}
+                        description="What our users say about us"
-                    avatars={avatars}
+                        textboxLayout="default"
-                    avatarText="Trusted by 1000+ users"
+                        useInvertedBackground={false}
-                    title="Build Modern Web Experiences-Out of the world california apple"
+                        testimonials={[
-                    description="Create stunning, responsive websites with our comprehensive component library designed"
+                            { id: "1", name: "Sarah Chen", date: "2024-05-20", title: "CTO", quote: "Transformed our workflow completely!", tag: "Pro", avatarSrc: avatars[0].src }
-                    buttons={[
+                        ]}
-                        {
+                    />
-                            text: "Get Started",
+                </div>
-                            onClick: () => console.log("Get Started clicked"),
+                <PricingCardEight tag="Pricing" tagIcon={Sparkles} title="Transparent pricing" description="Choose the plan that works best for you" animationType="opacity" textboxLayout="default" useInvertedBackground={false} plans={[]} />
-                        },
+                <div id="faq" data-section="faq">
-                        {
+                    <FaqSplitText 
-                            text: "Learn More",
+                        sideTitle="Frequently Asked Questions"
-                            onClick: () => console.log("Learn More clicked"),
+                        sideDescription="Quick answers to your questions"
-                        },
+                        faqs={[{ id: "1", title: "Is there a trial?", content: "Yes, 14 days free." }]}
-                    ]}
+                        faqsAnimation="slide-up"
-                    marqueeItems={[
+                        useInvertedBackground={false}
-                        { type: "text-icon", text: "Lightning Fast", icon: Zap },
+                    />
-                        { type: "text-icon", text: "Enterprise Security", icon: Shield },
+                </div>
-                        { type: "text-icon", text: "99.9% Uptime", icon: Rocket },
+                <div id="contact" data-section="contact">
-                        { type: "text-icon", text: "Precision Targeting", icon: Target },
+                    <ContactForm 
-                        { type: "text-icon", text: "AI Powered", icon: Sparkles },
+                        title="Get in touch"
-                    ]}
+                        description="Have questions? Let's discuss your needs."
-                />
+                        tag="Enquiry"
-                <FeatureBento
+                        tagIcon={Mail}
-                    features={features}
+                        buttonText="Send Enquiry"
-                    animationType="none"
+                        onSubmit={(email) => console.log("Form submitted", email)}
-                    tag="Features"
+                        useInvertedBackground={false}
-                    title="Powerful Features"
+                    />
-                    description="Everything you need to build and scale your product"
+                </div>
-                    textboxLayout="default"
+                <FooterBaseReveal logoText="SaaSify" columns={[]} copyrightText="2024 SaasApp. All rights reserved." />
-                    useInvertedBackground={false}
-                />
-                <FeatureBorderGlow
-                    tag="Why Choose Us"
-                    tagIcon={Users}
-                    title="Built by developers, for developers"
-                    description="We understand the challenges of modern software development because we face them every day."
-                    animationType="slide-up"
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                    features={[
-                        {
-                            icon: Layers,
-                            title: "Modular Architecture",
-                            description: "Build with composable components that scale with your needs",
-                        },
-                        {
-                            icon: Code,
-                            title: "Developer Experience",
-                            description: "Clean APIs and comprehensive documentation for faster development",
-                        },
-                        {
-                            icon: Shield,
-                            title: "Enterprise Security",
-                            description: "Bank-level encryption and compliance with industry standards",
-                        },
-                        {
-                            icon: Rocket,
-                            title: "Lightning Fast",
-                            description: "Optimized for performance with sub-second response times",
-                        },
-                    ]}
-                />
-                <TestimonialCardFifteen
-                    testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
-                    rating={5}
-                    author="Sarah Chen, CTO at TechFlow"
-                    avatars={avatars}
-                    ratingAnimation="slide-up"
-                    avatarsAnimation="slide-up"
-                    useInvertedBackground={false}
-                />
-                <PricingCardEight
-                    tag="Pricing"
-                    tagIcon={Sparkles}
-                    title="Simple, transparent pricing"
-                    description="Choose the plan that works best for you. All plans include a 14-day free trial."
-                    animationType="opacity"
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                    plans={[
-                        {
-                            id: "starter",
-                            badge: "Starter",
-                            badgeIcon: Zap,
-                            price: "$19/mo",
-                            subtitle: "Perfect for individuals",
-                            buttons: [
-                                { text: "Get Started", onClick: () => console.log("Starter clicked") },
-                            ],
-                            features: [
-                                "Up to 5 projects",
-                                "Basic analytics",
-                                "24/7 email support",
-                                "API access",
-                            ],
-                        },
-                        {
-                            id: "pro",
-                            badge: "Pro",
-                            badgeIcon: Rocket,
-                            price: "$49/mo",
-                            subtitle: "For growing teams",
-                            buttons: [
-                                { text: "Get Started", onClick: () => console.log("Pro clicked") },
-                            ],
-                            features: [
-                                "Unlimited projects",
-                                "Advanced analytics",
-                                "Priority support",
-                                "Custom integrations",
-                                "Team collaboration",
-                            ],
-                        },
-                        {
-                            id: "enterprise",
-                            badge: "Enterprise",
-                            badgeIcon: Crown,
-                            price: "$99/mo",
-                            subtitle: "For large organizations",
-                            buttons: [
-                                { text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
-                            ],
-                            features: [
-                                "Everything in Pro",
-                                "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
-                    logoText="SaaSify"
-                    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>
     );