Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import TextAbout from '@/components/sections/about/TextAbout';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 
 export default function LandingPage() {
   return (
@@ -28,161 +28,67 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Features", id: "features" },
-          name: "Features",
+        { name: "Pricing", id: "pricing" },
-          id: "features",
+        { name: "Integration", id: "integrations" },
-        },
+        { name: "About", id: "about" },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Integration",
-          id: "integrations",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
       ]}
       brandName="Name"
-      button={{
+      button={{ text: "Get Started", href: "/auth" }}
-        text: "Get Started",
-        href: "/auth",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroCentered
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient",
-      }}
       title="Build Smarter Forms in Seconds"
       description="The ultimate platform for hosted and headless forms. Powered by AI, built for scale, loved by developers and teams alike."
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "User 1" },
-          src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
+        { src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "User 2" },
-          alt: "User 1",
+        { src: "http://img.b2bpic.net/free-photo/handsome-man-standing-street-holding-laptop_1303-31617.jpg", alt: "User 3" },
-        },
+        { src: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg", alt: "User 4" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "User 5" },
-          src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
-          alt: "User 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/handsome-man-standing-street-holding-laptop_1303-31617.jpg",
-          alt: "User 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg",
-          alt: "User 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
-          alt: "User 5",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Start Free Trial",
-          href: "/signup",
-        },
-        {
-          text: "View Docs",
-          href: "/docs",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "High Performance",
-        },
-        {
-          type: "text",
-          text: "Headless API Ready",
-        },
-        {
-          type: "text",
-          text: "AI Form Builder",
-        },
-        {
-          type: "text",
-          text: "Developer Friendly",
-        },
-        {
-          type: "text",
-          text: "Unlimited Scale",
-        },
       ]}
