tfgrid/wwww_3node_tenstorrent
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk 2025-07-25 11:19:11 +02:00
parent 53a9d76691
commit dad67592d3
11 changed files with 551 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

380
fix_dark_light.md Normal file
View File

@ -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
#### NewHome.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.

98
src/components/BecomeMember.jsx
View File

@ -165,18 +165,18 @@ function DirectBuy() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{submitStatus === 'error' && ( {submitStatus === 'error' && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3"> <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-red-600" /> <AlertCircle className="h-5 w-5 text-destructive" />
<div> <div>
<h4 className="font-semibold text-red-800">Validation Error</h4> <h4 className="font-semibold text-destructive-foreground">Validation Error</h4>
<p className="text-red-700">Please fill in all required fields and correct any errors.</p> <p className="text-destructive">Please fill in all required fields and correct any errors.</p>
</div> </div>
</div> </div>
)} )}
<div className="space-y-6"> <div className="space-y-6">
{/* Personal Information */} {/* Personal Information */}
<div className="space-y-4"> <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" /> <User className="h-5 w-5" />
Your Details Your Details
</h3> </h3>
@ -221,11 +221,11 @@ function DirectBuy() {
{/* Unique Name */} {/* Unique Name */}
<div className="space-y-4"> <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" /> <Globe className="h-5 w-5" />
Choose Your Unique Name Choose Your Unique Name
</h3> </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="grid md:grid-cols-2 gap-4 items-end">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="uniqueNamePart1">First Part *</Label> <Label htmlFor="uniqueNamePart1">First Part *</Label>
@ -239,7 +239,7 @@ function DirectBuy() {
}} }}
placeholder="at least 6 lowercase letters" placeholder="at least 6 lowercase letters"
required 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>
<div className="space-y-2"> <div className="space-y-2">
@ -254,14 +254,14 @@ function DirectBuy() {
}} }}
placeholder="at least 6 lowercase letters" placeholder="at least 6 lowercase letters"
required 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>
</div> </div>
{uniqueNameError && <p className="text-red-500 text-sm">{uniqueNameError}</p>} {uniqueNameError && <p className="text-red-500 text-sm">{uniqueNameError}</p>}
</div> </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 Next: About You & Preferences
</Button> </Button>
</div> </div>
@ -279,18 +279,18 @@ function DirectBuy() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{submitStatus === 'error' && ( {submitStatus === 'error' && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3"> <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-red-600" /> <AlertCircle className="h-5 w-5 text-destructive" />
<div> <div>
<h4 className="font-semibold text-red-800">Validation Error</h4> <h4 className="font-semibold text-destructive-foreground">Validation Error</h4>
<p className="text-red-700">Please fill in all required fields and agree to the terms.</p> <p className="text-destructive">Please fill in all required fields and agree to the terms.</p>
</div> </div>
</div> </div>
)} )}
<div className="space-y-6"> <div className="space-y-6">
{/* Tell Us About Yourself (Optional) */} {/* Tell Us About Yourself (Optional) */}
<div className="space-y-4"> <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" /> <MessageSquare className="h-5 w-5" />
Tell Us About Yourself (Optional) Tell Us About Yourself (Optional)
</h3> </h3>
@ -331,7 +331,7 @@ function DirectBuy() {
{/* Preferences */} {/* Preferences */}
<div className="space-y-4"> <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" /> <Mail className="h-5 w-5" />
Communication Preferences Communication Preferences
</h3> </h3>
@ -358,16 +358,16 @@ function DirectBuy() {
required required
/> />
<Label htmlFor="terms" className="text-sm"> <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> </Label>
</div> </div>
</div> </div>
<div className="flex justify-between gap-4"> <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 Previous
</Button> </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 Next: Payment
</Button> </Button>
</div> </div>
@ -386,41 +386,41 @@ function DirectBuy() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{submitStatus === 'success' && ( {submitStatus === 'success' && (
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3"> <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-green-600" /> <CheckCircle className="h-5 w-5 text-emerald-600" />
<div> <div>
<h4 className="font-semibold text-green-800">Purchase Initiated!</h4> <h4 className="font-semibold text-emerald-800">Purchase Initiated!</h4>
<p className="text-green-700">Redirecting to secure Stripe checkout...</p> <p className="text-emerald-700">Redirecting to secure Stripe checkout...</p>
</div> </div>
</div> </div>
)} )}
{submitStatus === 'error' && ( {submitStatus === 'error' && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3"> <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-red-600" /> <AlertCircle className="h-5 w-5 text-destructive" />
<div> <div>
<h4 className="font-semibold text-red-800">Purchase Failed</h4> <h4 className="font-semibold text-destructive-foreground">Purchase Failed</h4>
<p className="text-red-700">There was an error processing your purchase. Please try again or contact support.</p> <p className="text-destructive">There was an error processing your purchase. Please try again or contact support.</p>
</div> </div>
</div> </div>
)} )}
<div className="space-y-6"> <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>. You are about to purchase a membership to ThreeFold Galaxy Coop for <span className="font-bold">$20 USD per month</span>.
</p> </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. Click "Proceed to Payment" to be redirected to Stripe's secure checkout page.
</p> </p>
<div className="flex justify-between gap-4"> <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 Previous
</Button> </Button>
<Button <Button
type="submit" type="submit"
onClick={handleBuy} 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} disabled={isSubmitting}
> >
{isSubmitting ? 'Processing...' : 'Proceed to Payment'} {isSubmitting ? 'Processing...' : 'Proceed to Payment'}
@ -436,17 +436,17 @@ function DirectBuy() {
} }
return ( 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 */} {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
{/* Hero Section */} {/* Hero Section */}
<section className="py-24 pb-16 px-4 sm:px-6 lg:px-8"> <section className="py-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto text-center space-y-8"> <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> <Badge className="bg-primary/10 text-primary hover:bg-blue-200">Direct Purchase</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight"> <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
Become A <span className="text-blue-600">Member</span> Become A <span className="text-primary">Member</span>
</h1> </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. Join ThreeFold Galaxy Coop's sovereign digital freezone for $20 USD per month.
</p> </p>
</div> </div>
@ -462,19 +462,19 @@ function DirectBuy() {
</section> </section>
{/* What Happens Next */} {/* 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="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12"> <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>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-white font-bold">1</span> <span className="text-primary-foreground font-bold">1</span>
</div> </div>
<CardTitle className="text-blue-600">Confirm Your Membership</CardTitle> <CardTitle className="text-primary">Confirm Your Membership</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Complete your secure Stripe checkout to confirm your ThreeFold Galaxy Coop membership. Complete your secure Stripe checkout to confirm your ThreeFold Galaxy Coop membership.
@ -483,10 +483,10 @@ function DirectBuy() {
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-white font-bold">2</span> <span className="text-primary-foreground font-bold">2</span>
</div> </div>
<CardTitle className="text-green-600">Access Your Benefits</CardTitle> <CardTitle className="text-emerald-600">Access Your Benefits</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Gain immediate access to member-exclusive content, tools, and community forums. Gain immediate access to member-exclusive content, tools, and community forums.
@ -496,7 +496,7 @@ function DirectBuy() {
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4"> <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> </div>
<CardTitle className="text-purple-600">Engage & Govern</CardTitle> <CardTitle className="text-purple-600">Engage & Govern</CardTitle>
</CardHeader> </CardHeader>
@ -509,14 +509,14 @@ function DirectBuy() {
</section> </section>
{/* Footer */} {/* 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="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <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> <span className="text-xl font-bold">ThreeFold Galaxy Coop</span>
</div> </div>
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-muted-foreground">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-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy Coop. A cooperative for digital freedom.</p>
</div> </div>
</footer> </footer>
</div> </div>

8
src/components/Blog.jsx
View File

@ -67,13 +67,13 @@ function Blog() {
<input <input
type="text" type="text"
placeholder="Search articles..." 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} value={searchTerm}
onChange={e => setSearchTerm(e.target.value)} onChange={e => setSearchTerm(e.target.value)}
/> />
<div className="relative w-full md:w-auto"> <div className="relative w-full md:w-auto">
<select <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} value={selectedTag}
onChange={e => setSelectedTag(e.target.value)} onChange={e => setSelectedTag(e.target.value)}
> >
@ -101,12 +101,12 @@ function Blog() {
<div className="p-6"> <div className="p-6">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
{post.tags && post.tags.map(tag => ( {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} {tag}
</span> </span>
))} ))}
</div> </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} {post.title}
</h2> </h2>
<p className="text-muted-foreground text-sm mb-4"> <p className="text-muted-foreground text-sm mb-4">

6
src/components/BlogPost.jsx
View File

@ -40,7 +40,7 @@ function BlogPost() {
<header className="text-center mb-8"> <header className="text-center mb-8">
<div className="flex justify-center items-center gap-2 mb-4"> <div className="flex justify-center items-center gap-2 mb-4">
{postData.tags && postData.tags.map(tag => ( {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} {tag}
</span> </span>
))} ))}
@ -105,7 +105,7 @@ function BlogPost() {
<li className="mb-1" {...props} /> <li className="mb-1" {...props} />
), ),
blockquote: ({node, ...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}) => code: ({node, inline, ...props}) =>
inline ? ( inline ? (
@ -123,7 +123,7 @@ function BlogPost() {
</div> </div>
<footer className="mt-12 text-center"> <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 &larr; Back to all posts
</Link> </Link>
</footer> </footer>

16
src/components/Navigation.jsx
View File

@ -15,12 +15,12 @@ function Navigation() {
} }
return ( return (
<nav className="fixed top-0 w-full bg-white dark:bg-slate-900 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
<Link to="/" className="flex items-center space-x-2"> <Link to="/" className="flex items-center space-x-2">
<Globe className="h-8 w-8 text-blue-600" /> <Globe className="h-8 w-8 text-primary" />
<span className="text-xl font-bold text-slate-900 dark:text-white">ThreeFold Galaxy</span> <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
</Link> </Link>
{/* Desktop Navigation */} {/* Desktop Navigation */}
@ -31,12 +31,12 @@ function Navigation() {
<Link <Link
key={item.path} key={item.path}
to={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} {item.label}
</Link> </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> <Link to="/register">Join Now</Link>
</Button> </Button>
<ThemeToggle /> <ThemeToggle />
@ -50,7 +50,7 @@ function Navigation() {
<Menu className="h-6 w-6" /> <Menu className="h-6 w-6" />
</Button> </Button>
</SheetTrigger> </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"> <div className="flex flex-col items-center space-y-4 pt-6">
{navigationData {navigationData
.filter(item => item.show !== false) .filter(item => item.show !== false)
@ -58,7 +58,7 @@ function Navigation() {
<SheetClose asChild key={item.path}> <SheetClose asChild key={item.path}>
<Link <Link
to={item.path} 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)} onClick={() => setIsMobileMenuOpen(false)}
> >
{item.label} {item.label}
@ -66,7 +66,7 @@ function Navigation() {
</SheetClose> </SheetClose>
))} ))}
<SheetClose asChild> <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> <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
</Button> </Button>
</SheetClose> </SheetClose>

