...

2025-07-30 12:23:43 +02:00 · 2025-07-30 10:34:56 +02:00 · 2025-07-30 10:30:59 +02:00 · 2025-07-25 11:28:58 +02:00 · 2025-07-25 11:19:11 +02:00 · 2025-07-25 10:53:57 +02:00
40 changed files with 1129 additions and 1197 deletions
--- a/build.sh
+++ b/build.sh
@@ -1,3 +1,17 @@
 #!/bin/bash
+
 cd "$(dirname "$0")"
-pnpm run build
+
+PREFIX="threefoldgalaxy"
+
+# echo "Building without prefix"
+# export VITE_APP_BASE_URL=""
+# pnpm run build
+# rsync -avz --delete dist/ "root@threefold.info:/root/hero/www/info/$PREFIX/"
+
+echo "Building with prefix: /$PREFIX/"
+export VITE_APP_BASE_URL="/$PREFIX/"
+pnpm run build
+rsync -rav --delete dist/ "${HOME}/hero/var/www/$PREFIX/"
+rsync -avz --delete dist/ "root@threefold.info:/root/hero/www/info/$PREFIX/"
+
--- a/fix_dark_light.md
+++ b/fix_dark_light.md
@@ -0,0 +1,380 @@
+# Dark/Light Mode Implementation Analysis
+
+## Current Implementation Analysis
+
+After analyzing all components and files in the codebase, I've identified several inconsistencies and issues with the current dark/light mode implementation. Here's a detailed breakdown:
+
+## instructions.md
+
+```markdown
+# Dark/Light Mode Implementation Instructions
+
+## Overview
+This document provides comprehensive instructions for implementing consistent dark/light mode across the ThreeFold Galaxy website.
+
+## Theme Management Strategy
+
+### 1. Theme Storage and Application
+- **Storage**: Use `localStorage` with key `'theme'`
+- **DOM Application**: Apply theme via `data-theme` attribute on `<html>` element
+- **Method**: `document.documentElement.setAttribute('data-theme', theme)`
+- **Default**: `'light'` theme as fallback
+
+### 2. CSS Custom Properties Structure
+
+#### Root Variables (Light Theme)
+```css
+:root {
+  /* Core colors */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  
+  /* Brand colors */
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  
+  /* UI states */
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  
+  /* Borders and inputs */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+```
+
+#### Dark Theme Override
+```css
+html[data-theme='dark'] {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  /* ... other dark theme values */
+}
+```
+
+### 3. Component Implementation Rules
+
+#### Required CSS Classes for All Components
+- **Backgrounds**: Use `bg-background`, `bg-card`, `bg-popover`
+- **Text**: Use `text-foreground`, `text-muted-foreground`, `text-card-foreground`
+- **Borders**: Use `border-border`
+- **Interactive elements**: Use appropriate semantic color variables
+
+#### Forbidden Patterns
+- ❌ Hardcoded Tailwind colors (e.g., `bg-white`, `text-black`, `bg-slate-900`)
+- ❌ Manual dark: variants (e.g., `bg-white dark:bg-slate-900`)
+- ❌ Inline styles with fixed colors
+- ❌ Direct color values in className
+
+#### Required Patterns
+- ✅ Semantic color variables (e.g., `bg-background`, `text-foreground`)
+- ✅ Component-specific variables (e.g., `text-card-foreground` for card content)
+- ✅ State-aware colors (e.g., `text-muted-foreground` for secondary text)
+
+### 4. Component-Specific Guidelines
+
+#### Navigation Component
+```jsx
+// Required classes
+className="bg-background border-border text-foreground"
+```
+
+#### Card Components
+```jsx
+// Card container
+className="bg-card text-card-foreground border-border"
+// Card content
+className="text-muted-foreground" // for secondary text
+```
+
+#### Button Components
+```jsx
+// Primary button
+className="bg-primary text-primary-foreground hover:bg-primary/90"
+// Secondary button
+className="bg-secondary text-secondary-foreground"
+```
+
+#### Form Elements
+```jsx
+// Input fields
+className="border-border bg-background text-foreground"
+// Labels
+className="text-foreground"
+```
+
+#### Tables
+```jsx
+// Table headers
+className="bg-primary text-primary-foreground"
+// Table rows
+className="border-border"
+// Table cells
+className="text-foreground"
+```
+
+### 5. ThemeToggle Component Requirements
+
+#### Implementation Pattern
+```jsx
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="bg-background text-foreground border-border"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+};
+```
+
+### 6. File-Specific Requirements
+
+#### App.jsx
+- No theme-specific logic required
+- Ensure proper component structure
+
+#### All Page Components
+- Must use `bg-background text-foreground` as base classes
+- All sections should use semantic color variables
+- No hardcoded colors
+
+#### UI Components (/components/ui/*)
+- Must be theme-agnostic
+- Use only semantic color variables
+- Follow shadcn/ui patterns for theme support
+
+### 7. Testing Requirements
+
+#### Visual Testing Checklist
+- [ ] All text is readable in both themes
+- [ ] All backgrounds respond to theme changes
+- [ ] Borders and inputs are visible in both themes
+- [ ] Interactive elements (buttons, links) are properly styled
+- [ ] No color contrast issues in either theme
+
+#### Technical Testing Checklist
+- [ ] Theme persists across page reloads
+- [ ] Theme toggle works from any page
+- [ ] No console errors related to theme switching
+- [ ] All components respect theme variables
+
+### 8. Maintenance Guidelines
+
+#### When Adding New Components
+1. Always use semantic color variables
+2. Test in both light and dark themes
+3. Avoid hardcoded colors
+4. Follow existing component patterns
+
+#### When Modifying Existing Components
+1. Replace hardcoded colors with semantic variables
+2. Remove manual dark: variants
+3. Test theme switching functionality
+4. Ensure accessibility standards are met
+
+## Implementation Priority
+
+### Phase 1: Core Infrastructure
+1. Fix ThemeToggle component (data-theme vs class)
+2. Consolidate CSS custom properties
+3. Update base App styles
+
+### Phase 2: Component Updates
+1. Update Navigation component
+2. Fix all page components (Home, Products, Technology, etc.)
+3. Update UI components
+
+### Phase 3: Content Components
+1. Fix Blog and BlogPost components
+2. Update form components
+3. Fix table styling
+
+### Phase 4: Validation
+1. Test all pages in both themes
+2. Verify localStorage persistence
+3. Check accessibility compliance
+```
+
+## Current Issues and Required Fixes
+
+### Critical Issues
+
+1. **Theme Application Inconsistency**
+   - **Location**: `src/components/ThemeToggle.jsx`
+   - **Issue**: Uses `classList.toggle('dark')` but CSS expects `data-theme` attribute
+   - **Fix**: Change to `document.documentElement.setAttribute('data-theme', theme)`
+
+2. **CSS Custom Properties Conflicts**
+   - **Location**: `src/styles/App.css` and `src/styles/index.css`
+   - **Issue**: Duplicate theme definitions with different values
+   - **Fix**: Remove theme definitions from `index.css`, keep only in `App.css`
+
+### Component-Specific Issues
+
+#### Navigation.jsx
+- **Status**: ✅ Good implementation
+- **Uses**: Proper `dark:` variants and semantic classes
+
+#### Home.jsx
+- **Status**: ✅ Mostly good
+- **Uses**: Theme variables properly
+
+#### TierSHPage.jsx
+- **Issues**: 
+  - Line with hardcoded blue: `text-blue-600` should be `text-primary`
+  - Table headers use hardcoded `bg-blue-600`
+- **Fixes Needed**: Replace hardcoded colors with semantic variables
+
+#### ProductsPage.jsx
+- **Issues**:
+  - Table header: `bg-primary text-primary-foreground` (good)
+  - Some hardcoded `text-blue-600` instances
+- **Fixes Needed**: Replace blue colors with primary variables
+
+#### TechnologyPage.jsx
+- **Issues**:
+  - Multiple hardcoded colors: `text-blue-600`, `text-green-600`, `text-purple-600`
+  - Table styling has hardcoded `bg-primary text-primary-foreground`
+- **Fixes Needed**: Use appropriate semantic color variables
+
+#### RegisterPage.jsx
+- **Issues**:
+  - Hardcoded colors in cards and badges
+  - Some `bg-blue-600` instances
+- **Fixes Needed**: Replace with semantic variables
+
+#### Blog.jsx and BlogPost.jsx
+- **Issues**:
+  - Hardcoded `text-blue-600` for links
+  - Some prose styling with hardcoded colors
+- **Fixes Needed**: Use `text-primary` for links
+
+#### BecomeMember.jsx
+- **Issues**:
+  - Multiple hardcoded blue colors
+  - Form styling needs theme variables
+- **Fixes Needed**: Replace all hardcoded colors
+
+### AI Agent Fix Instructions
+
+```markdown
+# AI Agent Fix Instructions for Dark/Light Mode
+
+## Task 1: Fix ThemeToggle Component
+**File**: `src/components/ThemeToggle.jsx`
+**Action**: 
+- Change `document.documentElement.classList.toggle('dark', theme === 'dark')` 
+- To: `document.documentElement.setAttribute('data-theme', theme)`
+- Update button classes to use `bg-background text-foreground border-border`
+
+## Task 2: Consolidate CSS
+**File**: `src/styles/index.css`
+**Action**: Remove all CSS custom property definitions (keep only Tailwind imports)
+
+## Task 3: Fix Hardcoded Colors - Replace the Following Patterns:
+
+### Blue Colors
+- `text-blue-600` → `text-primary`
+- `bg-blue-600` → `bg-primary`
+- `hover:bg-blue-700` → `hover:bg-primary/90`
+- `border-blue-600` → `border-primary`
+
+### Green Colors
+- `text-green-600` → `text-emerald-600` (or create --success variable)
+- Keep green for success states, but use consistent shade
+
+### Other Colors
+- `text-slate-900` → `text-foreground`
+- `bg-white` → `bg-background`
+- `bg-slate-900` → `bg-background`
+- `text-slate-600` → `text-muted-foreground`
+
+### Specific Component Fixes:
+
+#### Tables (Multiple files)
+Replace:
+```jsx
+<tr className="bg-blue-600 text-white">
+```
+With:
+```jsx
+<tr className="bg-primary text-primary-foreground">
+```
+
+#### Cards
+Replace:
+```jsx
+<Card className="border-blue-200">
+```
+With:
+```jsx
+<Card className="border-border bg-card text-card-foreground">
+```
+
+#### Badges
+Replace:
+```jsx
+<Badge className="bg-blue-100 text-blue-800">
+```
+With:
+```jsx
+<Badge className="bg-primary/10 text-primary">
+```
+
+## Task 4: Update Navigation Component
+**File**: `src/components/Navigation.jsx`
+**Action**: Replace manual dark variants with semantic variables
+- Change `bg-white dark:bg-slate-900` → `bg-background`
+- Change `text-slate-900 dark:text-white` → `text-foreground`
+
+## Task 5: Fix Form Components
+**Files**: All files with form elements
+**Action**: Replace hardcoded input styling:
+- `border-input bg-background text-foreground` for inputs
+- `text-foreground` for labels
+- `text-muted-foreground` for help text
+
+## Task 6: Test Each Change
+After each component fix:
+1. Verify theme toggle works
+2. Check both light and dark modes
+3. Ensure no hardcoded colors remain
+4. Validate accessibility
+```
+
+### Summary of Files Requiring Changes
+
+1. **Critical**: `ThemeToggle.jsx` - Fix theme application method
+2. **Critical**: `index.css` - Remove duplicate theme definitions
+3. **High**: `TierSHPage.jsx` - Multiple hardcoded colors
+4. **High**: `ProductsPage.jsx` - Table and color fixes
+5. **High**: `TechnologyPage.jsx` - Extensive color replacements needed
+6. **Medium**: `RegisterPage.jsx` - Form and card color fixes
+7. **Medium**: `Blog.jsx` & `BlogPost.jsx` - Link color fixes
+8. **Medium**: `BecomeMember.jsx` - Form styling updates
+9. **Low**: `Navigation.jsx` - Minor optimizations (already mostly correct)
+
+The implementation should follow the semantic color system defined in `App.css` and ensure all components are theme-agnostic by using CSS custom properties instead of hardcoded colors.
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ThreeFold Galaxy Coop - Building the New Internet Together</title>
  </head>
-  <body>
+  <body class="bg-background text-foreground">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,9 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { HashRouter as Router, Routes, Route } from 'react-router-dom'
 import Navigation from './components/Navigation.jsx'
 import navigationData from './config/navigation.json'

 // Dynamically import components
-import NewHome from './components/NewHome.jsx'
+import Home from './components/Home.jsx'
 import TierSHPage from './components/TierSHPage.jsx'
 import ProductsPage from './components/ProductsPage.jsx'
 import TechnologyPage from './components/TechnologyPage.jsx'
