fix: remove duplicate text-base class and update navigation links in header

src/components/BuildHero.tsx

@@ -0,0 +1,45 @@
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { Button } from './Button'
+
+
+export default function BuildHero() {
+  return (
+    <div className="relative overflow-hidden">
+      <main>
+        <div className="bg-transparent pt-10 sm:pt-16 lg:overflow-hidden lg:pt-8 lg:pb-14">
+          <div className="mx-auto max-w-7xl lg:px-4">
+            <div className="lg:grid lg:grid-cols-2 lg:gap-16">
+              <div className="mx-auto max-w-md px-6 sm:max-w-2xl sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
+                <div className="lg:py-24">
+                  <div className="hidden sm:mb-5 sm:flex sm:justify-center lg:justify-start">
+                  </div>
+                  <h1 className="text-xl font-medium tracking-tight text-white lg:text-5xl">
+                    <span className="block">Build on a Decentralized Internet Infrastructure</span>
+                  </h1>
+                  <p className="mt-3 text-base text-gray-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                  Our unique technology enables anyone to become a provider of network, storage and compute capacity.
+                  </p>
+                  <div className="mt-10 sm:mt-12">
+                    <Button color="gradient" href="https://docs.threefold.io/docs/introduction/">Dive Deeper</Button>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-12 -mb-16 sm:-mb-48 lg:relative lg:m-0 flex items-center justify-center">
+                <div className="mx-auto max-w-md px-6 sm:max-w-2xl lg:max-w-none lg:px-0">
+                  {/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
+                  <img
+                    alt=""
+                    src="/images/build.svg"
+                    className="w-full lg:h-full lg:w-auto lg:max-w-none transform lg:scale-110"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

src/components/BuildStack.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { Button } from "./Button";
+import Image from "next/image";
+
+import {
+  CpuChipIcon,
+  CircleStackIcon,
+  CurrencyDollarIcon,
+  ShareIcon,
+  ShieldCheckIcon,
+  LinkIcon,
+  ServerStackIcon,
+  WifiIcon,
+  ComputerDesktopIcon,
+  UsersIcon,
+  DevicePhoneMobileIcon,
+} from "@heroicons/react/24/solid";
+
+const posts = [
+  {
+    id: 1,
+    title: 'ZERO-OS V3',
+    href: '#',
+    description1:
+      'A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.',
+    description2: '',
+    icon: <CpuChipIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 2,
+    title: 'MYCELIUM NETWORK',
+    href: '#',
+    description1: 'Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.',
+    description2: '',
+    icon: <ShareIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 3,
+    title: 'QUANTUM SAFE STORAGE',
+    href: '#',
+    description1:
+      'QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.',
+    description2: '',
+    icon: <ShieldCheckIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 4,
+    title: 'TF CHAIN',
+    href: '#',
+    description1:
+      'An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.',
+    description2: '',
+    icon: <LinkIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 5,
+    title: '3NODES',
+    href: '#',
+    description1:
+      'Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.',
+    description2: '',
+    icon: <ServerStackIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 6,
+    title: 'GATEWAY NODES',
+    href: '#',
+    description1:
+      'Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.',
+    description2: '',
+    icon: <WifiIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 7,
+    title: 'TF DASHBOARD',
+    href: '#',
+    description1:
+      'A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.',
+    description2: '',
+    icon: <ComputerDesktopIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 8,
+    title: 'TF DAO',
+    href: '#',
+    description1:
+      'A community-driven governance model that allows farmers to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.',
+    description2: '',
+    icon: <UsersIcon className="h-6 w-6 text-white" />,
+  },
+  {
+    id: 9,
+    title: 'TF CONNECT APP',
+    href: '#',
+    description1:
+      'A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.',
+    description2: '',
+    icon: <DevicePhoneMobileIcon className="h-6 w-6 text-white" />,
+  },
+]
+
+
+export default function BuildStack() {
+
+  return (
+    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative">
+    {/* Gradient Blob Component */}
+      <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#535353] to-[#7e7e7e] opacity-60 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
+      <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
+      <div className="mx-auto max-w-7xl">
+        <div className="lg:flex lg:items-center lg:justify-between lg:px-8">
+          {/* Left Column - Text (1/3 width) */}
+          <div className="lg:col-span-1 flex max text-center lg:text-left order-1 lg:order-1">
+            <div className="max-w-xl">
+            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            The ThreeFold Stack
+            </h2>
+            <p className="mt-3 text-base text-gray-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+            Products designed to power a decentralized, sustainable digital future.
+            </p>  
+            </div>
+            </div>
+          {/* Right Column - Stacked Cubes (2/3 width) */}
+          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
+            <Button variant="outline">
+              Become A Farmer
+            </Button>
+          </div>
+        </div>
+        <div className="mx-auto  mt-10 grid max-w-2xl h-3/4 grid-cols-1 gap-8 lg:mt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post.id}
+              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-stat-gradient p-8"
+            >
+              <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10" 
+              style={{
+                    filter: 'brightness(1)',
+                }}
+                onMouseEnter={(e) => {
+                    e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
+                }}
+                onMouseLeave={(e) => {
+                    e.currentTarget.style.filter = 'brightness(1)';
+                }}
+                >
+                </div>
+                <div className="flex items-start gap-x-3 text-lg/6 font-semibold text-white">
+                    {post.icon}
+                    {post.title}
+                </div>  
+                < div className="max-w-2/3">
+                <p className="mt-4 text-sm font-light text-gray-700">{post.description1}</p>
+                <p className=" text-sm font-light text-gray-700">{post.description2}</p>
+                </div>
+                            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HeroHome.tsx

@@ -21,7 +21,7 @@ export default function HeroHome() {
               <h1 className="text-3xl font-medium tracking-tight text-white lg:text-5xl">
                 Empowering Purpose-Driven Organizations.
               </h1>
-              <p className="mt-8 lg:lg:text-lg text-base text-base text-gray-300">
+              <p className="mt-8 lg:lg:text-lg text-base text-gray-300">
                 Welcome to <span className={`font-semibold ${gradientText}`}>ThreeFold</span>: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraise—at a fraction of the cost.
               </p>
               <div className="mt-12 flex items-center justify-center gap-x-6 relative z-10">

src/components/NavLinks.tsx

@@ -9,8 +9,8 @@ export function NavLinks() {
   let timeoutRef = useRef<number | null>(null)
 
   return [
-    ['About', '/#features'],
-    ['Build', '/#reviews'],
+    ['About', '/about'],
+    ['Build', '/build'],
     ['Host', '/#pricing'],
   ].map(([label, href], index) => (
     <Link