Merge version_29_1777236877707 into main

Merge version_29_1777236877707 into main

src/App.tsx

@@ -1,16 +1,72 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import HomePage from "@/pages/HomePage";
-import PricingFeaturesPage from "@/pages/PricingFeaturesPage";
+import PlansPage from "@/pages/PlansPage";
 
-import SimpleAboutPage from "@/pages/SimpleAboutPage";
+import AboutPage from "@/pages/AboutPage";
+import ContactPage from "@/pages/ContactPage";
+import TeamTestimonialsPage from "@/pages/TeamTestimonialsPage";
+import PricingPage from "@/pages/PricingPage";
+import PricingSimpleCards from "@/components/sections/pricing/PricingSimpleCards";
+import ContactForm from "@/components/sections/contact/ContactForm";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+import HistoryPage from "@/pages/HistoryPage";
 export default function App() {
   return (
-    <BrowserRouter>
+    <>
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/pricing-features" element={<PricingFeaturesPage />} />
-        <Route path="/simple-about" element={<SimpleAboutPage />} />
+        <Route path="/plans" element={<PlansPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/contact" element={<ContactPage />} />
+        <Route path="/team-testimonials" element={<TeamTestimonialsPage />} />
+        <Route path="/pricing" element={<PricingPage />} />
+      <Route path="/history" element={<HistoryPage />} />
       </Routes>
-    </BrowserRouter>
+      <div id="hero" data-section="hero" className="w-full h-[60vh] overflow-hidden">
+        <ImageOrVideo imageSrc="https://source.unsplash.com/random/1600x900/?cityscape" />
+      </div>
+      <div id="pricing" data-section="pricing">
+        <PricingSimpleCards
+          tag="Pricing"
+          title="Simple, transparent pricing"
+          description="Choose the plan that best fits your needs. No hidden fees."
+          plans={[
+            {
+              tag: "Starter",
+              price: "$19/mo",
+              description: "Perfect for individuals and small projects.",
+              features: ["Up to 5 projects", "Basic analytics", "24-hour support response time"],
+              buttonText: "Get Started",
+              buttonHref: "#"
+            },
+            {
+              tag: "Pro",
+              price: "$49/mo",
+              description: "Ideal for growing teams and businesses.",
+              features: ["Unlimited projects", "Advanced analytics", "1-hour support response time", "Custom domains"],
+              buttonText: "Upgrade to Pro",
+              buttonHref: "#"
+            },
+            {
+              tag: "Enterprise",
+              price: "$99/mo",
+              description: "For large scale organizations with custom needs.",
+              features: ["Everything in Pro", "Dedicated account manager", "Custom integrations", "SLA guarantee"],
+              buttonText: "Contact Sales",
+              buttonHref: "#"
+            }
+          ]}
+        />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactForm
+          tag="Contact Us"
+          title="Get in touch"
+          description="We'd love to hear from you. Fill out the form below and we'll get back to you as soon as possible."
+          buttonText="Send Message"
+        />
+      </div>
+    </>
   );
-}
+}

src/components/sections/contact/ContactForm.tsx

