SPCX Galaxy website - v0 by Vercel

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>SPCX Galaxy 🚀</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { margin: 0; font-family: Arial, sans-serif; background: #000; color: #fff; } .hero { text-align: center; padding: 100px 20px; background: radial-gradient(circle at top, #3b1b6b, #000); } h1 { font-size: 48px; margin-bottom: 10px; } p { color: #bbb; max-width: 600px; margin: 0 auto; } .buttons { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .btn { padding: 12px 20px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; font-size: 16px; font-weight: bold; transition: all 0.3s ease; } .primary { background: #7c3aed; color: white; border: none; } .primary:hover { background: #6d28d9; } .secondary { background: transparent; border: 1px solid #555; color: white; } .secondary:hover { background: rgba(255, 255, 255, 0.1); } /* Social Buttons Color Styling */ .btn-x { background: #111; color: white; border: 1px solid #333; } .btn-x:hover { background: #000; border-color: #555; } .btn-telegram { background: #24A1DE; color: white; border: none; } .btn-telegram:hover { background: #1e8ec3; } .section { padding: 60px 20px; max-width: 1000px; margin: auto; text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .card { background: #111; padding: 20px; border-radius: 10px; border: 1px solid #222; } .roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } footer { text-align: center; padding: 30px; color: #666; font-size: 14px; } </style> </head> <body> <div class="hero"> <h1>SPCX Galaxy 🚀</h1> <p>From memes to Mars 🌕➡️🔴 Community-driven space experiment built for the next crypto era.</p> <div class="buttons"> <button class="btn primary">Buy $SPCX</button> <button class="btn secondary">View Chart</button> <a href="https://x.com/SPCXGalaxy" target="_blank" class="btn btn-x"><i class="fa-brands fa-x-twitter"></i> X</a> <a href="https://t.me/Spacxcoinofficial" target="_blank" class="btn btn-telegram"><i class="fa-brands fa-telegram"></i> Telegram</a> </div> </div> <div class="section"> <h2>Project Stats</h2> <div class="grid"> <div class="card">👥 Community<br><b>10K+</b></div> <div class="card">⛓ Chain<br><b>Solana / EVM</b></div> <div class="card">🔒 Liquidity<br><b>Locked</b></div> <div class="card">🚀 Mission<br><b>Mars Ready</b></div> </div> </div> <div class="section"> <h2>Mission Overview</h2> <p> SPCX Galaxy is a meme-based crypto experiment inspired by space exploration. Built for community growth, engagement, and fun decentralized movement. </p> </div> <div class="section"> <h2>Roadmap</h2> <div class="roadmap"> <div class="card"><b>Phase 1</b><br>Launch Sequence Initiated</div> <div class="card"><b>Phase 2</b><br>Leaving Earth Orbit</div> <div class="card"><b>Phase 3</b><br>Mars Landing</div> <div class="card"><b>Phase 4</b><br>Galaxy Expansion</div> </div> </div> <div class="section"> <h2>Tokenomics</h2> <div class="grid"> <div class="card">🔥 Liquidity Locked</div> <div class="card">🌐 Community Driven</div> <div class="card">🚀 Fair Launch Model</div> </div> </div> <div class="section"> <h2>Join the Galaxy</h2> <p>Be early. Be space-ready.</p> <div class="buttons"> <a href="https://t.me/Spacxcoinofficial" target="_blank" class="btn btn-telegram"><i class="fa-brands fa-telegram"></i> Join Telegram</a> <a href="https://x.com/SPCXGalaxy" target="_blank" class="btn btn-x"><i class="fa-brands fa-x-twitter"></i> Follow on X</a> </div> </div> <footer> © 2026 SPCX Galaxy. All rights reserved. </footer> </body> </html>

Show full message

16d ago

I'll convert this HTML landing page into a polished Next.js application with proper components and styling.

Now I'll create the SPCX Galaxy landing page with proper space-themed styling. Let me update the globals.css for the dark space theme and create the page components.

Now let me create the main page with all the components:

I've converted your SPCX Galaxy HTML landing page into a fully-featured Next.js application with proper component architecture. The design includes:

Hero Section: Space-themed with animated stars background, radial gradient from purple, and buttons for Buy $SPCX, View Chart, X (Twitter), and Telegram
Stats Section: Four cards showing Community (10K+), Chain (Solana/EVM), Liquidity (Locked), and Mission (Mars Ready) with hover effects
Mission Overview: Clean description of the project
Roadmap: Interactive phase cards with active state indicator on Phase 1 and progress bars
Tokenomics: Three feature cards highlighting Liquidity Locked, Community Driven, and Fair Launch Model
CTA Section: Join the Galaxy section with Telegram and X social links
Footer: Simple copyright notice

The theme uses a dark space aesthetic with purple as the primary brand color and cyan/teal as the accent for Telegram buttons, matching your original design while adding polish with hover states, transitions, and subtle animations.

16d ago

Footer component

WorkingCreating footer component

Creating footer component

I'll convert this HTML landing page into a polished Next.js application with proper components and styling.

Now I'll create the SPCX Galaxy landing page with proper space-themed styling. Let me update the globals.css for the dark space theme and create the page components.

Now let me create the main page with all the components:

I've converted your SPCX Galaxy HTML landing page into a fully-featured Next.js application with proper component architecture. The design includes:

Hero Section: Space-themed with animated stars background, radial gradient from purple, and buttons for Buy $SPCX, View Chart, X (Twitter), and Telegram
Stats Section: Four cards showing Community (10K+), Chain (Solana/EVM), Liquidity (Locked), and Mission (Mars Ready) with hover effects
Mission Overview: Clean description of the project
Roadmap: Interactive phase cards with active state indicator on Phase 1 and progress bars
Tokenomics: Three feature cards highlighting Liquidity Locked, Community Driven, and Fair Launch Model
CTA Section: Join the Galaxy section with Telegram and X social links
Footer: Simple copyright notice

16d ago

Footer component

WorkingCreating footer component

Creating footer component