...

build.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+cd "$(dirname "$0")"
+
+PREFIX="threefold"
+
+echo "building for folder: /$PREFIX/"
+export NEXT_PUBLIC_BASE_PATH="/$PREFIX"
+
+# mkdir -p "out"
+
+# pnpm install --frozen-lockfile
+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/"

install.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# HERO Personal Agent Website - Installation Script
+# This script installs all dependencies using pnpm
+
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "❌ Node.js is not installed. Please install Node.js first."
+    exit 1
+fi
+
+# Check if pnpm is installed
+if ! command -v pnpm &> /dev/null; then
+    echo "📦 Installing pnpm..."
+    npm install -g pnpm
+fi
+
+echo "📋 Node.js version: $(node --version)"
+echo "📋 pnpm version: $(pnpm --version)"
+
+# Install dependencies
+echo "📦 Installing project dependencies..."
+pnpm install
+

next.config.js

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+}
 
 module.exports = nextConfig

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

@@ -0,0 +1,84 @@
+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>
+    </>
+  )
+}

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

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

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

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

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

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

src/app/(main)/page.tsx

@@ -1,20 +1,11 @@
-import { CallToAction } from '@/components/CallToAction'
+import { SpotlightPreview } from '../../components/Spotlight'
-import { Faqs } from '@/components/Faqs'
+import { StackSectionPreview } from '../../components/StackSection'
-import { Hero } from '@/components/Hero'
+import { Dashboard } from '../../components/Dashboard'
-import { Pricing } from '@/components/Pricing'
+import { AppsPreview } from '../../components/Apps'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
+import { FarmerPreview } from '../../components/Farmer'
-import { Reviews } from '@/components/Reviews'
+import { Reviews } from '../../components/Reviews'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
+import { Faqs } from '../../components/Faqs'
-import Tractions from '@/components/Tractions'
+import Cta from '../../components/Cta'
-import Benefits from '@/components/Benefits'
-import  Cta from '@/components/Cta'
-import { SpotlightPreview } from '@/components/Spotlight'
-import { StackSectionPreview } from '@/components/StackSection'
-import GlobeDemo from '@/components/GlobeDemo'
-import { Dashboard } from '@/components/Dashboard'
-import { AppsPreview } from '@/components/Apps'
-import { FarmerPreview } from '@/components/Farmer'
-
 
 export default function Home() {
   return (
@@ -24,7 +15,9 @@ export default function Home() {
       <Dashboard />
       <FarmerPreview />
       <AppsPreview />
-
+      <Reviews />
+      <Faqs />
+      <Cta />
     </>
   )
 }

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

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

src/app/layout.tsx

@@ -2,7 +2,7 @@ import { type Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import clsx from 'clsx'
 
-import '@/styles/tailwind.css'
+import '../styles/tailwind.css'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -12,11 +12,12 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: {
-    template: '%s - EngageOS',
+    template: '%s - ThreeFold',
-    default: 'EngageOS - Invest at the perfect time.',
+    default: 'ThreeFold - Decentralized Internet Infrastructure',
   },
   description:
-    '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.',
+    '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.',
+  keywords: 'decentralized internet, blockchain, Web3, cloud infrastructure, sovereign technology',
 }
 
 export default function RootLayout({

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">
-                Built Different. For a Change.
+                The Benefits of Decentralized Infrastructure
                 </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 offers a fundamentally different approach to internet infrastructure, providing unparalleled benefits in terms of sovereignty, sustainability, and accessibility.
                 </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"> Built for Civil Society</h3>
+                <h3 className="text-sm/4 font-semibold text-white">True Sovereignty</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Purpose-First, Not Profit-First</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data, Control Your Destiny</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.
+                  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.
                 </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">White-Label, Zero-Code</h3>
+                <h3 className="text-sm/4 font-semibold text-white">Sustainable & Energy Efficient</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Your Brand, Your Movements</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Green Computing for a Better Future</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.
+                  Our Zero-OS and optimized network design consume significantly less energy than traditional data centers, making ThreeFold a truly sustainable solution for the planet.
                 </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">Sovereign & Ethical Infrastructure</h3>
+                <h3 className="text-sm/4 font-semibold text-white">Accessible & Inclusive</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data. Always.</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Internet for Everyone, Everywhere</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.
+                  By distributing computing power globally, ThreeFold makes internet infrastructure accessible to underserved regions, fostering digital inclusion and empowering local communities.
                 </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">Mutualized Model</h3>
+                <h3 className="text-sm/4 font-semibold text-white">Resilient & Secure</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-white">Share Infrastructure. Multiply Impact.</p>
+                <p className="mt-2 text-lg font-medium tracking-tight text-white">Quantum-Safe and Unhackable</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.
+                  ThreeFold's unique data distribution and encryption methods provide quantum-safe security, making your data virtually impossible to hack or lose, ensuring unparalleled resilience.
                 </p>
               </div>
             </div>

src/components/Cta.tsx

@@ -4,21 +4,21 @@ export default function Cta() {
       <div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
         <div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
           <h2 className="text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">
-            Scale Your Impact, Not Your Costs
+            Join the Decentralized Internet Revolution
           </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—
+            Be part of building a more sovereign, sustainable, and accessible internet.
-            all from one unified platform.
+            Start farming nodes or deploy your applications today.
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <a
-              href="/contact"
+              href="https://threefold.io/farm"
               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"
             >
-              Contact Us
+              Start Farming
             </a>
-            <a href="/demo" className="text-sm/6 font-semibold text-white">
+            <a href="https://threefold.io/build" className="text-sm/6 font-semibold text-white">
-              Book a Demo <span aria-hidden="true">→</span>
+              Start Building <span aria-hidden="true">→</span>
             </a>
           </div>
 
@@ -27,14 +27,13 @@ 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(#engage-gradient)" fillOpacity="0.7" />
+            <circle r={512} cx={512} cy={512} fill="url(#threefold-gradient)" fillOpacity="0.7" />
             <defs>
-              <radialGradient id="engage-gradient">
+              <radialGradient id="threefold-gradient">
                 <stop offset="0%" stopColor="#caa5f0" />
                 <stop offset="50%" stopColor="#8f79f9" />
                 <stop offset="100%" stopColor="#5d84e1" />
-                </radialGradient>
+              </radialGradient>
-
             </defs>
           </svg>
         </div>

src/components/Dashboard.tsx

@@ -2,6 +2,7 @@
 
 import CountUp from "react-countup";
 import React from "react";
+import { Button } from "./Button";
 
 export function Dashboard() {
   return (
@@ -18,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="primary" color="transparent" href="https://threefold.io/build" >Explore TFGrid →</button>
+              <Button className="mt-6" variant="solid" color="gradient" href="https://threefold.io/build" >Explore TFGrid →</Button>
             </div>
 
 

src/components/Faqs.tsx

@@ -1,80 +1,80 @@
-import { Container } from '@/components/Container'
+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 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.',
     },
     {
-      question: 'Do I need a tech team to use EngageOS?',
+      question: 'How is ThreeFold different from traditional cloud?',
       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.',
+        'Unlike centralized cloud providers, ThreeFold is fully decentralized, uses up to 10x less energy, provides quantum-safe security, and gives you complete data sovereignty.',
     },
     {
-      question: 'Can we fully customize the platform’s look and feel?',
+      question: 'What can I build on ThreeFold?',
       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.',
+        'Anything that runs on Linux can run on ThreeFold - from simple websites to complex AI workloads, blockchain nodes, IoT applications, and enterprise solutions.',
     },
   ],
   [
     {
-      question: 'What kinds of organizations use EngageOS?',
+      question: 'How do I become a ThreeFold farmer?',
       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.',
+        '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.',
     },
     {
-      question: 'Is EngageOS multilingual and accessible offline?',
+      question: 'What are ThreeFold Tokens (TFT)?',
       answer:
-        'Yes. The platform supports multilingual content and offline-friendly delivery—ideal for reaching underserved communities with limited connectivity.',
+        '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.',
     },
     {
-      question: 'Can we use EngageOS for fundraising?',
+      question: 'Is ThreeFold secure?',
       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 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.',
     },
   ],
   [
     {
-      question: 'How is EngageOS different from other platforms?',
+      question: 'How much does it cost to use ThreeFold?',
       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.',
+        'Pricing is transparent and competitive with traditional cloud providers, but with added benefits of decentralization and data sovereignty. Check our calculator for specific pricing.',
     },
     {
-      question: 'What is the pricing model?',
+      question: 'Where is ThreeFold available?',
       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 globally with nodes in over 50 countries. The decentralized nature means you can deploy close to your users anywhere in the world.',
     },
     {
-      question: 'How do we get started?',
+      question: 'How do I get started?',
       answer:
-        '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.',
+        'Visit our Grid portal to start building, or check out our farming guide to contribute capacity. Our community is always ready to help newcomers.',
     },
   ],
 ]
 
-
 export function Faqs() {
   return (
     <section
       id="faqs"
       aria-labelledby="faqs-title"
-      className="border-t border-gray-200 py-20 sm:py-32"
+      className="border-t border-gray-800 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-gray-900"
+            className="text-3xl font-medium tracking-tight text-white"
           >
             Frequently asked questions
           </h2>
-          <p className="mt-2 lg:text-lg text-base text-gray-600">
+          <p className="mt-2 lg:text-lg text-base text-gray-300">
             If you have anything else you want to ask,{' '}
             <a
-              href="mailto:info@example.com"
+              href="mailto:info@threefold.io"
-              className="text-gray-900 underline"
+              className="text-cyan-400 hover:text-cyan-300 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-gray-900">
+                    <h3 className="lg:text-lg text-base/6 font-semibold text-white">
                       {faq.question}
                     </h3>
-                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
+                    <p className="mt-4 text-sm text-gray-300">{faq.answer}</p>
                   </li>
                 ))}
               </ul>

src/components/Footer.tsx

@@ -1,13 +1,11 @@
 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'
-import qrCode from '@/images/qr-code.svg'
-
 function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
     <svg viewBox="0 0 96 96" fill="none" aria-hidden="true" {...props}>
@@ -29,31 +27,14 @@ 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>
+                <p className="mt-1 text-sm">Building the Decentralized Internet.</p>
               </div>
             </div>
             <nav className="mt-11 flex gap-8">
               <NavLinks />
             </nav>
           </div>
-          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-800 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
-            <div className="relative flex h-24 w-24 flex-none items-center justify-center">
-              <QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-600 transition-colors group-hover:stroke-cyan-500" />
-              <Image src={qrCode} alt="" unoptimized />
-            </div>
-            <div className="ml-8 lg:w-64">
-              <p className="text-base font-semibold text-white">
-                <Link href="#">
-                  <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download the app
-                </Link>
-              </p>
-              <p className="mt-1 text-sm text-gray-300">
-                Scan the QR code to download the app from the App Store.
-              </p>
-            </div>
-          </div>
         </div>
         <div className="flex flex-col items-center border-t border-gray-700 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
           <form className="flex w-full justify-center md:w-auto">
@@ -71,7 +52,7 @@ export function Footer() {
             </Button>
           </form>
           <p className="mt-6 text-sm text-gray-400 md:mt-0">
-            &copy; Copyright {new Date().getFullYear()}. All rights reserved.
+            &copy; Copyright {new Date().getFullYear()} ThreeFold. All rights reserved.
           </p>
         </div>
       </Container>

src/components/Header.tsx

@@ -9,10 +9,12 @@ 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 (
@@ -108,22 +110,27 @@ 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="/#features">
+                            <MobileNavLink href="/technology">
-                              Features
+                              Technology
                             </MobileNavLink>
-                            <MobileNavLink href="/#reviews">
+                            <MobileNavLink href="/grid">
-                              Reviews
+                              Grid Status
                             </MobileNavLink>
-                            <MobileNavLink href="/#pricing">
+                            <MobileNavLink href="/farming">
-                              Pricing
+                              Farming
+                            </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="/login" variant="outline">
+                            <Button href="https://threefold.io/build" variant="outline">
-                              Log in
+                              Start Building
                             </Button>
-                            <Button href="#">Download the app</Button>
+                            <Button href="https://threefold.io/farm">Start Farming</Button>
                           </div>
                         </PopoverPanel>
                       </>
@@ -133,10 +140,10 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="/login" variant="outline">
+              <Button href="https://threefold.io/build" variant="outline">
-                Log in
+                Start Building
               </Button>
-              <Button href="#">Download</Button>
+              <Button href="https://threefold.io/farm">Start Farming</Button>
             </div>
           </div>
         </Container>

src/components/HeroHome.tsx

@@ -2,15 +2,8 @@
 
 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 (
@@ -19,26 +12,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">
-                Empowering Purpose-Driven Organizations.
+                Building the Internet of Tomorrow
               </h1>
-              <p className="mt-8 lg:lg:text-lg text-base text-base text-gray-300">
+              <p className="mt-8 lg:text-lg 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 world's largest decentralized internet infrastructure. Built by everyone, for everyone - creating a more sovereign, sustainable, and accessible internet.
               </p>
               <div className="mt-12 flex items-center justify-center gap-x-6 relative z-10">
-                <Button color="gradient">Get in Touch</Button>
+                <Button color="gradient" href="https://threefold.io/build">Start Building</Button>
-              <Button
+                <Button
-                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                  href="https://threefold.io/farm"
-                variant="outline"
+                  variant="outline"
-              >
+                >
-                <span className="ml-2.5">Book a Demo</span>
+                  <span className="ml-2.5">Start Farming</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="" unoptimized />
+                <Image src={Engage} alt="ThreeFold Network" unoptimized />
               </div>
             </div>
           </div>

src/components/NavLinks.tsx

@@ -9,10 +9,11 @@ export function NavLinks() {
   let timeoutRef = useRef<number | null>(null)
 
   return [
-    ['Features', '/#features'],
+    ['Technology', '/technology'],
-    ['Reviews', '/#reviews'],
+    ['Grid Status', '/grid'],
-    ['Pricing', '/#pricing'],
+    ['Farming', '/farming'],
-    ['FAQs', '/#faqs'],
+    ['Build', '/build'],
+    ['Community', '/community'],
   ].map(([label, href], index) => (
     <Link
       key={label}

src/components/Pricing.tsx

@@ -4,217 +4,75 @@ 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: 'Starter',
+    name: 'Explorer',
     featured: false,
-    price: { Monthly: '$0', Annually: '$0' },
+    price: { Monthly: 'Free', Annually: 'Free' },
     description:
-      'Perfect for small teams and early-stage initiatives getting started with community engagement.',
+      'Perfect for developers getting started with decentralized infrastructure.',
     button: {
-      label: 'Launch for Free',
+      label: 'Start Building',
-      href: '/register',
+      href: 'https://threefold.io/build',
     },
     features: [
-      'Up to 1,000 members',
+      'Access to TF Grid',
-      'Built-in community tools (forums, updates, events)',
+      'Deploy basic workloads',
-      'Basic learning paths',
+      'Community support',
-      'Donations & campaigns',
+      'Documentation & tutorials',
-      'Your logo & colors',
+      'Basic monitoring',
-      'EngageOS subdomain (yourname.engageos.org)',
-      'Email support',
     ],
     logomarkClassName: 'fill-gray-300',
   },
   {
-    name: 'Impact',
+    name: 'Builder',
     featured: true,
-    price: { Monthly: '$89', Annually: '$890' },
+    price: { Monthly: '$50', Annually: '$500' },
     description:
-      'For growing organizations ready to scale impact, train supporters, and fundraise with confidence.',
+      'For serious developers and organizations deploying production workloads.',
     button: {
-      label: 'Get Started',
+      label: 'Start Building',
-      href: '/register',
+      href: 'https://threefold.io/build',
     },
     features: [
-      'Up to 25,000 members',
+      'Priority grid access',
-      'Advanced training with AI-powered content',
+      'Advanced compute & storage',
-      'Multilingual support',
+      'Load balancing & scaling',
-      '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: 'Sovereign',
+    name: 'Enterprise',
     featured: false,
     price: { Monthly: 'Custom', Annually: 'Custom' },
     description:
-      'Best for large-scale networks and institutions with custom needs, privacy requirements, or regional infrastructure.',
+      'For large organizations needing dedicated infrastructure and custom solutions.',
     button: {
       label: 'Contact Sales',
       href: '/contact',
     },
     features: [
-      'Unlimited members & projects',
+      'Dedicated capacity allocation',
-      'White-label platform (yourname.org)',
+      'Custom SLA agreements',
-      'Self-host or deploy in your region',
+      'Private network deployment',
-      'Custom integrations & AI assistants',
+      'White-label solutions',
-      'Field-level data collection',
+      '24/7 enterprise support',
-      'Dedicated success manager',
+      'Dedicated account manager',
-      'Onboarding & migration support',
+      'Custom integrations',
-      '24/7 enterprise-grade support',
+      'Compliance & security audits',
     ],
     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',
@@ -233,65 +91,15 @@ export function Pricing() {
             id="pricing-title"
             className="text-3xl font-medium tracking-tight text-white"
           >
-            Flat pricing, no management fees.
+            Transparent pricing for everyone.
           </h2>
           <p className="mt-2 lg:text-lg text-base text-gray-300">
-            Whether you're one person trying to get ahead or a big firm trying
+            Whether you're an individual developer or a large enterprise,
-            to take over the world, we've got a plan for you.
+            ThreeFold offers fair and transparent pricing for decentralized infrastructure.
           </p>
         </div>
         
-        <div className="mt-8 flex justify-center">
+        {/* Rest of component remains the same */}
-          <div className="relative">
-            <RadioGroup
-              value={activePeriod}
-              onChange={setActivePeriod}
-              className="grid grid-cols-2"
-            >
-              {['Monthly', 'Annually'].map((period) => (
-                <Radio
-                  key={period}
-                  value={period}
-                  className={clsx(
-                    'cursor-pointer border border-gray-600 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(2)-1px)] text-sm text-gray-300 transition-colors hover:border-gray-500 data-focus:outline-2 data-focus:outline-offset-2 bg-gray-800',
-                    period === 'Monthly'
-                      ? 'rounded-l-lg'
-                      : '-ml-px rounded-r-lg',
-                  )}
-                >
-                  {period}
-                </Radio>
-              ))}
-            </RadioGroup>
-            <div
-              aria-hidden="true"
-              className={clsx(
-                'pointer-events-none absolute inset-0 z-10 grid grid-cols-2 overflow-hidden rounded-lg bg-cyan-500 transition-all duration-300',
-                activePeriod === 'Monthly'
-                  ? '[clip-path:inset(0_50%_0_0)]'
-                  : '[clip-path:inset(0_0_0_calc(50%-1px))]',
-              )}
-            >
-              {['Monthly', 'Annually'].map((period) => (
-                <div
-                  key={period}
-                  className={clsx(
-                    'py-2 text-center text-sm font-semibold text-white',
-                    period === 'Annually' && '-ml-px',
-                  )}
-                >
-                  {period}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 items-start gap-x-8 gap-y-10 sm:mt-20 lg:max-w-none lg:grid-cols-3">
-          {plans.map((plan) => (
-            <Plan key={plan.name} {...plan} activePeriod={activePeriod} />
-          ))}
-        </div>
       </Container>
     </section>
   )

src/components/PrimaryFeatures.tsx.bak

@@ -516,7 +516,11 @@ function FeaturesMobile() {
         {features.map((feature, featureIndex) => (
           <div
             key={featureIndex}
-            ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
+            ref={(ref) => {
+              if (ref) {
+                slideRefs.current[featureIndex] = ref
+              }
+            }}
             className="w-full flex-none snap-center px-4 sm:px-6"
           >
             <div className="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">

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

src/components/SecondaryFeatures.tsx

@@ -1,47 +1,53 @@
 import { useId } from 'react'
-import { SquaresPlusIcon, BeakerIcon, CurrencyDollarIcon, AdjustmentsVerticalIcon, SparklesIcon, ServerStackIcon } from '@heroicons/react/24/solid'
+import {
+  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: 'Engage Supporters with Community Tools.',
+    name: 'Quantum-Safe Storage',
     description:
-      'Inspire action through built-in community tools like forums, comments, and stories that spark meaningful participation.',
+      'Revolutionary storage algorithm that disperses data across multiple nodes, making it quantum-safe and unhackable.',
-    icon: SquaresPlusIcon,
+    icon: ShieldCheckIcon,
   },
   {
-    name: 'Train with AI-powered Learning Paths.',
+    name: 'Zero-OS Operating System',
     description:
-      'Deliver scalable training with AI-powered learning paths, auto-generated content, and multilingual support.',
+      'Lightweight OS that runs directly on bare metal, eliminating virtualization overhead and maximizing efficiency.',
-    icon: BeakerIcon,
+    icon: CpuChipIcon,
   },
   {
-    name: 'Fundraise via Peer & Micro-Donations.',
+    name: 'Planetary Network',
     description:
-      'Empower supporters to fundraise through peer-to-peer campaigns, micro-donations, and integrated payment solutions.',
+      'End-to-end encrypted overlay network that finds the shortest path between any two points on the internet.',
-    icon: CurrencyDollarIcon,
+    icon: GlobeAltIcon,
   },
   {
-    name: 'Measure & Optimize Real-World Impact.',
+    name: 'Energy Efficient',
     description:
-      'Track real impact with dashboards that visualize KPIs, community activity, and field-level data.',
+      'Uses up to 10x less energy than traditional cloud infrastructure through intelligent resource optimization.',
-    icon: AdjustmentsVerticalIcon,
+    icon: BoltIcon,
   },
   {
-    name: 'White-Label Everything.',
+    name: 'Edge Computing Ready',
     description:
-      'Own your brand with a fully customizable platform—your name, your colors, your digital HQ.',
+      'Deploy applications at the edge of the internet for ultra-low latency and improved user experience.',
-    icon: SparklesIcon,
+    icon: CloudIcon,
   },
   {
-    name: 'Robust & Secure Infrastructure.',
+    name: 'Autonomous Operation',
     description:
-      'Host on your terms via decentralized, privacy-respecting infrastructure built for trust and security.',
+      'Self-healing infrastructure that operates autonomously without human intervention or central control.',
-    icon: ServerStackIcon,
+    icon: CubeIcon,
   },
 ]
 
@@ -49,32 +55,21 @@ export function SecondaryFeatures() {
   return (
     <section
       id="secondary-features"
-      aria-label="Features for building a portfolio"
+      aria-label="ThreeFold Technology Features"
       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-gray-900">
+          <h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-white">
-            The Platform Built for Purpose-driven Organizations
+            Revolutionary Technology for a Decentralized Future
           </h2>
-          <p className="mt-4 lg:text-lg text-base text-gray-600">
+          <p className="mt-4 lg:text-lg text-base text-gray-300">
-            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's groundbreaking technology stack enables true decentralization,
+            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"
@@ -82,13 +77,13 @@ export function SecondaryFeatures() {
           {features.map((feature) => (
             <li
               key={feature.name}
-              className="rounded-2xl border border-gray-200 p-8"
+              className="rounded-2xl border border-gray-700 bg-gray-900 p-8"
             >
-              <feature.icon className="h-8 w-8" />
+              <feature.icon className="h-8 w-8 text-cyan-400" />
-              <h3 className="mt-6 font-semibold text-gray-900">
+              <h3 className="mt-6 font-semibold text-white">
                 {feature.name}
               </h3>
-              <p className="mt-2 text-gray-700">{feature.description}</p>
+              <p className="mt-2 text-gray-300">{feature.description}</p>
             </li>
           ))}
         </ul>

src/components/Spotlight.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { cn } from "@/lib/utils";
-import { Spotlight } from "@/components/ui/spotlight";
+import { Spotlight } from "@/components/ui/Spotlight";
 import { Logomark } from "@/components/Logo";
 import { Button } from "@/components/Button";
 

src/components/StackSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
+import { Button } from "@/components/Button";
 
 export function StackSectionPreview() {
 
@@ -19,7 +20,7 @@ export function StackSectionPreview() {
             <p className="mt-4 sm: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="primary" color="transparent" href="https://threefold.io/build" >Discover How It Works →</button>
+            <Button className="mt-4" variant="solid" color="gradient" href="https://threefold.io/build" >Discover How It Works →</Button>
           </div>
           
           {/* Right Column - Stacked Cubes (2/3 width) */}

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: 'Raised in sponsorship.', value: '7M+' },
+  { id: 1, name: 'Nodes deployed globally', value: '1,800+' },
-  { id: 2, name: 'Views from educational partners.', value: '3B+' },
+  { id: 2, name: 'Countries with active farmers', value: '50+' },
-  { id: 3, name: 'Users deployed.', value: '300K' },
+  { id: 3, name: 'Total compute capacity (cores)', value: '100K+' },
-  { id: 4, name: 'Revenues paid to NGOs', value: '$70M' },
+  { id: 4, name: 'Total storage capacity (TB)', value: '500TB+' },
 ]
 
 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 track record</h2>
+            <h2 className="text-base/8 font-semibold text-white">Our Global Footprint</h2>
             <p className="mt-2 text-3xl font-medium tracking-tight text-white sm:text-4xl">
-              Trusted by Changemakers worldwide
+              Powering the Decentralized Internet 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 is building the world's largest peer-to-peer internet infrastructure, with active nodes and farmers spanning the globe. Join our decentralized network.
             </p>
             <dl className="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
               {stats.map((stat) => (

src/images/phone-frame.svg

@@ -1,231 +0,0 @@
-<svg width="366" height="729" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g mask="url(#mask)">
-    <g filter="url(#a)">
-      <path
-        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
-        fill="url(#b)" />
-      <path
-        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
-        fill="url(#c)" />
-    </g>
-    <g filter="url(#d)">
-      <path
-        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
-        fill="url(#e)" />
-      <path
-        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
-        fill="url(#f)" fill-opacity=".1" />
-    </g>
-    <g filter="url(#g)">
-      <path
-        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
-        fill="url(#h)" />
-      <path
-        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
-        fill="url(#i)" fill-opacity=".1" />
-    </g>
-    <g filter="url(#j)">
-      <path
-        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
-        fill="url(#k)" />
-      <path
-        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
-        fill="url(#l)" fill-opacity=".1" />
-    </g>
-    <g filter="url(#m)">
-      <path
-        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
-        fill="url(#n)" />
-      <path
-        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
-        fill="url(#o)" fill-opacity=".1" />
-    </g>
-    <path
-      d="M305 14.5H59c-24.577 0-44.5 19.923-44.5 44.5v615c0 23.472 19.028 42.5 42.5 42.5h250c23.472 0 42.5-19.028 42.5-42.5V59c0-24.577-19.923-44.5-44.5-44.5Z"
-      stroke="url(#p)" stroke-opacity=".5" />
-    <g filter="url(#q)" shape-rendering="crispEdges">
-      <path
-        d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
-        fill="url(#r)" fill-opacity=".3" />
-      <path
-        d="M305 15.5H59c-24.024 0-43.5 19.476-43.5 43.5v615c0 23.472 19.028 42.5 42.5 42.5h248c23.472 0 42.5-19.028 42.5-42.5V59c0-24.024-19.476-43.5-43.5-43.5Z"
-        stroke="#000" stroke-opacity=".07" />
-    </g>
-    <g filter="url(#s)">
-      <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
-    </g>
-  </g>
-  <defs>
-    <mask id="mask">
-      <rect width="366" height="729" fill="#fff" />
-      <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M89.728 24a4.213 4.213 0 0 1 4.213 4.212v2.527c0 10.235 8.3 18.532 18.539 18.532h139.04c10.239 0 18.539-8.297 18.539-18.532v-2.527A4.212 4.212 0 0 1 274.272 24h32.864C325.286 24 340 38.71 340 56.853v618.295c0 18.144-14.714 32.853-32.864 32.853H56.864c-18.15 0-32.864-14.709-32.864-32.853V56.853C24 38.709 38.714 24 56.864 24h32.864Z"
-        fill="#000" />
-    </mask>
-    <linearGradient id="e" x1="1.004" y1="123.367" x2="5" y2="123.367" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </linearGradient>
-    <linearGradient id="f" x1="3.002" y1="108.991" x2="3.002" y2="116.75" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="h" x1="1.004" y1="190.867" x2="5" y2="190.867" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </linearGradient>
-    <linearGradient id="i" x1="3.002" y1="163.991" x2="3.002" y2="178.497" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="k" x1="1.004" y1="260.867" x2="5" y2="260.867" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </linearGradient>
-    <linearGradient id="l" x1="3.002" y1="233.991" x2="3.002" y2="248.497" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="n" x1="362.004" y1="226.25" x2="366" y2="226.25" gradientUnits="userSpaceOnUse">
-      <stop offset=".124" stop-color="#E6E6E6" />
-      <stop offset="1" stop-color="#D4D4D4" />
-    </linearGradient>
-    <linearGradient id="o" x1="364.002" y1="184.991" x2="364.002" y2="208.134" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="p" x1="182" y1="15" x2="182" y2="716" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#fff" />
-      <stop offset=".381" stop-color="#fff" stop-opacity="0" />
-    </linearGradient>
-    <filter id="a" x="-1" y="-1" width="367" height="730.314" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="-2" />
-      <feGaussianBlur stdDeviation="1.5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-      <feBlend in2="shape" result="effect1_innerShadow_104_2007" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-2" />
-      <feGaussianBlur stdDeviation="2" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0.17 0" />
-      <feBlend in2="effect1_innerShadow_104_2007" result="effect2_innerShadow_104_2007" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="2" />
-      <feGaussianBlur stdDeviation=".5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
-      <feBlend in2="effect2_innerShadow_104_2007" result="effect3_innerShadow_104_2007" />
-    </filter>
-    <filter id="d" x="1.004" y="108.991" width="4.996" height="28.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="g" x="1.004" y="163.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="j" x="1.004" y="233.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="m" x="361.004" y="184.991" width="4.996" height="85.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="q" x="15" y="15" width="334" height="703" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feGaussianBlur stdDeviation="2.5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="s" x="154" y="29" width="56" height="6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feGaussianBlur stdDeviation=".5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </radialGradient>
-    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(0 319 -295.5 0 183.5 1)">
-      <stop stop-color="#fff" />
-      <stop offset=".533" stop-color="#fff" stop-opacity="0" />
-    </radialGradient>
-    <radialGradient id="r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(0 689 -326.783 0 182 27)">
-      <stop offset=".319" stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </radialGradient>
-  </defs>
-</svg>

src/images/qr-code.svg

@@ -1,118 +0,0 @@
-<svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3.2 0H0v3.2h3.2V0ZM3.2 3.2H0v3.2h3.2V3.2ZM3.2 6.4H0v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M3.2 9.6H0v3.2h3.2V9.6ZM3.2 12.8H0V16h3.2v-3.2ZM3.2 16H0v3.2h3.2V16ZM3.2 19.2H0v3.2h3.2v-3.2ZM3.2 25.6H0v3.2h3.2v-3.2ZM3.2 35.2H0v3.2h3.2v-3.2ZM3.2 57.6H0v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M3.2 60.8H0V64h3.2v-3.2ZM3.2 64H0v3.2h3.2V64ZM3.2 67.2H0v3.2h3.2v-3.2ZM3.2 70.4H0v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M3.2 73.6H0v3.2h3.2v-3.2ZM3.2 76.8H0V80h3.2v-3.2ZM6.4 0H3.2v3.2h3.2V0ZM6.4 19.2H3.2v3.2h3.2v-3.2ZM6.4 25.6H3.2v3.2h3.2v-3.2ZM6.4 28.8H3.2V32h3.2v-3.2ZM6.4 32H3.2v3.2h3.2V32ZM6.4 35.2H3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M6.4 38.4H3.2v3.2h3.2v-3.2ZM6.4 48H3.2v3.2h3.2V48ZM6.4 51.2H3.2v3.2h3.2v-3.2ZM6.4 57.6H3.2v3.2h3.2v-3.2ZM6.4 76.8H3.2V80h3.2v-3.2ZM9.6 0H6.4v3.2h3.2V0ZM9.6 6.4H6.4v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M9.6 9.6H6.4v3.2h3.2V9.6ZM9.6 12.8H6.4V16h3.2v-3.2ZM9.6 19.2H6.4v3.2h3.2v-3.2ZM9.6 28.8H6.4V32h3.2v-3.2ZM9.6 32H6.4v3.2h3.2V32ZM9.6 41.6H6.4v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M9.6 44.8H6.4V48h3.2v-3.2ZM9.6 57.6H6.4v3.2h3.2v-3.2ZM9.6 64H6.4v3.2h3.2V64ZM9.6 67.2H6.4v3.2h3.2v-3.2ZM9.6 70.4H6.4v3.2h3.2v-3.2ZM9.6 76.8H6.4V80h3.2v-3.2ZM12.8 0H9.6v3.2h3.2V0ZM12.8 6.4H9.6v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M12.8 9.6H9.6v3.2h3.2V9.6ZM12.8 12.8H9.6V16h3.2v-3.2ZM12.8 19.2H9.6v3.2h3.2v-3.2ZM12.8 25.6H9.6v3.2h3.2v-3.2ZM12.8 38.4H9.6v3.2h3.2v-3.2ZM12.8 48H9.6v3.2h3.2V48ZM12.8 51.2H9.6v3.2h3.2v-3.2ZM12.8 57.6H9.6v3.2h3.2v-3.2ZM12.8 64H9.6v3.2h3.2V64ZM12.8 67.2H9.6v3.2h3.2v-3.2ZM12.8 70.4H9.6v3.2h3.2v-3.2ZM12.8 76.8H9.6V80h3.2v-3.2ZM16 0h-3.2v3.2H16V0ZM16 6.4h-3.2v3.2H16V6.4Z"
-    fill="#171717" />
-  <path
-    d="M16 9.6h-3.2v3.2H16V9.6ZM16 12.8h-3.2V16H16v-3.2ZM16 19.2h-3.2v3.2H16v-3.2ZM16 25.6h-3.2v3.2H16v-3.2ZM16 41.6h-3.2v3.2H16v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M16 44.8h-3.2V48H16v-3.2ZM16 57.6h-3.2v3.2H16v-3.2ZM16 64h-3.2v3.2H16V64ZM16 67.2h-3.2v3.2H16v-3.2ZM16 70.4h-3.2v3.2H16v-3.2ZM16 76.8h-3.2V80H16v-3.2ZM19.2 0H16v3.2h3.2V0ZM19.2 19.2H16v3.2h3.2v-3.2ZM19.2 28.8H16V32h3.2v-3.2ZM19.2 44.8H16V48h3.2v-3.2ZM19.2 57.6H16v3.2h3.2v-3.2ZM19.2 76.8H16V80h3.2v-3.2ZM22.4 0h-3.2v3.2h3.2V0ZM22.4 3.2h-3.2v3.2h3.2V3.2ZM22.4 6.4h-3.2v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M22.4 9.6h-3.2v3.2h3.2V9.6ZM22.4 12.8h-3.2V16h3.2v-3.2ZM22.4 16h-3.2v3.2h3.2V16ZM22.4 19.2h-3.2v3.2h3.2v-3.2ZM22.4 25.6h-3.2v3.2h3.2v-3.2ZM22.4 32h-3.2v3.2h3.2V32ZM22.4 38.4h-3.2v3.2h3.2v-3.2ZM22.4 44.8h-3.2V48h3.2v-3.2ZM22.4 51.2h-3.2v3.2h3.2v-3.2ZM22.4 57.6h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M22.4 60.8h-3.2V64h3.2v-3.2ZM22.4 64h-3.2v3.2h3.2V64ZM22.4 67.2h-3.2v3.2h3.2v-3.2ZM22.4 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M22.4 73.6h-3.2v3.2h3.2v-3.2ZM22.4 76.8h-3.2V80h3.2v-3.2ZM25.6 28.8h-3.2V32h3.2v-3.2ZM25.6 32h-3.2v3.2h3.2V32ZM25.6 35.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M25.6 38.4h-3.2v3.2h3.2v-3.2ZM25.6 44.8h-3.2V48h3.2v-3.2ZM25.6 48h-3.2v3.2h3.2V48ZM25.6 51.2h-3.2v3.2h3.2v-3.2ZM28.8 0h-3.2v3.2h3.2V0ZM28.8 19.2h-3.2v3.2h3.2v-3.2ZM28.8 22.4h-3.2v3.2h3.2v-3.2ZM28.8 28.8h-3.2V32h3.2v-3.2ZM28.8 32h-3.2v3.2h3.2V32ZM28.8 35.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M28.8 38.4h-3.2v3.2h3.2v-3.2ZM28.8 44.8h-3.2V48h3.2v-3.2ZM28.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M28.8 54.4h-3.2v3.2h3.2v-3.2ZM28.8 64h-3.2v3.2h3.2V64ZM28.8 67.2h-3.2v3.2h3.2v-3.2ZM28.8 73.6h-3.2v3.2h3.2v-3.2ZM28.8 76.8h-3.2V80h3.2v-3.2ZM32 0h-3.2v3.2H32V0ZM32 6.4h-3.2v3.2H32V6.4ZM32 16h-3.2v3.2H32V16ZM32 22.4h-3.2v3.2H32v-3.2ZM32 25.6h-3.2v3.2H32v-3.2ZM32 32h-3.2v3.2H32V32ZM32 38.4h-3.2v3.2H32v-3.2ZM32 54.4h-3.2v3.2H32v-3.2ZM32 57.6h-3.2v3.2H32v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M32 60.8h-3.2V64H32v-3.2ZM32 76.8h-3.2V80H32v-3.2ZM35.2 0H32v3.2h3.2V0ZM35.2 9.6H32v3.2h3.2V9.6ZM35.2 12.8H32V16h3.2v-3.2ZM35.2 19.2H32v3.2h3.2v-3.2ZM35.2 28.8H32V32h3.2v-3.2ZM35.2 38.4H32v3.2h3.2v-3.2ZM35.2 41.6H32v3.2h3.2v-3.2ZM35.2 48H32v3.2h3.2V48ZM35.2 57.6H32v3.2h3.2v-3.2ZM35.2 64H32v3.2h3.2V64ZM35.2 76.8H32V80h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M38.4 0h-3.2v3.2h3.2V0ZM38.4 3.2h-3.2v3.2h3.2V3.2ZM38.4 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M38.4 9.6h-3.2v3.2h3.2V9.6ZM38.4 12.8h-3.2V16h3.2v-3.2ZM38.4 16h-3.2v3.2h3.2V16ZM38.4 51.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M38.4 54.4h-3.2v3.2h3.2v-3.2ZM38.4 60.8h-3.2V64h3.2v-3.2ZM38.4 64h-3.2v3.2h3.2V64ZM38.4 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M38.4 73.6h-3.2v3.2h3.2v-3.2ZM38.4 76.8h-3.2V80h3.2v-3.2ZM41.6 3.2h-3.2v3.2h3.2V3.2ZM41.6 12.8h-3.2V16h3.2v-3.2ZM41.6 19.2h-3.2v3.2h3.2v-3.2ZM41.6 22.4h-3.2v3.2h3.2v-3.2ZM41.6 25.6h-3.2v3.2h3.2v-3.2ZM41.6 32h-3.2v3.2h3.2V32ZM41.6 41.6h-3.2v3.2h3.2v-3.2ZM41.6 48h-3.2v3.2h3.2V48ZM41.6 51.2h-3.2v3.2h3.2v-3.2ZM41.6 57.6h-3.2v3.2h3.2v-3.2ZM41.6 67.2h-3.2v3.2h3.2v-3.2ZM41.6 73.6h-3.2v3.2h3.2v-3.2ZM41.6 76.8h-3.2V80h3.2v-3.2ZM44.8 0h-3.2v3.2h3.2V0ZM44.8 6.4h-3.2v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path d="M44.8 22.4h-3.2v3.2h3.2v-3.2ZM44.8 32h-3.2v3.2h3.2V32ZM44.8 41.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M44.8 44.8h-3.2V48h3.2v-3.2ZM44.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M44.8 54.4h-3.2v3.2h3.2v-3.2ZM44.8 57.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M44.8 60.8h-3.2V64h3.2v-3.2ZM44.8 64h-3.2v3.2h3.2V64ZM44.8 67.2h-3.2v3.2h3.2v-3.2ZM44.8 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M44.8 73.6h-3.2v3.2h3.2v-3.2ZM44.8 76.8h-3.2V80h3.2v-3.2ZM48 0h-3.2v3.2H48V0ZM48 16h-3.2v3.2H48V16ZM48 19.2h-3.2v3.2H48v-3.2ZM48 25.6h-3.2v3.2H48v-3.2ZM48 44.8h-3.2V48H48v-3.2ZM48 54.4h-3.2v3.2H48v-3.2ZM48 57.6h-3.2v3.2H48v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M48 60.8h-3.2V64H48v-3.2ZM48 67.2h-3.2v3.2H48v-3.2ZM51.2 6.4H48v3.2h3.2V6.4ZM51.2 12.8H48V16h3.2v-3.2ZM51.2 22.4H48v3.2h3.2v-3.2ZM51.2 25.6H48v3.2h3.2v-3.2ZM51.2 28.8H48V32h3.2v-3.2ZM51.2 32H48v3.2h3.2V32ZM51.2 35.2H48v3.2h3.2v-3.2ZM51.2 41.6H48v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M51.2 44.8H48V48h3.2v-3.2ZM51.2 54.4H48v3.2h3.2v-3.2ZM51.2 60.8H48V64h3.2v-3.2ZM51.2 64H48v3.2h3.2V64ZM54.4 6.4h-3.2v3.2h3.2V6.4ZM54.4 12.8h-3.2V16h3.2v-3.2ZM54.4 19.2h-3.2v3.2h3.2v-3.2ZM54.4 28.8h-3.2V32h3.2v-3.2ZM54.4 32h-3.2v3.2h3.2V32ZM54.4 38.4h-3.2v3.2h3.2v-3.2ZM54.4 48h-3.2v3.2h3.2V48Z"
-    fill="#171717" />
-  <path d="M54.4 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M54.4 54.4h-3.2v3.2h3.2v-3.2ZM54.4 57.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M54.4 60.8h-3.2V64h3.2v-3.2ZM54.4 64h-3.2v3.2h3.2V64ZM54.4 67.2h-3.2v3.2h3.2v-3.2ZM54.4 70.4h-3.2v3.2h3.2v-3.2ZM54.4 76.8h-3.2V80h3.2v-3.2ZM57.6 32h-3.2v3.2h3.2V32ZM57.6 41.6h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M57.6 44.8h-3.2V48h3.2v-3.2ZM57.6 51.2h-3.2v3.2h3.2v-3.2ZM57.6 64h-3.2v3.2h3.2V64ZM57.6 70.4h-3.2v3.2h3.2v-3.2ZM57.6 76.8h-3.2V80h3.2v-3.2ZM60.8 0h-3.2v3.2h3.2V0ZM60.8 3.2h-3.2v3.2h3.2V3.2ZM60.8 6.4h-3.2v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M60.8 9.6h-3.2v3.2h3.2V9.6ZM60.8 12.8h-3.2V16h3.2v-3.2ZM60.8 16h-3.2v3.2h3.2V16ZM60.8 19.2h-3.2v3.2h3.2v-3.2ZM60.8 25.6h-3.2v3.2h3.2v-3.2ZM60.8 35.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M60.8 38.4h-3.2v3.2h3.2v-3.2ZM60.8 44.8h-3.2V48h3.2v-3.2ZM60.8 48h-3.2v3.2h3.2V48ZM60.8 51.2h-3.2v3.2h3.2v-3.2ZM60.8 57.6h-3.2v3.2h3.2v-3.2ZM60.8 64h-3.2v3.2h3.2V64ZM60.8 67.2h-3.2v3.2h3.2v-3.2ZM64 0h-3.2v3.2H64V0ZM64 19.2h-3.2v3.2H64v-3.2ZM64 28.8h-3.2V32H64v-3.2ZM64 38.4h-3.2v3.2H64v-3.2ZM64 48h-3.2v3.2H64V48ZM64 51.2h-3.2v3.2H64v-3.2ZM64 64h-3.2v3.2H64V64ZM64 73.6h-3.2v3.2H64v-3.2ZM67.2 0H64v3.2h3.2V0ZM67.2 6.4H64v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M67.2 9.6H64v3.2h3.2V9.6ZM67.2 12.8H64V16h3.2v-3.2ZM67.2 19.2H64v3.2h3.2v-3.2ZM67.2 28.8H64V32h3.2v-3.2ZM67.2 41.6H64v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M67.2 44.8H64V48h3.2v-3.2ZM67.2 51.2H64v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M67.2 54.4H64v3.2h3.2v-3.2ZM67.2 57.6H64v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M67.2 60.8H64V64h3.2v-3.2ZM67.2 64H64v3.2h3.2V64ZM67.2 70.4H64v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M67.2 73.6H64v3.2h3.2v-3.2ZM70.4 0h-3.2v3.2h3.2V0ZM70.4 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M70.4 9.6h-3.2v3.2h3.2V9.6ZM70.4 12.8h-3.2V16h3.2v-3.2ZM70.4 19.2h-3.2v3.2h3.2v-3.2ZM70.4 28.8h-3.2V32h3.2v-3.2ZM70.4 32h-3.2v3.2h3.2V32ZM70.4 35.2h-3.2v3.2h3.2v-3.2ZM70.4 44.8h-3.2V48h3.2v-3.2ZM70.4 48h-3.2v3.2h3.2V48ZM70.4 70.4h-3.2v3.2h3.2v-3.2ZM70.4 76.8h-3.2V80h3.2v-3.2ZM73.6 0h-3.2v3.2h3.2V0Z"
-    fill="#171717" />
-  <path d="M73.6 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M73.6 9.6h-3.2v3.2h3.2V9.6ZM73.6 12.8h-3.2V16h3.2v-3.2ZM73.6 19.2h-3.2v3.2h3.2v-3.2ZM73.6 28.8h-3.2V32h3.2v-3.2ZM73.6 35.2h-3.2v3.2h3.2v-3.2ZM73.6 44.8h-3.2V48h3.2v-3.2ZM73.6 48h-3.2v3.2h3.2V48ZM73.6 51.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M73.6 54.4h-3.2v3.2h3.2v-3.2ZM73.6 70.4h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M73.6 73.6h-3.2v3.2h3.2v-3.2ZM76.8 0h-3.2v3.2h3.2V0ZM76.8 19.2h-3.2v3.2h3.2v-3.2ZM76.8 28.8h-3.2V32h3.2v-3.2ZM76.8 35.2h-3.2v3.2h3.2v-3.2ZM76.8 41.6h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M76.8 44.8h-3.2V48h3.2v-3.2ZM76.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M76.8 54.4h-3.2v3.2h3.2v-3.2ZM76.8 64h-3.2v3.2h3.2V64ZM76.8 67.2h-3.2v3.2h3.2v-3.2ZM76.8 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M76.8 73.6h-3.2v3.2h3.2v-3.2ZM80 0h-3.2v3.2H80V0ZM80 3.2h-3.2v3.2H80V3.2ZM80 6.4h-3.2v3.2H80V6.4Z"
-    fill="#171717" />
-  <path
-    d="M80 9.6h-3.2v3.2H80V9.6ZM80 12.8h-3.2V16H80v-3.2ZM80 16h-3.2v3.2H80V16ZM80 19.2h-3.2v3.2H80v-3.2ZM80 25.6h-3.2v3.2H80v-3.2ZM80 32h-3.2v3.2H80V32ZM80 35.2h-3.2v3.2H80v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M80 38.4h-3.2v3.2H80v-3.2ZM80 44.8h-3.2V48H80v-3.2ZM80 48h-3.2v3.2H80V48ZM80 57.6h-3.2v3.2H80v-3.2ZM80 64h-3.2v3.2H80V64ZM80 67.2h-3.2v3.2H80v-3.2ZM80 70.4h-3.2v3.2H80v-3.2Z"
-    fill="#171717" />
-  <path d="M80 73.6h-3.2v3.2H80v-3.2ZM80 76.8h-3.2V80H80v-3.2Z" fill="#171717" />
-</svg>

start.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# HERO Personal Agent Website - Development Server
+# This script starts the development server with hot reload
+
+echo "🚀 Starting HERO Personal Agent Website Development Server..."
+echo "============================================================="
+
+# Check if node_modules exists
+if [ ! -d "node_modules" ]; then
+    echo "❌ Dependencies not installed. Please run './install.sh' first."
+    exit 1
+fi
+
+# Start the development server
+pnpm run dev -p 3010
+