SolCoder Landing Page

Award-winning retro-futuristic landing page for SolCoder - the AI-powered Solana development CLI.

🎨 Design

• Aesthetic: Retro terminal vibes with Solana purple-green gradients
• Framework: Astro (static-first, minimal JS)
• Styling: Tailwind CSS + custom terminal effects
• Performance: Lighthouse 95+ target
• Accessibility: WCAG 2.1 AA compliant

🚀 Quick Start

Prerequisites

• Node.js 18+ or 20+
• npm or pnpm

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

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

📁 Project Structure

/
├── public/
│   ├── fonts/           # Self-hosted fonts (add Fira Code, Space Grotesk)
│   ├── images/          # OG images, favicons
│   ├── videos/          # Demo videos
│   └── noise-texture.png # Background noise texture
├── src/
│   ├── components/      # Astro components (Hero, Features, etc.)
│   ├── layouts/         # Layout wrapper with SEO
│   ├── pages/           # Routes (index.astro)
│   ├── styles/          # Global CSS, terminal effects, animations
│   └── scripts/         # Client-side TypeScript (terminal simulator)
├── astro.config.mjs     # Astro configuration
├── tailwind.config.cjs  # Tailwind with Solana colors
└── netlify.toml         # Netlify deployment config

🎨 Design Tokens

Colors

/* Primary */
--solana-purple: #9945FF
--solana-green: #14F195
--deep-space: #0E0E0E

/* Supporting */
--cyan-info: #38BDF8
--amber-warn: #FBBF24
--pink-error: #FB7185

/* Text */
--slate-primary: #E6FFFA
--slate-secondary: #94A3B8
--slate-tertiary: #64748B

Fonts

• Monospace: Fira Code, JetBrains Mono (headers, terminals, code)
• Sans-serif: Space Grotesk, Inter (body copy)
• Retro: Press Start 2P, VT323 (special callouts)

✨ Features

9 Sections

1. Hero - ASCII banner with animated gradient headline
2. Problem - Old way vs SolCoder way split comparison
3. Vision - Roadmap timeline with progress bars
4. Features - 3x3 grid of core capabilities
5. Interactive Demo - Client-side terminal simulator
6. Social Proof - Stats, testimonials, awards
7. Contribution CTA - Open source community section
8. Getting Started - Installation guide with terminal
9. Footer - Multi-column links with ASCII logo

Visual Effects

• CRT Screen: Scanline overlay, subtle flicker
• Terminal Glow: Solana green glow on hover
• Typing Animation: Character-by-character text reveal
• Cursor Blink: Classic terminal cursor
• Scroll Animations: Intersection Observer-triggered fades
• Gradient Shifts: Animated purple-to-green backgrounds

Accessibility

• Semantic HTML5
• ARIA labels on interactive elements
• Keyboard navigation support
• High contrast mode support
• prefers-reduced-motion media queries
• Screen reader announcements

SEO

• Open Graph meta tags
• Twitter Card support
• JSON-LD structured data
• Canonical URLs
• Optimized meta descriptions
• Sitemap (auto-generated by Astro)

🖼️ Required Assets

Before deploying, add these assets to /public:

Fonts (self-hosted for performance)

/public/fonts/
├── FiraCode-Regular.woff2
├── FiraCode-Medium.woff2
├── FiraCode-Bold.woff2
├── SpaceGrotesk-Regular.woff2
├── SpaceGrotesk-Medium.woff2
└── PressStart2P-Regular.woff2

Download from:

• Fira Code: https://github.com/tonsky/FiraCode
• Space Grotesk: https://fonts.google.com/specimen/Space+Grotesk
• Press Start 2P: https://fonts.google.com/specimen/Press+Start+2P

Images

/public/images/
├── og-image-terminal.png      # 1200x630px (Open Graph)
├── twitter-card-gradient.png  # 1200x600px (Twitter Card)
└── favicon.svg                # SVG favicon

Favicons

/public/
├── favicon.svg
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
└── site.webmanifest

Generate favicons: https://realfavicongenerator.net/

Noise Texture

Create a subtle noise texture (200x200px) for the background:

# Using ImageMagick
convert -size 200x200 xc: +noise Random -colorspace Gray \
  -separate -threshold 50% -negate \
  /public/noise-texture.png

Or use an online generator: https://www.noisetexturegenerator.com/

📦 Deployment

Netlify (Recommended)

1. Connect Repository

   # Push to GitHub
   git init
   git add .
   git commit -m "Initial commit - SolCoder landing page"
   git remote add origin <your-repo-url>
   git push -u origin main

2. Deploy to Netlify

   • Go to https://app.netlify.com/
   • Click "Add new site" → "Import an existing project"
   • Connect your GitHub repo
   • Build settings are auto-detected from netlify.toml
   • Deploy!

3. Custom Domain (Optional)

   • Go to Site settings → Domain management
   • Add custom domain (e.g., solcoder.dev)
   • Configure DNS as instructed

Manual Deployment

# Build the site
npm run build

# Output will be in /dist
# Upload dist/ to any static hosting (Vercel, Cloudflare Pages, etc.)

🛠️ Development

Commands

npm run dev          # Start dev server (http://localhost:4321)
npm run build        # Build for production
npm run preview      # Preview production build locally
npm run format       # Format code with Prettier

Environment Variables

No environment variables required for static build.

Hot Reload

Astro supports hot module replacement (HMR). Save any file and see changes instantly.

🧪 Testing

Manual Testing Checklist

• All sections render correctly
• Animations trigger on scroll
• Interactive demo works (click prompts)
• Links navigate correctly
• Mobile responsive (test on real device)
• Dark mode works (native to design)
• Keyboard navigation functional
• Screen reader announces content

Performance Testing

# Build and preview
npm run build && npm run preview

# Open Chrome DevTools
# Run Lighthouse audit
# Target: 95+ on all metrics

Browser Testing

Test on:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile Safari (iOS)
• Chrome Mobile (Android)

📝 Content Updates

Updating Stats

Edit numbers in src/components/SocialProof.astro:

<div class="stat-value">2,847</div>  <!-- Update here -->
<div class="stat-label">Developers</div>

Adding Testimonials

Edit src/components/SocialProof.astro:

<div class="terminal-window max-w-3xl mx-auto">
  <div class="terminal-content">
    <p class="text-slate-primary mb-4">
      "Your testimonial here..."
    </p>
    <div class="text-sm text-solana-green font-mono">
      — Name, Title
    </div>
  </div>
</div>

Modifying Roadmap

Edit src/components/VisionSection.astro to update phase progress bars:

<div class="h-full bg-solana-green rounded-full" style="width: 100%"></div>
<!-- Change width percentage -->

🎯 Performance Targets

• First Contentful Paint: <1.2s
• Time to Interactive: <2.5s
• Total JS Bundle: <50KB (gzipped)
• Total CSS Bundle: <30KB (gzipped)
• Lighthouse Score: 95+ (all categories)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-update)
3. Commit changes (git commit -m 'Add amazing update')
4. Push to branch (git push origin feature/amazing-update)
5. Open a Pull Request

📄 License

MIT License - see LICENSE file for details

🔗 Links

• SolCoder Main Repo: https://github.com/solcoder/SolCoder
• Documentation: https://docs.solcoder.dev
• Discord: https://discord.gg/solcoder
• Twitter: https://twitter.com/solcoder

---

Built with 💜 by the Solana community using Astro