@@ -0,0 +1,71 @@
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Input from "@/components/ui/Input";
+import Textarea from "@/components/ui/Textarea";
+
+const ContactForm = ({
+  tag,
+  title,
+  description,
+  buttonText,
+}: {
+  tag: string;
+  title: string;
+  description: string;
+  buttonText: string;
+}) => {
+  return (
+    <section aria-label="Contact section" className="py-20">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center gap-3 md:gap-2 mb-10">
+          <span className="px-3 py-1 text-sm card rounded">{tag}</span>
+          <TextAnimation
+            text={title}
+            variant="slide-up"
+            tag="h2"
+            className="text-4xl md:text-5xl font-medium text-center text-balance"
+          />
+          <TextAnimation
+            text={description}
+            variant="slide-up"
+            tag="p"
+            className="md:max-w-6/10 text-lg leading-tight text-center"
+          />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-15%" }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+          className="max-w-2xl mx-auto card rounded p-6 md:p-10"
+        >
+          <form className="flex flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              <div className="flex flex-col gap-2">
+                <label htmlFor="name" className="text-sm font-medium">Name</label>
+                <Input id="name" placeholder="Your name" required />
+              </div>
+              <div className="flex flex-col gap-2">
+                <label htmlFor="email" className="text-sm font-medium">Email</label>
+                <Input id="email" type="email" placeholder="you@example.com" required />
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="subject" className="text-sm font-medium">Subject</label>
+              <Input id="subject" placeholder="How can we help?" required />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="message" className="text-sm font-medium">Message</label>
+              <Textarea id="message" placeholder="Your message..." rows={5} required />
+            </div>
+            <Button text={buttonText} variant="primary" type="submit" className="w-full mt-2" />
+          </form>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactForm;

src/components/sections/faq/FaqSection.tsx

@@ -0,0 +1,35 @@
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+
+const FaqSection = () => {
+  return (
+    <FaqSimple
+      tag="FAQ"
+      title="Frequently Asked Questions"
+      description="Find answers to common questions about our services and products."
+      items={[
+        {
+          question: "What is your return policy?",
+          answer: "We offer a 30-day money-back guarantee on all our plans. If you're not satisfied, simply contact our support team within 30 days of your purchase for a full refund."
+        },
+        {
+          question: "How long does setup take?",
+          answer: "Setup is instant. As soon as you complete your purchase, you'll receive an email with your login credentials and can start using the platform immediately."
+        },
+        {
+          question: "Do you offer custom enterprise plans?",
+          answer: "Yes, we offer custom enterprise plans tailored to your specific needs. Please contact our sales team to discuss your requirements and get a custom quote."
+        },
+        {
+          question: "Can I change my plan later?",
+          answer: "Absolutely. You can upgrade or downgrade your plan at any time from your account dashboard. Changes will be prorated and applied to your next billing cycle."
+        },
+        {
+          question: "What payment methods do you accept?",
+          answer: "We accept all major credit cards (Visa, Mastercard, American Express) as well as PayPal. For enterprise plans, we also support wire transfers and invoicing."
+        }
+      ]}
+    />
+  );
+};
+
+export default FaqSection;

src/components/sections/hero/HeroSplitTestimonial.tsx

@@ -5,6 +5,7 @@ import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import MagneticButton from "@/components/ui/MagneticButton";
 
 type Testimonial = {
   name: string;
@@ -13,6 +14,11 @@ type Testimonial = {
   rating: number;
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
+type Company = {
+  name: string;
+  logo?: string;
+};
+
 type HeroSplitTestimonialProps = {
   tag: string;
   title: string;
@@ -20,6 +26,7 @@ type HeroSplitTestimonialProps = {
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
   testimonials: Testimonial[];
+  companies?: Company[];
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const INTERVAL = 5000;
@@ -33,6 +40,7 @@ const HeroSplitTestimonial = ({
   imageSrc,
   videoSrc,
   testimonials,
+  companies,
 }: HeroSplitTestimonialProps) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -69,9 +77,31 @@ const HeroSplitTestimonial = ({
             />
 
             <div className="flex flex-wrap max-md:justify-center gap-3 mt-2">
-              <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+              <MagneticButton>
+                <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+              </MagneticButton>
               <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
             </div>
+
+            {companies && companies.length > 0 && (
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="mt-10 flex flex-col items-center md:items-start gap-4 w-full"
+              >
+                <p className="text-sm text-foreground/60 font-medium uppercase tracking-wider">Trusted by innovative teams</p>
+                <div className="flex flex-wrap items-center justify-center md:justify-start gap-6 md:gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-300">
+                  {companies.map((company) => (
+                    company.logo ? (
+                      <img key={company.name} src={company.logo} alt={company.name} className="h-6 object-contain" />
+                    ) : (
+                      <span key={company.name} className="text-xl font-bold tracking-tight">{company.name}</span>
+                    )
+                  ))}
+                </div>
+              </motion.div>
+            )}
           </div>
         </div>
 
@@ -123,4 +153,4 @@ const HeroSplitTestimonial = ({
   );
 };
 
-export default HeroSplitTestimonial;
+export default HeroSplitTestimonial;

src/components/sections/pricing/PricingSimpleCards.tsx

@@ -9,6 +9,8 @@ type PricingPlan = {
   price: string;
   description: string;
   features: string[];
+  buttonText?: string;
+  buttonHref?: string;
 };
 
 const PricingSimpleCards = ({
@@ -60,9 +62,21 @@ const PricingSimpleCards = ({
         transition={{ duration: 0.6, ease: "easeOut" }}
       >
         <GridOrCarousel>
-          {plans.map((plan) => (
+          {plans.map((plan, index) => (
             <div key={plan.tag} className="flex flex-col gap-5 p-5 h-full card rounded">
-              <span className="px-5 py-2 w-fit text-sm card rounded">{plan.tag}</span>
+              <div className="flex justify-between items-start">
+                <span className="px-5 py-2 w-fit text-sm card rounded">{plan.tag}</span>
+                {index === 0 && (
+                  <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-primary-cta text-primary-cta-text">
+                    New
+                  </span>
+                )}
+                {index === 1 && (
+                  <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-primary-cta text-primary-cta-text">
+                    Popular
+                  </span>
+                )}
+              </div>
 
               <div className="flex flex-col gap-1">
                 <span className="text-5xl font-medium">{plan.price}</span>
@@ -71,7 +85,7 @@ const PricingSimpleCards = ({
 
               <div className="w-full h-px bg-foreground/20" />
 
-              <div className="flex flex-col gap-3">
+              <div className="flex flex-col gap-3 grow">
                 {plan.features.map((feature) => (
                   <div key={feature} className="flex items-start gap-3">
                     <div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
@@ -81,6 +95,12 @@ const PricingSimpleCards = ({
                   </div>
                 ))}
               </div>
+              
+              {(plan.buttonText || plan.buttonHref) && (
+                <div className="mt-4">
+                  <Button text={plan.buttonText || "Get Started"} href={plan.buttonHref || "#"} variant="primary" className="w-full" />
+                </div>
+              )}
             </div>
           ))}
         </GridOrCarousel>
@@ -89,4 +109,4 @@ const PricingSimpleCards = ({
   </section>
 );
 
-export default PricingSimpleCards;
+export default PricingSimpleCards;

src/components/ui/Button.tsx

@@ -13,9 +13,10 @@ interface ButtonProps {
   animateImmediately?: boolean;
   delay?: number;
   className?: string;
+  type?: "button" | "submit" | "reset";
 }
 
-const Button = ({ text, variant = "primary", href, onClick, animate = false, animateImmediately = false, delay = 0, className = "" }: ButtonProps) => {
+const Button = ({ text, variant = "primary", href, onClick, animate = false, animateImmediately = false, delay = 0, className = "", type = "button" }: ButtonProps) => {
   const handleClick = useButtonClick(href, onClick);
 
   const classes = cls(
@@ -26,7 +27,7 @@ const Button = ({ text, variant = "primary", href, onClick, animate = false, ani
 
   const button = href
     ? <a href={href} onClick={handleClick} className={classes}>{text}</a>
-    : <button onClick={handleClick} className={classes}>{text}</button>;
+    : <button type={type} onClick={handleClick} className={classes}>{text}</button>;
 
   if (animateImmediately) {
     return (
@@ -54,4 +55,4 @@ const Button = ({ text, variant = "primary", href, onClick, animate = false, ani
   );
 };
 
-export default Button;
+export default Button;

src/components/ui/Input.tsx

@@ -0,0 +1,18 @@
+import { InputHTMLAttributes } from "react";
+import { cls } from "@/lib/utils";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = ({ className, ...props }: InputProps) => {
+  return (
+    <input
+      className={cls(
+        "flex h-10 w-full rounded border border-foreground/20 bg-card px-3 py-2 text-sm placeholder:text-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+export default Input;

src/components/ui/MagneticButton.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useRef, useState, MouseEvent, ReactNode } from "react";
+import { motion } from "motion/react";
+
+interface MagneticButtonProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function MagneticButton({ children, className = "" }: MagneticButtonProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const handleMouse = (e: MouseEvent<HTMLDivElement>) => {
+    if (!ref.current) return;
+    const { clientX, clientY } = e;
+    const { height, width, left, top } = ref.current.getBoundingClientRect();
+    const middleX = clientX - (left + width / 2);
+    const middleY = clientY - (top + height / 2);
+    setPosition({ x: middleX * 0.3, y: middleY * 0.3 });
+  };
+
+  const reset = () => {
+    setPosition({ x: 0, y: 0 });
+  };
+
+  const { x, y } = position;
+
+  return (
+    <motion.div
+      className={`relative inline-flex ${className}`}
+      ref={ref}
+      onMouseMove={handleMouse}
+      onMouseLeave={reset}
+      animate={{ x, y }}
+      transition={{ type: "spring", stiffness: 150, damping: 15, mass: 0.1 }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/components/ui/NavbarCentered.tsx

@@ -50,7 +50,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 50);
+    const handleScroll = () => setIsScrolled(window.scrollY > 20);
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
@@ -59,37 +59,39 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          "fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg pl-6 pr-2 py-2 backdrop-blur-xl border transition-all duration-300 w-[min(92vw,56rem)]",
+          isScrolled ? "bg-background/80 border-foreground/10" : "bg-background/40 border-foreground/5"
         )}
       >
-        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
-          <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
+        <div className="flex items-center gap-6">
+          <Link to="/" className="text-lg font-bold text-foreground flex-shrink-0">
+            {logo}
+          </Link>
 
-          <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
+          <div className="hidden md:flex items-center gap-6 flex-1 justify-center">
             {navItems.map((item) => (
               <NavLink
                 key={item.name}
                 href={item.href}
-                className="text-base text-foreground hover:opacity-70 transition-opacity"
+                className="text-sm font-medium text-foreground hover:text-foreground/70 transition-colors"
               >
                 {item.name}
               </NavLink>
             ))}
           </div>
 
-          <div className="hidden md:block">
-            <Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
+          <div className="hidden md:block flex-shrink-0">
+            <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="rounded-full px-6 h-10" />
           </div>
 
           <button
-            className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+            className="flex md:hidden items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer ml-auto"
             onClick={() => setMenuOpen(!menuOpen)}
             aria-label="Toggle menu"
             aria-expanded={menuOpen}
           >
             <Plus
-              className={cls("w-1/2 h-1/2 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
+              className={cls("w-5 h-5 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
               strokeWidth={1.5}
             />
           </button>
@@ -103,16 +105,16 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             animate={{ y: 0 }}
             exit={{ y: "-135%" }}
             transition={{ type: "spring", damping: 26, stiffness: 170 }}
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 card rounded"
+            className="md:hidden fixed z-50 top-4 left-4 right-4 p-6 card rounded-3xl shadow-xl border border-foreground/10"
           >
             <div className="flex items-center justify-between mb-6">
-              <p className="text-xl text-foreground">Menu</p>
+              <p className="text-xl font-bold text-foreground">Menu</p>
               <button
-                className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+                className="flex items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer"
                 onClick={() => setMenuOpen(false)}
                 aria-label="Close menu"
               >
-                <Plus className="w-1/2 h-1/2 text-background rotate-45" strokeWidth={1.5} />
+                <Plus className="w-5 h-5 text-background rotate-45" strokeWidth={1.5} />
               </button>
             </div>
 
@@ -128,14 +130,14 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
                     <ArrowRight className="h-4 w-4 text-foreground" strokeWidth={1.5} />
                   </NavLink>
                   {index < navItems.length - 1 && (
-                    <div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
+                    <div className="h-px bg-foreground/10" />
                   )}
                 </div>
               ))}
             </div>
 
             <div className="mt-6">
-              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full" />
+              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full rounded-full h-12" />
             </div>
           </motion.div>
         )}
@@ -144,4 +146,4 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   );
 };
 
-export default NavbarCentered;
+export default NavbarCentered;

src/components/ui/Textarea.tsx

@@ -0,0 +1,18 @@
+import { TextareaHTMLAttributes } from "react";
+import { cls } from "@/lib/utils";
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = ({ className, ...props }: TextareaProps) => {
+  return (
+    <textarea
+      className={cls(
+        "flex min-h-[80px] w-full rounded border border-foreground/20 bg-card px-3 py-2 text-sm placeholder:text-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+export default Textarea;

src/index.css

@@ -4,19 +4,19 @@
 @import "./styles/animations.css";
 
 :root {
-  /* @colorThemes/lightTheme/grayBlueAccent */
-  --background: #f5f5f5;
+  /* @colorThemes/lightTheme/magenta */
+  --background: #fdf4ff;
   --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
-  --primary-cta-text: #f5f5f5;
+  --foreground: #4a044e;
+  --primary-cta: #c026d3;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --secondary-cta-text: #c026d3;
+  --accent: #d946ef;
+  --background-accent: #fae8ff;
 
-  /* @layout/border-radius/rounded */
-  --radius: 9999px;
+  /* @layout/border-radius/sharp */
+  --radius: 0px;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -94,8 +94,8 @@
   /* Border Radius */
   --radius: var(--radius);
   --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: var(--radius);
+  --radius-sm: var(--radius);
 
   /* Width */
   --width-content-width: var(--width-content-width);
@@ -175,4 +175,4 @@ h6 {
     radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
     var(--color-secondary-cta);
   box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
-}
+}

src/pages/AboutPage.tsx

@@ -0,0 +1,117 @@
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
+import TestimonialQuoteCards from "@/components/sections/testimonial/TestimonialQuoteCards";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function AboutPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="FlowSync"
+        navItems={[
+          { name: "Features", href: "/#features" },
+          { name: "Pricing", href: "/#pricing" },
+          { name: "About", href: "/about" },
+          { name: "FAQ", href: "/#faq" },
+          { name: "Plans", href: "/plans" },
+        ]}
+        ctaButton={{ text: "Get Started", href: "/plans" }}
+      />
+      <main className="flex-grow">
+        <HeroSplit
+          tag="Our Story"
+          title="Empowering Teams to Do Their Best Work"
+          description="We started FlowSync with a simple belief: work shouldn't feel like a struggle. Our mission is to eliminate friction and help teams focus on what truly matters."
+          primaryButton={{ text: "View Plans", href: "/plans" }}
+          secondaryButton={{ text: "Contact Us", href: "#contact" }}
+          imageSrc="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=800&q=80"
+        />
+        
+        <AboutFeaturesSplit
+          tag="Core Values"
+          title="What Drives Us Forward"
+          description="Our values are the foundation of everything we build. They guide our decisions, shape our culture, and ensure we always put our users first."
+          items={[
+            {
+              icon: "Zap",
+              title: "Speed & Simplicity",
+              description: "We believe in removing unnecessary steps. Our tools are designed to be intuitive and lightning-fast.",
+            },
+            {
+              icon: "Shield",
+              title: "Trust & Security",
+              description: "Your data is your business. We build with enterprise-grade security from day one.",
+            },
+            {
+              icon: "Users",
+              title: "Collaboration First",
+              description: "Great things are never done by one person. We design for seamless teamwork and communication.",
+            },
+          ]}
+          imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80"
+        />
+
+        <section className="py-20 bg-card text-foreground">
+          <div className="w-content-width mx-auto">
+            <div className="flex flex-col items-center gap-3 md:gap-2 mb-16">
+              <span className="px-3 py-1 text-sm card rounded bg-background">Our Team</span>
+              <h2 className="text-4xl md:text-5xl font-medium text-center text-balance">Meet the Minds Behind FlowSync</h2>
+              <p className="md:max-w-6/10 text-lg leading-tight text-center opacity-75">We are a diverse group of engineers, designers, and problem-solvers dedicated to making your work life easier.</p>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
+              {[
+                { name: "Alex Rivera", role: "CEO & Founder", img: "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80" },
+                { name: "Sarah Chen", role: "Head of Product", img: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80" },
+                { name: "Michael Foster", role: "Lead Engineer", img: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=400&q=80" },
+                { name: "Elena Rodriguez", role: "Design Director", img: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=400&q=80" }
+              ].map(member => (
+                <div key={member.name} className="flex flex-col items-center gap-4">
+                  <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-background shadow-lg">
+                    <img src={member.img} alt={member.name} className="w-full h-full object-cover" />
+                  </div>
+                  <div className="text-center">
+                    <h3 className="text-xl font-medium">{member.name}</h3>
+                    <p className="text-sm opacity-75">{member.role}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <TestimonialQuoteCards
+          tag="Our Impact"
+          title="Hear From Our Community"
+          description="Don't just take our word for it. See how FlowSync is transforming the way teams work around the globe."
+          testimonials={[
+            { quote: "FlowSync has completely changed how our engineering team operates. We're shipping 30% faster.", name: "David Kim", role: "VP of Engineering, TechCorp", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80" },
+            { quote: "The most intuitive productivity tool I've ever used. It actually gets out of your way.", name: "Jessica Alba", role: "Product Manager, InnovateX", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80" },
+            { quote: "Customer support is phenomenal, and the platform is rock solid. Highly recommended.", name: "Marcus Johnson", role: "Operations Director, GlobalScale", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80" }
+          ]}
+        />
+
+        <div id="contact">
+          <ContactCta
+            tag="Join Us"
+            text="Ready to transform your workflow?"
+            primaryButton={{ text: "Get Started for Free", href: "/plans" }}
+            secondaryButton={{ text: "Contact Sales", href: "#contact" }}
+          />
+        </div>
+      </main>
+      
+      <FooterSimple
+        brand="FlowSync"
+        columns={[
+          { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/plans" }, { label: "Security", href: "/#security" }] },
+          { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Careers", href: "/about" }, { label: "Blog", href: "/#blog" }] },
+          { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
+        ]}
+        copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
+        links={[]}
+      />
+    </div>
+  );
+}

src/pages/ContactPage.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+const ContactPage = () => {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="FlowSync"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/plans" }}
+      />
+
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Contact Us"
+          title="We're Here to Help"
+          description="Whether you have a question about features, pricing, or anything else, our team is ready to answer all your questions."
+          primaryButton={{ text: "Send a Message", href: "#form" }}
+          secondaryButton={{ text: "View FAQ", href: "#faq" }}
+          imageSrc="https://images.unsplash.com/photo-1516387938699-a93567ec168e?auto=format&fit=crop&w=1200&q=80"
+        />
+
+        <div id="form">
+          <ContactSplitForm
+            tag="Get in Touch"
+            title="Send Us a Message"
+            description="Fill out the form below and our team will get back to you within 24 hours."
+            inputs={[
+              { name: "firstName", type: "text", placeholder: "First Name", required: true },
+              { name: "lastName", type: "text", placeholder: "Last 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 you?", rows: 5, required: true }}
+            buttonText="Send Message"
+            imageSrc="https://images.unsplash.com/photo-1596524430615-b46475ddff6e?auto=format&fit=crop&w=800&q=80"
+          />
+        </div>
+
+        <section className="py-20 bg-card text-foreground">
+          <div className="w-content-width mx-auto">
+            <div className="flex flex-col items-center gap-3 md:gap-2 mb-12">
+              <span className="px-3 py-1 text-sm card rounded bg-background">Location</span>
+              <h2 className="text-4xl md:text-5xl font-medium text-center text-balance">Find Us on the Map</h2>
+              <p className="md:max-w-6/10 text-lg leading-tight text-center opacity-75">
+                Come visit our headquarters in the heart of San Francisco.
+              </p>
+            </div>
+            <div className="w-full h-[400px] md:h-[600px] overflow-hidden rounded-lg shadow-xl border border-border">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.210452399676!2d-122.4194155846813!3d37.77492947975899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808b1a3e3b3b%3A0x2a0d3e3b3b3b3b3b!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Map Location"
+              ></iframe>
+            </div>
+          </div>
+        </section>
+
+        <div id="faq">
+          <FaqSimple
+            tag="Support"
+            title="Frequently Asked Questions"
+            description="Find quick answers to common questions about our platform, pricing, and support."
+            items={[
+              {
+                question: "What is your typical response time?",
+                answer: "We aim to respond to all inquiries within 24 hours during regular business days. For enterprise customers, we offer 24/7 priority support with a 1-hour SLA."
+              },
+              {
+                question: "Do you offer technical support for integrations?",
+                answer: "Yes! Our engineering team is available to help you set up custom integrations. You can reach out to support@flowsync.com or use the contact form above."
+              },
+              {
+                question: "Can I upgrade or downgrade my plan at any time?",
+                answer: "Absolutely. You can change your plan directly from your account dashboard. Prorated charges or credits will be applied automatically to your next billing cycle."
+              }
+            ]}
+          />
+        </div>
+
+        <ContactCta
+          tag="Ready to start?"
+          text="Join thousands of teams already using FlowSync."
+          primaryButton={{ text: "Get Started Free", href: "/plans" }}
+          secondaryButton={{ text: "Talk to Sales", href: "#form" }}
+        />
+      </main>
+
+      <FooterSimple
+        brand="FlowSync"
+        columns={[
+          { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/plans" }, { label: "Security", href: "/#security" }] },
+          { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Careers", href: "/about" }, { label: "Blog", href: "/#blog" }] },
+          { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
+        ]}
+        copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
+        links={[]}
+      />
+    </div>
+  );
+};
+
+export default ContactPage;

src/pages/HistoryPage.tsx

@@ -0,0 +1,32 @@
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FeaturesTimelineCards from "@/components/sections/features/FeaturesTimelineCards";
+import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
+
+export default function HistoryPage() {
+  return (
+    <>
+      <HeroBillboard
+        tag="Our Journey"
+        title="The FlowSync Story: Pioneering Productivity, Built for Speed"
+        description="From our humble beginnings to becoming the all-in-one platform for modern teams, FlowSync has been dedicated to a singular mission: empowering teams to work smarter, faster, and achieve their goals with unparalleled efficiency. Discover the milestones that shaped our journey towards building a truly transformative productivity solution."
+        primaryButton={{"text":"Explore Our Platform","href":"/features"}}
+        secondaryButton={{"text":"Our Mission & Values","href":"/about"}}
+        imageSrc="https://images.unsplash.com/photo-1552664730-d307ca8849d1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
+      <FeaturesTimelineCards
+        tag="Our Journey"
+        title="The FlowSync Story: Innovating Productivity, One Milestone at a Time"
+        description="From a bold vision to a leading platform, discover the key moments that shaped FlowSync's dedication to empowering teams worldwide."
+        primaryButton={{"text":"See Our Vision","href":"/about#vision"}}
+        secondaryButton={{"text":"Join Our Team","href":"/careers"}}
+        items={[{"title":"2018: The Founding Vision","description":"FlowSync began with a bold mission to simplify team collaboration and task management for modern businesses.","imageSrc":"https://images.unsplash.com/photo-1552664734-cd5ad4b744a9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDN8fHN0YXJ0dXAlMjB0ZWFtfGVufDB8fHx8MTcwMTY0ODQ1Nnww&ixlib=rb-4.0.3&q=80&w=1080"},{"title":"2020: First Major Platform Release","description":"Our integrated task and project management suite launched, significantly boosting team efficiency and organization.","imageSrc":"https://images.unsplash.com/photo-1517048676732-d65bc937f952?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDEwfHx0ZWFtJTIwd29ya2luZyUyMG9uJTIwbGFwdG9wfGVufDB8fHx8MTcwMTY0ODQ1Nnww&ixlib=rb-4.0.3&q=80&w=1080"},{"title":"2022: AI-Powered Workflow Optimization","description":"We introduced AI-driven analytics, providing smart recommendations to optimize workflows and achieve goals faster.","imageSrc":"https://images.unsplash.com/photo-1620712948797-577a7f9f704e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDEyfHxBSSUyMGRhdGElMjBhbmFseXNpc3xlbnwwfHx8fDE3MDE2NDg0NTdww&ixlib=rb-4.0.3&q=80&w=1080"}]}
+      />
+      <AboutTextSplit
+        title="The FlowSync Journey: Pioneering Productivity and Speed"
+        descriptions={["FlowSync was founded on a simple yet powerful idea: to eliminate the friction that slows teams down. In an increasingly fast-paced world, we recognized the urgent need for a unified platform that could bring clarity, organization, and unparalleled speed to every project. Our journey began with a commitment to build something truly transformative.","From our initial prototypes, the focus was always on integration and performance. We meticulously crafted a system where task management, communication, and project tracking weren't just co-located, but seamlessly interconnected. This dedication laid the groundwork for what would become the 'built for speed' ethos, ensuring teams could move from idea to execution without missing a beat.","Over the years, FlowSync has evolved through continuous innovation and invaluable feedback from our growing community. We've celebrated milestones, expanded our feature set to become the all-in-one solution teams rely on, and consistently pushed the boundaries of what a productivity platform can achieve. Each step has been driven by our core mission: to empower teams to work smarter, not just harder.","Today, FlowSync stands as a testament to our unwavering dedication to efficiency and progress. We continue to innovate, driven by the success stories of teams hitting every deadline with ease and achieving their goals faster than ever before. Our history is a promise of our future: to keep building the most intuitive, powerful, and fast productivity platform on the planet."]}
+        primaryButton={{"text":"Experience FlowSync Today","href":"/features"}}
+        secondaryButton={{"text":"Meet Our Innovators","href":"/about#team"}}
+      />
+    </>
+  );
+}

src/pages/HomePage.tsx

@@ -22,11 +22,11 @@ export default function HomePage() {
         { name: "Pricing", href: "#pricing" },
         { name: "About", href: "#about" },
         { name: "FAQ", href: "#faq" },
-        { name: "PricingFeatures", href: "/pricing-features" },
+        { name: "Plans", href: "/plans" },
 
       ]}
       ctaButton={{
-        text: "Get Started",        href: "#contact"
+        text: "Let's Go! 🚀",        href: "#contact"
       }}
     />
   </div>
@@ -34,13 +34,13 @@ export default function HomePage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       tag="Boost Productivity Today"
-      title="Streamline Your Workflow with FlowSync"
+      title="Built for speed"
       description="The all-in-one productivity platform designed to help teams work smarter, organize tasks, and hit every deadline with ease."
       primaryButton={{
-        text: "Get Started",        href: "#contact"
+        text: "Start the Magic ✨",        href: "#contact"
       }}
       secondaryButton={{
-        text: "Learn More",        href: "#about"
+        text: "Show Me How 👀",        href: "#about"
       }}
       testimonials={[
         { name: "Sarah Chen", handle: "@sarahchen", text: "FlowSync changed how we manage our engineering sprints completely. Absolute game changer.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869127352-4c4dae3e.png" },
@@ -144,7 +144,7 @@ export default function HomePage() {
       title="Ready to scale your output?"
       description="Join the next generation of productive teams today."
       inputPlaceholder="Enter your professional email"
-      buttonText="Start Free Trial"
+      buttonText="Gimme Access! 🎁"
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-minimalist-high-tech-abstract-backgrou-1776869117294-9abef0b7.png"
     />
   </div>
@@ -169,4 +169,4 @@ export default function HomePage() {
   </div>
     </>
   );
-}
+}

src/pages/PlansPage.tsx

@@ -0,0 +1,102 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import Button from "@/components/ui/Button";
+
+export default function PlansPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      {/* Hero Section */}
+      <section className="relative flex flex-col items-center justify-center py-20 text-center md:py-32">
+        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Flexible Plans for Every Need</h1>
+        <p className="mt-4 max-w-2xl text-lg text-muted-foreground sm:text-xl">Choose the perfect plan to power your business forward.</p>
+        <div className="mt-8 flex gap-4">
+          <Button variant="primary" size="lg" href="#pricing">View Pricing</Button>
+          <Button variant="secondary" size="lg" href="/contact">Contact Sales</Button>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="w-full py-20 md:py-32 bg-card text-card-foreground">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Simple, Transparent Pricing</h2>
+          <p className="mt-4 max-w-2xl mx-auto text-lg text-muted-foreground">No hidden fees. Just straightforward plans designed to grow with you.</p>
+
+          <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
+            {/* Starter Plan */}
+            <div className="flex flex-col rounded-lg border border-border bg-background p-8 shadow-sm">
+              <h3 className="text-2xl font-bold">Starter</h3>
+              <p className="mt-4 text-4xl font-extrabold">$19<span className="text-lg font-medium text-muted-foreground">/month</span></p>
+              <ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
+                <li><span>✓</span> 5 Projects</li>
+                <li><span>✓</span> Basic Analytics</li>
+                <li><span>✓</span> Community Support</li>
+              </ul>
+              <Button className="mt-8 w-full" variant="primary" href="/signup">Get Started</Button>
+            </div>
+
+            {/* Pro Plan (highlighted) */}
+            <div className="relative flex flex-col rounded-lg border-2 border-primary-cta bg-background p-8 shadow-lg">
+              <div className="absolute -top-3 right-0 -mr-3 rounded-full bg-primary-cta px-3 py-1 text-xs font-semibold uppercase text-primary-cta-foreground">Popular</div>
+              <h3 className="text-2xl font-bold">Pro</h3>
+              <p className="mt-4 text-4xl font-extrabold">$49<span className="text-lg font-medium text-muted-foreground">/month</span></p>
+              <ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
+                <li><span>✓</span> Unlimited Projects</li>
+                <li><span>✓</span> Advanced Analytics</li>
+                <li><span>✓</span> Priority Support</li>
+                <li><span>✓</span> Custom Integrations</li>
+              </ul>
+              <Button className="mt-8 w-full" variant="primary" href="/signup">Choose Pro</Button>
+            </div>
+
+            {/* Enterprise Plan */}
+            <div className="flex flex-col rounded-lg border border-border bg-background p-8 shadow-sm">
+              <h3 className="text-2xl font-bold">Enterprise</h3>
+              <p className="mt-4 text-4xl font-extrabold">Custom</p>
+              <ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
+                <li><span>✓</span> All Pro Features</li>
+                <li><span>✓</span> Dedicated Account Manager</li>
+                <li><span>✓</span> SLA Guarantee</li>
+                <li><span>✓</span> On-premise Deployment</li>
+              </ul>
+              <Button className="mt-8 w-full" variant="secondary" href="/contact">Contact Sales</Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer Section */}
+      <footer className="w-full py-12 md:py-16 bg-card text-card-foreground">
+        <div className="container mx-auto px-4 grid grid-cols-1 gap-8 md:grid-cols-4">
+          <div className="md:col-span-1">
+            <h3 className="text-xl font-bold">Brand</h3>
+            <p className="mt-4 text-muted-foreground">Building the future, one pixel at a time.</p>
+            <div className="mt-6 flex space-x-4">
+              <a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
+            </div>
+          </div>
+          <div className="md:col-span-1">
+            <h4 className="text-lg font-semibold">Company</h4>
+            <ul className="mt-4 space-y-2">
+              <li><a href="/about" className="text-muted-foreground hover:text-foreground">About</a></li>
+              <li><a href="/plans" className="text-muted-foreground hover:text-foreground">Pricing</a></li>
+              <li><a href="/contact" className="text-muted-foreground hover:text-foreground">Contact</a></li>
+            </ul>
+          </div>
+          <div className="md:col-span-2">
+            {/* Additional footer content can go here if needed */}
+          </div>
+        </div>
+        <div className="mt-12 border-t border-border pt-8 text-center text-sm text-muted-foreground">
+          © 2024 Brand. All rights reserved.
+        </div>
+      </footer>
+    </div>
+  );
+}

src/pages/PricingFeaturesPage.tsx

@@ -1,107 +0,0 @@
-import { routes } from "@/routes"
-import NavbarCentered from "@/components/ui/NavbarCentered"
-import Button from "@/components/ui/Button"
-
-const PricingFeaturesPage = () => {
-  const navItems = routes.map((r) => ({ name: r.label, href: r.path }))
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <NavbarCentered navItems={navItems} />
-      <main>
-        {/* Pricing Section */}
-        <section className="py-16 md:py-24 lg:py-32 bg-background">
-          <div className="container mx-auto px-4 text-center">
-            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Simple, transparent pricing</h2>
-            <p className="text-lg md:text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">Choose the plan that's right for your business. No hidden fees, no surprises.</p>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-              {/* Starter Plan */}
-              <div className="bg-card text-card-foreground p-8 rounded-lg shadow-lg border border-border flex flex-col">
-                <h3 className="text-2xl font-semibold mb-4">Starter</h3>
-                <p className="text-5xl font-bold mb-2">$29</p>
-                <p className="text-muted-foreground mb-6">/month</p>
-                <ul className="text-left space-y-3 mb-8 flex-grow">
-                  <li>✅ 5 Projects</li>
-                  <li>✅ Basic Analytics</li>
-                  <li>✅ Email Support</li>
-                  <li>✅ 1GB Storage</li>
-                </ul>
-                <Button variant="outline" className="w-full">Get Started</Button>
-              </div>
-
-              {/* Pro Plan */}
-              <div className="bg-card text-card-foreground p-8 rounded-lg shadow-lg border border-border flex flex-col relative overflow-hidden">
-                <div className="absolute top-0 right-0 bg-primary-cta text-primary-cta-foreground text-xs font-bold px-3 py-1 rounded-bl-lg">Popular</div>
-                <h3 className="text-2xl font-semibold mb-4">Pro</h3>
-                <p className="text-5xl font-bold mb-2">$99</p>
-                <p className="text-muted-foreground mb-6">/month</p>
-                <ul className="text-left space-y-3 mb-8 flex-grow">
-                  <li>✅ Unlimited Projects</li>
-                  <li>✅ Advanced Analytics</li>
-                  <li>✅ Priority Support</li>
-                  <li>✅ 10GB Storage</li>
-                  <li>✅ Custom Integrations</li>
-                </ul>
-                <Button variant="default" className="w-full">Start Free Trial</Button>
-              </div>
-
-              {/* Enterprise Plan */}
-              <div className="bg-card text-card-foreground p-8 rounded-lg shadow-lg border border-border flex flex-col">
-                <h3 className="text-2xl font-semibold mb-4">Enterprise</h3>
-                <p className="text-5xl font-bold mb-2">Custom</p>
-                <p className="text-muted-foreground mb-6"></p>
-                <ul className="text-left space-y-3 mb-8 flex-grow">
-                  <li>✅ All Pro Features</li>
-                  <li>✅ Dedicated Account Manager</li>
-                  <li>✅ SLA Guarantee</li>
-                  <li>✅ On-premise Deployment</li>
-                  <li>✅ 24/7 Phone Support</li>
-                </ul>
-                <Button variant="outline" className="w-full">Contact Sales</Button>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Features Section */}
-        <section className="py-16 md:py-24 lg:py-32 bg-background">
-          <div className="container mx-auto px-4 text-center">
-            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Powerful features designed for growth</h2>
-            <p className="text-lg md:text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">Everything you need to scale your business, all in one place.</p>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {/* Feature 1 */}
-              <div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
-                <div className="text-4xl mb-4">🚀</div>
-                <h3 className="text-xl font-semibold mb-2">Blazing Fast Performance</h3>
-                <p className="text-muted-foreground">Experience unparalleled speed and responsiveness across all your applications.</p>
-              </div>
-              {/* Feature 2 */}
-              <div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
-                <div className="text-4xl mb-4">🔒</div>
-                <h3 className="text-xl font-semibold mb-2">Robust Security</h3>
-                <p className="text-muted-foreground">Your data is protected with enterprise-grade security measures and compliance.</p>
-              </div>
-              {/* Feature 3 */}
-              <div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
-                <div className="text-4xl mb-4">💡</div>
-                <h3 className="text-xl font-semibold mb-2">Intuitive User Interface</h3>
-                <p className="text-muted-foreground">Designed for ease of use, our platform helps you get more done with less effort.</p>
-              </div>
-              {/* Feature 4 */}
-              <div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
-                <div className="text-4xl mb-4">📈</div>
-                <h3 className="text-xl font-semibold mb-2">Advanced Analytics</h3>
-                <p className="text-muted-foreground">Gain deep insights into your performance with customizable dashboards and reports.</p>
-              </div>
-              {/* Feature 5 */}
-              <div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
-                <div className="text-4xl mb-4">🤝</div>
-                <h3 className="text-xl font-semibold mb-2">Seamless Collaboration</h3>
-                <p className="text-muted-foreground">Work together effortlessly with built-in tools for team communication and project sharing.</p>
-              </div>
-              {/* Feature 6 */}
-              <div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
-                <div className="text-4xl mb-4">🌐</div>
-                <h3 className="text-xl font-semibold mb-2">

src/pages/PricingPage.tsx

@@ -0,0 +1,16 @@
+import PricingHighlightedCards from "@/components/sections/pricing/PricingHighlightedCards";
+
+export default function PricingPage() {
+  return (
+    <>
+      <PricingHighlightedCards
+        tag="Flexible Pricing"
+        title="Unlock Your Team's Full Potential with FlowSync"
+        description="FlowSync offers tailored plans designed to empower teams of all sizes. Choose the perfect solution to streamline your workflows, enhance collaboration, and consistently meet your deadlines with unparalleled ease."
+        primaryButton={{"text":"Get Started Today","href":"/signup"}}
+        secondaryButton={{"text":"Compare All Features","href":"/features"}}
+        plans={[{"tag":"Starter","price":"$19/month","description":"Ideal for small teams and startups looking to organize tasks and improve basic collaboration.","features":["Unlimited tasks & projects","Basic workflow automation","Shared calendars & deadlines","Email & in-app notifications","Up to 5 team members"],"primaryButton":{"text":"Choose Starter","href":"/signup?plan=starter"},"secondaryButton":{"text":"Learn More","href":"#starter-details"}},{"tag":"Pro","price":"$49/month","description":"Designed for growing teams needing advanced tools for project management and enhanced productivity.","features":["Everything in Starter, plus:","Advanced analytics & reporting","Customizable workflows & templates","Priority support","Integrations with popular apps","Up to 20 team members"],"highlight":"Most Popular","primaryButton":{"text":"Choose Pro","href":"/signup?plan=pro"},"secondaryButton":{"text":"Learn More","href":"#pro-details"}},{"tag":"Enterprise","price":"Custom","description":"Comprehensive solution for large organizations requiring robust security, scalability, and dedicated support.","features":["Everything in Pro, plus:","Single Sign-On (SSO)","Dedicated account manager","Advanced security & compliance","Onboarding & training","Unlimited team members"],"primaryButton":{"text":"Contact Sales","href":"/contact-sales"},"secondaryButton":{"text":"Request a Demo","href":"/demo"}}]}
+      />
+    </>
+  );
+}

src/pages/SimpleAboutPage.tsx

@@ -1,69 +0,0 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import Button from "@/components/ui/Button";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import { routes } from "@/routes";
-
-export default function SimpleAboutPage() {
-  const navItems = routes.map((r) => ({ name: r.label, href: r.path }));
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <NavbarCentered navItems={navItems} />
-      <main>
-        {/* Hero Section */}
-        <section className="py-20 md:py-32 text-center bg-background">
-          <div className="container mx-auto px-4 max-w-3xl">
-            <h1 className="text-5xl md:text-6xl font-bold mb-6">Our Story, Our Mission</h1>
-            <p className="text-xl text-muted-foreground mb-10">We are a dedicated team committed to creating innovative solutions that empower businesses and individuals alike.</p>
-            <div className="flex justify-center space-x-4">
-              <Button variant="primary" href="#about-us">Learn More</Button>
-              <Button variant="secondary" href="/contact">Contact Us</Button>
-            </div>
-          </div>
-        </section>
-
-        {/* About Section */}
-        <section id="about-us" className="py-20 md:py-32 bg-card text-card-foreground">
-          <div className="container mx-auto px-4 max-w-5xl">
-            <div className="grid md:grid-cols-2 gap-12 items-center">
-              <div>
-                <h2 className="text-4xl font-bold mb-6">Who We Are</h2>
-                <p className="text-lg text-muted-foreground mb-8">Founded on principles of innovation and user-centric design, our journey began with a simple goal: to make technology accessible and impactful. We believe in continuous improvement and fostering strong relationships with our community.</p>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                  <div className="p-4 bg-background rounded-lg border border-border">
-                    <h3 className="font-semibold text-lg mb-1">Innovation</h3>
-                    <p className="text-muted-foreground text-sm">Constantly exploring new ideas and technologies.</p>
-                  </div>
-                  <div className="p-4 bg-background rounded-lg border border-border">
-                    <h3 className="font-semibold text-lg mb-1">Quality</h3>
-                    <p className="text-muted-foreground text-sm">Delivering robust and reliable products.</p>
-                  </div>
-                  <div className="p-4 bg-background rounded-lg border border-border">
-                    <h3 className="font-semibold text-lg mb-1">Integrity</h3>
-                    <p className="text-muted-foreground text-sm">Operating with transparency and honesty.</p>
-                  </div>
-                  <div className="p-4 bg-background rounded-lg border border-border">
-                    <h3 className="font-semibold text-lg mb-1">Customer Success</h3>
-                    <p className="text-muted-foreground text-sm">Prioritizing our users' growth and satisfaction.</p>
-                  </div>
-                </div>
-              </div>
-              <div>
-                <ImageOrVideo src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Our Team Working" className="rounded-lg shadow-xl" />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Contact Section */}
-        <section className="py-20 md:py-32 text-center bg-background">
-          <div className="container mx-auto px-4 max-w-3xl">
-            <h2 className="text-4xl font-bold mb-6">Ready to Connect?</h2>
-            <p className="text-xl text-muted-foreground mb-10">Whether you have a question or just want to say hello, we'd love to hear from you.</p>
-            <Button variant="primary" href="/contact">Get in Touch</Button>
-          </div>
-        </section>
-      </main>
-    </div>
-  );
-}

src/pages/TeamTestimonialsPage.tsx

@@ -0,0 +1,39 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import TeamDetailedCards from "@/components/sections/team/TeamDetailedCards";
+import TestimonialRatingCards from "@/components/sections/testimonial/TestimonialRatingCards";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function TeamTestimonialsPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={[{"name":"Home","href":"/"},{"name":"Our Team","href":"#team"},{"name":"Testimonials","href":"#testimonials"},{"name":"Contact","href":"/contact"}]}
+        ctaButton={{"text":"Get in Touch","href":"/contact"}}
+      />
+      <TeamDetailedCards
+        tag="Our Team"
+        title="Meet the Experts Behind Brand"
+        description="Our dedicated team combines passion, expertise, and a shared commitment to your success. We're here to help you thrive."
+        primaryButton={{"text":"Explore Our Services","href":"/services"}}
+        secondaryButton={{"text":"Get in Touch","href":"/contact"}}
+        members={[{"name":"Alice Johnson","role":"CEO & Founder","description":"Visionary leader driving innovation and client-focused solutions for Brand's future.","socialLinks":[{"icon":"Linkedin","url":"/team#alice-linkedin"}],"imageSrc":"https://images.unsplash.com/photo-1580489944761-15a19d654956?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDEwfHxwcm9mZXNzaW9uYWwlMjB3b21hbnxlbnwwfHx8fDE3MTY1MjQ0Mzh8MA&ixlib=rb-4.0.3&q=80&w=1080"},{"name":"Bob Williams","role":"Head of Product","description":"Transforms complex ideas into intuitive, user-friendly products that delight our customers.","socialLinks":[{"icon":"Linkedin","url":"/team#bob-linkedin"}],"imageSrc":"https://images.unsplash.com/photo-1560250097-0b93528c311a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDN8fHByb2Zlc3Npb25hbCUyMG1hbnxlbnwwfHx8fDE3MTY1MjQ0Mzh8MA&ixlib=rb-4.0.3&q=80&w=1080"},{"name":"Carol Davis","role":"Customer Success Lead","description":"Ensures clients receive unparalleled support and achieve their goals with Brand's solutions.","socialLinks":[{"icon":"Linkedin","url":"/team#carol-linkedin"}],"imageSrc":"https://images.unsplash.com/photo-1573496359142-b8d87734b584?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDE0fHxwcm9mZXNzaW9uYWwlMjB3b21hbnxlbnwwfHx8fDE3MTY1MjQ0Mzh8MA&ixlib=rb-4.0.3&q=80&w=1080"}]}
+      />
+      <TestimonialRatingCards
+        tag="Customer Stories"
+        title="Authentic Feedback from Our Valued Clients"
+        description="Discover the positive experiences our clients have had, reflecting the dedication and expertise of the Brand team."
+        primaryButton={{"text":"Meet Our Team","href":"/team"}}
+        secondaryButton={{"text":"Learn About Our Services","href":"/services"}}
+        testimonials={[{"name":"Sarah Chen","role":"CEO, InnovateTech","quote":"Brand's team truly understands our needs. Their expertise and support have been invaluable to our growth and success.","rating":5,"imageSrc":"https://images.unsplash.com/photo-1580489944761-15a19d654956?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYzMjB8MHwxfHNlYXJjaHwxfHxhc2lhbiUyMHdvbWFuJTIwcG9ydHJhaXR8ZW58MHx8fHwxNzE3NjQ1NjY1fDA&ixlib=rb-4.0.3&q=80&w=1080"},{"name":"David Lee","role":"Founder, GreenSolutions","quote":"The personalized service from Brand is exceptional. They consistently exceed expectations, making a real difference for us.","rating":5,"imageSrc":"https://images.unsplash.com/photo-1507003211169-e69fe1c5a3bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYzMjB8MHwxfHNlYXJjaHwxfHxtYWxlJTIwcG9ydHJhaXR8ZW58MHx8fHwxNzE3NjQ1NjY2fDA&ixlib=rb-4.0.3&q=80&w=1080"},{"name":"Emily White","role":"Director, FutureForward","quote":"Working with Brand has been a game-changer. Their commitment to excellence shines through in every interaction.","rating":5,"imageSrc":"https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYzMjB8MHwxfHNlYXJjaHwxfHxmZW1hbGUlMjBwb3J0cmFpdHxlbnwwfHx8fDE3MTc2NDU2Njd8MA&ixlib=rb-4.0.3&q=80&w=1080"}]}
+      />
+      <FooterSimple
+        brand="Brand"
+        columns={[{"title":"Company","items":[{"label":"About Us","href":"/about"},{"label":"Our Team","href":"/team-testimonials#team"},{"label":"Testimonials","href":"/team-testimonials#testimonials"},{"label":"Careers","href":"/careers"}]},{"title":"Support","items":[{"label":"Contact Us","href":"/contact"},{"label":"FAQ","href":"/faq"},{"label":"Privacy Policy","href":"/privacy"},{"label":"Terms of Service","href":"/terms"}]},{"title":"Resources","items":[{"label":"Blog","href":"/blog"},{"label":"Case Studies","href":"/case-studies"},{"label":"Whitepapers","href":"/whitepapers"}]}]}
+        copyright="© 2024 Brand. All rights reserved."
+        links={[{"label":"LinkedIn","href":"https://linkedin.com/brand"},{"label":"Twitter","href":"https://twitter.com/brand"},{"label":"Facebook","href":"https://facebook.com/brand"}]}
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -6,6 +6,10 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
-  { path: '/pricing-features', label: 'Pricing Features', pageFile: 'PricingFeaturesPage' },
-  { path: '/simple-about', label: 'Simple About', pageFile: 'SimpleAboutPage' },
+  { path: '/plans', label: 'Plans', pageFile: 'PlansPage' },
+  { path: '/about', label: 'About', pageFile: 'AboutPage' },
+  { path: '/contact', label: 'Contact', pageFile: 'ContactPage' },
+  { path: '/team-testimonials', label: 'Team Testimonials', pageFile: 'TeamTestimonialsPage' },
+  { path: '/pricing', label: 'Pricing', pageFile: 'PricingPage' },
+  { path: '/history', label: 'History', pageFile: 'HistoryPage' },
 ];