Neural Draft LLC - Marketing Websites

A unified React application containing three marketing websites for Neural Draft LLC:

1. NeuralDraft.net (/) - Main company landing page
2. NeuralDraft.net/KryptoClaw (/kryptoclaw) - KryptoClaw crypto wallet product page
3. NeuralDraft.net/VibeZ (/vibez) - VibeZ communication platform (coming soon)

Tech Stack

• React 18 - UI framework
• Vite - Build tool and dev server
• React Router - Client-side routing
• Framer Motion - Animations
• CSS Variables - Design system

Design System

The Neural Draft Design System provides a cohesive "Dark Luxury + Minimalist Technology + Cinematic Depth" aesthetic across all three properties.

Color Palette

• Base: Obsidian (#0a0a0f) → Void (#050507)
• Gold Accent: #c9a962 (luxury/premium)
• Cyan Accent: #00d4ff (technology/KryptoClaw)
• Neon Palette: Purple #b366ff, Pink #ff66b2, Blue #66b2ff (VibeZ)

Typography

• Display: Outfit (300-800)
• Mono: JetBrains Mono

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Navigate to the project
cd neural-draft

# Install dependencies
npm install

# Start development server
npm run dev

The development server runs at http://localhost:3000

Build for Production

npm run build

Output is generated in the dist/ folder.

Preview Production Build

npm run preview

Deployment

Deploy to Vercel (Recommended)

1. Push the project to GitHub
2. Connect your GitHub repo to Vercel
3. Vercel auto-detects Vite and deploys

Or use Vercel CLI:

npm i -g vercel
vercel --prod

Deploy to Netlify

1. Push to GitHub
2. Connect to Netlify
3. Build command: npm run build
4. Publish directory: dist

Or drag-and-drop the dist/ folder to Netlify.

Deploy to GitHub Pages

# Build
npm run build

# Deploy (requires gh-pages package)
npm install -D gh-pages
npx gh-pages -d dist

Custom Domain Setup

For NeuralDraft.net:

1. Add your domain in your hosting provider (Vercel/Netlify)
2. Configure DNS records as instructed
3. SSL is automatic with both providers

Project Structure

neural-draft/
├── public/
│   └── favicon.svg           # Neural Draft logo
├── src/
│   ├── components/
│   │   ├── Navbar.jsx        # Global navigation
│   │   ├── Navbar.css
│   │   ├── Footer.jsx        # Global footer
│   │   └── Footer.css
│   ├── pages/
│   │   ├── HomePage.jsx      # Main landing (/)
│   │   ├── HomePage.css
│   │   ├── KryptoClawPage.jsx # KryptoClaw (/kryptoclaw)
│   │   ├── KryptoClawPage.css
│   │   ├── VibeZPage.jsx     # VibeZ (/vibez)
│   │   └── VibeZPage.css
│   ├── styles/
│   │   ├── design-system.css  # CSS variables & tokens
│   │   └── global.css         # Global styles & utilities
│   ├── App.jsx               # Router setup
│   └── main.jsx              # Entry point
├── index.html
├── package.json
├── vite.config.js
├── vercel.json               # Vercel config
├── netlify.toml              # Netlify config
└── README.md

Pages Overview

Home (/)

• Hero with mission statement
• Company overview
• Product lineup (KryptoClaw, VibeZ, future products)
• Core values / design philosophy
• Newsletter CTA
• Contact / social links

KryptoClaw (/kryptoclaw)

• Hero with "Security-First Crypto Wallet" tagline
• Interactive phone mockup
• Hardware security overview (HSK, Secure Enclave)
• Multi-chain features (ETH/BTC/SOL)
• DEX, NFT, address protection, clipboard guard features
• Theme marketplace preview
• TestFlight beta CTA

VibeZ (/vibez)

• Coming soon hero with animated presence orbs
• "Real-time presence, modern privacy, AIM energy" tagline
• Feature previews
• Email signup for early access
• Live presence demo animation
• Social follow links

Customization

Adding New Pages

1. Create component in src/pages/NewPage.jsx
2. Add route in src/App.jsx:

<Route path="/newpage" element={<NewPage />} />

3. Add navigation link in src/components/Navbar.jsx

Modifying Design System

Edit src/styles/design-system.css to change:

• Color palette
• Typography scale
• Spacing system
• Animation timings

Adding New Components

Create in src/components/ following the existing pattern:

• Component file (.jsx)
• Styles file (.css)
• Import styles in component

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance Features

• Vite code splitting
• CSS variables for theming
• Optimized Framer Motion animations
• Lazy-loaded routes (can be added)
• Asset caching headers configured

License

Copyright © 2025 Neural Draft LLC. All rights reserved.

---

Built with precision by Neural Draft LLC.