42
src/components/ProductsPage.jsx
View File

@ -37,17 +37,17 @@ function ProductsPage() {
</p> </p>
<h3 className="text-2xl font-bold text-primary">Perfect For:</h3> <h3 className="text-2xl font-bold text-primary">Perfect For:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Development and testing environments</li>
</ul> </ul>
<h3 className="text-2xl font-bold text-primary">Technical Specifications:</h3> <h3 className="text-2xl font-bold text-primary">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Compatible with Kubernetes and container platforms</li>
</ul> </ul>
</div> </div>
@ -76,21 +76,21 @@ function ProductsPage() {
<div> <div>
<h3 className="text-2xl font-bold text-primary mb-4">Perfect For:</h3> <h3 className="text-2xl font-bold text-primary mb-4">Perfect For:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Regional cloud service providers</li>
</ul> </ul>
</div> </div>
<div> <div>
<h3 className="text-2xl font-bold text-primary mb-4">Technical Specifications:</h3> <h3 className="text-2xl font-bold text-primary mb-4">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-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-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-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-green-500" /> Deployed in under six months</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-green-500" /> Cyberpandemic and disaster-resilient</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-emerald-600" /> Cyberpandemic and disaster-resilient</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -109,7 +109,7 @@ function ProductsPage() {
<CardContent>Full control over data and operations.</CardContent> <CardContent>Full control over data and operations.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <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> <CardContent>Unlimited scalability without bottlenecks.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
@ -203,7 +203,7 @@ function ProductsPage() {
<div className="grid md:grid-cols-2 gap-8"> <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"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle> <CardTitle className="text-emerald-600">Tier-H Ideal For:</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-foreground"> <ul className="space-y-2 text-foreground">
@ -255,7 +255,7 @@ function ProductsPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">Hybrid Deployment</CardTitle> <CardTitle className="text-emerald-600">Hybrid Deployment</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations. Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations.

30
src/components/RegisterPage.jsx
View File

@ -202,9 +202,9 @@ function RegisterPage() {
{/* Hero Section */} {/* Hero Section */}
<section className="py-24 pb-16 px-4 sm:px-6 lg:px-8"> <section className="py-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto text-center space-y-8"> <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"> <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> </h1>
<p className="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions. 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 +234,7 @@ function RegisterPage() {
type="submit" type="submit"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isSubmitting || !formData.terms} 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'} {isSubmitting ? 'Submitting...' : 'Register Your Interest'}
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
@ -254,10 +254,10 @@ function RegisterPage() {
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <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-blue-600">1</span> <span className="text-2xl font-bold text-primary">1</span>
</div> </div>
<CardTitle className="text-blue-600">Confirmation & Assignment</CardTitle> <CardTitle className="text-primary">Confirmation & Assignment</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Receive a confirmation email and get assigned to the appropriate specialist within 24 hours. Receive a confirmation email and get assigned to the appropriate specialist within 24 hours.
@ -266,10 +266,10 @@ function RegisterPage() {
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> <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-green-600">2</span> <span className="text-2xl font-bold text-emerald-600">2</span>
</div> </div>
<CardTitle className="text-green-600">Personalized Consultation</CardTitle> <CardTitle className="text-emerald-600">Personalized Consultation</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Within 1 week, receive a personalized consultation call and a custom proposal or assessment. Within 1 week, receive a personalized consultation call and a custom proposal or assessment.
@ -299,11 +299,11 @@ function RegisterPage() {
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<Card className="hover:shadow-lg transition-shadow"> <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> <CardContent>A: Tier-H nodes start at under $5,000. Tier-S deployments vary based on scale and requirements.</CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <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> <CardContent>A: Tier-H nodes can be deployed in minutes. Tier-S datacenters typically deploy in 3-6 months.</CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow">
@ -328,11 +328,11 @@ function RegisterPage() {
<h2 className="text-3xl md:text-4xl font-bold text-foreground">Join Leading Organizations Already Building the Future</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Join Leading Organizations Already Building the Future</h2>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow">
<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> <CardContent>Global reach and decentralized presence.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <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> <CardContent>Trusted by public sector for digital sovereignty.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow">
@ -347,7 +347,7 @@ function RegisterPage() {
<p className="text-lg text-muted-foreground mt-8"> <p className="text-lg text-muted-foreground mt-8">
Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots. Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots.
</p> </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> </div>
</section> </section>
@ -355,7 +355,7 @@ function RegisterPage() {
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-background text-foreground"> <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="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <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</span> <span className="text-xl font-bold">ThreeFold Galaxy</span>
</div> </div>
<p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>

94
src/components/TechnologyPage.jsx
View File

@ -55,8 +55,8 @@ function TechnologyPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Database className="w-16 h-16 mx-auto mb-4 text-green-600" /> <Database className="w-16 h-16 mx-auto mb-4 text-emerald-600" />
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle> <CardTitle className="text-emerald-600">Quantum-Safe Storage</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-1 text-sm text-foreground"> <ul className="space-y-1 text-sm text-foreground">
@ -96,18 +96,18 @@ function TechnologyPage() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Core Principles:</h3> <h3 className="text-2xl font-bold text-primary">Core Principles:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> <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-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-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>Stateless:</strong> Immune to corruption</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Unique:</h3> <h3 className="text-2xl font-bold text-primary">Unique:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-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-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-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-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-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-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>Deterministic Execution:</strong> Reproducible, tamper-proof workloads</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -115,7 +115,7 @@ function TechnologyPage() {
<h3 className="text-2xl font-bold text-primary mb-6">Technical Advantages:</h3> <h3 className="text-2xl font-bold text-primary mb-6">Technical Advantages:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <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"> <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> <CardContent>Ensures integrity of all components.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
@ -145,14 +145,14 @@ function TechnologyPage() {
<img src={quantumSafeImage} alt="Quantum Safe Storage" className="w-full h-auto rounded-lg shadow-lg" /> <img src={quantumSafeImage} alt="Quantum Safe Storage" className="w-full h-auto rounded-lg shadow-lg" />
</div> </div>
<div className="md:col-span-1 space-y-6"> <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"> <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" /> 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" /> 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" /> 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> <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> </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"> <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" /> No single node knows what it stores</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Cryptographic proof without data exposure</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Cryptographic proof without data exposure</li>
@ -201,7 +201,7 @@ function TechnologyPage() {
<CardContent>Ensures continuity even during major disruptions.</CardContent> <CardContent>Ensures continuity even during major disruptions.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <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> <CardContent>Facilitates direct communication between users.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
@ -226,19 +226,19 @@ function TechnologyPage() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Geo-Aware Infrastructure:</h3> <h3 className="text-2xl font-bold text-primary">Geo-Aware Infrastructure:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Resilient to geopolitical disruptions</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Smart Contract for IT:</h3> <h3 className="text-2xl font-bold text-primary">Smart Contract for IT:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Autonomous management without human intervention</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -324,20 +324,20 @@ function TechnologyPage() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Currently Available:</h3> <h3 className="text-2xl font-bold text-primary">Currently Available:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Web Gateway: Production</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Coming H2 2025:</h3> <h3 className="text-2xl font-bold text-primary">Coming H2 2025:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Enhanced enterprise features</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
@ -366,19 +366,19 @@ function TechnologyPage() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Open Source Components:</h3> <h3 className="text-2xl font-bold text-primary">Open Source Components:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> No vendor lock-in</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Standards Compliance:</h3> <h3 className="text-2xl font-bold text-primary">Standards Compliance:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Blockchain interoperability</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
@ -407,19 +407,19 @@ function TechnologyPage() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Cryptographic Foundation:</h3> <h3 className="text-2xl font-bold text-primary">Cryptographic Foundation:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Immutable audit trails</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-primary">Compliance Features:</h3> <h3 className="text-2xl font-bold text-primary">Compliance Features:</h3>
<ul className="space-y-3 text-lg text-foreground"> <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-emerald-600" /> 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-emerald-600" /> 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-emerald-600" /> 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" /> Data residency guarantees</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -431,7 +431,7 @@ function TechnologyPage() {
<CardContent>Stateless OS prevents persistent threats.</CardContent> <CardContent>Stateless OS prevents persistent threats.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <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> <CardContent>Distributed architecture mitigates attacks.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">

4
src/components/ThemeToggle.jsx
View File

@ -4,7 +4,7 @@ const ThemeToggle = () => {
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light'); const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
useEffect(() => { useEffect(() => {
document.documentElement.classList.toggle('dark', theme === 'dark'); document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme); localStorage.setItem('theme', theme);
}, [theme]); }, [theme]);
@ -15,7 +15,7 @@ const ThemeToggle = () => {
return ( return (
<button <button
onClick={toggleTheme} 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' ? '🌙' : '☀️'} {theme === 'light' ? '🌙' : '☀️'}
</button> </button>

44
src/components/TierSHPage.jsx
View File

@ -29,7 +29,7 @@ function TierSHPage() {
<div className="space-y-4"> <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 Infrastructure</Badge>
<h1 className="text-2xl md:text-4xl font-bold text-foreground leading-tight"> <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 <span className="text-primary">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
</h1> </h1>
<p className="text-xl text-muted-foreground leading-relaxed"> <p className="text-xl text-muted-foreground leading-relaxed">
ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control. 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.
@ -73,8 +73,8 @@ function TierSHPage() {
<div className="grid md:grid-cols-2 gap-8"> <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"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" /> <Cpu className="w-16 h-16 mx-auto mb-4 text-primary" />
<CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle> <CardTitle className="text-primary">Tier-S Datacenters</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <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> <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,8 +82,8 @@ function TierSHPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Home className="w-16 h-16 mx-auto mb-4 text-green-600" /> <Home className="w-16 h-16 mx-auto mb-4 text-emerald-600" />
<CardTitle className="text-green-600">Tier-H Datacenters</CardTitle> <CardTitle className="text-emerald-600">Tier-H Datacenters</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <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 ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
@ -105,8 +105,8 @@ function TierSHPage() {
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" /> <Cpu className="w-12 h-12 mx-auto mb-4 text-primary" />
<CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle> <CardTitle className="text-primary">Compute, Storage, Networking</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Your building can produce essential digital resources. Your building can produce essential digital resources.
@ -114,8 +114,8 @@ function TierSHPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Brain className="w-12 h-12 mx-auto mb-4 text-green-600" /> <Brain className="w-12 h-12 mx-auto mb-4 text-emerald-600" />
<CardTitle className="text-green-600">AI Inference Power</CardTitle> <CardTitle className="text-emerald-600">AI Inference Power</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Host AI workloads and contribute to decentralized AI. Host AI workloads and contribute to decentralized AI.
@ -149,7 +149,7 @@ function TierSHPage() {
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <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" /> <DollarSign className="h-5 w-5" />
Passive Digital Revenue Passive Digital Revenue
</CardTitle> </CardTitle>
@ -160,7 +160,7 @@ function TierSHPage() {
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <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" /> <TrendingUp className="h-5 w-5" />
Higher Property Value Higher Property Value
</CardTitle> </CardTitle>
@ -229,8 +229,8 @@ function TierSHPage() {
<div className="grid md:grid-cols-3 gap-8"> <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"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" /> <Cpu className="w-12 h-12 mx-auto mb-4 text-primary" />
<CardTitle className="text-blue-600">Zero-OS</CardTitle> <CardTitle className="text-primary">Zero-OS</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Stateless, self-healing operating system for autonomous compute. Stateless, self-healing operating system for autonomous compute.
@ -238,8 +238,8 @@ function TierSHPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Database className="w-12 h-12 mx-auto mb-4 text-green-600" /> <Database className="w-12 h-12 mx-auto mb-4 text-emerald-600" />
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle> <CardTitle className="text-emerald-600">Quantum-Safe Storage</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Unbreakable data protection with 10x efficiency through mathematical dispersion. Unbreakable data protection with 10x efficiency through mathematical dispersion.
@ -303,7 +303,7 @@ function TierSHPage() {
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full bg-card rounded-lg shadow-md"> <table className="min-w-full bg-card rounded-lg shadow-md">
<thead> <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">Service</th>
<th className="py-3 px-4 text-left">ThreeFold</th> <th className="py-3 px-4 text-left">ThreeFold</th>
<th className="py-3 px-4 text-left">Other Providers</th> <th className="py-3 px-4 text-left">Other Providers</th>
@ -341,7 +341,7 @@ function TierSHPage() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <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"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <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" /> <Shield className="h-5 w-5" />
Governments Governments
</CardTitle> </CardTitle>
@ -352,7 +352,7 @@ function TierSHPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <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" /> <Network className="h-5 w-5" />
Telecoms and ISPs Telecoms and ISPs
</CardTitle> </CardTitle>
@ -408,7 +408,7 @@ function TierSHPage() {
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-blue-600">Live in over 50 countries</CardTitle> <CardTitle className="text-primary">Live in over 50 countries</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Our decentralized grid spans across the globe. Our decentralized grid spans across the globe.
@ -416,7 +416,7 @@ function TierSHPage() {
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle> <CardTitle className="text-emerald-600">60,000+ CPU cores active</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Massive computational power available on the grid. Massive computational power available on the grid.
@ -440,7 +440,7 @@ function TierSHPage() {
</Card> </Card>
</div> </div>
<p className="text-center text-lg text-muted-foreground mt-8"> <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> </p>
</div> </div>
</section> </section>
@ -468,7 +468,7 @@ function TierSHPage() {
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground"> <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="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <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</span> <span className="text-xl font-bold">ThreeFold Galaxy</span>
</div> </div>
<p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>

45
src/styles/index.css
View File

@ -1,51 +1,6 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @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 { body {
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }