feat: add animated grid background with randomly activating cells in AboutSolutions

README.md

@@ -1,6 +1,6 @@
-# EngageOS
+# ThreeFold
 
-EngageOS is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+ThreeFold is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
 
 ## Getting started
 

build.sh

@@ -1,6 +1,9 @@
 #!/bin/bash
 cd "$(dirname "$0")"
 
+# Ensure all shell scripts are executable
+chmod +x *.sh
+
 PREFIX="threefold"
 
 echo "building for folder: /$PREFIX/"
@@ -14,5 +17,3 @@ pnpm run build
 # local mirror (optional)
 # rsync -rav --delete dist/ "${HOME}/hero/var/www/$PREFIX/"
 
-# deploy to threefold server
-rsync -avz --delete out/ "root@threefold.info:/root/hero/www/info/$PREFIX/"

package.json

@@ -29,6 +29,7 @@
     "react": "^18.3.1",
     "react-countup": "^6.5.3",
     "react-dom": "^18.3.1",
+    "react-type-animation": "^3.2.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^4.1.7",
     "three": "^0.179.1",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-type-animation:
+        specifier: ^3.2.0
+        version: 3.2.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.6.0
         version: 2.6.0
@@ -2270,6 +2273,13 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  react-type-animation@3.2.0:
+    resolution: {integrity: sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==}
+    peerDependencies:
+      prop-types: ^15.5.4
+      react: '>= 15.0.0'
+      react-dom: '>= 15.0.0'
+
   react-use-measure@2.1.7:
     resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
     peerDependencies:
@@ -4945,6 +4955,12 @@ snapshots:
       react: 18.3.1
       scheduler: 0.21.0
 
+  react-type-animation@3.2.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-use-measure@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1

public/images/build.svg

@@ -0,0 +1,74 @@
+<svg width="601" height="600" viewBox="0 0 601 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_266_24)">
+<path opacity="0.07" d="M546.232 252.902C546.232 256.16 546.16 259.418 545.943 262.459C577.053 286.135 601 336.889 601 381.561C601 430.216 572.567 453.167 537.478 432.895C537.406 432.822 537.333 432.822 537.261 432.75L316.815 305.539C316.742 305.466 316.67 305.466 316.525 305.394C277.095 282.587 245.117 219.814 245.117 165.15C245.117 113.961 273.188 87.9689 309.146 103.68C313.559 68.565 337.072 53.4329 365.433 69.8683C379.035 77.7602 391.551 91.589 401.318 108.242C415.498 87.1725 439.663 81.8147 467.01 97.5984C510.781 122.795 546.232 192.373 546.232 252.902Z" fill="url(#paint0_linear_266_24)"/>
+<path opacity="0.4" d="M510.058 287.655C510.058 290.913 509.986 294.172 509.769 297.212C540.879 320.888 564.826 371.642 564.826 416.315C564.826 464.969 536.393 487.921 501.304 467.648C501.232 467.576 501.159 467.576 501.087 467.503L280.641 340.292C280.569 340.22 280.496 340.22 280.351 340.147C240.921 317.34 208.943 254.567 208.943 199.903C208.943 148.715 237.015 122.722 272.972 138.434C277.385 103.318 300.898 88.1863 329.259 104.622C342.861 112.514 355.377 126.342 365.144 142.995C379.324 121.926 403.489 116.568 430.837 132.352C474.608 157.548 510.058 227.127 510.058 287.655Z" fill="url(#paint1_linear_266_24)"/>
+<path opacity="0.2" d="M161.048 349.632L127.479 330.228V318.861L161.048 338.265C163.798 339.858 167.777 343.043 171.177 347.967C174.867 353.252 177.471 359.913 177.471 367.153C177.471 375.118 175.446 379.679 171.539 380.982C167.921 382.213 163.653 380.113 160.976 378.593L147.157 370.629L147.085 370.556C145.927 369.832 144.046 369.181 142.527 369.615C141.297 369.977 139.922 371.208 139.922 375.624C139.922 380.041 141.297 382.792 142.455 384.385C143.902 386.412 145.783 387.86 146.94 388.44L147.085 388.512L189.264 412.912V424.279L147.302 400.024C144.408 398.504 140.284 395.318 136.667 390.25C132.76 384.747 130.011 377.724 130.083 369.905C130.083 362.158 132.76 358.175 136.667 357.089C140.284 356.076 144.408 357.524 147.302 359.334L160.976 367.226C162.929 368.384 164.449 368.891 165.389 368.529C166.113 368.312 167.56 367.226 167.56 361.434C167.56 357.741 166.33 355.279 165.245 353.614C163.942 351.732 162.134 350.284 161.048 349.632Z" fill="white"/>
+<path d="M134.714 327.404C134.714 336.744 129.215 341.161 122.487 337.323C115.758 333.414 110.26 322.698 110.26 313.286C110.26 303.946 115.758 299.529 122.487 303.367C129.215 307.276 134.714 318.064 134.714 327.404Z" fill="#595959"/>
+<path d="M206.339 428.044C206.339 437.384 200.84 441.8 194.112 437.963C187.383 434.053 181.885 423.338 181.885 413.925C181.885 404.585 187.383 400.169 194.112 404.006C200.84 407.916 206.339 418.704 206.339 428.044Z" fill="#595959"/>
+<path opacity="0.07" d="M264.145 187.522L481.118 312.851V427.754L264.072 302.425L264.145 187.522Z" fill="url(#paint2_linear_266_24)"/>
+<path opacity="0.3" d="M235.133 202.003L452.106 327.332V442.235L235.133 316.906V202.003Z" fill="url(#paint3_linear_266_24)"/>
+<path d="M254.594 270.424C254.594 279.691 260.092 290.335 266.821 294.244C273.549 298.154 279.048 293.81 279.048 284.542C279.048 275.275 273.549 264.632 266.821 260.722C260.092 256.812 254.594 261.156 254.594 270.424Z" fill="#595959"/>
+<path opacity="0.15" d="M285.199 288.307C285.199 292.579 287.731 297.575 290.915 299.385C294.026 301.195 296.558 299.168 296.558 294.896C296.558 290.624 294.026 285.628 290.842 283.818C287.731 282.008 285.199 284.035 285.199 288.307Z" fill="white"/>
+<path opacity="0.15" d="M302.635 298.371C302.635 302.642 305.167 307.638 308.35 309.448C311.461 311.258 313.994 309.231 313.994 304.959C313.994 300.688 311.461 295.692 308.278 293.882C305.167 292.072 302.635 294.099 302.635 298.371Z" fill="white"/>
+<path opacity="0.15" d="M397.338 317.919V383.299L388.801 378.376V312.996L397.338 317.919Z" fill="white"/>
+<path opacity="0.15" d="M416.004 328.78V394.159L407.467 389.236V323.856L416.004 328.78Z" fill="white"/>
+<path opacity="0.15" d="M434.742 339.64V405.02L426.205 400.096V334.717L434.742 339.64Z" fill="white"/>
+<path opacity="0.07" d="M264.072 344.563L481.046 469.892V584.795L264.072 459.466V344.563Z" fill="url(#paint4_linear_266_24)"/>
+<path opacity="0.3" d="M235.133 359.768L452.106 485.097V600L235.133 474.671V359.768Z" fill="url(#paint5_linear_266_24)"/>
+<path d="M254.594 428.188C254.594 437.456 260.092 448.099 266.821 452.009C273.549 455.919 279.048 451.574 279.048 442.307C279.048 433.039 273.549 422.396 266.821 418.487C260.092 414.577 254.594 418.921 254.594 428.188Z" fill="#565656"/>
+<path opacity="0.15" d="M285.199 446.145C285.199 450.416 287.731 455.412 290.915 457.222C294.026 459.032 296.558 457.005 296.558 452.733C296.558 448.461 294.026 443.466 290.842 441.656C287.731 439.846 285.199 441.8 285.199 446.145Z" fill="white"/>
+<path opacity="0.15" d="M302.562 456.208C302.562 460.48 305.096 465.476 308.279 467.286C311.39 469.096 313.921 467.069 313.921 462.797C313.921 458.525 311.389 453.53 308.206 451.719C305.095 449.837 302.562 451.864 302.562 456.208Z" fill="white"/>
+<path opacity="0.15" d="M397.338 477.929V543.309L388.801 538.385V473.006L397.338 477.929Z" fill="white"/>
+<path opacity="0.15" d="M416.004 488.79V554.169L407.467 549.246V483.866L416.004 488.79Z" fill="white"/>
+<path opacity="0.15" d="M434.742 499.65V565.029L426.205 560.106V494.727L434.742 499.65Z" fill="white"/>
+<path opacity="0.3" d="M42.4688 31.7847L177.688 109.907V360.637L42.4688 282.442V31.7847Z" fill="url(#paint6_linear_266_24)"/>
+<path d="M125.959 122.577C125.959 135.103 118.724 141.04 109.825 135.827C100.926 130.614 93.6914 116.278 93.6914 103.753C93.6914 91.2272 100.926 85.2901 109.825 90.5031C118.724 95.7161 125.959 110.052 125.959 122.577Z" fill="#595959"/>
+<path d="M109.825 145.891C95.4274 137.493 83.5622 145.384 81.4641 163.485C81.1024 166.598 83.4899 170.798 86.3838 172.463L133.338 199.904C136.232 201.569 138.62 200.266 138.258 196.645C136.087 176.011 124.15 154.29 109.825 145.891Z" fill="#595959"/>
+<path opacity="0.15" d="M69.5996 194.401L150.196 240.956V250.802L69.5996 204.248V194.401Z" fill="white"/>
+<path opacity="0.15" d="M77.7754 218.656L141.659 255.509V265.355L77.7754 228.502V218.656Z" fill="white"/>
+<path d="M94.0532 260.07L0 205.696V233.716L94.0532 288.09V260.07Z" fill="#363636"/>
+<path opacity="0.2" d="M206.845 0L226.958 39.5318C229.707 44.962 229.273 50.3922 225.945 51.6954C222.617 52.9987 217.698 49.5957 214.948 44.1656L214.731 43.6587V87.5347C214.731 92.5305 211.259 94.5577 206.918 92.096C202.577 89.5619 199.104 83.5525 199.104 78.5568V34.6808L198.887 34.898C196.138 37.1425 191.146 34.8256 187.89 29.685C184.562 24.5445 184.128 18.6075 186.877 16.363L206.845 0Z" fill="url(#paint7_linear_266_24)"/>
+<path opacity="0.2" d="M206.845 583.709L186.733 544.177C183.983 538.747 184.417 533.317 187.745 532.014C191.073 530.711 195.993 534.113 198.742 539.544L198.959 540.05V496.174C198.959 491.179 202.432 489.151 206.773 491.613C211.114 494.147 214.587 500.157 214.587 505.152V549.028L214.804 548.811C217.553 546.567 222.545 548.884 225.801 554.024C229.129 559.165 229.563 565.102 226.814 567.346L206.845 583.709Z" fill="url(#paint8_linear_266_24)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_266_24" x1="588.058" y1="114.638" x2="364.033" y2="326.972" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_266_24" x1="551.876" y1="149.392" x2="327.852" y2="361.726" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_266_24" x1="368.16" y1="196.711" x2="376.256" y2="399.958" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_266_24" x1="339.219" y1="211.191" x2="347.315" y2="414.438" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_266_24" x1="368.144" y1="353.776" x2="376.24" y2="557.023" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_266_24" x1="339.204" y1="368.981" x2="347.3" y2="572.227" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_266_24" x1="192.18" y1="53.8207" x2="72.0119" y2="261.857" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_266_24" x1="221.158" y1="39.8764" x2="184.449" y2="60.3243" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_266_24" x1="192.494" y1="543.86" x2="229.203" y2="523.412" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_266_24">
+<rect width="601" height="600" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/(main)/about/page.tsx

