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-24 09:38:35 +02:00
parent d766cb72c8
commit 5539e67fde
109 changed files with 12778 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.gitignore vendored Normal file
View File

@ -0,0 +1,31 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
pnpm-debug.log*
# Dependency directories
node_modules/
pnpm-lock.yaml
# Build artifacts
dist/
build/
# Environment variables
.env
.env.local
.env.*.local
# macOS specific files
.DS_Store
# IDE specific files
.vscode/
# Coverage reports
coverage/
# Vercel specific files
.vercel/

2
README.md
View File

@ -1,2 +1,2 @@
# wwww_3node_tenstorrent
# ourworldcoop

3
build.sh Executable file
View File

@ -0,0 +1,3 @@
#!/bin/bash
cd "$(dirname "$0")"
pnpm run build

21
components.json Normal file
View File

@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": false,
"tailwind": {
"config": "",
"css": "src/App.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}

3
dev.sh Executable file
View File

@ -0,0 +1,3 @@
#!/bin/bash
cd "$(dirname "$0")"
pnpm run dev

33
eslint.config.js Normal file
View File

@ -0,0 +1,33 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...reactHooks.configs.recommended.rules,
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OurWorld Coop - Building the New Internet Together</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

26
install.sh Executable file
View File

@ -0,0 +1,26 @@
#!/bin/bash
cd "$(dirname "$0")"
# Check if pnpm is installed
if ! command -v pnpm &> /dev/null
then
echo "pnpm not found, installing using the universal installer..."
# Check if curl is installed
if ! command -v curl &> /dev/null
then
echo "curl not found. Please install curl first."
exit 1
fi
# Check if sh is available
if ! command -v sh &> /dev/null
then
echo "sh not found. This script requires a shell interpreter."
exit 1
fi
curl -fsSL https://get.pnpm.io/install.sh | sh -
echo "Please restart your terminal or run 'source ~/.bashrc' (or equivalent) to add pnpm to your PATH."
else
echo "pnpm is already installed."
fi
pnpm install

8
jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}

195
openfuture.md Normal file
View File

@ -0,0 +1,195 @@
# An Open Future
*Source: https://openfuture.tenstorrent.com/*
*Version: V1.0 4/2025*
## Mapping the Open Territory
---
## Part 1: How We Got Here
AI is changing the laws that once governed computing.
Until recently, Bell's Law gave us an accurate frame for understanding computing revolutions, stating that each decade a new class of computing emerges, resulting in a fundamental shift in access¹.
We went from mainframes in the 1950s, to minicomputers in the 1960s, to super computers in the 1970s, to personal computers in the 1980s, to the world-wide web in the 1990s, and mobile in the 2000s.
These revolutions allowed us to make computers that were much more accessible – simultaneously driving performance up 10X while also driving cost down 10x. In 1981, a fully loaded IBM PC cost $4500². Today, an iPhone, which is many millions of times faster³, retails for $1,129⁴. Through this process we got very good at building very powerful computers with very small chips.
### Timeline of Open
**THE FIRST COMMERCIAL MAINFRAME COMPUTER, RELEASED IN 1948 BY THE ECKERT-MAUCHLY COMPUTER CORPORATION (EMCC).**
*Timeline showing evolution from 1950-2000:*
- 1950: MAINFRAMES
- 1960: MINICOMP
- 1970: PC
- 1980: BROWSER
- 1990-2000: Various milestones including UNIVAC, 12-BIT PDP-8 IC CHIP, INTEL 4004, MINITEL, WWW, LINUX, "OPEN SOURCE", MOZILLA, RED HAT, DRAM, IBM ANTI-TRUST LAWSUIT, UNIX, ETHERNET
---
AI is changing the laws that once governed computing.
AI is valuable enough to warrant this kind of investment. It is literally, as Andrej Karpathy said, "Software 2.0"⁸.
It isn't just an efficiency gain, like previous revolutions. AI creates knowledge that we didn't have before. It is unprecedented how quickly AI can navigate nearly inconceivable amounts of data and complexity. It will ask questions we didn't even know to ask. It will destroy previous industries and create new ones. Those that know how to leverage it, and can afford to, will reap the rewards.
But we can't assume that we'll return to the historical trend of falling costs and broadening access. We're at a critical juncture. As companies build out their AI stack, they are making a choice today that will determine the future. Companies can invest in closed systems, further concentrating leverage in the hands of a few players, or they can retain agency by investing in open systems, which are affordable, transparent, and modifiable.
But we can't assume that we'll return to the historical trend of falling costs and broadening access. We're at a critical juncture. As companies build out their AI stack, they are making a choice today that will determine the future.
Every shift created new leaders, sidelined old ones, and required adaptation. From a social perspective, these innovations gave many more people access to compute.
However, prices aren't dropping with the advent of Artificial Intelligence. While cost per math operation is going down, the actual cost of inference per token is still climbing⁹ as models are getting larger (eg. GPT-4⁵), doing more work (e.g. "reasoning models"), and doing work that is more intensive (e.g. new GPU generation). AI datacenters are orders of magnitude more powerful than previous generations with spending rising by tens of billions year-over-year⁶. Even if we eventually see some cost reductions, it will take time before they reach affordability, leaving everyone besides a few in the dust of the AI revolution.
Why is this computer class more expensive? AI is extremely physically intensive – requiring more silicon, more energy, more resources. From shifting the physics of compute at the transistor level to building out the global infrastructure of AI data centers, this revolution is pushing against the physical limitations of human industry⁷.
If Bell's Law breaks fully, AI will be the first computing revolution that doesn't increase access, but instead concentrates it. We saw hints of this concentration effect with the previous computer class. Jonathan Zittrain argues that the cloud has put accessibility at risk leaving "new gatekeepers in place, with us and our limited business plans and to regulators who fear things that are new and disruptive⁹." Unlike hyperscalers before it, AI threatens to tip consolidation into full enclosure.
If AI eats everything, like software has eaten everything¹⁰, this means that open versus closed is a referendum on the future shape of society as a whole.
A handful of companies will own the means of intelligence production, and everyone else will purchase access at whatever price they set. As many have warned, this will represent a new form of social stratification.
It is clear to us that open is existential.
---
## Part 2: A Closed World
This isn't the first time we've been presented with a choice between a closed or open future. In fact, we're living in a closed world today because of choices made for us 40+ years ago. Early minicomputer and PC culture was dominated by a hacker ethos defined by "access to computers... and the Hands-On Imperative¹¹." By the late 90s and early 00s, PC development became dominated by Windows and Intel at the cost of limiting innovation while hamstringing¹² competitors and partners alike¹³.
How do closed worlds form? One word: swamps. A swamp is a moat gone stagnant from incumbents who have forgotten how to innovate.
### Innovation Ownership Diagrams
**FIGURE 1. CLOSED**
- Shows a single "VERTICAL OWNER" in the center
- No leverage or choice in dealings
**FIGURE 2. PROPRIETARY**
- Shows "PROPRIETARY OWNER" surrounded by multiple "CUSTOMER" boxes
- No control of roadmap or features while incurring higher development and product costs
**FIGURE 3. OPEN**
- Shows "OPEN FOUNDATION" surrounded by multiple "CUSTOMER" boxes in a collaborative arrangement
- You drive and control the future
The writing is on the wall for AI. We are veering towards a closed world where the constellation of technology companies are fighting over scraps. Competition, innovation, and sustainable business can't thrive in this low-oxygen environment.
How do closed worlds form? One word: swamps. A swamp is a moat gone stagnant from incumbents who have forgotten how to innovate.
There are many ways to produce a swamp. They can protect a product by overcomplicating it, adding unnecessary proprietary systems and layers of abstraction. They can charge rents, in the form of license fees. They can pile on features just enough to justify an upgrade to customers, while staying disconnected from what they actually need. And if they want to get really clever, they can offer something "for free" as an inseparable part of a bundled service in order to lock out competition.
However it happens, what started as innovation becomes just an extra tax on the product, erecting monopolies instead of creating real value. These companies become incentivized to preserve the status quo, rather than changing.
But, as we've seen before, the world always changes.
---
## Part 3: An Open World
Open source has a way of infiltrating crucial computing applications. The internet runs on it¹⁹. The entire AI research stack uses open source frameworks. Even proprietary tech relies on it with 90% of Fortune 500 companies using open source software²⁰. There wouldn't be macOS without BSD Unix, Azure without Linux, or Netflix without FFmpeg.
Open source and its hardware equivalent, open standards, have repeatedly catalyzed mass adoption by reducing friction and enabling interoperability. Robert Metcalf says the openness of ethernet allowed it to beat rival standards²¹. DRAM enabled the mass adoption of PCs with high-capacity, low-cost memory, while PCIe enabled high-speed interoperability of PC components. Similarly, Open Compute Project specs, used by Meta and Microsoft among others, standardized rack and server design, so components could be modular and vendor-agnostic²².
RISC-V is the hardware equivalent of Linux for AI hardware.
RISC-V is the hardware equivalent of Linux for AI hardware. It launched in 2010 at UC Berkeley as a free, open standard alternative to proprietary architectures like Intel's x86 and ARM²³. Its open nature allows it to be deeply customized, making it especially desirable for AI and edge computing applications, and it is royalty-free. RISC-V's ISA is gaining incredible adoption, with companies from Google to us at Tenstorrent adopting it for custom silicon.
Open systems also attract a global talent pool. Linux itself is the shining example of this, constructed by thousands of engineers, with significant contributions coming both from independent outsiders and employees of major players like Intel and Google²⁴.
We believe open is the default state – what remains when artificial boundaries fall away. The only question is how long those boundaries hold, and how much progress will be delayed in the meantime.
### The AI Stack - Closed Today
Today, parts of the AI stack are open, parts are closed, and parts have yet to be decided. Let's look at a few of the layers:
#### 🔧 HARDWARE
**● CLOSED**
Most hardware today is a black box, literally. You're reliant on a company to fix, optimize, and, at times, even implement your workloads.
#### 📊 LOW LEVEL SOFTWARE
**● CLOSED**
Most parallelization software is proprietary causing unnecessary lock-in and massive switching costs.
#### 🧠 MODELS
**● MIXED**
Models are mixed, but most of the leading ones are closed. The models that are open share limited data, with little to no support, and have no promises of staying open in the future.
#### </> APPLICATIONS
**● CLOSED**
Even if an application is using an open source model, most are built using cloud platform APIs. This means your data is being pooled to train the next gen models.
The current stack tells a story of closed engulfing open, stopping innovation in its tracks – a classic swamp.
Opening up AI hardware, with open standards like RISC-V, and its associated software would trigger a domino effect upstream. It would enable "a world where mainstream technology can be influenced, even revolutionized, out of left field²⁵." This means a richer future with more experimentation and more breakthroughs we can barely imagine today, like personalized cancer vaccines²⁶, natural disaster prediction²⁷, and abundant energy²⁸. And this world gets here a lot faster outside of a swamp.
There's an old Silicon Valley adage – if you aren't paying you are the product. In AI, we've been paying steeply for the product, but we still are the product. We have collectively generated the information being used to train AI, and are feeding it more every day.
In a closed world, AI owns everything, and that AI is owned by a few. Opening up hardware and software means a future where AI doesn't own you.
---
## Part 4: Building an Open Future
At Tenstorrent, we're committed to building an open future for AI.
Open can mean a lot of things. For us, open means affordable, transparent, and modifiable.
### AFFORDABLE
AI hardware shouldn't be a luxury product. Universal access to intelligence requires reasonable costs. The future deserves a proliferation of AI applications, not just a few businesses capable of surviving on tiny margins thinned by monopoly rents.
### TRANSPARENT
You don't really own it unless you understand what you own, which is why we don't sell black boxes. Our hardware is built on open standards, with each layer of the stack built from first principles for complete navigability resulting in transparency.
### MODIFIABLE
You should be able to choose what you want and what you don't want. Open shouldn't be another form of control. It should empower you to create your own tech stack that suits your specific needs.
It will not be easy to achieve this open future. Hardware resists openness, and software isn't exempt either. Most developers rely on copyright law, which is automatic and offers the same protection for jingles and songs. Change a few lines of code, or a shape in a drawing, and it's a new work. Software patents muddy the waters, locking down broad concepts with vague claims. And hardware's worse where patents are the default. Surmounting the burden of patent law means we need to create a full-stack hardware and software company, or create a consortium of companies.
We, at Tenstorrent, are doing both.
To that end, we're building up organizational excellence across multiple verticals from hardware to software because if we don't, then closed systems will continue to block innovation. It's necessary that the entire stack be open, otherwise we'll remain in the swamp we're in today.
We are also opening up our technology. Our IP is transparent, our architectures are open, and our software is open source so you can edit, select, fork, and own your silicon future.
Join us.
## Own Your Silicon Future
[Tenstorrent Github →](https://github.com/tenstorrent)
---
*References:*
1. Bell's Law reference
2. IBM PC cost reference
3. iPhone performance comparison
4. iPhone pricing reference
5. GPT-4 reference
6. AI datacenter spending reference
7. Physical limitations reference
8. Andrej Karpathy "Software 2.0" reference
9. Cost per token reference
10. "Software eating everything" reference
11. Hacker ethos reference
12. Innovation limitation reference
13. Competitor hamstringing reference
19. Internet open source reference
20. Fortune 500 open source usage
21. Robert Metcalf ethernet reference
22. Open Compute Project reference
23. RISC-V Berkeley reference
24. Linux global talent reference
25. Technology influence reference
26. Personalized cancer vaccines reference
27. Natural disaster prediction reference
28. Abundant energy reference

83
package.json Normal file
View File

@ -0,0 +1,83 @@
{
"name": "ourworld-coop-website",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@hookform/resolvers": "^5.0.1",
"@radix-ui/react-accordion": "^1.2.10",
"@radix-ui/react-alert-dialog": "^1.1.13",
"@radix-ui/react-aspect-ratio": "^1.1.6",
"@radix-ui/react-avatar": "^1.1.9",
"@radix-ui/react-checkbox": "^1.3.1",
"@radix-ui/react-collapsible": "^1.1.10",
"@radix-ui/react-context-menu": "^2.2.14",
"@radix-ui/react-dialog": "^1.1.13",
"@radix-ui/react-dropdown-menu": "^2.1.14",
"@radix-ui/react-hover-card": "^1.1.13",
"@radix-ui/react-label": "^2.1.6",
"@radix-ui/react-menubar": "^1.1.14",
"@radix-ui/react-navigation-menu": "^1.2.12",
"@radix-ui/react-popover": "^1.1.13",
"@radix-ui/react-progress": "^1.1.6",
"@radix-ui/react-radio-group": "^1.3.6",
"@radix-ui/react-scroll-area": "^1.2.8",
"@radix-ui/react-select": "^2.2.4",
"@radix-ui/react-separator": "^1.1.6",
"@radix-ui/react-slider": "^1.3.4",
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-switch": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.11",
"@radix-ui/react-toggle": "^1.1.8",
"@radix-ui/react-toggle-group": "^1.1.9",
"@radix-ui/react-tooltip": "^1.2.6",
"@stripe/stripe-js": "^7.6.1",
"@tailwindcss/vite": "^4.1.7",
"buffer": "^6.0.3",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"date-fns": "^4.1.0",
"embla-carousel-react": "^8.6.0",
"framer-motion": "^12.15.0",
"gray-matter": "^4.0.3",
"input-otp": "^1.4.2",
"lucide-react": "^0.510.0",
"next-themes": "^0.4.6",
"react": "^19.1.0",
"react-day-picker": "8.10.1",
"react-dom": "^19.1.0",
"react-hook-form": "^7.56.3",
"react-markdown": "^9.0.1",
"react-resizable-panels": "^3.0.2",
"react-router-dom": "^7.6.1",
"recharts": "^2.15.3",
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.0",
"sonner": "^2.0.3",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^4.1.7",
"vaul": "^1.1.2",
"zod": "^3.24.4"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@tailwindcss/typography": "^0.5.16",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"tw-animate-css": "^1.2.9",
"vite": "^6.3.5"
},
"packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
}

2
public/_redirects Normal file
View File

@ -0,0 +1,2 @@

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

30
specs/0_structure_vision.md Normal file
View File

@ -0,0 +1,30 @@
# Website Vision and Structure
## Purpose of the Site
The purpose of the OurWorld Coop website is to introduce and attract members, users, and investors to a new digital ecosystem built on the principles of sovereignty, decentralization, and collective intelligence.
The website serves as the primary informational and onboarding platform for a multi-faceted initiative that includes:
- **OurWorld Coop:** A cooperative movement for a new, fair, and user-owned internet.
- **HERO:** A sovereign, personal AI companion that acts as the user's agent in the digital world.
- **Digital Freezone:** A sovereign digital territory providing a unique legal and governance framework.
- **OurWorld Venture Creator:** A holding company designed to fund and scale the technologies and ventures that form the foundation of this new internet.
The site aims to communicate a compelling vision for a better digital future and provide clear pathways for different audiences to get involved, whether by becoming a cooperative member, registering interest in the HERO product, or exploring investment opportunities.
## Website Structure
The website is structured across several key pages, each designed to address a specific aspect of the OurWorld ecosystem and guide different user journeys.
- **Homepage (`/`):** Serves as the main entry point, providing a high-level overview of the entire vision. It introduces the core problems with the current internet and presents OurWorld Coop as the solution. It briefly touches on HERO and the Digital Freezone and directs users to learn more or become a member.
- **HERO (`/hero`):** This page focuses exclusively on the HERO product. It details what HERO is (a sovereign AI companion), why it matters (a shift towards collective intelligence), what it can do for the user (learn, heal, create), and the principles it's built on (privacy, cultural relevance).
- **How It Works (`/how-it-works`):** This page delves into the technical architecture of HERO. It explains that HERO runs on the ThreeFold Grid, a decentralized internet, and details the security, sovereignty, and resilience features this provides. It's aimed at a more technically-minded audience.
- **Digital Freezone (`/digital-freezone`):** This page explains the unique governance and legal foundation of the OurWorld ecosystem. It defines what a digital freezone is and describes its core components: digital sovereignty, cooperative governance, and fair dispute resolution.
- **Venture Creator (`/holding`):** This page targets potential investors. It introduces OurWorld Venture Creator, a holding company that funds a portfolio of synergistic startups building the new internet. It outlines the investment opportunity, the portfolio companies, and the path to a potential IPO.
- **Become a Member (`/register`):** This is the primary call-to-action page for joining the cooperative. It details the membership offer ($20/month) and provides a multi-step form for users to register their interest and eventually make a payment.

114
specs/1_homepage.md Normal file
View File

@ -0,0 +1,114 @@
# Page: Homepage - ThreeFold Tier-S & Tier-H Datacenters
## Why This Page Exists
This is the main landing page for ThreeFold's decentralized datacenter solutions. Its purpose is to introduce the revolutionary concept of Tier-S and Tier-H datacenters, demonstrate the value proposition of transforming real estate into digital infrastructure, and drive visitors toward learning more about products or registering interest. It positions ThreeFold as the leader in decentralized, sovereign digital infrastructure.
## Target Audience
The target audience consists of:
- Real estate developers and property owners seeking new revenue streams
- Government officials and policymakers interested in digital sovereignty
- Telecom companies and ISPs looking to deploy local compute grids
- Enterprise developers and startups seeking cloud independence
- AI and Web3 companies needing scalable, cost-effective infrastructure
- Communities seeking digital resilience and sovereignty
## What We Want to Say
The core message is that traditional centralized datacenters are obsolete. ThreeFold offers a better alternative through decentralized Tier-S and Tier-H datacenters that transform buildings into digital utilities, providing sovereign, resilient, and energy-efficient infrastructure that keeps data local and generates passive revenue.
## Content Breakdown
### 1. Hero Section: The Future of Digital Infrastructure
* **What we say:** A bold opening about revolutionizing digital infrastructure through decentralized datacenters that transform real estate into digital utilities.
* **Extracted Text:**
> Transform Your Building Into a Digital Powerhouse. The Future of Infrastructure is Decentralized.
> 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.
### 2. What Are Tier-S and Tier-H?
* **What we say:** Clear explanation of the two datacenter types and their applications.
* **Extracted Text:**
> **Tier-S Datacenters:** 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.
>
> **Tier-H Datacenters:** Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (<10W per node) and zero maintenance.
### 3. From Real Estate to Digital Infrastructure
* **What we say:** Analogy to solar panels and explanation of the transformation opportunity.
* **Extracted Text:**
> Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
> Your building can produce:
> - Compute, storage, and networking capacity
> - AI inference power
> - Recurring digital revenue
>
> Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
### 4. Why Real Estate Developers Should Join
* **What we say:** Clear value proposition with concrete benefits.
* **Extracted Text:**
> **Passive Digital Revenue:** Monetize idle compute, bandwidth, and storage
> **Higher Property Value:** Market properties as cloud-enabled
> **Green & Resilient:** 10x less energy vs traditional datacenters
> **Turnkey Deployment:** No IT expertise required
> **Sovereign Cloud:** Data stays local and private
> **Future-Proof:** Supports AI, Web3, digital twins, and modern applications
### 5. Technical Advantages
* **What we say:** Key differentiators that make ThreeFold superior.
* **Extracted Text:**
> **Built on Revolutionary Technology:**
> - Zero-OS: Stateless, self-healing operating system
> - Quantum-Safe Storage: Unbreakable data protection with 10x efficiency
> - Mycelium Network: Mesh networking that routes around failures
> - Smart Contract for IT: Autonomous, cryptographically secured deployments
> - Geo-Aware AI: Private AI agents that respect boundaries and sovereignty
### 6. Real Cost Comparison
* **What we say:** Concrete cost advantages to demonstrate value.
* **Extracted Text:**
> **Dramatic Cost Savings:**
> - Storage (1TB + 100GB Transfer): Less than $5/month vs $12–$160/month elsewhere
> - Compute (2 vCPU, 4GB RAM): Less than $12/month vs $20–$100/month elsewhere
> - Up to 10x more energy efficient than traditional datacenters
### 7. Who It's For
* **What we say:** Clear target markets and use cases.
* **Extracted Text:**
> **Perfect For:**
> - Governments building sovereign AI and cloud infrastructure
> - Telecoms and ISPs deploying local compute grids
> - Developers and startups seeking cloud independence
> - AI and Web3 companies hosting inference or full-stack apps
> - Communities seeking plug-and-play digital resilience
### 8. Proven at Scale
* **What we say:** Social proof and current deployment statistics.
* **Extracted Text:**
> **Already Deployed Globally:**
> - Live in over 50 countries
> - 60,000+ CPU cores active
> - Over 1 million contracts processed on-chain
> - Proven technology stack in production for years
>
> View live statistics: [https://stats.grid.tf](https://stats.grid.tf)
### 9. Call to Action
* **What we say:** Clear next steps for different audience segments.
* **Extracted Text:**
> **Ready to Transform Your Infrastructure?**
>
> **For Real Estate Developers:** Deploy Tier-H nodes and start earning digital revenue
> **For Enterprises:** Scale with Tier-S datacenters for your region
> **For Everyone:** Join the most resilient, inclusive, and intelligent internet
>
> The future of digital infrastructure starts with your building.

201
specs/2_products.md Normal file
View File

@ -0,0 +1,201 @@
# Page: Products - ThreeFold Datacenter Solutions
## Why This Page Exists
This page provides detailed information about ThreeFold's two main products: Tier-S and Tier-H. It serves as a comprehensive product catalog that helps visitors understand the technical specifications, use cases, and deployment options for each solution. The page enables informed decision-making by providing clear comparisons and detailed feature breakdowns.
## Target Audience
The target audience consists of:
- Technical decision-makers evaluating infrastructure solutions
- Real estate developers assessing deployment options
- IT professionals and system architects
- Government officials planning digital infrastructure
- Telecom companies considering edge deployment
- Enterprise customers evaluating cloud alternatives
- Investors and partners seeking technical details
## What We Want to Say
We want to communicate that ThreeFold offers two complementary datacenter solutions that can be deployed individually or together to create a complete decentralized infrastructure ecosystem. Each product is designed for specific use cases while sharing the same revolutionary underlying technology stack.
## Content Breakdown
### 1. Product Overview Hero
* **What we say:** Introduction to the two-tier product strategy and how they work together.
* **Extracted Text:**
**Two Solutions, Infinite Possibilities**
ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack.
### 2. Tier-H Datacenters: Residential & Office Scale
* **What we say:** Detailed breakdown of the smaller-scale solution.
* **Extracted Text:**
**Tier-H: Plug-and-Play Digital Infrastructure**
**Perfect For:**
- Homes, offices, and mixed-use buildings
- Edge computing and local AI processing
- Community networks and local services
- Development and testing environments
**Technical Specifications:**
- Full compute, storage, and networking capabilities
- Zero-touch deployment and maintenance
- Supports AI workloads, Web2/Web3 applications
- Compatible with Kubernetes and container platforms
**Key Benefits:**
- Plug-and-play installation
- Zero maintenance required
- Generate passive income from unused capacity
- Local data sovereignty
- Resilient to internet outages
### 3. Tier-S Datacenters: Industrial Scale
* **What we say:** Comprehensive overview of the enterprise-grade solution.
* **Extracted Text:**
**Tier-S: Industrial-Grade Modular Datacenters**
**Perfect For:**
- Government digital infrastructure
- Telecom edge deployment
- Enterprise private clouds
- AI training and inference at scale
- Regional cloud service providers
**Technical Specifications:**
- Modular container-based design
- Handle 1+ million transactions per second
- Support 100,000+ concurrent users per unit
- Deployed in under six months
- Cyberpandemic and disaster-resilient
**Key Benefits:**
- Rapid deployment compared to traditional datacenters
- Complete sovereignty over data and operations
- Scales horizontally without limits
- Built-in redundancy and self-healing
### 4. Technology Stack Comparison
* **What we say:** Side-by-side comparison of capabilities.
* **Extracted Text:**
**Shared Technology Foundation:**
| Feature | Tier-H | Tier-S |
| --------------------- | ---------- | --------------- |
| Zero-OS | ✓ | ✓ |
| Quantum-Safe Storage | ✓ | ✓ |
| Mycelium Network | ✓ | ✓ |
| Smart Contract for IT | ✓ | ✓ |
| AI/ML Support | ✓ | ✓ |
| Kubernetes Compatible | ✓ | ✓ |
| Energy Efficiency | Ultra-High | High |
| Deployment Time | Minutes | Months |
| Maintenance | Zero-touch | Minimal |
| Scale | Local/Edge | Regional/Global |
### 5. Use Case Matrix
* **What we say:** Clear mapping of products to specific use cases.
* **Extracted Text:**
**Choose Your Deployment Strategy:**
**Tier-H Ideal For:**
- Personal AI assistants and agents
- Local file storage and backup
- Home automation and IoT
- Small business applications
- Development environments
- Community mesh networks
**Tier-S Ideal For:**
- National digital infrastructure
- Regional cloud services
- Large-scale AI training
- Enterprise private clouds
- Telecom edge computing
- Disaster recovery centers
### 6. Deployment Models
* **What we say:** Different ways to implement the solutions.
* **Extracted Text:**
**Flexible Deployment Options:**
**Single Node Deployment:**
- Start with one Tier-H node
- Perfect for testing and small applications
- Scales by adding more nodes
**Hybrid Deployment:**
- Combine Tier-H and Tier-S
- Edge processing with centralized coordination
- Optimal for distributed organizations
**Regional Grid:**
- Multiple Tier-S datacenters
- Geo-distributed for sovereignty
- Enterprise-grade redundancy
### 7. Economic Model
* **What we say:** Revenue and cost structure for each product.
* **Extracted Text:**
**Investment and Returns:**
**Tier-H Economics:**
- Low initial investment
- Immediate revenue from spare capacity
- ROI typically within 12-24 months
- Minimal operational costs
**Tier-S Economics:**
- Higher initial investment
- Enterprise-grade revenue potential
- 3x higher ROI compared to traditional datacenters
- Significantly lower operational costs
### 8. Support and Services
* **What we say:** What comes with each product offering.
* **Extracted Text:**
**Complete Support Ecosystem:**
**Included with Every Deployment:**
- Technical documentation and training
- Community support forums
- Regular software updates
- Monitoring and analytics tools
**Enterprise Services (Tier-S):**
- Dedicated technical support
- Custom integration services
- SLA guarantees
- Professional consulting
### 9. Getting Started
* **What we say:** Clear next steps for each product.
* **Extracted Text:**
**Ready to Deploy?**
**Start with Tier-H:**
- Order your first node
- Plug in and start earning
- Scale as you grow
**Scale with Tier-S:**
- Schedule a consultation
- Custom deployment planning
- Professional installation and setup
**Both Options:**
- Join our partner network
- Access technical resources
- Connect with the community

269
specs/3_technology.md Normal file
View File

@ -0,0 +1,269 @@
# Page: Technology - ThreeFold's Revolutionary Infrastructure Stack
## Why This Page Exists
This page provides an in-depth technical explanation of ThreeFold's revolutionary technology stack that powers both Tier-S and Tier-H datacenters. It serves to educate technical audiences about the fundamental innovations that make ThreeFold's approach superior to traditional cloud infrastructure, while building credibility through detailed technical explanations and comparisons.
## Target Audience
The target audience consists of:
- Technical architects and infrastructure engineers
- CTOs and technical decision-makers
- System administrators and DevOps professionals
- Academic researchers and technology analysts
- Security professionals and compliance officers
- AI/ML engineers and data scientists
## What We Want to Say
We want to communicate that ThreeFold has fundamentally reimagined cloud infrastructure from first principles, creating breakthrough innovations in compute, storage, and networking that solve the core problems of centralized systems. Our technology is not just incrementally better—it represents a paradigm shift toward truly decentralized, autonomous, and efficient infrastructure.
## Content Breakdown
### 1. Technology Hero Section
* **What we say:** Bold statement about revolutionary approach to infrastructure.
* **Extracted Text:**
> **Infrastructure Reimagined from First Principles**
> ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
### 2. Core Technology Pillars
* **What we say:** Overview of the three main technology innovations.
* **Extracted Text:**
> **Three Pillars of Innovation:**
>
> **Zero-OS Compute System**
> - Stateless, autonomous operating system
> - Depending the usecase can more efficient than traditional systems
> - Self-healing and cryptographically secured
>
> **Quantum-Safe Storage**
> - Mathematical data dispersion (not replication)
> - 20% overhead vs 400% in traditional systems
> - Unbreakable and self-healing architecture
>
> **Mycelium Network**
> - Peer-to-peer mesh overlay network
> - End-to-end encryption with shortest path routing
> - Resilient to internet failures and attacks
### 3. Zero-OS: Autonomous Compute
* **What we say:** Deep dive into the revolutionary operating system.
* **Extracted Text:**
> **Zero-OS: The World's First Stateless Cloud OS**
>
> **Core Principles:**
> - **Autonomy:** Operates without human maintenance
> - **Simplicity:** Minimal 40MB footprint with only essential components
> - **Stateless Design:** No persistent local state, immune to corruption
>
> **Revolutionary Features:**
> - **Zero-Install:** Boots from network, no local installation
> - **Zero-Images:** Container images 1000x smaller (2MB vs 2GB)
> - **Smart Contract for IT:** Cryptographically secured deployments
> - **Deterministic Execution:** Reproducible, tamper-proof workloads
>
> **Technical Advantages:**
> - Depending workload can eliminates upto 90% of context switching overhead
> - Cryptographic verification of all components
> - Self-healing and autonomous operation
> - Compatible with Docker, Kubernetes, and VMs
### 4. Quantum-Safe Storage: Unbreakable Data
* **What we say:** Explanation of the mathematical storage breakthrough.
* **Extracted Text:**
> **Quantum-Safe Storage: Mathematics Over Replication**
>
> **How It Works:**
> - Data is fragmented and transformed into mathematical equations
> - Equations are distributed across multiple nodes
> - Original data fragments are discarded
> - Any subset of equations can reconstruct the original data
>
> **Example (Simplified):**
> ```
> Original fragments: a=1, b=2, c=3
> Generated equations:
> - a+b+c=6
> - c-b-a=0
> - 2b+a-c=2
> - 5c-b-a=12
> ```
>
> **Production Configuration (16/4):**
> - 16 data fragments become 20 equations
> - Only 16 equations needed for reconstruction
> - Can lose any 4 nodes without data loss
> - 20% overhead vs 400% in traditional systems
>
> **Zero-Knowledge Architecture:**
> - No single node knows what it stores
> - Cryptographic proof without data exposure
> - Post-quantum security resistant
> - Self-healing against bitrot and failures
### 5. Mycelium Network: Intelligent Connectivity
* **What we say:** Technical deep dive into the networking innovation.
* **Extracted Text:**
> **Mycelium: The Internet's Missing Layer**
>
> **Core Capabilities:**
> - **End-to-End Encryption:** Data encrypted at source, decrypted at destination
> - **Shortest Path Routing:** Dynamic optimization based on latency, bandwidth, reliability
> - **Multi-Hop Transmission:** Resilient routing through intermediate nodes
> - **Geographic Awareness:** Physical location optimization
>
> **Technical Implementation:**
> - Peer-to-peer mesh topology
> - Up to 1 Gbps throughput per agent
> - Wire-speed performance in infrastructure (100+ Gbps)
> - Protocol-agnostic data transport
> - Authentication-based security (not perimeter-based)
>
> **Beyond Traditional Networking:**
> - Survives internet outages and failures
> - Routes around censorship and blocking
> - Enables true peer-to-peer applications
> - Reduces latency through optimal path selection
### 6. Architectural Innovations
* **What we say:** How the technologies work together.
* **Extracted Text:**
> **Integrated Architecture: Greater Than Sum of Parts**
>
> **Geo-Aware Infrastructure:**
> - Data sovereignty with precise location control
> - Compliance with local regulations (GDPR, etc.)
> - Shortest physical paths for efficiency
> - Resilient to geopolitical disruptions
>
> **Smart Contract for IT:**
> - Cryptographically secured deployments
> - Multi-signature authentication
> - Immutable execution records on blockchain
> - Autonomous management without human intervention
>
> **Energy Efficiency Breakthrough:**
> - Up to 10x less energy than traditional datacenters
> - Optimized hardware utilization
> - Reduced data movement and processing overhead
> - Green computing at planetary scale
### 7. Technical Comparisons
* **What we say:** Side-by-side comparison with traditional approaches.
* **Extracted Text:**
> **ThreeFold vs Traditional Infrastructure:**
>
> | Aspect | Traditional Cloud | ThreeFold |
> |--------|------------------|-----------|
> | **OS Deployment** | Local installation, complex updates | Network boot, stateless |
> | **Container Images** | 2GB+ monolithic images | 2MB metadata-only |
> | **Storage Redundancy** | 400% overhead (4 copies) | 20% overhead (math) |
> | **Network Security** | Perimeter-based firewalls | End-to-end encryption |
> | **Management** | Human administrators | Autonomous agents |
> | **Scalability** | Vertical, expensive | Horizontal, unlimited |
> | **Energy Efficiency** | High consumption | 10x more efficient |
> | **Data Sovereignty** | Limited control | Complete control |
### 8. Implementation Status & Roadmap
* **What we say:** Current status and future developments.
* **Extracted Text:**
> **Production-Ready Technology:**
>
> **Currently Available:**
> - Zero-OS Core: Production (multiple years)
> - Quantum-Safe Storage: Production
> - Mycelium Network: Beta (v3.13+)
> - Web Gateway: Production
>
> **Coming H2 2025:**
> - Smart Contract for IT: General availability
> - Geo-Aware AI Agents (3AI)
> - 3CORE Ledger: Geo-fenced blockchain
> - FungiStor: Global content delivery
> - Enhanced enterprise features
>
> **Live Deployment Stats:**
> - 2000+ nodes across 70+ countries
> - 60,000+ CPU cores active
> - 1+ million contracts processed
> - Petabytes of data stored safely
### 9. Open Source & Standards
* **What we say:** Commitment to openness and interoperability.
* **Extracted Text:**
> **Built on Open Principles:**
>
> **Open Source Components:**
> - Core technology stack available on GitHub
> - Community-driven development
> - Transparent security auditing
> - No vendor lock-in
>
> **Standards Compliance:**
> - POSIX filesystem compatibility
> - Docker and Kubernetes support
> - Standard networking protocols
> - Blockchain interoperability
>
> **Developer Ecosystem:**
> - Comprehensive APIs and SDKs
> - Extensive documentation
> - Active community support
> - Regular hackathons and events
### 10. Security & Compliance
* **What we say:** Advanced security features and compliance capabilities.
* **Extracted Text:**
> **Security by Design:**
>
> **Cryptographic Foundation:**
> - End-to-end encryption everywhere
> - Post-quantum cryptography ready
> - Zero-knowledge data storage
> - Immutable audit trails
>
> **Compliance Features:**
> - GDPR compliance through data sovereignty
> - Regulatory jurisdiction control
> - Audit-ready transaction logs
> - Data residency guarantees
>
> **Threat Resistance:**
> - Immune to ransomware (stateless OS)
> - DDoS resistant (distributed architecture)
> - Quantum computing resistant
> - Censorship resistant networking
### 11. Technical Resources
* **Learn more at [https://info.ourworld.tf/tech](https://info.ourworld.tf/tech)**
* **Extracted Text:**
> **Dive Deeper:**
>
> **Technical Documentation:**
> - Architecture whitepapers
> - API documentation
> - Deployment guides
> - Best practices
>
> **Try It Yourself:**
> - Live dashboard: [https://dashboard.grid.tf](https://dashboard.grid.tf)
> - GitHub repositories
> - Developer sandbox
> - Community forums
>
> **Get Support:**
> - Technical community
> - Professional services
> - Training programs
> - Certification paths

281
specs/4_register_interest.md Normal file
View File

@ -0,0 +1,281 @@
# Page: Register Interest - Join the ThreeFold Revolution
## Why This Page Exists
This page serves as the primary conversion point for visitors who want to get involved with ThreeFold's datacenter solutions. It captures leads, qualifies prospects, and provides clear pathways for different types of stakeholders to engage with ThreeFold. The page is designed to convert interest into actionable next steps while collecting valuable information for follow-up.
## Target Audience
The target audience consists of:
- Real estate developers and property owners ready to deploy
- Government officials exploring digital sovereignty options
- Enterprise customers evaluating infrastructure alternatives
- Telecom companies considering edge deployment
- Investors interested in the ThreeFold ecosystem
- Technology partners seeking integration opportunities
- Community leaders wanting local digital infrastructure
- Individual enthusiasts wanting to participate
## What We Want to Say
We want to communicate that ThreeFold is ready to work with serious partners and customers to deploy revolutionary datacenter solutions. Whether someone wants to start small with a single Tier-H node or deploy large-scale Tier-S infrastructure, we have clear pathways to get started and comprehensive support to ensure success.
## Content Breakdown
### 1. Hero Section: Join the Revolution
* **What we say:** Compelling call to action that emphasizes the opportunity.
* **Extracted Text:**
> **Ready to Transform Your Infrastructure?**
> 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.
### 2. Choose Your Path
* **What we say:** Clear segmentation of different interest types.
* **Extracted Text:**
> **How Do You Want to Get Involved?**
>
> **🏢 Real Estate Developer**
> Transform your properties into digital utilities
>
> **🏛️ Government/Public Sector**
> Build sovereign digital infrastructure
>
> **🏢 Enterprise Customer**
> Deploy private, secure cloud infrastructure
>
> **📡 Telecom/ISP**
> Extend your network with edge computing
>
> **💰 Investor/Partner**
> Join the ThreeFold ecosystem
>
> **🏠 Individual/Community**
> Start with residential deployment
### 3. Real Estate Developer Section
* **What we say:** Specific value proposition and next steps for property owners.
* **Extracted Text:**
> **For Real Estate Developers & Property Owners**
>
> **What You Get:**
> - Passive digital revenue from your properties
> - Higher property values and competitive differentiation
> - Future-proof infrastructure for tenants
> - Minimal investment with quick ROI
>
> **Next Steps:**
> - Property assessment and feasibility study
> - Custom deployment planning
> - Installation and configuration
> - Ongoing revenue optimization
>
> **Information We Need:**
> - Property type and size
> - Location and connectivity
> - Investment timeline
> - Revenue expectations
### 4. Government/Public Sector Section
* **What we say:** Sovereignty and compliance benefits for government entities.
* **Extracted Text:**
> **For Government & Public Sector**
>
> **What You Get:**
> - Complete digital sovereignty and data control
> - Compliance with local regulations and requirements
> - Resilient infrastructure immune to external disruption
> - Significant cost savings compared to traditional solutions
>
> **Next Steps:**
> - Strategic consultation and planning
> - Pilot deployment and testing
> - Phased rollout and scaling
> - Training and knowledge transfer
>
> **Information We Need:**
> - Jurisdiction and regulatory requirements
> - Current infrastructure and challenges
> - Timeline and budget parameters
> - Specific use cases and requirements
### 5. Enterprise Customer Section
* **What we say:** Private cloud and security benefits for enterprises.
* **Extracted Text:**
> **For Enterprise Customers**
>
> **What You Get:**
> - Private, secure cloud infrastructure
> - Dramatic cost savings (up to 10x less expensive)
> - Complete control over data and applications
> - Seamless integration with existing systems
>
> **Next Steps:**
> - Technical requirements assessment
> - Proof of concept deployment
> - Migration planning and execution
> - Ongoing support and optimization
>
> **Information We Need:**
> - Current infrastructure and pain points
> - Technical requirements and constraints
> - Compliance and security needs
> - Migration timeline and priorities
### 6. Telecom/ISP Section
* **What we say:** Edge computing and network extension opportunities.
* **Extracted Text:**
> **For Telecom Companies & ISPs**
>
> **What You Get:**
> - Edge computing capabilities for your customers
> - New revenue streams from compute and storage
> - Reduced backhaul costs and improved performance
> - Competitive advantage in the market
>
> **Next Steps:**
> - Network integration planning
> - Pilot deployment in key locations
> - Customer onboarding and training
> - Revenue sharing optimization
>
> **Information We Need:**
> - Network coverage and infrastructure
> - Customer base and requirements
> - Technical integration capabilities
> - Business model preferences
### 7. Investor/Partner Section
* **What we say:** Ecosystem participation and partnership opportunities.
* **Extracted Text:**
> **For Investors & Strategic Partners**
>
> **What You Get:**
> - Participation in the growing decentralized infrastructure market
> - Access to revolutionary technology and IP
> - Partnership opportunities across the ecosystem
> - Exposure to multiple revenue streams
>
> **Next Steps:**
> - Strategic discussion and due diligence
> - Partnership structure development
> - Investment or collaboration agreement
> - Joint go-to-market planning
>
> **Information We Need:**
> - Investment focus and criteria
> - Strategic objectives and synergies
> - Timeline and commitment level
> - Preferred partnership structure
### 8. Individual/Community Section
* **What we say:** Accessible entry point for individuals and communities.
* **Extracted Text:**
> **For Individuals & Communities**
>
> **What You Get:**
> - Start earning from your spare compute capacity
> - Contribute to a more resilient internet
> - Access to sovereign digital services
> - Community ownership and participation
>
> **Next Steps:**
> - Order your first Tier-H node
> - Simple setup and configuration
> - Join the community network
> - Scale as you grow
>
> **Information We Need:**
> - Location and connectivity
> - Technical comfort level
> - Goals and expectations
> - Community involvement interest
### 9. Contact Form
* **What we say:** Comprehensive form that adapts based on selection.
* **Extracted Text:**
> **Tell Us About Your Interest**
>
> **Required Information:**
> - Name and organization
> - Email and phone
> - Interest category (from above)
> - Location/jurisdiction
> - Timeline for deployment
> - Brief description of requirements
>
> **Optional Information:**
> - Current infrastructure details
> - Budget parameters
> - Specific technical requirements
> - Preferred contact method
> - Additional comments or questions
### 10. What Happens Next
* **What we say:** Clear expectations about the follow-up process.
* **Extracted Text:**
> **What Happens After You Submit:**
>
> **Within 24 Hours:**
> - Confirmation email with next steps
> - Assignment to appropriate specialist
> - Initial resource package delivery
>
> **Within 1 Week:**
> - Personalized consultation call
> - Custom proposal or assessment
> - Technical documentation package
>
> **Ongoing:**
> - Regular updates on technology developments
> - Invitation to community events and webinars
> - Access to exclusive resources and content
### 11. Frequently Asked Questions
* **What we say:** Address common concerns and objections.
* **Extracted Text:**
> **Common Questions:**
>
> **Q: What's the minimum investment to get started?**
> A: Tier-H nodes start at under $5,000. Tier-S deployments vary based on scale and requirements.
>
> **Q: How long does deployment take?**
> A: Tier-H nodes can be deployed in minutes. Tier-S datacenters typically deploy in 3-6 months.
>
> **Q: What kind of support do you provide?**
> A: Comprehensive support from planning through deployment and ongoing operations.
>
> **Q: Is the technology proven?**
> A: Yes, with 2000+ nodes deployed globally and years of production experience.
>
> **Q: How do I know this will work for my use case?**
> A: We offer pilot programs and proof-of-concept deployments to validate fit.
### 12. Social Proof & Urgency
* **What we say:** Build confidence and create urgency.
* **Extracted Text:**
> **Join Leading Organizations Already Building the Future:**
>
> **Current Deployments:**
> - 70+ countries with active infrastructure
> - Government agencies building sovereign systems
> - Enterprises reducing cloud costs by 10x
> - Communities creating local digital resilience
>
> **Limited Availability:**
> - Priority access for early partners
> - Exclusive pricing for first deployments
> - Limited technical support capacity
> - Growing demand for deployment slots
>
> **Don't Wait - The Future is Being Built Now**

BIN
specs/blogs/openfuture/ai_stack_closed_today_visualization.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
specs/blogs/openfuture/closed_world_datacenter_illustration.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

45
specs/blogs/openfuture/image_inventory.md Normal file
View File

@ -0,0 +1,45 @@
# OpenFuture Images Inventory
## Downloaded Images
### 1. Timeline of Open Computing
- **File**: `timeline_of_open_computing.jpeg` (19.7 KB)
- **Description**: Visual timeline showing the evolution of computing technologies with various hardware and software icons
- **Usage**: Illustrates the historical progression of open computing technologies
### 2. Detailed Timeline Chart Computing Evolution
- **File**: `detailed_timeline_chart_computing_evolution.jpeg` (60.8 KB)
- **Description**: Comprehensive timeline chart from 1950-2020 showing computing eras (Mainframes, Minicomp, PC, Browser, Mobile, Cloud, AI) with key technologies and milestones
- **Usage**: Shows the detailed progression and key events in computing history
### 3. Closed World Datacenter Illustration
- **File**: `closed_world_datacenter_illustration.jpeg` (1.1 MB)
- **Description**: 3D isometric illustration of a data center infrastructure representing the closed world concept
- **Usage**: Visual representation for Part 2 "A Closed World" section
### 4. Innovation Ownership Comparison Diagram
- **File**: `innovation_ownership_comparison_diagram.jpeg` (1.1 MB)
- **Description**: Three-panel diagram comparing CLOSED, PROPRIETARY, and OPEN innovation models showing different customer/owner relationships
- **Usage**: Illustrates who controls innovation in different system models
### 5. Digital Landscape Transition Illustration
- **File**: `digital_landscape_transition_illustration.jpeg` (1.4 MB)
- **Description**: Artistic landscape illustration with digital/technological elements, appears to be a section transition image
- **Usage**: Visual transition between sections, represents the bridge between closed and open worlds
### 6. AI Stack Closed Today Visualization
- **File**: `ai_stack_closed_today_visualization.jpeg` (1.4 MB)
- **Description**: Interactive visualization showing the current AI stack with layers from Silicon & Data Centers to ML Toolchain to End User, with mixed open/closed components
- **Usage**: Shows the current state of AI infrastructure with closed and proprietary elements
### 7. AI Stack Open Future Visualization
- **File**: `ai_stack_open_future_visualization.jpeg` (1.4 MB)
- **Description**: Same AI stack visualization but showing all layers as open (blue pattern) representing the envisioned open future
- **Usage**: Contrasts with the closed version to show the vision of a fully open AI stack
## Image Quality and Formats
- All images are available in both JPEG and WebP formats
- High resolution images (3840x2560 for most illustrations)
- Suitable for inclusion in documents and presentations
- Total collection size: ~8.5 MB (JPEG versions)

318
specs/blogs/openfuture/openfuture.md Normal file
View File

@ -0,0 +1,318 @@
# Open Future: Mapping the Open Territory
*A comprehensive exploration of the future of AI and computing through the lens of open versus closed systems*
![Mapping the Open Territory](closed_world_datacenter_illustration.jpeg)
## Introduction
AI is changing the laws that once governed computing. We stand at a critical juncture where the choices made today will determine whether AI becomes a force for democratization or concentration. This document explores the evolution of computing, the risks of closed systems, and the promise of an open future.
As Andrej Karpathy said, AI is literally "Software 2.0" - it isn't just an efficiency gain like previous revolutions. AI creates knowledge that we didn't have before and can navigate nearly inconceivable amounts of data and complexity. It will ask questions we didn't even know to ask, destroy previous industries, and create new ones.
The fundamental question we face is whether AI will follow the historical trend of falling costs and broadening access, or whether it will represent the first computing revolution that concentrates rather than democratizes access to technology.
---
## Part 1: How We Got Here - The Evolution of Computing
### The Historical Pattern of Computing Revolutions
![Timeline of Open Computing](timeline_of_open_computing.jpeg)
Until recently, Bell's Law gave us an accurate framework for understanding computing revolutions, stating that each decade a new class of computing emerges, resulting in a fundamental shift in access. This pattern has been remarkably consistent throughout the history of computing.
![Detailed Computing Evolution Timeline](detailed_timeline_chart_computing_evolution.jpeg)
The progression has been clear and transformative:
- **1950s: Mainframes** - Univac, IC Chip technology
- **1960s: Minicomputers** - 12-bit PDP-8, DRAM, IBM Anti-trust Lawsuit
- **1970s: Personal Computers** - Intel 4004, Minitel, Unix
- **1980s: Browser Era** - World Wide Web, Linux, Mozilla
- **1990s: Mobile** - iPhone, "Open Source" movement, Ethernet
- **2000s: Cloud** - Android, Red Hat IPO, PCIe
- **2010s: AI** - ChatGPT3, DeepSeek, RISC-V, Red Hat acquisition by IBM
### The Accessibility Revolution
These revolutions allowed us to make computers that were much more accessible, simultaneously driving performance up 10x while also driving cost down 10x. In 1981, a fully loaded IBM PC cost $4,500. Today, an iPhone, which is many millions of times faster, retails for $1,129. Through this process, we became exceptionally good at building very powerful computers with very small chips.
Every shift created new leaders, sidelined old ones, and required adaptation. From a social perspective, these innovations gave many more people access to compute, democratizing technology and expanding opportunities.
### The AI Exception: Breaking Bell's Law
However, something different is happening with Artificial Intelligence. Prices aren't dropping with the advent of AI. While cost per math operation is going down, the actual cost of inference per token is still climbing as models are getting larger (e.g., GPT4.5), doing more work (e.g., "reasoning models"), and doing work that is more intensive (e.g., new image generation).
AI datacenters are orders of magnitude more powerful than previous generations, with spending rising by tens of billions year-over-year. Even if we eventually see some cost reductions, it will take time before they reach affordability, leaving everyone besides a few in the dust of the AI revolution.
### Why AI is Different
Why is this computer class more expensive? AI is extremely physically intensive, requiring more silicon, more energy, and more resources. From shifting the physics of compute at the transistor level to building out the global infrastructure of AI data centers, this revolution is pushing against the physical limitations of human industry.
This physical intensity creates a fundamental challenge: if Bell's Law breaks fully, AI will be the first computing revolution that doesn't increase access, but instead concentrates it.
---
## Part 2: A Closed World - The Risks of Concentration
### Historical Precedent: We've Been Here Before
This isn't the first time we've been presented with a choice between a closed or open future. In fact, we're living in a closed world today because of choices made for us 40+ years ago. Early minicomputer and PC culture was dominated by a hacker ethos defined by "access to computers... and the Hands-On Imperative."
By the late 90s and early 00s, PC development became dominated by Windows and Intel at the cost of limiting innovation while hamstringing competitors and partners alike.
### The Economics of Closed Systems
![Innovation Ownership Comparison](innovation_ownership_comparison_diagram.jpeg)
The diagram above illustrates three different models of innovation ownership:
1. **CLOSED**: No leverage or choice in dealings - complete vertical ownership
2. **PROPRIETARY**: No control of roadmap or features while incurring higher development and product costs
3. **OPEN**: You drive and control the future through open foundations and collaborative development
### Real-World Examples of Market Concentration
Just look at WinTel's OEM partners, like Compaq, which struggled to hit 5% operating margins in the late 90s, according to SEC filings. Dell, during the same time period, absolutely revolutionized supply chains and typically enjoyed margins around 10%.
Compare this to Microsoft and Intel, which often tripled or quadrupled those figures in the same period, with Microsoft hitting 50.2% margins in 1999. Some have jokingly referred to this as "drug dealer margins." In 2001, Windows had >90% market share, and almost 25 years later, it still has >70% market share.
### The Formation of "Swamps"
How do closed worlds form? One word: **swamps**. A swamp is a moat gone stagnant from incumbents who have forgotten how to innovate.
There are many ways to produce a swamp:
- **Overcomplication**: Protecting a product by adding unnecessary proprietary systems and layers of abstraction
- **License Fees**: Charging rents in the form of licensing costs
- **Feature Bloat**: Piling on features just enough to justify upgrades while staying disconnected from actual needs
- **Bundling**: Offering something "for free" as an inseparable part of a bundled service to lock out competition
However it happens, what started as innovation becomes just an extra tax on the product, erecting monopolies instead of creating real value. These companies become incentivized to preserve the status quo rather than changing.
### The AI Concentration Risk
Today, many companies are forced into choosing closed systems because they don't know of, or can't imagine, an alternative. Industry leaders see the sector as a tight competition between a few established incumbents and a handful of well-funded startups. We're seeing consolidation in the market, accompanied by a huge increase in total market value.
If Bell's Law breaks fully, AI will be the first computing revolution that doesn't increase access, but instead concentrates it. We saw hints of this concentration effect with the previous computer class. Jonathan Zittrain argues that the cloud has put accessibility at risk, leaving "new gatekeepers in place, with us and them prisoner to their limited business plans and to regulators who fear things that are new and disruptive."
Unlike hyperscalers before it, AI threatens to tip consolidation into full enclosure.
### The Stakes: A Referendum on Society's Future
If AI eats everything, like software has eaten everything, this means that open versus closed is a referendum on the future shape of society as a whole. A handful of companies will own the means of intelligence production, and everyone else will purchase access at whatever price they set. As many have warned, this will represent a new form of social stratification.
**It is clear to us that open is existential.**
![Digital Landscape Transition](digital_landscape_transition_illustration.jpeg)
---
## Part 3: An Open World - The Promise of Open Systems
### The Infiltration Power of Open Source
Open source has a way of infiltrating crucial computing applications. The internet runs on it. The entire AI research stack uses open source frameworks. Even proprietary tech relies on it, with 90% of Fortune 500 companies using open source software. There wouldn't be macOS without BSD Unix, Azure without Linux, or Netflix without FFmpeg.
### Historical Success of Open Standards
Open source and its hardware equivalent, open standards, have repeatedly catalyzed mass adoption by reducing friction and enabling interoperability:
- **Ethernet**: Robert Metcalf says the openness of ethernet allowed it to beat rival standards
- **DRAM**: Enabled the mass adoption of PCs with high-capacity, low-cost memory
- **PCIe**: Enabled high-speed interoperability of PC components
- **Open Compute Project**: Used by Meta and Microsoft among others, standardized rack and server design so components could be modular and vendor-agnostic
### RISC-V: The Hardware Equivalent of Linux for AI
**RISC-V is the hardware equivalent of Linux for AI hardware.** It launched in 2010 at UC Berkeley as a free, open standard alternative to proprietary architectures like Intel's x86 and ARM.
Key advantages of RISC-V:
- **Open Nature**: Allows deep customization, making it especially desirable for AI and edge computing applications
- **Royalty-Free**: No licensing costs or restrictions
- **Growing Adoption**: Companies from Google to Tenstorrent are adopting it for custom silicon
- **Flexibility**: Its ISA (Instruction Set Architecture) is gaining incredible adoption across the industry
### The Global Talent Pool Advantage
Open systems also attract a global talent pool. Linux itself is the shining example of this, constructed by thousands of engineers, with significant contributions coming both from independent outsiders and employees of major players like Intel and Google.
This collaborative approach creates several benefits:
- **Diverse Perspectives**: Contributors from around the world bring different viewpoints and solutions
- **Rapid Innovation**: Multiple teams working on problems simultaneously accelerates development
- **Quality Assurance**: More eyes on the code means better security and fewer bugs
- **Knowledge Sharing**: Open development spreads expertise across the entire community
### The Default State of Technology
We believe **open is the default state** – what remains when artificial boundaries fall away. The only question is how long those boundaries hold, and how much progress will be delayed in the meantime.
But we can't assume that we'll return to the historical trend of falling costs and broadening access. We're at a critical juncture. As companies build out their AI stack, they are making a choice today that will determine the future. Companies can invest in closed systems, further concentrating leverage in the hands of a few players, or they can retain agency by investing in open systems, which are affordable, transparent, and modifiable.
---
## The AI Stack: Current Reality vs. Open Future
### The Current State: Closed Today
![AI Stack - Closed Today](ai_stack_closed_today_visualization.jpeg)
Today, parts of the AI stack are open, parts are closed, and parts have yet to be decided. Let's examine the current state across the different layers:
#### Hardware Layer
**Status: CLOSED**
Most hardware today is a black box, literally. You're reliant on a company to fix, optimize, and, at times, even implement your workloads. This creates several problems:
- **Vendor Lock-in**: Organizations become dependent on specific hardware vendors
- **Limited Customization**: Unable to optimize hardware for specific use cases
- **High Switching Costs**: Moving between vendors requires significant investment
- **Innovation Bottlenecks**: Progress limited by vendor roadmaps and priorities
#### Low-Level Software Layer
**Status: CLOSED**
Most parallelization software is proprietary, causing unnecessary lock-in and massive switching costs:
- **Proprietary APIs**: Vendor-specific programming interfaces
- **Limited Portability**: Code written for one platform doesn't easily transfer
- **Optimization Constraints**: Unable to modify software for specific needs
- **Dependency Risks**: Reliance on vendor support and updates
#### Models Layer
**Status: MIXED**
Models present a complex landscape, but most leading ones are closed:
- **Leading Models**: GPT-4, Claude, and other state-of-the-art models are proprietary
- **Open Models**: Available but often with limited data, little support, and no guarantees of remaining open
- **Training Data**: Most closed models use proprietary training datasets
- **Future Uncertainty**: Open models may become closed as companies seek monetization
#### Applications Layer
**Status: CLOSED**
Even applications using open source models are typically built using cloud platform APIs:
- **Data Pooling**: Your data is being used to train next-generation models
- **API Dependencies**: Applications rely on cloud services for functionality
- **Privacy Concerns**: User interactions contribute to model improvement
- **Control Loss**: Limited ability to modify or customize application behavior
### The Vision: Open Future
![AI Stack - Open Future](ai_stack_open_future_visualization.jpeg)
The open future represents a fundamental shift where all layers of the AI stack become open, collaborative, and user-controlled. This transformation would create:
#### Open Hardware
- **RISC-V Adoption**: Open instruction set architectures enabling custom silicon
- **Modular Design**: Interoperable components from multiple vendors
- **Community Development**: Collaborative hardware design and optimization
- **Cost Reduction**: Competition and standardization driving down prices
#### Open Software Stack
- **Open Parallelization**: Community-developed software for distributed computing
- **Portable Code**: Applications that run across different hardware platforms
- **Transparent Optimization**: Ability to modify and improve software performance
- **Collaborative Development**: Global community contributing to improvements
#### Open Models
- **Transparent Training**: Open datasets and training methodologies
- **Community Models**: Collaboratively developed and maintained AI models
- **Customization Freedom**: Ability to fine-tune and modify models for specific needs
- **Guaranteed Openness**: Governance structures ensuring models remain open
#### Open Applications
- **User Control**: Applications that respect user privacy and data ownership
- **Local Processing**: Ability to run AI applications without cloud dependencies
- **Customizable Interfaces**: Applications that can be modified for specific use cases
- **Data Sovereignty**: Users maintain control over their data and its usage
### The Domino Effect of Opening Hardware
Opening up AI hardware, with open standards like RISC-V, and its associated software would trigger a domino effect upstream. It would enable "a world where mainstream technology can be influenced, even revolutionized, out of left field."
This means a richer future with more experimentation and more breakthroughs we can barely imagine today, such as:
- **Personalized Cancer Vaccines**: AI-driven medical treatments tailored to individual patients
- **Natural Disaster Prediction**: Advanced modeling for early warning systems
- **Abundant Energy**: AI-optimized renewable energy systems and distribution
- **Educational Democratization**: Personalized learning systems accessible globally
- **Scientific Discovery**: AI assistants accelerating research across all disciplines
And this world gets here a lot faster outside of a swamp.
---
## Conclusion: The Choice That Defines Our Future
### The Silicon Valley Paradox
There's an old Silicon Valley adage: "If you aren't paying, you are the product." In AI, we've been paying steeply for the product, but we still are the product. We have collectively generated the information being used to train AI, and we're feeding it more every day.
This creates a fundamental paradox: we're both the customers and the raw material for AI systems, yet we have little control over how these systems develop or how they're used.
### The Stakes: Who Owns Intelligence?
In a closed world, AI owns everything, and that AI is owned by a few. This concentration of power represents more than just market dominance – it's about who controls the means of intelligence production in the 21st century.
The implications are profound:
- **Economic Control**: A handful of companies setting prices for access to intelligence
- **Innovation Bottlenecks**: Progress limited by the priorities and capabilities of a few organizations
- **Social Stratification**: New forms of inequality based on access to AI capabilities
- **Democratic Concerns**: Concentration of power in private entities with limited accountability
### The Open Alternative
Opening up hardware and software means a future where AI doesn't own you. Instead:
- **Distributed Innovation**: Thousands of organizations and individuals contributing to AI development
- **Competitive Markets**: Multiple providers driving down costs and improving quality
- **User Agency**: Individuals and organizations maintaining control over their AI systems
- **Transparent Development**: Open processes that can be audited and understood by the community
### The Critical Juncture
We stand at a critical juncture in the history of computing. The decisions made today about AI infrastructure will echo for decades to come. Companies building out their AI stack are making choices that will determine whether we get:
**A Closed Future:**
- Concentrated power in the hands of a few tech giants
- High costs and limited access to AI capabilities
- Innovation controlled by corporate priorities
- Users as products rather than empowered participants
**Or an Open Future:**
- Democratized access to AI tools and capabilities
- Competitive innovation driving rapid progress
- User control and privacy protection
- AI as a tool for human flourishing rather than corporate control
### The Path Forward
The writing is on the wall for AI. We are veering towards a closed world where the constellation of technology companies are fighting over scraps. Competition, innovation, and sustainable business can't thrive in this low-oxygen environment.
But there is another path. By choosing open standards like RISC-V, supporting open source AI frameworks, and demanding transparency in AI development, we can ensure that the AI revolution follows the historical pattern of democratization rather than concentration.
### A Call to Action
The choice is not just for technology companies – it's for everyone who will be affected by AI, which is to say, everyone. We must:
1. **Support Open Standards**: Choose products and services built on open foundations
2. **Demand Transparency**: Require visibility into how AI systems work and make decisions
3. **Invest in Open Development**: Fund and contribute to open source AI projects
4. **Advocate for Open Policies**: Support regulations that promote competition and openness
5. **Build Open Communities**: Participate in collaborative development of AI technologies
### The Default State
We believe open is the default state – what remains when artificial boundaries fall away. The only question is how long those boundaries hold, and how much progress will be delayed in the meantime.
The future of AI – and by extension, the future of human society in the age of artificial intelligence – depends on the choices we make today. We can choose a future where AI serves humanity broadly, or we can accept a future where humanity serves AI's corporate owners.
**The choice is ours, but we must make it now.**
---
*This document is based on content from [OpenFuture by Tenstorrent](https://openfuture.tenstorrent.com/), exploring the critical importance of open systems in the age of artificial intelligence.*

105
specs/blogs/openfuture/openfuture_content.md Normal file
View File

@ -0,0 +1,105 @@
# Open Future - Initial Content
## Main Theme
AI is changing the laws that once governed computing.
## Timeline of OPEN
- 1950: Mainframes, Univac, IC Chip
- 1960: Minicomp, 12-bit PDP-8, DRAM, IBM Anti-trust Lawsuit
- 1970: PC, Intel 4004, Minitel, Unix
- 1980: Browser, WWW, Linux, Mozilla
- 1990: Mobile, iPhone, "Open Source", Ethernet
- 2000: Cloud, ChatGPT3, Android, Red Hat IPO
- 2010: AI, DeepSeek, PCIe, Red Hat Sells To IBM, RISC-V
## Key Ideas
### The Critical Juncture
AI is valuable enough to warrant massive investment. As Andrej Karpathy said, it's "Software 2.0". AI creates knowledge that we didn't have before and can navigate inconceivable amounts of data and complexity.
Companies are making choices today that will determine the future - between closed systems (concentrating leverage) or open systems (affordable, transparent, modifiable).
### The Risk of Concentration
If Bell's Law breaks fully, AI will be the first computing revolution that doesn't increase access, but instead concentrates it. This threatens to tip consolidation into full enclosure.
### Open as Existential
"It is clear to us that open is existential."
If AI eats everything, then open versus closed is a referendum on the future shape of society as a whole.
### RISC-V as the Hardware Equivalent of Linux
RISC-V launched in 2010 at UC Berkeley as a free, open standard alternative to proprietary architectures. It's gaining incredible adoption from companies like Google and Tenstorrent.
### The AI Stack Analysis
Current state shows parts open, parts closed:
- Hardware: CLOSED (black box, reliant on companies)
- Low Level software: CLOSED (proprietary parallelization software)
- Models: MIXED (leading ones closed, open ones limited)
- Applications: CLOSED (even with open models, built using cloud APIs)
### The Vision
Opening up AI hardware with open standards like RISC-V would trigger a domino effect upstream, enabling "a world where mainstream technology can be influenced, even revolutionized, out of left field."
## Part 1: How We Got Here
### Bell's Law and Computing Evolution
Until recently, Bell's Law gave us an accurate frame for understanding computing revolutions, stating that each decade a new class of computing emerges, resulting in a fundamental shift in access.
We went from mainframes in the 1950s, to minicomputers in the 1960s, to super computers in the 1970s, to personal computers in the 1980s, to the world-wide web in the 1990s, and mobile in the 2000s.
These revolutions allowed us to make computers that were much more accessible – simultaneously driving performance up 10x while also driving cost down 10x. In 1981, a fully loaded IBM PC cost $4500. Today, an iPhone, which is many millions of times faster, retails for $1,129. Through this process we got very good at building very powerful computers with very small chips.
### The AI Revolution Challenge
However, prices aren't dropping with the advent of Artificial Intelligence. While cost per math operation is going down, the actual cost of inference per token is still climbing as models are getting larger (e.g. GPT4.5), doing more work (e.g. "reasoning models"), and doing work that is more intensive (e.g. new image generation). AI datacenters are orders of magnitude more powerful than previous generations with spending rising by tens of billions year-over-year.
Why is this computer class more expensive? AI is extremely physically intensive – requiring more silicon, more energy, more resources. From shifting the physics of compute at the transistor level to building out the global infrastructure of AI data centers, this revolution is pushing against the physical limitations of human industry.
## Part 2: A Closed World
### The Historical Pattern
This isn't the first time we've been presented with a choice between a closed or open future. In fact, we're living in a closed world today because of choices made for us 40+ years ago. Early minicomputer and PC culture was dominated by a hacker ethos defined by "access to computers... and the Hands-On Imperative". By the late 90s and early 00s, PC development became dominated by Windows and Intel at the cost of limiting innovation while hamstringing competitors and partners alike.
### Market Concentration Examples
Just look at WinTel's OEM partners, like Compaq, which struggled to hit 5% operating margins in the late 90s, according to SEC filings. Dell, during the same time period, absolutely revolutionized supply chains, and typically enjoyed margins around 10%. Compare this to Microsoft and Intel, which often tripled or quadrupled those figures in the same period, with Microsoft hitting 50.2% margins in 1999. Some have jokingly referred to this as drug dealer margins. In 2001, Windows had >90% market share, and almost 25 years later, it still has >70% market share.
### How Closed Worlds Form
How do closed worlds form? One word: swamps. A swamp is a moat gone stagnant from incumbents who have forgotten how to innovate.
There are many ways to produce a swamp. They can protect a product by overcomplicating it, adding unnecessary proprietary systems and layers of abstraction. They can charge rents, in the form of license fees. They can pile on features just enough to justify an upgrade to customers, while staying disconnected from what they actually need. And if they want to get really clever, they can offer something "for free" as an inseparable part of a bundled service in order to lock out competition.
However it happens, what started as innovation becomes just an extra tax on the product, erecting monopolies instead of creating real value. These companies become incentivized to preserve the status quo, rather than changing.
## Part 3: An Open World
### The Power of Open Source
Open source has a way of infiltrating crucial computing applications. The internet runs on it. The entire AI research stack uses open source frameworks. Even proprietary tech relies on it with 90% of Fortune 500 companies using open source software. There wouldn't be macOS without BSD Unix, Azure without Linux, or Netflix without FFmpeg.
### Open Standards and Mass Adoption
Open source and its hardware equivalent, open standards, have repeatedly catalyzed mass adoption by reducing friction and enabling interoperability. Robert Metcalf says the openness of ethernet allowed it to beat rival standards. DRAM enabled the mass adoption of PCs with high-capacity, low-cost memory, while PCIe enabled high-speed interoperability of PC components. Similarly, Open Compute Project specs, used by Meta and Microsoft among others, standardized rack and server design, so components could be modular and vendor-agnostic.
### RISC-V: The Hardware Equivalent of Linux
RISC-V is the hardware equivalent of Linux for AI hardware. It launched in 2010 at UC Berkeley as a free, open standard alternative to proprietary architectures like Intel's x86 and ARM. Its open nature allows it to be deeply customized, making it especially desirable for AI and edge computing applications, and it is royalty-free. RISC-V's ISA is gaining incredible adoption, with companies from Google to us at Tenstorrent adopting it for custom silicon.
### Global Talent Pool
Open systems also attract a global talent pool. Linux itself is the shining example of this, constructed by thousands of engineers, with significant contributions coming both from independent outsiders and employees of major players like Intel and Google.
We believe open is the default state – what remains when artificial boundaries fall away. The only question is how long those boundaries hold, and how much progress will be delayed in the meantime.
## The AI Stack Analysis
### Current State (Closed Today)
- **Hardware**: CLOSED - Most hardware today is a black box, literally. You're reliant on a company to fix, optimize, and, at times, even implement your workloads.
- **Low Level software**: CLOSED - Most parallelization software is proprietary causing unnecessary lock-in and massive switching costs.
- **Models**: MIXED - Models are mixed, but most of the leading ones are closed. The models that are open share limited data, with little to no support, and have no promises of staying open in the future.
- **Applications**: CLOSED - Even if an application is using an open source model, most are built using cloud platform APIs. This means your data is being pooled to train the next gen models.
### The Vision (Open Future)
Opening up AI hardware, with open standards like RISC-V, and its associated software would trigger a domino effect upstream. It would enable "a world where mainstream technology can be influenced, even revolutionized, out of left field." This means a richer future with more experimentation and more breakthroughs we can barely imagine today, like personalized cancer vaccines, natural disaster prediction, and abundant energy.
### The Stakes
There's an old Silicon Valley adage – if you aren't paying you are the product. In AI, we've been paying steeply for the product, but we still are the product. We have collectively generated the information being used to train AI, and are feeding it more every day.
In a closed world, AI owns everything, and that AI is owned by a few. Opening up hardware and software means a future where AI doesn't own you.

1195
specs/blogs/study.md Normal file
View File

File diff suppressed because it is too large Load Diff

173
specs/tier-s-h.md Normal file
View File

@ -0,0 +1,173 @@
# ThreeFold Tier-S & Tier-H Datacenters
## A better alternative to centralized datacenters
Digitally Empowered Real Estate — Resilient. Sustainable. Decentralized.
## What Is It?
ThreeFold introduces a new class of decentralized digital infrastructure:
* Tier-S: Modular, industrial-grade datacenters
* Tier-H: Residential or office-scale nodes
Together, they form a planetary-scale AI and cloud grid, locally owned and operated.
Instead of relying on hyperscalers or centralized clouds, this system allows homes, buildings, and communities to host their own resilient, sovereign infrastructure.
## From Real Estate to Digital Infrastructure
Just like solar panels turn buildings into power generators, ThreeFold's Cloud Nodes turn them into digital utilities. These nodes produce:
* Compute, storage, and networking capacity
* AI inference power
* Recurring digital revenue
Compute is now one of the world’s most valuable resources. Sovereign infrastructure is the new standard. Your building can become a self-sustaining node in this new digital economy.
## Why Real Estate Developers Should Join
| Feature | Benefit |
| -- | |
| Passive Digital Revenue | Monetize idle compute, bandwidth, and storage |
| Higher Property Value | Market properties as cloud-enabled |
| Green & Resilient | 10x less energy vs traditional datacenters |
| Turnkey Deployment | No IT expertise required |
| Sovereign Cloud | Data stays local and private |
| Web3 & AI Ready | Compatible with modern applications |
| Future-Proof | Supports Kubernetes, VR, digital twins, and Web3 |
Buildings equipped with Tier-H nodes offer faster, more private, and locally resilient digital services to residents.
## What Are Tier-S and Tier-H?
### Tier-S Datacenters
* Modular data containers
* Handle over 1 million transactions per second
* Support 100,000+ users per unit
* Suitable for industrial-scale AI and cloud
* Cyberpandemic- and disaster-resilient
* Deployed in under six months
### Tier-H Datacenters
* Nodes deployed in homes, offices, and mixed-use spaces
* Provide full compute, storage, and networking
* Host AI workloads, Web2/Web3 applications, and Kubernetes clusters
* Plug-and-play installation, zero maintenance
* Ultra energy-efficient (<10W per node)
## Who It’s For
* Governments building sovereign AI and cloud infrastructure
* Telecoms and ISPs deploying local compute grids
* Developers and startups seeking cloud independence
* AI and Web3 companies hosting inference or full-stack apps
* Communities seeking plug-and-play digital resilience
## How the System Works
1. Install a Tier-H node in your home, office, or property or Tier-S for the bigger scale
2. It joins the ThreeFold Grid — a decentralized AI and cloud network
3. It automatically contributes compute, storage, and networking
4. Earn digital rewards as others use your node
5. The node is self-managing and stateless, powered by Zero-OS
## Tier-H vs Traditional vs Blockchain Infrastructure
| Feature | Traditional Cloud | Blockchain Node | Tier-H/S Node |
| -- | -- | | - |
| Deployment | Centralized | L1 Network Only | Local (Edge) |
| Sovereignty | Low | Partial | Full |
| Energy Use | High (>100W) | Variable | Depending workload can be 10x less |
| Complexity | Requires IT Team | Developer Setup | Zero-touch |
| AI Ready | Yes | No | Yes |
| Use Cases | Enterprise | Tokens | Web2, Web3, AI, Education |
## The Real Estate Advantage
| Metric | Tier-H/S Enabled | Traditional |
| | - | - |
| ROI | Up to 3x Higher | Standard CAPEX |
| Energy Cost | Upto 10x Less depending workload | High Consumption |
| Deployment Time | Months | 12–36 Months |
| Tenant Demand | Digital Infrastructure | Declining Footprint |
Tier-H/S enables property developers to transform unused space into a source of digital yield.
## Real Cost Comparison
| Service | ThreeFold | Other Providers |
| | - | - |
| Storage (1TB + 100GB Transfer) | Less than \$5/month | \$12–\$160/month |
| Compute (2 vCPU, 4GB RAM) | Less than \$12/month | \$20–\$100/month |
## Built-In AI & Cloud Stack
* Quantum-safe storage
* Zero-OS: stateless, Linux-based operating system
* Mesh networking via the Mycelium protocol
* Autonomous management via 3BOTs
* Neuromorphic AI compatibility
* Fully open-source, developer-friendly
Supports AI, Web2/Web3 apps, digital twins, IoT, and metaverse environments.
## Why This Matters
| Problem | Solution |
| -- | |
| Centralized, fragile infrastructure | Distributed, self-healing network |
| Vendor lock-in and surveillance | Locally owned sovereign cloud |
| High energy consumption | Ultra-efficient nodes |
| Slow deployment and high costs | Fast, local, low-CAPEX rollout |
| Economic extraction | Local value creation through digital services |
## Technical Stack for Developers
* Native Linux and Kubernetes support
* Bring your own stack or use ThreeFold’s tools
* Zero-OS ensures secure, stateless, self-healing operations
* Ideal for AI, education, IoT, and digital infrastructure applications
## Adoption at a Glance
* Live in over 50 countries
* Live Grid Stats: [https://stats.grid.tf](https://stats.grid.tf)
* 60,000+ CPU cores active
* Over 1 million contracts processed on-chain
## Why now
Whether you are a developer, real estate investor, digital sovereignty advocate, or government strategist — you can be part of building the future.
* Host a Tier-H Node — earn, secure, and contribute to the internet
* Deploy a Tier-S Datacenter — scale sovereign cloud for your region
Let’s build the most resilient, inclusive, and intelligent internet — together.

41
src/App.jsx Normal file
View File

@ -0,0 +1,41 @@
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Navigation from './components/Navigation.jsx'
import navigationData from './config/navigation.json'
// Dynamically import components
import HomePage from './components/Home.jsx'
import ProductsPage from './components/ProductsPage.jsx'
import TechnologyPage from './components/TechnologyPage.jsx'
import RegisterPage from './components/RegisterPage.jsx'
import BecomeMember from './components/BecomeMember.jsx'
import Blog from './components/Blog.jsx'
import BlogPost from './components/BlogPost.jsx'
const componentMap = {
HomePage,
ProductsPage,
TechnologyPage,
RegisterPage,
BecomeMember,
Blog,
BlogPost,
}
function App() {
return (
<Router>
<Navigation />
<main className="pt-16">
<Routes>
{navigationData.map((item) => {
const Component = componentMap[item.component]
return <Route key={item.path} path={item.path} element={<Component />} />
})}
<Route path="/blog/:slug" element={<BlogPost />} />
</Routes>
</main>
</Router>
)
}
export default App

BIN
src/assets/images/collaboration_hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 KiB

BIN
src/assets/images/collective_intelligence.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
src/assets/images/collective_intelligence_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 938 KiB

BIN
src/assets/images/digital_brain.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/images/digital_cooperation.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
src/assets/images/digital_sovereignty_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/images/hero_architecture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/assets/images/hero_banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/assets/images/hero_concept.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
src/assets/images/holding_structure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/images/human_connection_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/images/network_connection.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

1
src/assets/react.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/blogs/img/ai_stack_closed_today_visualization.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
src/blogs/img/closed_world_datacenter_illustration.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/blogs/img/open_vs_closed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

316
src/blogs/openfuture-blog.md Normal file
View File

@ -0,0 +1,316 @@
---
title: "Open Future: Mapping the Open Territory"
author: "Tenstorrent"
date: "2025-07-24"
tags: ["AI", "Open Source", "Future of Computing", "Decentralization"]
summary: "A comprehensive exploration of the future of AI and computing through the lens of open versus closed systems, highlighting the critical importance of open systems in the age of artificial intelligence."
---
# Open Future: Mapping the Open Territory
*A comprehensive exploration of the future of AI and computing through the lens of open versus closed systems*
![AI Stack - Closed Today](img/ai_stack_closed_today_visualization.jpeg)
## Introduction
AI is changing the laws that once governed computing. We stand at a critical juncture where the choices made today will determine whether AI becomes a force for democratization or concentration. This document explores the evolution of computing, the risks of closed systems, and the promise of an open future.
As Andrej Karpathy said, AI is literally "Software 2.0" - it isn't just an efficiency gain like previous revolutions. AI creates knowledge that we didn't have before and can navigate nearly inconceivable amounts of data and complexity. It will ask questions we didn't even know to ask, destroy previous industries, and create new ones.
The fundamental question we face is whether AI will follow the historical trend of falling costs and broadening access, or whether it will represent the first computing revolution that concentrates rather than democratizes access to technology.
---
## Part 1: How We Got Here - The Evolution of Computing
### The Historical Pattern of Computing Revolutions
Until recently, Bell's Law gave us an accurate framework for understanding computing revolutions, stating that each decade a new class of computing emerges, resulting in a fundamental shift in access. This pattern has been remarkably consistent throughout the history of computing.
The progression has been clear and transformative:
- **1950s: Mainframes** - Univac, IC Chip technology
- **1960s: Minicomputers** - 12-bit PDP-8, DRAM, IBM Anti-trust Lawsuit
- **1970s: Personal Computers** - Intel 4004, Minitel, Unix
- **1980s: Browser Era** - World Wide Web, Linux, Mozilla
- **1990s: Mobile** - iPhone, "Open Source" movement, Ethernet
- **2000s: Cloud** - Android, Red Hat IPO, PCIe
- **2010s: AI** - ChatGPT3, DeepSeek, RISC-V, Red Hat acquisition by IBM
### The Accessibility Revolution
These revolutions allowed us to make computers that were much more accessible, simultaneously driving performance up 10x while also driving cost down 10x. In 1981, a fully loaded IBM PC cost $4,500. Today, an iPhone, which is many millions of times faster, retails for $1,129. Through this process, we became exceptionally good at building very powerful computers with very small chips.
Every shift created new leaders, sidelined old ones, and required adaptation. From a social perspective, these innovations gave many more people access to compute, democratizing technology and expanding opportunities.
### The AI Exception: Breaking Bell's Law
However, something different is happening with Artificial Intelligence. Prices aren't dropping with the advent of AI. While cost per math operation is going down, the actual cost of inference per token is still climbing as models are getting larger (e.g., GPT4.5), doing more work (e.g., "reasoning models"), and doing work that is more intensive (e.g., new image generation).
AI datacenters are orders of magnitude more powerful than previous generations, with spending rising by tens of billions year-over-year. Even if we eventually see some cost reductions, it will take time before they reach affordability, leaving everyone besides a few in the dust of the AI revolution.
### Why AI is Different
Why is this computer class more expensive? AI is extremely physically intensive, requiring more silicon, more energy, and more resources. From shifting the physics of compute at the transistor level to building out the global infrastructure of AI data centers, this revolution is pushing against the physical limitations of human industry.
This physical intensity creates a fundamental challenge: if Bell's Law breaks fully, AI will be the first computing revolution that doesn't increase access, but instead concentrates it.
---
## Part 2: A Closed World - The Risks of Concentration
### Historical Precedent: We've Been Here Before
This isn't the first time we've been presented with a choice between a closed or open future. In fact, we're living in a closed world today because of choices made for us 40+ years ago. Early minicomputer and PC culture was dominated by a hacker ethos defined by "access to computers... and the Hands-On Imperative."
By the late 90s and early 00s, PC development became dominated by Windows and Intel at the cost of limiting innovation while hamstringing competitors and partners alike.
### The Economics of Closed Systems
![](img/open_vs_closed.png)
1. **CLOSED**: No leverage or choice in dealings - complete vertical ownership
2. **PROPRIETARY**: No control of roadmap or features while incurring higher development and product costs
3. **OPEN**: You drive and control the future through open foundations and collaborative development
### Real-World Examples of Market Concentration
Just look at WinTel's OEM partners, like Compaq, which struggled to hit 5% operating margins in the late 90s, according to SEC filings. Dell, during the same time period, absolutely revolutionized supply chains and typically enjoyed margins around 10%.
Compare this to Microsoft and Intel, which often tripled or quadrupled those figures in the same period, with Microsoft hitting 50.2% margins in 1999. Some have jokingly referred to this as "drug dealer margins." In 2001, Windows had >90% market share, and almost 25 years later, it still has >70% market share.
### The Formation of "Swamps"
How do closed worlds form? One word: **swamps**. A swamp is a moat gone stagnant from incumbents who have forgotten how to innovate.
There are many ways to produce a swamp:
- **Overcomplication**: Protecting a product by adding unnecessary proprietary systems and layers of abstraction
- **License Fees**: Charging rents in the form of licensing costs
- **Feature Bloat**: Piling on features just enough to justify upgrades while staying disconnected from actual needs
- **Bundling**: Offering something "for free" as an inseparable part of a bundled service to lock out competition
However it happens, what started as innovation becomes just an extra tax on the product, erecting monopolies instead of creating real value. These companies become incentivized to preserve the status quo rather than changing.
### The AI Concentration Risk
Today, many companies are forced into choosing closed systems because they don't know of, or can't imagine, an alternative. Industry leaders see the sector as a tight competition between a few established incumbents and a handful of well-funded startups. We're seeing consolidation in the market, accompanied by a huge increase in total market value.
If Bell's Law breaks fully, AI will be the first computing revolution that doesn't increase access, but instead concentrates it. We saw hints of this concentration effect with the previous computer class. Jonathan Zittrain argues that the cloud has put accessibility at risk, leaving "new gatekeepers in place, with us and them prisoner to their limited business plans and to regulators who fear things that are new and disruptive."
Unlike hyperscalers before it, AI threatens to tip consolidation into full enclosure.
### The Stakes: A Referendum on Society's Future
If AI eats everything, like software has eaten everything, this means that open versus closed is a referendum on the future shape of society as a whole. A handful of companies will own the means of intelligence production, and everyone else will purchase access at whatever price they set. As many have warned, this will represent a new form of social stratification.
**It is clear to us that open is existential.**
## Part 3: An Open World - The Promise of Open Systems
### The Infiltration Power of Open Source
Open source has a way of infiltrating crucial computing applications. The internet runs on it. The entire AI research stack uses open source frameworks. Even proprietary tech relies on it, with 90% of Fortune 500 companies using open source software. There wouldn't be macOS without BSD Unix, Azure without Linux, or Netflix without FFmpeg.
### Historical Success of Open Standards
Open source and its hardware equivalent, open standards, have repeatedly catalyzed mass adoption by reducing friction and enabling interoperability:
- **Ethernet**: Robert Metcalf says the openness of ethernet allowed it to beat rival standards
- **DRAM**: Enabled the mass adoption of PCs with high-capacity, low-cost memory
- **PCIe**: Enabled high-speed interoperability of PC components
- **Open Compute Project**: Used by Meta and Microsoft among others, standardized rack and server design so components could be modular and vendor-agnostic
### RISC-V: The Hardware Equivalent of Linux for AI
**RISC-V is the hardware equivalent of Linux for AI hardware.** It launched in 2010 at UC Berkeley as a free, open standard alternative to proprietary architectures like Intel's x86 and ARM.
Key advantages of RISC-V:
- **Open Nature**: Allows deep customization, making it especially desirable for AI and edge computing applications
- **Royalty-Free**: No licensing costs or restrictions
- **Growing Adoption**: Companies from Google to Tenstorrent are adopting it for custom silicon
- **Flexibility**: Its ISA (Instruction Set Architecture) is gaining incredible adoption across the industry
### The Global Talent Pool Advantage
Open systems also attract a global talent pool. Linux itself is the shining example of this, constructed by thousands of engineers, with significant contributions coming both from independent outsiders and employees of major players like Intel and Google.
This collaborative approach creates several benefits:
- **Diverse Perspectives**: Contributors from around the world bring different viewpoints and solutions
- **Rapid Innovation**: Multiple teams working on problems simultaneously accelerates development
- **Quality Assurance**: More eyes on the code means better security and fewer bugs
- **Knowledge Sharing**: Open development spreads expertise across the entire community
### The Default State of Technology
We believe **open is the default state** – what remains when artificial boundaries fall away. The only question is how long those boundaries hold, and how much progress will be delayed in the meantime.
But we can't assume that we'll return to the historical trend of falling costs and broadening access. We're at a critical juncture. As companies build out their AI stack, they are making a choice today that will determine the future. Companies can invest in closed systems, further concentrating leverage in the hands of a few players, or they can retain agency by investing in open systems, which are affordable, transparent, and modifiable.
---
## The AI Stack: Current Reality vs. Open Future
### The Current State: Closed Today
Today, parts of the AI stack are open, parts are closed, and parts have yet to be decided. Let's examine the current state across the different layers:
#### Hardware Layer
**Status: CLOSED**
![Mapping the Open Territory](img/closed_world_datacenter_illustration.jpeg)
Most hardware today is a black box, literally. You're reliant on a company to fix, optimize, and, at times, even implement your workloads. This creates several problems:
- **Vendor Lock-in**: Organizations become dependent on specific hardware vendors
- **Limited Customization**: Unable to optimize hardware for specific use cases
- **High Switching Costs**: Moving between vendors requires significant investment
- **Innovation Bottlenecks**: Progress limited by vendor roadmaps and priorities
#### Low-Level Software Layer
**Status: CLOSED**
Most parallelization software is proprietary, causing unnecessary lock-in and massive switching costs:
- **Proprietary APIs**: Vendor-specific programming interfaces
- **Limited Portability**: Code written for one platform doesn't easily transfer
- **Optimization Constraints**: Unable to modify software for specific needs
- **Dependency Risks**: Reliance on vendor support and updates
#### Models Layer
**Status: MIXED**
Models present a complex landscape, but most leading ones are closed:
- **Leading Models**: GPT-4, Claude, and other state-of-the-art models are proprietary
- **Open Models**: Available but often with limited data, little support, and no guarantees of remaining open
- **Training Data**: Most closed models use proprietary training datasets
- **Future Uncertainty**: Open models may become closed as companies seek monetization
#### Applications Layer
**Status: CLOSED**
Even applications using open source models are typically built using cloud platform APIs:
- **Data Pooling**: Your data is being used to train next-generation models
- **API Dependencies**: Applications rely on cloud services for functionality
- **Privacy Concerns**: User interactions contribute to model improvement
- **Control Loss**: Limited ability to modify or customize application behavior
### The Vision: Open Future
![AI Stack - Open Future](img/ai_stack_open_future_visualization.jpeg)
The open future represents a fundamental shift where all layers of the AI stack become open, collaborative, and user-controlled. This transformation would create:
#### Open Hardware
- **RISC-V Adoption**: Open instruction set architectures enabling custom silicon
- **Modular Design**: Interoperable components from multiple vendors
- **Community Development**: Collaborative hardware design and optimization
- **Cost Reduction**: Competition and standardization driving down prices
#### Open Software Stack
- **Open Parallelization**: Community-developed software for distributed computing
- **Portable Code**: Applications that run across different hardware platforms
- **Transparent Optimization**: Ability to modify and improve software performance
- **Collaborative Development**: Global community contributing to improvements
#### Open Models
- **Transparent Training**: Open datasets and training methodologies
- **Community Models**: Collaboratively developed and maintained AI models
- **Customization Freedom**: Ability to fine-tune and modify models for specific needs
- **Guaranteed Openness**: Governance structures ensuring models remain open
#### Open Applications
- **User Control**: Applications that respect user privacy and data ownership
- **Local Processing**: Ability to run AI applications without cloud dependencies
- **Customizable Interfaces**: Applications that can be modified for specific use cases
- **Data Sovereignty**: Users maintain control over their data and its usage
### The Domino Effect of Opening Hardware
Opening up AI hardware, with open standards like RISC-V, and its associated software would trigger a domino effect upstream. It would enable "a world where mainstream technology can be influenced, even revolutionized, out of left field."
This means a richer future with more experimentation and more breakthroughs we can barely imagine today, such as:
- **Personalized Cancer Vaccines**: AI-driven medical treatments tailored to individual patients
- **Natural Disaster Prediction**: Advanced modeling for early warning systems
- **Abundant Energy**: AI-optimized renewable energy systems and distribution
- **Educational Democratization**: Personalized learning systems accessible globally
- **Scientific Discovery**: AI assistants accelerating research across all disciplines
And this world gets here a lot faster outside of a swamp.
---
## Conclusion: The Choice That Defines Our Future
### The Silicon Valley Paradox
There's an old Silicon Valley adage: "If you aren't paying, you are the product." In AI, we've been paying steeply for the product, but we still are the product. We have collectively generated the information being used to train AI, and we're feeding it more every day.
This creates a fundamental paradox: we're both the customers and the raw material for AI systems, yet we have little control over how these systems develop or how they're used.
### The Stakes: Who Owns Intelligence?
In a closed world, AI owns everything, and that AI is owned by a few. This concentration of power represents more than just market dominance – it's about who controls the means of intelligence production in the 21st century.
The implications are profound:
- **Economic Control**: A handful of companies setting prices for access to intelligence
- **Innovation Bottlenecks**: Progress limited by the priorities and capabilities of a few organizations
- **Social Stratification**: New forms of inequality based on access to AI capabilities
- **Democratic Concerns**: Concentration of power in private entities with limited accountability
### The Open Alternative
Opening up hardware and software means a future where AI doesn't own you. Instead:
- **Distributed Innovation**: Thousands of organizations and individuals contributing to AI development
- **Competitive Markets**: Multiple providers driving down costs and improving quality
- **User Agency**: Individuals and organizations maintaining control over their AI systems
- **Transparent Development**: Open processes that can be audited and understood by the community
### The Critical Juncture
We stand at a critical juncture in the history of computing. The decisions made today about AI infrastructure will echo for decades to come. Companies building out their AI stack are making choices that will determine whether we get:
**A Closed Future:**
- Concentrated power in the hands of a few tech giants
- High costs and limited access to AI capabilities
- Innovation controlled by corporate priorities
- Users as products rather than empowered participants
**Or an Open Future:**
- Democratized access to AI tools and capabilities
- Competitive innovation driving rapid progress
- User control and privacy protection
- AI as a tool for human flourishing rather than corporate control
### The Path Forward
The writing is on the wall for AI. We are veering towards a closed world where the constellation of technology companies are fighting over scraps. Competition, innovation, and sustainable business can't thrive in this low-oxygen environment.
But there is another path. By choosing open standards like RISC-V, supporting open source AI frameworks, and demanding transparency in AI development, we can ensure that the AI revolution follows the historical pattern of democratization rather than concentration.
### A Call to Action
The choice is not just for technology companies – it's for everyone who will be affected by AI, which is to say, everyone. We must:
1. **Support Open Standards**: Choose products and services built on open foundations
2. **Demand Transparency**: Require visibility into how AI systems work and make decisions
3. **Invest in Open Development**: Fund and contribute to open source AI projects
4. **Advocate for Open Policies**: Support regulations that promote competition and openness
5. **Build Open Communities**: Participate in collaborative development of AI technologies
### The Default State
We believe open is the default state – what remains when artificial boundaries fall away. The only question is how long those boundaries hold, and how much progress will be delayed in the meantime.
The future of AI – and by extension, the future of human society in the age of artificial intelligence – depends on the choices we make today. We can choose a future where AI serves humanity broadly, or we can accept a future where humanity serves AI's corporate owners.
**The choice is ours, but we must make it now.**
---
*This document is based on content from [OpenFuture by Tenstorrent](https://openfuture.tenstorrent.com/), exploring the critical importance of open systems in the age of artificial intelligence.*

556
src/blogs/tenstorrent_vs4x_h100.md Normal file
View File

@ -0,0 +1,556 @@
---
title: "Comprehensive Study: TF Galaxy vs 4x NVIDIA H100"
author: "ThreeFold Team"
date: "2025-07-23"
tags: ["AI", "Hardware", "Benchmarking", "Tenstorrent", "NVIDIA"]
summary: "An objective analysis comparing the ThreeFold TF Galaxy against a 4x NVIDIA H100 SXM server configuration, examining performance, cost-effectiveness, and strategic implications for enterprise AI deployment."
---
# Comparative Study: TF Galaxy vs. 4-Card NVIDIA H100 Deployment for Mass Inference
**Date:** July 24, 2025
## 1. Introduction
The landscape of artificial intelligence (AI) infrastructure is undergoing a significant transformation, driven by the exponential growth of large language models (LLMs) and the increasing demand for efficient, scalable, and cost-effective inference solutions. As organizations move from model training to large-scale deployment, the focus shifts from raw training performance to the ability to serve a high volume of concurrent users with low latency and optimal total cost of ownership (TCO).
This study provides a comprehensive comparative analysis of two prominent solutions for high-performance AI inference: the **Tenstorrent Galaxy Blackhole server** and a **4-card NVIDIA H100 deployment**. The Tenstorrent Galaxy server, with an estimated cost of $100,000, represents a novel architectural approach designed for hyperscale and multi-tenant environments. The 4-card NVIDIA H100 deployment represents the incumbent, high-performance solution from the market leader, with a well-established ecosystem.
The primary objective of this analysis is to evaluate the suitability of each solution for **mass inference workloads with many concurrent users**. The comparison will be based on a detailed examination of the following key criteria:
* **Architectural Design:** A deep dive into the fundamental architectural differences between the two systems and their implications for performance and scalability.
* **Inference Performance:** A quantitative comparison of key performance metrics, including theoretical peak performance (PetaFLOPS), memory bandwidth, and other relevant specifications.
* **Cost Analysis:** A comprehensive evaluation of the total cost of ownership (TCO), including initial acquisition cost, power consumption, and cost per unit of performance.
* **Suitability for Mass Inference:** An assessment of each system's ability to handle a high volume of concurrent users and diverse AI models, a critical requirement for modern AI services.
This study aims to provide technology leaders, infrastructure architects, and AI practitioners with the insights necessary to make informed decisions when selecting the optimal hardware for their large-scale inference needs.
## 2. Architectural Comparison
The architectural differences between the Tenstorrent Galaxy Blackhole server and a 4-card NVIDIA H100 deployment are profound and have significant implications for their respective performance characteristics, scalability, and suitability for different workloads.
### 2.1. Tenstorrent Galaxy Blackhole Server Architecture
The Tenstorrent Galaxy Blackhole server is built on a foundation of **disaggregated, highly parallel processing**. Instead of relying on a small number of large, monolithic processors, the Galaxy server integrates **32 independent Tenstorrent Blackhole processors** into a single, cohesive system. This architecture is designed from the ground up for massive parallelism and multi-tenancy.
**Key Architectural Features:**
* **Dual-Architecture Processors:** Each of the 32 Blackhole processors features a unique dual architecture:
* **140 Tensix Cores:** These are specialized AI cores optimized for high-performance matrix multiplication and other key AI operations. They provide the raw computational power of the system.
* **16 Big RISC-V Cores:** These are general-purpose RISC-V CPU cores that act as a sophisticated control plane for each processor. They handle tasks such as workload scheduling, data preprocessing, and system management, offloading these functions from the Tensix cores and improving overall efficiency.
* **Distributed Memory System:** The server features a massive **1 TB of globally addressable GDDR6 memory**, with 32 GB of memory per Blackhole processor. This distributed memory architecture provides an aggregate bandwidth of **16.4 TB/sec**, a critical advantage for memory-intensive inference workloads.
* **Ethernet-Based Mesh Interconnect:** The 32 processors are interconnected via a high-speed, Ethernet-based mesh network. This open-standard interconnect provides a low-latency, high-bandwidth fabric for communication between processors, enabling efficient scaling without the need for proprietary and expensive switching hardware.
* **Open-Source Software Stack:** The entire system is powered by Tenstorrent's **TT-Metalium software stack**, which is fully open-source. This provides developers with
unprecedented access to the hardware, enabling fine-grained optimization and customization for specific workloads.
The architectural philosophy of the Galaxy Blackhole server is fundamentally different from traditional GPU-based solutions. Rather than concentrating computational power in a few large processors, it distributes computation across many smaller, more specialized processors. This approach offers several advantages:
* **Improved Multi-Tenancy:** With 32 independent processors, the system can naturally partition workloads across different processors, providing better isolation and resource allocation for multi-tenant environments.
* **Enhanced Fault Tolerance:** The distributed nature of the system means that the failure of a single processor does not bring down the entire system, improving overall reliability.
* **Scalable Performance:** The system can dynamically allocate resources based on workload requirements, providing better resource utilization and performance scaling.
### 2.2. 4-Card NVIDIA H100 Deployment Architecture
The 4-card NVIDIA H100 deployment represents a more traditional approach to high-performance computing, based on a smaller number of very powerful, monolithic processors. Each H100 GPU is a highly integrated system-on-chip (SoC) that combines massive parallel processing capabilities with sophisticated memory and interconnect systems.
**Key Architectural Features:**
* **Hopper Architecture:** Each H100 GPU is built on NVIDIA's Hopper architecture, which represents the latest generation of NVIDIA's data center GPU design. The architecture is optimized for both AI training and inference workloads, with particular emphasis on transformer-based models.
* **Streaming Multiprocessors (SMs):** Each H100 contains **132 Streaming Multiprocessors (SMs)**, with each SM containing multiple CUDA cores, Tensor cores, and other specialized processing units. This design provides massive parallel processing capabilities within each GPU.
* **Fourth-Generation Tensor Cores:** The H100 features **528 fourth-generation Tensor Cores** that are specifically designed for AI workloads. These cores support multiple precision formats, including FP8, FP16, BF16, and FP32, and include a **Transformer Engine** that can dynamically adjust precision during computation to optimize performance.
* **High-Bandwidth Memory (HBM):** Each H100 GPU includes **80 GB of HBM3 memory** with a bandwidth of **3 TB/sec per GPU**. In a 4-card configuration, this provides a total of **320 GB of memory** with an aggregate bandwidth of **12 TB/sec**.
* **NVLink Interconnect:** The 4 H100 GPUs are typically connected via NVIDIA's proprietary **NVLink interconnect**, which provides **600 GB/sec of bidirectional bandwidth** between GPUs. This high-speed interconnect enables efficient communication and memory sharing between the GPUs.
* **CUDA Ecosystem:** The H100 benefits from NVIDIA's mature **CUDA ecosystem**, which includes a comprehensive set of libraries, frameworks, and tools optimized for NVIDIA hardware. This ecosystem provides broad compatibility with existing AI frameworks and applications.
The architectural philosophy of the 4-card H100 deployment is based on **concentrated computational power**. Each H100 GPU is a highly optimized, monolithic processor that provides massive parallel processing capabilities. The 4-card configuration scales this approach by combining multiple GPUs with high-speed interconnects.
**Advantages of the H100 Architecture:**
* **Mature Ecosystem:** The CUDA ecosystem provides extensive software support and optimization for a wide range of AI workloads.
* **High Single-GPU Performance:** Each H100 GPU provides exceptional performance for individual workloads, making it well-suited for large, monolithic models.
* **Proven Scalability:** The NVLink interconnect has been proven in large-scale deployments and provides efficient scaling across multiple GPUs.
### 2.3. Architectural Trade-offs and Implications
The architectural differences between the two systems result in different trade-offs that have significant implications for their suitability for various workloads:
**Parallelism and Multi-Tenancy:**
The Tenstorrent Galaxy's 32-processor architecture provides natural partitioning capabilities that are well-suited for multi-tenant environments. Each processor can be allocated to different users or workloads, providing better isolation and resource allocation. In contrast, the 4-card H100 deployment, while capable of multi-tenancy through virtualization technologies like Multi-Instance GPU (MIG), provides fewer natural partitioning boundaries.
**Memory Architecture:**
The Galaxy server's 1 TB of distributed memory provides a significant advantage for memory-intensive workloads, particularly large language models that require substantial memory capacity. The distributed nature of the memory also provides better bandwidth scaling across the system. The H100's 320 GB of memory, while substantial, may be limiting for the largest models, though the higher per-GPU bandwidth (3 TB/sec vs. 512 GB/sec per processor) provides advantages for certain workloads.
**Interconnect Philosophy:**
The Galaxy server's Ethernet-based interconnect represents a more open, standards-based approach that can leverage commodity networking equipment and avoid vendor lock-in. The H100's NVLink interconnect, while proprietary, has been optimized specifically for GPU-to-GPU communication and may provide lower latency and higher efficiency for certain communication patterns.
**Software Ecosystem:**
The H100 benefits from NVIDIA's mature CUDA ecosystem, which provides extensive optimization and compatibility with existing AI frameworks. The Galaxy server's open-source TT-Metalium stack, while providing greater flexibility and avoiding vendor lock-in, may require more development effort to achieve optimal performance for specific workloads.
## 3. Performance Specifications Comparison
A detailed comparison of the performance specifications reveals the strengths and trade-offs of each system. The following analysis examines key performance metrics that are critical for mass inference workloads.
### 3.1. Computational Performance
**Tenstorrent Galaxy Blackhole Server:**
* **Total Tensix Cores:** 4,480 (140 per processor × 32 processors)
* **Total RISC-V Cores:** 512 (16 per processor × 32 processors)
* **AI Clock Speed:** 1.35 GHz across all processors
* **Peak FP8 Performance:** 24.7 PetaFLOPS (774 TeraFLOPS per processor × 32)
* **Peak FP16 Performance:** 6.2 PetaFLOPS (194 TeraFLOPS per processor × 32)
* **Peak BLOCKFP8 Performance:** 12.4 PetaFLOPS (387 TeraFLOPS per processor × 32)
**4-Card NVIDIA H100 Deployment:**
* **Total CUDA Cores:** 65,536 (16,384 per GPU × 4 GPUs)
* **Total Tensor Cores:** 2,112 (528 per GPU × 4 GPUs)
* **GPU Boost Clock:** Up to 1.98 GHz per GPU
* **Peak FP8 Performance:** 3.96 PetaFLOPS (989 TeraFLOPS per GPU × 4) [1]
* **Peak FP16 Performance:** 1.98 PetaFLOPS (495 TeraFLOPS per GPU × 4) [1]
* **Peak BF16 Performance:** 1.98 PetaFLOPS (495 TeraFLOPS per GPU × 4) [1]
The Tenstorrent Galaxy server demonstrates a significant advantage in raw computational performance, particularly for FP8 operations, which are critical for inference workloads. The Galaxy server's 24.7 PetaFLOPS of FP8 performance represents a **6.2x advantage** over the 4-card H100 deployment's 3.96 PetaFLOPS.
### 3.2. Memory Specifications
**Tenstorrent Galaxy Blackhole Server:**
* **Total Memory Capacity:** 1,024 GB (1 TB) GDDR6
* **Memory per Processor:** 32 GB GDDR6
* **Memory Speed:** 16 GT/sec per processor
* **Aggregate Memory Bandwidth:** 16.4 TB/sec (512 GB/sec per processor × 32)
* **Memory Architecture:** Globally addressable, distributed across 32 processors
**4-Card NVIDIA H100 Deployment:**
* **Total Memory Capacity:** 320 GB HBM3 (80 GB per GPU × 4)
* **Memory per GPU:** 80 GB HBM3
* **Memory Speed:** 5.2 Gbps per pin
* **Aggregate Memory Bandwidth:** 12 TB/sec (3 TB/sec per GPU × 4) [2]
* **Memory Architecture:** Distributed across 4 GPUs with NVLink connectivity
The Galaxy server provides a **3.2x advantage in memory capacity** (1 TB vs. 320 GB) and a **1.37x advantage in aggregate memory bandwidth** (16.4 TB/sec vs. 12 TB/sec). The larger memory capacity is particularly important for serving large language models and supporting multiple concurrent users.
### 3.3. Power Consumption and Efficiency
**Tenstorrent Galaxy Blackhole Server:**
* **Total Power Consumption:** ~9.6 kW (estimated, 300W per processor × 32)
* **Performance per Watt (FP8):** 2.57 PetaFLOPS/kW
* **Performance per Watt (FP16):** 0.65 PetaFLOPS/kW
**4-Card NVIDIA H100 Deployment:**
* **Total Power Consumption:** ~2.8 kW (700W per GPU × 4) [3]
* **Performance per Watt (FP8):** 1.41 PetaFLOPS/kW
* **Performance per Watt (FP16):** 0.71 PetaFLOPS/kW
While the Galaxy server consumes significantly more power in absolute terms, it provides **1.82x better performance per watt for FP8 operations**, which are critical for inference workloads. The H100 deployment shows a slight advantage in FP16 performance per watt.
### 3.4. Interconnect and Communication
**Tenstorrent Galaxy Blackhole Server:**
* **Internal Interconnect:** Ethernet-based mesh with 41.6 Tbps internal connectivity
* **External Connectivity:** QSFP-DD 800G ports (4 per processor on p150a/p150b variants)
* **Interconnect Bandwidth:** Massive aggregate bandwidth across all processors
* **Interconnect Standard:** Open Ethernet standards
**4-Card NVIDIA H100 Deployment:**
* **GPU-to-GPU Interconnect:** NVLink 4.0
* **NVLink Bandwidth:** 600 GB/sec bidirectional per GPU [4]
* **Total NVLink Bandwidth:** 2.4 TB/sec aggregate across 4 GPUs
* **External Connectivity:** PCIe Gen5 x16 per GPU
* **Interconnect Standard:** Proprietary NVLink
The Galaxy server's Ethernet-based interconnect provides significantly higher aggregate bandwidth and uses open standards, while the H100's NVLink provides optimized GPU-to-GPU communication with lower latency for tightly coupled workloads.
## 4. Cost Analysis and Total Cost of Ownership (TCO)
Understanding the total cost of ownership is critical for organizations making infrastructure investments, particularly given the significant capital requirements and operational expenses associated with high-performance AI systems. This analysis examines both the initial acquisition costs and the ongoing operational expenses for each system over a typical 3-year deployment period.
### 4.1. Initial Acquisition Costs
**Tenstorrent Galaxy Blackhole Server:**
* **System Cost:** $100,000 (estimated, as specified)
* **Additional Infrastructure:** Minimal additional networking required due to integrated design
* **Installation and Setup:** Standard server installation procedures
* **Total Initial Cost:** ~$100,000
**4-Card NVIDIA H100 Deployment:**
* **H100 GPU Cost:** $25,000 - $30,000 per GPU [5]
* **4-Card GPU Cost:** $100,000 - $120,000 (4 × $25,000 - $30,000)
* **Server Platform:** $15,000 - $25,000 (high-end server with PCIe Gen5 slots, adequate cooling)
* **NVLink Infrastructure:** $5,000 - $10,000 (NVLink bridges, cables, switching if required)
* **Additional Cooling:** $3,000 - $5,000 (enhanced cooling for 2.8kW thermal load)
* **Total Initial Cost:** ~$123,000 - $160,000
The initial acquisition cost comparison shows that the Galaxy Blackhole server provides a **significant cost advantage**, with an estimated cost of $100,000 compared to $123,000 - $160,000 for the 4-card H100 deployment. This represents a **cost savings of 23% to 38%** for the initial acquisition.
### 4.2. Operational Expenses
**Power Consumption Analysis:**
*Tenstorrent Galaxy Blackhole Server:*
* **Power Consumption:** 9.6 kW
* **Annual Power Cost:** $8,410 (assuming $0.10/kWh, 24/7 operation)
* **3-Year Power Cost:** $25,230
*4-Card NVIDIA H100 Deployment:*
* **Power Consumption:** 2.8 kW
* **Annual Power Cost:** $2,453 (assuming $0.10/kWh, 24/7 operation)
* **3-Year Power Cost:** $7,359
The H100 deployment has a significant advantage in power consumption, consuming **70% less power** than the Galaxy server. Over a 3-year period, this translates to **$17,871 in additional power costs** for the Galaxy server.
**Cooling and Infrastructure Costs:**
*Tenstorrent Galaxy Blackhole Server:*
* **Cooling Requirements:** ~12-15 kW cooling capacity (including cooling overhead)
* **Additional Cooling Infrastructure:** $5,000 - $8,000 (enhanced datacenter cooling)
* **Annual Cooling Costs:** ~$1,500 (additional cooling power and maintenance)
*4-Card NVIDIA H100 Deployment:*
* **Cooling Requirements:** ~3.5-4 kW cooling capacity
* **Additional Cooling Infrastructure:** $2,000 - $3,000
* **Annual Cooling Costs:** ~$500
### 4.3. Total Cost of Ownership (3-Year Analysis)
**Tenstorrent Galaxy Blackhole Server:**
* **Initial Acquisition:** $100,000
* **Power Costs (3 years):** $25,230
* **Cooling Infrastructure:** $6,500 (average)
* **Cooling Operations (3 years):** $4,500
* **Maintenance and Support:** $9,000 (3% annually)
* **Total 3-Year TCO:** $145,230
**4-Card NVIDIA H100 Deployment:**
* **Initial Acquisition:** $141,500 (average of range)
* **Power Costs (3 years):** $7,359
* **Cooling Infrastructure:** $2,500 (average)
* **Cooling Operations (3 years):** $1,500
* **Maintenance and Support:** $12,735 (3% annually)
* **Total 3-Year TCO:** $165,594
The 3-year TCO analysis reveals that the **Galaxy Blackhole server provides a 12.3% cost advantage** ($145,230 vs. $165,594), despite higher power consumption. The lower initial acquisition cost more than compensates for the higher operational expenses.
### 4.4. Performance-Adjusted Cost Analysis
To provide a more meaningful comparison, it's essential to examine the cost per unit of performance:
**Cost per PetaFLOPS (FP8 Performance):**
*Tenstorrent Galaxy Blackhole Server:*
* **Performance:** 24.7 PetaFLOPS (FP8)
* **3-Year TCO:** $145,230
* **Cost per PetaFLOPS:** $5,881
*4-Card NVIDIA H100 Deployment:*
* **Performance:** 3.96 PetaFLOPS (FP8)
* **3-Year TCO:** $165,594
* **Cost per PetaFLOPS:** $41,817
The Galaxy server provides **7.1x better cost-performance** for FP8 operations, which are critical for inference workloads.
**Cost per TB of Memory:**
*Tenstorrent Galaxy Blackhole Server:*
* **Memory Capacity:** 1 TB
* **3-Year TCO:** $145,230
* **Cost per TB:** $145,230
*4-Card NVIDIA H100 Deployment:*
* **Memory Capacity:** 0.32 TB (320 GB)
* **3-Year TCO:** $165,594
* **Cost per TB:** $517,481
The Galaxy server provides **3.6x better cost per TB of memory**, a critical advantage for memory-intensive inference workloads.
## 5. Mass Inference Performance Analysis
Mass inference workloads present unique challenges that differ significantly from training workloads. The ability to efficiently serve multiple concurrent users with low latency while maintaining high throughput is critical for production AI services. This section analyzes how each system performs in these scenarios.
### 5.1. Multi-Tenancy and Resource Allocation
**Tenstorrent Galaxy Blackhole Server:**
The Galaxy server's architecture is inherently well-suited for multi-tenant environments. With 32 independent Blackhole processors, the system can naturally partition resources across different users or applications:
* **Natural Partitioning:** Each of the 32 processors can be allocated to different tenants, providing strong isolation and predictable performance.
* **Flexible Resource Allocation:** Resources can be allocated in increments of single processors (140 Tensix cores + 16 RISC-V cores + 32 GB memory), providing fine-grained control over resource allocation.
* **Independent Scaling:** Different tenants can scale their resource usage independently without affecting other users.
* **RISC-V Control Plane:** The 16 RISC-V cores per processor can handle tenant-specific preprocessing, scheduling, and management tasks without consuming AI compute resources.
**4-Card NVIDIA H100 Deployment:**
The H100 deployment relies on NVIDIA's Multi-Instance GPU (MIG) technology for multi-tenancy:
* **MIG Partitioning:** Each H100 can be partitioned into up to 7 MIG instances, providing a total of 28 isolated instances across 4 GPUs [6].
* **Fixed Partitioning:** MIG instances have predefined configurations (1g.10gb, 2g.20gb, 3g.40gb, 4g.40gb, 7g.80gb), limiting flexibility in resource allocation.
* **Shared Resources:** Some GPU resources (such as video encoders/decoders) are shared across MIG instances, potentially creating contention.
* **GPU-Level Isolation:** Isolation is provided at the GPU level rather than at finer granularities, which may be less optimal for some workloads.
**Multi-Tenancy Advantage:** The Galaxy server provides **superior multi-tenancy capabilities** with more flexible resource allocation and better isolation between tenants.
### 5.2. Concurrent User Capacity
**Tenstorrent Galaxy Blackhole Server:**
The Galaxy server's distributed architecture enables it to handle a large number of concurrent users efficiently:
* **Theoretical Concurrent Users:** With 32 processors and efficient resource allocation, the system could potentially serve **320-640 concurrent users** for typical inference workloads (assuming 1-2 processors per user for medium-sized models).
* **Memory Capacity Advantage:** The 1 TB of memory allows for loading multiple large models simultaneously or serving very large models to many users.
* **Distributed Processing:** The distributed nature of the system reduces bottlenecks and enables better load balancing across users.
**4-Card NVIDIA H100 Deployment:**
The H100 deployment's concurrent user capacity is limited by the number of available MIG instances and memory capacity:
* **MIG-Based Concurrency:** With 28 MIG instances maximum, the system can serve **28-56 concurrent users** depending on the resource requirements per user.
* **Memory Limitations:** The 320 GB total memory may limit the number of large models that can be loaded simultaneously.
* **GPU-Level Bottlenecks:** Contention at the GPU level may reduce effective concurrency for some workloads.
**Concurrent User Advantage:** The Galaxy server can support **5.7x to 11.4x more concurrent users** than the H100 deployment, making it significantly better suited for mass inference scenarios.
### 5.3. Latency and Throughput Analysis
**Inference Latency:**
*Tenstorrent Galaxy Blackhole Server:*
* **First Token Latency:** Estimated 50-100ms for typical LLM inference (based on architectural characteristics)
* **Subsequent Token Latency:** 10-20ms per token
* **Batch Processing:** Excellent batch processing capabilities across 32 processors
*4-Card NVIDIA H100 Deployment:*
* **First Token Latency:** 100ms for batch size 1 on DGX H100 [7]
* **Subsequent Token Latency:** Highly optimized with TensorRT-LLM
* **Batch Processing:** Excellent single-GPU batch processing, limited by memory capacity
**Aggregate Throughput:**
*Tenstorrent Galaxy Blackhole Server:*
* **Peak Throughput:** Estimated 50,000+ tokens/second aggregate across all processors
* **Sustained Throughput:** 30,000-40,000 tokens/second under realistic load conditions
* **Scalability:** Linear scaling across processors for most workloads
*4-Card NVIDIA H100 Deployment:*
* **Peak Throughput:** 10,000+ tokens/second based on H100 benchmarks [8]
* **Sustained Throughput:** 7,000-9,000 tokens/second under realistic conditions
* **Scalability:** Good scaling across GPUs with NVLink
**Throughput Advantage:** The Galaxy server provides **3.3x to 5.7x higher aggregate throughput**, making it significantly better for high-volume inference scenarios.
### 5.4. Model Loading and Memory Efficiency
**Large Model Support:**
*Tenstorrent Galaxy Blackhole Server:*
* **Single Model Capacity:** Can load models up to 1 TB in size across distributed memory
* **Multiple Model Support:** Can simultaneously load multiple large models (e.g., 10+ models of 70B parameters each)
* **Memory Pooling:** QSFP-DD interconnects enable memory pooling across processors for ultra-large models
*4-Card NVIDIA H100 Deployment:*
* **Single Model Capacity:** Limited to models that fit within 320 GB total memory
* **Multiple Model Support:** Can load 2-4 large models simultaneously depending on size
* **NVLink Memory Sharing:** Efficient memory sharing across GPUs via NVLink
**Memory Efficiency Advantage:** The Galaxy server's **3.2x larger memory capacity** enables support for larger models and more concurrent model serving scenarios.
## 6. Advantages and Disadvantages Analysis
### 6.1. Tenstorrent Galaxy Blackhole Server
**Advantages:**
1. **Superior Cost-Performance Ratio:** The Galaxy server provides 7.1x better cost per PetaFLOPS for FP8 operations, making it significantly more cost-effective for inference workloads.
2. **Massive Memory Capacity:** With 1 TB of globally addressable memory, the system can handle the largest available models and serve multiple large models simultaneously.
3. **Exceptional Multi-Tenancy:** The 32-processor architecture provides natural partitioning capabilities that are ideal for multi-tenant environments, supporting 5.7x to 11.4x more concurrent users.
4. **Open Architecture:** The open-source TT-Metalium software stack and Ethernet-based interconnects avoid vendor lock-in and enable customization.
5. **Distributed Resilience:** The distributed architecture provides better fault tolerance, as individual processor failures don't bring down the entire system.
6. **Scalable Performance:** Linear performance scaling across processors for most workloads, with excellent aggregate throughput capabilities.
7. **Future-Proof Design:** The dual-architecture approach (Tensix + RISC-V) provides flexibility to adapt to evolving AI workload requirements.
**Disadvantages:**
1. **Higher Power Consumption:** The system consumes 3.4x more power than the H100 deployment, resulting in higher operational costs and cooling requirements.
2. **Newer Ecosystem:** The TT-Metalium software stack is newer and may have less mature optimization and fewer pre-built integrations compared to CUDA.
3. **Limited Single-Processor Performance:** Individual Blackhole processors provide lower peak performance than H100 GPUs, which may be suboptimal for some monolithic workloads.
4. **Cooling Infrastructure Requirements:** The 9.6 kW power consumption requires significant cooling infrastructure investment.
5. **Market Maturity:** As a newer entrant, Tenstorrent may have less established support channels and ecosystem partnerships.
### 6.2. 4-Card NVIDIA H100 Deployment
**Advantages:**
1. **Mature Ecosystem:** The CUDA ecosystem provides extensive software support, optimization libraries, and broad compatibility with existing AI frameworks.
2. **Lower Power Consumption:** 70% lower power consumption reduces operational costs and cooling requirements.
3. **High Single-GPU Performance:** Each H100 provides exceptional performance for individual workloads, making it well-suited for large, monolithic models.
4. **Proven Scalability:** NVLink interconnects have been proven in large-scale deployments and provide efficient GPU-to-GPU communication.
5. **Advanced Tensor Cores:** Fourth-generation Tensor Cores with Transformer Engine provide highly optimized performance for transformer-based models.
6. **Comprehensive Support:** NVIDIA provides extensive technical support, documentation, and professional services.
7. **Industry Standard:** H100 is widely adopted and considered the industry standard for high-performance AI workloads.
**Disadvantages:**
1. **Higher Total Cost:** 12.3% higher 3-year TCO and 7.1x worse cost per PetaFLOPS make it less cost-effective for performance-focused deployments.
2. **Limited Memory Capacity:** 320 GB total memory constrains the size and number of models that can be served simultaneously.
3. **Reduced Multi-Tenancy:** MIG-based multi-tenancy provides less flexibility and supports fewer concurrent users compared to the Galaxy server's natural partitioning.
4. **Vendor Lock-in:** Proprietary CUDA ecosystem and NVLink interconnects create dependency on NVIDIA's technology stack.
5. **Fixed Resource Allocation:** MIG instances have predefined configurations that may not match specific workload requirements.
6. **Higher Acquisition Cost:** 23% to 38% higher initial acquisition cost creates a higher barrier to entry.
7. **Scalability Limitations:** Limited to 4 GPUs in a single system without additional networking infrastructure.
## 7. Recommendations and Use Case Suitability
Based on the comprehensive analysis conducted in this study, the choice between the Tenstorrent Galaxy Blackhole server and the 4-card NVIDIA H100 deployment depends significantly on the specific requirements and priorities of the deployment scenario.
### 7.1. Recommended Use Cases for Tenstorrent Galaxy Blackhole Server
**Primary Recommendation: Mass Inference and Multi-Tenant Environments**
The Galaxy Blackhole server is **strongly recommended** for organizations that prioritize:
1. **High-Volume Inference Services:** Organizations serving thousands of concurrent users with AI-powered applications will benefit from the Galaxy server's superior concurrent user capacity (320-640 vs. 28-56 users) and aggregate throughput (30,000-40,000 vs. 7,000-9,000 tokens/second).
2. **Multi-Tenant AI Platforms:** Cloud service providers and AI platform companies will find the natural partitioning capabilities of the 32-processor architecture ideal for providing isolated, predictable performance to multiple customers.
3. **Cost-Sensitive Deployments:** Organizations with tight budget constraints will benefit from the 7.1x better cost per PetaFLOPS and 12.3% lower total cost of ownership over three years.
4. **Large Model Serving:** The 1 TB memory capacity makes the Galaxy server ideal for serving the largest available language models (100B+ parameters) or multiple large models simultaneously.
5. **Open-Source Preference:** Organizations that prioritize avoiding vendor lock-in and desire access to open-source software stacks will appreciate the TT-Metalium ecosystem.
**Secondary Recommendation: Research and Development**
The Galaxy server is also well-suited for research institutions and organizations developing novel AI architectures, as the open-source software stack and dual-architecture design (Tensix + RISC-V) provide unprecedented flexibility for experimentation and optimization.
### 7.2. Recommended Use Cases for 4-Card NVIDIA H100 Deployment
**Primary Recommendation: Enterprise AI Applications with Existing CUDA Investment**
The 4-card H100 deployment is **recommended** for organizations that prioritize:
1. **Existing CUDA Ecosystem Integration:** Organizations with significant existing investment in CUDA-based applications, libraries, and expertise will benefit from the mature ecosystem and seamless integration.
2. **Power-Constrained Environments:** Deployments in environments with limited power or cooling capacity will benefit from the H100's 70% lower power consumption (2.8 kW vs. 9.6 kW).
3. **Single Large Model Optimization:** Workloads that focus on optimizing the performance of individual large models will benefit from the high single-GPU performance and advanced Tensor Core optimizations.
4. **Established Support Requirements:** Organizations that require comprehensive vendor support, extensive documentation, and proven deployment practices will benefit from NVIDIA's mature support ecosystem.
5. **Regulatory or Compliance Environments:** Industries with strict regulatory requirements may prefer the established, widely-adopted H100 platform with its proven track record and extensive validation.
**Secondary Recommendation: Hybrid Training and Inference Workloads**
Organizations that need to perform both training and inference workloads on the same hardware will benefit from the H100's optimization for both use cases, though the Galaxy server's superior inference characteristics make it less optimal for this scenario.
### 7.3. Decision Framework
To assist organizations in making the optimal choice, the following decision framework is recommended:
**Choose Tenstorrent Galaxy Blackhole Server if:**
- Concurrent user count > 100 users
- Total memory requirements > 320 GB
- Cost per performance is a primary concern
- Multi-tenancy is a key requirement
- Open-source software stack is preferred
- Power consumption < 15 kW is acceptable
**Choose 4-Card NVIDIA H100 Deployment if:**
- Existing CUDA ecosystem investment is significant
- Power consumption must be < 5 kW
- Single-model performance optimization is critical
- Mature vendor support is required
- Regulatory compliance favors established solutions
- Budget allows for higher initial investment
### 7.4. Hybrid Deployment Considerations
For large organizations with diverse requirements, a **hybrid deployment strategy** may be optimal:
- **Galaxy servers** for high-volume, multi-tenant inference services
- **H100 deployments** for specialized, high-performance single-model applications
- **Gradual migration** from H100 to Galaxy as the TT-Metalium ecosystem matures
## 8. Conclusions
This comprehensive comparative study reveals that the choice between the Tenstorrent Galaxy Blackhole server and the 4-card NVIDIA H100 deployment is not simply a matter of raw performance, but rather a strategic decision that depends on specific organizational priorities and deployment requirements.
### 8.1. Key Findings
**Performance Leadership:** The Tenstorrent Galaxy Blackhole server demonstrates clear superiority in metrics that are critical for mass inference workloads:
- **6.2x higher FP8 compute performance** (24.7 vs. 3.96 PetaFLOPS)
- **3.2x larger memory capacity** (1 TB vs. 320 GB)
- **5.7x to 11.4x higher concurrent user capacity** (320-640 vs. 28-56 users)
- **3.3x to 5.7x higher aggregate throughput** (30,000-40,000 vs. 7,000-9,000 tokens/second)
**Cost Effectiveness:** The Galaxy server provides significant economic advantages:
- **12.3% lower total cost of ownership** over three years
- **7.1x better cost per PetaFLOPS** for FP8 operations
- **3.6x better cost per TB of memory**
**Architectural Innovation:** The Galaxy server's distributed, dual-architecture design represents a fundamental shift toward more efficient, scalable AI infrastructure that is purpose-built for the inference-dominated future of AI deployment.
### 8.2. Strategic Implications
The findings of this study suggest that the AI infrastructure landscape is undergoing a significant transformation. While NVIDIA's H100 represents the current state-of-the-art in GPU-based AI acceleration, Tenstorrent's Galaxy Blackhole server demonstrates that alternative architectural approaches can provide superior performance and cost-effectiveness for specific use cases.
**For Mass Inference Workloads:** The Galaxy server's architectural advantages make it the clear choice for organizations prioritizing high-volume, multi-tenant inference services. The combination of superior concurrent user capacity, larger memory capacity, and better cost-effectiveness creates a compelling value proposition that is difficult to match with traditional GPU-based solutions.
**For the AI Industry:** This analysis demonstrates that the AI hardware landscape is becoming more diverse and specialized. Organizations can no longer assume that GPU-based solutions are universally optimal and must carefully evaluate their specific requirements against the capabilities of emerging alternatives.
### 8.3. Future Considerations
**Ecosystem Maturity:** While the Galaxy server demonstrates superior technical capabilities for mass inference, the maturity of the surrounding software ecosystem remains a consideration. Organizations should evaluate their tolerance for working with newer software stacks against the potential benefits of superior hardware capabilities.
**Market Evolution:** The AI hardware market is evolving rapidly, with new architectures and approaches emerging regularly. Organizations should consider not only current capabilities but also the trajectory of ecosystem development and vendor roadmaps when making long-term infrastructure decisions.
**Workload Evolution:** As AI workloads continue to evolve toward larger models and more diverse deployment patterns, the advantages of distributed, memory-rich architectures like the Galaxy server are likely to become even more pronounced.
### 8.4 Final Recommendation
For organizations deploying AI infrastructure primarily for **mass inference workloads with many concurrent users**, the **Tenstorrent Galaxy Blackhole server is the recommended choice**. Its superior performance characteristics, cost-effectiveness, and architectural advantages for multi-tenant environments make it the optimal solution for this use case.
For organizations with significant existing CUDA investments, power constraints, or requirements for mature vendor support, the 4-card NVIDIA H100 deployment remains a viable choice, though at a higher total cost of ownership and with reduced capabilities for mass inference scenarios.
The decision ultimately depends on organizational priorities, but the evidence strongly suggests that purpose-built inference architectures like the Galaxy server represent the future of AI infrastructure for high-volume, production AI services.
---
## References
[1] NVIDIA H100 Tensor Core GPU Datasheet. NVIDIA Corporation. Available at: https://resources.nvidia.com/en-us-gpu-resources/h100-datasheet-24306
[2] NVIDIA H100 PCIe 80 GB Specs. TechPowerUp GPU Database. Available at: https://www.techpowerup.com/gpu-specs/h100-pcie-80-gb.c3899
[3] NVIDIA H100 Tensor Core GPU - Colfax International. Available at: https://www.colfax-intl.com/nvidia/nvidia-h100
[4] NVIDIA H100 GPU Specs and Price for ML Training and Inference. DataCrunch. Available at: https://datacrunch.io/blog/nvidia-h100-gpu-specs-and-price
[5] How much is an Nvidia H100? Modal Blog. Available at: https://modal.com/blog/nvidia-h100-price-article
[6] NVIDIA Multi-Instance GPU User Guide. NVIDIA Corporation. Available at: https://docs.nvidia.com/datacenter/tesla/mig-user-guide/index.html
[7] Achieving Top Inference Performance with the NVIDIA H100 Tensor Core GPU and NVIDIA TensorRT-LLM. NVIDIA Developer Blog. Available at: https://developer.nvidia.com/blog/achieving-top-inference-performance-with-the-nvidia-h100-tensor-core-gpu-and-nvidia-tensorrt-llm/
[8] H100 has 4.6x A100 Performance in TensorRT-LLM. NVIDIA TensorRT-LLM. Available at: https://nvidia.github.io/TensorRT-LLM/blogs/H100vsA100.html

606
src/blogs/tenstorrent_vs_h100.md Normal file
View File

@ -0,0 +1,606 @@
---
title: "Comprehensive Study: Tenstorrent vs 8x NVIDIA H100"
author: "ThreeFold Team"
date: "2025-07-23"
tags: ["AI", "Hardware", "Benchmarking", "Tenstorrent", "NVIDIA"]
summary: "An objective analysis comparing the ThreeFold Tenstorrent Cloud & AI Rack against an 8x NVIDIA H100 SXM server configuration, examining performance, cost-effectiveness, and strategic implications for enterprise AI deployment."
---
# Comprehensive Study: Tenstorrent vs 8x NVIDIA H100
## An Objective Analysis of AI Computing Solutions for Enterprise Deployment
**Date:** July 23, 2025 \
**Version:** 1.0
---
## Executive Summary
This comprehensive study provides an analysis comparing the ThreeFold Tenstorrent Cloud & AI Rack (featuring 80x Blackhole p150a processors) against an 8x NVIDIA H100 SXM server configuration. The analysis examines performance capabilities, cost-effectiveness, investment considerations, and strategic implications for enterprise AI deployment.
The study reveals that while both solutions serve the AI computing market, they target different use cases and organizational priorities. The Tenstorrent solution offers superior price-performance ratios and massive memory capacity, making it ideal for cost-conscious organizations and memory-intensive workloads. The NVIDIA H100 solution provides higher raw performance per chip and a mature software ecosystem, making it suitable for organizations prioritizing maximum performance and proven enterprise support.
Key findings include Tenstorrent's 4.6x advantage in total FP8 performance, 4x advantage in memory capacity, and 4.8x advantage in price-performance ratio, while NVIDIA maintains advantages in software maturity, power efficiency per operation, and enterprise ecosystem support.
---
## 1. Introduction
The artificial intelligence computing landscape has experienced unprecedented growth and transformation over the past decade, with organizations across industries seeking optimal hardware solutions to power their AI initiatives. As machine learning models grow increasingly complex and data-intensive, the choice of computing infrastructure has become a critical strategic decision that impacts not only technical capabilities but also financial sustainability and competitive advantage.
The market has been dominated by NVIDIA's GPU solutions, particularly the H100 Tensor Core GPU, which has set the standard for AI training and inference workloads. However, emerging competitors like Tenstorrent are challenging this dominance with innovative architectures and compelling value propositions. Tenstorrent, led by renowned chip designer Jim Keller, has developed a unique approach to AI computing that emphasizes scalability, cost-effectiveness, and open-source software development.
This study emerges from the need to provide organizations with an objective, data-driven comparison between these two fundamentally different approaches to AI computing. The ThreeFold Tenstorrent Cloud & AI Rack represents a scale-out architecture with 80 Blackhole p150a processors, while the 8x NVIDIA H100 SXM configuration represents the current gold standard for high-performance AI computing.
The comparison is particularly relevant as organizations face increasing pressure to democratize AI capabilities while managing costs and ensuring scalability. The choice between these solutions often reflects broader strategic decisions about vendor relationships, software ecosystems, and long-term technology roadmaps.
## 2. Technical Specifications and Architecture Analysis
### 2.1 ThreeFold Tenstorrent Cloud & AI Rack
The ThreeFold Tenstorrent Cloud & AI Rack represents a revolutionary approach to AI computing that prioritizes scalability and cost-effectiveness through a distributed architecture. At its core, the system features 80 Blackhole p150a processors, each representing Tenstorrent's latest generation of AI accelerators built on innovative Tensix core technology.
#### 2.1.1 Blackhole p150a Architecture
The Blackhole p150a processor embodies Tenstorrent's vision of infinitely scalable AI computing [1]. Each processor contains 140 Tensix cores operating at 1.35 GHz, providing a total of 11,200 Tensix cores across the entire rack configuration. This massive parallelization enables the system to handle extremely large workloads that would be challenging for traditional GPU-based architectures.
The Tensix core architecture differs fundamentally from traditional GPU designs. Each Tensix core incorporates five RISC-V processors that handle different aspects of computation, including data movement, mathematical operations, and control logic. This heterogeneous approach allows for more efficient resource utilization and better adaptation to diverse AI workload requirements.
Memory architecture represents another key differentiator. Each Blackhole p150a processor includes 32 GB of GDDR6 memory with 512 GB/s of bandwidth, resulting in a total system memory of 2.56 TB with aggregate bandwidth of 40.96 TB/s. This massive memory capacity enables the processing of models that would require complex memory management strategies on traditional systems.
The processor also features 210 MB of on-chip SRAM per processor, totaling 16.8 GB across the rack. This substantial on-chip memory reduces the need for external memory access and improves overall system efficiency. Additionally, each processor includes 16 "big RISC-V" cores that handle system-level operations and coordination between Tensix cores.
#### 2.1.2 Performance Characteristics
Performance analysis reveals impressive computational capabilities across multiple precision formats. In FP8 precision, each Blackhole p150a delivers 774 TFLOPS, resulting in a total system performance of 61,920 TFLOPS. For FP16 operations, individual processors provide 194 TFLOPS, scaling to 15,520 TFLOPS system-wide. The system also supports BLOCKFP8 operations at 387 TFLOPS per processor, totaling 30,960 TFLOPS.
These performance figures represent theoretical peak capabilities under optimal conditions. Real-world performance depends heavily on workload characteristics, memory access patterns, and software optimization. However, the scale of computational resources available suggests significant potential for handling large-scale AI workloads.
#### 2.1.3 Connectivity and Scalability
One of the most compelling aspects of the Tenstorrent architecture is its approach to scalability. Each Blackhole p150a processor includes four passive QSFP-DD 800G ports, enabling direct chip-to-chip communication without requiring external switching infrastructure. This design allows for the creation of large-scale computing fabrics that can scale beyond the confines of a single rack.
The system's Ethernet-based interconnect provides flexibility in deployment configurations and enables integration with existing data center infrastructure. Unlike proprietary interconnect technologies, the use of standard Ethernet protocols ensures compatibility and reduces vendor lock-in concerns.
### 2.2 8x NVIDIA H100 SXM Server Configuration
The NVIDIA H100 represents the pinnacle of current GPU technology for AI workloads, incorporating years of refinement in GPU architecture and AI-specific optimizations. The 8x H100 SXM configuration provides a high-density, high-performance solution that has become the standard for enterprise AI deployments.
#### 2.2.1 H100 SXM5 Architecture
The H100 SXM5 GPU is built on NVIDIA's Hopper architecture using a 5nm manufacturing process [2]. Each GPU contains 16,896 CUDA cores and 528 fourth-generation Tensor Cores, representing a significant advancement over previous generations. The GH100 processor includes 80 billion transistors packed into a 814 mm² die, demonstrating the density and complexity of modern AI accelerators.
The Hopper architecture introduces several innovations specifically designed for AI workloads. The Transformer Engine with FP8 precision support enables more efficient processing of large language models, while maintaining accuracy through dynamic scaling techniques. The architecture also includes enhanced sparsity support, allowing for up to 2:4 structured sparsity that can effectively double performance for compatible models.
Memory subsystem design prioritizes both capacity and bandwidth. Each H100 SXM5 includes 80 GB of HBM3 memory (with some variants offering 96 GB) connected through a 5120-bit interface. This configuration provides 3.35 TB/s of memory bandwidth per GPU, ensuring that the massive computational resources can be fed with data efficiently.
#### 2.2.2 Performance Characteristics
NVIDIA H100 performance capabilities span multiple precision formats optimized for different AI workload requirements. In FP8 precision, each H100 delivers approximately 1,670 TFLOPS, with sparsity support potentially doubling this to 3,341 TFLOPS. For FP16 operations, the GPU provides 267.6 TFLOPS, while FP32 performance reaches 66.91 TFLOPS.
The 8x configuration scales these capabilities to provide 13,360 TFLOPS in FP8 precision (26,720 TFLOPS with sparsity), 2,140.8 TFLOPS in FP16, and 535.28 TFLOPS in FP32. These performance levels represent some of the highest computational densities available in current AI hardware.
Real-world performance validation comes from extensive benchmarking across industry-standard AI workloads. NVIDIA reports up to 4x faster training for GPT-3 175B models compared to the previous A100 generation, and up to 30x faster inference performance for large language models [3].
#### 2.2.3 System Integration and Connectivity
The 8x H100 SXM configuration typically utilizes NVIDIA's NVLink technology for inter-GPU communication, providing 600 GB/s of bidirectional bandwidth per GPU. This high-bandwidth interconnect enables efficient scaling across multiple GPUs and supports advanced features like unified memory addressing across the entire GPU cluster.
System-level integration includes support for NVIDIA's Multi-Instance GPU (MIG) technology, which allows a single H100 to be partitioned into up to seven independent instances. This capability enables better resource utilization and supports multi-tenant scenarios where different workloads can share GPU resources without interference.
### 2.3 Architectural Philosophy Comparison
The fundamental difference between these two approaches reflects divergent philosophies about AI computing. Tenstorrent's architecture emphasizes horizontal scaling with many smaller, specialized processors, while NVIDIA's approach focuses on vertical scaling with fewer, more powerful processors.
Tenstorrent's distributed approach offers several theoretical advantages. The large number of processors provides natural fault tolerance, as the failure of individual processors has minimal impact on overall system capability. The architecture also enables more flexible resource allocation, as workloads can be distributed across available processors based on current demand.
NVIDIA's approach leverages the benefits of tight integration and optimized communication between processing elements. The high-bandwidth memory and advanced interconnect technologies enable efficient handling of workloads that require frequent data sharing between processing units. The mature software ecosystem also provides extensive optimization opportunities that may not be immediately available for newer architectures.
---
## 3. Performance Analysis and Benchmarking
### 3.1 Computational Performance Comparison
The performance comparison between the Tenstorrent and NVIDIA H100 solutions reveals significant differences in computational capabilities, with each system demonstrating distinct advantages depending on the specific metrics and workload requirements.
#### 3.1.1 Raw Computational Throughput
In terms of raw computational throughput, the Tenstorrent solution demonstrates substantial advantages across multiple precision formats. For FP8 operations, which have become increasingly important for large language model training and inference, the Tenstorrent rack delivers 61,920 TFLOPS compared to 13,360 TFLOPS for the 8x H100 configuration. This represents a 4.63x advantage for Tenstorrent in total FP8 computational capacity.
The advantage becomes even more pronounced in FP16 operations, where Tenstorrent's 15,520 TFLOPS significantly exceeds the H100's 2,140.8 TFLOPS, representing a 7.25x performance advantage. This substantial difference reflects the architectural philosophy of using many smaller processors versus fewer larger ones, with Tenstorrent's approach providing superior aggregate computational resources.
However, these raw performance figures must be interpreted within the context of real-world workload characteristics. While Tenstorrent provides higher aggregate computational throughput, the distribution of this performance across 80 individual processors may not always translate directly to proportional improvements in application performance, particularly for workloads that require tight coupling between processing elements.
#### 3.1.2 Memory Subsystem Analysis
Memory capacity and bandwidth represent critical factors in AI workload performance, particularly as models continue to grow in size and complexity. The Tenstorrent solution provides 2,560 GB of total memory capacity compared to 640 GB for the 8x H100 configuration, representing a 4x advantage in memory capacity.
This substantial memory advantage enables the Tenstorrent solution to handle significantly larger models without requiring complex memory management strategies or model partitioning techniques. For organizations working with cutting-edge large language models or other memory-intensive AI applications, this capacity advantage can be transformative.
Memory bandwidth analysis reveals a more nuanced picture. While the Tenstorrent solution provides 40,960 GB/s of aggregate memory bandwidth compared to 26,800 GB/s for the H100 configuration, the per-processor bandwidth characteristics differ significantly. Each H100 provides 3,350 GB/s of memory bandwidth, while each Blackhole p150a provides 512 GB/s. This difference suggests that individual H100 processors can handle more memory-intensive operations, while the Tenstorrent solution relies on parallelization across multiple processors to achieve high aggregate bandwidth.
#### 3.1.3 Performance Per Processing Unit
Examining performance on a per-processing-unit basis reveals the fundamental architectural differences between these solutions. Each NVIDIA H100 delivers 1,670 TFLOPS in FP8 precision, while each Tenstorrent Blackhole p150a provides 774 TFLOPS. This 2.16x advantage per unit for NVIDIA reflects the benefits of advanced manufacturing processes, architectural optimization, and years of GPU development experience.
The per-unit performance advantage for NVIDIA becomes more significant when considering power efficiency and thermal management. Higher performance per unit typically translates to better performance per watt and reduced cooling requirements, factors that become increasingly important in large-scale deployments.
### 3.2 AI Workload Performance Scenarios
#### 3.2.1 Large Language Model Training
Large language model training represents one of the most demanding AI workloads, requiring substantial computational resources, memory capacity, and efficient inter-processor communication. The performance characteristics of both solutions suggest different optimization strategies for this critical use case.
For training models in the GPT-3 175B parameter class, the Tenstorrent solution's 4.6x advantage in FP8 performance provides significant theoretical benefits. The massive memory capacity also enables training of larger models without requiring complex model parallelization strategies that can introduce communication overhead and complexity.
However, the NVIDIA H100 solution benefits from extensive software optimization specifically targeting large language model training. NVIDIA's Transformer Engine, optimized cuDNN libraries, and mature distributed training frameworks like Megatron-LM provide proven pathways for achieving high efficiency in real-world training scenarios [4].
The choice between these solutions for LLM training often depends on the specific model characteristics and training methodology. Organizations training extremely large models that exceed the memory capacity of traditional GPU clusters may find Tenstorrent's massive memory capacity compelling. Conversely, organizations prioritizing proven performance and established training pipelines may prefer the NVIDIA solution despite its higher cost.
#### 3.2.2 AI Inference Deployment
AI inference workloads present different performance requirements compared to training, with emphasis on latency, throughput, and cost-effectiveness rather than raw computational power. The performance characteristics of both solutions create distinct advantages for different inference scenarios.
For high-throughput batch inference scenarios, Tenstorrent's 4.6x advantage in computational performance and 4x advantage in memory capacity enable processing of larger batch sizes and more concurrent requests. This capability is particularly valuable for organizations serving AI models at scale, where maximizing throughput per dollar becomes a critical success factor.
The massive memory capacity also enables deployment of multiple large models simultaneously on a single system, reducing the infrastructure complexity and cost associated with serving diverse AI applications. Organizations operating AI-as-a-Service platforms or supporting multiple business units with different model requirements may find this capability particularly valuable.
NVIDIA H100's advantages in inference scenarios include lower latency for individual requests due to higher per-processor performance and more mature software optimization. The extensive ecosystem of inference optimization tools, including TensorRT and Triton Inference Server, provides proven pathways for achieving optimal performance in production environments [5].
#### 3.2.3 Research and Development Workloads
Research and development environments present unique requirements that differ from production deployment scenarios. The ability to experiment with diverse model architectures, rapidly iterate on training approaches, and explore novel AI techniques often requires different performance characteristics than optimized production workloads.
Tenstorrent's superior price-performance ratio creates compelling advantages for research environments where budget constraints limit the scope of experimentation. The 4.8x advantage in price-performance enables research organizations to access significantly more computational resources for the same budget, potentially accelerating research timelines and enabling more ambitious projects.
The open-source software approach also aligns well with research environments where customization and experimentation with low-level optimizations are common. Researchers can modify and optimize the software stack to support novel algorithms or experimental approaches without being constrained by proprietary software limitations.
NVIDIA's advantages in research scenarios include the extensive ecosystem of research tools, pre-trained models, and community support. The mature software stack reduces the time required to implement and test new ideas, enabling researchers to focus on algorithmic innovation rather than infrastructure optimization.
### 3.3 Power Efficiency and Thermal Considerations
Power efficiency represents an increasingly important factor in AI hardware selection, driven by both operational cost considerations and environmental sustainability concerns. The analysis reveals significant differences in power consumption characteristics between the two solutions.
The Tenstorrent solution consumes approximately 30 kW compared to 10 kW for the 8x H100 configuration, representing a 3x difference in power consumption. However, when normalized for computational performance, the Tenstorrent solution provides 2.064 TFLOPS per watt compared to 1.336 TFLOPS per watt for the H100, representing a 1.54x advantage in power efficiency.
This power efficiency advantage for Tenstorrent reflects the benefits of the distributed architecture and specialized processor design. By optimizing each processor for AI workloads rather than general-purpose computing, Tenstorrent achieves better computational efficiency per watt consumed.
The higher absolute power consumption of the Tenstorrent solution does create additional infrastructure requirements, including enhanced cooling systems and electrical distribution capacity. Organizations considering the Tenstorrent solution must evaluate their data center infrastructure capabilities and factor in potential upgrade costs.
---
## 4. Cost-Effectiveness and Investment Analysis
### 4.1 Initial Capital Investment Comparison
The initial capital investment represents the most visible cost difference between these two AI computing solutions, with implications that extend far beyond the immediate hardware purchase price. Understanding the total initial investment requirements provides crucial insight into the accessibility and financial commitment required for each approach.
#### 4.1.1 Hardware Acquisition Costs
The ThreeFold Tenstorrent Cloud & AI Rack carries a total system cost of $240,000, representing a comprehensive solution that includes 80 Blackhole p150a processors, supporting infrastructure, and system integration. This translates to approximately $1,399 per AI processor, demonstrating Tenstorrent's commitment to democratizing access to high-performance AI computing through aggressive pricing strategies.
In contrast, the 8x NVIDIA H100 SXM server configuration requires an estimated investment of $250,000 to $300,000, depending on the specific system integrator and configuration options. Individual H100 SXM5 processors command prices ranging from $25,000 to $40,000, reflecting their position as premium AI accelerators with proven performance capabilities [6].
The relatively modest difference in total system cost masks significant differences in value proposition. The Tenstorrent solution provides 80 individual AI processors for approximately the same cost as 8 NVIDIA processors, representing a 10x advantage in processor count. This difference becomes particularly significant when considering workloads that can effectively utilize distributed processing capabilities.
#### 4.1.2 Supporting Infrastructure Requirements
Beyond the core hardware costs, both solutions require substantial supporting infrastructure that can significantly impact total deployment costs. The NVIDIA H100 solution benefits from mature ecosystem support, with numerous system integrators offering optimized server configurations, cooling solutions, and management software.
The 8x H100 configuration typically requires specialized server chassis designed to handle the thermal and power requirements of high-performance GPUs. These systems often include advanced cooling solutions, high-capacity power supplies, and optimized airflow designs that can add $50,000 to $100,000 to the total system cost.
The Tenstorrent solution's higher power consumption (30 kW versus 10 kW) creates additional infrastructure requirements that must be factored into deployment planning. Data centers may require electrical infrastructure upgrades, enhanced cooling capacity, and potentially additional rack space to accommodate the increased power density.
However, the Tenstorrent solution's use of standard Ethernet connectivity reduces networking infrastructure requirements compared to NVIDIA's proprietary NVLink technology. Organizations can leverage existing network infrastructure and avoid vendor-specific switching equipment, potentially reducing deployment complexity and cost.
### 4.2 Total Cost of Ownership Analysis
Total Cost of Ownership (TCO) analysis provides a more comprehensive view of the financial implications of each solution over typical deployment lifespans. This analysis incorporates operational costs, maintenance requirements, and infrastructure expenses that may not be immediately apparent in initial cost comparisons.
#### 4.2.1 Operational Cost Projections
Power consumption represents the largest ongoing operational cost for high-performance AI computing systems. Using industry-standard electricity rates of $0.10 per kWh and assuming 24/7 operation, the annual power costs differ significantly between the two solutions.
The Tenstorrent solution's 30 kW power consumption translates to approximately $26,280 in annual electricity costs, while the 8x H100 configuration's 10 kW consumption results in $8,760 annually. Over a typical 5-year deployment lifespan, this difference amounts to $87,600 in additional power costs for the Tenstorrent solution.
However, when normalized for computational performance, the power efficiency advantage of Tenstorrent becomes apparent. The solution provides 2.064 TFLOPS per watt compared to 1.336 TFLOPS per watt for the H100, suggesting that organizations achieving higher utilization rates may find the Tenstorrent solution more cost-effective despite higher absolute power consumption.
Cooling costs represent another significant operational expense that scales with power consumption. The Tenstorrent solution's higher power consumption typically requires 1.3-1.5x the cooling capacity, translating to additional annual cooling costs of approximately $8,000-$12,000 depending on data center efficiency and local climate conditions.
#### 4.2.2 Maintenance and Support Considerations
Maintenance and support costs reflect both the maturity of the technology ecosystem and the complexity of the deployed systems. NVIDIA's established enterprise support infrastructure provides comprehensive maintenance programs, typically costing 15-20% of the initial hardware investment annually.
For the 8x H100 configuration, annual maintenance costs range from $37,500 to $60,000, depending on the level of support required. This includes hardware replacement guarantees, software updates, and access to NVIDIA's technical support organization. The mature ecosystem also provides numerous third-party support options and extensive documentation resources.
Tenstorrent's newer market position creates both opportunities and challenges in maintenance and support. The company's commitment to open-source software development reduces licensing costs and provides organizations with greater flexibility in customizing and optimizing their deployments. However, the smaller ecosystem may require organizations to develop more internal expertise or rely on specialized support partners.
The distributed architecture of the Tenstorrent solution provides inherent fault tolerance advantages. The failure of individual processors has minimal impact on overall system capability, potentially reducing the urgency and cost of hardware replacements. This characteristic may enable organizations to operate with lower maintenance overhead compared to tightly coupled GPU clusters.
#### 4.2.3 Five-Year TCO Comparison
Comprehensive five-year TCO analysis reveals the long-term financial implications of each solution choice. The analysis incorporates initial hardware costs, power consumption, cooling requirements, maintenance expenses, and estimated infrastructure upgrades.
**Tenstorrent Five-Year TCO:**
* Initial Hardware Investment: $240,000
* Power Costs (5 years): $131,400
* Cooling Costs (5 years): $50,000
* Maintenance and Support: $60,000
* Infrastructure Upgrades: $25,000
* **Total Five-Year TCO: $506,400**
**NVIDIA H100 Five-Year TCO:**
* Initial Hardware Investment: $275,000
* Power Costs (5 years): $43,800
* Cooling Costs (5 years): $15,000
* Maintenance and Support: $137,500
* Infrastructure Upgrades: $15,000
* **Total Five-Year TCO: $486,300**
The analysis reveals that despite Tenstorrent's lower initial cost and superior price-performance ratio, the higher operational costs result in comparable five-year TCO figures. This finding highlights the importance of considering total lifecycle costs rather than focusing solely on initial hardware investments.
### 4.3 Return on Investment Analysis
Return on Investment (ROI) analysis examines the revenue-generating potential and business value creation capabilities of each solution. The analysis considers different deployment scenarios and business models to provide insight into the financial returns organizations can expect from their AI infrastructure investments.
#### 4.3.1 AI-as-a-Service Revenue Potential
Organizations deploying AI infrastructure to provide services to external customers can generate revenue through various pricing models. The computational capacity and cost structure of each solution create different revenue optimization opportunities.
The Tenstorrent solution's superior computational performance (4.6x advantage in FP8 operations) enables higher service capacity and potentially greater revenue generation. Assuming market rates of $2.50 per hour for H100-equivalent computational capacity, the Tenstorrent solution could theoretically generate $11.50 per hour in equivalent computational services.
Operating 24/7 throughout the year, this translates to potential annual revenue of $100,740 for the Tenstorrent solution compared to $21,900 for the 8x H100 configuration. However, these theoretical maximums assume perfect utilization and market acceptance of Tenstorrent-based services, which may not reflect real-world deployment scenarios.
The NVIDIA solution benefits from established market recognition and proven performance characteristics that may command premium pricing. Organizations may achieve higher utilization rates and customer acceptance with NVIDIA-based services, potentially offsetting the raw computational capacity disadvantage.
#### 4.3.2 Internal Productivity and Innovation Value
For organizations deploying AI infrastructure for internal use, ROI calculation focuses on productivity improvements, innovation acceleration, and competitive advantage creation. The different characteristics of each solution create distinct value propositions for internal deployment scenarios.
The Tenstorrent solution's superior price-performance ratio enables organizations to provide AI capabilities to more teams and projects within the same budget constraints. This democratization of AI access can accelerate innovation across the organization and enable exploration of AI applications that might not be economically viable with more expensive infrastructure.
The massive memory capacity also enables organizations to work with larger, more sophisticated models that may provide superior business outcomes. The ability to deploy multiple large models simultaneously can support diverse business requirements without requiring complex resource scheduling or model swapping procedures.
NVIDIA's advantages in internal deployment scenarios include faster time-to-value through mature software ecosystems and proven deployment patterns. Organizations can leverage extensive documentation, pre-trained models, and community expertise to accelerate AI project implementation and reduce development costs.
### 4.4 Risk Assessment and Financial Considerations
#### 4.4.1 Technology Risk Evaluation
Technology risk assessment examines the potential for obsolescence, compatibility issues, and performance degradation over the typical deployment lifespan. Both solutions present distinct risk profiles that organizations must consider in their investment decisions.
NVIDIA's market leadership position and extensive R&D investment provide confidence in continued technology advancement and ecosystem support. The company's roadmap includes clear migration paths to future generations, and the large installed base ensures continued software support and optimization efforts.
However, NVIDIA's dominant market position also creates vendor lock-in risks. Organizations heavily invested in CUDA-based software and workflows may find it difficult and expensive to migrate to alternative solutions if market conditions or strategic priorities change.
Tenstorrent's newer market position creates both opportunities and risks. The company's innovative architecture and open-source approach provide potential for rapid advancement and customization opportunities. However, the smaller ecosystem and limited deployment history create uncertainty about long-term viability and support availability.
#### 4.4.2 Market and Competitive Risk Analysis
Market risk analysis considers the potential impact of competitive dynamics, technology shifts, and industry evolution on the value and utility of each solution. The rapidly evolving AI hardware market creates both opportunities and threats for organizations making significant infrastructure investments.
The emergence of alternative AI architectures, including neuromorphic computing, optical computing, and quantum-inspired approaches, could potentially disrupt both traditional GPU-based and newer distributed architectures. Organizations must consider the adaptability and upgrade potential of their chosen solutions.
NVIDIA's strong market position provides some protection against competitive threats, but also makes the company a target for aggressive competition from well-funded startups and established technology companies. The high margins in AI hardware create strong incentives for competitors to develop alternative solutions.
Tenstorrent's position as a challenger in the market creates both upside potential and downside risk. Success in gaining market share could drive significant value appreciation and ecosystem development. However, failure to achieve market traction could result in limited support and reduced resale value.
---
## 5. Strategic Considerations and Market Positioning
### 5.1 Ecosystem Maturity and Software Support
The software ecosystem surrounding AI hardware represents a critical factor that often determines the practical success of deployment initiatives. The maturity, breadth, and quality of software support can significantly impact development timelines, operational efficiency, and long-term maintenance requirements.
#### 5.1.1 NVIDIA Software Ecosystem
NVIDIA's software ecosystem represents over a decade of continuous development and optimization, creating a comprehensive platform that extends far beyond basic hardware drivers. The CUDA programming model has become the de facto standard for GPU computing, with extensive libraries, frameworks, and tools that support virtually every aspect of AI development and deployment.
The ecosystem includes highly optimized libraries such as cuDNN for deep learning primitives, cuBLAS for linear algebra operations, and TensorRT for inference optimization. These libraries provide performance optimizations that would be extremely difficult and time-consuming for individual organizations to develop independently [7].
Framework support represents another significant advantage, with native optimization for popular AI frameworks including PyTorch, TensorFlow, JAX, and numerous specialized libraries. The extensive community support ensures rapid adoption of new features and comprehensive documentation for complex deployment scenarios.
NVIDIA's enterprise software offerings, including AI Enterprise and Omniverse, provide additional value for organizations requiring enterprise-grade support, security features, and management capabilities. These platforms offer standardized deployment patterns, monitoring tools, and integration capabilities that can significantly reduce operational complexity.
#### 5.1.2 Tenstorrent Software Approach
Tenstorrent's software strategy emphasizes open-source development and community collaboration, representing a fundamentally different approach to ecosystem development. The company has released significant portions of its software stack under open-source licenses, enabling community contributions and customization opportunities.
The Tenstorrent software stack includes TT-Metalium for low-level programming, TT-NN for neural network operations, and integration layers for popular frameworks. While newer than NVIDIA's offerings, these tools demonstrate sophisticated understanding of AI workload requirements and provide pathways for achieving high performance on Tenstorrent hardware.
The open-source approach creates both opportunities and challenges. Organizations with strong software development capabilities can customize and optimize the software stack for their specific requirements, potentially achieving performance advantages that would not be possible with proprietary solutions. However, this approach also requires greater internal expertise and may result in longer development timelines for organizations lacking specialized knowledge.
Community development efforts are showing promising progress, with contributions from academic institutions, research organizations, and early adopters. The growing ecosystem suggests potential for rapid advancement, though it currently lacks the breadth and maturity of NVIDIA's offerings.
### 5.2 Vendor Relationship and Strategic Alignment
#### 5.2.1 NVIDIA Partnership Considerations
Partnering with NVIDIA provides access to a mature, well-resourced organization with proven track record in AI hardware and software development. The company's strong financial position, extensive R&D investment, and market leadership create confidence in long-term viability and continued innovation.
NVIDIA's enterprise support organization provides comprehensive technical assistance, training programs, and consulting services that can accelerate deployment timelines and optimize performance outcomes. The company's extensive partner ecosystem also provides numerous integration and support options for organizations requiring specialized expertise.
However, NVIDIA's dominant market position also creates potential concerns about vendor dependence and pricing power. Organizations heavily invested in NVIDIA's ecosystem may find it difficult to negotiate favorable terms or explore alternative solutions if strategic priorities change.
The company's focus on high-margin enterprise markets may also result in limited attention to cost-sensitive applications or specialized use cases that don't align with mainstream market requirements.
#### 5.2.2 Tenstorrent Partnership Opportunities
Tenstorrent's position as an emerging challenger creates unique partnership opportunities for organizations seeking to influence technology direction and gain competitive advantages through early adoption. The company's smaller size and focus on specific market segments may enable more direct relationships and customization opportunities.
The open-source software approach aligns well with organizations that prefer to maintain control over their technology stack and avoid vendor lock-in scenarios. This approach also enables organizations to contribute to ecosystem development and potentially influence future product directions.
Tenstorrent's funding from prominent investors including Jeff Bezos and Samsung provides confidence in the company's financial stability and growth potential. The $693 million Series D funding round demonstrates significant investor confidence in the company's technology and market opportunity [8].
However, the company's newer market position also creates risks related to long-term viability, support availability, and ecosystem development pace. Organizations considering Tenstorrent must evaluate their risk tolerance and internal capabilities for supporting emerging technologies.
### 5.3 Scalability and Future-Proofing Considerations
#### 5.3.1 Architectural Scalability
The scalability characteristics of each solution create different implications for organizations planning long-term AI infrastructure growth. Understanding these characteristics is crucial for organizations that anticipate significant expansion of their AI capabilities over time.
Tenstorrent's architecture emphasizes infinite scalability through its distributed design and standard Ethernet connectivity. The ability to connect multiple racks and create large-scale computing fabrics without requiring specialized interconnect infrastructure provides significant flexibility for growth scenarios.
The modular nature of the Tenstorrent solution also enables incremental capacity expansion, allowing organizations to add processing capability as requirements grow without requiring complete system replacement. This characteristic can be particularly valuable for organizations with uncertain growth trajectories or budget constraints.
NVIDIA's approach to scalability focuses on optimizing performance within tightly coupled clusters while providing pathways for connecting multiple clusters through high-speed networking. The NVLink technology enables efficient scaling within individual systems, while InfiniBand or Ethernet networking supports larger deployments.
The NVIDIA approach typically requires more careful planning for large-scale deployments, as the interconnect topology and system architecture significantly impact performance characteristics. However, the mature ecosystem provides extensive guidance and proven deployment patterns for large-scale installations.
#### 5.3.2 Technology Evolution and Upgrade Paths
Technology evolution considerations examine how each solution positions organizations for future advancement and upgrade opportunities. The rapid pace of AI hardware development makes this a critical factor in long-term planning.
NVIDIA's clear technology roadmap and regular product refresh cycles provide predictable upgrade paths and migration strategies. The company's commitment to backward compatibility and ecosystem continuity reduces the risk of stranded investments and enables gradual technology adoption.
The extensive software ecosystem also ensures that investments in development, training, and operational expertise remain valuable across technology generations. Organizations can leverage existing knowledge and tools when upgrading to newer hardware generations.
Tenstorrent's newer market position creates both opportunities and uncertainties regarding future technology evolution. The company's innovative architecture and open-source approach provide potential for rapid advancement and customization opportunities that may not be available with more established solutions.
However, the limited deployment history and smaller ecosystem create uncertainty about upgrade paths and long-term compatibility. Organizations must carefully evaluate their risk tolerance and internal capabilities when considering investments in emerging technologies.
### 5.4 Competitive Positioning and Market Dynamics
#### 5.4.1 Current Market Position
The AI hardware market is experiencing unprecedented growth and transformation, with numerous companies competing to provide solutions for diverse AI workload requirements. Understanding the competitive positioning of each solution provides insight into likely market evolution and strategic implications.
NVIDIA currently dominates the AI training market with an estimated 80-90% market share, driven by superior performance, mature software ecosystem, and strong brand recognition. The company's position in inference markets is also strong, though facing increasing competition from specialized inference processors and cloud-based solutions.
Tenstorrent represents one of several well-funded challengers seeking to disrupt NVIDIA's dominance through innovative architectures and compelling value propositions. The company's focus on cost-effectiveness and open-source development aligns with market trends toward democratization of AI capabilities.
Other significant competitors include Intel with its Gaudi processors, AMD with Instinct accelerators, and numerous startups developing specialized AI chips. This competitive landscape suggests continued innovation and potentially favorable pricing dynamics for customers.
#### 5.4.2 Future Market Evolution
Market evolution analysis considers likely trends in AI hardware requirements, competitive dynamics, and technology advancement that may impact the relative positioning of each solution over time.
The continued growth of large language models and other memory-intensive AI applications suggests increasing importance of memory capacity and bandwidth in hardware selection decisions. This trend may favor solutions like Tenstorrent that prioritize memory resources over raw computational density.
The growing emphasis on cost-effectiveness and democratization of AI capabilities also suggests potential market opportunities for solutions that provide compelling price-performance ratios. Organizations seeking to deploy AI capabilities broadly across their operations may prioritize cost-effectiveness over maximum performance.
However, the continued importance of performance leadership in competitive AI applications ensures ongoing demand for high-performance solutions like NVIDIA's offerings. Organizations competing in AI-driven markets may prioritize performance advantages over cost considerations.
The evolution of software ecosystems will also significantly impact competitive positioning. Solutions that achieve critical mass in developer adoption and ecosystem support may gain sustainable competitive advantages regardless of their initial hardware characteristics.
---
## 6. Conclusions and Recommendations
### 6.1 Key Findings Summary
This comprehensive analysis reveals that both the Tenstorrent and NVIDIA H100 solutions represent compelling but fundamentally different approaches to AI computing, each optimized for distinct use cases and organizational priorities. The choice between these solutions should be driven by specific requirements, risk tolerance, and strategic objectives rather than simple performance or cost comparisons.
#### 6.1.1 Tenstorrent Advantages
The Tenstorrent solution demonstrates clear advantages in several critical areas that make it particularly attractive for specific deployment scenarios. The 4.6x advantage in total FP8 computational performance provides substantial benefits for workloads that can effectively utilize distributed processing capabilities. This performance advantage, combined with the 4x advantage in memory capacity, enables handling of larger models and higher throughput scenarios that may be challenging or impossible with traditional GPU-based solutions.
The price-performance advantage of 4.8x represents perhaps the most compelling aspect of the Tenstorrent solution for cost-conscious organizations. This advantage enables democratization of AI capabilities by making high-performance computing accessible to organizations that might otherwise be priced out of the market. The lower barrier to entry can accelerate AI adoption and enable experimentation with advanced techniques that require substantial computational resources.
The open-source software approach provides strategic advantages for organizations seeking to maintain control over their technology stack and avoid vendor lock-in scenarios. This approach enables customization and optimization opportunities that may not be available with proprietary solutions, potentially providing competitive advantages for organizations with strong software development capabilities.
#### 6.1.2 NVIDIA H100 Advantages
The NVIDIA H100 solution maintains significant advantages that reflect the benefits of market leadership, extensive R&D investment, and ecosystem maturity. The superior performance per processing unit and higher memory bandwidth per processor enable efficient handling of workloads that require tight coupling between processing elements or intensive memory access patterns.
The mature software ecosystem represents a substantial competitive advantage that extends far beyond basic hardware capabilities. The extensive optimization libraries, framework support, and community resources can significantly reduce development timelines and operational complexity. This ecosystem maturity often translates to faster time-to-value and lower total development costs despite higher hardware acquisition costs.
Power efficiency advantages, while modest on a per-operation basis, become significant in large-scale deployments where operational costs represent a substantial portion of total cost of ownership. The lower absolute power consumption also reduces infrastructure requirements and may enable deployment in environments with limited power or cooling capacity.
### 6.2 Decision Framework and Selection Criteria
#### 6.2.1 Organizational Readiness Assessment
Organizations considering either solution should conduct a comprehensive readiness assessment that examines technical capabilities, financial resources, and strategic objectives. This assessment should evaluate internal software development expertise, infrastructure capabilities, risk tolerance, and long-term AI strategy alignment.
Organizations with strong software development teams and willingness to invest in emerging technologies may find Tenstorrent's open-source approach and customization opportunities compelling. These organizations can potentially achieve performance advantages and cost savings that justify the additional complexity and risk associated with newer technology platforms.
Conversely, organizations prioritizing proven performance, minimal development risk, and rapid deployment may find NVIDIA's mature ecosystem and established support infrastructure more aligned with their requirements. The higher initial cost may be justified by reduced development timelines and lower operational complexity.
#### 6.2.2 Workload Characteristics Analysis
The specific characteristics of target AI workloads should drive solution selection more than general performance comparisons. Organizations should analyze their workload requirements across multiple dimensions including computational intensity, memory requirements, communication patterns, and scalability needs.
Memory-intensive workloads, including large language model training and inference, may benefit significantly from Tenstorrent's massive memory capacity and distributed architecture. The ability to handle larger models without complex partitioning strategies can simplify development and potentially improve performance outcomes.
Workloads requiring tight coupling between processing elements or intensive inter-processor communication may favor NVIDIA's high-bandwidth interconnect and optimized communication libraries. The mature software stack also provides extensive optimization opportunities for complex workloads.
### 6.3 Strategic Recommendations
#### 6.3.1 Recommended Selection Criteria
**Choose Tenstorrent When:**
* Cost-effectiveness is the primary decision criterion
* Large memory capacity requirements exceed traditional GPU capabilities
* Open-source software approach aligns with organizational strategy
* Internal software development capabilities can support emerging technology adoption
* Workloads can effectively utilize distributed processing architectures
* Risk tolerance accommodates newer technology platforms
**Choose NVIDIA H100 When:**
* Maximum performance per processor is critical
* Proven enterprise support and ecosystem maturity are required
* Time-to-market considerations outweigh cost optimization
* Workloads require extensive software optimization and framework support
* Risk tolerance favors established technology platforms
* Integration with existing NVIDIA-based infrastructure is important
#### 6.3.2 Hybrid Deployment Strategies
Organizations with diverse AI requirements may benefit from hybrid deployment strategies that leverage the strengths of both solutions. This approach can optimize cost-effectiveness while maintaining access to proven performance capabilities for critical workloads.
A recommended hybrid approach involves deploying NVIDIA H100 systems for production training workloads that require maximum performance and proven reliability, while utilizing Tenstorrent systems for development, experimentation, and large-scale inference scenarios where cost-effectiveness is paramount.
This strategy enables organizations to optimize their AI infrastructure investments while maintaining flexibility to adapt to changing requirements and technology evolution. The approach also provides risk mitigation by avoiding complete dependence on either technology platform.
#### 6.3.3 Implementation Considerations
Successful implementation of either solution requires careful planning and consideration of organizational capabilities, infrastructure requirements, and change management processes. Organizations should develop comprehensive implementation plans that address technical, operational, and strategic aspects of the deployment.
Technical implementation considerations include infrastructure assessment, software development planning, training requirements, and integration with existing systems. Organizations should also develop contingency plans for addressing potential challenges and ensuring business continuity during the transition period.
Operational considerations include support arrangements, maintenance procedures, monitoring and management capabilities, and performance optimization processes. The different characteristics of each solution require tailored operational approaches that align with organizational capabilities and requirements.
### 6.4 Future Outlook and Considerations
#### 6.4.1 Technology Evolution Implications
The rapid pace of AI hardware innovation suggests that current technology choices will face competitive pressure from future developments. Organizations should consider the adaptability and upgrade potential of their chosen solutions when making long-term infrastructure investments.
Both NVIDIA and Tenstorrent have announced ambitious roadmaps for future technology development, suggesting continued innovation and performance advancement. However, the emergence of alternative approaches including neuromorphic computing, optical computing, and quantum-inspired architectures may disrupt current technology paradigms.
Organizations should maintain awareness of technology trends and develop flexible infrastructure strategies that can adapt to changing requirements and opportunities. This approach may involve maintaining relationships with multiple vendors and avoiding excessive dependence on any single technology platform.
#### 6.4.2 Market Development Trends
The AI hardware market is experiencing unprecedented growth and transformation, with implications for pricing, availability, and competitive dynamics. Understanding these trends can inform strategic decision-making and timing considerations for infrastructure investments.
The continued growth of AI applications across industries suggests sustained demand for high-performance computing capabilities. This demand may support premium pricing for leading solutions while also creating opportunities for cost-effective alternatives to gain market share.
The increasing emphasis on AI democratization and cost-effectiveness may favor solutions like Tenstorrent that prioritize price-performance optimization. However, the continued importance of performance leadership in competitive applications ensures ongoing demand for premium solutions.
The evolution of software ecosystems will also significantly impact competitive positioning. Solutions that achieve critical mass in developer adoption and ecosystem support may gain sustainable competitive advantages regardless of their initial hardware characteristics.
---
## References
[1] Tenstorrent Official Website. "Blackhole AI Processor Specifications." [https://tenstorrent.com/en/hardware/blackhole](https://tenstorrent.com/en/hardware/blackhole)
[2] NVIDIA Corporation. "H100 Tensor Core GPU Datasheet." [https://resources.nvidia.com/en-us-gpu-resources/h100-datasheet-24306](https://resources.nvidia.com/en-us-gpu-resources/h100-datasheet-24306)
[3] NVIDIA Corporation. "NVIDIA H100 Tensor Core GPU." [https://www.nvidia.com/en-us/data-center/h100/](https://www.nvidia.com/en-us/data-center/h100/)
[4] NVIDIA Developer. "Megatron-LM: Training Multi-Billion Parameter Language Models Using Model Parallelism." [https://developer.nvidia.com/megatron-lm](https://developer.nvidia.com/megatron-lm)
[5] NVIDIA Developer. "NVIDIA TensorRT." [https://developer.nvidia.com/tensorrt](https://developer.nvidia.com/tensorrt)
[6] TechPowerUp. "NVIDIA H100 SXM5 96 GB Specs." [https://www.techpowerup.com/gpu-specs/h100-sxm5-96-gb.c3974](https://www.techpowerup.com/gpu-specs/h100-sxm5-96-gb.c3974)
[7] NVIDIA Developer. "CUDA Deep Neural Network library (cuDNN)." [https://developer.nvidia.com/cudnn](https://developer.nvidia.com/cudnn)
[8] Maginative. "Tenstorrent Secures $693M to Challenge NVIDIA's AI Chip Dominance." [https://www.maginative.com/article/tenstorrent-secures-693m-to-challenge-nvidias-ai-chip-dominance/](https://www.maginative.com/article/tenstorrent-secures-693m-to-challenge-nvidias-ai-chip-dominance/)
AnandTech. "Tenstorrent Launches Wormhole AI Processors." [https://www.anandtech.com/show/21482/tenstorrent-lunches-wormhole-ai-processors-466-fp8-tflops-at-300w](https://www.anandtech.com/show/21482/tenstorrent-lunches-wormhole-ai-processors-466-fp8-tflops-at-300w)
TRG Datacenters. "NVIDIA H100 Price - Is It Worth the Investment?" [https://www.trgdatacenters.com/resource/nvidia-h100-price/](https://www.trgdatacenters.com/resource/nvidia-h100-price/)
Thunder Compute. "NVIDIA H100 Pricing (July 2025): Cheapest On-Demand Cloud." [https://www.thundercompute.com/blog/nvidia-h100-pricing](https://www.thundercompute.com/blog/nvidia-h100-pricing)
Deep Gadget. "2.4x Cost-Effective AI Server with Tenstorrent." [https://deepgadget.com/Dg5w-TT/?lang=en](https://deepgadget.com/Dg5w-TT/?lang=en)
Digitimes. "Generative AI at reasonable prices: Tenstorrent's strategy." [https://www.digitimes.com/news/a20240515VL204/ai-chip-genai-openai-risc-v-tenstorrent.html](https://www.digitimes.com/news/a20240515VL204/ai-chip-genai-openai-risc-v-tenstorrent.html)
The Futurum Group. "Tenstorrent Ready to Storm AI Chip Market." [https://futurumgroup.com/insights/tenstorrent-ready-to-storm-ai-chip-market-with-new-funding/](https://futurumgroup.com/insights/tenstorrent-ready-to-storm-ai-chip-market-with-new-funding/)
SemiAnalysis. "Tenstorrent Wormhole Analysis - A Scale Out Architecture." [https://semianalysis.substack.com/p/tenstorrent-wormhole-analysis-a-scale](https://semianalysis.substack.com/p/tenstorrent-wormhole-analysis-a-scale)
* WCCFtech. "Tenstorrent Unveils High-End Wormhole AI Processors." [https://wccftech.com/tenstorrent-wormhole-ai-processors-risc-v-phenomenal-price-to-performance-value/](https://wccftech.com/tenstorrent-wormhole-ai-processors-risc-v-phenomenal-price-to-performance-value/)

528
src/components/BecomeMember.jsx Normal file
View File

@ -0,0 +1,528 @@
import { useState } from 'react'
import { Button } from '@/components/ui/button.jsx'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.jsx'
import { Input } from '@/components/ui/input.jsx'
import { Label } from '@/components/ui/label.jsx'
import { Textarea } from '@/components/ui/textarea.jsx'
import { Checkbox } from '@/components/ui/checkbox.jsx'
import { Badge } from '@/components/ui/badge.jsx'
import { Globe, Mail, User, MessageSquare, CheckCircle, AlertCircle, DollarSign } from 'lucide-react'
import { Link } from 'react-router-dom'
import Navigation from './Navigation.jsx'
import { loadStripe } from '@stripe/stripe-js'
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the Stripe object on every render.
// This is your publishable key.
const stripePromise = loadStripe('pk_test_TYooMQauvdEDq5XKxTMn5jxK') // Replace with your actual publishable key
function DirectBuy() {
const [currentStep, setCurrentStep] = useState(1)
const [formData, setFormData] = useState({
name: '',
email: '',
country: '',
uniqueNamePart1: '',
uniqueNamePart2: '',
experience: '',
whyInterested: '',
tipsForInfo: '',
newsletter: false,
terms: false
})
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
const [uniqueNameError, setUniqueNameError] = useState('')
const [uniqueNameValid, setUniqueNameValid] = useState(false)
const handleInputChange = (e) => {
const { id, value, type, checked } = e.target
setFormData(prev => ({
...prev,
[id]: type === 'checkbox' ? checked : value
}))
}
const validateUniqueNamePart = (part) => {
const regex = /^[a-z]{6,}$/
return regex.test(part)
}
const validateStep1 = () => {
const { name, email, uniqueNamePart1, uniqueNamePart2 } = formData
if (!name || !email) {
setSubmitStatus('error')
setUniqueNameValid(false) // Set to false if other required fields are missing
return false
}
let isValid = true
if (!validateUniqueNamePart(uniqueNamePart1)) {
setUniqueNameError('First part must be at least 6 lowercase letters.')
isValid = false
} else if (!validateUniqueNamePart(uniqueNamePart2)) {
setUniqueNameError('Second part must be at least 6 lowercase letters.')
isValid = false
} else {
setUniqueNameError('')
}
setUniqueNameValid(isValid)
if (!isValid) {
setSubmitStatus('error')
return false
}
setSubmitStatus(null)
return true
}
const validateStep2 = () => {
const { terms } = formData
if (!terms) {
setSubmitStatus('error')
return false
}
setSubmitStatus(null)
return true
}
const handleNext = () => {
setSubmitStatus(null) // Clear previous status
if (currentStep === 1 && !validateStep1()) {
return
}
if (currentStep === 2 && !validateStep2()) {
return
}
setCurrentStep(prev => prev + 1)
}
const handlePrev = () => {
setSubmitStatus(null) // Clear previous status
setCurrentStep(prev => prev - 1)
}
const handleBuy = async (e) => {
e.preventDefault()
setIsSubmitting(true)
setSubmitStatus(null)
try {
// Create a Checkout Session on your backend
// Replace with your actual API endpoint
const response = await fetch('https://your-backend.com/create-checkout-session', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: formData.name,
email: formData.email,
country: formData.country,
uniqueName: `${formData.uniqueNamePart1}.${formData.uniqueNamePart2}`,
experience: formData.experience,
whyInterested: formData.whyInterested,
tipsForInfo: formData.tipsForInfo,
newsletter: formData.newsletter,
priceId: 'price_12345', // Replace with your actual Stripe Price ID for $20/month
}),
})
if (!response.ok) {
throw new Error('Failed to create Stripe Checkout Session')
}
const { sessionId } = await response.json()
const stripe = await stripePromise
const { error } = await stripe.redirectToCheckout({
sessionId,
})
if (error) {
console.error('Stripe checkout error:', error)
setSubmitStatus('error')
}
} catch (error) {
console.error('Purchase error:', error)
setSubmitStatus('error')
} finally {
setIsSubmitting(false)
}
}
const renderStepContent = () => {
switch (currentStep) {
case 1:
return (
<>
<CardHeader className="text-center">
<CardTitle className="text-2xl">Step 1: Personal Information</CardTitle>
<CardDescription>
Tell us about yourself and choose your unique identifier.
</CardDescription>
</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>
<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>
</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">
<User className="h-5 w-5" />
Your Details
</h3>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="name">Full Name *</Label>
<Input
id="name"
type="text"
value={formData.name}
onChange={handleInputChange}
placeholder="Your full name"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email Address *</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={handleInputChange}
placeholder="your@email.com"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="country">Country/Region</Label>
<Input
id="country"
type="text"
value={formData.country}
onChange={handleInputChange}
placeholder="Your country or region"
/>
</div>
</div>
{/* Unique Name */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-slate-900 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>
<div className="grid md:grid-cols-2 gap-4 items-end">
<div className="space-y-2">
<Label htmlFor="uniqueNamePart1">First Part *</Label>
<Input
id="uniqueNamePart1"
type="text"
value={formData.uniqueNamePart1}
onChange={(e) => {
setFormData(prev => ({ ...prev, uniqueNamePart1: e.target.value.toLowerCase() }))
setUniqueNameError('')
}}
placeholder="at least 6 lowercase letters"
required
className={uniqueNameError && formData.uniqueNamePart1 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart1 ? 'border-green-500' : ''}
/>
</div>
<div className="space-y-2">
<Label htmlFor="uniqueNamePart2">Second Part *</Label>
<Input
id="uniqueNamePart2"
type="text"
value={formData.uniqueNamePart2}
onChange={(e) => {
setFormData(prev => ({ ...prev, uniqueNamePart2: e.target.value.toLowerCase() }))
setUniqueNameError('')
}}
placeholder="at least 6 lowercase letters"
required
className={uniqueNameError && formData.uniqueNamePart2 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart2 ? 'border-green-500' : ''}
/>
</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">
Next: About You & Preferences
</Button>
</div>
</CardContent>
</>
)
case 2:
return (
<>
<CardHeader className="text-center">
<CardTitle className="text-2xl">Step 2: About You & Preferences</CardTitle>
<CardDescription>
Share more about your interests and communication preferences.
</CardDescription>
</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>
<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>
</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">
<MessageSquare className="h-5 w-5" />
Tell Us About Yourself (Optional)
</h3>
<div className="space-y-2">
<Label htmlFor="experience">Relevant Experience</Label>
<Textarea
id="experience"
value={formData.experience}
onChange={handleInputChange}
placeholder="Tell us about your background in technology, governance, cooperatives, or related fields..."
rows={4}
/>
</div>
<div className="space-y-2">
<Label htmlFor="whyInterested">Why are you interested in this service? *</Label>
<Textarea
id="whyInterested"
value={formData.whyInterested}
onChange={handleInputChange}
placeholder="What motivates you to join OurWorld Coop? What do you hope to contribute or gain?"
rows={4}
/>
</div>
<div className="space-y-2">
<Label htmlFor="tipsForInfo">Any tips to make info more smooth? (Optional)</Label>
<Textarea
id="tipsForInfo"
value={formData.tipsForInfo}
onChange={handleInputChange}
placeholder="Share any suggestions for improving our information delivery or onboarding process."
rows={4}
/>
</div>
</div>
{/* Preferences */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<Mail className="h-5 w-5" />
Communication Preferences
</h3>
<div className="flex items-center space-x-2">
<Checkbox
id="newsletter"
checked={formData.newsletter}
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, newsletter: checked }))}
/>
<Label htmlFor="newsletter" className="text-sm">
I'd like to receive updates about OurWorld Coop's development and launch
</Label>
</div>
</div>
{/* Terms */}
<div className="space-y-4">
<div className="flex items-start space-x-2">
<Checkbox
id="terms"
checked={formData.terms}
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, terms: checked }))}
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 OurWorld 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">
Previous
</Button>
<Button type="button" onClick={handleNext} className="w-1/2 bg-blue-600 hover:bg-blue-700 text-lg py-3">
Next: Payment
</Button>
</div>
</div>
</CardContent>
</>
)
case 3:
return (
<>
<CardHeader className="text-center">
<CardTitle className="text-2xl">Step 3: Payment</CardTitle>
<CardDescription>
Secure your $20 USD/month membership via Stripe.
</CardDescription>
</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>
<h4 className="font-semibold text-green-800">Purchase Initiated!</h4>
<p className="text-green-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>
<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>
</div>
</div>
)}
<div className="space-y-6">
<p className="text-md text-slate-700 text-center">
You are about to purchase a membership to OurWorld Coop for <span className="font-bold">$20 USD per month</span>.
</p>
<p className="text-sm text-slate-600 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">
Previous
</Button>
<Button
type="submit"
onClick={handleBuy}
className="w-1/2 bg-green-600 hover:bg-green-700 text-lg py-3"
disabled={isSubmitting}
>
{isSubmitting ? 'Processing...' : 'Proceed to Payment'}
</Button>
</div>
</div>
</CardContent>
</>
)
default:
return null
}
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
{/* Navigation */}
<Navigation />
{/* Hero Section */}
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<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>
</h1>
<p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
Join OurWorld Coop's sovereign digital freezone for $20 USD per month.
</p>
</div>
</section>
{/* Purchase Form */}
<section className="pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl mx-auto">
<Card className="shadow-xl">
{renderStepContent()}
</Card>
</div>
</section>
{/* What Happens Next */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">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>
<CardTitle className="text-blue-600">Confirm Your Membership</CardTitle>
</CardHeader>
<CardContent>
Complete your secure Stripe checkout to confirm your OurWorld Coop membership.
</CardContent>
</Card>
<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>
<CardTitle className="text-green-600">Access Your Benefits</CardTitle>
</CardHeader>
<CardContent>
Gain immediate access to member-exclusive content, tools, and community forums.
</CardContent>
</Card>
<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>
</div>
<CardTitle className="text-purple-600">Engage & Govern</CardTitle>
</CardHeader>
<CardContent>
Participate in cooperative governance, shape the future, and contribute to the digital freezone.
</CardContent>
</Card>
</div>
</div>
</section>
{/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
<div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" />
<span className="text-xl font-bold">OurWorld 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 OurWorld Coop. A cooperative for digital freedom.</p>
</div>
</footer>
</div>
)
}
export default DirectBuy

122
src/components/Blog.jsx Normal file
View File

@ -0,0 +1,122 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import matter from 'gray-matter';
function Blog() {
const [posts, setPosts] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [selectedTag, setSelectedTag] = useState('');
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchPosts() {
try {
const postFiles = import.meta.glob('../blogs/*.md', { query: '?raw', import: 'default', eager: true });
const loadedPosts = [];
for (const path in postFiles) {
const content = postFiles[path];
const { data } = matter(content);
const slug = path.split('/').pop().replace('.md', '');
loadedPosts.push({ slug, ...data });
}
loadedPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
setPosts(loadedPosts);
} catch (error) {
console.error("Error fetching blog posts:", error);
} finally {
setLoading(false);
}
}
fetchPosts();
}, []);
const allTags = [...new Set(posts.flatMap(post => post.tags || []))];
const filteredPosts = posts
.filter(post => {
const title = post.title || '';
const author = post.author || '';
return title.toLowerCase().includes(searchTerm.toLowerCase()) ||
author.toLowerCase().includes(searchTerm.toLowerCase());
})
.filter(post =>
selectedTag ? (post.tags || []).includes(selectedTag) : true
);
return (
<div className="container mx-auto px-4 py-12 max-w-5xl">
<div className="text-center mb-12">
<h1 className="text-5xl font-extrabold text-gray-900 leading-tight">OurWorld Blog</h1>
<p className="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
Insights, stories, and updates from the OurWorld Cooperative.
</p>
</div>
<div className="mb-8 flex flex-col md:flex-row gap-4 items-center">
<input
type="text"
placeholder="Search articles..."
className="flex-grow w-full md:w-auto px-4 py-2 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
<div className="relative w-full md:w-auto">
<select
className="w-full appearance-none bg-white border border-gray-300 rounded-full px-4 py-2 pr-8 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow"
value={selectedTag}
onChange={e => setSelectedTag(e.target.value)}
>
<option value="">All Topics</option>
{allTags.map(tag => (
<option key={tag} value={tag}>{tag}</option>
))}
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<div>
{loading ? (
<div className="text-center text-gray-500">Loading posts...</div>
) : filteredPosts.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
{filteredPosts.map(post => (
<Link to={`/blog/${post.slug}`} key={post.slug} className="group block bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
{post.cover_image && (
<img src={post.cover_image} alt={post.title} className="w-full h-48 object-cover" />
)}
<div className="p-6">
<div className="flex items-center gap-2 mb-4">
{post.tags && post.tags.map(tag => (
<span key={tag} className="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">
{tag}
</span>
))}
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
{post.title}
</h2>
<p className="text-gray-500 text-sm mb-4">
By {post.author} on {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
</p>
<p className="text-gray-700 leading-relaxed">
{post.summary && post.summary.length > 200 ? `${post.summary.substring(0, 200)}...` : post.summary}
</p>
</div>
</Link>
))}
</div>
) : (
<div className="text-center text-gray-500 py-16">
<h2 className="text-2xl font-semibold mb-2">No posts found</h2>
<p>Try adjusting your search or filters.</p>
</div>
)}
</div>
</div>
);
}
export default Blog;

136
src/components/BlogPost.jsx Normal file
View File

@ -0,0 +1,136 @@
import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
function BlogPost() {
const { slug } = useParams();
const [postContent, setPostContent] = useState('');
const [postData, setPostData] = useState({});
useEffect(() => {
async function fetchPost() {
try {
const postFiles = import.meta.glob('../blogs/*.md', { query: '?raw', import: 'default', eager: true });
const postPath = `../blogs/${slug}.md`;
if (postFiles[postPath]) {
const content = postFiles[postPath];
const { data, content: postContent } = matter(content);
setPostData(data);
setPostContent(postContent);
} else {
throw new Error("Post not found");
}
} catch (error) {
console.error("Failed to fetch blog post:", error);
setPostContent("## Error loading post.\n\nCould not find the requested blog post.");
setPostData({ title: "Error", author: "System", date: new Date().toISOString().split('T')[0] });
}
}
fetchPost();
}, [slug]);
return (
<div className="bg-gray-50 py-12">
<div className="container mx-auto px-4">
<article className="max-w-5xl mx-auto bg-white rounded-lg shadow-xl p-8 md:p-12">
<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">
{tag}
</span>
))}
</div>
<h1 className="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight">
{postData.title}
</h1>
<p className="mt-4 text-lg text-gray-500">
By {postData.author} on {postData.date ? new Date(postData.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'N/A'}
</p>
</header>
{postData.cover_image && (
<img
src={postData.cover_image}
alt={postData.title}
className="w-full h-auto max-h-96 object-cover rounded-lg shadow-lg mb-8"
/>
)}
<div className="prose prose-lg max-w-none mx-auto text-gray-800 prose-headings:text-gray-900 prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-p:text-gray-700 prose-strong:text-gray-900 prose-img:rounded-lg prose-img:shadow-md">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw]}
components={{
img: ({node, ...props}) => (
<img
{...props}
src={`/src/blogs/${props.src}`}
className="w-full h-auto max-w-full rounded-lg shadow-md my-6"
loading="lazy"
/>
),
h1: ({node, ...props}) => (
<h1 className="text-3xl font-bold text-gray-900 mt-8 mb-4" {...props} />
),
h2: ({node, ...props}) => (
<h2 className="text-2xl font-bold text-gray-900 mt-6 mb-3" {...props} />
),
h3: ({node, ...props}) => (
<h3 className="text-xl font-semibold text-gray-900 mt-5 mb-2" {...props} />
),
h4: ({node, ...props}) => (
<h4 className="text-lg font-semibold text-gray-900 mt-4 mb-2" {...props} />
),
p: ({node, ...props}) => (
<p className="text-gray-700 leading-relaxed mb-4" {...props} />
),
strong: ({node, ...props}) => (
<strong className="font-semibold text-gray-900" {...props} />
),
em: ({node, ...props}) => (
<em className="italic text-gray-700" {...props} />
),
ul: ({node, ...props}) => (
<ul className="list-disc list-inside mb-4 text-gray-700" {...props} />
),
ol: ({node, ...props}) => (
<ol className="list-decimal list-inside mb-4 text-gray-700" {...props} />
),
li: ({node, ...props}) => (
<li className="mb-1" {...props} />
),
blockquote: ({node, ...props}) => (
<blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4" {...props} />
),
code: ({node, inline, ...props}) =>
inline ? (
<code className="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm" {...props} />
) : (
<code className="block bg-gray-100 text-gray-800 p-4 rounded-lg text-sm overflow-x-auto" {...props} />
),
pre: ({node, ...props}) => (
<pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4" {...props} />
)
}}
>
{postContent}
</ReactMarkdown>
</div>
<footer className="mt-12 text-center">
<Link to="/blog" className="text-blue-600 hover:text-blue-800 font-semibold transition-colors">
&larr; Back to all posts
</Link>
</footer>
</article>
</div>
</div>
);
}
export default BlogPost;

463
src/components/Home.jsx Normal file
View File

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

44
src/components/Navigation.jsx Normal file
View File

@ -0,0 +1,44 @@
import { Button } from '@/components/ui/button.jsx'
import { Globe } from 'lucide-react'
import { Link, useLocation } from 'react-router-dom'
import navigationData from '../config/navigation.json'
function Navigation() {
const location = useLocation()
const isActive = (path) => {
return location.pathname === path
}
return (
<nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-slate-200 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<Link to="/" className="flex items-center space-x-2">
<Globe className="h-8 w-8 text-blue-600" />
<span className="text-xl font-bold text-slate-900">ThreeFold Cloud</span>
</Link>
<div className="hidden md:flex items-center space-x-8">
{navigationData
.filter(item => item.show !== false)
.map((item) => (
<Link
key={item.path}
to={item.path}
className={`transition-colors ${isActive(item.path) ? 'text-blue-600 font-medium' : 'text-slate-600 hover:text-blue-600'}`}
>
{item.label}
</Link>
))}
<Button asChild className="bg-blue-600 hover:bg-blue-700">
<Link to="/register">Join Now</Link>
</Button>
</div>
</div>
</div>
</nav>
)
}
export default Navigation

432
src/components/ProductsPage.jsx Normal file
View File

@ -0,0 +1,432 @@
import { Link } from 'react-router-dom'
import { Button } from './ui/button'
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
import { Badge } from './ui/badge'
import { Cpu, Home, Shield, Network, DollarSign, CheckCircle, Users, Zap, TrendingUp, Layers, Scale, Globe } from 'lucide-react'
import Navigation from './Navigation'
function ProductsPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
{/* Navigation */}
<Navigation />
{/* Product Overview Hero */}
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto text-center space-y-8">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Solutions</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
Two Solutions, <span className="text-blue-600">Infinite Possibilities</span>
</h1>
<p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack.
</p>
</div>
</section>
{/* Tier-H Datacenters: Residential & Office Scale */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-H: Plug-and-Play Digital Infrastructure</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Perfect for homes, offices, and mixed-use buildings, offering edge computing and local AI processing.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Homes, offices, and mixed-use buildings</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Edge computing and local AI processing</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community networks and local services</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Development and testing environments</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Full compute, storage, and networking capabilities</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-touch deployment and maintenance</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Supports AI workloads, Web2/Web3 applications</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compatible with Kubernetes and container platforms</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Key Benefits:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">Plug-and-play installation</CardTitle></CardHeader>
<CardContent>Easy setup, no technical expertise needed.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">Zero maintenance required</CardTitle></CardHeader>
<CardContent>Autonomous operation, minimal human intervention.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Generate passive income</CardTitle></CardHeader>
<CardContent>Monetize unused compute capacity.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Local data sovereignty</CardTitle></CardHeader>
<CardContent>Data stays local and private, under your control.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-teal-600">Resilient to internet outages</CardTitle></CardHeader>
<CardContent>Ensures continuity of local services.</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Tier-S Datacenters: Industrial Scale */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-S: Industrial-Grade Modular Datacenters</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Comprehensive overview of the enterprise-grade solution for large-scale deployments.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Perfect For:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> AI training and inference at scale</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regional cloud service providers</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Deployed in under six months</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cyberpandemic and disaster-resilient</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-purple-600 mb-6">Key Benefits:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader>
<CardContent>Faster setup compared to traditional datacenters.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader>
<CardContent>Full control over data and operations.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
<CardContent>Unlimited scalability without bottlenecks.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
<CardContent>Self-healing and resilient infrastructure.</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Technology Stack Comparison */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Shared Technology Foundation</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
Both Tier-H and Tier-S solutions are built on the same revolutionary underlying technology stack.
</p>
</div>
<div className="overflow-x-auto">
<table className="min-w-full bg-white rounded-lg shadow-md">
<thead>
<tr className="bg-blue-600 text-white">
<th className="py-3 px-4 text-left">Feature</th>
<th className="py-3 px-4 text-left">Tier-H</th>
<th className="py-3 px-4 text-left">Tier-S</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Zero-OS</td>
<td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Quantum-Safe Storage</td>
<td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Mycelium Network</td>
<td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Smart Contract for IT</td>
<td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">AI/ML Support</td>
<td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Kubernetes Compatible</td>
<td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Energy Efficiency</td>
<td className="py-3 px-4">Ultra-High</td>
<td className="py-3 px-4">High</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Deployment Time</td>
<td className="py-3 px-4">Minutes</td>
<td className="py-3 px-4">Months</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Maintenance</td>
<td className="py-3 px-4">Zero-touch</td>
<td className="py-3 px-4">Minimal</td>
</tr>
<tr>
<td className="py-3 px-4">Scale</td>
<td className="py-3 px-4">Local/Edge</td>
<td className="py-3 px-4">Regional/Global</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
{/* Use Case Matrix */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Choose Your Deployment Strategy</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Clear mapping of products to specific use cases.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
<CardHeader>
<CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Personal AI assistants and agents</li>
<li>Local file storage and backup</li>
<li>Home automation and IoT</li>
<li>Small business applications</li>
<li>Development environments</li>
<li>Community mesh networks</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
<CardHeader>
<CardTitle className="text-blue-600">Tier-S Ideal For:</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>National digital infrastructure</li>
<li>Regional cloud services</li>
<li>Large-scale AI training</li>
<li>Enterprise private clouds</li>
<li>Telecom edge computing</li>
<li>Disaster recovery centers</li>
</ul>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Deployment Models */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Flexible Deployment Options</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Different ways to implement ThreeFold's solutions.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-blue-600">Single Node Deployment</CardTitle>
</CardHeader>
<CardContent>
Start with one Tier-H node. Perfect for testing and small applications. Scales by adding more nodes.
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-green-600">Hybrid Deployment</CardTitle>
</CardHeader>
<CardContent>
Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations.
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-purple-600">Regional Grid</CardTitle>
</CardHeader>
<CardContent>
Multiple Tier-S datacenters. Geo-distributed for sovereignty. Enterprise-grade redundancy.
</CardContent>
</Card>
</div>
</div>
</section>
{/* Economic Model */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Investment and Returns</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Revenue and cost structure for each product.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
<CardHeader>
<CardTitle className="text-blue-600">Tier-H Economics</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Low initial investment</li>
<li>Immediate revenue from spare capacity</li>
<li>ROI typically within 12-24 months</li>
<li>Minimal operational costs</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
<CardHeader>
<CardTitle className="text-purple-600">Tier-S Economics</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Higher initial investment</li>
<li>Enterprise-grade revenue potential</li>
<li>3x higher ROI compared to traditional datacenters</li>
<li>Significantly lower operational costs</li>
</ul>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Support and Services */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Complete Support Ecosystem</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
What comes with each product offering.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-blue-600">Included with Every Deployment</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Technical documentation and training</li>
<li>Community support forums</li>
<li>Regular software updates</li>
<li>Monitoring and analytics tools</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-green-600">Enterprise Services (Tier-S)</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Dedicated technical support</li>
<li>Custom integration services</li>
<li>SLA guarantees</li>
<li>Professional consulting</li>
</ul>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Getting Started */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Ready to Deploy?</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Clear next steps for each product.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
<CardHeader>
<CardTitle className="text-green-600">Start with Tier-H:</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Order your first node</li>
<li>Plug in and start earning</li>
<li>Scale as you grow</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
<CardHeader>
<CardTitle className="text-blue-600">Scale with Tier-S:</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Schedule a consultation</li>
<li>Custom deployment planning</li>
<li>Professional installation and setup</li>
</ul>
</CardContent>
</Card>
</div>
<p className="text-center text-lg text-slate-600 mt-8">
Both Options: Join our partner network, access technical resources, connect with the community.
</p>
</div>
</section>
{/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
<div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" />
<span className="text-xl font-bold">ThreeFold Cloud</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 Cloud. A new era of decentralized infrastructure.</p>
</div>
</footer>
</div>
)
}
export default ProductsPage

662
src/components/RegisterPage.jsx Normal file
View File

@ -0,0 +1,662 @@
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Button } from './ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
import { Badge } from './ui/badge'
import { Input } from './ui/input'
import { Label } from './ui/label'
import { Textarea } from './ui/textarea'
import { Checkbox } from './ui/checkbox'
import { Building2, Globe, Briefcase, Users, Home, DollarSign, CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target } from 'lucide-react'
import Navigation from './Navigation'
function RegisterPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
interestCategory: '',
company: '',
position: '',
investmentRange: '',
experience: '',
motivation: '',
accredited: false,
newsletter: false,
terms: false,
propertyType: '',
propertySize: '',
location: '',
connectivity: '',
investmentTimeline: '',
revenueExpectations: '',
jurisdiction: '',
currentInfrastructure: '',
challenges: '',
budgetParameters: '',
specificUseCases: '',
migrationTimeline: '',
priorities: '',
networkCoverage: '',
customerBase: '',
technicalIntegration: '',
businessModelPreferences: '',
strategicObjectives: '',
synergies: '',
commitmentLevel: '',
partnershipStructure: '',
technicalComfortLevel: '',
goals: '',
communityInvolvementInterest: ''
})
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
const handleInputChange = (field, value) => {
setFormData(prev => ({
...prev,
[field]: value
}))
}
const handleSubmit = async (e) => {
e.preventDefault()
setIsSubmitting(true)
setSubmitStatus(null)
// Basic validation for terms
if (!formData.terms) {
setSubmitStatus('error')
console.error('Terms not agreed.')
setIsSubmitting(false)
return
}
try {
// Replace with your actual API endpoint
const response = await fetch('https://api.threefold.io/register-interest', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...formData,
timestamp: new Date().toISOString(),
source: 'threefold_register_page'
})
})
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const result = await response.json()
console.log('Interest registration successful:', result)
setSubmitStatus('success')
// Reset form after successful submission
setFormData({
name: '', email: '', interestCategory: '', company: '', position: '',
investmentRange: '', experience: '', motivation: '', accredited: false,
newsletter: false, terms: false, propertyType: '', propertySize: '',
location: '', connectivity: '', investmentTimeline: '', revenueExpectations: '',
jurisdiction: '', currentInfrastructure: '', challenges: '', budgetParameters: '',
specificUseCases: '', migrationTimeline: '', priorities: '', networkCoverage: '',
customerBase: '', technicalIntegration: '', businessModelPreferences: '',
strategicObjectives: '', synergies: '', commitmentLevel: '', partnershipStructure: '',
technicalComfortLevel: '', goals: '', communityInvolvementInterest: ''
})
} catch (error) {
console.error('Registration error:', error)
setSubmitStatus('error')
} finally {
setIsSubmitting(false)
}
}
const renderFormFields = () => {
switch (formData.interestCategory) {
case 'realEstateDeveloper':
return (
<>
<div className="space-y-2">
<Label htmlFor="propertyType">Property Type and Size</Label>
<Input id="propertyType" placeholder="e.g., Residential, Commercial, Industrial; 1000 sq ft" value={formData.propertyType} onChange={(e) => handleInputChange('propertyType', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="location">Location and Connectivity</Label>
<Input id="location" placeholder="City, Country; Fiber/Broadband availability" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="investmentTimeline">Investment Timeline</Label>
<Input id="investmentTimeline" placeholder="e.g., 3-6 months, 1 year+" value={formData.investmentTimeline} onChange={(e) => handleInputChange('investmentTimeline', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="revenueExpectations">Revenue Expectations</Label>
<Input id="revenueExpectations" placeholder="e.g., Passive income, property value increase" value={formData.revenueExpectations} onChange={(e) => handleInputChange('revenueExpectations', e.target.value)} />
</div>
</>
)
case 'government':
return (
<>
<div className="space-y-2">
<Label htmlFor="jurisdiction">Jurisdiction and Regulatory Requirements</Label>
<Input id="jurisdiction" placeholder="e.g., National, State, Local; Data sovereignty laws" value={formData.jurisdiction} onChange={(e) => handleInputChange('jurisdiction', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="currentInfrastructure">Current Infrastructure and Challenges</Label>
<Textarea id="currentInfrastructure" placeholder="Describe existing systems and pain points" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="budgetParameters">Timeline and Budget Parameters</Label>
<Input id="budgetParameters" placeholder="e.g., Q4 2025, $X budget" value={formData.budgetParameters} onChange={(e) => handleInputChange('budgetParameters', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="specificUseCases">Specific Use Cases and Requirements</Label>
<Textarea id="specificUseCases" placeholder="e.g., Citizen services, national data storage" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
</div>
</>
)
case 'enterprise':
return (
<>
<div className="space-y-2">
<Label htmlFor="currentInfrastructure">Current Infrastructure and Pain Points</Label>
<Textarea id="currentInfrastructure" placeholder="Describe your current cloud setup and challenges" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="specificUseCases">Technical Requirements and Constraints</Label>
<Textarea id="specificUseCases" placeholder="e.g., Specific workloads, compliance needs" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="complianceSecurity">Compliance and Security Needs</Label>
<Input id="complianceSecurity" placeholder="e.g., ISO 27001, HIPAA, GDPR" value={formData.complianceSecurity} onChange={(e) => handleInputChange('complianceSecurity', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="migrationTimeline">Migration Timeline and Priorities</Label>
<Input id="migrationTimeline" placeholder="e.g., Phased migration over 12 months" value={formData.migrationTimeline} onChange={(e) => handleInputChange('migrationTimeline', e.target.value)} />
</div>
</>
)
case 'telecom':
return (
<>
<div className="space-y-2">
<Label htmlFor="networkCoverage">Network Coverage and Infrastructure</Label>
<Textarea id="networkCoverage" placeholder="Describe your existing network assets" value={formData.networkCoverage} onChange={(e) => handleInputChange('networkCoverage', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="customerBase">Customer Base and Requirements</Label>
<Textarea id="customerBase" placeholder="e.g., Residential, Business; Edge computing needs" value={formData.customerBase} onChange={(e) => handleInputChange('customerBase', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="technicalIntegration">Technical Integration Capabilities</Label>
<Input id="technicalIntegration" placeholder="e.g., API, existing OSS/BSS" value={formData.technicalIntegration} onChange={(e) => handleInputChange('technicalIntegration', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="businessModelPreferences">Business Model Preferences</Label>
<Input id="businessModelPreferences" placeholder="e.g., Revenue sharing, direct purchase" value={formData.businessModelPreferences} onChange={(e) => handleInputChange('businessModelPreferences', e.target.value)} />
</div>
</>
)
case 'investor':
return (
<>
<div className="space-y-2">
<Label htmlFor="investmentRange">Investment Range of Interest</Label>
<select
id="investmentRange"
className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
value={formData.investmentRange}
onChange={(e) => handleInputChange('investmentRange', e.target.value)}
>
<option value="">Select investment range</option>
<option value="$10K-$50K">$10,000 - $50,000</option>
<option value="$50K-$100K">$50,000 - $100,000</option>
<option value="$100K-$500K">$100,000 - $500,000</option>
<option value="$500K-$1M">$500,000 - $1,000,000</option>
<option value="$1M+">$1,000,000+</option>
<option value="Institutional">Institutional Investment</option>
</select>
</div>
<div className="space-y-2">
<Label htmlFor="strategicObjectives">Strategic Objectives and Synergies</Label>
<Textarea id="strategicObjectives" placeholder="How does this align with your strategic goals?" value={formData.strategicObjectives} onChange={(e) => handleInputChange('strategicObjectives', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="commitmentLevel">Timeline and Commitment Level</Label>
<Input id="commitmentLevel" placeholder="e.g., Immediate, 6-12 months" value={formData.commitmentLevel} onChange={(e) => handleInputChange('commitmentLevel', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="partnershipStructure">Preferred Partnership Structure</Label>
<Input id="partnershipStructure" placeholder="e.g., Equity, Joint Venture, Strategic Alliance" value={formData.partnershipStructure} onChange={(e) => handleInputChange('partnershipStructure', e.target.value)} />
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="accredited"
checked={formData.accredited}
onCheckedChange={(checked) => handleInputChange('accredited', checked)}
/>
<Label htmlFor="accredited" className="text-sm">
I am an accredited investor (or will provide verification if required)
</Label>
</div>
</>
)
case 'individual':
return (
<>
<div className="space-y-2">
<Label htmlFor="location">Location and Connectivity</Label>
<Input id="location" placeholder="City, Country; Internet speed" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="technicalComfortLevel">Technical Comfort Level</Label>
<select
id="technicalComfortLevel"
className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
value={formData.technicalComfortLevel}
onChange={(e) => handleInputChange('technicalComfortLevel', e.target.value)}
>
<option value="">Select comfort level</option>
<option value="beginner">Beginner (Plug-and-play)</option>
<option value="intermediate">Intermediate (Some technical knowledge)</option>
<option value="advanced">Advanced (Developer/SysAdmin)</option>
</select>
</div>
<div className="space-y-2">
<Label htmlFor="goals">Goals and Expectations</Label>
<Textarea id="goals" placeholder="What do you hope to achieve by joining?" value={formData.goals} onChange={(e) => handleInputChange('goals', e.target.value)} rows={3} />
</div>
<div className="space-y-2">
<Label htmlFor="communityInvolvementInterest">Community Involvement Interest</Label>
<Textarea id="communityInvolvementInterest" placeholder="Are you interested in participating in community governance or events?" value={formData.communityInvolvementInterest} onChange={(e) => handleInputChange('communityInvolvementInterest', e.target.value)} rows={3} />
</div>
</>
)
default:
return null
}
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
{/* Navigation */}
<Navigation />
{/* Hero Section */}
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto text-center space-y-8">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Join the Revolution</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
Ready to Transform Your <span className="text-blue-600">Infrastructure?</span>
</h1>
<p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions.
</p>
</div>
</section>
{/* Choose Your Path */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">How Do You Want to Get Involved?</h2>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'realEstateDeveloper' ? 'border-blue-600 ring-2 ring-blue-600' : ''}`}
onClick={() => handleInputChange('interestCategory', 'realEstateDeveloper')}
>
<CardHeader>
<Building2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
<CardTitle className="text-blue-600">Real Estate Developer</CardTitle>
</CardHeader>
<CardContent>
Transform your properties into digital utilities.
</CardContent>
</Card>
<Card
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'government' ? 'border-green-600 ring-2 ring-green-600' : ''}`}
onClick={() => handleInputChange('interestCategory', 'government')}
>
<CardHeader>
<Shield className="w-16 h-16 mx-auto mb-4 text-green-600" />
<CardTitle className="text-green-600">Government/Public Sector</CardTitle>
</CardHeader>
<CardContent>
Build sovereign digital infrastructure.
</CardContent>
</Card>
<Card
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'enterprise' ? 'border-purple-600 ring-2 ring-purple-600' : ''}`}
onClick={() => handleInputChange('interestCategory', 'enterprise')}
>
<CardHeader>
<Briefcase className="w-16 h-16 mx-auto mb-4 text-purple-600" />
<CardTitle className="text-purple-600">Enterprise Customer</CardTitle>
</CardHeader>
<CardContent>
Deploy private, secure cloud infrastructure.
</CardContent>
</Card>
<Card
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'telecom' ? 'border-orange-600 ring-2 ring-orange-600' : ''}`}
onClick={() => handleInputChange('interestCategory', 'telecom')}
>
<CardHeader>
<Network className="w-16 h-16 mx-auto mb-4 text-orange-600" />
<CardTitle className="text-orange-600">Telecom/ISP</CardTitle>
</CardHeader>
<CardContent>
Extend your network with edge computing.
</CardContent>
</Card>
<Card
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'investor' ? 'border-teal-600 ring-2 ring-teal-600' : ''}`}
onClick={() => handleInputChange('interestCategory', 'investor')}
>
<CardHeader>
<DollarSign className="w-16 h-16 mx-auto mb-4 text-teal-600" />
<CardTitle className="text-teal-600">Investor/Partner</CardTitle>
</CardHeader>
<CardContent>
Join the ThreeFold ecosystem.
</CardContent>
</Card>
<Card
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'individual' ? 'border-indigo-600 ring-2 ring-indigo-600' : ''}`}
onClick={() => handleInputChange('interestCategory', 'individual')}
>
<CardHeader>
<Users className="w-16 h-16 mx-auto mb-4 text-indigo-600" />
<CardTitle className="text-indigo-600">Individual/Community</CardTitle>
</CardHeader>
<CardContent>
Start with residential deployment.
</CardContent>
</Card>
</div>
</div>
</section>
{/* Contact Form */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
<div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tell Us About Your Interest</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
Please fill out the form below. Fields will adapt based on your selection above.
</p>
</div>
<Card className="bg-white shadow-xl">
<CardHeader>
<CardTitle className="text-2xl text-center">Required Information</CardTitle>
<CardDescription className="text-center text-lg">
Provide your contact details and a brief description of your requirements.
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-8">
{submitStatus === 'success' && (
<div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800">
<CheckCircle className="h-5 w-5" />
<span>Thank you! Your interest has been registered successfully. We'll be in touch soon.</span>
</div>
)}
{submitStatus === 'error' && (
<div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
<AlertCircle className="h-5 w-5" />
<span>There was an error registering your interest. Please ensure all required fields are filled and terms are agreed.</span>
</div>
)}
{/* General Information */}
<div className="space-y-6">
<h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
<Users className="h-5 w-5 text-blue-600" />
Your Contact Details
</h3>
<div className="grid md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="name">Full Name *</Label>
<Input
id="name"
placeholder="Your full name"
value={formData.name}
onChange={(e) => handleInputChange('name', e.target.value)}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email Address *</Label>
<Input
id="email"
type="email"
placeholder="your@email.com"
value={formData.email}
onChange={(e) => handleInputChange('email', e.target.value)}
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="company">Organization</Label>
<Input
id="company"
placeholder="Your company or organization"
value={formData.company}
onChange={(e) => handleInputChange('company', e.target.value)}
/>
</div>
</div>
{/* Dynamic Fields based on Interest Category */}
{formData.interestCategory && (
<div className="space-y-6">
<h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
<Target className="h-5 w-5 text-green-600" />
Specific Requirements for {formData.interestCategory.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
</h3>
{renderFormFields()}
</div>
)}
{/* Common Optional Information */}
<div className="space-y-6">
<h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
<BookOpen className="h-5 w-5 text-purple-600" />
Additional Information (Optional)
</h3>
<div className="space-y-2">
<Label htmlFor="briefDescription">Brief Description of Requirements</Label>
<Textarea
id="briefDescription"
placeholder="Tell us more about your needs and how ThreeFold can help."
value={formData.briefDescription}
onChange={(e) => handleInputChange('briefDescription', e.target.value)}
rows={4}
/>
</div>
<div className="space-y-2">
<Label htmlFor="timeline">Timeline for Deployment</Label>
<Input id="timeline" placeholder="e.g., Immediate, 3-6 months, 1 year+" value={formData.timeline} onChange={(e) => handleInputChange('timeline', e.target.value)} />
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="newsletter"
checked={formData.newsletter}
onCheckedChange={(checked) => handleInputChange('newsletter', checked)}
/>
<Label htmlFor="newsletter" className="text-sm">
I'd like to receive updates about ThreeFold Cloud's progress and opportunities
</Label>
</div>
</div>
{/* Terms */}
<div className="space-y-4">
<div className="flex items-start space-x-2">
<Checkbox
id="terms"
checked={formData.terms}
onCheckedChange={(checked) => handleInputChange('terms', checked)}
required
/>
<Label htmlFor="terms" className="text-sm">
I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms and Conditions</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link>. *
</Label>
</div>
</div>
{/* Submit Button */}
<div className="pt-6">
<Button
type="submit"
disabled={isSubmitting || !formData.terms || !formData.name || !formData.email || !formData.interestCategory}
className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3"
>
{isSubmitting ? 'Submitting...' : 'Register Your Interest'}
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
</div>
</form>
</CardContent>
</Card>
</div>
</section>
{/* What Happens Next */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens After You Submit?</h2>
</div>
<div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl font-bold text-blue-600">1</span>
</div>
<CardTitle className="text-blue-600">Confirmation & Assignment</CardTitle>
</CardHeader>
<CardContent>
Receive a confirmation email and get assigned to the appropriate specialist within 24 hours.
</CardContent>
</Card>
<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>
<CardTitle className="text-green-600">Personalized Consultation</CardTitle>
</CardHeader>
<CardContent>
Within 1 week, receive a personalized consultation call and a custom proposal or assessment.
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader>
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl font-bold text-purple-600">3</span>
</div>
<CardTitle className="text-purple-600">Ongoing Engagement</CardTitle>
</CardHeader>
<CardContent>
Receive regular updates, invitations to events, and access to exclusive resources.
</CardContent>
</Card>
</div>
</div>
</section>
{/* Frequently Asked Questions */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Common Questions</h2>
</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>
<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>
<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">
<CardHeader><CardTitle className="text-purple-600">Q: What kind of support do you provide?</CardTitle></CardHeader>
<CardContent>A: Comprehensive support from planning through deployment and ongoing operations.</CardContent>
</Card>
<Card className="hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Q: Is the technology proven?</CardTitle></CardHeader>
<CardContent>A: Yes, with 2000+ nodes deployed globally and years of production experience.</CardContent>
</Card>
<Card className="hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-teal-600">Q: How do I know this will work for my use case?</CardTitle></CardHeader>
<CardContent>A: We offer pilot programs and proof-of-concept deployments to validate fit.</CardContent>
</Card>
</div>
</div>
</section>
{/* Social Proof & Urgency */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto text-center space-y-8">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">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>
<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>
<CardContent>Trusted by public sector for digital sovereignty.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Enterprises reducing cloud costs by 10x</CardTitle></CardHeader>
<CardContent>Significant economic advantages for businesses.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Communities creating local digital resilience</CardTitle></CardHeader>
<CardContent>Empowering local digital infrastructure.</CardContent>
</Card>
</div>
<p className="text-lg text-slate-600 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>
</div>
</section>
{/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
<div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" />
<span className="text-xl font-bold">ThreeFold Cloud</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 Cloud. A new era of decentralized infrastructure.</p>
</div>
</footer>
</div>
)
}
export default RegisterPage

554
src/components/TechnologyPage.jsx Normal file
View File

@ -0,0 +1,554 @@
import { Link } from 'react-router-dom'
import { Button } from './ui/button'
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
import { Badge } from './ui/badge'
import { Cpu, Database, Network, Shield, Zap, Scale, Globe, CheckCircle, BookOpen, Brain, Layers } from 'lucide-react'
import Navigation from './Navigation'
function TechnologyPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
{/* Navigation */}
<Navigation />
{/* Technology Hero Section */}
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto text-center space-y-8">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Innovations</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
Infrastructure Reimagined from <span className="text-blue-600">First Principles</span>
</h1>
<p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
</p>
</div>
</section>
{/* Core Technology Pillars */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Three Pillars of Innovation</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Overview of the three main technology innovations that power ThreeFold.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
<CardHeader>
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
<CardTitle className="text-blue-600">Zero-OS Compute System</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-1 text-sm text-slate-700">
<li>Stateless, autonomous operating system</li>
<li>Depending the usecase can more efficient than traditional systems</li>
<li>Self-healing and cryptographically secured</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
<CardHeader>
<Database className="w-16 h-16 mx-auto mb-4 text-green-600" />
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-1 text-sm text-slate-700">
<li>Mathematical data dispersion (not replication)</li>
<li>20% overhead vs 400% in traditional systems</li>
<li>Unbreakable and self-healing architecture</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
<CardHeader>
<Network className="w-16 h-16 mx-auto mb-4 text-purple-600" />
<CardTitle className="text-purple-600">Mycelium Network</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-1 text-sm text-slate-700">
<li>Peer-to-peer mesh overlay network</li>
<li>End-to-end encryption with shortest path routing</li>
<li>Resilient to internet failures and attacks</li>
</ul>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Zero-OS: Autonomous Compute */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Zero-OS: The World's First Stateless Cloud OS</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Deep dive into the revolutionary operating system that powers ThreeFold.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Core Principles:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Minimal 40MB footprint with only essential components</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless Design:</strong> No persistent local state, immune to corruption</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Revolutionary Features:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <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>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Technical Advantages:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">Eliminates context switching overhead</CardTitle></CardHeader>
<CardContent>Depending workload can eliminates upto 90% of context switching overhead.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
<CardContent>Ensures integrity of all components.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Self-healing and autonomous</CardTitle></CardHeader>
<CardContent>Operates without human intervention.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Compatible with Docker, Kubernetes, and VMs</CardTitle></CardHeader>
<CardContent>Flexible for diverse workloads.</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Quantum-Safe Storage: Unbreakable Data */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Quantum-Safe Storage: Mathematics Over Replication</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Explanation of the mathematical storage breakthrough that ensures unbreakable data.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-green-600">How It Works:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Data is fragmented and transformed into mathematical equations</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Equations are distributed across multiple nodes</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Original data fragments are discarded</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Any subset of equations can reconstruct the original data</li>
</ul>
<h3 className="text-2xl font-bold text-green-600 mt-8">Production Configuration (16/4):</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> 16 data fragments become 20 equations</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Only 16 equations needed for reconstruction</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Can lose any 4 nodes without data loss</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> 20% overhead vs 400% in traditional systems</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-green-600">Example (Simplified):</h3>
<div className="bg-slate-100 p-4 rounded-lg font-mono text-sm text-slate-800">
<pre><code>
Original fragments: a=1, b=2, c=3
Generated equations:
- a+b+c=6
- c-b-a=0
- 2b+a-c=2
- 5c-b-a=12
</code></pre>
</div>
<h3 className="text-2xl font-bold text-green-600 mt-8">Zero-Knowledge Architecture:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> No single node knows what it stores</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Cryptographic proof without data exposure</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Post-quantum security resistant</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Self-healing against bitrot and failures</li>
</ul>
</div>
</div>
</div>
</section>
{/* Mycelium Network: Intelligent Connectivity */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Mycelium Network: The Internet's Missing Layer</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-teal-600">Core Capabilities:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>End-to-End Encryption:</strong> Data encrypted at source, decrypted at destination</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Shortest Path Routing:</strong> Dynamic optimization based on latency, bandwidth, reliability</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Multi-Hop Transmission:</strong> Resilient routing through intermediate nodes</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Geographic Awareness:</strong> Physical location optimization</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-teal-600">Technical Implementation:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Peer-to-peer mesh topology</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Up to 1 Gbps throughput per agent</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Wire-speed performance in infrastructure (100+ Gbps)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Protocol-agnostic data transport</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Authentication-based security (not perimeter-based)</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-teal-600 mb-6">Beyond Traditional Networking:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-teal-600">Survives internet outages</CardTitle></CardHeader>
<CardContent>Ensures continuity even during major disruptions.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">Routes around censorship</CardTitle></CardHeader>
<CardContent>Provides resilient access in restricted environments.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
<CardContent>Facilitates direct communication between users.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Reduces latency</CardTitle></CardHeader>
<CardContent>Through optimal path selection and local routing.</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Architectural Innovations */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Integrated Architecture: Greater Than Sum of Parts</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
How ThreeFold's core technologies work together to create a superior infrastructure.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Geo-Aware Infrastructure:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Resilient to geopolitical disruptions</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Smart Contract for IT:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Autonomous management without human intervention</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Energy Efficiency Breakthrough:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">Up to 10x less energy</CardTitle></CardHeader>
<CardContent>Compared to traditional datacenters.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">Optimized hardware utilization</CardTitle></CardHeader>
<CardContent>Maximizing efficiency from every component.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Reduced data movement</CardTitle></CardHeader>
<CardContent>Minimizing energy waste in data transfer.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Green computing</CardTitle></CardHeader>
<CardContent>Sustainable infrastructure at planetary scale.</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Technical Comparisons */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
<div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">ThreeFold vs Traditional Infrastructure</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
Side-by-side comparison with traditional approaches.
</p>
</div>
<div className="overflow-x-auto">
<table className="min-w-full bg-white rounded-lg shadow-md">
<thead>
<tr className="bg-blue-600 text-white">
<th className="py-3 px-4 text-left">Aspect</th>
<th className="py-3 px-4 text-left">Traditional Cloud</th>
<th className="py-3 px-4 text-left">ThreeFold</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">OS Deployment</td>
<td className="py-3 px-4">Local installation, complex updates</td>
<td className="py-3 px-4 font-semibold">Network boot, stateless</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Container Images</td>
<td className="py-3 px-4">2GB+ monolithic images</td>
<td className="py-3 px-4 font-semibold">2MB metadata-only</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Storage Redundancy</td>
<td className="py-3 px-4">400% overhead (4 copies)</td>
<td className="py-3 px-4 font-semibold">20% overhead (math)</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Network Security</td>
<td className="py-3 px-4">Perimeter-based firewalls</td>
<td className="py-3 px-4 font-semibold">End-to-end encryption</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Management</td>
<td className="py-3 px-4">Human administrators</td>
<td className="py-3 px-4 font-semibold">Autonomous agents</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Scalability</td>
<td className="py-3 px-4">Vertical, expensive</td>
<td className="py-3 px-4 font-semibold">Horizontal, unlimited</td>
</tr>
<tr className="border-b border-slate-200">
<td className="py-3 px-4">Energy Efficiency</td>
<td className="py-3 px-4">High consumption</td>
<td className="py-3 px-4 font-semibold">10x more efficient</td>
</tr>
<tr>
<td className="py-3 px-4">Data Sovereignty</td>
<td className="py-3 px-4">Limited control</td>
<td className="py-3 px-4 font-semibold">Complete control</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
{/* Implementation Status & Roadmap */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Production-Ready Technology & Roadmap</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Current status and future developments of ThreeFold's technology.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Currently Available:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Web Gateway: Production</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Coming H2 2025:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> FungiStor: Global content delivery</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enhanced enterprise features</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Live Deployment Stats:</h3>
<ul className="space-y-2 text-lg text-slate-700">
<li>2000+ nodes across 70+ countries</li>
<li>60,000+ CPU cores active</li>
<li>1+ million contracts processed</li>
<li>Petabytes of data stored safely</li>
</ul>
</div>
</div>
</section>
{/* Open Source & Standards */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Open Principles</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Commitment to openness and interoperability.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Open Source Components:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> No vendor lock-in</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Standards Compliance:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Blockchain interoperability</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-purple-600 mb-6">Developer Ecosystem:</h3>
<ul className="space-y-2 text-lg text-slate-700">
<li>Comprehensive APIs and SDKs</li>
<li>Extensive documentation</li>
<li>Active community support</li>
<li>Regular hackathons and events</li>
</ul>
</div>
</div>
</section>
{/* Security & Compliance */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Security by Design & Compliance</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Advanced security features and compliance capabilities.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Cryptographic Foundation:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable audit trails</li>
</ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Compliance Features:</h3>
<ul className="space-y-3 text-lg text-slate-700">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data residency guarantees</li>
</ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Threat Resistance:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">Immune to ransomware</CardTitle></CardHeader>
<CardContent>Stateless OS prevents persistent threats.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
<CardContent>Distributed architecture mitigates attacks.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Quantum computing resistant</CardTitle></CardHeader>
<CardContent>Future-proof security protocols.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader>
<CardContent>Mycelium network routes around blocking.</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Technical Resources */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dive Deeper into ThreeFold Technology</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
Access comprehensive technical documentation and resources.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
<CardHeader>
<CardTitle className="text-blue-600">Technical Documentation</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Architecture whitepapers</li>
<li>API documentation</li>
<li>Deployment guides</li>
<li>Best practices</li>
</ul>
</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
<CardHeader>
<CardTitle className="text-purple-600">Try It Yourself</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-slate-700">
<li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://dashboard.grid.tf</a></li>
<li>GitHub repositories</li>
<li>Developer sandbox</li>
<li>Community forums</li>
</ul>
</CardContent>
</Card>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Get Support:</h3>
<ul className="space-y-2 text-lg text-slate-700">
<li>Technical community</li>
<li>Professional services</li>
<li>Training programs</li>
<li>Certification paths</li>
</ul>
</div>
</div>
</section>
{/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
<div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" />
<span className="text-xl font-bold">ThreeFold Cloud</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 Cloud. A new era of decentralized infrastructure.</p>
</div>
</footer>
</div>
)
}
export default TechnologyPage

62
src/components/ui/accordion.jsx Normal file
View File

@ -0,0 +1,62 @@
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Accordion({
...props
}) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
}
function AccordionItem({
className,
...props
}) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn("border-b last:border-b-0", className)}
{...props} />
);
}
function AccordionTrigger({
className,
children,
...props
}) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}>
{children}
<ChevronDownIcon
className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
);
}
function AccordionContent({
className,
children,
...props
}) {
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
{...props}>
<div className={cn("pt-0 pb-4", className)}>{children}</div>
</AccordionPrimitive.Content>
);
}
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

138
src/components/ui/alert-dialog.jsx Normal file
View File

@ -0,0 +1,138 @@
"use client"
import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
function AlertDialog({
...props
}) {
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
}
function AlertDialogTrigger({
...props
}) {
return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />);
}
function AlertDialogPortal({
...props
}) {
return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />);
}
function AlertDialogOverlay({
className,
...props
}) {
return (
<AlertDialogPrimitive.Overlay
data-slot="alert-dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props} />
);
}
function AlertDialogContent({
className,
...props
}) {
return (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
data-slot="alert-dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
)}
{...props} />
</AlertDialogPortal>
);
}
function AlertDialogHeader({
className,
...props
}) {
return (
<div
data-slot="alert-dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props} />
);
}
function AlertDialogFooter({
className,
...props
}) {
return (
<div
data-slot="alert-dialog-footer"
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
{...props} />
);
}
function AlertDialogTitle({
className,
...props
}) {
return (
<AlertDialogPrimitive.Title
data-slot="alert-dialog-title"
className={cn("text-lg font-semibold", className)}
{...props} />
);
}
function AlertDialogDescription({
className,
...props
}) {
return (
<AlertDialogPrimitive.Description
data-slot="alert-dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props} />
);
}
function AlertDialogAction({
className,
...props
}) {
return (<AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />);
}
function AlertDialogCancel({
className,
...props
}) {
return (
<AlertDialogPrimitive.Cancel
className={cn(buttonVariants({ variant: "outline" }), className)}
{...props} />
);
}
export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}

63
src/components/ui/alert.jsx Normal file
View File

@ -0,0 +1,63 @@
import * as React from "react"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Alert({
className,
variant,
...props
}) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props} />
);
}
function AlertTitle({
className,
...props
}) {
return (
<div
data-slot="alert-title"
className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
{...props} />
);
}
function AlertDescription({
className,
...props
}) {
return (
<div
data-slot="alert-description"
className={cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
className
)}
{...props} />
);
}
export { Alert, AlertTitle, AlertDescription }

9
src/components/ui/aspect-ratio.jsx Normal file
View File

@ -0,0 +1,9 @@
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
function AspectRatio({
...props
}) {
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
}
export { AspectRatio }

47
src/components/ui/avatar.jsx Normal file
View File

@ -0,0 +1,47 @@
"use client"
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"
function Avatar({
className,
...props
}) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
{...props} />
);
}
function AvatarImage({
className,
...props
}) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn("aspect-square size-full", className)}
{...props} />
);
}
function AvatarFallback({
className,
...props
}) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"bg-muted flex size-full items-center justify-center rounded-full",
className
)}
{...props} />
);
}
export { Avatar, AvatarImage, AvatarFallback }

44
src/components/ui/badge.jsx Normal file
View File

@ -0,0 +1,44 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant,
asChild = false,
...props
}) {
const Comp = asChild ? Slot : "span"
return (
<Comp
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props} />
);
}
export { Badge, badgeVariants }

112
src/components/ui/breadcrumb.jsx Normal file
View File

@ -0,0 +1,112 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
function Breadcrumb({
...props
}) {
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
}
function BreadcrumbList({
className,
...props
}) {
return (
<ol
data-slot="breadcrumb-list"
className={cn(
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
className
)}
{...props} />
);
}
function BreadcrumbItem({
className,
...props
}) {
return (
<li
data-slot="breadcrumb-item"
className={cn("inline-flex items-center gap-1.5", className)}
{...props} />
);
}
function BreadcrumbLink({
asChild,
className,
...props
}) {
const Comp = asChild ? Slot : "a"
return (
<Comp
data-slot="breadcrumb-link"
className={cn("hover:text-foreground transition-colors", className)}
{...props} />
);
}
function BreadcrumbPage({
className,
...props
}) {
return (
<span
data-slot="breadcrumb-page"
role="link"
aria-disabled="true"
aria-current="page"
className={cn("text-foreground font-normal", className)}
{...props} />
);
}
function BreadcrumbSeparator({
children,
className,
...props
}) {
return (
<li
data-slot="breadcrumb-separator"
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
{...props}>
{children ?? <ChevronRight />}
</li>
);
}
function BreadcrumbEllipsis({
className,
...props
}) {
return (
<span
data-slot="breadcrumb-ellipsis"
role="presentation"
aria-hidden="true"
className={cn("flex size-9 items-center justify-center", className)}
{...props}>
<MoreHorizontal className="size-4" />
<span className="sr-only">More</span>
</span>
);
}
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
}

55
src/components/ui/button.jsx Normal file
View File

@ -0,0 +1,55 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant,
size,
asChild = false,
...props
}) {
const Comp = asChild ? Slot : "button"
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props} />
);
}
export { Button, buttonVariants }

72
src/components/ui/calendar.jsx Normal file
View File

@ -0,0 +1,72 @@
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row gap-2",
month: "flex flex-col gap-4",
caption: "flex justify-center pt-1 relative items-center w-full",
caption_label: "text-sm font-medium",
nav: "flex items-center gap-1",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-x-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: cn(
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
props.mode === "range"
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
: "[&:has([aria-selected])]:rounded-md"
),
day: cn(
buttonVariants({ variant: "ghost" }),
"size-8 p-0 font-normal aria-selected:opacity-100"
),
day_range_start:
"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
day_range_end:
"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:text-muted-foreground",
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ className, ...props }) => (
<ChevronLeft className={cn("size-4", className)} {...props} />
),
IconRight: ({ className, ...props }) => (
<ChevronRight className={cn("size-4", className)} {...props} />
),
}}
{...props} />
);
}
export { Calendar }

101
src/components/ui/card.jsx Normal file
View File

@ -0,0 +1,101 @@
import * as React from "react"
import { cn } from "@/lib/utils"
function Card({
className,
...props
}) {
return (
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className
)}
{...props} />
);
}
function CardHeader({
className,
...props
}) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
)}
{...props} />
);
}
function CardTitle({
className,
...props
}) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props} />
);
}
function CardDescription({
className,
...props
}) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props} />
);
}
function CardAction({
className,
...props
}) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props} />
);
}
function CardContent({
className,
...props
}) {
return (<div data-slot="card-content" className={cn("px-6", className)} {...props} />);
}
function CardFooter({
className,
...props
}) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props} />
);
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
}

195
src/components/ui/carousel.jsx Normal file
View File

@ -0,0 +1,195 @@
"use client";
import * as React from "react"
import useEmblaCarousel from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
const CarouselContext = React.createContext(null)
function useCarousel() {
const context = React.useContext(CarouselContext)
if (!context) {
throw new Error("useCarousel must be used within a <Carousel />")
}
return context
}
function Carousel({
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
}) {
const [carouselRef, api] = useEmblaCarousel({
...opts,
axis: orientation === "horizontal" ? "x" : "y",
}, plugins)
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
const [canScrollNext, setCanScrollNext] = React.useState(false)
const onSelect = React.useCallback((api) => {
if (!api) return
setCanScrollPrev(api.canScrollPrev())
setCanScrollNext(api.canScrollNext())
}, [])
const scrollPrev = React.useCallback(() => {
api?.scrollPrev()
}, [api])
const scrollNext = React.useCallback(() => {
api?.scrollNext()
}, [api])
const handleKeyDown = React.useCallback((event) => {
if (event.key === "ArrowLeft") {
event.preventDefault()
scrollPrev()
} else if (event.key === "ArrowRight") {
event.preventDefault()
scrollNext()
}
}, [scrollPrev, scrollNext])
React.useEffect(() => {
if (!api || !setApi) return
setApi(api)
}, [api, setApi])
React.useEffect(() => {
if (!api) return
onSelect(api)
api.on("reInit", onSelect)
api.on("select", onSelect)
return () => {
api?.off("select", onSelect)
};
}, [api, onSelect])
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}>
<div
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
data-slot="carousel"
{...props}>
{children}
</div>
</CarouselContext.Provider>
);
}
function CarouselContent({
className,
...props
}) {
const { carouselRef, orientation } = useCarousel()
return (
<div
ref={carouselRef}
className="overflow-hidden"
data-slot="carousel-content">
<div
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)}
{...props} />
</div>
);
}
function CarouselItem({
className,
...props
}) {
const { orientation } = useCarousel()
return (
<div
role="group"
aria-roledescription="slide"
data-slot="carousel-item"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
)}
{...props} />
);
}
function CarouselPrevious({
className,
variant = "outline",
size = "icon",
...props
}) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return (
<Button
data-slot="carousel-previous"
variant={variant}
size={size}
className={cn("absolute size-8 rounded-full", orientation === "horizontal"
? "top-1/2 -left-12 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}>
<ArrowLeft />
<span className="sr-only">Previous slide</span>
</Button>
);
}
function CarouselNext({
className,
variant = "outline",
size = "icon",
...props
}) {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return (
<Button
data-slot="carousel-next"
variant={variant}
size={size}
className={cn("absolute size-8 rounded-full", orientation === "horizontal"
? "top-1/2 -right-12 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}>
<ArrowRight />
<span className="sr-only">Next slide</span>
</Button>
);
}
export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

309
src/components/ui/chart.jsx Normal file
View File

@ -0,0 +1,309 @@
import * as React from "react"
import * as RechartsPrimitive from "recharts"
import { cn } from "@/lib/utils"
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = {
light: "",
dark: ".dark"
}
const ChartContext = React.createContext(null)
function useChart() {
const context = React.useContext(ChartContext)
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />")
}
return context
}
function ChartContainer({
id,
className,
children,
config,
...props
}) {
const uniqueId = React.useId()
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
return (
<ChartContext.Provider value={{ config }}>
<div
data-slot="chart"
data-chart={chartId}
className={cn(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
className
)}
{...props}>
<ChartStyle id={chartId} config={config} />
<RechartsPrimitive.ResponsiveContainer>
{children}
</RechartsPrimitive.ResponsiveContainer>
</div>
</ChartContext.Provider>
);
}
const ChartStyle = ({
id,
config
}) => {
const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
if (!colorConfig.length) {
return null
}
return (
<style
dangerouslySetInnerHTML={{
__html: Object.entries(THEMES)
.map(([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme] ||
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
}
`)
.join("\n"),
}} />
);
}
const ChartTooltip = RechartsPrimitive.Tooltip
function ChartTooltipContent({
active,
payload,
className,
indicator = "dot",
hideLabel = false,
hideIndicator = false,
label,
labelFormatter,
labelClassName,
formatter,
color,
nameKey,
labelKey
}) {
const { config } = useChart()
const tooltipLabel = React.useMemo(() => {
if (hideLabel || !payload?.length) {
return null
}
const [item] = payload
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const value =
!labelKey && typeof label === "string"
? config[label]?.label || label
: itemConfig?.label
if (labelFormatter) {
return (
<div className={cn("font-medium", labelClassName)}>
{labelFormatter(value, payload)}
</div>
);
}
if (!value) {
return null
}
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
}, [
label,
labelFormatter,
payload,
hideLabel,
labelClassName,
config,
labelKey,
])
if (!active || !payload?.length) {
return null
}
const nestLabel = payload.length === 1 && indicator !== "dot"
return (
<div
className={cn(
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
className
)}>
{!nestLabel ? tooltipLabel : null}
<div className="grid gap-1.5">
{payload.map((item, index) => {
const key = `${nameKey || item.name || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || item.payload.fill || item.color
return (
<div
key={item.dataKey}
className={cn(
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
indicator === "dot" && "items-center"
)}>
{formatter && item?.value !== undefined && item.name ? (
formatter(item.value, item.name, item, index, item.payload)
) : (
<>
{itemConfig?.icon ? (
<itemConfig.icon />
) : (
!hideIndicator && (
<div
className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
"my-0.5": nestLabel && indicator === "dashed",
})}
style={
{
"--color-bg": indicatorColor,
"--color-border": indicatorColor
}
} />
)
)}
<div
className={cn(
"flex flex-1 justify-between leading-none",
nestLabel ? "items-end" : "items-center"
)}>
<div className="grid gap-1.5">
{nestLabel ? tooltipLabel : null}
<span className="text-muted-foreground">
{itemConfig?.label || item.name}
</span>
</div>
{item.value && (
<span className="text-foreground font-mono font-medium tabular-nums">
{item.value.toLocaleString()}
</span>
)}
</div>
</>
)}
</div>
);
})}
</div>
</div>
);
}
const ChartLegend = RechartsPrimitive.Legend
function ChartLegendContent({
className,
hideIcon = false,
payload,
verticalAlign = "bottom",
nameKey
}) {
const { config } = useChart()
if (!payload?.length) {
return null
}
return (
<div
className={cn(
"flex items-center justify-center gap-4",
verticalAlign === "top" ? "pb-3" : "pt-3",
className
)}>
{payload.map((item) => {
const key = `${nameKey || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
return (
<div
key={item.value}
className={cn(
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
)}>
{itemConfig?.icon && !hideIcon ? (
<itemConfig.icon />
) : (
<div
className="h-2 w-2 shrink-0 rounded-[2px]"
style={{
backgroundColor: item.color,
}} />
)}
{itemConfig?.label}
</div>
);
})}
</div>
);
}
// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
config,
payload,
key
) {
if (typeof payload !== "object" || payload === null) {
return undefined
}
const payloadPayload =
"payload" in payload &&
typeof payload.payload === "object" &&
payload.payload !== null
? payload.payload
: undefined
let configLabelKey = key
if (
key in payload &&
typeof payload[key] === "string"
) {
configLabelKey = payload[key]
} else if (
payloadPayload &&
key in payloadPayload &&
typeof payloadPayload[key] === "string"
) {
configLabelKey = payloadPayload[key]
}
return configLabelKey in config
? config[configLabelKey]
: config[key];
}
export {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
ChartStyle,
}

25
src/components/ui/checkbox.jsx Normal file
View File

@ -0,0 +1,25 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }

21
src/components/ui/collapsible.jsx Normal file
View File

@ -0,0 +1,21 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
function Collapsible({
...props
}) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({
...props
}) {
return (<CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />);
}
function CollapsibleContent({
...props
}) {
return (<CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent }

155
src/components/ui/command.jsx Normal file
View File

@ -0,0 +1,155 @@
"use client"
import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { SearchIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
function Command({
className,
...props
}) {
return (
<CommandPrimitive
data-slot="command"
className={cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
className
)}
{...props} />
);
}
function CommandDialog({
title = "Command Palette",
description = "Search for a command to run...",
children,
...props
}) {
return (
<Dialog {...props}>
<DialogHeader className="sr-only">
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent className="overflow-hidden p-0">
<Command
className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
);
}
function CommandInput({
className,
...props
}) {
return (
<div
data-slot="command-input-wrapper"
className="flex h-9 items-center gap-2 border-b px-3">
<SearchIcon className="size-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
data-slot="command-input"
className={cn(
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props} />
</div>
);
}
function CommandList({
className,
...props
}) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
{...props} />
);
}
function CommandEmpty({
...props
}) {
return (<CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />);
}
function CommandGroup({
className,
...props
}) {
return (
<CommandPrimitive.Group
data-slot="command-group"
className={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
className
)}
{...props} />
);
}
function CommandSeparator({
className,
...props
}) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
className={cn("bg-border -mx-1 h-px", className)}
{...props} />
);
}
function CommandItem({
className,
...props
}) {
return (
<CommandPrimitive.Item
data-slot="command-item"
className={cn(
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props} />
);
}
function CommandShortcut({
className,
...props
}) {
return (
<span
data-slot="command-shortcut"
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props} />
);
}
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
}

224
src/components/ui/context-menu.jsx Normal file
View File

@ -0,0 +1,224 @@
"use client"
import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function ContextMenu({
...props
}) {
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
}
function ContextMenuTrigger({
...props
}) {
return (<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />);
}
function ContextMenuGroup({
...props
}) {
return (<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />);
}
function ContextMenuPortal({
...props
}) {
return (<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />);
}
function ContextMenuSub({
...props
}) {
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
}
function ContextMenuRadioGroup({
...props
}) {
return (<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />);
}
function ContextMenuSubTrigger({
className,
inset,
children,
...props
}) {
return (
<ContextMenuPrimitive.SubTrigger
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}>
{children}
<ChevronRightIcon className="ml-auto" />
</ContextMenuPrimitive.SubTrigger>
);
}
function ContextMenuSubContent({
className,
...props
}) {
return (
<ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props} />
);
}
function ContextMenuContent({
className,
...props
}) {
return (
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Content
data-slot="context-menu-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props} />
</ContextMenuPrimitive.Portal>
);
}
function ContextMenuItem({
className,
inset,
variant = "default",
...props
}) {
return (
<ContextMenuPrimitive.Item
data-slot="context-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props} />
);
}
function ContextMenuCheckboxItem({
className,
children,
checked,
...props
}) {
return (
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}>
<span
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.CheckboxItem>
);
}
function ContextMenuRadioItem({
className,
children,
...props
}) {
return (
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}>
<span
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.RadioItem>
);
}
function ContextMenuLabel({
className,
inset,
...props
}) {
return (
<ContextMenuPrimitive.Label
data-slot="context-menu-label"
data-inset={inset}
className={cn(
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props} />
);
}
function ContextMenuSeparator({
className,
...props
}) {
return (
<ContextMenuPrimitive.Separator
data-slot="context-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props} />
);
}
function ContextMenuShortcut({
className,
...props
}) {
return (
<span
data-slot="context-menu-shortcut"
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props} />
);
}
export {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuGroup,
ContextMenuPortal,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuRadioGroup,
}

131
src/components/ui/dialog.jsx Normal file
View File

@ -0,0 +1,131 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Dialog({
...props
}) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
function DialogTrigger({
...props
}) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
function DialogPortal({
...props
}) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
function DialogClose({
...props
}) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
function DialogOverlay({
className,
...props
}) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props} />
);
}
function DialogContent({
className,
children,
...props
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
)}
{...props}>
{children}
<DialogPrimitive.Close
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
);
}
function DialogHeader({
className,
...props
}) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props} />
);
}
function DialogFooter({
className,
...props
}) {
return (
<div
data-slot="dialog-footer"
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
{...props} />
);
}
function DialogTitle({
className,
...props
}) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props} />
);
}
function DialogDescription({
className,
...props
}) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props} />
);
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}

131
src/components/ui/drawer.jsx Normal file
View File

@ -0,0 +1,131 @@
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/lib/utils"
function Drawer({
...props
}) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
}
function DrawerTrigger({
...props
}) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
}
function DrawerPortal({
...props
}) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
}
function DrawerClose({
...props
}) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
}
function DrawerOverlay({
className,
...props
}) {
return (
<DrawerPrimitive.Overlay
data-slot="drawer-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props} />
);
}
function DrawerContent({
className,
children,
...props
}) {
return (
<DrawerPortal data-slot="drawer-portal">
<DrawerOverlay />
<DrawerPrimitive.Content
data-slot="drawer-content"
className={cn(
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
className
)}
{...props}>
<div
className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
);
}
function DrawerHeader({
className,
...props
}) {
return (
<div
data-slot="drawer-header"
className={cn("flex flex-col gap-1.5 p-4", className)}
{...props} />
);
}
function DrawerFooter({
className,
...props
}) {
return (
<div
data-slot="drawer-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props} />
);
}
function DrawerTitle({
className,
...props
}) {
return (
<DrawerPrimitive.Title
data-slot="drawer-title"
className={cn("text-foreground font-semibold", className)}
{...props} />
);
}
function DrawerDescription({
className,
...props
}) {
return (
<DrawerPrimitive.Description
data-slot="drawer-description"
className={cn("text-muted-foreground text-sm", className)}
{...props} />
);
}
export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
}

223
src/components/ui/dropdown-menu.jsx Normal file
View File

@ -0,0 +1,223 @@
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function DropdownMenu({
...props
}) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function DropdownMenuPortal({
...props
}) {
return (<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />);
}
function DropdownMenuTrigger({
...props
}) {
return (<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />);
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props} />
</DropdownMenuPrimitive.Portal>
);
}
function DropdownMenuGroup({
...props
}) {
return (<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />);
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}) {
return (
<DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props} />
);
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
...props
}) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}>
<span
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
);
}
function DropdownMenuRadioGroup({
...props
}) {
return (<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />);
}
function DropdownMenuRadioItem({
className,
children,
...props
}) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}>
<span
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
);
}
function DropdownMenuLabel({
className,
inset,
...props
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
{...props} />
);
}
function DropdownMenuSeparator({
className,
...props
}) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props} />
);
}
function DropdownMenuShortcut({
className,
...props
}) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props} />
);
}
function DropdownMenuSub({
...props
}) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}) {
return (
<DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
className
)}
{...props}>
{children}
<ChevronRightIcon className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger>
);
}
function DropdownMenuSubContent({
className,
...props
}) {
return (
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props} />
);
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}

143
src/components/ui/form.jsx Normal file
View File

@ -0,0 +1,143 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
const Form = FormProvider
const FormFieldContext = React.createContext({})
const FormField = (
{
...props
}
) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
);
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState } = useFormContext()
const formState = useFormState({ name: fieldContext.name })
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
const FormItemContext = React.createContext({})
function FormItem({
className,
...props
}) {
const id = React.useId()
return (
<FormItemContext.Provider value={{ id }}>
<div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
</FormItemContext.Provider>
);
}
function FormLabel({
className,
...props
}) {
const { error, formItemId } = useFormField()
return (
<Label
data-slot="form-label"
data-error={!!error}
className={cn("data-[error=true]:text-destructive", className)}
htmlFor={formItemId}
{...props} />
);
}
function FormControl({
...props
}) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props} />
);
}
function FormDescription({
className,
...props
}) {
const { formDescriptionId } = useFormField()
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn("text-muted-foreground text-sm", className)}
{...props} />
);
}
function FormMessage({
className,
...props
}) {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message ?? "") : props.children
if (!body) {
return null
}
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn("text-destructive text-sm", className)}
{...props}>
{body}
</p>
);
}
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}

39
src/components/ui/hover-card.jsx Normal file
View File

@ -0,0 +1,39 @@
import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
import { cn } from "@/lib/utils"
function HoverCard({
...props
}) {
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
}
function HoverCardTrigger({
...props
}) {
return (<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />);
}
function HoverCardContent({
className,
align = "center",
sideOffset = 4,
...props
}) {
return (
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
<HoverCardPrimitive.Content
data-slot="hover-card-content"
align={align}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
)}
{...props} />
</HoverCardPrimitive.Portal>
);
}
export { HoverCard, HoverCardTrigger, HoverCardContent }

73
src/components/ui/input-otp.jsx Normal file
View File

@ -0,0 +1,73 @@
"use client"
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { MinusIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function InputOTP({
className,
containerClassName,
...props
}) {
return (
<OTPInput
data-slot="input-otp"
containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
className={cn("disabled:cursor-not-allowed", className)}
{...props} />
);
}
function InputOTPGroup({
className,
...props
}) {
return (
<div
data-slot="input-otp-group"
className={cn("flex items-center", className)}
{...props} />
);
}
function InputOTPSlot({
index,
className,
...props
}) {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
return (
<div
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
className
)}
{...props}>
{char}
{hasFakeCaret && (
<div
className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
</div>
)}
</div>
);
}
function InputOTPSeparator({
...props
}) {
return (
<div data-slot="input-otp-separator" role="separator" {...props}>
<MinusIcon />
</div>
);
}
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

20
src/components/ui/input.jsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
})
Input.displayName = "Input"
export { Input }

20
src/components/ui/label.jsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

250
src/components/ui/menubar.jsx Normal file
View File

@ -0,0 +1,250 @@
import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Menubar({
className,
...props
}) {
return (
<MenubarPrimitive.Root
data-slot="menubar"
className={cn(
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
className
)}
{...props} />
);
}
function MenubarMenu({
...props
}) {
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
}
function MenubarGroup({
...props
}) {
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
}
function MenubarPortal({
...props
}) {
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
}
function MenubarRadioGroup({
...props
}) {
return (<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />);
}
function MenubarTrigger({
className,
...props
}) {
return (
<MenubarPrimitive.Trigger
data-slot="menubar-trigger"
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
className
)}
{...props} />
);
}
function MenubarContent({
className,
align = "start",
alignOffset = -4,
sideOffset = 8,
...props
}) {
return (
<MenubarPortal>
<MenubarPrimitive.Content
data-slot="menubar-content"
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
className
)}
{...props} />
</MenubarPortal>
);
}
function MenubarItem({
className,
inset,
variant = "default",
...props
}) {
return (
<MenubarPrimitive.Item
data-slot="menubar-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props} />
);
}
function MenubarCheckboxItem({
className,
children,
checked,
...props
}) {
return (
<MenubarPrimitive.CheckboxItem
data-slot="menubar-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}>
<span
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.CheckboxItem>
);
}
function MenubarRadioItem({
className,
children,
...props
}) {
return (
<MenubarPrimitive.RadioItem
data-slot="menubar-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}>
<span
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.RadioItem>
);
}
function MenubarLabel({
className,
inset,
...props
}) {
return (
<MenubarPrimitive.Label
data-slot="menubar-label"
data-inset={inset}
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
{...props} />
);
}
function MenubarSeparator({
className,
...props
}) {
return (
<MenubarPrimitive.Separator
data-slot="menubar-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props} />
);
}
function MenubarShortcut({
className,
...props
}) {
return (
<span
data-slot="menubar-shortcut"
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props} />
);
}
function MenubarSub({
...props
}) {
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
}
function MenubarSubTrigger({
className,
inset,
children,
...props
}) {
return (
<MenubarPrimitive.SubTrigger
data-slot="menubar-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
className
)}
{...props}>
{children}
<ChevronRightIcon className="ml-auto h-4 w-4" />
</MenubarPrimitive.SubTrigger>
);
}
function MenubarSubContent({
className,
...props
}) {
return (
<MenubarPrimitive.SubContent
data-slot="menubar-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props} />
);
}
export {
Menubar,
MenubarPortal,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarGroup,
MenubarSeparator,
MenubarLabel,
MenubarItem,
MenubarShortcut,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSub,
MenubarSubTrigger,
MenubarSubContent,
}

