add -a

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/"

src/app/(main)/page.tsx

@@ -14,6 +14,8 @@ 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'
 
 
 export default function Home() {
@@ -23,7 +25,9 @@ export default function Home() {
       <StackSectionPreview />
       <Dashboard />
       <FarmerPreview />
+      <TfDashboard />
       <AppsPreview />
+      <ProductsPreview />
 
     </>
   )

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

@@ -16,7 +16,7 @@ export default function Benefits() {
                 Built Different. For a Change.
                 </h2>   
                 <p className="mt-6 lg:text-lg text-base text-gray-300">
-                    EngageOS 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 EngageOS is designed to meet the real-world challenges of civil society.
+                    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>
@@ -32,7 +32,7 @@ export default function Benefits() {
                 <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">Purpose-First, Not Profit-First</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  Unlike traditional SaaS built for commercial scale, EngageOS 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.
+                  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>
@@ -48,7 +48,7 @@ export default function Benefits() {
                 <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">Your Brand, Your Movements</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  EngageOS 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.
+                  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>
@@ -64,7 +64,7 @@ export default function Benefits() {
                 <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">Own Your Data. Always.</p>
                 <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  We don't mine or monetize user data. EngageOS runs on decentralized, privacy-respecting infrastructure — built for trust, compliance, and sovereignty. You control where your data lives and who sees it.
+                  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>
@@ -80,7 +80,7 @@ export default function Benefits() {
                 <h3 className="text-sm/4 font-semibold text-white">Mutualized Model</h3>
                 <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">
-                  By pooling tech costs across aligned organizations, EngageOS offers enterprise-grade functionality at a fraction of the price. When one partner grows, the entire ecosystem benefits — through shared modules, updates, and insights.
+                  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/Button.tsx

@@ -14,11 +14,11 @@ const variantStyles = {
       'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95',
     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',
   },
 }
 

src/components/Cta.tsx

@@ -7,7 +7,7 @@ export default function Cta() {
             Scale Your Impact, Not Your Costs
           </h2>
           <p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300">
-            EngageOS gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster—
+            ThreeFold gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster—
             all from one unified platform.
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">

src/components/Dashboard.tsx

@@ -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>
 
 

src/components/Faqs.tsx

@@ -3,48 +3,48 @@ import { Container } from '@/components/Container'
 const faqs = [
   [
     {
-      question: 'What is EngageOS?',
+      question: 'What is ThreeFold?',
       answer:
-        'EngageOS 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.',
+        '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: 'Do I need a tech team to use EngageOS?',
+      question: 'Do I need a tech team to use ThreeFold?',
       answer:
-        'No. EngageOS 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.',
+        '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: 'Can we fully customize the platform’s look and feel?',
       answer:
-        'Absolutely. From logos and colors to navigation and community features, EngageOS supports full white-label customization so the platform feels like your own digital headquarters.',
+        '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: 'What kinds of organizations use EngageOS?',
+      question: 'What kinds of organizations use ThreeFold?',
       answer:
         '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: 'Is EngageOS multilingual and accessible offline?',
+      question: 'Is ThreeFold multilingual and accessible offline?',
       answer:
         'Yes. The platform supports multilingual content and offline-friendly delivery—ideal for reaching underserved communities with limited connectivity.',
     },
     {
-      question: 'Can we use EngageOS for fundraising?',
+      question: 'Can we use ThreeFold for fundraising?',
       answer:
-        'Yes. EngageOS includes built-in fundraising tools, including peer-to-peer, micro-donation, and pay-it-forward models—plus full donor engagement capabilities.',
+        '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 is EngageOS different from other platforms?',
+      question: 'How is ThreeFold different from other platforms?',
       answer:
-        'Unlike general-purpose platforms, EngageOS is mission-built for civil society. It integrates engagement, learning, and fundraising in one secure, ethical platform—hosted on sovereign infrastructure.',
+        '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: 'What is the pricing model?',
       answer:
-        'EngageOS 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.',
+        '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 we get started?',

src/components/Farmer.tsx

@@ -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>

src/components/Footer.tsx

@@ -28,7 +28,7 @@ export function Footer() {
             <div className="flex items-center text-white">
               <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
               <div className="ml-4">
-                <p className="text-base font-semibold">EngageOS</p>
+                <p className="text-base font-semibold">ThreeFold</p>
                 <p className="mt-1 text-sm">Empowering Purpose-Driven Organizations.</p>
               </div>
             </div>

src/components/Header.tsx

@@ -73,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 }) =>
@@ -134,9 +134,11 @@ export function Header() {
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
               <Button href="/login" variant="outline">
-                Log in
+                Info
+              </Button>
+              <Button href="#" variant="solid" color="white">
+                Participate
               </Button>
-              <Button href="#">Download</Button>
             </div>
           </div>
         </Container>

src/components/HeroHome.tsx

@@ -22,7 +22,7 @@ export default function HeroHome() {
                 Empowering Purpose-Driven Organizations.
               </h1>
               <p className="mt-8 lg:lg:text-lg text-base text-base text-gray-300">
-                Welcome to <span className={`font-semibold ${gradientText}`}>EngageOS</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.
+                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">Get in Touch</Button>

src/components/NavLinks.tsx

@@ -17,7 +17,7 @@ export function NavLinks() {
     <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-600 transition-colors delay-150 hover:text-white hover:delay-0"
       onMouseEnter={() => {
         if (timeoutRef.current) {
           window.clearTimeout(timeoutRef.current)
@@ -33,7 +33,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

@@ -25,7 +25,7 @@ const plans = [
       'Basic learning paths',
       'Donations & campaigns',
       'Your logo & colors',
-      'EngageOS subdomain (yourname.engageos.org)',
+      'ThreeFold subdomain (yourname.ThreeFold.org)',
       'Email support',
     ],
     logomarkClassName: 'fill-gray-300',

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,111 @@
+"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">
+    {/* 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" />
+      <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-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+          {products.map(product => (
+            <div key={product.id} className={`relative ${product.colSpan}`}>
+              <div className={`absolute inset-0 rounded-lg bg-gray-100 ${product.bgRounded}`} />
+              <div className={`relative flex h-full flex-col lg:flex-row overflow-hidden ${product.rounded}`}>
+                <div className={`flex justify-center items-center h-15 ${product.id > 2 ? 'lg:h-48' : 'lg:h-40'} lg:w-1/4 p-2`}>
+                  <img
+                    alt={`${product.title} screenshot`}
+                    src={product.img}
+                    className="w-full lg:w-full h-full object-contain p-2"
+                  />
+                </div>
+                <div className="pl-2 pr-6 flex-1 flex flex-col justify-center">
+                  <p className="lg:mt-0 mt-4 text-lg lg:text-xl font-medium tracking-tight text-white">{product.title}</p>
+                  <p className="mt-2 max-w-lg text-sm/6 leading-tight text-gray-600">
+                    {product.desc}
+                  </p>
+                </div>
+              </div>
+              <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-white/15 ${product.bgRounded}`} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Reviews.tsx

@@ -16,37 +16,37 @@ interface Review {
 const reviews: Array<Review> = [
   {
     title: 'A true game-changer for nonprofits.',
-    body: 'EngageOS allowed us to centralize our volunteer hub, training, and crowdfunding into one platform. We have seen a 3x jump in community engagement.',
+    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: 'Sarah D., Program Director at WomenRise',
     rating: 5,
   },
   {
     title: 'No tech team needed.',
-    body: 'Launching our own branded platform felt intimidating—until EngageOS. It is intuitive, scalable, and beautifully designed.',
+    body: 'Launching our own branded platform felt intimidating—until ThreeFold. It is intuitive, scalable, and beautifully designed.',
     author: 'Ahmed K., Director at The Green Schools Alliance',
     rating: 5,
   },
   {
     title: 'Empowered our youth programs.',
-    body: 'Thanks to EngageOS, we built a digital home for our learning initiatives with AI-powered content in three languages.',
+    body: 'Thanks to ThreeFold, we built a digital home for our learning initiatives with AI-powered content in three languages.',
     author: 'Maria T., Learning Lead at Global Youth Voices',
     rating: 5,
   },
   {
     title: 'Secure and sovereign.',
-    body: 'As a human rights coalition, data privacy is critical. EngageOS is the only platform that met our ethical tech standards.',
+    body: 'As a human rights coalition, data privacy is critical. ThreeFold is the only platform that met our ethical tech standards.',
     author: 'Lukas M., CTO at Liberty Commons',
     rating: 5,
   },
   {
     title: 'Decentralized. Local-first. Exactly what we needed.',
-    body: 'EngageOS helped us launch a regional platform for community-led health training across East Africa—with full offline access.',
+    body: 'ThreeFold helped us launch a regional platform for community-led health training across East Africa—with full offline access.',
     author: 'Grace N., Digital Programs at Umoja Health Network',
     rating: 5,
   },
   {
     title: 'The best decision we made this year.',
-    body: 'Instead of duct-taping tools together, EngageOS gave us one powerful stack to engage, fundraise, and scale impact.',
+    body: 'Instead of duct-taping tools together, ThreeFold gave us one powerful stack to engage, fundraise, and scale impact.',
     author: 'Jonas F., COO at Youth in Action Europe',
     rating: 5,
   },
@@ -58,19 +58,19 @@ const reviews: Array<Review> = [
   },
   {
     title: 'Our community feels seen and heard.',
-    body: 'With EngageOS, we integrated storytelling, campaigns, and microdonations into a single, smooth experience.',
+    body: 'With ThreeFold, we integrated storytelling, campaigns, and microdonations into a single, smooth experience.',
     author: 'Nicolas R., Communications Lead at OurStories Foundation',
     rating: 5,
   },
   {
-    title: 'EngageOS scales with us.',
+    title: 'ThreeFold scales with us.',
     body: 'We piloted in 2 cities and now run campaigns across 7 countries—all on the same platform. It grows with our ambition.',
     author: 'Delphine A., Global Lead at Future Farmers',
     rating: 5,
   },
   {
     title: 'This platform is our movement.',
-    body: 'Before EngageOS, our digital presence was scattered. Now we have a true home where our supporters connect and take action.',
+    body: 'Before ThreeFold, our digital presence was scattered. Now we have a true home where our supporters connect and take action.',
     author: 'Ravi P., Strategy Director at Clean Energy for All',
     rating: 5,
   },
@@ -259,7 +259,7 @@ export function Reviews() {
           id="reviews-title"
           className="text-3xl font-medium tracking-tight text-white sm:text-center"
         >
-          Everyone is changing their life with EngageOS.
+          Everyone is changing their life with ThreeFold.
         </h2>
         <p className="mt-2 lg:text-lg text-base text-gray-300 sm:text-center">
           Thousands of people have doubled their net-worth in the last 30 days.

src/components/SecondaryFeatures.tsx

@@ -58,7 +58,7 @@ export function SecondaryFeatures() {
             The Platform Built for Purpose-driven Organizations
           </h2>
           <p className="mt-4 lg:text-lg text-base text-gray-600">
-            EngageOS 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.
+            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.
           </p>
         </div>
         <div className="relative overflow-hidden pt-16">

src/components/StackSection.tsx

@@ -17,10 +17,10 @@ export function StackSectionPreview() {
             <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
               A Decentralized Infrastructure Layer
             </h2>
-            <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+            <p className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base">
               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>
-            <Button className="mt-4" variant="solid" color="gradient" href="https://threefold.io/build" >Discover How It Works →</Button>
+            <Button className="mt-8" variant="outline"  href="https://threefold.io/build" >Discover How It Works →</Button>
           </div>
           
           {/* Right Column - Stacked Cubes (2/3 width) */}

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-transparent px-6 py-12 after:pointer-events-none after:absolute after:inset-0 after:inset-ring after:inset-ring-white/10 sm:rounded-3xl sm:px-10 sm:py-24 after:sm: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-[#ff80b5] to-[#9089fc] opacity-20"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Tractions.tsx

@@ -61,7 +61,7 @@ export default function Tractions() {
               Trusted by Changemakers worldwide
             </p>
             <p className="mt-6 lg:text-lg text-base text-gray-300">
-                EngageOS 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.
+                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) => (