...

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
34 changed files with 646 additions and 767 deletions
--- a/build.sh
+++ b/build.sh
@@ -1,4 +1,17 @@
 #!/bin/bash
+
 cd "$(dirname "$0")"
+
+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 -avz --delete dist/ root@threefold.info:/root/hero/www/info/threefoldgalaxy/
+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
@@ -3,7 +3,7 @@ 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,
@@ -27,7 +27,7 @@ function App() {
      <Navigation />
      <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/components/BecomeMember.jsx
+++ b/src/components/BecomeMember.jsx
@@ -165,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>
@@ -221,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>
@@ -239,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">
@@ -254,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>
@@ -279,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>
@@ -331,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>
@@ -358,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>
@@ -386,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'}
@@ -436,17 +436,17 @@ function DirectBuy() {
  }

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

      {/* Hero Section */}
      <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>
@@ -462,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.
@@ -483,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.
@@ -496,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>
@@ -509,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
@@ -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-input bg-background text-foreground 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-background text-foreground border border-input 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)}
          >
@@ -101,12 +101,12 @@ function Blog() {
                <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-foreground 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-muted-foreground text-sm mb-4">
--- a/src/components/BlogPost.jsx
+++ b/src/components/BlogPost.jsx
@@ -40,7 +40,7 @@ function BlogPost() {
          <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>
              ))}
