add -a

add
2025-09-05 16:39:35 +02:00 · 2025-09-05 16:23:53 +02:00 · 2025-09-05 15:44:26 +02:00 · 2025-09-05 15:35:19 +02:00 · 2025-09-05 15:28:52 +02:00 · 2025-09-05 14:35:51 +02:00
37 changed files with 682 additions and 659 deletions
--- a/README.md
+++ b/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
--- a/build.sh
+++ b/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/"
--- a/public/images/3nodes_big.png
+++ b/public/images/3nodes_big.png
--- a/public/images/3phone.png
+++ b/public/images/3phone.png
--- a/public/images/3router.png
+++ b/public/images/3router.png
--- a/public/images/aibox.png
+++ b/public/images/aibox.png
--- a/public/images/hgu-04.png
+++ b/public/images/hgu-04.png
--- a/public/images/mycelium.svg
+++ b/public/images/mycelium.svg
--- a/public/images/tfdash.png
+++ b/public/images/tfdash.png
--- a/src/app/(main)/build/page.tsx
+++ b/src/app/(main)/build/page.tsx
@@ -1,84 +0,0 @@
 import { AppsPreview } from '../../../components/Apps'
 import { Container } from '../../../components/Container'
 export const metadata = {
  title: 'Build',
  description: 'Build and deploy your applications on ThreeFold\'s decentralized infrastructure.',
 }
 export default function Build() {
  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">
              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>
    </>
  )
 }
--- a/src/app/(main)/community/page.tsx
+++ b/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>
    </>
  )
 }
--- a/src/app/(main)/farming/page.tsx
+++ b/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>
    </>
  )
 }
--- a/src/app/(main)/grid/page.tsx
+++ b/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>
    </>
  )
 }
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -1,11 +1,22 @@
-import { SpotlightPreview } from '../../components/Spotlight'
+import { CallToAction } from '@/components/CallToAction'
-import { StackSectionPreview } from '../../components/StackSection'
+import { Faqs } from '@/components/Faqs'
-import { Dashboard } from '../../components/Dashboard'
+import { Hero } from '@/components/Hero'
-import { AppsPreview } from '../../components/Apps'
+import { Pricing } from '@/components/Pricing'
-import { FarmerPreview } from '../../components/Farmer'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { Reviews } from '../../components/Reviews'
+import { Reviews } from '@/components/Reviews'
-import { Faqs } from '../../components/Faqs'
+import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import Cta from '../../components/Cta'
+import Tractions from '@/components/Tractions'
 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'
 export default function Home() {
  return (
@@ -14,10 +25,10 @@ export default function Home() {
      <StackSectionPreview />
      <Dashboard />
      <FarmerPreview />
      <TfDashboard />
      <AppsPreview />
-      <Reviews />
+      <ProductsPreview />
-      <Faqs />
+
      <Cta />
    </>
  )
 }
--- a/src/app/(main)/technology/page.tsx
+++ b/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>
    </>
  )
 }