@@ -0,0 +1,12 @@
+import { AboutHero } from "@/components/AboutHero"
+import { AboutSolutions } from "@/components/AboutSolutions"
+
+
+export default function About() {
+  return (
+    <div>
+      <AboutHero />
+      <AboutSolutions />
+    </div>
+  )
+}

src/app/(main)/build/page.tsx

@@ -1,84 +1,12 @@
-import { AppsPreview } from '../../../components/Apps'
+import BuildHero from "@/components/BuildHero";
-import { Container } from '../../../components/Container'
+import BuildStack from "@/components/BuildStack";
-
-export const metadata = {
-  title: 'Build',
-  description: 'Build and deploy your applications on ThreeFold\'s decentralized infrastructure.',
-}
 
 export default function Build() {
     return (
-    <>
+      <div>
-      {/* Hero Section */}
+        <BuildHero />
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
+        <BuildStack />
-        <Container>
-          <div className="mx-auto max-w-4xl text-center">
-            <h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
-              Build on ThreeFold
-            </h1>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              Deploy your Web2, Web3, and AI applications on truly decentralized infrastructure. 
-              Own your data, control your destiny.
-            </p>
       </div>
-        </Container>
-      </section>
-
-      {/* Apps Preview */}
-      <AppsPreview />
-
-      {/* Developer Tools */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl mb-12">
-            <h2 className="text-3xl font-medium tracking-tight text-white">
-              Developer Tools & Resources
-            </h2>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              Everything you need to build and deploy on the ThreeFold Grid.
-            </p>
-          </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">TF Grid SDK</h3>
-              <p className="text-gray-300 mb-4">
-                Comprehensive SDK for deploying and managing workloads on the ThreeFold Grid.
-              </p>
-              <a href="https://github.com/threefoldtech" className="text-cyan-400 hover:text-cyan-300">
-                View on GitHub →
-              </a>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Documentation</h3>
-              <p className="text-gray-300 mb-4">
-                Comprehensive guides, tutorials, and API documentation for developers.
-              </p>
-              <a href="https://manual.threefold.io" className="text-cyan-400 hover:text-cyan-300">
-                Read Docs →
-              </a>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Community Forum</h3>
-              <p className="text-gray-300 mb-4">
-                Get help from the community and share your ThreeFold projects.
-              </p>
-              <a href="https://forum.threefold.io" className="text-cyan-400 hover:text-cyan-300">
-                Join Forum →
-              </a>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Marketplace</h3>
-              <p className="text-gray-300 mb-4">
-                Browse and deploy ready-made solutions from the ThreeFold ecosystem.
-              </p>
-              <a href="https://marketplace.threefold.io" className="text-cyan-400 hover:text-cyan-300">
-                Explore →
-              </a>
-            </div>
-          </div>
-        </Container>
-      </section>
-    </>
     )
-}
+  }
+  

src/app/(main)/community/page.tsx

@@ -1,120 +0,0 @@
-import { Container } from '../../../components/Container'
-
-export const metadata = {
-  title: 'Community',
-  description: 'Join the ThreeFold community building the decentralized internet.',
-}
-
-export default function Community() {
-  return (
-    <>
-      {/* Hero Section */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-4xl text-center">
-            <h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
-              Join the Movement
-            </h1>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              ThreeFold is more than technology - it's a global community building 
-              a better internet for everyone.
-            </p>
-          </div>
-        </Container>
-      </section>
-
-      {/* Community Stats */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
-            <div>
-              <div className="text-4xl font-bold text-cyan-400 mb-2">50K+</div>
-              <div className="text-gray-300">Community Members</div>
-            </div>
-            <div>
-              <div className="text-4xl font-bold text-cyan-400 mb-2">1,800+</div>
-              <div className="text-gray-300">Active Farmers</div>
-            </div>
-            <div>
-              <div className="text-4xl font-bold text-cyan-400 mb-2">500+</div>
-              <div className="text-gray-300">Developers</div>
-            </div>
-            <div>
-              <div className="text-4xl font-bold text-cyan-400 mb-2">51</div>
-              <div className="text-gray-300">Countries</div>
-            </div>
-          </div>
-        </Container>
-      </section>
-
-      {/* Community Channels */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl mb-12">
-            <h2 className="text-3xl font-medium tracking-tight text-white">
-              Connect with the Community
-            </h2>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              Join our global community across multiple platforms.
-            </p>
-          </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {[
-              {
-                name: 'Forum',
-                description: 'Discuss ideas, get help, and share your projects',
-                link: 'https://forum.threefold.io',
-                members: '15K+ members'
-              },
-              {
-                name: 'Telegram',
-                description: 'Real-time chat with farmers and developers',
-                link: 'https://t.me/threefold',
-                members: '25K+ members'
-              },
-              {
-                name: 'Discord',
-                description: 'Voice chat and community events',
-                link: 'https://discord.gg/threefold',
-                members: '8K+ members'
-              },
-              {
-                name: 'GitHub',
-                description: 'Contribute to open-source development',
-                link: 'https://github.com/threefoldtech',
-                members: '200+ contributors'
-              },
-              {
-                name: 'Twitter/X',
-                description: 'Latest news and announcements',
-                link: 'https://twitter.com/threefold_io',
-                members: '30K+ followers'
-              },
-              {
-                name: 'LinkedIn',
-                description: 'Professional network and company updates',
-                link: 'https://linkedin.com/company/threefold',
-                members: '5K+ followers'
-              },
-            ].map((channel) => (
-              <div key={channel.name} className="bg-gray-900 p-8 rounded-2xl hover:bg-gray-800 transition-colors">
-                <h3 className="text-xl font-semibold text-white mb-4">{channel.name}</h3>
-                <p className="text-gray-300 mb-4">{channel.description}</p>
-                <div className="text-sm text-cyan-400 mb-4">{channel.members}</div>
-                <a 
-                  href={channel.link} 
-                  className="text-cyan-400 hover:text-cyan-300 font-medium"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Join {channel.name} →
-                </a>
-              </div>
-            ))}
-          </div>
-        </Container>
-      </section>
-    </>
-  )
-}

src/app/(main)/farming/page.tsx

@@ -1,66 +0,0 @@
-import { FarmerPreview } from '../../../components/Farmer'
-import { Container } from '../../../components/Container'
-
-export const metadata = {
-  title: 'Farming',
-  description: 'Learn how to become a ThreeFold farmer and earn rewards by contributing to the decentralized internet.',
-}
-
-export default function Farming() {
-  return (
-    <>
-      {/* Hero Section */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-4xl text-center">
-            <h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
-              Become a ThreeFold Farmer
-            </h1>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              Join thousands of farmers worldwide who are building the decentralized internet 
-              and earning rewards for their contribution.
-            </p>
-          </div>
-        </Container>
-      </section>
-
-      {/* Farmer Process */}
-      <FarmerPreview />
-
-      {/* Farming Benefits */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl mb-12">
-            <h2 className="text-3xl font-medium tracking-tight text-white">
-              Why Become a Farmer?
-            </h2>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              ThreeFold farming offers unique benefits compared to traditional hosting or mining.
-            </p>
-          </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Earn TFT Rewards</h3>
-              <p className="text-gray-300">
-                Get rewarded in ThreeFold Tokens (TFT) for providing capacity to the grid.
-              </p>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Low Energy Usage</h3>
-              <p className="text-gray-300">
-                Our efficient Zero-OS uses up to 10x less energy than traditional cloud infrastructure.
-              </p>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Easy Setup</h3>
-              <p className="text-gray-300">
-                Simply boot any computer with our Zero-OS image and you're farming in minutes.
-              </p>
-            </div>
-          </div>
-        </Container>
-      </section>
-    </>
-  )
-}

src/app/(main)/grid/page.tsx

@@ -1,60 +0,0 @@
-import { Dashboard } from '../../../components/Dashboard'
-import { Container } from '../../../components/Container'
-import GlobeDemo from '../../../components/GlobeDemo'
-
-export const metadata = {
-  title: 'Grid Status',
-  description: 'Live statistics and status of the ThreeFold Grid - the world\'s largest decentralized internet infrastructure.',
-}
-
-export default function Grid() {
-  return (
-    <>
-      {/* Hero Section */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-4xl text-center">
-            <h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
-              ThreeFold Grid Status
-            </h1>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              Real-time statistics of our global decentralized infrastructure network.
-            </p>
-          </div>
-        </Container>
-      </section>
-
-      {/* Globe Visualization */}
-      <section className="relative h-[600px]" style={{ backgroundColor: '#121212' }}>
-        <GlobeDemo />
-      </section>
-
-      {/* Dashboard Stats */}
-      <Dashboard />
-
-      {/* Additional Grid Info */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-            <div className="text-center">
-              <div className="text-3xl font-bold text-cyan-400 mb-2">99.9%</div>
-              <div className="text-gray-300">Uptime</div>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-cyan-400 mb-2">80%</div>
-              <div className="text-gray-300">Energy Savings vs Cloud</div>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-cyan-400 mb-2">10x</div>
-              <div className="text-gray-300">More Secure</div>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-cyan-400 mb-2">100%</div>
-              <div className="text-gray-300">Decentralized</div>
-            </div>
-          </div>
-        </Container>
-      </section>
-    </>
-  )
-}

src/app/(main)/page.tsx

@@ -1,11 +1,23 @@
-import { SpotlightPreview } from '../../components/Spotlight'
+import { CallToAction } from '@/components/CallToAction'
-import { StackSectionPreview } from '../../components/StackSection'
+import { Hero } from '@/components/Hero'
-import { Dashboard } from '../../components/Dashboard'
+import { Pricing } from '@/components/Pricing'
-import { AppsPreview } from '../../components/Apps'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { FarmerPreview } from '../../components/Farmer'
+import { Reviews } from '@/components/Reviews'
-import { Reviews } from '../../components/Reviews'
+import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Faqs } from '../../components/Faqs'
+import Tractions from '@/components/Tractions'
-import Cta from '../../components/Cta'
+import Benefits from '@/components/Benefits'
+import  Cta from '@/components/Cta'
+import { SpotlightPreview } from '@/components/Spotlight'
+import { StackSectionPreview } from '@/components/StackSection'
+import GlobeDemo from '@/components/GlobeDemo'
+import { Dashboard } from '@/components/Dashboard'
+import { AppsPreview } from '@/components/Apps'
+import { FarmerPreview } from '@/components/Farmer'
+import { TfDashboard } from '@/components/TfDashboard'
+import { ProductsPreview } from '@/components/Products'
+import { CallTo } from '@/components/CallTo'
+import { Faqss } from '@/components/Faqs'
+
 
 export default function Home() {
   return (
@@ -14,10 +26,11 @@ export default function Home() {
       <StackSectionPreview />
       <Dashboard />
       <FarmerPreview />
+      <TfDashboard />
       <AppsPreview />
-      <Reviews />
+      <ProductsPreview />
-      <Faqs />
+      <CallTo />
-      <Cta />
+      <Faqss />
     </>
   )
 }

src/app/(main)/technology/page.tsx

@@ -1,61 +0,0 @@
-import { Container } from '../../../components/Container'
-import { StackSectionPreview } from '../../../components/StackSection'
-
-export const metadata = {
-  title: 'Technology',
-  description: 'Deep dive into ThreeFold\'s revolutionary decentralized infrastructure technology.',
-}
-
-export default function Technology() {
-  return (
-    <>
-      {/* Hero Section */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="mx-auto max-w-4xl text-center">
-            <h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
-              Revolutionary Technology Stack
-            </h1>
-            <p className="mt-6 lg:text-lg text-base text-gray-300">
-              ThreeFold has reimagined internet infrastructure from the ground up, 
-              creating a truly decentralized, sustainable, and sovereign alternative to Big Tech.
-            </p>
-          </div>
-        </Container>
-      </section>
-
-      {/* Stack Section */}
-      <StackSectionPreview />
-
-      {/* Technical Details */}
-      <section className="py-24" style={{ backgroundColor: '#121212' }}>
-        <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Zero-OS</h3>
-              <p className="text-gray-300">
-                Our lightweight operating system runs directly on bare metal, 
-                eliminating the overhead of traditional virtualization while 
-                providing maximum security and efficiency.
-              </p>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Quantum Safe Storage</h3>
-              <p className="text-gray-300">
-                Revolutionary storage system that disperses data across multiple 
-                nodes, making it quantum-safe and virtually impossible to hack or lose.
-              </p>
-            </div>
-            <div className="bg-gray-900 p-8 rounded-2xl">
-              <h3 className="text-xl font-semibold text-white mb-4">Planetary Network</h3>
-              <p className="text-gray-300">
-                End-to-end encrypted overlay network that creates the shortest 
-                path between any two points on the internet, bypassing traditional routing.
-              </p>
-            </div>
-          </div>
-        </Container>
-      </section>
-    </>
-  )
-}

src/app/layout.tsx

@@ -2,7 +2,7 @@ import { type Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import clsx from 'clsx'
 
-import '../styles/tailwind.css'
+import '@/styles/tailwind.css'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -13,11 +13,10 @@ const inter = Inter({
 export const metadata: Metadata = {
   title: {
     template: '%s - ThreeFold',
-    default: 'ThreeFold - Decentralized Internet Infrastructure',
+    default: 'ThreeFold - Decentralized internet  by everyone, for everyone.',
   },
   description:
-    'ThreeFold is building a decentralized internet infrastructure owned and operated by the people. Join the movement to create a more sovereign, sustainable, and accessible internet for all.',
+    'ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.',
-  keywords: 'decentralized internet, blockchain, Web3, cloud infrastructure, sovereign technology',
 }
 
 export default function RootLayout({
@@ -26,8 +25,10 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={clsx('antialiased', inter.variable)} style={{ backgroundColor: '#121212' }}>
+    <html lang="en" className={clsx('antialiased', inter.variable)} suppressHydrationWarning>
-      <body style={{ backgroundColor: '#121212', color: '#ffffff' }}>{children}</body>
+      <body className="bg-[#121212] text-white" suppressHydrationWarning>
+        {children}
+      </body>
     </html>
   )
 }

src/components/AboutHero.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { TypeAnimation } from 'react-type-animation';
+
+const rotatingWords = [
+  "everyone",
+  1500,
+  "creators",
+  1500,
+  "dreamers",
+  1500,
+  "developers",
+  1500,
+  "communities",
+  1500,
+  "humanity",
+  1500,
+  "builders",
+  1500,
+  "thinkers",
+  1500,
+  "doers",
+  1500,
+  "pioneers",
+  1500,
+  "the next billion",
+  1500,
+  "All",
+  1500,
+];
+
+export function AboutHero() {
+  return (
+    <section className="flex flex-col items-start justify-center min-h-[70vh] px-6 md:px-16  text-white">
+      <h1 className="text-5xl lg:text-8xl font-medium leading-none">
+        Building a Decentralized Internet for{" "}
+        <TypeAnimation
+          sequence={rotatingWords}
+          wrapper="span"
+          speed={50}
+          className="relative inline-block text-[#00FFD1]"
+          repeat={Infinity}
+        />        .
+      </h1>
+      <p className="max-w-3xl mt-6 text-lg md:text-2xl text-gray-800">
+        At <span className="text-[#00FFD1] font-medium">ThreeFold</span>, we are empowering
+        individuals and organizations to shape an open, resilient, and sustainable internet.
+      </p>
+    </section>
+  );
+}

src/components/AboutSolutions.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function AboutSolutions() {
+  const totalCells = 2000;
+  const [active, setActive] = useState<number[]>([]);
+
+  // randomly activate some squares every 0.8 s
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const newActive = Array.from({ length: 20 }, () =>
+        Math.floor(Math.random() * totalCells)
+      );
+      setActive(newActive);
+    }, 800);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section
+      className="relative bg-[#121212] text-gray-200 overflow-hidden"
+      style={
+        {
+          "--cell": "4rem",
+          height: "74vh",
+        } as React.CSSProperties
+      }
+    >
+      {/* Animated grid background */}
+      <div
+        className="absolute inset-0 z-0 grid"
+        style={{
+          gridTemplateColumns: "repeat(auto-fill, var(--cell))",
+          gridAutoRows: "var(--cell)",
+          justifyContent: "center",
+        }}
+        aria-hidden="true"
+      >
+        {Array.from({ length: totalCells }).map((_, i) => (
+          <div
+            key={i}
+            className={`border border-[#1f1f1f] transition-colors duration-500 cursor-pointer ${
+              active.includes(i) ? "bg-[#00FFD1]" : "bg-transparent"
+            }`}
+          />
+        ))}
+      </div>
+
+      {/* Foreground content aligned to same grid */}
+      <div
+        className="relative z-10 grid grid-cols-[repeat(auto-fill,var(--cell))] auto-rows-[var(--cell)] gap-0 pointer-events-none w-full h-full"
+        style={{ justifyContent: "center" }}
+      >
+        {/* Top-left card */}
+        <div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
+            <p className="text-sm text-gray-600 leading-snug">
+              Unlike traditional internet infrastructure, ThreeFold runs on a
+              global mesh of independent cloud providers, individuals and
+              organizations contributing compute, storage, and network power.
+            </p>
+          </div>
+        </div>
+
+        {/* Center card */}
+        <div className="col-start-9 row-start-3 col-span-6 row-span-5 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center justify-center text-center shadow-lg">
+            <p className="text-2xl md:text-3xl font-medium text-white leading-tight">
+              A Decentralized Foundation for the Internet.
+            </p>
+          </div>
+        </div>
+
+        {/* Bottom-right card */}
+        <div className="col-start-17 row-start-6 col-span-5 row-span-3 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
+            <p className="text-sm text-gray-600 leading-snug">
+              This physical decentralization removes bottlenecks, increases
+              resilience, and protects privacy. ThreeFold is a neutral, scalable
+              foundation for the next-generation internet, where digital
+              sovereignty and collaboration come first.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Apps.tsx

@@ -22,7 +22,7 @@ const logos = [
 export function AppsPreview() {
   return (
     <div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
-      <div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-24">
+      <div className="relative z-10 mx-auto w-full max-w-3xl p-4 pt-16">
 
         {/* Heading */}
         <motion.div
@@ -31,7 +31,7 @@ export function AppsPreview() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1 }}
         >
-          <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
+          <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-5xl">
             Anything That Runs on Linux Can Run on ThreeFold
           </h1>
         </motion.div>

src/components/BackgroundIllustration.tsx

@@ -0,0 +1,70 @@
+import { useId } from 'react'
+
+export function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  let id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}

src/components/Banner.tsx

@@ -0,0 +1,28 @@
+import { XMarkIcon } from '@heroicons/react/20/solid'
+
+export function Banner() {
+  return (
+    <div className="relative flex items-center gap-x-6 bg-gray-200 px-6 py-2.5 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10 sm:px-3.5 sm:before:flex-1">
+      <p className="text-sm/6 text-white">
+        <strong className="font-semibold">ThreeFold is going commercial!</strong>
+        <svg viewBox="0 0 2 2" aria-hidden="true" className="mx-2 inline size-0.5 fill-current">
+          <circle r={1} cx={1} cy={1} />
+        </svg>
+        Read our <a
+          href="https://www.threefold.io/newsroom/summer-2025-roundup/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:text-white hover:font-semibold"
+        >
+          2025 Summer Round Up →
+        </a>
+      </p>
+      <div className="flex flex-1 justify-end">
+        <button type="button" className="-m-3 p-3 focus-visible:-outline-offset-4">
+          <span className="sr-only">Dismiss</span>
+          <XMarkIcon aria-hidden="true" className="size-5 text-white" />
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/Benefits.tsx

@@ -1,9 +1,9 @@
-import { Container } from '../components/Container'
+import { Container } from '@/components/Container'
 import Image from 'next/image'
-import Benefits1 from '../images/benefits/benefits1.jpg'
+import Benefits1 from '@/images/benefits/benefits1.jpg'
-import Benefits2 from '../images/benefits/benefits2.jpg'
+import Benefits2 from '@/images/benefits/benefits2.jpg'
-import Benefits3 from '../images/benefits/benefits3.jpg'
+import Benefits3 from '@/images/benefits/benefits3.jpg'
-import Benefits4 from '../images/benefits/benefits4.jpg'
+import Benefits4 from '@/images/benefits/benefits4.jpg'
 
 
 export default function Benefits() {
@@ -13,10 +13,10 @@ export default function Benefits() {
         <Container>
             <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
                 <h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-white">
-                The Benefits of Decentralized Infrastructure
+                Built Different. For a Change.
                 </h2>   
                 <p className="mt-6 lg:text-lg text-base text-gray-300">
-                    ThreeFold offers a fundamentally different approach to internet infrastructure, providing unparalleled benefits in terms of sovereignty, sustainability, and accessibility.
+                    ThreeFold isn't just another tech platform — it's a digital infrastructure built from the ground up for purpose-driven organizations. From white-label sovereignty to field-ready resilience, every element of ThreeFold is designed to meet the real-world challenges of civil society.
                 </p>
             </div>
         </Container>
@@ -29,10 +29,10 @@ export default function Benefits() {
                 className="h-80 object-cover object-left"
               />
               <div className="p-10">
-                <h3 className="text-sm/4 font-semibold text-white">True Sovereignty</h3>
+                <h3 className="text-sm/4 font-semibold text-white"> Built for Civil Society</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data, Control Your Destiny</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Purpose-First, Not Profit-First</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  With ThreeFold, you own your data and control your digital presence. Our decentralized architecture ensures your information remains private and secure, free from corporate or governmental oversight.
+                  Unlike traditional SaaS built for commercial scale, ThreeFold was born from the realities of NGOs, grassroots coalitions, and purpose-led institutions. Every module, flow, and metric is optimized to serve impact — not ad revenue or venture capital.
                 </p>
               </div>
             </div>
@@ -45,10 +45,10 @@ export default function Benefits() {
                 className="h-80 object-cover"
               />
               <div className="p-10">
-                <h3 className="text-sm/4 font-semibold text-white">Sustainable & Energy Efficient</h3>
+                <h3 className="text-sm/4 font-semibold text-white">White-Label, Zero-Code</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Green Computing for a Better Future</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Your Brand, Your Movements</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  Our Zero-OS and optimized network design consume significantly less energy than traditional data centers, making ThreeFold a truly sustainable solution for the planet.
+                  ThreeFold empowers organizations to fully own their digital identity. From Red Cross OS to Montessori OS, each instance is custom-branded — no tech team required. You launch a platform that looks and feels like you, not us.
                 </p>
               </div>
             </div>
@@ -61,10 +61,10 @@ export default function Benefits() {
                 className="h-80 object-cover"
               />
               <div className="p-10">
-                <h3 className="text-sm/4 font-semibold text-white">Accessible & Inclusive</h3>
+                <h3 className="text-sm/4 font-semibold text-white">Sovereign & Ethical Infrastructure</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Internet for Everyone, Everywhere</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data. Always.</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  By distributing computing power globally, ThreeFold makes internet infrastructure accessible to underserved regions, fostering digital inclusion and empowering local communities.
+                  We don't mine or monetize user data. ThreeFold runs on decentralized, privacy-respecting infrastructure — built for trust, compliance, and sovereignty. You control where your data lives and who sees it.
                 </p>
               </div>
             </div>
@@ -77,10 +77,10 @@ export default function Benefits() {
                 className="h-80 object-cover object-left"
               />
               <div className="p-10">
-                <h3 className="text-sm/4 font-semibold text-white">Resilient & Secure</h3>
+                <h3 className="text-sm/4 font-semibold text-white">Mutualized Model</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Quantum-Safe and Unhackable</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Share Infrastructure. Multiply Impact.</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  ThreeFold's unique data distribution and encryption methods provide quantum-safe security, making your data virtually impossible to hack or lose, ensuring unparalleled resilience.
+                  By pooling tech costs across aligned organizations, ThreeFold offers enterprise-grade functionality at a fraction of the price. When one partner grows, the entire ecosystem benefits — through shared modules, updates, and insights.
                 </p>
               </div>
             </div>

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/Button.tsx

@@ -4,6 +4,8 @@ import clsx from 'clsx'
 const baseStyles = {
   solid:
     'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
+  glass:
+    'rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15',
   outline:
     'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
 }
@@ -11,14 +13,14 @@ const baseStyles = {
 const variantStyles = {
   solid: {
     gradient:
-      'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95',
+      'btn-new-gradient',
     cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
     white:
-      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
+      '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: {
-    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    gray: 'border-gray-300 text-gray-700 hover:border-gray-600 hover:text-white active:bg-gray-100 active:text-gray-600/80',
   },
 }
 
@@ -27,6 +29,9 @@ type ButtonProps = (
       variant?: 'solid'
       color?: keyof typeof variantStyles.solid
     }
+  | {
+      variant: 'glass'
+    }
   | {
       variant: 'outline'
       color?: keyof typeof variantStyles.outline
@@ -41,15 +46,22 @@ type ButtonProps = (
 
 export function Button({ className, ...props }: ButtonProps) {
   props.variant ??= 'solid'
+
+  if (props.variant !== 'glass') {
     props.color ??= 'gray'
+  }
+
+  let variantClass: string | undefined = undefined
+
+  if (props.variant === 'outline' && props.color) {
+    variantClass = variantStyles.outline[props.color]
+  } else if (props.variant === 'solid' && props.color) {
+    variantClass = variantStyles.solid[props.color]
+  }
 
   className = clsx(
     baseStyles[props.variant],
-    props.variant === 'outline'
+    variantClass,
-      ? variantStyles.outline[props.color]
-      : props.variant === 'solid'
-        ? variantStyles.solid[props.color]
-        : undefined,
     className,
   )
 

src/components/CallTo.tsx

@@ -0,0 +1,47 @@
+export  function CallTo() {
+  return (
+    <div className="bg-transparent">
+      <div className="mx-auto max-w-7xl py-24 px-6 lg:px-4">
+        <div className="relative isolate overflow-hidden bg-stat-gradient  py-16 text-center after:pointer-events-none after:absolute after:inset-0 sm:rounded-3xl sm:px-16">
+          <div className="mx-auto max-w-2xl lg:max-w-2xl">
+          <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            More Resilient, More Powerful, More Diverse With You
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+            Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries.
+          </p>
+          <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+          By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people.
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <a
+              href="#"
+              className="rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15"
+            >
+              {' '}
+              Get started{' '}
+            </a>
+            <a href="#" className="text-sm/6 font-semibold text-white">
+              Learn more
+              <span aria-hidden="true">→</span>
+            </a>
+          </div>
+          <svg
+            viewBox="0 0 1024 1024"
+            aria-hidden="true"
+            className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
+          >
+            <circle r={512} cx={512} cy={512} fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fillOpacity="0.7" />
+            <defs>
+              <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
+                <stop stopColor="#fff4f8" />
+                <stop offset={1} stopColor="#97979d" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      </div>
+    </div>
+  )
+}

src/components/Cta.tsx

@@ -4,21 +4,21 @@ export default function Cta() {
       <div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
         <div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
           <h2 className="text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">
-            Join the Decentralized Internet Revolution
+            Scale Your Impact, Not Your Costs
           </h2>
           <p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300">
-            Be part of building a more sovereign, sustainable, and accessible internet.
+            ThreeFold gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster—
-            Start farming nodes or deploy your applications today.
+            all from one unified platform.
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <a
-              href="https://threefold.io/farm"
+              href="/contact"
               className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
             >
-              Start Farming
+              Contact Us
             </a>
-            <a href="https://threefold.io/build" className="text-sm/6 font-semibold text-white">
+            <a href="/demo" className="text-sm/6 font-semibold text-white">
-              Start Building <span aria-hidden="true">→</span>
+              Book a Demo <span aria-hidden="true">→</span>
             </a>
           </div>
 
@@ -27,13 +27,14 @@ export default function Cta() {
             aria-hidden="true"
             className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
           >
-            <circle r={512} cx={512} cy={512} fill="url(#threefold-gradient)" fillOpacity="0.7" />
+            <circle r={512} cx={512} cy={512} fill="url(#engage-gradient)" fillOpacity="0.7" />
             <defs>
-              <radialGradient id="threefold-gradient">
+              <radialGradient id="engage-gradient">
                 <stop offset="0%" stopColor="#caa5f0" />
                 <stop offset="50%" stopColor="#8f79f9" />
                 <stop offset="100%" stopColor="#5d84e1" />
                 </radialGradient>
+
             </defs>
           </svg>
         </div>

src/components/Dashboard.tsx

@@ -6,7 +6,7 @@ import { Button } from "./Button";
 
 export function Dashboard() {
   return (
-    <div className="py-24 bg-transparent">
+    <div className="py-24 bg-transparent relative">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           {/* Column 1: Title & NODES */}
@@ -19,7 +19,7 @@ export function Dashboard() {
               <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
                 ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
               </p>
-              <Button className="mt-6" variant="solid" color="gradient" href="https://threefold.io/build" >Explore TFGrid →</Button>
+              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
             </div>
 
 
@@ -87,23 +87,23 @@ function StatCard({
 }) {
   return (
     <div
-      className={`relative flex flex-col overflow-hidden rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${className}`}
+      className={`relative flex flex-col overflow-hidden rounded-2xl bg-stat-gradient p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
       style={{
         filter: 'brightness(1)',
       }}
       onMouseEnter={(e) => {
-        e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
+        e.currentTarget.style.filter = 'brightness(0.8)';
       }}
       onMouseLeave={(e) => {
         e.currentTarget.style.filter = 'brightness(1)';
       }}
     >
-      <h3 className="text-lg font-semibold text-cyan-400">{label}</h3>
+      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
       <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
         {description}
       </p>
       <div className="mt-8 flex items-center space-x-3">
-        <span className="text-cyan-400 text-3xl">•</span>
+        <span className="text-gradient-neutral-vertical text-3xl">•</span>
         <div className="text-5xl font-semibold tracking-tight text-white tabular-nums">
           {value}
           {unit && (

src/components/Faq.tsx

@@ -0,0 +1,63 @@
+const faqs = [
+  {
+    question: 'Is this a separate new Internet?',
+    answer: 'ThreeFold creates a decentralized internet infrastructure that can operate independently, offering alternatives to traditional centralized systems while maintaining compatibility with existing internet protocols.',
+  },
+  {
+    question: 'Why do we need a new Internet?',
+    answer: 'The current internet is increasingly centralized and controlled by few entities. ThreeFold provides a more democratic, private, and secure alternative where users and developers have full control over their data and applications.',
+  },
+  {
+    question: 'How can I participate?',
+    answer: 'You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more.',
+  },
+  {
+    question: 'How can I get V4 nodes?',
+    answer: 'Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes. Click here to get V4 nodes.',
+  },
+  {
+    question: 'What can I do with the ThreeFold Grid?',
+    answer: 'ThreeFold grid can be used to host any web2, web3 and future workload. For more details see our docs.',
+  },
+  {
+    question: 'How secure and private is my data?',
+    answer: 'ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.',
+  },
+  {
+    question: 'Who should use the ThreeFold Grid?',
+    answer: 'Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.',
+  },
+]
+
+export function Faq () {
+  return (
+    <div className="bg-transparent">
+      <div className="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
+        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+          <div className="lg:col-span-5">
+            <h2 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl">
+              Frequently asked questions
+            </h2>
+            <p className="mt-4 text-base/7 text-pretty text-gray-400">
+              Can’t find the answer you’re looking for? Reach out to our{' '}
+              <a href="#" className="font-semibold text-indigo-400 hover:text-indigo-300">
+                customer support
+              </a>{' '}
+              team.
+            </p>
+          </div>
+          <div className="mt-10 lg:col-span-7 lg:mt-0">
+            <dl className="space-y-10">
+              {faqs.map((faq) => (
+                <div key={faq.question}>
+                  <dt className="text-base/7 font-semibold text-white">{faq.question}</dt>
+                  <dd className="mt-2 text-base/7 text-gray-400">{faq.answer}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Faqs.tsx

@@ -1,80 +1,80 @@
-import { Container } from '../components/Container'
+import { Container } from '@/components/Container'
 
 const faqs = [
   [
     {
       question: 'What is ThreeFold?',
       answer:
-        'ThreeFold is building the world\'s largest decentralized internet infrastructure. It\'s a peer-to-peer network of compute, storage, and network capacity owned and operated by independent farmers worldwide.',
+        'ThreeFold is a white-label engagement platform built specifically for purpose-driven organizations. It allows NGOs, foundations, and impact coalitions to launch their own branded platforms to engage communities, deliver training, and mobilize support.',
     },
     {
-      question: 'How is ThreeFold different from traditional cloud?',
+      question: 'Do I need a tech team to use ThreeFold?',
       answer:
-        'Unlike centralized cloud providers, ThreeFold is fully decentralized, uses up to 10x less energy, provides quantum-safe security, and gives you complete data sovereignty.',
+        'No. ThreeFold is fully plug-and-play. It’s designed so any organization—regardless of technical capacity—can deploy and customize their own platform without writing a line of code.',
     },
     {
-      question: 'What can I build on ThreeFold?',
+      question: 'Can we fully customize the platform’s look and feel?',
       answer:
-        'Anything that runs on Linux can run on ThreeFold - from simple websites to complex AI workloads, blockchain nodes, IoT applications, and enterprise solutions.',
+        'Absolutely. From logos and colors to navigation and community features, ThreeFold supports full white-label customization so the platform feels like your own digital headquarters.',
     },
   ],
   [
     {
-      question: 'How do I become a ThreeFold farmer?',
+      question: 'What kinds of organizations use ThreeFold?',
       answer:
-        'Simply boot any modern computer with our Zero-OS image. Once connected to the internet, your node will automatically join the grid and start earning TFT rewards.',
+        'We work with NGOs, educational networks, development agencies, faith-based groups, and mission-aligned coalitions that want to better engage, train, and mobilize their communities at scale.',
     },
     {
-      question: 'What are ThreeFold Tokens (TFT)?',
+      question: 'Is ThreeFold multilingual and accessible offline?',
       answer:
-        'TFT is the native currency of the ThreeFold ecosystem. Farmers earn TFT for providing capacity, and users spend TFT to deploy workloads on the grid.',
+        'Yes. The platform supports multilingual content and offline-friendly delivery—ideal for reaching underserved communities with limited connectivity.',
     },
     {
-      question: 'Is ThreeFold secure?',
+      question: 'Can we use ThreeFold for fundraising?',
       answer:
-        'Yes, ThreeFold uses quantum-safe storage algorithms, end-to-end encryption, and a zero-trust security model. Data is dispersed across multiple nodes making it virtually impossible to hack.',
+        'Yes. ThreeFold includes built-in fundraising tools, including peer-to-peer, micro-donation, and pay-it-forward models—plus full donor engagement capabilities.',
     },
   ],
   [
     {
-      question: 'How much does it cost to use ThreeFold?',
+      question: 'How is ThreeFold different from other platforms?',
       answer:
-        'Pricing is transparent and competitive with traditional cloud providers, but with added benefits of decentralization and data sovereignty. Check our calculator for specific pricing.',
+        'Unlike general-purpose platforms, ThreeFold is mission-built for civil society. It integrates engagement, learning, and fundraising in one secure, ethical platform—hosted on sovereign infrastructure.',
     },
     {
-      question: 'Where is ThreeFold available?',
+      question: 'What is the pricing model?',
       answer:
-        'ThreeFold operates globally with nodes in over 50 countries. The decentralized nature means you can deploy close to your users anywhere in the world.',
+        'ThreeFold operates on a flexible SaaS model, with plans ranging from €30K to €300K annually depending on features and user scale. For grassroots initiatives, pay-it-forward and sponsorship models are also available.',
     },
     {
-      question: 'How do I get started?',
+      question: 'How do we get started?',
       answer:
-        'Visit our Grid portal to start building, or check out our farming guide to contribute capacity. Our community is always ready to help newcomers.',
+        'Reach out to our team for a demo or strategy session. We’ll walk you through the options and help design the best deployment path for your mission.',
     },
   ],
 ]
 
-export function Faqs() {
+
+export function Faqss () {
   return (
     <section
       id="faqs"
       aria-labelledby="faqs-title"
-      className="border-t border-gray-800 py-20 sm:py-32"
+      className="border-t border-gray-200 py-20 sm:py-32"
-      style={{ backgroundColor: '#121212' }}
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0">
           <h2
             id="faqs-title"
-            className="text-3xl font-medium tracking-tight text-white"
+            className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl"
           >
             Frequently asked questions
           </h2>
-          <p className="mt-2 lg:text-lg text-base text-gray-300">
+          <p className="mt-2 lg:text-lg text-base text-gray-600">
             If you have anything else you want to ask,{' '}
             <a
               href="mailto:info@threefold.io"
-              className="text-cyan-400 hover:text-cyan-300 underline"
+              className="text-gray-900 underline"
             >
               reach out to us
             </a>
@@ -83,17 +83,17 @@ export function Faqs() {
         </div>
         <ul
           role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-8  lg:max-w-none lg:grid-cols-3"
         >
           {faqs.map((column, columnIndex) => (
             <li key={columnIndex}>
               <ul role="list" className="space-y-10">
                 {column.map((faq, faqIndex) => (
                   <li key={faqIndex}>
-                    <h3 className="lg:text-lg text-base/6 font-semibold text-white">
+                    <h3 className="lg:text-lg text-base/6 font-semibold text-gray-900">
                       {faq.question}
                     </h3>
-                    <p className="mt-4 text-sm text-gray-300">{faq.answer}</p>
+                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
                   </li>
                 ))}
               </ul>

src/components/Farmer.tsx

@@ -47,7 +47,7 @@ export function FarmerPreview() {
   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-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
+      <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">
@@ -61,7 +61,7 @@ export function FarmerPreview() {
             </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" className=" text-black px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
+            <Button variant="outline">
               Become A Farmer
             </Button>
           </div>
@@ -70,7 +70,7 @@ export function FarmerPreview() {
           {posts.map((post) => (
             <article
               key={post.id}
-              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-state-gradient px-8 lg:pt-12"
+              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-stat-gradient px-8 lg:pt-12"
             >
               <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10" 
               style={{

src/components/Footer.tsx

@@ -1,11 +1,12 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { Button } from '../components/Button'
+import { Button } from '@/components/Button'
-import { Container } from '../components/Container'
+import { Container } from '@/components/Container'
-import { TextField } from '../components/Fields'
+import { TextField } from '@/components/Fields'
-import { Logomark } from '../components/Logo'
+import { Logomark } from '@/components/Logo'
-import { NavLinks } from '../components/NavLinks'
+import { NavLinks } from '@/components/NavLinks'
+
 function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
     <svg viewBox="0 0 96 96" fill="none" aria-hidden="true" {...props}>
@@ -28,10 +29,10 @@ export function Footer() {
               <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
               <div className="ml-4">
                 <p className="text-base font-semibold">ThreeFold</p>
-                <p className="mt-1 text-sm">Building the Decentralized Internet.</p>
+                <p className="mt-1 text-sm">Decentralized internet infrastructure by everyone, for everyone.</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">
+            <nav className="mt-8 flex gap-8">
               <NavLinks />
             </nav>
           </div>
@@ -46,13 +47,13 @@ export function Footer() {
               required
               className="w-60 min-w-0 shrink"
             />
-            <Button type="submit" color="cyan" className="ml-4 flex-none">
+            <Button type="submit"  variant='glass' className="ml-4 flex-none">
               <span className="hidden lg:inline">Join our newsletter</span>
               <span className="lg:hidden">Join newsletter</span>
             </Button>
           </form>
           <p className="mt-6 text-sm text-gray-400 md:mt-0">
-            &copy; Copyright {new Date().getFullYear()} ThreeFold. All rights reserved.
+            &copy; Copyright {new Date().getFullYear()}. All rights reserved.
           </p>
         </div>
       </Container>

src/components/Header.tsx

@@ -9,12 +9,10 @@ import {
 } from '@headlessui/react'
 import { AnimatePresence, motion } from 'framer-motion'
 
-import { Button } from '../components/Button'
+import { Button } from '@/components/Button'
-import { Container } from '../components/Container'
+import { Container } from '@/components/Container'
-import { Logo } from '../components/Logo'
+import { Logo } from '@/components/Logo'
-import { NavLinks } from '../components/NavLinks'
+import { NavLinks } from '@/components/NavLinks'
-
-// ... keep the icon components same
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -75,7 +73,7 @@ export function Header() {
               {({ open }) => (
                 <>
                   <PopoverButton
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-800/50 hover:stroke-gray-300 focus:not-data-focus:outline-hidden active:stroke-white"
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-transparent hover:stroke-gray-200 focus:not-data-focus:outline-hidden active:stroke-white"
                     aria-label="Toggle site navigation"
                   >
                     {({ open }) =>
@@ -110,27 +108,22 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
-                            <MobileNavLink href="/technology">
+                            <MobileNavLink href="/#features">
-                              Technology
+                              Features
                             </MobileNavLink>
-                            <MobileNavLink href="/grid">
+                            <MobileNavLink href="/#reviews">
-                              Grid Status
+                              Reviews
                             </MobileNavLink>
-                            <MobileNavLink href="/farming">
+                            <MobileNavLink href="/#pricing">
-                              Farming
+                              Pricing
-                            </MobileNavLink>
-                            <MobileNavLink href="/build">
-                              Build
-                            </MobileNavLink>
-                            <MobileNavLink href="/community">
-                              Community
                             </MobileNavLink>
+                            <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
-                            <Button href="https://threefold.io/build" variant="outline">
+                            <Button href="/login" variant="outline">
-                              Start Building
+                              Log in
                             </Button>
-                            <Button href="https://threefold.io/farm">Start Farming</Button>
+                            <Button href="#">Download the app</Button>
                           </div>
                         </PopoverPanel>
                       </>
@@ -140,10 +133,12 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://threefold.io/build" variant="outline">
+              <Button href="/login" variant="outline">
-                Start Building
+                Info
+              </Button>
+              <Button href="#" variant="glass">
+                Participate
               </Button>
-              <Button href="https://threefold.io/farm">Start Farming</Button>
             </div>
           </div>
         </Container>

src/components/Hero.tsx

@@ -6,6 +6,7 @@ import { AppDemo } from '@/components/AppDemo'
 import { AppStoreLink } from '@/components/AppStoreLink'
 import HeroHome from './HeroHome'
 import { Button } from '@/components/Button'
+import { BackgroundIllustration } from '@/components/BackgroundIllustration'
 import { Container } from '@/components/Container'
 import { PhoneFrame } from '@/components/PhoneFrame'
 import logoBbc from '@/images/logos/bbc.svg'
@@ -17,75 +18,6 @@ import logoHuffpost from '@/images/logos/huffpost.svg'
 import logoTechcrunch from '@/images/logos/techcrunch.svg'
 import logoWired from '@/images/logos/wired.svg'
 
-function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  let id = useId()
-
-  return (
-    <div {...props}>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-slow"
-      >
-        <path
-          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M513 1025C230.23 1025 1 795.77 1 513"
-          stroke={`url(#${id}-gradient-1)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-1`}
-            x1="1"
-            y1="513"
-            x2="1"
-            y2="1025"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
-      >
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400"
-          stroke={`url(#${id}-gradient-2)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-2`}
-            x1="913"
-            y1="513"
-            x2="913"
-            y2="913"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-    </div>
-  )
-}
-
 function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>

src/components/HeroHome.tsx

@@ -2,8 +2,16 @@
 
 import Image from 'next/image'
 import { Button } from './Button'
-import Engage from '../images/engage.svg'
+import Engage from '@/images/engage.svg'
-import { gradientText, gradientDark } from '../components/Gradients'
+import { gradientText, gradientDark } from '@/components/Gradients'
+import { h1 as H1 } from '@/components/ui/Text'
+
+const navigation = [
+  { name: 'Product', href: '#' },
+  { name: 'Features', href: '#' },
+  { name: 'Marketplace', href: '#' },
+  { name: 'Company', href: '#' },
+]
 
 export default function HeroHome() {
   return (
@@ -11,19 +19,19 @@ export default function HeroHome() {
         <div className="">
           <div className="mx-auto max-w-7xl px-8 lg:px-8">
             <div className="mx-auto max-w-3xl text-center">
-              <h1 className="text-3xl font-medium tracking-tight text-white lg:text-5xl">
+              <H1 className="text-white">
-                Building the Internet of Tomorrow
+                Empowering Purpose-Driven Organizations.
-              </h1>
+              </H1>
-              <p className="mt-8 lg:text-lg 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 world's largest decentralized internet infrastructure. Built by everyone, for everyone - creating a more sovereign, sustainable, and accessible internet.
+                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">
-                <Button color="gradient" href="https://threefold.io/build">Start Building</Button>
+                <Button color="gradient">Get in Touch</Button>
               <Button
-                  href="https://threefold.io/farm"
+                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                 variant="outline"
               >
-                  <span className="ml-2.5">Start Farming</span>
+                <span className="ml-2.5">Book a Demo</span>
               </Button>
               </div>
             </div>
@@ -31,7 +39,7 @@ export default function HeroHome() {
           <div className="mx-auto max-w-7xl px-4 lg:px-8 mb-10 lg:mb-32">
             <div className="max-w-4xl flow-root bg-transparent mx-auto relative">
               <div className="lg:-m-8 m-10 flex justify-center">
-                <Image src={Engage} alt="ThreeFold Network" unoptimized />
+                <Image src={Engage} alt="" unoptimized />
               </div>
             </div>
           </div>

src/components/Layout.tsx

@@ -1,10 +1,12 @@
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
+import { Banner } from '@/components/Banner'
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />
+      <Banner />
       <main className="flex-auto">{children}</main>
       <Footer />
     </>

src/components/NavLinks.tsx

@@ -9,16 +9,14 @@ export function NavLinks() {
   let timeoutRef = useRef<number | null>(null)
 
   return [
-    ['Technology', '/technology'],
+    ['About', '/about'],
-    ['Grid Status', '/grid'],
-    ['Farming', '/farming'],
     ['Build', '/build'],
-    ['Community', '/community'],
+    ['Host', '/#pricing'],
   ].map(([label, href], index) => (
     <Link
       key={label}
       href={href}
-      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-300 transition-colors delay-150 hover:text-white hover:delay-0"
+      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-white hover:delay-0"
       onMouseEnter={() => {
         if (timeoutRef.current) {
           window.clearTimeout(timeoutRef.current)
@@ -34,7 +32,7 @@ export function NavLinks() {
       <AnimatePresence>
         {hoveredIndex === index && (
           <motion.span
-            className="absolute inset-0 rounded-lg bg-gray-800"
+            className="absolute inset-0 rounded-lg bg-transparent"
             layoutId="hoverBackground"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1, transition: { duration: 0.15 } }}

src/components/Pricing.tsx

@@ -4,75 +4,217 @@ import { useState } from 'react'
 import { Radio, RadioGroup } from '@headlessui/react'
 import clsx from 'clsx'
 
-import { Button } from '../components/Button'
+import { Button } from '@/components/Button'
-import { Container } from '../components/Container'
+import { Container } from '@/components/Container'
-import { Logomark } from '../components/Logo'
+import { Logomark } from '@/components/Logo'
 
 const plans = [
   {
-    name: 'Explorer',
+    name: 'Starter',
     featured: false,
-    price: { Monthly: 'Free', Annually: 'Free' },
+    price: { Monthly: '$0', Annually: '$0' },
     description:
-      'Perfect for developers getting started with decentralized infrastructure.',
+      'Perfect for small teams and early-stage initiatives getting started with community engagement.',
     button: {
-      label: 'Start Building',
+      label: 'Launch for Free',
-      href: 'https://threefold.io/build',
+      href: '/register',
     },
     features: [
-      'Access to TF Grid',
+      'Up to 1,000 members',
-      'Deploy basic workloads',
+      'Built-in community tools (forums, updates, events)',
-      'Community support',
+      'Basic learning paths',
-      'Documentation & tutorials',
+      'Donations & campaigns',
-      'Basic monitoring',
+      'Your logo & colors',
+      'ThreeFold subdomain (yourname.ThreeFold.org)',
+      'Email support',
     ],
     logomarkClassName: 'fill-gray-300',
   },
   {
-    name: 'Builder',
+    name: 'Impact',
     featured: true,
-    price: { Monthly: '$50', Annually: '$500' },
+    price: { Monthly: '$89', Annually: '$890' },
     description:
-      'For serious developers and organizations deploying production workloads.',
+      'For growing organizations ready to scale impact, train supporters, and fundraise with confidence.',
     button: {
-      label: 'Start Building',
+      label: 'Get Started',
-      href: 'https://threefold.io/build',
+      href: '/register',
     },
     features: [
-      'Priority grid access',
+      'Up to 25,000 members',
-      'Advanced compute & storage',
+      'Advanced training with AI-powered content',
-      'Load balancing & scaling',
+      'Multilingual support',
+      'Peer-to-peer fundraising tools',
+      'Impact dashboards & metrics',
+      'Full branding (custom domain, logo, colors)',
+      'API access + integrations (Mailchimp, CRM)',
       'Priority support',
-      'Advanced monitoring & analytics',
-      'Custom domain support',
-      'API access',
     ],
     logomarkClassName: 'fill-cyan-500',
   },
   {
-    name: 'Enterprise',
+    name: 'Sovereign',
     featured: false,
     price: { Monthly: 'Custom', Annually: 'Custom' },
     description:
-      'For large organizations needing dedicated infrastructure and custom solutions.',
+      'Best for large-scale networks and institutions with custom needs, privacy requirements, or regional infrastructure.',
     button: {
       label: 'Contact Sales',
       href: '/contact',
     },
     features: [
-      'Dedicated capacity allocation',
+      'Unlimited members & projects',
-      'Custom SLA agreements',
+      'White-label platform (yourname.org)',
-      'Private network deployment',
+      'Self-host or deploy in your region',
-      'White-label solutions',
+      'Custom integrations & AI assistants',
-      '24/7 enterprise support',
+      'Field-level data collection',
-      'Dedicated account manager',
+      'Dedicated success manager',
-      'Custom integrations',
+      'Onboarding & migration support',
-      'Compliance & security audits',
+      '24/7 enterprise-grade support',
     ],
     logomarkClassName: 'fill-gray-500',
   },
 ]
 
+
+function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path
+        d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
+        fill="currentColor"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="8.25"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function Plan({
+  name,
+  price,
+  description,
+  button,
+  features,
+  activePeriod,
+  logomarkClassName,
+  featured = false,
+}: {
+  name: string
+  price: {
+    Monthly: string
+    Annually: string
+  }
+  description: string
+  button: {
+    label: string
+    href: string
+  }
+  features: Array<string>
+  activePeriod: 'Monthly' | 'Annually'
+  logomarkClassName?: string
+  featured?: boolean
+}) {
+  return (
+    <section
+      className={clsx(
+        'flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-black/20',
+        featured ? 'order-first bg-cyan-600 lg:order-none' : 'bg-gray-900',
+      )}
+    >
+      <h3
+        className={clsx(
+          'flex items-center text-sm font-semibold',
+          featured ? 'text-white' : 'text-white',
+        )}
+      >
+        <Logomark className={clsx('h-6 w-6 flex-none', logomarkClassName)} />
+        <span className="ml-4">{name}</span>
+      </h3>
+      <p
+        className={clsx(
+          'relative mt-5 flex text-3xl tracking-tight',
+          featured ? 'text-white' : 'text-white',
+        )}
+      >
+        {price.Monthly === price.Annually ? (
+          price.Monthly
+        ) : (
+          <>
+            <span
+              aria-hidden={activePeriod === 'Annually'}
+              className={clsx(
+                'transition duration-300',
+                activePeriod === 'Annually' &&
+                  'pointer-events-none translate-x-6 opacity-0 select-none',
+              )}
+            >
+              {price.Monthly}
+            </span>
+            <span
+              aria-hidden={activePeriod === 'Monthly'}
+              className={clsx(
+                'absolute top-0 left-0 transition duration-300',
+                activePeriod === 'Monthly' &&
+                  'pointer-events-none -translate-x-6 opacity-0 select-none',
+              )}
+            >
+              {price.Annually}
+            </span>
+          </>
+        )}
+      </p>
+      <p
+        className={clsx(
+          'mt-3 text-sm',
+          featured ? 'text-gray-100' : 'text-gray-300',
+        )}
+      >
+        {description}
+      </p>
+      <div className="order-last mt-6">
+        <ul
+          role="list"
+          className={clsx(
+            '-my-2 divide-y text-sm',
+            featured
+              ? 'divide-gray-700 text-gray-100'
+              : 'divide-gray-700 text-gray-300',
+          )}
+        >
+          {features.map((feature) => (
+            <li key={feature} className="flex py-2">
+              <CheckIcon
+                className={clsx(
+                  'h-6 w-6 flex-none',
+                  featured ? 'text-white' : 'text-cyan-400',
+                )}
+              />
+              <span className="ml-4">{feature}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <Button
+        href={button.href}
+        color={featured ? 'white' : 'cyan'}
+        className="mt-6"
+        aria-label={`Get started with the ${name} plan for ${price}`}
+      >
+        {button.label}
+      </Button>
+    </section>
+  )
+}
+
 export function Pricing() {
   let [activePeriod, setActivePeriod] = useState<'Monthly' | 'Annually'>(
     'Monthly',
@@ -91,15 +233,65 @@ export function Pricing() {
             id="pricing-title"
             className="text-3xl font-medium tracking-tight text-white"
           >
-            Transparent pricing for everyone.
+            Flat pricing, no management fees.
           </h2>
           <p className="mt-2 lg:text-lg text-base text-gray-300">
-            Whether you're an individual developer or a large enterprise,
+            Whether you're one person trying to get ahead or a big firm trying
-            ThreeFold offers fair and transparent pricing for decentralized infrastructure.
+            to take over the world, we've got a plan for you.
           </p>
         </div>
 
-        {/* Rest of component remains the same */}
+        <div className="mt-8 flex justify-center">
+          <div className="relative">
+            <RadioGroup
+              value={activePeriod}
+              onChange={setActivePeriod}
+              className="grid grid-cols-2"
+            >
+              {['Monthly', 'Annually'].map((period) => (
+                <Radio
+                  key={period}
+                  value={period}
+                  className={clsx(
+                    'cursor-pointer border border-gray-600 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(2)-1px)] text-sm text-gray-300 transition-colors hover:border-gray-500 data-focus:outline-2 data-focus:outline-offset-2 bg-gray-800',
+                    period === 'Monthly'
+                      ? 'rounded-l-lg'
+                      : '-ml-px rounded-r-lg',
+                  )}
+                >
+                  {period}
+                </Radio>
+              ))}
+            </RadioGroup>
+            <div
+              aria-hidden="true"
+              className={clsx(
+                'pointer-events-none absolute inset-0 z-10 grid grid-cols-2 overflow-hidden rounded-lg bg-cyan-500 transition-all duration-300',
+                activePeriod === 'Monthly'
+                  ? '[clip-path:inset(0_50%_0_0)]'
+                  : '[clip-path:inset(0_0_0_calc(50%-1px))]',
+              )}
+            >
+              {['Monthly', 'Annually'].map((period) => (
+                <div
+                  key={period}
+                  className={clsx(
+                    'py-2 text-center text-sm font-semibold text-white',
+                    period === 'Annually' && '-ml-px',
+                  )}
+                >
+                  {period}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 items-start gap-x-8 gap-y-10 sm:mt-20 lg:max-w-none lg:grid-cols-3">
+          {plans.map((plan) => (
+            <Plan key={plan.name} {...plan} activePeriod={activePeriod} />
+          ))}
+        </div>
       </Container>
     </section>
   )

src/components/PrimaryFeatures.tsx

@@ -39,7 +39,7 @@ const features = [
   {
     name: 'Invite friends for better returns',
     description:
-      'For every friend you invite to EngageOS, you get insider notifications 5 seconds sooner. And it’s 10 seconds if you invite an insider.',
+      'For every friend you invite to ThreeFold, you get insider notifications 5 seconds sooner. And it’s 10 seconds if you invite an insider.',
     icon: DeviceUserIcon,
     screen: InviteScreen,
   },
@@ -584,9 +584,9 @@ export function PrimaryFeatures() {
             Every feature you need to win. Try it for yourself.
           </h2>
           <p className="mt-2 lg:text-lg text-base text-gray-400">
-            EngageOS was built for investors like you who play by their own rules
+            ThreeFold was built for investors like you who play by their own rules
             and aren’t going to let SEC regulations get in the way of their
-            dreams. If other investing tools are afraid to build it, EngageOS has
+            dreams. If other investing tools are afraid to build it, ThreeFold has
             it.
           </p>
         </div>

src/components/Products.tsx

@@ -0,0 +1,119 @@
+"use client";
+import { Button } from "./Button";
+import Image from "next/image";
+
+const products = [
+  {
+    id: 1,
+    colSpan: "lg:col-span-3",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]",
+    img: "/images/3nodes.png",
+    title: "3Nodes",
+    desc: "The backbone of storage and infrastructure, providing compute and data resources.",
+    color: "indigo-400",
+    bgRounded: "max-lg:rounded-t-4xl lg:rounded-tl-4xl"
+  },
+  {
+    id: 2,
+    colSpan: "lg:col-span-3",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]",
+    img: "/images/mycelium.svg",
+    title: "Mycelium",
+    desc: "End-to-end encrypted overlay network, always looking for the shortest possible path between participants",
+    color: "indigo-400",
+    bgRounded: "lg:rounded-tr-4xl"
+  },
+  {
+    id: 3,
+    colSpan: "lg:col-span-2",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]",
+    img: "/images/aibox.png",
+    title: "AIBox",
+    desc: "A self-hosted AI compute solution powered by ThreeFold.",
+    color: "indigo-400",
+    bgRounded: "lg:rounded-bl-4xl"
+  },
+  {
+    id: 4,
+    colSpan: "lg:col-span-2",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)]",
+    img: "/images/3phone.png",
+    title: "3Phone",
+    desc: "OwnPhone is the first secure device in the 3Phone family designed to work seamlessly with the ThreeFold Grid.",
+    color: "indigo-400",
+    bgRounded: ""
+  },
+  {
+    id: 5,
+    colSpan: "lg:col-span-2",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]",
+    img: "/images/3router.png",
+    title: "3Router",
+    desc: "Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.",
+    color: "indigo-400",
+    bgRounded: "max-lg:rounded-b-4xl lg:rounded-br-4xl"
+  }
+];
+
+export function ProductsPreview() {
+
+  return (
+    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-6 relative">
+    
+      <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-4xl">
+            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+              Join the Movement to Build a New Internet
+            </h2>
+            <p className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+              There are many ways to be part of our mission to create a more open, autonomous, and interconnected digital world. Farming is just one pillar of our ecosystem. Explore all the products that are driving this transformation.
+            </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">
+              Join the Ecosystem
+            </Button>
+          </div>
+        </div>
+        <div className="mt-10 grid grid-cols-1 gap-6 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+          {products.map(product => (
+            <div
+              key={product.id}
+              className={`rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${product.colSpan}`}
+              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 className="flex h-full flex-col lg:flex-row items-center lg:items-start gap-6">
+                <div className="flex-shrink-0">
+                  <img
+                    alt={`${product.title} screenshot`}
+                    src={product.img}
+                    className="w-20 h-20 lg:w-24 lg:h-24 object-contain"
+                  />
+                </div>
+                <div className="flex-1 text-center lg:text-left">
+                  <h3 className="text-xl lg:text-2xl font-semibold text-white mb-3">{product.title}</h3>
+                  <p className="text-gray-700 text-sm font-light text-pretty lg:text-base">
+                    {product.desc}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Reviews.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { useInView } from 'framer-motion'
 
-import { Container } from '../components/Container'
+import { Container } from '@/components/Container'
 
 interface Review {
   title: string
@@ -15,63 +15,63 @@ interface Review {
 
 const reviews: Array<Review> = [
   {
-    title: 'Revolutionary decentralized infrastructure.',
+    title: 'A true game-changer for nonprofits.',
-    body: 'ThreeFold enabled us to deploy our Web3 applications with true sovereignty and privacy. The peer-to-peer network is incredibly resilient.',
+    body: 'ThreeFold allowed us to centralize our volunteer hub, training, and crowdfunding into one platform. We have seen a 3x jump in community engagement.',
-    author: 'Alex Chen, CTO at DecentraApps',
+    author: 'Sarah D., Program Director at WomenRise',
     rating: 5,
   },
   {
-    title: 'Easy to start farming.',
+    title: 'No tech team needed.',
-    body: 'Setting up a ThreeFold node was surprisingly simple. Now I\'m earning rewards while contributing to the decentralized internet.',
+    body: 'Launching our own branded platform felt intimidating—until ThreeFold. It is intuitive, scalable, and beautifully designed.',
-    author: 'Maria Rodriguez, Independent Farmer',
+    author: 'Ahmed K., Director at The Green Schools Alliance',
     rating: 5,
   },
   {
-    title: 'True internet ownership.',
+    title: 'Empowered our youth programs.',
-    body: 'Finally, an internet infrastructure that belongs to the people, not corporations. ThreeFold is the future.',
+    body: 'Thanks to ThreeFold, we built a digital home for our learning initiatives with AI-powered content in three languages.',
-    author: 'David Kumar, Web3 Developer',
+    author: 'Maria T., Learning Lead at Global Youth Voices',
     rating: 5,
   },
   {
-    title: 'Sustainable and efficient.',
+    title: 'Secure and sovereign.',
-    body: 'The energy efficiency of ThreeFold nodes compared to traditional cloud infrastructure is remarkable. This is how computing should be done.',
+    body: 'As a human rights coalition, data privacy is critical. ThreeFold is the only platform that met our ethical tech standards.',
-    author: 'Sarah Thompson, Environmental Tech Advocate',
+    author: 'Lukas M., CTO at Liberty Commons',
     rating: 5,
   },
   {
-    title: 'Perfect for edge computing.',
+    title: 'Decentralized. Local-first. Exactly what we needed.',
-    body: 'Deploying AI workloads at the edge has never been easier. ThreeFold\'s distributed architecture is exactly what we needed.',
+    body: 'ThreeFold helped us launch a regional platform for community-led health training across East Africa—with full offline access.',
-    author: 'Dr. James Wilson, AI Research Lab',
+    author: 'Grace N., Digital Programs at Umoja Health Network',
     rating: 5,
   },
   {
-    title: 'Community-driven excellence.',
+    title: 'The best decision we made this year.',
-    body: 'The ThreeFold community is incredibly supportive. From farmers to developers, everyone works together to build something amazing.',
+    body: 'Instead of duct-taping tools together, ThreeFold gave us one powerful stack to engage, fundraise, and scale impact.',
-    author: 'Lisa Park, Blockchain Consultant',
+    author: 'Jonas F., COO at Youth in Action Europe',
     rating: 5,
   },
   {
-    title: 'Zero-OS is a game changer.',
+    title: 'Highly recommend for grassroots orgs.',
-    body: 'Running workloads directly on bare metal with Zero-OS eliminates so much complexity while increasing security and performance.',
+    body: 'Even with limited staff, we launched a branded hub in 10 days. It is helping our community organize and train in ways we never imagined.',
-    author: 'Miguel Santos, DevOps Engineer',
+    author: 'Tania B., Founder of SpeakUp Brazil',
     rating: 5,
   },
   {
-    title: 'Privacy by design.',
+    title: 'Our community feels seen and heard.',
-    body: 'In a world of surveillance capitalism, ThreeFold offers true privacy and data sovereignty. This is what the internet should have been.',
+    body: 'With ThreeFold, we integrated storytelling, campaigns, and microdonations into a single, smooth experience.',
-    author: 'Dr. Emma Johnson, Privacy Researcher',
+    author: 'Nicolas R., Communications Lead at OurStories Foundation',
     rating: 5,
   },
   {
-    title: 'Scaling globally.',
+    title: 'ThreeFold scales with us.',
-    body: 'We\'ve deployed across 5 continents using ThreeFold. The global reach and local presence is unmatched.',
+    body: 'We piloted in 2 cities and now run campaigns across 7 countries—all on the same platform. It grows with our ambition.',
-    author: 'Robert Kim, Global Infrastructure Lead',
+    author: 'Delphine A., Global Lead at Future Farmers',
     rating: 5,
   },
   {
-    title: 'Building the future together.',
+    title: 'This platform is our movement.',
-    body: 'ThreeFold isn\'t just technology - it\'s a movement. We\'re building the internet infrastructure that future generations deserve.',
+    body: 'Before ThreeFold, our digital presence was scattered. Now we have a true home where our supporters connect and take action.',
-    author: 'Priya Patel, Community Builder',
+    author: 'Ravi P., Strategy Director at Clean Energy for All',
     rating: 5,
   },
 ]
@@ -259,10 +259,10 @@ export function Reviews() {
           id="reviews-title"
           className="text-3xl font-medium tracking-tight text-white sm:text-center"
         >
-          Builders and Farmers Love ThreeFold.
+          Everyone is changing their life with ThreeFold.
         </h2>
         <p className="mt-2 lg:text-lg text-base text-gray-300 sm:text-center">
-          Join thousands of people building and powering the decentralized internet.
+          Thousands of people have doubled their net-worth in the last 30 days.
         </p>
         <ReviewGrid />
       </Container>

src/components/SecondaryFeatures.tsx

@@ -1,53 +1,47 @@
 import { useId } from 'react'
-import {
+import { SquaresPlusIcon, BeakerIcon, CurrencyDollarIcon, AdjustmentsVerticalIcon, SparklesIcon, ServerStackIcon } from '@heroicons/react/24/solid'
-  CpuChipIcon,
-  ShieldCheckIcon,
-  GlobeAltIcon,
-  BoltIcon,
-  CloudIcon,
-  CubeIcon
-} from '@heroicons/react/24/solid'
 import Image from 'next/image'
-import AppScreenshot from '../images/app_screenshot.png'
+import AppScreenshot from '@/images/app_screenshot.png'
 
-import { Container } from '../components/Container'
+
+import { Container } from '@/components/Container'
 
 const features = [
   {
-    name: 'Quantum-Safe Storage',
+    name: 'Engage Supporters with Community Tools.',
     description:
-      'Revolutionary storage algorithm that disperses data across multiple nodes, making it quantum-safe and unhackable.',
+      'Inspire action through built-in community tools like forums, comments, and stories that spark meaningful participation.',
-    icon: ShieldCheckIcon,
+    icon: SquaresPlusIcon,
   },
   {
-    name: 'Zero-OS Operating System',
+    name: 'Train with AI-powered Learning Paths.',
     description:
-      'Lightweight OS that runs directly on bare metal, eliminating virtualization overhead and maximizing efficiency.',
+      'Deliver scalable training with AI-powered learning paths, auto-generated content, and multilingual support.',
-    icon: CpuChipIcon,
+    icon: BeakerIcon,
   },
   {
-    name: 'Planetary Network',
+    name: 'Fundraise via Peer & Micro-Donations.',
     description:
-      'End-to-end encrypted overlay network that finds the shortest path between any two points on the internet.',
+      'Empower supporters to fundraise through peer-to-peer campaigns, micro-donations, and integrated payment solutions.',
-    icon: GlobeAltIcon,
+    icon: CurrencyDollarIcon,
   },
   {
-    name: 'Energy Efficient',
+    name: 'Measure & Optimize Real-World Impact.',
     description:
-      'Uses up to 10x less energy than traditional cloud infrastructure through intelligent resource optimization.',
+      'Track real impact with dashboards that visualize KPIs, community activity, and field-level data.',
-    icon: BoltIcon,
+    icon: AdjustmentsVerticalIcon,
   },
   {
-    name: 'Edge Computing Ready',
+    name: 'White-Label Everything.',
     description:
-      'Deploy applications at the edge of the internet for ultra-low latency and improved user experience.',
+      'Own your brand with a fully customizable platform—your name, your colors, your digital HQ.',
-    icon: CloudIcon,
+    icon: SparklesIcon,
   },
   {
-    name: 'Autonomous Operation',
+    name: 'Robust & Secure Infrastructure.',
     description:
-      'Self-healing infrastructure that operates autonomously without human intervention or central control.',
+      'Host on your terms via decentralized, privacy-respecting infrastructure built for trust and security.',
-    icon: CubeIcon,
+    icon: ServerStackIcon,
   },
 ]
 
@@ -55,21 +49,32 @@ export function SecondaryFeatures() {
   return (
     <section
       id="secondary-features"
-      aria-label="ThreeFold Technology Features"
+      aria-label="Features for building a portfolio"
       className="pt-24 pb-24"
-      style={{ backgroundColor: '#121212' }}
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-white">
+          <h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-gray-900">
-            Revolutionary Technology for a Decentralized Future
+            The Platform Built for Purpose-driven Organizations
           </h2>
-          <p className="mt-4 lg:text-lg text-base text-gray-300">
+          <p className="mt-4 lg:text-lg text-base text-gray-600">
-            ThreeFold's groundbreaking technology stack enables true decentralization,
+            ThreeFold is the first plug-and-play engagement infrastructure built for civil society. From Red Cross OS to Montessori OS, any org can launch their own digital headquarters—no tech team needed.
-            sustainability, and sovereignty in internet infrastructure.
           </p>
         </div>
-        
+        <div className="relative overflow-hidden pt-16">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <Image
+            alt="App screenshot"
+            src={AppScreenshot}
+            width={2432}
+            height={1442}
+            className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
+          />
+          <div aria-hidden="true" className="relative">
+            <div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
+          </div>
+        </div>
+      </div>
         <ul
           role="list"
           className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
@@ -77,13 +82,13 @@ export function SecondaryFeatures() {
           {features.map((feature) => (
             <li
               key={feature.name}
-              className="rounded-2xl border border-gray-700 bg-gray-900 p-8"
+              className="rounded-2xl border border-gray-200 p-8"
             >
-              <feature.icon className="h-8 w-8 text-cyan-400" />
+              <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-white">
+              <h3 className="mt-6 font-semibold text-gray-900">
                 {feature.name}
               </h3>
-              <p className="mt-2 text-gray-300">{feature.description}</p>
+              <p className="mt-2 text-gray-700">{feature.description}</p>
             </li>
           ))}
         </ul>

src/components/Spotlight.tsx

@@ -22,23 +22,23 @@ export function SpotlightPreview() {
       />
       <div className="relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0">
         <div className="flex justify-center mb-6">
-           <div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+           <div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-700 ring-1 ring-gray-900/10 hover:ring-gray-900/20 animate-fade-in-delay-1">
               Announcing The New TF Marketplace.{' '}
-              <a href="#" className="font-semibold text-white hover:text-gray-200">
+              <a href="#" className="font-semibold text-white hover:text-gray-800">
                 <span aria-hidden="true" className="absolute inset-0" />
                 Read more <span aria-hidden="true">&rarr;</span>
               </a>
             </div>
         </div>
 
-        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
+        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl animate-fade-in-delay-2">
           Built by Everyone <br /> for Everyone.
         </h1>
-        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-300">
+        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-200 animate-fade-in-delay-3">
           ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.
         </p>
-        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
+        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4 animate-fade-in-delay-4">
-          <Button href="/login" variant="outline" color="gray">
+          <Button href="/login" variant="glass">
             Start Building
           </Button>
           <Button href="#" variant="outline" color="gray">

src/components/StackSection.tsx

@@ -2,11 +2,15 @@
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
 import { Button } from "@/components/Button";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
 
 export function StackSectionPreview() {
+  const ref = useRef(null);
+  const isInView = useInView(ref);
 
   return (
-    <section className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
+    <section ref={ref} className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
     {/* Gradient Blob Component */}
       <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 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" />
@@ -14,18 +18,40 @@ export function StackSectionPreview() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
           {/* Left Column - Text (1/3 width) */}
           <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
-            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            <motion.h2
+              className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
               A Decentralized Infrastructure Layer
-            </h2>
+            </motion.h2>
-            <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+            <motion.p
+              className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+            >
               We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.
-            </p>
+            </motion.p>
-            <Button className="mt-4" variant="solid" color="gradient" href="https://threefold.io/build" >Discover How It Works →</Button>
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+            >
+              <Button className="mt-12" variant="outline"  href="https://threefold.io/build" >Discover How It Works →</Button>
+            </motion.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">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.3 }}
+            >
               <StackedCubes />
+            </motion.div>
           </div>
         </div>
       </div>

src/components/TfDashboard.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
+import { motion } from 'framer-motion'
+import { Button } from './Button'
+
+const features = [
+  {
+    name: 'Push to deploy.',
+    description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'SSL certificates.',
+    description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Database backups.',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.',
+    icon: ServerIcon,
+  },
+]
+
+export function TfDashboard() {
+  return (
+    <div className="bg-transparent pt-24 pb-0">
+      <div className="mx-auto max-w-7xl px-4 lg:px-2">
+        <div className="relative isolate overflow-hidden bg-stat-gradient px-6 py-12 after:pointer-events-none after:absolute lg:rounded-3xl sm:px-10 sm:py-24 after:lg:rounded-3xl lg:py-24 xl:px-24">
+          <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-y-0">
+            <div className="lg:row-start-2 lg:max-w-md">
+              <motion.h2
+                className="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 0.5, duration: 0.5}}
+              >
+                Threefold Dashboard
+              </motion.h2>
+              <motion.p
+                className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base"
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 1, duration: 0.5}}
+              >
+                ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.
+              </motion.p>
+              <motion.p
+                className="mt-6 text-sm font-light text-pretty text-white lg:text-base"
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 1.5, duration: 0.5}}
+              >
+                The ThreeFold Dashboard is your gateway to the new internet infrastructure. It can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.
+              </motion.p>
+              <motion.div
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 2, duration: 1}}
+              >
+                <Button className="mt-8" variant="outline" href="https://dashboard.threefold.io" >Explore the Dashboard →</Button>
+              </motion.div>
+            </div>
+            <motion.img
+              alt="Product screenshot"
+              src="/images/tfdash.png"
+              width={2432}
+              height={1442}
+              className="relative z-0 max-w-xl min-w-full rounded-xl shadow-xl ring-1 ring-white/10 lg:row-span-4 lg:w-5xl lg:max-w-none"
+              whileHover={{scale: 1.05}}
+              transition={{duration: 0.5}}
+            />
+            
+          </div>
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute top-1/2 left-12 -z-10 -translate-y-1/2 transform-gpu blur-3xl lg:top-auto lg:-bottom-48 lg:translate-y-0"
+          >
+            <div
+              style={{
+                clipPath:
+                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+              }}
+              className="aspect-1155/678 w-288.75 bg-linear-to-tr from-[#fff4f8] to-[#97979d] opacity-20"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Tractions.tsx

@@ -1,20 +1,20 @@
 import Image from "next/image"
-import Traction from '../images/tractions/tractions.jpg'
+import Traction from "@/images/tractions/tractions.jpg"
-import logoForbes from '../images/logos/forbes.svg'
+import logoForbes from "@/images/logos/forbes.svg"
-import logoTechcrunch from '../images/logos/techcrunch.svg'
+import logoTechcrunch from "@/images/logos/techcrunch.svg"
-import logoWired from '../images/logos/wired.svg'
+import logoWired from "@/images/logos/wired.svg"
-import logoCnn from '../images/logos/cnn.svg'
+import logoCnn from "@/images/logos/cnn.svg"
-import logoBbc from '../images/logos/bbc.svg'
+import logoBbc from "@/images/logos/bbc.svg"
-import logoCbs from '../images/logos/cbs.svg'
+import logoCbs from "@/images/logos/cbs.svg"
-import logoFastCompany from '../images/logos/fast-company.svg'
+import logoFastCompany from "@/images/logos/fast-company.svg"
-import logoHuffpost from '../images/logos/huffpost.svg'
+import logoHuffpost from "@/images/logos/huffpost.svg"
-import clsx from 'clsx'
+import clsx from "clsx"
 
 const stats = [
-  { id: 1, name: 'Nodes deployed globally', value: '1,800+' },
+  { id: 1, name: 'Raised in sponsorship.', value: '7M+' },
-  { id: 2, name: 'Countries with active farmers', value: '50+' },
+  { id: 2, name: 'Views from educational partners.', value: '3B+' },
-  { id: 3, name: 'Total compute capacity (cores)', value: '100K+' },
+  { id: 3, name: 'Users deployed.', value: '300K' },
-  { id: 4, name: 'Total storage capacity (TB)', value: '500TB+' },
+  { id: 4, name: 'Revenues paid to NGOs', value: '$70M' },
 ]
 
 export default function Tractions() {
@@ -56,12 +56,12 @@ export default function Tractions() {
         {/* RIGHT TEXT BLOCK */}
         <div className="px-6 lg:px-8">
           <div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
-            <h2 className="text-base/8 font-semibold text-white">Our Global Footprint</h2>
+            <h2 className="text-base/8 font-semibold text-white">Our track record</h2>
             <p className="mt-2 text-3xl font-medium tracking-tight text-white sm:text-4xl">
-              Powering the Decentralized Internet Worldwide
+              Trusted by Changemakers worldwide
             </p>
             <p className="mt-6 lg:text-lg text-base text-gray-300">
-                ThreeFold is building the world's largest peer-to-peer internet infrastructure, with active nodes and farmers spanning the globe. Join our decentralized network.
+                ThreeFold powers the digital headquarters for over 300,000 users across 50+ countries. From grassroots NGOs to global movements, our platform is built to scale impact, not just numbers.
             </p>
             <dl className="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
               {stats.map((stat) => (

src/components/ui/Text.tsx

@@ -0,0 +1,9 @@
+import { cn } from '@/lib/utils'
+import React from 'react'
+
+const h1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h1 ref={ref} className={cn('text-4xl font-medium tracking-tight lg:text-5xl', className)} {...props} />
+))
+h1.displayName = 'H1'
+
+export { h1 }

src/styles/tailwind.css

@@ -228,4 +228,109 @@
   .bg-stat-gradient {
     background: linear-gradient(to bottom, rgba(17, 17, 17, 0.5), rgba(50, 48, 49, 0.5));
   }
+    .bg-stat-gradient-full {
+    background: linear-gradient(to bottom, rgba(17, 17, 17, 1), rgba(50, 48, 49, 1));
+  }
+
+  .btn-new-gradient {
+    background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);
+    color: #545853;
+  }
+
+  .btn-new-gradient:hover {
+    background: radial-gradient(circle, rgba(230, 245, 236, 0.8) 0%, rgba(172, 193, 232, 0.8) 100%);
+    color: #545853;
+  }
+
+  .btn-new-gradient:active {
+    background: radial-gradient(circle, rgba(230, 245, 236, 0.6) 0%, rgba(172, 193, 232, 0.6) 100%);
+    color: #545853;
+  }
+
+  .bg-gradient-soft {
+    background: #e6f5ec;
+    background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);
+  }
+
+    .bg-gradient-dark {
+    background: #e6f5ec;
+    background: radial-gradient(circle, rgb(204, 255, 225) 0%, rgb(156, 186, 240) 100%);
+  }
+
+  .bg-gradient-neutral {
+    @apply bg-gradient-to-b from-neutral-50 to-neutral-400;
+    /* Recommended text colors for good contrast */
+    color: #1f2937; /* neutral-800 for light text */
+  }
+
+  /* Alternative text color variants */
+  .bg-gradient-neutral .text-light {
+    color: #374151; /* neutral-700 */
+  }
+
+  .bg-gradient-neutral .text-medium {
+    color: #4b5563; /* neutral-600 */
+  }
+
+  .bg-gradient-neutral .text-dark {
+    color: #1f2937; /* neutral-800 */
+  }
+
+  /* Text gradient utilities */
+  .text-gradient-neutral {
+    background: linear-gradient(to right, rgb(249, 250, 251), rgb(75, 85, 99));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .text-gradient-neutral-vertical {
+    background: linear-gradient(to bottom, rgb(249, 250, 251), rgb(126, 126, 126));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Variations with different opacity levels */
+  .text-gradient-neutral-light {
+    background: linear-gradient(to right, rgba(249, 250, 251, 0.8), rgba(75, 85, 99, 0.8));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .text-gradient-neutral-dark {
+    background: linear-gradient(to right, rgba(156, 163, 175, 0.8), rgba(31, 41, 55, 1));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Reusable animation effects */
+  .animate-fade-in-delay-1 {
+    animation: fadeInUp 0.8s ease-out 0.2s both;
+  }
+
+  .animate-fade-in-delay-2 {
+    animation: fadeInUp 0.8s ease-out 0.4s both;
+  }
+
+  .animate-fade-in-delay-3 {
+    animation: fadeInUp 0.8s ease-out 0.6s both;
+  }
+
+  .animate-fade-in-delay-4 {
+    animation: fadeInUp 0.8s ease-out 0.8s both;
+  }
+
+  @keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }