Switch to version 2: modified src/routes.ts

Merge version_2_1776959653692 into main

src/App.tsx

@@ -1,343 +1,12 @@
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
-import FooterMinimal from '@/components/sections/footer/FooterMinimal';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
-import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
-import { Github, Linkedin, Twitter } from "lucide-react";
+import { Routes, Route } from "react-router-dom";
+import HomePage from "@/pages/HomePage";
+import AboutPage from "@/pages/AboutPage";
 
 export default function App() {
   return (
-    <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="FlowSoft"
-      navItems={[
-        {
-          name: "Features",
-          href: "#features",
-        },
-        {
-          name: "Pricing",
-          href: "#pricing",
-        },
-        {
-          name: "About",
-          href: "#about",
-        },
-      ]}
-      ctaButton={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-    />
-  </div>
-
-  <div id="hero" data-section="hero">
-      <HeroSplitMediaGrid
-      tag="Efficiency at Scale"
-      title="Work smarter. Automate what slows you down."
-      description="Our platform eliminates repetitive tasks and connects your entire workflow in minutes—no coding required. See results in your first week."
-      primaryButton={{
-        text: "Start Your Free Trial",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Watch Demo",
-        href: "#features",
-      }}
-      items={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/a-clean-modern-software-dashboard-interf-1776959350721-09864ef6.png",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/floating-abstract-3d-elements-representi-1776959349202-e096b136.png",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofMarquee
-      tag="Trusted by Leaders"
-      title="Powering high-growth companies"
-      description="See the teams that trust us to simplify their daily workflows."
-      names={[
-        "TechCorp",
-        "Innovate",
-        "DataGrid",
-        "CloudSystem",
-        "GlobalFlow",
-        "NetPulse",
-        "Streamline",
-      ]}
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeaturesRevealCards
-      tag="Key Capabilities"
-      title="Everything you need to scale"
-      description="Unlock advanced automation and workflow intelligence features."
-      items={[
-        {
-          title: "Auto-Task Sequencing",
-          description: "Seamlessly link repetitive tasks without writing a single line of code.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/iconographic-representation-of-fast-task-1776959349628-cff9407e.png",
-        },
-        {
-          title: "Integrated Collaboration",
-          description: "Bring your tools together in one unified, real-time dashboard view.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/visualization-of-team-collaboration-conn-1776959351447-0cf3798d.png",
-        },
-        {
-          title: "Intelligent Data Insights",
-          description: "Turn manual metrics into actionable intelligence for your team.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/data-analytics-insight-dashboard-view-mo-1776959352320-373c23a8.png",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="product" data-section="product">
-      <ProductVariantCards
-      tag="Our Solutions"
-      title="Tailored automation workflows"
-      description="Standardize your processes across every department."
-      products={[
-        {
-          name: "Automation Suite",
-          variant: "Core",
-          price: "$49/mo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-a-task--1776959350443-f780f5d3.png",
-        },
-        {
-          name: "Workflow Analytics",
-          variant: "Pro",
-          price: "$99/mo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-a-sched-1776959348519-b5e799c1.png",
-        },
-        {
-          name: "Enterprise Sync",
-          variant: "Scale",
-          price: "$199/mo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-a-repor-1776959351075-d2061da0.png",
-        },
-        {
-          name: "Resource Planner",
-          variant: "Lite",
-          price: "$29/mo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-showing-au-1776959350288-63737bee.png",
-        },
-        {
-          name: "Integration Hub",
-          variant: "Connect",
-          price: "$59/mo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-integra-1776959351024-7b8b289c.png",
-        },
-        {
-          name: "Admin Control",
-          variant: "Admin",
-          price: "$129/mo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-user-pe-1776959351999-def83e4c.png",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingLayeredCards
-      tag="Pricing Plans"
-      title="Simple pricing for all teams"
-      description="Choose the right plan for your business needs."
-      plans={[
-        {
-          tag: "Starter",
-          price: "$49",
-          description: "Perfect for individuals and small teams starting out.",
-          primaryButton: {
-            text: "Get Started",
-            href: "#contact",
-          },
-          features: [
-            "1 User",
-            "Basic Integrations",
-            "Email Support",
-          ],
-        },
-        {
-          tag: "Growth",
-          price: "$149",
-          description: "Best for scaling teams needing more power.",
-          primaryButton: {
-            text: "Get Started",
-            href: "#contact",
-          },
-          features: [
-            "5 Users",
-            "All Integrations",
-            "Priority Support",
-            "Analytics",
-          ],
-        },
-        {
-          tag: "Enterprise",
-          price: "$499",
-          description: "Advanced solutions for large-scale operations.",
-          primaryButton: {
-            text: "Get Started",
-            href: "#contact",
-          },
-          features: [
-            "Unlimited Users",
-            "Custom Security",
-            "Dedicated Manager",
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricsSimpleCards
-      tag="Our Impact"
-      title="Results speak for themselves"
-      description="Our platform has helped teams reduce operational friction significantly."
-      metrics={[
-        {
-          value: "45%",
-          description: "Increase in team efficiency",
-        },
-        {
-          value: "20 hrs",
-          description: "Hours saved per week",
-        },
-        {
-          value: "$10k+",
-          description: "Average monthly ROI",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialMarqueeCards
-      tag="Customer Stories"
-      title="Used by industry leaders"
-      description="Hear what our customers have to say about working with FlowSoft."
-      testimonials={[
-        {
-          name: "Alice Chen",
-          role: "CEO",
-          quote: "FlowSoft transformed our chaotic processes into seamless workflows.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/professional-business-executive-headshot-1776959351800-bcd49c12.png",
-        },
-        {
-          name: "Bob Smith",
-          role: "CTO",
-          quote: "The best integration engine we have tested. Highly recommend.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/friendly-tech-developer-headshot-warm-na-1776959351295-071bbf9c.png",
-        },
-        {
-          name: "Carol White",
-          role: "Marketing Director",
-          quote: "Our productivity skyrocketed in the first two weeks.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/focused-marketing-manager-headshot-clean-1776959351311-30283d11.png",
-        },
-        {
-          name: "David Young",
-          role: "Ops Manager",
-          quote: "Simplicity and power combined. An essential tool for us.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/calm-operations-manager-headshot-profess-1776959351666-8c8c7e40.png",
-        },
-        {
-          name: "Eve Adams",
-          role: "Project Lead",
-          quote: "Workflow visibility improved overnight. Worth every penny.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/experienced-project-leader-headshot-conf-1776959351331-890d51ae.png",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSimple
-      tag="FAQ"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about getting started."
-      items={[
-        {
-          question: "Do I need coding skills?",
-          answer: "No, our platform is entirely no-code and intuitive to use.",
-        },
-        {
-          question: "Can I integrate with other apps?",
-          answer: "Yes, we support integration with over 500+ apps via our API.",
-        },
-        {
-          question: "Is there a free trial?",
-          answer: "Yes, we offer a 14-day free trial on all plans.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      tag="Get in touch"
-      title="Start your journey today"
-      description="Fill out the form and our team will be in touch shortly."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-        {
-          name: "company",
-          type: "text",
-          placeholder: "Company Name",
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-        rows: 4,
-      }}
-      buttonText="Submit Request"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/a-minimalist-modern-office-workspace-sof-1776959351225-76b20c35.png"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterMinimal
-      brand="FlowSoft"
-      copyright="© 2024 FlowSoft. All rights reserved."
-      socialLinks={[
-        {
-          icon: Twitter,
-        },
-        {
-          icon: Github,
-        },
-        {
-          icon: Linkedin,
-        },
-      ]}
-    />
-  </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/about" element={<AboutPage />} />
+    </Routes>
   );
 }

src/pages/AboutPage.tsx

@@ -0,0 +1,38 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
+import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function AboutPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="FlowSoft"
+        navItems={[{"name":"Features","href":"/features"},{"name":"Pricing","href":"/pricing"},{"name":"About","href":"/about"},{"name":"Automation Suite","href":"/automation-suite"},{"name":"Contact","href":"/contact"}]}
+        ctaButton={{"text":"Start Free Trial","href":"/signup"}}
+      />
+      <AboutTextSplit
+        title="FlowSoft: Empowering Your Business Through Intelligent Automation"
+        descriptions={["At FlowSoft, we believe that your time is best spent on innovation, not repetition. Our mission is to empower businesses of all sizes to work smarter by providing an intuitive, powerful automation platform that eliminates tedious tasks and streamlines complex workflows. We're dedicated to transforming how teams operate, enabling them to achieve more with less effort and focus on what truly matters.","Born from a vision to simplify the intricate world of business processes, FlowSoft delivers a no-code solution that connects your entire operational ecosystem in minutes. We focus on tangible results, helping you see significant improvements in productivity and efficiency within your first week. Our platform is designed for clarity, confidence, and rapid value delivery, ensuring you can focus on strategic growth without technical hurdles.","We are committed to continuous innovation, ensuring our platform remains at the forefront of automation technology. FlowSoft is more than just a tool; it's a partner in your journey towards enhanced productivity, offering the flexibility and power you need to adapt and thrive in a fast-evolving market. Join us in building a future where every workflow is optimized, and every team member is empowered."]}
+        primaryButton={{"text":"Start Your Free Trial","href":"/signup"}}
+        secondaryButton={{"text":"Explore Features","href":"/features"}}
+      />
+      <AboutFeaturesSplit
+        tag="About FlowSoft"
+        title="Empowering Your Business with Seamless Automation"
+        description="At FlowSoft, we believe that work should be smart, not hard. Our mission is to free businesses from repetitive tasks and complex workflows, enabling teams to focus on innovation and growth. We've built a powerful, intuitive platform that connects your entire operation, automates critical processes, and delivers measurable results—all without a single line of code. Join us in shaping a future where efficiency is effortless."
+        primaryButton={{"text":"Request a Demo","href":"/contact#demo"}}
+        secondaryButton={{"text":"Explore Features","href":"/features"}}
+        items={[{"icon":"Zap","title":"No-Code Simplicity","description":"Build powerful automations and integrate your favorite apps with an intuitive drag-and-drop interface. No technical expertise required."},{"icon":"Rocket","title":"Boost Productivity","description":"Eliminate manual data entry, streamline approvals, and automate routine tasks to reclaim valuable time for strategic initiatives."},{"icon":"Link","title":"Seamless Integration","description":"Connect all your essential business tools and applications, creating a unified and efficient workflow across your entire organization."},{"icon":"BarChart2","title":"Data-Driven Insights","description":"Gain real-time visibility into your automated processes with comprehensive analytics, helping you make informed decisions and optimize performance."}]}
+        imageSrc="https://images.unsplash.com/photo-1556761175-5973ddf32d8f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
+      <FooterSimple
+        brand="FlowSoft"
+        columns={[{"title":"Solutions","items":[{"label":"Automation Suite","href":"/automation-suite"},{"label":"Workflow Analytics","href":"/workflow-analytics"},{"label":"Integrations","href":"/integrations"},{"label":"Process Optimization","href":"/process-optimization"}]},{"title":"Company","items":[{"label":"About Us","href":"/about"},{"label":"Careers","href":"/careers"},{"label":"Blog","href":"/blog"},{"label":"Partners","href":"/partners"}]},{"title":"Resources","items":[{"label":"Help Center","href":"/help"},{"label":"Contact Sales","href":"/contact-sales"},{"label":"Privacy Policy","href":"/privacy"},{"label":"Terms of Service","href":"/terms"}]}]}
+        copyright="© 2024 FlowSoft. All rights reserved."
+        links={[{"label":"Features","href":"/features"},{"label":"Pricing","href":"/pricing"},{"label":"About","href":"/about"},{"label":"Contact","href":"/contact"}]}
+      />
+    </div>
+  );
+}

src/pages/HomePage.tsx

@@ -1,22 +1,346 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import { routes } from "@/routes";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
+import FooterMinimal from '@/components/sections/footer/FooterMinimal';
+import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
+import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
+import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
+import { Github, Linkedin, Twitter } from "lucide-react";
 
-const HomePage = () => {
+
+export default function HomePage() {
   return (
-    <div className="min-h-screen bg-background">
+    <>
+  <div id="nav" data-section="nav">
       <NavbarCentered
-        logo="Logo"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Get Started", href: "#" }}
-      />
-      <main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
-        <h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
-        <p className="text-lg text-muted-foreground max-w-xl text-center">
-          Your website content will appear here.
-        </p>
-      </main>
-    </div>
-  );
-};
+      logo="FlowSoft"
+      navItems={[
+        {
+          name: "Features",
+          href: "#features",
+        },
+        {
+          name: "Pricing",
+          href: "#pricing",
+        },
+        {
+          name: "About",
+          href: "#about",
+        },
+        { name: "About", href: "/about" },
 
-export default HomePage;
+      ]}
+      ctaButton={{
+        text: "Get Started",
+        href: "#contact",
+      }}
+    />
+  </div>
+
+  <div id="hero" data-section="hero">
+      <HeroSplitMediaGrid
+      tag="Efficiency at Scale"
+      title="Work smarter. Automate what slows you down."
+      description="Our platform eliminates repetitive tasks and connects your entire workflow in minutes—no coding required. See results in your first week."
+      primaryButton={{
+        text: "Start Your Free Trial",
+        href: "#contact",
+      }}
+      secondaryButton={{
+        text: "Watch Demo",
+        href: "#features",
+      }}
+      items={[
+        {
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/a-clean-modern-software-dashboard-interf-1776959350721-09864ef6.png",
+        },
+        {
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/floating-abstract-3d-elements-representi-1776959349202-e096b136.png",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="social-proof" data-section="social-proof">
+      <SocialProofMarquee
+      tag="Trusted by Leaders"
+      title="Powering high-growth companies"
+      description="See the teams that trust us to simplify their daily workflows."
+      names={[
+        "TechCorp",
+        "Innovate",
+        "DataGrid",
+        "CloudSystem",
+        "GlobalFlow",
+        "NetPulse",
+        "Streamline",
+      ]}
+    />
+  </div>
+
+  <div id="features" data-section="features">
+      <FeaturesRevealCards
+      tag="Key Capabilities"
+      title="Everything you need to scale"
+      description="Unlock advanced automation and workflow intelligence features."
+      items={[
+        {
+          title: "Auto-Task Sequencing",
+          description: "Seamlessly link repetitive tasks without writing a single line of code.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/iconographic-representation-of-fast-task-1776959349628-cff9407e.png",
+        },
+        {
+          title: "Integrated Collaboration",
+          description: "Bring your tools together in one unified, real-time dashboard view.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/visualization-of-team-collaboration-conn-1776959351447-0cf3798d.png",
+        },
+        {
+          title: "Intelligent Data Insights",
+          description: "Turn manual metrics into actionable intelligence for your team.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/data-analytics-insight-dashboard-view-mo-1776959352320-373c23a8.png",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="product" data-section="product">
+      <ProductVariantCards
+      tag="Our Solutions"
+      title="Tailored automation workflows"
+      description="Standardize your processes across every department."
+      products={[
+        {
+          name: "Automation Suite",
+          variant: "Core",
+          price: "$49/mo",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-a-task--1776959350443-f780f5d3.png",
+        },
+        {
+          name: "Workflow Analytics",
+          variant: "Pro",
+          price: "$99/mo",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-a-sched-1776959348519-b5e799c1.png",
+        },
+        {
+          name: "Enterprise Sync",
+          variant: "Scale",
+          price: "$199/mo",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-a-repor-1776959351075-d2061da0.png",
+        },
+        {
+          name: "Resource Planner",
+          variant: "Lite",
+          price: "$29/mo",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-showing-au-1776959350288-63737bee.png",
+        },
+        {
+          name: "Integration Hub",
+          variant: "Connect",
+          price: "$59/mo",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-integra-1776959351024-7b8b289c.png",
+        },
+        {
+          name: "Admin Control",
+          variant: "Admin",
+          price: "$129/mo",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/minimalist-product-screenshot-of-user-pe-1776959351999-def83e4c.png",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="pricing" data-section="pricing">
+      <PricingLayeredCards
+      tag="Pricing Plans"
+      title="Simple pricing for all teams"
+      description="Choose the right plan for your business needs."
+      plans={[
+        {
+          tag: "Starter",
+          price: "$49",
+          description: "Perfect for individuals and small teams starting out.",
+          primaryButton: {
+            text: "Get Started",
+            href: "#contact",
+          },
+          features: [
+            "1 User",
+            "Basic Integrations",
+            "Email Support",
+          ],
+        },
+        {
+          tag: "Growth",
+          price: "$149",
+          description: "Best for scaling teams needing more power.",
+          primaryButton: {
+            text: "Get Started",
+            href: "#contact",
+          },
+          features: [
+            "5 Users",
+            "All Integrations",
+            "Priority Support",
+            "Analytics",
+          ],
+        },
+        {
+          tag: "Enterprise",
+          price: "$499",
+          description: "Advanced solutions for large-scale operations.",
+          primaryButton: {
+            text: "Get Started",
+            href: "#contact",
+          },
+          features: [
+            "Unlimited Users",
+            "Custom Security",
+            "Dedicated Manager",
+          ],
+        },
+      ]}
+    />
+  </div>
+
+  <div id="metrics" data-section="metrics">
+      <MetricsSimpleCards
+      tag="Our Impact"
+      title="Results speak for themselves"
+      description="Our platform has helped teams reduce operational friction significantly."
+      metrics={[
+        {
+          value: "45%",
+          description: "Increase in team efficiency",
+        },
+        {
+          value: "20 hrs",
+          description: "Hours saved per week",
+        },
+        {
+          value: "$10k+",
+          description: "Average monthly ROI",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialMarqueeCards
+      tag="Customer Stories"
+      title="Used by industry leaders"
+      description="Hear what our customers have to say about working with FlowSoft."
+      testimonials={[
+        {
+          name: "Alice Chen",
+          role: "CEO",
+          quote: "FlowSoft transformed our chaotic processes into seamless workflows.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/professional-business-executive-headshot-1776959351800-bcd49c12.png",
+        },
+        {
+          name: "Bob Smith",
+          role: "CTO",
+          quote: "The best integration engine we have tested. Highly recommend.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/friendly-tech-developer-headshot-warm-na-1776959351295-071bbf9c.png",
+        },
+        {
+          name: "Carol White",
+          role: "Marketing Director",
+          quote: "Our productivity skyrocketed in the first two weeks.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/focused-marketing-manager-headshot-clean-1776959351311-30283d11.png",
+        },
+        {
+          name: "David Young",
+          role: "Ops Manager",
+          quote: "Simplicity and power combined. An essential tool for us.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/calm-operations-manager-headshot-profess-1776959351666-8c8c7e40.png",
+        },
+        {
+          name: "Eve Adams",
+          role: "Project Lead",
+          quote: "Workflow visibility improved overnight. Worth every penny.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/experienced-project-leader-headshot-conf-1776959351331-890d51ae.png",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqSimple
+      tag="FAQ"
+      title="Frequently Asked Questions"
+      description="Everything you need to know about getting started."
+      items={[
+        {
+          question: "Do I need coding skills?",
+          answer: "No, our platform is entirely no-code and intuitive to use.",
+        },
+        {
+          question: "Can I integrate with other apps?",
+          answer: "Yes, we support integration with over 500+ apps via our API.",
+        },
+        {
+          question: "Is there a free trial?",
+          answer: "Yes, we offer a 14-day free trial on all plans.",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <ContactSplitForm
+      tag="Get in touch"
+      title="Start your journey today"
+      description="Fill out the form and our team will be in touch shortly."
+      inputs={[
+        {
+          name: "name",
+          type: "text",
+          placeholder: "Your Name",
+          required: true,
+        },
+        {
+          name: "email",
+          type: "email",
+          placeholder: "Email Address",
+          required: true,
+        },
+        {
+          name: "company",
+          type: "text",
+          placeholder: "Company Name",
+        },
+      ]}
+      textarea={{
+        name: "message",
+        placeholder: "How can we help?",
+        rows: 4,
+      }}
+      buttonText="Submit Request"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNPhIZITMXoY9ocAmcmrQYl9QP/a-minimalist-modern-office-workspace-sof-1776959351225-76b20c35.png"
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterMinimal
+      brand="FlowSoft"
+      copyright="© 2024 FlowSoft. All rights reserved."
+      socialLinks={[
+        {
+          icon: Twitter,
+        },
+        {
+          icon: Github,
+        },
+        {
+          icon: Linkedin,
+        },
+      ]}
+    />
+  </div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/about', label: 'About', pageFile: 'AboutPage' },
 ];