...
This commit is contained in:
parent
53a9d76691
commit
dad67592d3
380
fix_dark_light.md
Normal file
380
fix_dark_light.md
Normal 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.
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
← Back to all posts
|
||||
</Link>
|
||||
</footer>
|
||||
|
||||
@ -15,12 +15,12 @@ function Navigation() {
|
||||
}
|
||||
|
||||
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="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>
|
||||
|
||||
@ -37,17 +37,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 +76,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 +109,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 +203,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 +255,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.
|
||||
|
||||
@ -202,9 +202,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 +234,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 +254,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 +266,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.
|
||||
@ -299,11 +299,11 @@ function RegisterPage() {
|
||||
</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 +328,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,7 +347,7 @@ 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>
|
||||
|
||||
@ -355,7 +355,7 @@ function RegisterPage() {
|
||||
<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" />
|
||||
<Globe className="h-6 w-6 text-primary" />
|
||||
<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>
|
||||
|
||||
@ -55,8 +55,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">
|
||||
@ -96,18 +96,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>
|
||||
@ -115,7 +115,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">
|
||||
@ -145,14 +145,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>
|
||||
@ -201,7 +201,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">
|
||||
@ -226,19 +226,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>
|
||||
@ -324,20 +324,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">
|
||||
@ -366,19 +366,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">
|
||||
@ -407,19 +407,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>
|
||||
@ -431,7 +431,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">
|
||||
|
||||
@ -4,7 +4,7 @@ const ThemeToggle = () => {
|
||||
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle('dark', theme === 'dark');
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -29,7 +29,7 @@ function TierSHPage() {
|
||||
<div className="space-y-4">
|
||||
<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">
|
||||
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>
|
||||
<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.
|
||||
@ -73,8 +73,8 @@ function TierSHPage() {
|
||||
<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,8 +82,8 @@ 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>
|
||||
@ -105,8 +105,8 @@ function TierSHPage() {
|
||||
<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 +114,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 +149,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 +160,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 +229,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 +238,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 +303,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>
|
||||
@ -341,7 +341,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 +352,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 +408,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 +416,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 +440,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>
|
||||
@ -468,7 +468,7 @@ function TierSHPage() {
|
||||
<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" />
|
||||
<Globe className="h-6 w-6 text-primary" />
|
||||
<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>
|
||||
|
||||
@ -1,51 +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 {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user