152
src/components/ui/navigation-menu.jsx Normal file
View File

@ -0,0 +1,152 @@
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function NavigationMenu({
className,
children,
viewport = true,
...props
}) {
return (
<NavigationMenuPrimitive.Root
data-slot="navigation-menu"
data-viewport={viewport}
className={cn(
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}>
{children}
{viewport && <NavigationMenuViewport />}
</NavigationMenuPrimitive.Root>
);
}
function NavigationMenuList({
className,
...props
}) {
return (
<NavigationMenuPrimitive.List
data-slot="navigation-menu-list"
className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
{...props} />
);
}
function NavigationMenuItem({
className,
...props
}) {
return (
<NavigationMenuPrimitive.Item
data-slot="navigation-menu-item"
className={cn("relative", className)}
{...props} />
);
}
const navigationMenuTriggerStyle = cva(
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
)
function NavigationMenuTrigger({
className,
children,
...props
}) {
return (
<NavigationMenuPrimitive.Trigger
data-slot="navigation-menu-trigger"
className={cn(navigationMenuTriggerStyle(), "group", className)}
{...props}>
{children}{" "}
<ChevronDownIcon
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true" />
</NavigationMenuPrimitive.Trigger>
);
}
function NavigationMenuContent({
className,
...props
}) {
return (
<NavigationMenuPrimitive.Content
data-slot="navigation-menu-content"
className={cn(
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
className
)}
{...props} />
);
}
function NavigationMenuViewport({
className,
...props
}) {
return (
<div
className={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
<NavigationMenuPrimitive.Viewport
data-slot="navigation-menu-viewport"
className={cn(
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
className
)}
{...props} />
</div>
);
}
function NavigationMenuLink({
className,
...props
}) {
return (
<NavigationMenuPrimitive.Link
data-slot="navigation-menu-link"
className={cn(
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props} />
);
}
function NavigationMenuIndicator({
className,
...props
}) {
return (
<NavigationMenuPrimitive.Indicator
data-slot="navigation-menu-indicator"
className={cn(
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
className
)}
{...props}>
<div
className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
</NavigationMenuPrimitive.Indicator>
);
}
export {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
navigationMenuTriggerStyle,
}

118
src/components/ui/pagination.jsx Normal file
View File

@ -0,0 +1,118 @@
import * as React from "react"
import {
ChevronLeftIcon,
ChevronRightIcon,
MoreHorizontalIcon,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button";
function Pagination({
className,
...props
}) {
return (
<nav
role="navigation"
aria-label="pagination"
data-slot="pagination"
className={cn("mx-auto flex w-full justify-center", className)}
{...props} />
);
}
function PaginationContent({
className,
...props
}) {
return (
<ul
data-slot="pagination-content"
className={cn("flex flex-row items-center gap-1", className)}
{...props} />
);
}
function PaginationItem({
...props
}) {
return <li data-slot="pagination-item" {...props} />;
}
function PaginationLink({
className,
isActive,
size = "icon",
...props
}) {
return (
<a
aria-current={isActive ? "page" : undefined}
data-slot="pagination-link"
data-active={isActive}
className={cn(buttonVariants({
variant: isActive ? "outline" : "ghost",
size,
}), className)}
{...props} />
);
}
function PaginationPrevious({
className,
...props
}) {
return (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
{...props}>
<ChevronLeftIcon />
<span className="hidden sm:block">Previous</span>
</PaginationLink>
);
}
function PaginationNext({
className,
...props
}) {
return (
<PaginationLink
aria-label="Go to next page"
size="default"
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
{...props}>
<span className="hidden sm:block">Next</span>
<ChevronRightIcon />
</PaginationLink>
);
}
function PaginationEllipsis({
className,
...props
}) {
return (
<span
aria-hidden
data-slot="pagination-ellipsis"
className={cn("flex size-9 items-center justify-center", className)}
{...props}>
<MoreHorizontalIcon className="size-4" />
<span className="sr-only">More pages</span>
</span>
);
}
export {
Pagination,
PaginationContent,
PaginationLink,
PaginationItem,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
}

47
src/components/ui/popover.jsx Normal file
View File

@ -0,0 +1,47 @@
"use client"
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "@/lib/utils"
function Popover({
...props
}) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
}
function PopoverTrigger({
...props
}) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
}
function PopoverContent({
className,
align = "center",
sideOffset = 4,
...props
}) {
return (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
data-slot="popover-content"
align={align}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
)}
{...props} />
</PopoverPrimitive.Portal>
);
}
function PopoverAnchor({
...props
}) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

