Merge version_29_1777236877707 into main

Merge version_29_1777236877707 into main

src/App.tsx

@@ -3,12 +3,70 @@ import HomePage from "@/pages/HomePage";
 import PlansPage from "@/pages/PlansPage";
 
 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 (
-    <Routes>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/plans" element={<PlansPage />} />
-      <Route path="/about" element={<AboutPage />} />
-    </Routes>
+    <>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <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>
+      <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,16 +4,16 @@
 @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/sharp */
   --radius: 0px;

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

@@ -26,7 +26,7 @@ export default function HomePage() {
 
       ]}
       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/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/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

@@ -8,4 +8,8 @@ export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { 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' },
 ];