Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -6,7 +6,6 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
 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 PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
@@ -16,40 +15,33 @@ export default function SaasTemplatePage() {
     const navItems = [
         { name: "Features", id: "features" },
         { name: "Pricing", id: "pricing" },
-        { name: "About", id: "about" },
+        { name: "Our Principles", id: "/saas-development" },
-        { name: "Contact", id: "contact" },
+        { name: "Contact", id: "contact" }
     ];
 
     const avatars = [
         { src: "/templates/luxury-travel-agency/testimonial/testimonial1.webp", alt: "User 1" },
         { src: "/templates/skincare/image5.avif", alt: "User 1" },
         { src: "/templates/skincare/image7.avif", alt: "User 1" },
-        { src: "/templates/skincare/image8.avif", alt: "User 1" },
+        { src: "/templates/skincare/image8.avif", alt: "User 1" }
     ];
 
     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" },
+                { 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",
         }
     ];
 
@@ -61,6 +53,7 @@ export default function SaasTemplatePage() {
                     brandName="SaasApp"
                     button={{ text: "Get Started", href: "#" }}
                 />
+                <div id="hero" data-section="hero">
                     <HeroCentered
                         background={{ variant: "rotated-rays-animated-grid" }}
                         avatars={avatars}
@@ -69,22 +62,22 @@ 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={[
                             { type: "text-icon", text: "Lightning Fast", icon: Zap },
                             { type: "text-icon", text: "Enterprise Security", icon: Shield },
                             { type: "text-icon", text: "99.9% Uptime", icon: Rocket },
                             { type: "text-icon", text: "Precision Targeting", icon: Target },
-                        { type: "text-icon", text: "AI Powered", icon: Sparkles },
+                            { type: "text-icon", text: "AI Powered", icon: Sparkles }
                         ]}
                     />
+                </div>
+                <div id="features" data-section="features">
                     <FeatureBento
                         features={features}
                         animationType="none"
@@ -94,6 +87,8 @@ export default function SaasTemplatePage() {
                         textboxLayout="default"
                         useInvertedBackground={false}
                     />
+                </div>
+                <div id="why-choose-us" data-section="why-choose-us">
                     <FeatureBorderGlow
                         tag="Why Choose Us"
                         tagIcon={Users}
@@ -105,35 +100,24 @@ 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
+                </div>
-                    testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
+                <div id="pricing" data-section="pricing">
-                    rating={5}
-                    author="Sarah Chen, CTO at TechFlow"
-                    avatars={avatars}
-                    ratingAnimation="slide-up"
-                    avatarsAnimation="slide-up"
-                    useInvertedBackground={false}
-                />
                     <PricingCardEight
                         tag="Pricing"
                         tagIcon={Sparkles}
@@ -144,57 +128,36 @@ 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,
+                                    { text: "Get Started", onClick: () => console.log("Starter clicked") }
-                            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,
+                                    { text: "Get Started", onClick: () => console.log("Pro clicked") }
-                            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,
+                                    { text: "Contact Sales", onClick: () => console.log("Enterprise clicked") }
-                            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",
-                            ],
-                        },
                         ]}
                     />
+                </div>
+                <div id="contact" data-section="contact">
                     <ContactCenter
                         tag="Contact"
                         tagIcon={Mail}
@@ -206,43 +169,40 @@ export default function SaasTemplatePage() {
                         buttonText="Get Early Access"
                         onSubmit={(email) => console.log("Email submitted:", email)}
                     />
+                </div>
                 <FooterBaseReveal
                     columns={[
                         {
-                            title: "Product",
+                            title: "Product",                            items: [
-                            items: [
                                 { label: "Features", href: "#features" },
                                 { label: "Pricing", href: "#pricing" },
                                 { label: "Integrations", href: "#" },
-                                { label: "Changelog", href: "#" },
+                                { label: "Changelog", href: "#" }
-                            ],
+                            ]
                         },
                         {
-                            title: "Company",
+                            title: "Company",                            items: [
-                            items: [
+                                { label: "Our Principles", href: "/saas-development" },
-                                { 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: "#" },
-                                { label: "Status", href: "#" },
+                                { label: "Status", href: "#" }
-                            ],
+                            ]
                         },
                         {
-                            title: "Legal",
+                            title: "Legal",                            items: [
-                            items: [
                                 { label: "Privacy", href: "#" },
                                 { label: "Terms", href: "#" },
-                                { label: "Security", href: "#" },
+                                { label: "Security", href: "#" }
-                            ],
+                            ]
-                        },
+                        }
                     ]}
                     copyrightText="2024 SaasApp. All rights reserved."
                 />