DSTRBTD Main Site

The main marketing/landing site for DSTRBTD - Trust-less Decentralised Distributed Training on Bittensor's Subnetwork 38.

Features

• 🎨 Modern dark theme matching the dashboard aesthetic
• 🌐 Animated distributed network visualization on the hero section
• 📱 Fully responsive design
• ⚡ Built with React + Vite for fast performance
• 🎯 SEO-friendly structure

Getting Started

Installation

npm install

Development

npm run dev

The site will be available at http://localhost:3001

Build for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Project Structure

MainFrontend/
├── public/           # Static assets (logo, images, etc.)
├── src/
│   ├── components/   # React components
│   │   ├── DistributedNetwork.jsx  # Animated network visualization
│   │   ├── Navigation.jsx
│   │   ├── Hero.jsx
│   │   ├── Features.jsx
│   │   ├── About.jsx
│   │   └── Footer.jsx
│   ├── pages/        # Page components
│   │   └── Home.jsx
│   ├── App.jsx       # Main app component
│   ├── App.css       # Main styles
│   ├── index.css     # Global styles
│   └── main.jsx      # Entry point
├── index.html
├── package.json
└── vite.config.js

Customization

Adding Your Webflow Content

1. Replace placeholder content: Edit the components in src/components/ to add your actual content from Webflow
2. Add images: Place images in public/ and reference them as /image-name.png
3. Add new sections: Create new components in src/components/ and import them in src/pages/Home.jsx
4. Styling: Modify src/App.css to match your design needs

Design System

The site uses CSS variables defined in src/index.css:

• --bg-primary: Main background (#0a0a0a)
• --bg-secondary: Secondary background (#151515)
• --text-primary: Primary text (#ffffff)
• --text-secondary: Secondary text (#e0e0e0)
• --accent-blue: Blue accent (#60a5fa)
• --accent-green: Green accent (#34d399)

Deployment

Vercel (Recommended)

1. Install Vercel CLI: npm i -g vercel
2. Run vercel in the project directory
3. Follow the prompts

Netlify

1. Build the project: npm run build
2. Deploy the dist folder to Netlify

Other Static Hosting

Build the project and deploy the dist folder to any static hosting service.

License

Copyright © 2025 DSTRBTD. All rights reserved.