feat: add active now card to hero section

src/App.tsx

@@ -1,24 +1,12 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
-import FeaturesPage from './pages/Features';
-import SolutionsPage from './pages/Solutions';
-import PricingPage from './pages/Pricing';
-import ClientsPage from './pages/Clients';
-import FaqPage from './pages/Faq';
-import MetricsPage from './pages/Metrics';
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
-        <Route path="/features" element={<FeaturesPage />} />
-        <Route path="/solutions" element={<SolutionsPage />} />
-        <Route path="/pricing" element={<PricingPage />} />
-        <Route path="/clients" element={<ClientsPage />} />
-        <Route path="/faq" element={<FaqPage />} />
-        <Route path="/metrics" element={<MetricsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -8,31 +8,31 @@ export default function Layout() {
   const navItems = [
   {
     "name": "Home",
-    "href": "/"
+    "href": "#home"
   },
   {
     "name": "Features",
-    "href": "/features"
+    "href": "#features"
   },
   {
     "name": "Solutions",
-    "href": "/solutions"
+    "href": "#solutions"
   },
   {
     "name": "Pricing",
-    "href": "/pricing"
+    "href": "#pricing"
   },
   {
     "name": "Clients",
-    "href": "/clients"
+    "href": "#clients"
   },
   {
     "name": "FAQ",
-    "href": "/faq"
+    "href": "#faq"
   },
   {
     "name": "Metrics",
-    "href": "/metrics"
+    "href": "#metrics"
   }
 ];
 

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -56,7 +56,7 @@ const HeroBillboardCarousel = ({
       <div className="w-content-width mx-auto overflow-hidden mask-fade-x">
         <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
           {duplicated.map((item, i) => (
-            <div key={i} className="shrink-0 w-40 md:w-50 2xl:w-60 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
+            <div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
               <ImageOrVideo
                 imageSrc={item.imageSrc}
                 videoSrc={item.videoSrc}

src/components/sections/hero/HeroSplitMediaGrid.tsx

@@ -30,13 +30,7 @@ const HeroSplitMediaGrid = ({
       <div className="flex flex-col md:flex-row items-center gap-10 md:gap-20 w-content-width mx-auto">
         <div className="w-full md:w-1/2">
           <div className="flex flex-col items-center md:items-start gap-3">
-            <div className="flex items-center gap-3 mb-3 p-3 card rounded-theme">
-              <div className="relative flex items-center justify-center w-4 h-4">
-                <div className="absolute w-full h-full bg-green-500 rounded-full animate-ping"></div>
-                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-              </div>
-              <span className="text-sm">2,345 people active now</span>
-            </div>
+            <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
             <TextAnimation
               text={title}
@@ -54,6 +48,16 @@ const HeroSplitMediaGrid = ({
               className="max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left"
             />
 
+            <div className="mt-4 flex items-center gap-3 rounded-theme border border-white/10 bg-white/5 p-3 backdrop-blur-sm">
+              <div className="relative flex h-3 w-3">
+                <div className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></div>
+                <div className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></div>
+              </div>
+              <p className="text-sm text-white/80">
+                <span className="font-semibold text-white">1,337</span> active users right now
+              </p>
+            </div>
+
             <div className="flex flex-wrap max-md:justify-center gap-3 mt-3">
               <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
               <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />

src/components/ui/Button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { motion } from "motion/react";
 import { useButtonClick } from "@/hooks/useButtonClick";
 import { cls } from "@/lib/utils";
 import { useStyle } from "@/components/ui/useStyle";
@@ -22,18 +23,31 @@ interface ButtonProps {
   className?: string;
 }
 
-const DefaultButton = ({ text, variant = "primary", href = "#", onClick, className = "" }: ButtonProps) => {
+const DefaultButton = ({ text, variant = "primary", href = "#", onClick, animate = true, animationDelay = 0, className = "" }: ButtonProps) => {
   const handleClick = useButtonClick(href, onClick);
 
-  return (
+  const button = (
     <a
       href={href}
       onClick={handleClick}
-      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer transform transition-transform duration-200 hover:scale-105 active:scale-95", variant === "primary" ? "primary-button text-primary-cta-text shadow-[0_4px_0_0_rgba(0,0,0,0.2)] hover:shadow-[0_6px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_2px_0_0_rgba(0,0,0,0.2)]" : "secondary-button text-secondary-cta-text shadow-[0_4px_0_0_rgba(0,0,0,0.2)] hover:shadow-[0_6px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_2px_0_0_rgba(0,0,0,0.2)]", className)}
+      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text", className)}
     >
       {text}
     </a>
   );
+
+  if (!animate) return button;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.6, delay: animationDelay, ease: "easeOut" }}
+    >
+      {button}
+    </motion.div>
+  );
 };
 
 const Button = (props: ButtonProps) => {

src/components/ui/NavbarFloating.tsx

@@ -3,7 +3,6 @@ import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowUpRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
-import { Link } from "react-router-dom";
 
 interface NavbarFloatingProps {
   logo: string;
@@ -11,6 +10,15 @@ interface NavbarFloatingProps {
   ctaButton: { text: string; href: string };
 }
 
+const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose?: () => void) => {
+  if (href.startsWith("#")) {
+    e.preventDefault();
+    const element = document.getElementById(href.slice(1));
+    element?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  onClose?.();
+};
+
 const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -38,7 +46,7 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
       </AnimatePresence>
 
       <nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
-        <div className="mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg">
+        <div className="mx-auto w-full md:w-1/2 overflow-hidden rounded backdrop-blur-sm card">
           <div className="relative z-10 flex items-center justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5">
             <a href="/" className="text-xl font-medium text-foreground">{logo}</a>
 
@@ -68,12 +76,12 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
                 className="overflow-hidden"
               >
                 <div className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 pt-0 xl:pt-0 2xl:pt-0">
-                  <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded-theme-capped bg-white/10">
+                  <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded card">
                     {navItems.map((item, index) => (
                       <div key={item.name}>
-                        <Link
-                          to={item.href}
-                          onClick={() => setMenuOpen(false)}
+                        <a
+                          href={item.href}
+                          onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
                           className="group flex items-center justify-between py-3 w-full"
                         >
                           <span className="text-xl md:text-2xl font-medium text-foreground group-hover:ml-3 transition-[margin] duration-300">
@@ -83,7 +91,7 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
                             className="h-(--text-xl) md:h-(--text-2xl) w-auto text-foreground group-hover:rotate-45 group-hover:mr-3 transition-all duration-300"
                             strokeWidth={2}
                           />
-                        </Link>
+                        </a>
                         {index < navItems.length - 1 && (
                           <div className="h-px bg-accent/50" />
                         )}

src/index.css

@@ -138,7 +138,6 @@ body {
   background-color: var(--background);
   color: var(--foreground);
   font-family: '${montserrat.variable} ${inter.variable}', sans-serif;
-  font-weight: 500;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;

src/pages/Clients.tsx

@@ -1,3 +0,0 @@
-export default function ClientsPage() {
-  return <h1>Clients Page</h1>;
-}

src/pages/Faq.tsx

@@ -1,3 +0,0 @@
-export default function FaqPage() {
-  return <h1>FAQ Page</h1>;
-}

src/pages/Features.tsx

@@ -1,3 +0,0 @@
-export default function FeaturesPage() {
-  return <h1>Features Page</h1>;
-}

src/pages/Home.tsx

@@ -1,3 +0,0 @@
-export default function HomePage() {
-  return <h1>Home Page</h1>;
-}

src/pages/HomePage.tsx

@@ -1,8 +1,7 @@
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
 import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
 import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
@@ -13,7 +12,7 @@ export default function HomePage() {
   return (
     <>
   <div id="home" data-section="home">
-      <HeroBillboardScroll
+      <HeroSplitMediaGrid
       tag="Fintech SaaS"
       title="Unlock the Future of Financial Management"
       description="Finflow provides cutting-edge solutions for businesses to streamline operations, enhance security, and drive growth in the digital economy."
@@ -25,7 +24,14 @@ export default function HomePage() {
         text: "Request a Demo",
         href: "#contact",
       }}
-      imageSrc="https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-futuristic-dark-themed-financial-dashb-1778165802560-ef94d27a.png"
+      items={[
+        {
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-futuristic-dark-themed-financial-dashb-1778165802560-ef94d27a.png",
+        },
+        {
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/another-view-of-a-sleek-dark-fintech-das-1778165802942-0ef804ae.png",
+        },
+      ]}
     />
   </div>
 
@@ -43,25 +49,25 @@ export default function HomePage() {
           title: "Advanced Data Analytics",
           description: "Gain deep insights with real-time analytics and predictive modeling for smarter decisions.",
           buttonIcon: "LineChart",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-representation-of-complex-fi-1778165803491-13ee1608.png?_wi=2",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-representation-of-complex-fi-1778165803491-13ee1608.png",
         },
         {
           title: "Enterprise-Grade Security",
           description: "Protect your assets with our multi-layered security protocols and blockchain-backed encryption.",
           buttonIcon: "Lock",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-metaphor-for-advanced-financial-1778165802292-f7d22bff.png?_wi=2",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-metaphor-for-advanced-financial-1778165802292-f7d22bff.png",
         },
         {
           title: "Automated Workflows",
           description: "Streamline operations, reduce manual errors, and free up your team for strategic initiatives.",
           buttonIcon: "Zap",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-illustration-of-financial-process-aut-1778165804096-d3ea01b2.png?_wi=2",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-illustration-of-financial-process-aut-1778165804096-d3ea01b2.png",
         },
         {
           title: "Global Regulatory Compliance",
           description: "Stay compliant with ever-evolving financial regulations through automated monitoring and reporting.",
           buttonIcon: "CheckCircle",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-concept-for-regulatory-complian-1778165802615-1e994baa.png?_wi=2",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-concept-for-regulatory-complian-1778165802615-1e994baa.png",
         },
       ]}
     />

src/pages/Metrics.tsx

@@ -1,3 +0,0 @@
-export default function MetricsPage() {
-  return <h1>Metrics Page</h1>;
-}

src/pages/Pricing.tsx

@@ -1,3 +0,0 @@
-export default function PricingPage() {
-  return <h1>Pricing Page</h1>;
-}

src/pages/Solutions.tsx

@@ -1,3 +0,0 @@
-export default function SolutionsPage() {
-  return <h1>Solutions Page</h1>;
-}