Merge version_3 into main

Merge version_3 into main

src/app/contact/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function ContactPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Features", id: "/#features" },
+        { name: "Pricing", id: "/#pricing" },
+        { 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: "Contact", href: "/contact" }}
+                />
+                <div className="pt-24 pb-12">
+                  <ContactSplitForm
+                      title="Ready to scale?"
+                      description="Reach out to our team for custom solutions and deployment advice."
+                      useInvertedBackground={false}
+                      inputs={[
+                          { name: "name", type: "text", placeholder: "Full Name", required: true },
+                          { name: "email", type: "email", placeholder: "Work Email", required: true }
+                      ]}
+                      textarea={{ name: "message", placeholder: "How can we help?" }}
+                  />
+                </div>
+                <FooterBaseReveal
+                    logoText="SaaSify"
+                    columns={[
+                        { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/#pricing" }] },
+                        { title: "Company", items: [{ label: "Contact", href: "/contact" }] }
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -3,21 +3,18 @@
 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 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 } from "lucide-react";
-import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 
 export default function SaasTemplatePage() {
     const navItems = [
         { name: "Features", id: "features" },
         { name: "Pricing", id: "pricing" },
-        { name: "About", id: "about" },
+        { name: "Contact", id: "/contact" },
-        { name: "Contact", id: "contact" },
     ];
 
     const avatars = [
@@ -27,55 +24,23 @@ export default function SaasTemplatePage() {
         { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "User 1" },
     ];
 
-    const features: FeatureCard[] = [
-        {
-            bentoComponent: "globe",
-            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",
-            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",
-            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
                     navItems={navItems}
                     brandName="SaasApp"
-                    button={{ text: "Get Started", href: "#" }}
+                    button={{ text: "Get Started", href: "/contact" }}
                 />
                 <HeroCentered
                     background={{ variant: "rotated-rays-animated-grid" }}
                     avatars={avatars}
                     avatarText="Trusted by 1000+ users"
-                    title="Build Modern Web Experiences-Out of the world california apple"
+                    title="Build Modern Web Experiences"
-                    description="Create stunning, responsive websites with our comprehensive component library designed"
+                    description="Create stunning, responsive websites with our comprehensive component library designed for high performance."
                     buttons={[
-                        {
+                        { text: "Get Started", href: "/contact" },
-                            text: "Get Started",
+                        { text: "Learn More", href: "#features" },
-                            onClick: () => console.log("Get Started clicked"),
-                        },
-                        {
-                            text: "Learn More",
-                            onClick: () => console.log("Learn More clicked"),
-                        },
                     ]}
                     marqueeItems={[
                         { type: "text-icon", text: "Lightning Fast", icon: Zap },
@@ -85,169 +50,47 @@ export default function SaasTemplatePage() {
                         { type: "text-icon", text: "AI Powered", icon: Sparkles },
                     ]}
                 />
-                <FeatureBento
+                <div id="features" data-section="features">
-                    features={features}
+                  <FeatureCardTwentySeven
-                    animationType="none"
+                      title="Powerful Platform Capabilities"
-                    tag="Features"
+                      description="Comprehensive toolset engineered for developer productivity and seamless scaling."
-                    title="Powerful Features"
+                      animationType="slide-up"
-                    description="Everything you need to build and scale your product"
+                      textboxLayout="default"
-                    textboxLayout="default"
+                      useInvertedBackground={false}
-                    useInvertedBackground={false}
+                      features={[
-                />
+                          { id: "f1", title: "Modular Architecture", descriptions: ["Build with composable components that scale with your needs"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif" },
-                <FeatureBorderGlow
+                          { id: "f2", title: "Optimized Delivery", descriptions: ["Lightning fast performance with edge computing integration"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif" },
-                    tag="Why Choose Us"
+                          { id: "f3", title: "Advanced Analytics", descriptions: ["Deep insights into user behavior and infrastructure health"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif" }
-                    tagIcon={Users}
+                      ]}
-                    title="Built by developers, for developers"
+                  />
-                    description="We understand the challenges of modern software development because we face them every day."
+                </div>
-                    animationType="slide-up"
+                <div id="pricing" data-section="pricing">
-                    textboxLayout="default"
+                  <PricingCardTwo
-                    useInvertedBackground={false}
+                      title="Transparent Pricing Plans"
-                    features={[
+                      description="Choose the right tier for your growing team with flexible monthly options."
-                        {
+                      animationType="slide-up"
-                            icon: Layers,
+                      textboxLayout="default"
-                            title: "Modular Architecture",
+                      useInvertedBackground={false}
-                            description: "Build with composable components that scale with your needs",
+                      plans={[
-                        },
+                          {
-                        {
+                              id: "starter", badge: "Starter", price: "$19", subtitle: "Best for individuals", features: ["5 Projects", "Basic Analytics", "Email Support"],
-                            icon: Code,
+                              buttons: [{ text: "Get Started" }]
-                            title: "Developer Experience",
+                          },
-                            description: "Clean APIs and comprehensive documentation for faster development",
+                          {
-                        },
+                              id: "pro", badge: "Pro", price: "$49", subtitle: "Best for teams", features: ["Unlimited Projects", "Priority Support", "Custom Integrations"],
-                        {
+                              buttons: [{ text: "Get Started" }]
-                            icon: Shield,
+                          }
-                            title: "Enterprise Security",
+                      ]}
-                            description: "Bank-level encryption and compliance with industry standards",
+                  />
-                        },
+                </div>
-                        {
-                            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" }] },
-                            title: "Product",
+                        { title: "Company", items: [{ label: "Contact", href: "/contact" }] }
-                            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/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-nunito-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #050012;
+  --background: #0a0a0a;
-  --card: #040121;
+  --card: #1a1a1a;
-  --foreground: #f0e6ff;
+  --foreground: #ffffff;
-  --primary-cta: #c89bff;
+  --primary-cta: #20b2aa;
   --primary-cta-text: #050012;
-  --secondary-cta: #1d123b;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #f0e6ff;
-  --accent: #684f7b;
+  --accent: #008080;
-  --background-accent: #65417c;
+  --background-accent: #005f5f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);