The AI Blockchain Built for a Sustainable Future
AI-Powered · Eco-Friendly · Born in Central America
The official landing page for DecentralChain — the first Layer 1 blockchain that fuses artificial intelligence with eco-friendly consensus, built in Central America for the world.
This site communicates the three core pillars of the DecentralChain protocol:
- 🤖 The AI Blockchain — On-chain ML inference, AI-optimized transaction routing, and automated smart contract auditing built into the protocol layer.
- 🌱 Eco-Friendly Blockchain — Leased Proof-of-Stake (LPoS) consensus that is thousands of times more energy-efficient than Proof-of-Work, operating as a carbon-negative network.
- 🌎 The Blockchain of Central America — Designed and built by Blockchain Costa Rica, purpose-built for emerging markets with cross-border payments, multilingual support, and regional fintech integration.
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router & Turbopack |
| React 19 | UI library |
| Tailwind CSS 4 | Utility-first styling |
| Framer Motion | Animations & transitions |
| Lucide React | Icon library |
| TypeScript 5 | Type safety |
- 🌐 Internationalization (i18n) — Full multi-language support for English, Spanish, and Chinese with React Context-based locale switching.
- 🌙 Dark / Light Mode — Theme toggle with localStorage persistence and flash-free hydration via pre-render script.
- 📡 Live Blockchain Data — Real-time block height and transaction metrics pulled from the DecentralChain mainnet node with 10-second polling.
- ⚡ Performance Optimized — Static generation, Turbopack dev server, optimized fonts, and lazy-loaded animations.
- 📱 Fully Responsive — Mobile-first design across all 20+ sections and components.
- 🎨 Premium Visuals — Animated gradient backgrounds, glassmorphism cards, and smooth scroll-triggered animations.
├── app/
│ ├── globals.css # Global styles & theme variables
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Landing page composition
│ └── providers.tsx # Theme + i18n context providers
├── components/
│ ├── Hero.tsx # Hero section with live blockchain data
│ ├── About.tsx # Three-pillar overview
│ ├── WhyDecentralChain.tsx # Feature grid (6 pillars)
│ ├── Architecture.tsx # Protocol stack visualization
│ ├── Ecosystem.tsx # Ecosystem modules (7 apps)
│ ├── EcosystemFlywheel.tsx # Growth flywheel diagram
│ ├── InvestorThesis.tsx # Investment case
│ ├── Roadmap.tsx # 6-phase execution timeline
│ ├── Vision.tsx # Long-term vision
│ ├── ResourceHub.tsx # DEX, Explorer, GitHub, API links + video
│ ├── FAQ.tsx # 6 FAQ items
│ ├── CTASection.tsx # Call to action
│ └── ... # Navbar, Footer, shared components
├── hooks/
│ └── useBlockchainData.ts # Live mainnet data hook
├── lib/
│ ├── blockchain.ts # Mainnet node API service
│ ├── constants.ts # Icon mappings & config
│ ├── theme.tsx # Theme context & toggle
│ └── i18n/
│ ├── index.tsx # i18n provider & useI18n hook
│ ├── en.ts # English translations
│ ├── es.ts # Spanish translations
│ └── zh.ts # Chinese translations
└── public/ # Static assets
- Node.js ≥ 18.18
- npm ≥ 9
# Clone the repository
git clone https://github.com/dylanpersonguy/dcc-website.git
cd dcc-website
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 to view the site.
# Production build
npm run build
# Start production server
npm startNo environment variables are required. The site connects to the public DecentralChain mainnet node at https://mainnet-node.decentralchain.io.
| Resource | URL |
|---|---|
| 🌐 Website | decentralchain.io |
| 📊 Explorer | explorer.decentralchain.io |
| 💱 DEX | decentral.exchange |
| 📖 Docs | docs.decentralchain.io |
| 🔗 Node API | mainnet-node.decentralchain.io |
This project is licensed under the MIT License.
DecentralChain — The AI-powered, eco-friendly blockchain of Central America.
Built with 💚 in Costa Rica