@@ -105,7 +105,7 @@ function BlogPost() {
                  <li className="mb-1" {...props} />
                ),
                blockquote: ({node, ...props}) => (
-                  <blockquote className="border-l-4 border-blue-500 pl-4 italic text-muted-foreground my-4" {...props} />
+                  <blockquote className="border-l-4 border-primary pl-4 italic text-muted-foreground my-4" {...props} />
                ),
                code: ({node, inline, ...props}) =>
                  inline ? (
@@ -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/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,460 +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 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">
-      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
-
-      {/* Hero Section */}
-      <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.
-                </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/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -15,12 +15,12 @@ function Navigation() {
  }

  return (
-    <nav className="fixed top-0 w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 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 dark:text-white">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 */}
@@ -31,12 +31,12 @@ function Navigation() {
                <Link
                  key={item.path}
                  to={item.path}
-                  className={`transition-colors ${isActive(item.path) ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400'}`}
+                  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 />
@@ -50,7 +50,7 @@ function Navigation() {
                  <Menu className="h-6 w-6" />
                </Button>
              </SheetTrigger>
-              <SheetContent side="right" className="bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-200 sm:max-w-sm py-6">
+              <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)
@@ -58,7 +58,7 @@ function Navigation() {
                      <SheetClose asChild key={item.path}>
                        <Link
                          to={item.path}
-                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-blue-600 dark:text-blue-400' : 'text-slate-900 dark:text-slate-200 hover:text-blue-600 dark:hover:text-blue-400'}`}
+                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-primary' : 'text-foreground hover:text-primary'}`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          {item.label}
@@ -66,7 +66,7 @@ function Navigation() {
                      </SheetClose>
                    ))}
                  <SheetClose asChild>
-                    <Button asChild className="bg-blue-600 hover:bg-blue-700">
+                    <Button asChild className="bg-primary hover:bg-primary/90">
                      <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
                    </Button>
                  </SheetClose>
--- a/src/components/NewHome.jsx
+++ b/src/components/NewHome.jsx
@@ -1,36 +0,0 @@
-import React from 'react';
-function NewHome() {
-  return (
-    <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>
-        <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
-          As ThreeFold Galaxy we deliver the future of Datacenters
-        </h1>
-        <p className="text-xl text-muted-foreground 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-card text-card-foreground">
-        <div className="max-w-6xl mx-auto text-center">
-          <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. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
-    </div>
-  );
-}
-
-export default NewHome;
--- a/src/components/ProductsPage.jsx
+++ b/src/components/ProductsPage.jsx
@@ -1,8 +1,9 @@
 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 { Cpu, Home, Shield, Network, DollarSign, CheckCircle, Users, Zap, TrendingUp, Layers, Scale } from 'lucide-react'
 function ProductsPage() {
  return (
    <div className="min-h-screen bg-background">
@@ -37,17 +38,17 @@ function ProductsPage() {
            </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-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>
+              <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-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>
+              <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>
@@ -76,21 +77,21 @@ function ProductsPage() {
              <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-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>
+                  <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-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 For Web4</li>
-                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 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-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>
+                  <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>
@@ -109,7 +110,7 @@ function ProductsPage() {
                <CardContent>Full control over data and operations.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
-                <CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
+                <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 bg-card text-card-foreground">
@@ -203,7 +204,7 @@ function ProductsPage() {
          <div className="grid md:grid-cols-2 gap-8">
            <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-foreground">
@@ -255,7 +256,7 @@ function ProductsPage() {
            </Card>
            <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.
@@ -316,16 +317,7 @@ function ProductsPage() {


      {/* Footer */}
-      <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-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. 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,7 +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 { 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'
@@ -202,9 +203,9 @@ function RegisterPage() {
      {/* Hero Section */}
      <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>
+          <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-blue-600">Infrastructure?</span>
+            Ready to Transform Your <span className="text-primary">Infrastructure?</span>
          </h1>
          <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.
@@ -234,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" />
@@ -254,10 +255,10 @@ function RegisterPage() {
          <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.
@@ -266,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.
@@ -292,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 dark:from-blue-950 dark:to-purple-950">
+      <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-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">
@@ -328,11 +329,11 @@ function RegisterPage() {
          <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">
@@ -347,21 +348,12 @@ function RegisterPage() {
          <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-background text-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" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <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. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+      <Footer />
    </div>
  )
 }
--- a/src/components/TechnologyPage.jsx
+++ b/src/components/TechnologyPage.jsx
@@ -1,11 +1,13 @@
 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 GalaxyMachine from '../assets/tenstorrent_galaxy_internal_components.png'
 import Navigation from './Navigation.jsx'

 function TechnologyPage() {
@@ -13,7 +15,7 @@ function TechnologyPage() {
    <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="/src/assets/tenstorrent_galaxy_internal_components.png" alt="Tenstorrent Galaxy Internal Components" className="w-full h-auto rounded-lg shadow-lg" />
+        <img src={GalaxyMachine} alt="Galaxy" className="w-full h-auto rounded-lg shadow-lg" />
      </div>

      {/* Technology Hero Section */}
@@ -54,8 +56,8 @@ function TechnologyPage() {
            </Card>
            <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-foreground">
@@ -95,18 +97,18 @@ function TechnologyPage() {
            <div className="space-y-6">
              <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-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>
+                <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-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-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>
+                <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>
@@ -114,7 +116,7 @@ function TechnologyPage() {
            <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 bg-card text-card-foreground">
-                <CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
+                <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 bg-card text-card-foreground">
@@ -144,14 +146,14 @@ 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>
+              <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>
+            <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>
@@ -200,7 +202,7 @@ function TechnologyPage() {
                <CardContent>Ensures continuity even during major disruptions.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
-                <CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
+                <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 bg-card text-card-foreground">
@@ -225,19 +227,19 @@ function TechnologyPage() {
            <div className="space-y-6">
              <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-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>
+                <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-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-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>
+                <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>
@@ -323,20 +325,20 @@ function TechnologyPage() {
            <div className="space-y-6">
              <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-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>
+                <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-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-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>
+                <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">
@@ -365,19 +367,19 @@ function TechnologyPage() {
            <div className="space-y-6">
              <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-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>
+                <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-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-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>
+                <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">
@@ -406,19 +408,19 @@ function TechnologyPage() {
            <div className="space-y-6">
              <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-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>
+                <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-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-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>
+                <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>
@@ -430,7 +432,7 @@ function TechnologyPage() {
                <CardContent>Stateless OS prevents persistent threats.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
-                <CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
+                <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 bg-card text-card-foreground">
@@ -496,15 +498,7 @@ function TechnologyPage() {
      </section>

      {/* Footer */}
-      <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>
+      <Footer />
    </div>
  )
 }
--- a/src/components/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -15,7 +15,7 @@ const ThemeToggle = () => {
  return (
    <button
      onClick={toggleTheme}
-      className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
+      className="bg-background text-foreground border-border"
    >
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
--- a/src/components/TierSHPage.jsx
+++ b/src/components/TierSHPage.jsx
@@ -1,9 +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 { Globe } from 'lucide-react'
+import { Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
 // Import images

 function TierSHPage() {
@@ -27,9 +29,9 @@ function TierSHPage() {
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="space-y-4">
-                <Badge className="bg-primary/10 text-primary hover:bg-primary/20">The Future of Infrastructure</Badge>
+                <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 <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
+                  Transform Your Building Into a <br /><span className="text-primary">Digital Powerhouse</span>.
                </h1>
                <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.
@@ -67,14 +69,14 @@ function TierSHPage() {
          <div className="text-center space-y-8 mb-12">
            <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: Tier-S for industrial scale and Tier-H for residential/office scale.
+              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-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>
@@ -82,11 +84,11 @@ function TierSHPage() {
            </Card>
            <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>
@@ -99,14 +101,14 @@ function TierSHPage() {
          <div className="text-center space-y-8 mb-12">
            <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, ThreeFold Nodes Transform Them Into Digital Utilities.
+              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 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.
@@ -114,8 +116,8 @@ function TierSHPage() {
            </Card>
            <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.
@@ -149,7 +151,7 @@ function TierSHPage() {
          <div className="grid md:grid-cols-3 gap-8">
            <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>
@@ -160,7 +162,7 @@ function TierSHPage() {
            </Card>
            <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>
@@ -229,8 +231,8 @@ function TierSHPage() {
          <div className="grid md:grid-cols-3 gap-8">
            <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.
@@ -238,8 +240,8 @@ function TierSHPage() {
            </Card>
            <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.
@@ -303,7 +305,7 @@ function TierSHPage() {
          <div className="overflow-x-auto">
            <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>
@@ -320,11 +322,16 @@ 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-muted-foreground mt-8">
-            Up to 10x more energy efficient than traditional datacenters.
+            Up to 10x more energy efficient for newgen Web4 Workdloads.
          </p>
        </div>
      </section>
@@ -341,7 +348,7 @@ function TierSHPage() {
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <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>
@@ -352,7 +359,7 @@ function TierSHPage() {
            </Card>
            <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>
@@ -408,7 +415,7 @@ function TierSHPage() {
          <div className="grid md:grid-cols-2 gap-8">
            <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.
@@ -416,7 +423,7 @@ function TierSHPage() {
            </Card>
            <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.
@@ -440,7 +447,7 @@ function TierSHPage() {
            </Card>
          </div>
          <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-blue-600 hover:underline">https://stats.grid.tf</a>
+            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>
@@ -465,16 +472,7 @@ function TierSHPage() {
      </section>

      {/* Footer */}
-      <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-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
-          </div>
-          <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. A new era of decentralized infrastructure.</p>
-        </div>
-      </footer>
+      <Footer />
    </div>
  )
 }
--- 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,53 +1,6 @@
@import "tailwindcss";
@import "tw-animate-css";

-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-  --radius: 0.5rem;
-}
-
-html[data-theme='dark'] {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-}
-
 body {
-  @apply bg-background text-foreground;
-
  transition: background-color 0.3s ease, color 0.3s ease;
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ import typography from '@tailwindcss/typography';

 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ['attribute', '[data-theme="dark"]'],
+  darkMode: 'class',
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,9 +5,12 @@ 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: ['*','6162370c7e84.ngrok-free.app','092443e84c95.ngrok-free.app'],
+    allowedHosts: ['919d3b60e744.ngrok-free.app'],
  },
  resolve: {
    alias: {
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