--- a/src/app/layout.tsx
+++ b/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'],
@@ -12,12 +12,11 @@ const inter = Inter({
 export const metadata: Metadata = {
  title: {
-    template: '%s - ThreeFold',
+    template: '%s - EngageOS',
-    default: 'ThreeFold - Decentralized Internet Infrastructure',
+    default: 'EngageOS - Invest at the perfect time.',
  },
  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.',
+    'By leveraging insights from our network of industry insiders, you’ll know exactly when to buy to maximize profit, and exactly when to sell to avoid painful losses.',
  keywords: 'decentralized internet, blockchain, Web3, cloud infrastructure, sovereign technology',
 }
 export default function RootLayout({
--- a/src/components/AppDemo.tsx.bak
+++ b/src/components/AppDemo.tsx.bak
--- a/src/components/Apps.tsx
+++ b/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>
--- a/src/components/Benefits.tsx
+++ b/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>
+                </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>
--- a/src/components/Button.tsx
+++ b/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',
  },
 }
--- a/src/components/CallToAction.tsx.bak
+++ b/src/components/CallToAction.tsx.bak
--- a/src/components/Cta.tsx
+++ b/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>
+                </radialGradient>
            </defs>
          </svg>
        </div>
--- a/src/components/Dashboard.tsx
+++ b/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>
--- a/src/components/Faqs.tsx
+++ b/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() {
  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-3xl font-medium tracking-tight text-gray-900"
          >
            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"
+              href="mailto:info@example.com"
-              className="text-cyan-400 hover:text-cyan-300 underline"
+              className="text-gray-900 underline"
            >
              reach out to us
            </a>
@@ -90,10 +90,10 @@ export function Faqs() {
              <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>
--- a/src/components/Farmer.tsx
+++ b/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>
--- a/src/components/Footer.tsx
+++ b/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,7 +29,7 @@ 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">Empowering Purpose-Driven Organizations.</p>
              </div>
            </div>
            <nav className="mt-11 flex gap-8">
@@ -52,7 +53,7 @@ export function Footer() {
            </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>
--- a/src/components/Header.tsx
+++ b/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="solid" color="white">
                Participate
              </Button>
              <Button href="https://threefold.io/farm">Start Farming</Button>
            </div>
          </div>
        </Container>
--- a/src/components/HeroHome.tsx
+++ b/src/components/HeroHome.tsx
@@ -2,8 +2,15 @@
 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'
 const navigation = [
  { name: 'Product', href: '#' },
  { name: 'Features', href: '#' },
  { name: 'Marketplace', href: '#' },
  { name: 'Company', href: '#' },
 ]
 export default function HeroHome() {
  return (
@@ -12,26 +19,26 @@ export default function HeroHome() {
          <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">
-                Building the Internet of Tomorrow
+                Empowering Purpose-Driven Organizations.
              </h1>
-              <p className="mt-8 lg:text-lg text-base text-gray-300">
+              <p className="mt-8 lg:lg:text-lg text-base 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
+              <Button
-                  href="https://threefold.io/farm"
+                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-                  variant="outline"
+                variant="outline"
-                >
+              >
-                  <span className="ml-2.5">Start Farming</span>
+                <span className="ml-2.5">Book a Demo</span>
-                </Button>
+              </Button>
              </div>
            </div>
          </div>
          <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>
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -9,16 +9,15 @@ export function NavLinks() {
  let timeoutRef = useRef<number | null>(null)
  return [
-    ['Technology', '/technology'],
+    ['Features', '/#features'],
-    ['Grid Status', '/grid'],
+    ['Reviews', '/#reviews'],
-    ['Farming', '/farming'],
+    ['Pricing', '/#pricing'],
-    ['Build', '/build'],
+    ['FAQs', '/#faqs'],
    ['Community', '/community'],
  ].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-600 transition-colors delay-150 hover:text-white hover:delay-0"
      onMouseEnter={() => {
        if (timeoutRef.current) {
          window.clearTimeout(timeoutRef.current)
@@ -34,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 } }}
--- a/src/components/Pricing.tsx
+++ b/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>
  )
--- a/src/components/PrimaryFeatures.tsx.bak
+++ b/src/components/PrimaryFeatures.tsx.bak
@@ -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>
--- a/src/components/Products.tsx
+++ b/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>
  );
 }
--- a/src/components/Reviews.tsx
+++ b/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>
--- a/src/components/SecondaryFeatures.tsx
+++ b/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>
--- a/src/components/StackSection.tsx
+++ b/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) */}
--- a/src/components/TfDashboard.tsx
+++ b/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>
  )
 }
--- a/src/components/Tractions.tsx
+++ b/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) => (
Author	SHA1	Message	Date
sasha-astiadi	4bea627e6d	add -a	2025-09-05 16:39:35 +02:00
sasha-astiadi	6d35b9dd05	add	2025-09-05 16:23:53 +02:00
sasha-astiadi	40d1d5ed24	add	2025-09-05 15:44:26 +02:00
sasha-astiadi	ddbe3c795d	add	2025-09-05 15:35:19 +02:00
sasha-astiadi	1df765c4aa	ok	2025-09-05 15:28:52 +02:00
sasha-astiadi	c8a3b455fe	ok	2025-09-05 14:35:51 +02:00
sasha-astiadi	75aa34ae6f	add chmod +x *.sh	2025-08-14 15:33:24 +02:00