Update src/app/styles/variables.css

Update src/app/page.tsx
Merge version_2 into main
2026-05-23 23:41:04 +00:00 · 2026-05-23 23:41:04 +00:00 · 2026-05-23 23:30:18 +00:00 · 2026-05-23 23:30:15 +00:00 · 2026-05-23 23:29:54 +00:00 · 2026-05-23 23:29:51 +00:00
3 changed files with 77 additions and 242 deletions
--- a/src/app/page.tsx
+++ b/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 FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';

 export default function LandingPage() {
  return (
@@ -28,161 +28,69 @@ export default function LandingPage() {
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarLayoutFloatingOverlay
      navItems={[
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Integration",
-          id: "integrations",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Integration", id: "integrations" },
+        { name: "About", id: "about" },
      ]}
      brandName="Name"
-      button={{
-        text: "Get Started",
-        href: "/auth",
-      }}
+      button={{ text: "Get Started", href: "/auth" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ 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/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",
-        },
+        { 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/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" }]}
    />
  </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",
-        },
-      ]}
+      className="bg-white"
    />
  </div>

  <div id="features" data-section="features">
-      <FeatureCardTwentyOne
-      useInvertedBackground={true}
+      <FeatureCardTwentySeven
+      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={[
-        {
-          id: "1",
-          title: "Drag-and-Drop Builder",
-          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.",
-        },
+      textboxLayout="split"
+      features={[
+        { id: "1", title: "Drag-and-Drop Builder", descriptions: ["Visually design beautiful forms."] },
+        { 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"
-      mediaAnimation="slide-up"
+      useInvertedBackground={true}
    />
  </div>

  <div id="ai-assistant" data-section="ai-assistant">
-      <FeatureCardTwentyOne
-      useInvertedBackground={false}
+      <FeatureCardTwentySeven
+      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={[
-        {
-          id: "ai-1",
-          title: "Field Suggestions",
-          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.",
-        },
+      textboxLayout="split"
+      features={[
+        { id: "ai-1", title: "Field Suggestions", descriptions: ["Context-aware 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"
-      mediaAnimation="blur-reveal"
+      useInvertedBackground={false}
+      className="bg-slate-50"
    />
  </div>

@@ -190,139 +98,66 @@ export default function LandingPage() {
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={true}
-      names={[
-        "Slack",
-        "Zapier",
-        "HubSpot",
-        "Mailchimp",
-        "Notion",
-        "Discord",
-        "Google Sheets",
-      ]}
+      names={["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."
-      rating={5}
-      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",
-        },
+      testimonials={[
+        { id: "1", name: "Sarah Miller", role: "CTO", company: "Techflow", rating: 5 }
      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="opacity"
    />
  </div>

  <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
+      <PricingCardThree
+      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
-      useInvertedBackground={false}
-      background={{
-        variant: "downward-rays-animated",
-      }}
-      tag="Get in touch"
+      <ContactSplitForm
      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}
+      className="bg-slate-50"
    />
  </div>

  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Name Platform"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "/privacy",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "/terms",
-      }}
+      <FooterSimple
+      columns={[
+        { title: "Product", items: [{ label: "Features" }, { label: "Pricing" }] },
+        { title: "Company", items: [{ label: "About" }, { label: "Contact" }] }
+      ]}
+      bottomLeftText="© 2024 Name Platform"
+      bottomRightText="All rights reserved."
+      className="bg-slate-100 border-t border-slate-200"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/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;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -12,13 +12,13 @@

  --background: #ffffff;
  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --foreground: #111827;
+  --primary-cta: #15479c;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #e2e8f0;
  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --accent: #e5e7eb;
+  --background-accent: #f3f4f6;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	009a02cf7a	Update src/app/styles/variables.css	2026-05-23 23:41:04 +00:00
bender	5f37030ff5	Update src/app/page.tsx	2026-05-23 23:41:04 +00:00
bender	c94eb55776	Merge version_2 into main Merge version_2 into main	2026-05-23 23:30:18 +00:00
bender	73ccca1246	Update src/app/page.tsx	2026-05-23 23:30:15 +00:00
bender	a032016db9	Merge version_2 into main Merge version_2 into main	2026-05-23 23:29:54 +00:00
bender	6ff8b058fd	Update src/app/styles/variables.css	2026-05-23 23:29:51 +00:00
bender	9c8af67e58	Update src/app/styles/base.css	2026-05-23 23:29:50 +00:00
bender	0e4b65b200	Update src/app/page.tsx	2026-05-23 23:29:50 +00:00