Merge version_29_1777236877707 into main

Merge version_29_1777236877707 into main

src/App.tsx

@@ -6,15 +6,67 @@ 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 />} />
-      <Route path="/contact" element={<ContactPage />} />
-      <Route path="/team-testimonials" element={<TeamTestimonialsPage />} />
-      <Route path="/pricing" element={<PricingPage />} />
-    </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/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/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/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/routes.ts

@@ -11,4 +11,5 @@ export const routes: Route[] = [
   { 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' },
 ];