+      buttons={[{ text: "Start Free Trial", href: "/signup" }, { text: "View Docs", href: "/docs" }]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <InlineImageSplitTextAbout
+      heading={[{ type: "text", content: "A Platform Built for Modern Requirements" }]}
+      buttons={[{ text: "Learn More", href: "/about" }]}
       useInvertedBackground={false}
-      title="A Platform Built for Modern Requirements"
-      buttons={[
-        {
-          text: "Learn More",
-          href: "/about",
-        },
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyOne
+      <FeatureCardTwentySeven
-      useInvertedBackground={true}
+      animationType="blur-reveal"
       title="Powerful Features at Every Level"
       description="From simple contact forms to complex multi-step workflows, our platform scales with your business needs."
-      accordionItems={[
+      textboxLayout="split"
-        {
+      features={[
-          id: "1",
+        { id: "1", title: "Drag-and-Drop Builder", descriptions: ["Visually design beautiful forms."], imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg?_wi=1" },
-          title: "Drag-and-Drop Builder",
+        { id: "2", title: "Headless API", descriptions: ["Seamless backend endpoints."], imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg?_wi=2" }
-          content: "Visually design beautiful forms without writing a single line of code.",
-        },
-        {
-          id: "2",
-          title: "Headless API Integration",
-          content: "Seamless backend endpoints for your custom frontends.",
-        },
-        {
-          id: "3",
-          title: "AI Form Generator",
-          content: "Describe your needs and let AI create the perfect form for you.",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg"
+      useInvertedBackground={true}
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="ai-assistant" data-section="ai-assistant">
-      <FeatureCardTwentyOne
+      <FeatureCardTwentySeven
-      useInvertedBackground={false}
+      animationType="blur-reveal"
       title="Your AI-Powered Form Assistant"
       description="Need help debugging an API call or optimizing your form fields? Our integrated AI assistant is available 24/7."
-      accordionItems={[
+      textboxLayout="split"
-        {
+      features={[
-          id: "ai-1",
+        { id: "ai-1", title: "Field Suggestions", descriptions: ["Context-aware suggestions."], imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-man-typing-prompts-into-ai-powered-chat_482257-123072.jpg?_wi=1" },
-          title: "Field Suggestions",
+        { id: "ai-2", title: "Workflow Automation", descriptions: ["Automate data processing."], imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-man-typing-prompts-into-ai-powered-chat_482257-123072.jpg?_wi=2" }
-          content: "Get context-aware suggestions for your form inputs.",
-        },
-        {
-          id: "ai-2",
-          title: "Workflow Automation",
-          content: "Automate data processing without complex manual setups.",
-        },
-        {
-          id: "ai-3",
-          title: "Debugging Support",
-          content: "Get real-time insights and fixes for your API integrations.",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-man-typing-prompts-into-ai-powered-chat_482257-123072.jpg"
+      useInvertedBackground={false}
-      mediaAnimation="blur-reveal"
     />
   </div>
 
@@ -190,136 +96,61 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="split"
       useInvertedBackground={true}
-      names={[
+      names={["Slack", "Zapier", "HubSpot", "Mailchimp", "Notion", "Discord", "Google Sheets"]}
-        "Slack",
-        "Zapier",
-        "HubSpot",
-        "Mailchimp",
-        "Notion",
-        "Discord",
-        "Google Sheets",
-      ]}
       title="Integrates With Everything You Use"
       description="Native integrations for webhooks, email providers, and marketing tools."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardOne
+      animationType="blur-reveal"
+      gridVariant="three-columns-all-equal-width"
+      title="Trusted by Teams"
+      description="Hear from our users."
+      textboxLayout="split"
       useInvertedBackground={false}
-      testimonial="This platform transformed how we handle our lead collection. The API docs are world-class."
+      testimonials={[
-      rating={5}
+        { id: "1", name: "Sarah Miller", role: "CTO", company: "Techflow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-middle-aged-business-leader_1262-4845.jpg" }
-      author="Sarah Miller, CTO at Techflow"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-smiling-middle-aged-business-leader_1262-4845.jpg",
-          alt: "Sarah",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",
-          alt: "Manager",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
-          alt: "Lead",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
-          alt: "Engineer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg",
-          alt: "Designer",
-        },
       ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="opacity"
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardEight
+      <PricingCardThree
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="split"
       useInvertedBackground={true}
-      plans={[
-        {
-          id: "free",
-          badge: "Free",
-          price: "$0",
-          subtitle: "Perfect for side projects.",
-          buttons: [
-            {
-              text: "Get Started",
-            },
-          ],
-          features: [
-            "1 Form",
-            "100 Submissions",
-            "Basic Analytics",
-          ],
-        },
-        {
-          id: "pro",
-          badge: "Pro",
-          price: "$29",
-          subtitle: "For professional teams.",
-          buttons: [
-            {
-              text: "Buy Pro",
-            },
-          ],
-          features: [
-            "10 Forms",
-            "5000 Submissions",
-            "Full API Access",
-          ],
-        },
-        {
-          id: "business",
-          badge: "Business",
-          price: "$99",
-          subtitle: "For scaling businesses.",
-          buttons: [
-            {
-              text: "Talk to Sales",
-            },
-          ],
-          features: [
-            "Unlimited Forms",
-            "Enterprise Security",
-            "Priority Support",
-          ],
-        },
-      ]}
       title="Simple Pricing for Every Scale"
       description="Choose a plan that fits your business needs."
+      plans={[
+        { id: "free", price: "$0", name: "Free", buttons: [{ text: "Get Started" }], features: ["1 Form", "100 Submissions"] },
+        { id: "pro", price: "$29", name: "Pro", buttons: [{ text: "Buy Pro" }], features: ["10 Forms", "5000 Submissions"] },
+        { id: "business", price: "$99", name: "Business", buttons: [{ text: "Talk to Sales" }], features: ["Unlimited Forms", "Enterprise Security"] }
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactSplitForm
-      useInvertedBackground={false}
-      background={{
-        variant: "downward-rays-animated",
-      }}
-      tag="Get in touch"
       title="Ready to get started?"
       description="Join thousands of developers and product teams worldwide."
+      inputs={[
+        { name: "email", type: "email", placeholder: "Enter your email", required: true },
+        { name: "name", type: "text", placeholder: "Full Name", required: true }
+      ]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterSimple
-      logoText="Name Platform"
+      columns={[
-      leftLink={{
+        { title: "Product", items: [{ label: "Features" }, { label: "Pricing" }] },
-        text: "Privacy Policy",
+        { title: "Company", items: [{ label: "About" }, { label: "Contact" }] }
-        href: "/privacy",
+      ]}
-      }}
+      bottomLeftText="© 2024 Name Platform"
-      rightLink={{
+      bottomRightText="All rights reserved."
-        text: "Terms of Service",
-        href: "/terms",
-      }}
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-montserrat), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #fbfbfb;
-  --card: #f9f9f9;
+  --card: #ffffff;
-  --foreground: #000612e6;
+  --foreground: #0a0a0a;
-  --primary-cta: #106EFB;
+  --primary-cta: #111827;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f3f4f6;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #e5e7eb;
-  --background-accent: #106EFB;
+  --background-accent: #f9fafb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);