add

src/components/Button.tsx

@@ -5,7 +5,7 @@ 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(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
+    '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 = {
@@ -16,7 +16,8 @@ const variantStyles = {
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
   },
   outline: {
-    gray: 'border-gray-300 text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-white',
+    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    white: 'border-gray-300 text-white hover:border-gray-400 active:bg-gray-100 active:text-white/80',
   },
 }
 

src/components/CallToAction.tsx

@@ -17,7 +17,7 @@ export function CallToAction() {
       >
         <source src="/videos/cta.mp4" type="video/mp4" />
       </video>
-      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-10"></div>
+      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-40 z-10"></div>
       <div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
@@ -31,10 +31,10 @@ export function CallToAction() {
             build your own. Ready to own your intelligence?
           </p>
           <div className="mt-8 flex justify-center gap-x-6">
-            <Button variant="solid" href="#">
+            <Button variant="solid" color="cyan" href="#">
               Book a Meeting
             </Button>
-            <Button href="#" variant="outline">
+            <Button href="#" variant="outline" color="white">
               Join the Waitlist
             </Button>
           </div>

src/components/GetStarted.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { H2, P, CP } from "@/components/Texts";
-import { Button } from "@/components/ui/Button";
+import { Button } from "@/components/Button";
 
 export  function GetStarted() {
   const items = [
@@ -58,7 +58,7 @@ export  function GetStarted() {
             {/* Title + Button Row */}
             <div className="flex items-center justify-between">
               <h3 className="text-xl font-semibold">{item.title}</h3>
-              <Button variant="outline" href={item.href}>
+              <Button variant="outline" href={item.href} color="white">
                 {item.buttonText}
               </Button>
             </div>

src/components/GridStats.tsx

@@ -27,7 +27,7 @@ export function GridStats() {
               <P color="light" className="mt-6">
                 Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
               </P>
-              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
+              <Button className="mt-8" variant="outline" href="https://threefold.io/build" color="white">Explore TFGrid →</Button>
             </div>
           </div>
 

src/components/Header.tsx

@@ -122,7 +122,7 @@ export function Header() {
                             <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white">
                               Docs
                             </Button>
                             <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>

src/components/UseCases.tsx

@@ -93,7 +93,7 @@ function Review({
       {...props}
     >
       <blockquote className="text-white">
-        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
+        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-white mb-2" })}
         <CT color="light" className="mt-4 text-lg/6 font-semibold">
           {title}
         </CT>

src/components/ui/Button.tsx

@@ -1,59 +0,0 @@
-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-[#005eff] text-white hover:bg-[#005eff]/90 active:bg-[#005eff]/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-[#005eff] text-[#005eff] hover:border-[#005eff]/80 hover:text-[#005eff]/80 active:bg-gray-100 active:text-[#005eff]/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} />
-  )
-}