@@ -12,7 +12,7 @@ import Blog from './components/Blog.jsx'
 import BlogPost from './components/BlogPost.jsx'

 const componentMap = {
-  NewHome,
+  Home,
  TierSHPage,
  ProductsPage,
  TechnologyPage,
@@ -25,9 +25,9 @@ function App() {
  return (
    <Router>
      <Navigation />
-      <main className="pt-16">
+      <main className="pt-16 bg-background text-foreground transition-colors duration-300">
        <Routes>
-          <Route path="/" element={<NewHome />} />
+          <Route path="/" element={<Home />} />
          <Route path="/tiers" element={<TierSHPage />} />
          {navigationData.map((item) => {
            const Component = componentMap[item.component]
--- a/src/assets/images/collaboration_hero.jpg
+++ b/src/assets/images/collaboration_hero.jpg
--- a/src/assets/images/collective_intelligence.png
+++ b/src/assets/images/collective_intelligence.png
--- a/src/assets/images/collective_intelligence_icon.png
+++ b/src/assets/images/collective_intelligence_icon.png
--- a/src/assets/images/digital_brain.jpg
+++ b/src/assets/images/digital_brain.jpg
--- a/src/assets/images/digital_cooperation.jpg
+++ b/src/assets/images/digital_cooperation.jpg
--- a/src/assets/images/digital_sovereignty_icon.png
+++ b/src/assets/images/digital_sovereignty_icon.png
--- a/src/assets/images/hero_architecture.png
+++ b/src/assets/images/hero_architecture.png
--- a/src/assets/images/hero_banner.png
+++ b/src/assets/images/hero_banner.png
--- a/src/assets/images/hero_concept.png
+++ b/src/assets/images/hero_concept.png
--- a/src/assets/images/holding_structure.png
+++ b/src/assets/images/holding_structure.png
--- a/src/assets/images/human_connection_icon.png
+++ b/src/assets/images/human_connection_icon.png
--- a/src/assets/images/network_connection.jpg
+++ b/src/assets/images/network_connection.jpg
--- a/src/assets/tier_s_h_compare.png
+++ b/src/assets/tier_s_h_compare.png
--- a/src/assets/tiers_2.png
+++ b/src/assets/tiers_2.png
--- a/src/components/BecomeMember.jsx
+++ b/src/components/BecomeMember.jsx
@@ -8,7 +8,6 @@ import { Checkbox } from '@/components/ui/checkbox.jsx'
 import { Badge } from '@/components/ui/badge.jsx'
 import { Globe, Mail, User, MessageSquare, CheckCircle, AlertCircle, DollarSign } from 'lucide-react'
 import { Link } from 'react-router-dom'
-import Navigation from './Navigation.jsx'
 import { loadStripe } from '@stripe/stripe-js'

 // Make sure to call `loadStripe` outside of a component’s render to avoid
@@ -166,18 +165,18 @@ function DirectBuy() {
            </CardHeader>
            <CardContent>
              {submitStatus === 'error' && (
-                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
-                  <AlertCircle className="h-5 w-5 text-red-600" />
+                <div className="mb-6 p-4 bg-destructive/10 border-destructive rounded-lg flex items-center gap-3">
+                  <AlertCircle className="h-5 w-5 text-destructive" />
                  <div>
-                    <h4 className="font-semibold text-red-800">Validation Error</h4>
-                    <p className="text-red-700">Please fill in all required fields and correct any errors.</p>
+                    <h4 className="font-semibold text-destructive-foreground">Validation Error</h4>
+                    <p className="text-destructive">Please fill in all required fields and correct any errors.</p>
                  </div>
                </div>
              )}
              <div className="space-y-6">
                {/* Personal Information */}
                <div className="space-y-4">
-                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+                  <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
                    <User className="h-5 w-5" />
                    Your Details
                  </h3>
@@ -222,11 +221,11 @@ function DirectBuy() {

                {/* Unique Name */}
                <div className="space-y-4">
-                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+                  <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
                    <Globe className="h-5 w-5" />
                    Choose Your Unique Name
                  </h3>
-                  <p className="text-sm text-slate-600">This will be your unique identifier (e.g., firstpart.secondpart). Each part must be 7 lowercase letters.</p>
+                  <p className="text-sm text-muted-foreground">This will be your unique identifier (e.g., firstpart.secondpart). Each part must be 7 lowercase letters.</p>
                  <div className="grid md:grid-cols-2 gap-4 items-end">
                    <div className="space-y-2">
                      <Label htmlFor="uniqueNamePart1">First Part *</Label>
@@ -240,7 +239,7 @@ function DirectBuy() {
                        }}
                        placeholder="at least 6 lowercase letters"
                        required
-                        className={uniqueNameError && formData.uniqueNamePart1 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart1 ? 'border-green-500' : ''}
+                        className={uniqueNameError && formData.uniqueNamePart1 ? 'border-destructive' : uniqueNameValid && formData.uniqueNamePart1 ? 'border-emerald-600' : ''}
                      />
                    </div>
                    <div className="space-y-2">
@@ -255,14 +254,14 @@ function DirectBuy() {
                        }}
                        placeholder="at least 6 lowercase letters"
                        required
-                        className={uniqueNameError && formData.uniqueNamePart2 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart2 ? 'border-green-500' : ''}
+                        className={uniqueNameError && formData.uniqueNamePart2 ? 'border-destructive' : uniqueNameValid && formData.uniqueNamePart2 ? 'border-emerald-600' : ''}
                      />
                    </div>
                  </div>
                  {uniqueNameError && <p className="text-red-500 text-sm">{uniqueNameError}</p>}
                </div>

-                <Button type="button" onClick={handleNext} className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3">
+                <Button type="button" onClick={handleNext} className="w-full bg-primary hover:bg-primary/90 text-lg py-3">
                  Next: About You & Preferences
                </Button>
              </div>
@@ -280,18 +279,18 @@ function DirectBuy() {
            </CardHeader>
            <CardContent>
              {submitStatus === 'error' && (
-                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
-                  <AlertCircle className="h-5 w-5 text-red-600" />
+                <div className="mb-6 p-4 bg-destructive/10 border-destructive rounded-lg flex items-center gap-3">
+                  <AlertCircle className="h-5 w-5 text-destructive" />
                  <div>
-                    <h4 className="font-semibold text-red-800">Validation Error</h4>
-                    <p className="text-red-700">Please fill in all required fields and agree to the terms.</p>
+                    <h4 className="font-semibold text-destructive-foreground">Validation Error</h4>
+                    <p className="text-destructive">Please fill in all required fields and agree to the terms.</p>
                  </div>
                </div>
              )}
              <div className="space-y-6">
                {/* Tell Us About Yourself (Optional) */}
                <div className="space-y-4">
-                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+                  <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    Tell Us About Yourself (Optional)
                  </h3>
@@ -332,7 +331,7 @@ function DirectBuy() {

                {/* Preferences */}
                <div className="space-y-4">
-                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+                  <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
                    <Mail className="h-5 w-5" />
                    Communication Preferences
                  </h3>
@@ -359,16 +358,16 @@ function DirectBuy() {
                      required
                    />
                    <Label htmlFor="terms" className="text-sm">
-                      I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms of Service</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link> for my ThreeFold Galaxy Coop membership. *
+                      I agree to the <Link to="/terms" className="text-primary hover:underline">Terms of Service</Link> and <Link to="/privacy" className="text-primary hover:underline">Privacy Policy</Link> for my ThreeFold Galaxy Coop membership. *
                    </Label>
                  </div>
                </div>

                <div className="flex justify-between gap-4">
-                  <Button type="button" onClick={handlePrev} className="w-1/2 bg-gray-300 hover:bg-gray-400 text-gray-800 text-lg py-3">
+                  <Button type="button" onClick={handlePrev} className="w-1/2 bg-muted text-muted-foreground hover:bg-muted/90 text-lg py-3">
                    Previous
                  </Button>
-                  <Button type="button" onClick={handleNext} className="w-1/2 bg-blue-600 hover:bg-blue-700 text-lg py-3">
+                  <Button type="button" onClick={handleNext} className="w-1/2 bg-primary hover:bg-primary/90 text-lg py-3">
                    Next: Payment
                  </Button>
                </div>
@@ -387,41 +386,41 @@ function DirectBuy() {
            </CardHeader>
            <CardContent>
              {submitStatus === 'success' && (
-                <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
-                  <CheckCircle className="h-5 w-5 text-green-600" />
+                <div className="mb-6 p-4 bg-emerald-50 border-emerald-200 rounded-lg flex items-center gap-3">
+                  <CheckCircle className="h-5 w-5 text-emerald-600" />
                  <div>
-                    <h4 className="font-semibold text-green-800">Purchase Initiated!</h4>
-                    <p className="text-green-700">Redirecting to secure Stripe checkout...</p>
+                    <h4 className="font-semibold text-emerald-800">Purchase Initiated!</h4>
+                    <p className="text-emerald-700">Redirecting to secure Stripe checkout...</p>
                  </div>
                </div>
              )}

              {submitStatus === 'error' && (
-                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
-                  <AlertCircle className="h-5 w-5 text-red-600" />
+                <div className="mb-6 p-4 bg-destructive/10 border-destructive rounded-lg flex items-center gap-3">
+                  <AlertCircle className="h-5 w-5 text-destructive" />
                  <div>
-                    <h4 className="font-semibold text-red-800">Purchase Failed</h4>
-                    <p className="text-red-700">There was an error processing your purchase. Please try again or contact support.</p>
+                    <h4 className="font-semibold text-destructive-foreground">Purchase Failed</h4>
+                    <p className="text-destructive">There was an error processing your purchase. Please try again or contact support.</p>
                  </div>
                </div>
              )}

              <div className="space-y-6">
-                <p className="text-md text-slate-700 text-center">
+                <p className="text-md text-foreground text-center">
                  You are about to purchase a membership to ThreeFold Galaxy Coop for <span className="font-bold">$20 USD per month</span>.
                </p>
-                <p className="text-sm text-slate-600 text-center">
+                <p className="text-sm text-muted-foreground text-center">
                  Click "Proceed to Payment" to be redirected to Stripe's secure checkout page.
                </p>

                <div className="flex justify-between gap-4">
-                  <Button type="button" onClick={handlePrev} className="w-1/2 bg-gray-300 hover:bg-gray-400 text-gray-800 text-lg py-3">
+                  <Button type="button" onClick={handlePrev} className="w-1/2 bg-muted text-muted-foreground hover:bg-muted/90 text-lg py-3">
                    Previous
                  </Button>
                  <Button
                    type="submit"
                    onClick={handleBuy}
-                    className="w-1/2 bg-green-600 hover:bg-green-700 text-lg py-3"
+                    className="w-1/2 bg-emerald-600 hover:bg-emerald-700 text-lg py-3"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? 'Processing...' : 'Proceed to Payment'}
@@ -437,18 +436,17 @@ function DirectBuy() {
  }

  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
+    <div className="min-h-screen bg-background">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}

      {/* Hero Section */}
-      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="py-24 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center space-y-8">
-          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Direct Purchase</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
-            Become A <span className="text-blue-600">Member</span>
+          <Badge className="bg-primary/10 text-primary hover:bg-blue-200">Direct Purchase</Badge>
+          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
+            Become A <span className="text-primary">Member</span>
          </h1>
-          <p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
+          <p className="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
            Join ThreeFold Galaxy Coop's sovereign digital freezone for $20 USD per month.
          </p>
        </div>
@@ -464,19 +462,19 @@ function DirectBuy() {
      </section>

      {/* What Happens Next */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens Next?</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">What Happens Next?</h2>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center">
              <CardHeader>
-                <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-white font-bold">1</span>
+                <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-primary-foreground font-bold">1</span>
                </div>
-                <CardTitle className="text-blue-600">Confirm Your Membership</CardTitle>
+                <CardTitle className="text-primary">Confirm Your Membership</CardTitle>
              </CardHeader>
              <CardContent>
                Complete your secure Stripe checkout to confirm your ThreeFold Galaxy Coop membership.
@@ -485,10 +483,10 @@ function DirectBuy() {
            
            <Card className="text-center">
              <CardHeader>
-                <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-white font-bold">2</span>
+                <div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-primary-foreground font-bold">2</span>
                </div>
-                <CardTitle className="text-green-600">Access Your Benefits</CardTitle>
+                <CardTitle className="text-emerald-600">Access Your Benefits</CardTitle>
              </CardHeader>
              <CardContent>
                Gain immediate access to member-exclusive content, tools, and community forums.
@@ -498,7 +496,7 @@ function DirectBuy() {
            <Card className="text-center">
              <CardHeader>
                <div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-white font-bold">3</span>
+                  <span className="text-primary-foreground font-bold">3</span>
                </div>
                <CardTitle className="text-purple-600">Engage & Govern</CardTitle>
              </CardHeader>
@@ -511,14 +509,14 @@ function DirectBuy() {
      </section>

      {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
+      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-primary-foreground">
        <div className="max-w-6xl mx-auto text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
+            <Globe className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">ThreeFold Galaxy Coop</span>
          </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy Coop. A cooperative for digital freedom.</p>
+          <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
+          <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy Coop. A cooperative for digital freedom.</p>
        </div>
      </footer>
    </div>
--- a/src/components/Blog.jsx
+++ b/src/components/Blog.jsx
@@ -46,8 +46,8 @@ function Blog() {
  return (
    <div className="container mx-auto px-4 py-12 max-w-5xl">
      <div className="text-center mb-12">        
-        <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">ThreeFold Galaxy Knowledgebase</h1>
-        <p className="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
+        <h1 className="text-5xl font-extrabold text-foreground leading-tight">ThreeFold Galaxy Knowledgebase</h1>
+        <p className="mt-4 text-xl text-muted-foreground max-w-2xl mx-auto">
          Whitepapers, Studies and Updates.
        </p>
      </div>
@@ -67,13 +67,13 @@ function Blog() {
        <input
          type="text"
          placeholder="Search articles..."
-          className="flex-grow w-full md:w-auto px-4 py-2 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow"
+          className="flex-grow w-full md:w-auto px-4 py-2 border border-input bg-background text-foreground rounded-full focus:ring-2 focus:ring-primary focus:border-primary transition-shadow"
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
        />
        <div className="relative w-full md:w-auto">
          <select
-            className="w-full appearance-none bg-white border border-gray-300 rounded-full px-4 py-2 pr-8 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow"
+            className="w-full appearance-none bg-background text-foreground border border-input rounded-full px-4 py-2 pr-8 focus:ring-2 focus:ring-primary focus:border-primary transition-shadow"
            value={selectedTag}
            onChange={e => setSelectedTag(e.target.value)}
          >
@@ -82,7 +82,7 @@ function Blog() {
              <option key={tag} value={tag}>{tag}</option>
            ))}
          </select>
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground">
            <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
@@ -94,25 +94,25 @@ function Blog() {
        ) : filteredPosts.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            {filteredPosts.map(post => (
-              <Link to={`/blog/${post.slug}`} key={post.slug} className="group block bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
+              <Link to={`/blog/${post.slug}`} key={post.slug} className="group block bg-card text-card-foreground rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
                {post.cover_image && (
                  <img src={post.cover_image} alt={post.title} className="w-full h-48 object-cover" />
                )}
                <div className="p-6">
                  <div className="flex items-center gap-2 mb-4">
                    {post.tags && post.tags.map(tag => (
-                      <span key={tag} className="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">
+                      <span key={tag} className="bg-primary/10 text-primary text-xs font-semibold px-3 py-1 rounded-full">
                        {tag}
                      </span>
                    ))}
                  </div>
-                  <h2 className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
+                  <h2 className="text-2xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
                    {post.title}
                  </h2>
-                  <p className="text-gray-500 text-sm mb-4">
+                  <p className="text-muted-foreground text-sm mb-4">
                    By {post.author} on {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
                  </p>
-                  <p className="text-gray-700 leading-relaxed">
+                  <p className="text-foreground leading-relaxed">
                    {post.summary && post.summary.length > 200 ? `${post.summary.substring(0, 200)}...` : post.summary}
                  </p>
                </div>
@@ -120,7 +120,7 @@ function Blog() {
            ))}
          </div>
        ) : (
-          <div className="text-center text-gray-500 py-16">
+          <div className="text-center text-muted-foreground py-16">
            <h2 className="text-2xl font-semibold mb-2">No posts found</h2>
            <p>Try adjusting your search or filters.</p>
          </div>
--- a/src/components/BlogPost.jsx
+++ b/src/components/BlogPost.jsx
@@ -34,21 +34,21 @@ function BlogPost() {
  }, [slug]);

  return (
-    <div className="bg-gray-50 py-12">
+    <div className="bg-background py-12">
      <div className="container mx-auto px-4">
-        <article className="max-w-5xl mx-auto bg-white rounded-lg shadow-xl p-8 md:p-12">
+        <article className="max-w-5xl mx-auto bg-card text-card-foreground rounded-lg shadow-xl p-8 md:p-12">
          <header className="text-center mb-8">
            <div className="flex justify-center items-center gap-2 mb-4">
              {postData.tags && postData.tags.map(tag => (
-                <span key={tag} className="bg-blue-100 text-blue-800 text-sm font-medium px-4 py-1 rounded-full">
+                <span key={tag} className="bg-primary/10 text-primary text-sm font-medium px-4 py-1 rounded-full">
                  {tag}
                </span>
              ))}
            </div>
-            <h1 className="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight">
+            <h1 className="text-3xl md:text-4xl font-extrabold text-foreground leading-tight">
              {postData.title}
            </h1>
-            <p className="mt-4 text-lg text-gray-500">
+            <p className="mt-4 text-lg text-muted-foreground">
              By {postData.author} on {postData.date ? new Date(postData.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'N/A'}
            </p>
          </header>
@@ -61,7 +61,7 @@ function BlogPost() {
            />
          )}

-          <div className="prose prose-lg max-w-none mx-auto text-gray-800 prose-headings:text-gray-900 prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-p:text-gray-700 prose-strong:text-gray-900 prose-img:rounded-lg prose-img:shadow-md">
+          <div className="prose prose-lg max-w-none mx-auto text-foreground prose-headings:text-foreground prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-p:text-muted-foreground prose-strong:text-foreground prose-img:rounded-lg prose-img:shadow-md dark:prose-invert">
            <ReactMarkdown
              remarkPlugins={[remarkGfm]}
              rehypePlugins={[rehypeRaw]}
@@ -75,46 +75,46 @@ function BlogPost() {
                  />
                ),
                h1: ({node, ...props}) => (
-                  <h1 className="text-3xl font-bold text-gray-900 mt-8 mb-4" {...props} />
+                  <h1 className="text-3xl font-bold text-foreground mt-8 mb-4" {...props} />
                ),
                h2: ({node, ...props}) => (
-                  <h2 className="text-2xl font-bold text-gray-900 mt-6 mb-3" {...props} />
+                  <h2 className="text-2xl font-bold text-foreground mt-6 mb-3" {...props} />
                ),
                h3: ({node, ...props}) => (
-                  <h3 className="text-xl font-semibold text-gray-900 mt-5 mb-2" {...props} />
+                  <h3 className="text-xl font-semibold text-foreground mt-5 mb-2" {...props} />
                ),
                h4: ({node, ...props}) => (
-                  <h4 className="text-lg font-semibold text-gray-900 mt-4 mb-2" {...props} />
+                  <h4 className="text-lg font-semibold text-foreground mt-4 mb-2" {...props} />
                ),
                p: ({node, ...props}) => (
-                  <p className="text-gray-700 leading-relaxed mb-4" {...props} />
+                  <p className="text-muted-foreground leading-relaxed mb-4" {...props} />
                ),
                strong: ({node, ...props}) => (
-                  <strong className="font-semibold text-gray-900" {...props} />
+                  <strong className="font-semibold text-foreground" {...props} />
                ),
                em: ({node, ...props}) => (
-                  <em className="italic text-gray-700" {...props} />
+                  <em className="italic text-muted-foreground" {...props} />
                ),
                ul: ({node, ...props}) => (
-                  <ul className="list-disc list-inside mb-4 text-gray-700" {...props} />
+                  <ul className="list-disc list-inside mb-4 text-muted-foreground" {...props} />
                ),
                ol: ({node, ...props}) => (
-                  <ol className="list-decimal list-inside mb-4 text-gray-700" {...props} />
+                  <ol className="list-decimal list-inside mb-4 text-muted-foreground" {...props} />
                ),
                li: ({node, ...props}) => (
                  <li className="mb-1" {...props} />
                ),
                blockquote: ({node, ...props}) => (
-                  <blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4" {...props} />
+                  <blockquote className="border-l-4 border-primary pl-4 italic text-muted-foreground my-4" {...props} />
                ),
                code: ({node, inline, ...props}) =>
                  inline ? (
-                    <code className="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm" {...props} />
+                    <code className="bg-muted text-muted-foreground px-1 py-0.5 rounded text-sm" {...props} />
                  ) : (
-                    <code className="block bg-gray-100 text-gray-800 p-4 rounded-lg text-sm overflow-x-auto" {...props} />
+                    <code className="block bg-muted text-muted-foreground p-4 rounded-lg text-sm overflow-x-auto" {...props} />
                  ),
                pre: ({node, ...props}) => (
-                  <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4" {...props} />
+                  <pre className="bg-muted p-4 rounded-lg overflow-x-auto my-4" {...props} />
                )
              }}
            >
@@ -123,7 +123,7 @@ function BlogPost() {
          </div>

          <footer className="mt-12 text-center">
-            <Link to="/blog" className="text-blue-600 hover:text-blue-800 font-semibold transition-colors">
+            <Link to="/blog" className="text-primary hover:text-primary/90 font-semibold transition-colors">
              &larr; Back to all posts
            </Link>
          </footer>
--- a/src/components/FinalStepForm.jsx
+++ b/src/components/FinalStepForm.jsx
@@ -10,9 +10,9 @@ import { CheckCircle, AlertCircle, ArrowRight, BookOpen } from 'lucide-react'

 function FinalStepForm({ formData, handleInputChange, handleSubmit, isSubmitting, submitStatus, formError }) {
  return (
-    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
      <div className="max-w-4xl mx-auto">
-        <Card className="bg-white shadow-xl">
+        <Card className="bg-card text-card-foreground shadow-xl">
          <CardHeader>
            <CardTitle className="text-2xl text-center">Additional Information & Terms</CardTitle>
            <CardDescription className="text-center text-lg">
@@ -22,21 +22,21 @@ function FinalStepForm({ formData, handleInputChange, handleSubmit, isSubmitting
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-8">
              {submitStatus === 'success' && (
-                <div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800">
+                <div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800 dark:bg-green-950 dark:border-green-700 dark:text-green-200">
                  <CheckCircle className="h-5 w-5" />
                  <span>Thank you! Your interest has been registered successfully. We'll be in touch soon.</span>
                </div>
              )}

              {submitStatus === 'error' && (
-                <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
+                <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 dark:bg-red-950 dark:border-red-700 dark:text-red-200">
                  <AlertCircle className="h-5 w-5" />
                  <span>{formError || 'There was an error registering your interest. Please ensure all required fields are filled and terms are agreed.'}</span>
                </div>
              )}

              <div className="space-y-6">
-                <h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
+                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
                  <BookOpen className="h-5 w-5 text-purple-600" />
                  Additional Information (Optional)
                </h3>
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Globe } from 'lucide-react';
+
+function Footer() {
+  return (
+    <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
+      <div className="max-w-6xl mx-auto text-center">
+        <div className="flex items-center justify-center space-x-2 mb-4">
+          <Globe className="h-6 w-6 text-primary" />
+          <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
+        </div>
+        <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,463 +1,32 @@
-import { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
-import { Button } from './ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
-import { Badge } from './ui/badge'
-import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
-import Navigation from './Navigation'
-
-// Import images
-import heroBanner from '../assets/images/hero_banner.png' // This image might need to be replaced with a relevant one for ThreeFold
-
-function Homepage() {
-  const [isVisible, setIsVisible] = useState(false)
-
-  useEffect(() => {
-    setIsVisible(true)
-  }, [])
-
-  const scrollToSection = (sectionId) => {
-    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
-  }
-
+import React from 'react';
+import Footer from './Footer.jsx';
+function Home() {
  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
-
-      {/* Hero Section */}
-      <section className={`pt-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-        <div className="max-w-6xl mx-auto">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            <div className="space-y-8">
-              <div className="space-y-4">
-                <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge>
-                <h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight">
-                  Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
-                </h1>
-                <p className="text-xl text-slate-600 leading-relaxed">
-                  ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control.
-                </p>
-              </div>
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px- py-3">
-                  <Link to="/register">Register Interest</Link>
-                </Button>
-                <Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
-                  Learn More About Products
-                </Button>
-              </div>
-              <p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p>
-            </div>
-            <div className="relative">
-              <img src={heroBanner} alt="ThreeFold Datacenter Illustration" className="w-full h-auto rounded-2xl shadow-2xl" />
-              <div className="absolute inset-0 bg-gradient-to-t from-blue-600/20 to-transparent rounded-2xl"></div>
-            </div>
-          </div>
+    <div className="min-h-screen bg-background flex flex-col">
+      <main className="flex-grow flex flex-col items-center justify-center text-center p-4 pt-24">
+        <div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
+          <video
+            src="https://5omqe7wpghgv44jg.public.blob.vercel-storage.com/assets/galaxy-full-bleed-Unq4IRYlPB88MNh37YNNMn4QZo18m4.mp4"
+            poster="https://cdn.sanity.io/images/jpb4ed5r/production/daef88d9c5c6dad2c2ad1198ec7ec35559e4251c-1920x1080.png"
+            aria-label="Looping video of Tenstorrent Galaxy Server rotating on gray background (no audio)"
+            className="w-full h-auto object-cover"
+            playsInline
+            autoPlay
+            muted
+            loop
+            preload="metadata"
+          ></video>
        </div>
-      </section>
-
-      {/* What Are Tier-S and Tier-H? */}
-      <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Are Tier-S and Tier-H Datacenters?</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
-              <CardHeader>
-                <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p>
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
-              <CardHeader>
-                <Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* From Real Estate to Digital Infrastructure */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">From Real Estate to Digital Infrastructure</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Your building can produce essential digital resources.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">AI Inference Power</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Host AI workloads and contribute to decentralized AI.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
-                <CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Monetize idle capacity and generate passive income.
-              </CardContent>
-            </Card>
-          </div>
-          <p className="text-center text-xl text-slate-600 mt-12">
-            Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
-          </p>
-        </div>
-      </section>
-
-      {/* Why Real Estate Developers Should Join */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Why Real Estate Developers Should Join</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Transform your properties into digital assets and unlock new revenue streams.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-blue-600">
-                  <DollarSign className="h-5 w-5" />
-                  Passive Digital Revenue
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Monetize idle compute, bandwidth, and storage capacity.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-green-600">
-                  <TrendingUp className="h-5 w-5" />
-                  Higher Property Value
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Market properties as cloud-enabled and future-proof.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-purple-600">
-                  <Zap className="h-5 w-5" />
-                  Green & Resilient
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                10x less energy vs traditional datacenters, resilient to outages.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-orange-600">
-                  <CheckCircle className="h-5 w-5" />
-                  Turnkey Deployment
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                No IT expertise required for installation and operation.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-teal-600">
-                  <Shield className="h-5 w-5" />
-                  Sovereign Cloud
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Data stays local and private, under your control.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-indigo-600">
-                  <Globe className="h-5 w-5" />
-                  Future-Proof
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Supports AI, Web3, digital twins, and modern applications.
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* Technical Advantages */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Revolutionary Technology</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Key differentiators that make ThreeFold superior to traditional infrastructure.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
-              <CardHeader>
-                <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Zero-OS</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Stateless, self-healing operating system for autonomous compute.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
-              <CardHeader>
-                <Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Unbreakable data protection with 10x efficiency through mathematical dispersion.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
-              <CardHeader>
-                <Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
-                <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Mesh networking that routes around failures, ensuring resilient connectivity.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-orange-200">
-              <CardHeader>
-                <Shield className="w-12 h-12 mx-auto mb-4 text-orange-600" />
-                <CardTitle className="text-orange-600">Smart Contract for IT</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Autonomous, cryptographically secured deployments for IT resources.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-teal-200">
-              <CardHeader>
-                <Brain className="w-12 h-12 mx-auto mb-4 text-teal-600" />
-                <CardTitle className="text-teal-600">Geo-Aware AI</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Private AI agents that respect boundaries and data sovereignty.
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* Real Cost Comparison */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dramatic Cost Savings</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
-              Experience significant cost advantages compared to traditional cloud providers.
-            </p>
-          </div>
-          <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
-              <thead>
-                <tr className="bg-blue-600 text-white">
-                  <th className="py-3 px-4 text-left">Service</th>
-                  <th className="py-3 px-4 text-left">ThreeFold</th>
-                  <th className="py-3 px-4 text-left">Other Providers</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-slate-200">
-                  <td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td>
-                  <td className="py-3 px-4 font-semibold">Less than $5/month</td>
-                  <td className="py-3 px-4">$12–$160/month</td>
-                </tr>
-                <tr>
-                  <td className="py-3 px-4">Compute (2 vCPU, 4GB RAM)</td>
-                  <td className="py-3 px-4 font-semibold">Less than $12/month</td>
-                  <td className="py-3 px-4">$20–$100/month</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
-            Up to 10x more energy efficient than traditional datacenters.
-          </p>
-        </div>
-      </section>
-
-      {/* Who It's For */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Clear target markets and use cases for ThreeFold's solutions.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-blue-600">
-                  <Shield className="h-5 w-5" />
-                  Governments
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Building sovereign AI and cloud infrastructure.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-green-600">
-                  <Network className="h-5 w-5" />
-                  Telecoms and ISPs
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Deploying local compute grids and edge solutions.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-purple-600">
-                  <Users className="h-5 w-5" />
-                  Developers and Startups
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Seeking cloud independence and decentralized hosting.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-orange-600">
-                  <Brain className="h-5 w-5" />
-                  AI and Web3 Companies
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Hosting inference or full-stack decentralized applications.
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-teal-600">
-                  <Globe className="h-5 w-5" />
-                  Communities
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                Seeking plug-and-play digital resilience and local infrastructure.
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* Proven at Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-4xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Proven at Scale</h2>
-          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
-            ThreeFold's technology is already deployed globally and proven in production.
-          </p>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Our decentralized grid spans across the globe.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Massive computational power available on the grid.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Secure and transparent deployments managed by smart contracts.
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Reliable and robust infrastructure for your digital needs.
-              </CardContent>
-            </Card>
-          </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
-            View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a>
-          </p>
-        </div>
-      </section>
-
-      {/* Call to Action */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-green-600 text-white">
-        <div className="max-w-4xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2>
-          <p className="text-xl opacity-90 leading-relaxed">
-            The future of digital infrastructure starts with your building.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-slate-100 text-lg px-8 py-3">
-              <Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
-            </Button>
-            <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-blue-600 text-lg px-8 py-3">
-              <Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
-            </Button>
-          </div>
-          <p className="text-sm opacity-75">Join the most resilient, inclusive, and intelligent internet.</p>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
-        <div className="max-w-6xl mx-auto text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+        <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
+          The Future of Data Centers.
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-2xl">
+            Faster. Greener. Safer.
+        </p>
+      </main>
+      <Footer />
    </div>
-  )
+  );
 }

-export default Homepage
+export default Home;
--- a/src/components/InterestSpecificStep.jsx
+++ b/src/components/InterestSpecificStep.jsx
@@ -12,8 +12,8 @@ function InterestSpecificStep({ formData, handleInputChange }) {

    if (formData.interestCategory.includes('realEstateDeveloper')) {
      fields.push(
-        <div key="realEstateDeveloperFields" className="space-y-6 border-t pt-6 mt-6">
-          <h4 className="text-lg font-semibold text-slate-800">Real Estate Developer Specifics</h4>
+        <div key="realEstateDeveloperFields" className="space-y-6 border-t border-border pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-foreground">Real Estate Developer Specifics</h4>
          <div className="space-y-2">
            <Label htmlFor="propertyType">Property Type and Size</Label>
            <Input id="propertyType" placeholder="e.g., Residential, Commercial, Industrial; 1000 sq ft" value={formData.propertyType} onChange={(e) => handleInputChange('propertyType', e.target.value)} />
@@ -36,8 +36,8 @@ function InterestSpecificStep({ formData, handleInputChange }) {

    if (formData.interestCategory.includes('government')) {
      fields.push(
-        <div key="governmentFields" className="space-y-6 border-t pt-6 mt-6">
-          <h4 className="text-lg font-semibold text-slate-800">Government/Public Sector Specifics</h4>
+        <div key="governmentFields" className="space-y-6 border-t border-border pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-foreground">Government/Public Sector Specifics</h4>
          <div className="space-y-2">
            <Label htmlFor="jurisdiction">Jurisdiction and Regulatory Requirements</Label>
            <Input id="jurisdiction" placeholder="e.g., National, State, Local; Data sovereignty laws" value={formData.jurisdiction} onChange={(e) => handleInputChange('jurisdiction', e.target.value)} />
@@ -60,8 +60,8 @@ function InterestSpecificStep({ formData, handleInputChange }) {

    if (formData.interestCategory.includes('enterprise')) {
      fields.push(
-        <div key="enterpriseFields" className="space-y-6 border-t pt-6 mt-6">
-          <h4 className="text-lg font-semibold text-slate-800">Enterprise Customer Specifics</h4>
+        <div key="enterpriseFields" className="space-y-6 border-t border-border pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-foreground">Enterprise Customer Specifics</h4>
          <div className="space-y-2">
            <Label htmlFor="currentInfrastructure">Current Infrastructure and Pain Points</Label>
            <Textarea id="currentInfrastructure" placeholder="Describe your current cloud setup and challenges" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
@@ -84,8 +84,8 @@ function InterestSpecificStep({ formData, handleInputChange }) {

    if (formData.interestCategory.includes('telecom')) {
      fields.push(
-        <div key="telecomFields" className="space-y-6 border-t pt-6 mt-6">
-          <h4 className="text-lg font-semibold text-slate-800">Telecom/ISP Specifics</h4>
+        <div key="telecomFields" className="space-y-6 border-t border-border pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-foreground">Telecom/ISP Specifics</h4>
          <div className="space-y-2">
            <Label htmlFor="networkCoverage">Network Coverage and Infrastructure</Label>
            <Textarea id="networkCoverage" placeholder="Describe your existing network assets" value={formData.networkCoverage} onChange={(e) => handleInputChange('networkCoverage', e.target.value)} rows={3} />
@@ -108,13 +108,13 @@ function InterestSpecificStep({ formData, handleInputChange }) {

    if (formData.interestCategory.includes('investor')) {
      fields.push(
-        <div key="investorFields" className="space-y-6 border-t pt-6 mt-6">
-          <h4 className="text-lg font-semibold text-slate-800">Investor/Partner Specifics</h4>
+        <div key="investorFields" className="space-y-6 border-t border-border pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-foreground">Investor/Partner Specifics</h4>
          <div className="space-y-2">
            <Label htmlFor="investmentRange">Investment Range of Interest</Label>
            <select
              id="investmentRange"
-              className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              className="w-full p-3 border border-input bg-background text-foreground rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              value={formData.investmentRange}
              onChange={(e) => handleInputChange('investmentRange', e.target.value)}
            >
@@ -155,8 +155,8 @@ function InterestSpecificStep({ formData, handleInputChange }) {

    if (formData.interestCategory.includes('individual')) {
      fields.push(
-        <div key="individualFields" className="space-y-6 border-t pt-6 mt-6">
-          <h4 className="text-lg font-semibold text-slate-800">Individual/Community Specifics</h4>
+        <div key="individualFields" className="space-y-6 border-t border-border pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-foreground">Individual/Community Specifics</h4>
          <div className="space-y-2">
            <Label htmlFor="location">Location and Connectivity</Label>
            <Input id="location" placeholder="City, Country; Internet speed" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
@@ -165,7 +165,7 @@ function InterestSpecificStep({ formData, handleInputChange }) {
            <Label htmlFor="technicalComfortLevel">Technical Comfort Level</Label>
            <select
              id="technicalComfortLevel"
-              className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              className="w-full p-3 border border-input bg-background text-foreground rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              value={formData.technicalComfortLevel}
              onChange={(e) => handleInputChange('technicalComfortLevel', e.target.value)}
            >
@@ -191,9 +191,9 @@ function InterestSpecificStep({ formData, handleInputChange }) {
  }

  return (
-    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
      <div className="max-w-4xl mx-auto">
-        <Card className="bg-white shadow-xl">
+        <Card className="bg-card text-card-foreground shadow-xl">
          <CardHeader>
            <CardTitle className="text-2xl text-center">Specific Requirements for {formData.interestCategory.map(cat => cat.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())).join(', ')}</CardTitle>
            <CardDescription className="text-center text-lg">
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -1,23 +1,29 @@
+import { useState } from 'react'
 import { Button } from '@/components/ui/button.jsx'
-import { Globe } from 'lucide-react'
+import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet.jsx'
+import { Globe, Menu } from 'lucide-react'
 import { Link, useLocation } from 'react-router-dom'
 import navigationData from '../config/navigation.json'
+import ThemeToggle from './ThemeToggle.jsx'

 function Navigation() {
  const location = useLocation()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  
  const isActive = (path) => {
    return location.pathname === path
  }

  return (
-    <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-slate-200 z-50">
+    <nav className="fixed top-0 w-full bg-background border-b border-border z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <Link to="/" className="flex items-center space-x-2">
-            <Globe className="h-8 w-8 text-blue-600" />
-            <span className="text-xl font-bold text-slate-900">ThreeFold Galaxy</span>
+            <Globe className="h-8 w-8 text-primary" />
+            <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
          </Link>
+
+          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navigationData
              .filter(item => item.show !== false)
@@ -25,14 +31,51 @@ function Navigation() {
                <Link
                  key={item.path}
                  to={item.path}
-                  className={`transition-colors ${isActive(item.path) ? 'text-blue-600 font-medium' : 'text-slate-600 hover:text-blue-600'}`}
+                  className={`transition-colors ${isActive(item.path) ? 'text-primary font-medium' : 'text-muted-foreground hover:text-primary'}`}
                >
                  {item.label}
                </Link>
              ))}
-            <Button asChild className="bg-blue-600 hover:bg-blue-700">
+            <Button asChild className="bg-primary hover:bg-primary/90">
              <Link to="/register">Join Now</Link>
            </Button>
+            <ThemeToggle />
+          </div>
+
+          {/* Mobile Navigation */}
+          <div className="md:hidden">
+            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <Menu className="h-6 w-6" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="bg-background text-foreground sm:max-w-sm py-6">
+                <div className="flex flex-col items-center space-y-4 pt-6">
+                  {navigationData
+                    .filter(item => item.show !== false)
+                    .map((item) => (
+                      <SheetClose asChild key={item.path}>
+                        <Link
+                          to={item.path}
+                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-primary' : 'text-foreground hover:text-primary'}`}
+                          onClick={() => setIsMobileMenuOpen(false)}
+                        >
+                          {item.label}
+                        </Link>
+                      </SheetClose>
+                    ))}
+                  <SheetClose asChild>
+                    <Button asChild className="bg-primary hover:bg-primary/90">
+                      <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
+                    </Button>
+                  </SheetClose>
+                  <SheetClose asChild>
+                    <ThemeToggle />
+                  </SheetClose>
+                </div>
+              </SheetContent>
+            </Sheet>
          </div>
        </div>
      </div>
--- a/src/components/NewHome.jsx
+++ b/src/components/NewHome.jsx
@@ -1,39 +0,0 @@
-import React from 'react';
-import Navigation from './Navigation';
-
-function NewHome() {
-  return (
-    <div className="min-h-screen bg-gray-100 flex flex-col">
-      <Navigation />
-      <main className="flex-grow flex flex-col items-center justify-center text-center p-4">
-        <div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
-          <video
-            src="https://5omqe7wpghgv44jg.public.blob.vercel-storage.com/assets/galaxy-full-bleed-Unq4IRYlPB88MNh37YNNMn4QZo18m4.mp4"
-            poster="https://cdn.sanity.io/images/jpb4ed5r/production/daef88d9c5c6dad2c2ad1198ec7ec35559e4251c-1920x1080.png"
-            aria-label="Looping video of Tenstorrent Galaxy Server rotating on gray background (no audio)"
-            className="w-full h-auto object-cover"
-            playsInline
-            autoPlay
-            muted
-            loop
-            preload="metadata"
-          ></video>
-        </div>
-        <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
-          As ThreeFold Galaxy we deliver the future of Datacenters
-        </h1>
-        <p className="text-xl text-gray-600 max-w-2xl">
-          resulting in better performance, greener and more security.
-        </p>
-      </main>
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
-        <div className="max-w-6xl mx-auto text-center">
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
-    </div>
-  );
-}
-
-export default NewHome;
--- a/src/components/ProductsPage.jsx
+++ b/src/components/ProductsPage.jsx
@@ -1,142 +1,119 @@
 import { Link } from 'react-router-dom'
+import Footer from './Footer.jsx';
 import { Button } from './ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
 import { Badge } from './ui/badge'
-import { Cpu, Home, Shield, Network, DollarSign, CheckCircle, Users, Zap, TrendingUp, Layers, Scale, Globe } from 'lucide-react'
-import Navigation from './Navigation'
-
+import { Cpu, Home, Shield, Network, DollarSign, CheckCircle, Users, Zap, TrendingUp, Layers, Scale } from 'lucide-react'
 function ProductsPage() {
  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
-<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        <img src="https://tenstorrent.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fjpb4ed5r%2Fproduction%2F83293d04fb69b49d789f892f7d1ca53da7f250c3-4800x2520.png&w=3840&q=75" alt="Tenstorrent Product" className="w-full h-auto rounded-lg shadow-lg" />
+    <div className="min-h-screen bg-background">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
      </div>

      {/* Product Overview Hero */}
-      <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-5xl mx-auto text-center space-y-8">
-          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Solutions</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
-            Two Solutions, <span className="text-blue-600">Infinite Possibilities</span>
+          <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Solutions</Badge>
+          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
+            Two Solutions, <span className="text-primary">Infinite Possibilities</span>
          </h1>
-          <p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
+          <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
            ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack.
          </p>
        </div>
      </section>

      {/* Tier-H Datacenters: Residential & Office Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-H: Plug-and-Play Digital Infrastructure</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Perfect for homes, offices, and mixed-use buildings, offering edge computing and local AI processing.
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
+          {/* Left Column: Text Content */}
+          <div className="space-y-8">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Tier-H: Plug-and-Play Digital Infrastructure</h2>
+            <p className="text-xl text-muted-foreground">
+              A Tier-H datacenter is a decentralized, plug-and-play digital infrastructure solution designed for deployment in homes, offices, and mixed-use buildings. Unlike traditional, centralized datacenters, Tier-H units leverage existing physical spaces to host compute, storage, and networking capacity.
            </p>
-                                  <img src="/src/assets/tier_s_h_compare.png" alt="Tier S H Comparison" className="w-full h-auto rounded-lg shadow-lg mb-12" />
+            <p className="text-xl text-muted-foreground">
+              By integrating these nodes directly into buildings, we can provide distributed cloud and AI capacity closer to the edge, enabling faster processing, reduced latency, and enhanced data sovereignty. This approach transforms any building into a potential source of digital infrastructure, contributing to a more resilient, decentralized, and accessible global grid.
+            </p>
+            <h3 className="text-2xl font-bold text-primary">Perfect For:</h3>
+            <ul className="space-y-3 text-lg text-foreground">
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Homes, offices, and mixed-use buildings</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Edge computing and local AI processing</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Community networks and local services</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Development and testing environments</li>
+            </ul>
+            <h3 className="text-2xl font-bold text-primary">Technical Specifications:</h3>
+            <ul className="space-y-3 text-lg text-foreground">
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Full compute, storage, and networking capabilities</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Zero-touch deployment and maintenance</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Supports AI workloads, Web2/Web3 applications</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Compatible with Kubernetes and container platforms</li>
+            </ul>

          </div>
-          <div className="grid md:grid-cols-2 gap-8 items-center">
-            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Homes, offices, and mixed-use buildings</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Edge computing and local AI processing</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community networks and local services</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Development and testing environments</li>
-              </ul>
-            </div>
-            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Full compute, storage, and networking capabilities</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-touch deployment and maintenance</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Supports AI workloads, Web2/Web3 applications</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compatible with Kubernetes and container platforms</li>
-              </ul>
-            </div>
-          </div>
-          
-          <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Key Benefits:</h3>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Plug-and-play installation</CardTitle></CardHeader>
-                <CardContent>Easy setup, no technical expertise needed.</CardContent>
-              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-green-600">Zero maintenance required</CardTitle></CardHeader>
-                <CardContent>Autonomous operation, minimal human intervention.</CardContent>
-              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Generate passive income</CardTitle></CardHeader>
-                <CardContent>Monetize unused compute capacity.</CardContent>
-              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-orange-600">Local data sovereignty</CardTitle></CardHeader>
-                <CardContent>Data stays local and private, under your control.</CardContent>
-              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-teal-600">Resilient to internet outages</CardTitle></CardHeader>
-                <CardContent>Ensures continuity of local services.</CardContent>
-              </Card>
-            </div>
+          {/* Right Column: Image */}
+          <div className="flex justify-center items-center">
+            <img src="https://tenstorrent.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fjpb4ed5r%2Fproduction%2F176b1c0aeb6432b315442f64860fe20100e4ba09-1510x1645.jpg&w=3840&q=75" alt="Tier-H Datacenter" className="w-full h-auto rounded-lg shadow-lg" />
          </div>

        </div>
      </section>

      {/* Tier-S Datacenters: Industrial Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-S: Industrial-Grade Modular Datacenters</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-1 gap-12 items-start">
+          {/* Left Column: Text Content */}
+          <div className="space-y-8">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Tier-S: Industrial-Grade Modular Datacenters</h2>
+            <p className="text-xl text-muted-foreground">
              Comprehensive overview of the enterprise-grade solution for large-scale deployments.
            </p>
+          {/* Image */}
+          <div className="col-span-2">
+            <img src="/src/assets/tiers_2.png" alt="Tier-S Datacenter" className="w-full object-cover rounded-lg" />
          </div>
-          <div className="grid md:grid-cols-2 gap-8 items-center">
-            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Perfect For:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> AI training and inference at scale</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regional cloud service providers</li>
-              </ul>
-            </div>
-            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Technical Specifications:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Deployed in under six months</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cyberpandemic and disaster-resilient</li>
-              </ul>
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-2xl font-bold text-primary mb-4">Perfect For:</h3>
+                <ul className="space-y-3 text-lg text-foreground">
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Government digital infrastructure</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Telecom edge deployment</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Enterprise private clouds</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> AI training and inference at scale</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Regional cloud service providers</li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold text-primary mb-4">Technical Specifications:</h3>
+                <ul className="space-y-3 text-lg text-foreground">
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Modular container-based design</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Handle 1+ million transactions per second For Web4</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Support 100,000+ concurrent users per unit For Web 4</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Deployed in under six months</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Cyberpandemic and disaster-resilient</li>
+                </ul>
+              </div>
            </div>
          </div>
-<div className="mt-12 text-center">
-          </div>
-          <div className="mt-12 text-center">
+
+          {/* Key Benefits */}
+          <div className="mt-12 text-center col-span-2">
            <h3 className="text-2xl font-bold text-purple-600 mb-6">Key Benefits:</h3>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader>
+            <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-8">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Rapid deployment</CardTitle></CardHeader>
                <CardContent>Faster setup compared to traditional datacenters.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Complete sovereignty</CardTitle></CardHeader>
                <CardContent>Full control over data and operations.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-emerald-600">Scales horizontally</CardTitle></CardHeader>
                <CardContent>Unlimited scalability without bottlenecks.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
                <CardContent>Self-healing and resilient infrastructure.</CardContent>
              </Card>
@@ -146,70 +123,65 @@ function ProductsPage() {
      </section>

      {/* Technology Stack Comparison */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Shared Technology Foundation</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Shared Technology Foundation</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Both Tier-H and Tier-S solutions are built on the same revolutionary underlying technology stack.
            </p>
          </div>
          <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
+            <table className="min-w-full bg-card rounded-lg shadow-md">
              <thead>
-                <tr className="bg-blue-600 text-white">
+                <tr className="bg-primary text-primary-foreground">
                  <th className="py-3 px-4 text-left">Feature</th>
                  <th className="py-3 px-4 text-left">Tier-H</th>
                  <th className="py-3 px-4 text-left">Tier-S</th>
                </tr>
              </thead>
              <tbody>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Zero-OS</td>
                  <td className="py-3 px-4">✓</td>
                  <td className="py-3 px-4">✓</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Quantum-Safe Storage</td>
                  <td className="py-3 px-4">✓</td>
                  <td className="py-3 px-4">✓</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Mycelium Network</td>
                  <td className="py-3 px-4">✓</td>
                  <td className="py-3 px-4">✓</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Smart Contract for IT</td>
                  <td className="py-3 px-4">✓</td>
                  <td className="py-3 px-4">✓</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">AI/ML Support</td>
                  <td className="py-3 px-4">✓</td>
                  <td className="py-3 px-4">✓</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Kubernetes Compatible</td>
                  <td className="py-3 px-4">✓</td>
                  <td className="py-3 px-4">✓</td>
                </tr>
-                <tr className="border-b border-slate-200">
-                  <td className="py-3 px-4">Energy Efficiency</td>
-                  <td className="py-3 px-4">Ultra-High</td>
-                  <td className="py-3 px-4">High</td>
-                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Deployment Time</td>
-                  <td className="py-3 px-4">Minutes</td>
+                  <td className="py-3 px-4">Days</td>
                  <td className="py-3 px-4">Months</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Maintenance</td>
                  <td className="py-3 px-4">Zero-touch</td>
                  <td className="py-3 px-4">Minimal</td>
                </tr>
-                <tr>
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Scale</td>
                  <td className="py-3 px-4">Local/Edge</td>
                  <td className="py-3 px-4">Regional/Global</td>
@@ -221,21 +193,21 @@ function ProductsPage() {
      </section>

      {/* Use Case Matrix */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Choose Your Deployment Strategy</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Choose Your Deployment Strategy</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Clear mapping of products to specific use cases.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle>
+                <CardTitle className="text-emerald-600">Tier-H Ideal For:</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                  <li>Personal AI assistants and agents</li>
                  <li>Local file storage and backup</li>
                  <li>Home automation and IoT</li>
@@ -245,12 +217,12 @@ function ProductsPage() {
                </ul>
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-blue-600">Tier-S Ideal For:</CardTitle>
+                <CardTitle className="text-primary">Tier-S Ideal For:</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                  <li>National digital infrastructure</li>
                  <li>Regional cloud services</li>
                  <li>Large-scale AI training</li>
@@ -265,34 +237,34 @@ function ProductsPage() {
      </section>

      {/* Deployment Models */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Flexible Deployment Options</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Flexible Deployment Options</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Different ways to implement ThreeFold's solutions.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-blue-600">Single Node Deployment</CardTitle>
+                <CardTitle className="text-primary">Single Node Deployment</CardTitle>
              </CardHeader>
              <CardContent>
                Start with one Tier-H node. Perfect for testing and small applications. Scales by adding more nodes.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-green-600">Hybrid Deployment</CardTitle>
+                <CardTitle className="text-emerald-600">Hybrid Deployment</CardTitle>
              </CardHeader>
              <CardContent>
                Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-purple-600">Regional Grid</CardTitle>
+                <CardTitle className="text-primary">Regional Grid</CardTitle>
              </CardHeader>
              <CardContent>
                Multiple Tier-S datacenters. Geo-distributed for sovereignty. Enterprise-grade redundancy.
@@ -303,21 +275,21 @@ function ProductsPage() {
      </section>

      {/* Economic Model */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Investment and Returns</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Investment and Returns</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Revenue and cost structure for each product.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-blue-600">Tier-H Economics</CardTitle>
+                <CardTitle className="text-primary">Tier-H Economics</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                  <li>Low initial investment</li>
                  <li>Immediate revenue from spare capacity</li>
                  <li>ROI typically within 12-24 months</li>
@@ -325,12 +297,12 @@ function ProductsPage() {
                </ul>
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-purple-600">Tier-S Economics</CardTitle>
+                <CardTitle className="text-primary">Tier-S Economics</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                  <li>Higher initial investment</li>
                  <li>Enterprise-grade revenue potential</li>
                  <li>3x higher ROI compared to traditional datacenters</li>
@@ -342,98 +314,10 @@ function ProductsPage() {
        </div>
      </section>

-      {/* Support and Services */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Complete Support Ecosystem</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              What comes with each product offering.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-blue-600">Included with Every Deployment</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Technical documentation and training</li>
-                  <li>Community support forums</li>
-                  <li>Regular software updates</li>
-                  <li>Monitoring and analytics tools</li>
-                </ul>
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-green-600">Enterprise Services (Tier-S)</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Dedicated technical support</li>
-                  <li>Custom integration services</li>
-                  <li>SLA guarantees</li>
-                  <li>Professional consulting</li>
-                </ul>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>

-      {/* Getting Started */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Ready to Deploy?</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Clear next steps for each product.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
-              <CardHeader>
-                <CardTitle className="text-green-600">Start with Tier-H:</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Order your first node</li>
-                  <li>Plug in and start earning</li>
-                  <li>Scale as you grow</li>
-                </ul>
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
-              <CardHeader>
-                <CardTitle className="text-blue-600">Scale with Tier-S:</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Schedule a consultation</li>
-                  <li>Custom deployment planning</li>
-                  <li>Professional installation and setup</li>
-                </ul>
-              </CardContent>
-            </Card>
-          </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
-            Both Options: Join our partner network, access technical resources, connect with the community.
-          </p>
-        </div>
-      </section>

      {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
-        <div className="max-w-6xl mx-auto text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+      <Footer />
    </div>
  )
 }
--- a/src/components/RegisterPage.jsx
+++ b/src/components/RegisterPage.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import Footer from './Footer.jsx';
 import { Link } from 'react-router-dom'
 import { Button } from './ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
@@ -7,8 +8,7 @@ import { Input } from './ui/input'
 import { Label } from './ui/label'
 import { Textarea } from './ui/textarea'
 import { Checkbox } from './ui/checkbox'
-import { CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen, Globe, Users } from 'lucide-react'
-import Navigation from './Navigation'
+import { CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen, Users } from 'lucide-react'
 import Step1Form from './Step1Form'
 import InterestSpecificStep from './InterestSpecificStep'
 import FinalStepForm from './FinalStepForm'
@@ -197,18 +197,17 @@ function RegisterPage() {
  }

  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
+    <div className="min-h-screen bg-background">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}

      {/* Hero Section */}
-      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="py-24 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center space-y-8">
-          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Join the Revolution</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
-            Ready to Transform Your <span className="text-blue-600">Infrastructure?</span>
+          <Badge className="bg-primary/10 text-primary hover:bg-blue-200">Join the Revolution</Badge>
+          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
+            Ready to Transform Your <span className="text-primary">Infrastructure?</span>
          </h1>
-          <p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
+          <p className="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
            Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions.
          </p>
        </div>
@@ -236,7 +235,7 @@ function RegisterPage() {
                type="submit"
                onClick={handleSubmit}
                disabled={isSubmitting || !formData.terms}
-                className="ml-auto bg-blue-600 hover:bg-blue-700 text-lg py-3"
+                className="ml-auto bg-primary hover:bg-primary/90 text-lg py-3"
              >
                {isSubmitting ? 'Submitting...' : 'Register Your Interest'}
                <ArrowRight className="ml-2 h-5 w-5" />
@@ -247,19 +246,19 @@ function RegisterPage() {
      </div>

      {/* What Happens Next */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens After You Submit?</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">What Happens After You Submit?</h2>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
-                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-2xl font-bold text-blue-600">1</span>
+                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-2xl font-bold text-primary">1</span>
                </div>
-                <CardTitle className="text-blue-600">Confirmation & Assignment</CardTitle>
+                <CardTitle className="text-primary">Confirmation & Assignment</CardTitle>
              </CardHeader>
              <CardContent>
                Receive a confirmation email and get assigned to the appropriate specialist within 24 hours.
@@ -268,10 +267,10 @@ function RegisterPage() {
            
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
-                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-2xl font-bold text-green-600">2</span>
+                <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-2xl font-bold text-emerald-600">2</span>
                </div>
-                <CardTitle className="text-green-600">Personalized Consultation</CardTitle>
+                <CardTitle className="text-emerald-600">Personalized Consultation</CardTitle>
              </CardHeader>
              <CardContent>
                Within 1 week, receive a personalized consultation call and a custom proposal or assessment.
@@ -294,18 +293,18 @@ function RegisterPage() {
      </section>

      {/* Frequently Asked Questions */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background dark:from-blue-950 dark:to-purple-950">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Common Questions</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Common Questions</h2>
          </div>
          <div className="space-y-6">
            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader><CardTitle className="text-blue-600">Q: What's the minimum investment to get started?</CardTitle></CardHeader>
+              <CardHeader><CardTitle className="text-primary">Q: What's the minimum investment to get started?</CardTitle></CardHeader>
              <CardContent>A: Tier-H nodes start at under $5,000. Tier-S deployments vary based on scale and requirements.</CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
-              <CardHeader><CardTitle className="text-green-600">Q: How long does deployment take?</CardTitle></CardHeader>
+              <CardHeader><CardTitle className="text-emerald-600">Q: How long does deployment take?</CardTitle></CardHeader>
              <CardContent>A: Tier-H nodes can be deployed in minutes. Tier-S datacenters typically deploy in 3-6 months.</CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
@@ -325,16 +324,16 @@ function RegisterPage() {
      </section>

      {/* Social Proof & Urgency */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-4xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Join Leading Organizations Already Building the Future</h2>
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground">Join Leading Organizations Already Building the Future</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader><CardTitle className="text-blue-600">70+ countries with active infrastructure</CardTitle></CardHeader>
+              <CardHeader><CardTitle className="text-primary">70+ countries with active infrastructure</CardTitle></CardHeader>
              <CardContent>Global reach and decentralized presence.</CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader><CardTitle className="text-green-600">Government agencies building sovereign systems</CardTitle></CardHeader>
+              <CardHeader><CardTitle className="text-emerald-600">Government agencies building sovereign systems</CardTitle></CardHeader>
              <CardContent>Trusted by public sector for digital sovereignty.</CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
@@ -346,24 +345,15 @@ function RegisterPage() {
              <CardContent>Empowering local digital infrastructure.</CardContent>
            </Card>
          </div>
-          <p className="text-lg text-slate-600 mt-8">
+          <p className="text-lg text-muted-foreground mt-8">
            Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots.
          </p>
-          <p className="text-xl font-bold text-blue-600 mt-4">Don't Wait - The Future is Being Built Now</p>
+          <p className="text-xl font-bold text-primary mt-4">Don't Wait - The Future is Being Built Now</p>
        </div>
      </section>

      {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
-        <div className="max-w-6xl mx-auto text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+      <Footer />
    </div>
  )
 }
--- a/src/components/Step1Form.jsx
+++ b/src/components/Step1Form.jsx
@@ -8,18 +8,18 @@ function Step1Form({ formData, handleInputChange, formError }) {
  return (
    <>
      {/* How Do You Want to Get Involved? */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">How Do You Want to Get Involved?</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">How Do You Want to Get Involved?</h2>
          </div>
          {formError && (
-            <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 mb-8">
+            <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 dark:bg-red-950 dark:border-red-700 dark:text-red-200 mb-8">
              <AlertCircle className="h-5 w-5" />
              <span>{formError}</span>
            </div>
          )}
-          <p className="text-lg text-slate-700 mb-8 text-center flex items-center justify-center gap-2">
+          <p className="text-lg text-muted-foreground mb-8 text-center flex items-center justify-center gap-2">
            <ArrowRight className="h-6 w-6 text-blue-600" /> <span className="font-bold">Please select one or more categories below that best describe your interest to reveal specific questions.</span>
          </p>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -100,9 +100,9 @@ function Step1Form({ formData, handleInputChange, formError }) {
      </section>

      {/* Contact Form - General Information */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-4xl mx-auto">
-          <Card className="bg-white shadow-xl">
+          <Card className="bg-card text-card-foreground shadow-xl">
            <CardHeader>
              <CardTitle className="text-2xl text-center">Your Contact Details</CardTitle>
              <CardDescription className="text-center text-lg">
--- a/src/components/TechnologyPage.jsx
+++ b/src/components/TechnologyPage.jsx
@@ -1,77 +1,79 @@
 import { Link } from 'react-router-dom'
+import Footer from './Footer.jsx';
 import { Button } from './ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
 import { Badge } from './ui/badge'
-import { Cpu, Database, Network, Shield, Zap, Scale, Globe, CheckCircle, BookOpen, Brain, Layers } from 'lucide-react'
+import { Cpu, Database, Network, Shield, Zap, Scale, CheckCircle, BookOpen, Brain, Layers } from 'lucide-react'
 import quantumSafeImage from '../assets/quantum_safe.png'
 import MyceliumImage from '../assets/myceliumn.png'
 import { AlertCircle } from 'lucide-react'
-import Navigation from './Navigation'
+import GalaxyMachine from '../assets/tenstorrent_galaxy_internal_components.png'
+import Navigation from './Navigation.jsx'

 function TechnologyPage() {
  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      <Navigation />
-<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        <img src="/src/assets/tenstorrent_galaxy_internal_components.png" alt="Tenstorrent Galaxy Internal Components" className="w-full h-auto rounded-lg shadow-lg" />
+    <div className="min-h-screen bg-background">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+        <img src={GalaxyMachine} alt="Galaxy" className="w-full h-auto rounded-lg shadow-lg" />
      </div>

      {/* Technology Hero Section */}
-      <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-5xl mx-auto text-center space-y-8">
-          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Innovations</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
-            Infrastructure Reimagined from <span className="text-blue-600">First Principles</span>
+          <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Innovations</Badge>
+          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
+            Infrastructure Reimagined from <span className="text-primary">First Principles</span>
          </h1>
-          <p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
+          <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
            ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
          </p>
        </div>
      </section>

      {/* Core Technology Pillars */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Three Pillars of Innovation</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Three Pillars of Innovation</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Overview of the three main technology innovations that power ThreeFold.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Zero-OS Compute System</CardTitle>
+                <Cpu className="w-16 h-16 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Zero-OS Compute System</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-1 text-sm text-slate-700">
+                <ul className="space-y-1 text-sm text-foreground">
                  <li>Stateless, autonomous operating system</li>
                  <li>Depending the usecase can more efficient than traditional systems</li>
                  <li>Self-healing and cryptographically secured</li>
                </ul>
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Database className="w-16 h-16 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
+                <Database className="w-16 h-16 mx-auto mb-4 text-emerald-600" />
+                <CardTitle className="text-emerald-600">Quantum-Safe Storage</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-1 text-sm text-slate-700">
+                <ul className="space-y-1 text-sm text-foreground">
                  <li>Mathematical data dispersion (not replication)</li>
                  <li>20% overhead vs 400% in traditional systems</li>
                  <li>Unbreakable and self-healing architecture</li>
                </ul>
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Network className="w-16 h-16 mx-auto mb-4 text-purple-600" />
-                <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
+                <Network className="w-16 h-16 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Mycelium Network</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-1 text-sm text-slate-700">
+                <ul className="space-y-1 text-sm text-foreground">
                  <li>Peer-to-peer mesh overlay network</li>
                  <li>End-to-end encryption with shortest path routing</li>
                  <li>Resilient to internet failures and attacks</li>
@@ -83,45 +85,45 @@ function TechnologyPage() {
      </section>

      {/* Zero-OS: Autonomous Compute */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Zero-OS: The World's First Stateless Cloud OS</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Zero-OS: The World's First Stateless Cloud OS</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Deep dive into the revolutionary operating system that powers ThreeFold.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Core Principles:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Avoid layers, less is more</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless:</strong> Immune to corruption</li>
+              <h3 className="text-2xl font-bold text-primary">Core Principles:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Simplicity:</strong> Avoid layers, less is more</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Stateless:</strong> Immune to corruption</li>
              </ul>
            </div>
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Unique:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Deterministic Execution:</strong> Reproducible, tamper-proof workloads</li>
+              <h3 className="text-2xl font-bold text-primary">Unique:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> <strong>Deterministic Execution:</strong> Reproducible, tamper-proof workloads</li>
              </ul>
            </div>
          </div>
          <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Technical Advantages:</h3>
+            <h3 className="text-2xl font-bold text-primary mb-6">Technical Advantages:</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-emerald-600">Cryptographic verification</CardTitle></CardHeader>
                <CardContent>Ensures integrity of all components.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Self-healing and autonomous</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Self-healing and autonomous</CardTitle></CardHeader>
                <CardContent>Operates without human intervention.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-orange-600">Compatible with Kubernetes and VMs</CardTitle></CardHeader>
                <CardContent>Flexible for diverse workloads.</CardContent>
              </Card>
@@ -131,11 +133,11 @@ function TechnologyPage() {
      </section>

      {/* Quantum-Safe Storage: Unbreakable Data */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Quantum-Safe Storage: Mathematics Over Replication</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Quantum-Safe Storage: Mathematics Over Replication</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Explanation of the mathematical storage breakthrough that ensures unbreakable data.
            </p>
          </div>
@@ -144,19 +146,19 @@ function TechnologyPage() {
              <img src={quantumSafeImage} alt="Quantum Safe Storage" className="w-full h-auto rounded-lg shadow-lg" />
            </div>
            <div className="md:col-span-1 space-y-6">
-              <h3 className="text-2xl font-bold text-green-600">How It Works:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Data is fragmented and transformed into mathematical equations</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Equations are distributed across multiple nodes</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Original data fragments are discarded</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Any subset of equations can reconstruct the original data</li>
+              <h3 className="text-2xl font-bold text-emerald-600">How It Works:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Data is fragmented and transformed into mathematical equations</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Equations are distributed across multiple nodes</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Original data fragments are discarded</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Any subset of equations can reconstruct the original data</li>
              </ul>
-            <h3 className="text-2xl font-bold text-green-600">Zero-Knowledge Architecture:</h3>
-            <ul className="space-y-3 text-lg text-slate-700">
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> No single node knows what it stores</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Cryptographic proof without data exposure</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Post-quantum security resistant</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Self-healing against bitrot and failures</li>
+            <h3 className="text-2xl font-bold text-emerald-600">Zero-Knowledge Architecture:</h3>
+            <ul className="space-y-3 text-lg text-foreground">
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> No single node knows what it stores</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Cryptographic proof without data exposure</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Post-quantum security resistant</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Self-healing against bitrot and failures</li>
            </ul>
            </div>
          </div>
@@ -164,28 +166,28 @@ function TechnologyPage() {
      </section>

      {/* Mycelium Network: Intelligent Connectivity */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Mycelium Network: The Internet's Missing Layer</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Mycelium Network: The Internet's Missing Layer</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="md:col-span-1 space-y-6">
-              <h3 className="text-2xl font-bold text-teal-600">Core Capabilities:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>End-to-End Encryption</strong> </li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Shortest Path Routing</strong> </li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Geographic Awareness:</strong></li>
+              <h3 className="text-2xl font-bold text-primary">Core Capabilities:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>End-to-End Encryption</strong> </li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Shortest Path Routing</strong> </li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Geographic Awareness:</strong></li>
              </ul>
-              <h3 className="text-2xl font-bold text-teal-600 mt-8">Technical Implementation:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Peer-to-peer mesh topology</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Up to 1 Gbps throughput per agent</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Protocol-agnostic data transport</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Authentication-based security (not perimeter-based)</li>
+              <h3 className="text-2xl font-bold text-primary mt-8">Technical Implementation:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Peer-to-peer mesh topology</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Up to 1 Gbps throughput per agent</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Protocol-agnostic data transport</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Authentication-based security (not perimeter-based)</li>
              </ul>
            </div>
            <div className="md:col-span-1 flex justify-center">
@@ -193,18 +195,18 @@ function TechnologyPage() {
            </div>
          </div>
          <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-teal-600 mb-6">Beyond Traditional Networking:</h3>
+            <h3 className="text-2xl font-bold text-primary mb-6">Beyond Traditional Networking:</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Survives internet outages</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Survives internet outages</CardTitle></CardHeader>
                <CardContent>Ensures continuity even during major disruptions.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-emerald-600">Enables true peer-to-peer</CardTitle></CardHeader>
                <CardContent>Facilitates direct communication between users.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Reduces latency</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Reduces latency</CardTitle></CardHeader>
                <CardContent>Through optimal path selection and local routing.</CardContent>
              </Card>
            </div>
@@ -213,31 +215,31 @@ function TechnologyPage() {
      </section>

      {/* Architectural Innovations */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Integrated Architecture: Greater Than Sum of Parts</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Integrated Architecture: Greater Than Sum of Parts</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              How ThreeFold's core technologies work together to create a superior infrastructure.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Geo-Aware Infrastructure:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Resilient to geopolitical disruptions</li>
+              <h3 className="text-2xl font-bold text-primary">Geo-Aware Infrastructure:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Data sovereignty with precise location control</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Compliance with local regulations (GDPR, etc.)</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Shortest physical paths for efficiency</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Resilient to geopolitical disruptions</li>
              </ul>
            </div>
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Smart Contract for IT:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Autonomous management without human intervention</li>
+              <h3 className="text-2xl font-bold text-primary">Smart Contract for IT:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Cryptographically secured deployments</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Multi-signature authentication</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Immutable execution records on blockchain</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Autonomous management without human intervention</li>
              </ul>
            </div>
          </div>
@@ -246,60 +248,60 @@ function TechnologyPage() {
      </section>

      {/* Technical Comparisons */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">ThreeFold vs Traditional Infrastructure</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">ThreeFold vs Traditional Infrastructure</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Side-by-side comparison with traditional approaches.
            </p>
          </div>
          <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
+            <table className="min-w-full bg-card rounded-lg shadow-md">
              <thead>
-                <tr className="bg-blue-600 text-white">
+                <tr className="bg-primary text-primary-foreground">
                  <th className="py-3 px-4 text-left">Aspect</th>
                  <th className="py-3 px-4 text-left">Traditional Cloud</th>
                  <th className="py-3 px-4 text-left">ThreeFold</th>
                </tr>
              </thead>
              <tbody>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">OS Deployment</td>
                  <td className="py-3 px-4">Local installation, complex updates</td>
                  <td className="py-3 px-4 font-semibold">Network boot, stateless</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Container Images</td>
                  <td className="py-3 px-4">2GB+ monolithic images</td>
                  <td className="py-3 px-4 font-semibold">2MB metadata-only</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Storage Redundancy</td>
                  <td className="py-3 px-4">400% overhead (4 copies)</td>
                  <td className="py-3 px-4 font-semibold">20% overhead (math)</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Network Security</td>
                  <td className="py-3 px-4">Perimeter-based firewalls</td>
                  <td className="py-3 px-4 font-semibold">End-to-end encryption</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Management</td>
                  <td className="py-3 px-4">Human administrators</td>
                  <td className="py-3 px-4 font-semibold">Autonomous agents</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Scalability</td>
                  <td className="py-3 px-4">Vertical, expensive</td>
                  <td className="py-3 px-4 font-semibold">Horizontal, unlimited</td>
                </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Energy Efficiency</td>
                  <td className="py-3 px-4">High consumption</td>
                  <td className="py-3 px-4 font-semibold">10x more efficient</td>
                </tr>
-                <tr>
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Data Sovereignty</td>
                  <td className="py-3 px-4">Limited control</td>
                  <td className="py-3 px-4 font-semibold">Complete control</td>
@@ -311,37 +313,37 @@ function TechnologyPage() {
      </section>

      {/* Implementation Status & Roadmap */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Production-Ready Technology & Roadmap</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Production-Ready Technology & Roadmap</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Current status and future developments of ThreeFold's technology.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Currently Available:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Web Gateway: Production</li>
+              <h3 className="text-2xl font-bold text-primary">Currently Available:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Zero-OS Core: Production (multiple years)</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Quantum-Safe Storage: Production</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Mycelium Network: Beta (v3.13+)</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Web Gateway: Production</li>
              </ul>
            </div>
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Coming H2 2025:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> FungiStor: Global content delivery</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enhanced enterprise features</li>
+              <h3 className="text-2xl font-bold text-primary">Coming H2 2025:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Smart Contract for IT: General availability</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Geo-Aware AI Agents (3AI)</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> 3CORE Ledger: Geo-fenced blockchain</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> FungiStor: Global content delivery</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Enhanced enterprise features</li>
              </ul>
            </div>
 <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Live Deployment Stats:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Live Deployment Stats:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                <li>2000+ nodes across 70+ countries</li>
                <li>60,000+ CPU cores active</li>
                <li>1+ million contracts processed</li>
@@ -353,36 +355,36 @@ function TechnologyPage() {
      </section>

      {/* Open Source & Standards */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Open Principles</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Built on Open Principles</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Commitment to openness and interoperability.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Open Source Components:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> No vendor lock-in</li>
+              <h3 className="text-2xl font-bold text-primary">Open Source Components:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Core technology stack available on GitHub</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Community-driven development</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Transparent security auditing</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> No vendor lock-in</li>
              </ul>
            </div>
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Standards Compliance:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Blockchain interoperability</li>
+              <h3 className="text-2xl font-bold text-primary">Standards Compliance:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> POSIX filesystem compatibility</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Docker and Kubernetes support</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Standard networking protocols</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Blockchain interoperability</li>
              </ul>
            </div>
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Developer Ecosystem:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Developer Ecosystem:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                <li>Comprehensive APIs and SDKs</li>
                <li>Extensive documentation</li>
                <li>Active community support</li>
@@ -394,50 +396,50 @@ function TechnologyPage() {
      </section>

      {/* Security & Compliance */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Security by Design & Compliance</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Security by Design & Compliance</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Advanced security features and compliance capabilities.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Cryptographic Foundation:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable audit trails</li>
+              <h3 className="text-2xl font-bold text-primary">Cryptographic Foundation:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> End-to-end encryption everywhere</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Post-quantum cryptography ready</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Zero-knowledge data storage</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Immutable audit trails</li>
              </ul>
            </div>
            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Compliance Features:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data residency guarantees</li>
+              <h3 className="text-2xl font-bold text-primary">Compliance Features:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> GDPR compliance through data sovereignty</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Regulatory jurisdiction control</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Audit-ready transaction logs</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Data residency guarantees</li>
              </ul>
            </div>
          </div>
          <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Threat Resistance:</h3>
+            <h3 className="text-2xl font-bold text-primary mb-6">Threat Resistance:</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Immune to ransomware</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Immune to ransomware</CardTitle></CardHeader>
                <CardContent>Stateless OS prevents persistent threats.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-emerald-600">DDoS resistant</CardTitle></CardHeader>
                <CardContent>Distributed architecture mitigates attacks.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Quantum computing resistant</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Quantum computing resistant</CardTitle></CardHeader>
                <CardContent>Future-proof security protocols.</CardContent>
              </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader>
                <CardContent>Mycelium network routes around blocking.</CardContent>
              </Card>
@@ -447,21 +449,21 @@ function TechnologyPage() {
      </section>

      {/* Technical Resources */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dive Deeper into ThreeFold Technology</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Dive Deeper into ThreeFold Technology</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Access comprehensive technical documentation and resources.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-blue-600">Technical Documentation</CardTitle>
+                <CardTitle className="text-primary">Technical Documentation</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                  <li>Architecture whitepapers</li>
                  <li>API documentation</li>
                  <li>Deployment guides</li>
@@ -469,13 +471,13 @@ function TechnologyPage() {
                </ul>
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-purple-600">Try It Yourself</CardTitle>
+                <CardTitle className="text-primary">Try It Yourself</CardTitle>
              </CardHeader>
              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://dashboard.grid.tf</a></li>
+                <ul className="space-y-2 text-foreground">
+                  <li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://dashboard.grid.tf</a></li>
                  <li>GitHub repositories</li>
                  <li>Developer sandbox</li>
                  <li>Community forums</li>
@@ -484,8 +486,8 @@ function TechnologyPage() {
            </Card>
          </div>
          <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Get Support:</h3>
-            <ul className="space-y-2 text-lg text-slate-700">
+            <h3 className="text-2xl font-bold text-primary mb-6">Get Support:</h3>
+            <ul className="space-y-2 text-lg text-foreground">
              <li>Technical community</li>
              <li>Professional services</li>
              <li>Training programs</li>
@@ -496,15 +498,7 @@ function TechnologyPage() {
      </section>

      {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
-        <div className="max-w-6xl mx-auto text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+      <Footer />
    </div>
  )
 }
--- a/src/components/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="bg-background text-foreground border-border"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+};
+
+export default ThemeToggle;
--- a/src/components/TierSHPage.jsx
+++ b/src/components/TierSHPage.jsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react'
+import Footer from './Footer.jsx';
 import { Link } from 'react-router-dom'
 import { Button } from './ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
 import { Badge } from './ui/badge'
-import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
-import Navigation from './Navigation'
-
+import { Globe } from 'lucide-react'
+import { Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
 // Import images

 function TierSHPage() {
@@ -20,33 +20,32 @@ function TierSHPage() {
  }

  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
+    <div className="min-h-screen bg-background text-foreground">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}

      {/* Hero Section */}
-      <section className={`pt-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+      <section className={`py-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="space-y-4">
-                <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge>
-                <h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight">
-                  Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
+                <Badge className="bg-primary/10 text-primary hover:bg-primary/20">The Future of AI, Cloud and Internet.</Badge>
+                <h1 className="text-2xl md:text-4xl font-bold text-foreground leading-tight">
+                  Transform Your Building Into a <br /><span className="text-primary">Digital Powerhouse</span>.
                </h1>
-                <p className="text-xl text-slate-600 leading-relaxed">
+                <p className="text-xl text-muted-foreground leading-relaxed">
                  ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control.
                </p>
              </div>
              <div className="flex flex-col sm:flex-row gap-4">
-                <Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px- py-3">
+                <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-lg px- py-3">
                  <Link to="/register">Register Interest</Link>
                </Button>
                <Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
                  Learn More About Products
                </Button>
              </div>
-              <p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p>
+              <p className="text-sm text-muted-foreground">Join the revolution in decentralized digital infrastructure.</p>
            </div>
            <div className="relative">
              <video
@@ -65,31 +64,31 @@ function TierSHPage() {
      </section>

      {/* What Are Tier-S and Tier-H? */}
-      <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Are Tier-S and Tier-H Datacenters?</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale.
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">What Are Tier-S and Tier-H Datacenters?</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
+              ThreeFold introduces a new class of decentralized digital infrastructure: <br/>Tier-S for industrial scale and Tier-H for residential/office scale.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
+                <Cpu className="w-16 h-16 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Tier-S Datacenters</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p>
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
+                <Home className="w-16 h-16 mx-auto mb-4 text-emerald-600" />
+                <CardTitle className="text-emerald-600">Tier-H Datacenters</CardTitle>
              </CardHeader>
              <CardContent>
-                <p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
+                <p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with efficient, green and zero maintenance.</p>
              </CardContent>
            </Card>
          </div>
@@ -97,34 +96,34 @@ function TierSHPage() {
      </section>

      {/* From Real Estate to Digital Infrastructure */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">From Real Estate to Digital Infrastructure</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">From Real Estate to Digital Infrastructure</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
+              Just Like Solar Panels Transform Buildings Into Power Generators,<br/> ThreeFold Nodes Transform Them Into Digital Utilities.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
+                <Cpu className="w-12 h-12 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Compute, Storage, Networking</CardTitle>
              </CardHeader>
              <CardContent>
                Your building can produce essential digital resources.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">AI Inference Power</CardTitle>
+                <Brain className="w-12 h-12 mx-auto mb-4 text-emerald-600" />
+                <CardTitle className="text-emerald-600">AI Inference Power</CardTitle>
              </CardHeader>
              <CardContent>
                Host AI workloads and contribute to decentralized AI.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
                <CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
@@ -134,25 +133,25 @@ function TierSHPage() {
              </CardContent>
            </Card>
          </div>
-          <p className="text-center text-xl text-slate-600 mt-12">
+          <p className="text-center text-xl text-muted-foreground mt-12">
            Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
          </p>
        </div>
      </section>

      {/* Why Real Estate Developers Should Join */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Why Real Estate Developers Should Join</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Why Real Estate Developers Should Join</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Transform your properties into digital assets and unlock new revenue streams.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-blue-600">
+                <CardTitle className="flex items-center gap-2 text-primary">
                  <DollarSign className="h-5 w-5" />
                  Passive Digital Revenue
                </CardTitle>
@@ -161,9 +160,9 @@ function TierSHPage() {
                Monetize idle compute, bandwidth, and storage capacity.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-green-600">
+                <CardTitle className="flex items-center gap-2 text-emerald-600">
                  <TrendingUp className="h-5 w-5" />
                  Higher Property Value
                </CardTitle>
@@ -172,7 +171,7 @@ function TierSHPage() {
                Market properties as cloud-enabled and future-proof.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-purple-600">
                  <Zap className="h-5 w-5" />
@@ -183,7 +182,7 @@ function TierSHPage() {
                10x less energy vs traditional datacenters, resilient to outages.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-orange-600">
                  <CheckCircle className="h-5 w-5" />
@@ -194,7 +193,7 @@ function TierSHPage() {
                No IT expertise required for installation and operation.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-teal-600">
                  <Shield className="h-5 w-5" />
@@ -205,7 +204,7 @@ function TierSHPage() {
                Data stays local and private, under your control.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-indigo-600">
                  <Globe className="h-5 w-5" />
@@ -221,34 +220,34 @@ function TierSHPage() {
      </section>

      {/* Technical Advantages */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Revolutionary Technology</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Built on Revolutionary Technology</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Key differentiators that make ThreeFold superior to traditional infrastructure.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Zero-OS</CardTitle>
+                <Cpu className="w-12 h-12 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Zero-OS</CardTitle>
              </CardHeader>
              <CardContent>
                Stateless, self-healing operating system for autonomous compute.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
-                <Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
+                <Database className="w-12 h-12 mx-auto mb-4 text-emerald-600" />
+                <CardTitle className="text-emerald-600">Quantum-Safe Storage</CardTitle>
              </CardHeader>
              <CardContent>
                Unbreakable data protection with 10x efficiency through mathematical dispersion.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
                <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
@@ -257,7 +256,7 @@ function TierSHPage() {
                Mesh networking that routes around failures, ensuring resilient connectivity.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-orange-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-orange-600">
                  <Shield className="h-5 w-5" />
@@ -268,7 +267,7 @@ function TierSHPage() {
                Autonomous, cryptographically secured deployments for IT resources.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-teal-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-teal-600">
                  <Brain className="h-5 w-5" />
@@ -279,7 +278,7 @@ function TierSHPage() {
                Private AI agents that respect boundaries and data sovereignty.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-indigo-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-indigo-600">
                  <Globe className="h-5 w-5" />
@@ -295,25 +294,25 @@ function TierSHPage() {
      </section>

      {/* Real Cost Comparison */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dramatic Cost Savings</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Dramatic Cost Savings</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Experience significant cost advantages compared to traditional cloud providers.
            </p>
          </div>
          <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
+            <table className="min-w-full bg-card rounded-lg shadow-md">
              <thead>
-                <tr className="bg-blue-600 text-white">
+                <tr className="bg-primary text-primary-foreground">
                  <th className="py-3 px-4 text-left">Service</th>
                  <th className="py-3 px-4 text-left">ThreeFold</th>
                  <th className="py-3 px-4 text-left">Other Providers</th>
                </tr>
              </thead>
              <tbody>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                  <td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td>
                  <td className="py-3 px-4 font-semibold">Less than $5/month</td>
                  <td className="py-3 px-4">$12–$160/month</td>
@@ -323,28 +322,33 @@ function TierSHPage() {
                  <td className="py-3 px-4 font-semibold">Less than $12/month</td>
                  <td className="py-3 px-4">$20–$100/month</td>
                </tr>
+                <tr>
+                  <td className="py-3 px-4">1m AI Requests (LLM)</td>
+                  <td className="py-3 px-4 font-semibold">2x more efficient</td>
+                  <td className="py-3 px-4"></td>
+                </tr>                
              </tbody>
            </table>
          </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
-            Up to 10x more energy efficient than traditional datacenters.
+          <p className="text-center text-lg text-muted-foreground mt-8">
+            Up to 10x more energy efficient for newgen Web4 Workdloads.
          </p>
        </div>
      </section>

      {/* Who It's For */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Perfect For</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Clear target markets and use cases for ThreeFold's solutions.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-blue-600">
+                <CardTitle className="flex items-center gap-2 text-primary">
                  <Shield className="h-5 w-5" />
                  Governments
                </CardTitle>
@@ -353,9 +357,9 @@ function TierSHPage() {
                Building sovereign AI and cloud infrastructure.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-green-600">
+                <CardTitle className="flex items-center gap-2 text-emerald-600">
                  <Network className="h-5 w-5" />
                  Telecoms and ISPs
                </CardTitle>
@@ -364,7 +368,7 @@ function TierSHPage() {
                Deploying local compute grids and edge solutions.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-purple-600">
                  <Users className="h-5 w-5" />
@@ -375,7 +379,7 @@ function TierSHPage() {
                Seeking cloud independence and decentralized hosting.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-orange-600">
                  <Brain className="h-5 w-5" />
@@ -386,7 +390,7 @@ function TierSHPage() {
                Hosting inference or full-stack decentralized applications.
              </CardContent>
            </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-teal-600">
                  <Globe className="h-5 w-5" />
@@ -402,30 +406,30 @@ function TierSHPage() {
      </section>

      {/* Proven at Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <div className="max-w-4xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Proven at Scale</h2>
-          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground">Proven at Scale</h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            ThreeFold's technology is already deployed globally and proven in production.
          </p>
          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
+                <CardTitle className="text-primary">Live in over 50 countries</CardTitle>
              </CardHeader>
              <CardContent>
                Our decentralized grid spans across the globe.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
-                <CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
+                <CardTitle className="text-emerald-600">60,000+ CPU cores active</CardTitle>
              </CardHeader>
              <CardContent>
                Massive computational power available on the grid.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
              </CardHeader>
@@ -433,7 +437,7 @@ function TierSHPage() {
                Secure and transparent deployments managed by smart contracts.
              </CardContent>
            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
              </CardHeader>
@@ -442,24 +446,24 @@ function TierSHPage() {
              </CardContent>
            </Card>
          </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
-            View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a>
+          <p className="text-center text-lg text-muted-foreground mt-8">
+            View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://stats.grid.tf</a>
          </p>
        </div>
      </section>

      {/* Call to Action */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-green-600 text-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-primary text-primary-foreground">
        <div className="max-w-4xl mx-auto text-center space-y-8">
          <h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2>
          <p className="text-xl opacity-90 leading-relaxed">
            The future of digital infrastructure starts with your building.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-slate-100 text-lg px-8 py-3">
+            <Button asChild size="lg" className="bg-primary-foreground text-primary hover:bg-primary-foreground/90 text-lg px-8 py-3">
              <Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
            </Button>
-            <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-blue-600 text-lg px-8 py-3">
+            <Button asChild variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary text-lg px-8 py-3">
              <Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
            </Button>
          </div>
@@ -468,16 +472,7 @@ function TierSHPage() {
      </section>

      {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
-        <div className="max-w-6xl mx-auto text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+      <Footer />
    </div>
  )
 }
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
--- a/src/config/navigation.json
+++ b/src/config/navigation.json
@@ -2,7 +2,7 @@
  {
    "path": "/",
    "label": "Home",
-    "component": "NewHome",
+    "component": "Home",
    "show": true
  },
  {
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,5 +1,5 @@

-@custom-variant dark (&:is(.dark *));
+/* @custom-variant dark (&:is(.dark *)); */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
@@ -74,7 +74,7 @@
  --sidebar-ring: oklch(0.708 0 0);
 }

-.dark {
+html[data-theme='dark'] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,2 +1,6 @@
@import "tailwindcss";
-@import "tw-animate-css";
+@import "tw-animate-css";
+
+body {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,12 +2,68 @@ import typography from '@tailwindcss/typography';

 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
  },
  plugins: [
    typography,
--- a/vercel.json
+++ b/vercel.json
@@ -1,2 +0,0 @@
-
-
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,10 @@ import path from 'path'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(),tailwindcss()],
+  base: process.env.VITE_APP_BASE_URL || '/',
+  plugins: [react(), tailwindcss({
+    config: './tailwind.config.js',
+  })],
  server: {
    allowedHosts: ['919d3b60e744.ngrok-free.app'],
  },
Author	SHA1	Message	Date
despiegk	e611e77128	...	2025-07-30 12:23:43 +02:00
despiegk	84f8d956fc	...	2025-07-30 10:34:56 +02:00
despiegk	7c6d8ae4cb	...	2025-07-30 10:30:59 +02:00
despiegk	6cdb00f1a5	...	2025-07-25 11:28:58 +02:00
despiegk	dad67592d3	...	2025-07-25 11:19:11 +02:00
despiegk	53a9d76691	...	2025-07-25 10:53:57 +02:00
despiegk	0d25dc4022	...	2025-07-25 10:01:37 +02:00
despiegk	8812ffe449	...	2025-07-25 09:55:39 +02:00
despiegk	5271f879f9	...	2025-07-25 09:29:49 +02:00
despiegk	fcce89264d	...	2025-07-25 09:18:54 +02:00
despiegk	26752c8b03	...	2025-07-24 21:09:47 +02:00
despiegk	aaca5f6d6c	...	2025-07-24 17:27:51 +02:00
despiegk	f87bec30d2	...	2025-07-24 12:38:27 +02:00
despiegk	fd2691051f	...	2025-07-24 12:35:13 +02:00
despiegk	0777269337	...	2025-07-24 12:20:44 +02:00
despiegk	d11ce3998b	...	2025-07-24 12:09:45 +02:00
despiegk	e16a4a5278	...	2025-07-24 11:53:39 +02:00