add

package-lock.json

@@ -20,6 +20,7 @@
         "next": "^14.0.4",
         "popmotion": "^11.0.5",
         "react": "^18.2.0",
+        "react-countup": "^6.5.3",
         "react-dom": "^18.2.0",
         "react-icons": "^5.5.0",
         "react-type-animation": "^3.2.0",
@@ -5156,6 +5157,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/countup.js": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.9.0.tgz",
+      "integrity": "sha512-llqrvyXztRFPp6+i8jx25phHWcVWhrHO4Nlt0uAOSKHB8778zzQswa4MU3qKBvkXfJKftRYFJuVHez67lyKdHg==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -11817,6 +11824,18 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-countup": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz",
+      "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==",
+      "license": "MIT",
+      "dependencies": {
+        "countup.js": "^2.8.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "next": "^14.0.4",
     "popmotion": "^11.0.5",
     "react": "^18.2.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
     "react-icons": "^5.5.0",
     "react-type-animation": "^3.2.0",

src/app/(main)/page.tsx

@@ -17,12 +17,12 @@ export default function Home() {
       <section id="home-hero">
         <HomeHero />
       </section>
-      <section id="companies">
-        <Companies />
-      </section>
       <section id="home-about">
         <HomeAbout />
       </section>
+      <section id="companies">
+        <Companies />
+      </section>
       <section id="stack-section">
         <StackSectionPreview />
       </section>

src/components/NavLinks.tsx

@@ -9,10 +9,13 @@ export function NavLinks() {
   let timeoutRef = useRef<number | null>(null)
 
   return [
-    ['About', '/#about'],
-    ['Benefits', '/#benefits'],
-    ['Features', '/#features'],
-    ['Use Cases', '/#usecases'],
+    ['About', '/#home-about'],
+    ['Marketplace', '/#companies'],
+    ['Technology', '/#stack-section'],
+    ['How it works', '/#steps'],
+    ['Use Cases', '/#clickable-gallery'],
+    ['Coming Soon', '/#use-cases'],
+    ['Get Started', '/#call-to-action'],
     ['FAQs', '/#faqs'],
   ].map(([label, href], index) => (
     <Link

src/components/ui/Button.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+const baseStyles = {
+  solid:
+    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
+  outline:
+    'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm transition-colors',
+}
+
+const variantStyles = {
+  solid: {
+    primary: 'bg-[#2F3178] text-white hover:bg-[#2F3178]/90 active:bg-[#2F3178]/80',
+    white: 'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
+    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+  },
+  outline: {
+    primary: 'border-[#2F3178] text-[#2F3178] hover:border-[#2F3178]/80 hover:text-[#2F3178]/80 active:bg-gray-100 active:text-[#2F3178]/70',
+    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+  },
+}
+
+type ButtonProps = (
+    | { variant?: 'solid'; color?: keyof typeof variantStyles.solid }
+    | { variant: 'outline'; color?: keyof typeof variantStyles.outline }
+  ) & (
+    | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'>
+    | (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
+        href?: undefined
+      })
+  )
+
+export function Button({ className, ...props }: ButtonProps) {
+  props.variant ??= 'solid'
+  if (props.variant === 'solid') {
+    props.color ??= 'primary'
+  } else {
+    props.color ??= 'gray'
+  }
+
+  let variantClass: string | undefined;
+  if (props.variant === 'outline') {
+    variantClass = variantStyles.outline[props.color as keyof typeof variantStyles.outline];
+  } else if (props.variant === 'solid') {
+    variantClass = variantStyles.solid[props.color as keyof typeof variantStyles.solid];
+  }
+
+  className = clsx(
+    baseStyles[props.variant],
+    variantClass,
+    className,
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}