add

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} />
+  )
+}