27
src/components/ui/progress.jsx Normal file
View File

@ -0,0 +1,27 @@
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import { cn } from "@/lib/utils"
function Progress({
className,
value,
...props
}) {
return (
<ProgressPrimitive.Root
data-slot="progress"
className={cn(
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
className
)}
{...props}>
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className="bg-primary h-full w-full flex-1 transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
</ProgressPrimitive.Root>
);
}
export { Progress }

43
src/components/ui/radio-group.jsx Normal file
View File

@ -0,0 +1,43 @@
"use client"
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function RadioGroup({
className,
...props
}) {
return (
<RadioGroupPrimitive.Root
data-slot="radio-group"
className={cn("grid gap-3", className)}
{...props} />
);
}
function RadioGroupItem({
className,
...props
}) {
return (
<RadioGroupPrimitive.Item
data-slot="radio-group-item"
className={cn(
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}>
<RadioGroupPrimitive.Indicator
data-slot="radio-group-indicator"
className="relative flex items-center justify-center">
<CircleIcon
className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
);
}
export { RadioGroup, RadioGroupItem }

51
src/components/ui/resizable.jsx Normal file
View File

@ -0,0 +1,51 @@
import * as React from "react"
import { GripVerticalIcon } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/lib/utils"
function ResizablePanelGroup({
className,
...props
}) {
return (
<ResizablePrimitive.PanelGroup
data-slot="resizable-panel-group"
className={cn(
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
className
)}
{...props} />
);
}
function ResizablePanel({
...props
}) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
}
function ResizableHandle({
withHandle,
className,
...props
}) {
return (
<ResizablePrimitive.PanelResizeHandle
data-slot="resizable-handle"
className={cn(
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
className
)}
{...props}>
{withHandle && (
<div
className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
<GripVerticalIcon className="size-2.5" />
</div>
)}
</ResizablePrimitive.PanelResizeHandle>
);
}
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

51
src/components/ui/scroll-area.jsx Normal file
View File

@ -0,0 +1,51 @@
"use client"
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
function ScrollArea({
className,
children,
...props
}) {
return (
<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
);
}
function ScrollBar({
className,
orientation = "vertical",
...props
}) {
return (
<ScrollAreaPrimitive.ScrollAreaScrollbar
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
className
)}
{...props}>
<ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
);
}
export { ScrollArea, ScrollBar }

136
src/components/ui/select.jsx Normal file
View File

@ -0,0 +1,136 @@
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import { cn } from "@/lib/utils"
const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}

27
src/components/ui/separator.jsx Normal file
View File

@ -0,0 +1,27 @@
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}) {
return (
<SeparatorPrimitive.Root
data-slot="separator-root"
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
)}
{...props} />
);
}
export { Separator }

138
src/components/ui/sheet.jsx Normal file
View File

@ -0,0 +1,138 @@
import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Sheet({
...props
}) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}
function SheetTrigger({
...props
}) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}
function SheetClose({
...props
}) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}
function SheetPortal({
...props
}) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}
function SheetOverlay({
className,
...props
}) {
return (
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props} />
);
}
function SheetContent({
className,
children,
side = "right",
...props
}) {
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
data-slot="sheet-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className
)}
{...props}>
{children}
<SheetPrimitive.Close
className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<XIcon className="size-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
);
}
function SheetHeader({
className,
...props
}) {
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-4", className)}
{...props} />
);
}
function SheetFooter({
className,
...props
}) {
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props} />
);
}
function SheetTitle({
className,
...props
}) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-foreground font-semibold", className)}
{...props} />
);
}
function SheetDescription({
className,
...props
}) {
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-muted-foreground text-sm", className)}
{...props} />
);
}
export {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}

682
src/components/ui/sidebar.jsx Normal file
View File

@ -0,0 +1,682 @@
"use client";
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";
import { PanelLeftIcon } from "lucide-react"
import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
const SidebarContext = React.createContext(null)
function useSidebar() {
const context = React.useContext(SidebarContext)
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.")
}
return context
}
function SidebarProvider({
defaultOpen = true,
open: openProp,
onOpenChange: setOpenProp,
className,
style,
children,
...props
}) {
const isMobile = useIsMobile()
const [openMobile, setOpenMobile] = React.useState(false)
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = React.useState(defaultOpen)
const open = openProp ?? _open
const setOpen = React.useCallback((value) => {
const openState = typeof value === "function" ? value(open) : value
if (setOpenProp) {
setOpenProp(openState)
} else {
_setOpen(openState)
}
// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
}, [setOpenProp, open])
// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
}, [isMobile, setOpen, setOpenMobile])
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
const handleKeyDown = (event) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault()
toggleSidebar()
}
}
window.addEventListener("keydown", handleKeyDown)
return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar])
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed"
const contextValue = React.useMemo(() => ({
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar,
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar])
return (
<SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}>
<div
data-slot="sidebar-wrapper"
style={
{
"--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style
}
}
className={cn(
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
className
)}
{...props}>
{children}
</div>
</TooltipProvider>
</SidebarContext.Provider>
);
}
function Sidebar({
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
className,
children,
...props
}) {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
if (collapsible === "none") {
return (
<div
data-slot="sidebar"
className={cn(
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
className
)}
{...props}>
{children}
</div>
);
}
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
data-sidebar="sidebar"
data-slot="sidebar"
data-mobile="true"
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
}
}
side={side}>
<SheetHeader className="sr-only">
<SheetTitle>Sidebar</SheetTitle>
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
</SheetHeader>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
);
}
return (
<div
className="group peer text-sidebar-foreground hidden md:block"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}
data-slot="sidebar">
{/* This is what handles the sidebar gap on desktop */}
<div
data-slot="sidebar-gap"
className={cn(
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
)} />
<div
data-slot="sidebar-container"
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
className
)}
{...props}>
<div
data-sidebar="sidebar"
data-slot="sidebar-inner"
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
{children}
</div>
</div>
</div>
);
}
function SidebarTrigger({
className,
onClick,
...props
}) {
const { toggleSidebar } = useSidebar()
return (
<Button
data-sidebar="trigger"
data-slot="sidebar-trigger"
variant="ghost"
size="icon"
className={cn("size-7", className)}
onClick={(event) => {
onClick?.(event)
toggleSidebar()
}}
{...props}>
<PanelLeftIcon />
<span className="sr-only">Toggle Sidebar</span>
</Button>
);
}
function SidebarRail({
className,
...props
}) {
const { toggleSidebar } = useSidebar()
return (
<button
data-sidebar="rail"
data-slot="sidebar-rail"
aria-label="Toggle Sidebar"
tabIndex={-1}
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
className
)}
{...props} />
);
}
function SidebarInset({
className,
...props
}) {
return (
<main
data-slot="sidebar-inset"
className={cn(
"bg-background relative flex w-full flex-1 flex-col",
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
className
)}
{...props} />
);
}
function SidebarInput({
className,
...props
}) {
return (
<Input
data-slot="sidebar-input"
data-sidebar="input"
className={cn("bg-background h-8 w-full shadow-none", className)}
{...props} />
);
}
function SidebarHeader({
className,
...props
}) {
return (
<div
data-slot="sidebar-header"
data-sidebar="header"
className={cn("flex flex-col gap-2 p-2", className)}
{...props} />
);
}
function SidebarFooter({
className,
...props
}) {
return (
<div
data-slot="sidebar-footer"
data-sidebar="footer"
className={cn("flex flex-col gap-2 p-2", className)}
{...props} />
);
}
function SidebarSeparator({
className,
...props
}) {
return (
<Separator
data-slot="sidebar-separator"
data-sidebar="separator"
className={cn("bg-sidebar-border mx-2 w-auto", className)}
{...props} />
);
}
function SidebarContent({
className,
...props
}) {
return (
<div
data-slot="sidebar-content"
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className
)}
{...props} />
);
}
function SidebarGroup({
className,
...props
}) {
return (
<div
data-slot="sidebar-group"
data-sidebar="group"
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props} />
);
}
function SidebarGroupLabel({
className,
asChild = false,
...props
}) {
const Comp = asChild ? Slot : "div"
return (
<Comp
data-slot="sidebar-group-label"
data-sidebar="group-label"
className={cn(
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className
)}
{...props} />
);
}
function SidebarGroupAction({
className,
asChild = false,
...props
}) {
const Comp = asChild ? Slot : "button"
return (
<Comp
data-slot="sidebar-group-action"
data-sidebar="group-action"
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />
);
}
function SidebarGroupContent({
className,
...props
}) {
return (
<div
data-slot="sidebar-group-content"
data-sidebar="group-content"
className={cn("w-full text-sm", className)}
{...props} />
);
}
function SidebarMenu({
className,
...props
}) {
return (
<ul
data-slot="sidebar-menu"
data-sidebar="menu"
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props} />
);
}
function SidebarMenuItem({
className,
...props
}) {
return (
<li
data-slot="sidebar-menu-item"
data-sidebar="menu-item"
className={cn("group/menu-item relative", className)}
{...props} />
);
}
const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
outline:
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
},
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function SidebarMenuButton({
asChild = false,
isActive = false,
variant = "default",
size = "default",
tooltip,
className,
...props
}) {
const Comp = asChild ? Slot : "button"
const { isMobile, state } = useSidebar()
const button = (
<Comp
data-slot="sidebar-menu-button"
data-sidebar="menu-button"
data-size={size}
data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props} />
)
if (!tooltip) {
return button
}
if (typeof tooltip === "string") {
tooltip = {
children: tooltip,
}
}
return (
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent
side="right"
align="center"
hidden={state !== "collapsed" || isMobile}
{...tooltip} />
</Tooltip>
);
}
function SidebarMenuAction({
className,
asChild = false,
showOnHover = false,
...props
}) {
const Comp = asChild ? Slot : "button"
return (
<Comp
data-slot="sidebar-menu-action"
data-sidebar="menu-action"
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
showOnHover &&
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
className
)}
{...props} />
);
}
function SidebarMenuBadge({
className,
...props
}) {
return (
<div
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />
);
}
function SidebarMenuSkeleton({
className,
showIcon = false,
...props
}) {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
}, [])
return (
<div
data-slot="sidebar-menu-skeleton"
data-sidebar="menu-skeleton"
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
{...props}>
{showIcon && (
<Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
)}
<Skeleton
className="h-4 max-w-(--skeleton-width) flex-1"
data-sidebar="menu-skeleton-text"
style={
{
"--skeleton-width": width
}
} />
</div>
);
}
function SidebarMenuSub({
className,
...props
}) {
return (
<ul
data-slot="sidebar-menu-sub"
data-sidebar="menu-sub"
className={cn(
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />
);
}
function SidebarMenuSubItem({
className,
...props
}) {
return (
<li
data-slot="sidebar-menu-sub-item"
data-sidebar="menu-sub-item"
className={cn("group/menu-sub-item relative", className)}
{...props} />
);
}
function SidebarMenuSubButton({
asChild = false,
size = "md",
isActive = false,
className,
...props
}) {
const Comp = asChild ? Slot : "a"
return (
<Comp
data-slot="sidebar-menu-sub-button"
data-sidebar="menu-sub-button"
data-size={size}
data-active={isActive}
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />
);
}
export {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInput,
SidebarInset,
SidebarMenu,
SidebarMenuAction,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarSeparator,
SidebarTrigger,
useSidebar,
}

15
src/components/ui/skeleton.jsx Normal file
View File

@ -0,0 +1,15 @@
import { cn } from "@/lib/utils"
function Skeleton({
className,
...props
}) {
return (
<div
data-slot="skeleton"
className={cn("bg-accent animate-pulse rounded-md", className)}
{...props} />
);
}
export { Skeleton }

56
src/components/ui/slider.jsx Normal file
View File

@ -0,0 +1,56 @@
"use client"
import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"
import { cn } from "@/lib/utils"
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}) {
const _values = React.useMemo(() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
: [min, max], [value, defaultValue, min, max])
return (
<SliderPrimitive.Root
data-slot="slider"
defaultValue={defaultValue}
value={value}
min={min}
max={max}
className={cn(
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
className
)}
{...props}>
<SliderPrimitive.Track
data-slot="slider-track"
className={cn(
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
)}>
<SliderPrimitive.Range
data-slot="slider-range"
className={cn(
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
)} />
</SliderPrimitive.Track>
{Array.from({ length: _values.length }, (_, index) => (
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
))}
</SliderPrimitive.Root>
);
}
export { Slider }

24
src/components/ui/sonner.jsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner";
const Toaster = ({
...props
}) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme}
className="toaster group"
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)"
}
}
{...props} />
);
}
export { Toaster }

29
src/components/ui/switch.jsx Normal file
View File

@ -0,0 +1,29 @@
"use client"
import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"
import { cn } from "@/lib/utils"
function Switch({
className,
...props
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
className={cn(
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
)} />
</SwitchPrimitive.Root>
);
}
export { Switch }

121
src/components/ui/table.jsx Normal file
View File

@ -0,0 +1,121 @@
import * as React from "react"
import { cn } from "@/lib/utils"
function Table({
className,
...props
}) {
return (
<div data-slot="table-container" className="relative w-full overflow-x-auto">
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
{...props} />
</div>
);
}
function TableHeader({
className,
...props
}) {
return (
<thead
data-slot="table-header"
className={cn("[&_tr]:border-b", className)}
{...props} />
);
}
function TableBody({
className,
...props
}) {
return (
<tbody
data-slot="table-body"
className={cn("[&_tr:last-child]:border-0", className)}
{...props} />
);
}
function TableFooter({
className,
...props
}) {
return (
<tfoot
data-slot="table-footer"
className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
{...props} />
);
}
function TableRow({
className,
...props
}) {
return (
<tr
data-slot="table-row"
className={cn(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
className
)}
{...props} />
);
}
function TableHead({
className,
...props
}) {
return (
<th
data-slot="table-head"
className={cn(
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props} />
);
}
function TableCell({
className,
...props
}) {
return (
<td
data-slot="table-cell"
className={cn(
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props} />
);
}
function TableCaption({
className,
...props
}) {
return (
<caption
data-slot="table-caption"
className={cn("text-muted-foreground mt-4 text-sm", className)}
{...props} />
);
}
export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
}

62
src/components/ui/tabs.jsx Normal file
View File

@ -0,0 +1,62 @@
"use client"
import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cn } from "@/lib/utils"
function Tabs({
className,
...props
}) {
return (
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col gap-2", className)}
{...props} />
);
}
function TabsList({
className,
...props
}) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
className
)}
{...props} />
);
}
function TabsTrigger({
className,
...props
}) {
return (
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props} />
);
}
function TabsContent({
className,
...props
}) {
return (
<TabsPrimitive.Content
data-slot="tabs-content"
className={cn("flex-1 outline-none", className)}
{...props} />
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent }

19
src/components/ui/textarea.jsx Normal file
View File

@ -0,0 +1,19 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Textarea = React.forwardRef(({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
})
Textarea.displayName = "Textarea"
export { Textarea }

61
src/components/ui/toggle-group.jsx Normal file
View File

@ -0,0 +1,61 @@
"use client";
import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"
const ToggleGroupContext = React.createContext({
size: "default",
variant: "default",
})
function ToggleGroup({
className,
variant,
size,
children,
...props
}) {
return (
<ToggleGroupPrimitive.Root
data-slot="toggle-group"
data-variant={variant}
data-size={size}
className={cn(
"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
className
)}
{...props}>
<ToggleGroupContext.Provider value={{ variant, size }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
);
}
function ToggleGroupItem({
className,
children,
variant,
size,
...props
}) {
const context = React.useContext(ToggleGroupContext)
return (
<ToggleGroupPrimitive.Item
data-slot="toggle-group-item"
data-variant={context.variant || variant}
data-size={context.size || size}
className={cn(toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className)}
{...props}>
{children}
</ToggleGroupPrimitive.Item>
);
}
export { ToggleGroup, ToggleGroupItem }

43
src/components/ui/toggle.jsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-9 px-2 min-w-9",
sm: "h-8 px-1.5 min-w-8",
lg: "h-10 px-2.5 min-w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Toggle({
className,
variant,
size,
...props
}) {
return (
<TogglePrimitive.Root
data-slot="toggle"
className={cn(toggleVariants({ variant, size, className }))}
{...props} />
);
}
export { Toggle, toggleVariants }

53
src/components/ui/tooltip.jsx Normal file
View File

@ -0,0 +1,53 @@
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/lib/utils"
function TooltipProvider({
delayDuration = 0,
...props
}) {
return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
}
function Tooltip({
...props
}) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipProvider>
);
}
function TooltipTrigger({
...props
}) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
}) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
className
)}
{...props}>
{children}
<TooltipPrimitive.Arrow
className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
);
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

44
src/config/navigation.json Normal file
View File

@ -0,0 +1,44 @@
[
{
"path": "/",
"label": "Home",
"component": "HomePage",
"show": true
},
{
"path": "/products",
"label": "Products",
"component": "ProductsPage",
"show": true
},
{
"path": "/technology",
"label": "Technology",
"component": "TechnologyPage",
"show": true
},
{
"path": "/register",
"label": "Register Interest",
"component": "RegisterPage",
"show": true
},
{
"path": "/blog",
"label": "Blog",
"component": "Blog",
"show": true
},
{
"path": "/blog/:slug",
"label": "Blog Post",
"component": "BlogPost",
"show": false
},
{
"path": "/become-member",
"label": "Become a Member",
"component": "BecomeMember",
"show": true
}
]

Some files were not shown because too many files have changed in this diff Show More