Merge version_29_1777236877707 into main

Merge version_29_1777236877707 into main

src/App.tsx

@@ -7,9 +7,10 @@ import ContactPage from "@/pages/ContactPage";
 import TeamTestimonialsPage from "@/pages/TeamTestimonialsPage";
 import PricingPage from "@/pages/PricingPage";
 import PricingSimpleCards from "@/components/sections/pricing/PricingSimpleCards";
-import { FaqSection } from "@/components/sections/faq/FaqSection";
 import ContactForm from "@/components/sections/contact/ContactForm";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
+import HistoryPage from "@/pages/HistoryPage";
 export default function App() {
   return (
     <>
@@ -20,7 +21,11 @@ export default function App() {
         <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"
@@ -54,9 +59,6 @@ export default function App() {
           ]}
         />
       </div>
-      <div id="faq" data-section="faq">
-        <FaqSection />
-      </div>
       <div id="contact" data-section="contact">
         <ContactForm
           tag="Contact Us"

src/components/sections/pricing/PricingSimpleCards.tsx

@@ -62,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>

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/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' },
 ];