All templates
Sections
9
Accent
#E11D9B
Tier
free
Included Sections
Navbar
Hero
Game Modes
Live Battle
Trailer
Merch
Community
CTA
Footer
Gaming
Robo-Clash
Robotic Clash live areana and show the techology of each apponent. The battle between the two dominent industry with full stack web plugin
2 of 2 free template prompts left
Generation Prompt
3,514 characters · paste into your AI editor
robo-clash.prompt.md
# Production Prompt: Cybernetic Clash Esports Landing Page
Act as an elite frontend engineer. Build a high-performance, responsive landing page using **Vite + React + TypeScript + Tailwind CSS + Framer Motion + Lucide-react**.
### Core Technology Stack
- **Framework:** React 18 (Vite) with TypeScript.
- **Styling:** Tailwind CSS (JIT mode).
- **Animations:** Framer Motion (Scroll-linked, stagger children, hover states).
- **Icons:** Lucide-react.
- **Global CSS:**
- `html { scroll-behavior: smooth; }`
- `body { background: #070710; color: #e2e8f0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }`
### Design System & Aesthetics
- **Color Palette:**
- Background: `#070710` (Deep Void).
- Primary (Tesla): `#00F3FF` (Electric Cyan).
- Secondary (China Industry): `#FF003C` (Neon Crimson).
- Accents: `#1A1A2E` (Card BG), `#FFFFFF` (Text).
- **Typography:**
- Display: `Orbitron` (Weights: 600, 700, 900) for headings.
- Body: `Rajdhani` (Weights: 400, 500, 700) for UI/content.
- **UI Style:** Cyberpunk minimalism, glassmorphism, neon borders (`border-opacity-20`), and scanline overlays.
### Section-By-Section Implementation
#### 1. Navbar
- **Layout:** Sticky, `backdrop-blur-lg`, `border-b border-white/10`.
- **Components:** Logo (Lucide `Cpu` icon + "ROBO-CLASH"), Nav links (Tournaments, Roster, Stats), "Watch Live" CTA button with `hover:shadow-[0_0_15px_#00F3FF]`.
#### 2. Hero Section
- **Visual:** Split-screen layout. Left: Tesla Optimus (Blue glow). Right: Unitree G1/China Humanoid (Red glow).
- **Content:** H1 "WEST VS EAST: THE SILICON DUEL". Subtext: "Reviewing tech to enhance the robotic world."
- **Images:**
- Tesla: `https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=2070`
- China Industry: `https://images.unsplash.com/photo-1531746790731-6c087fecd05a?q=80&w=2012`
- **Animation:** `initial={{ x: -100, opacity: 0 }}` for Tesla, `x: 100` for China.
#### 3. Tournaments
- **Layout:** 3-column grid of cards.
- **Card Design:** `bg-[#1A1A2E]`, `border border-white/5`, hover scale.
- **Data:** "Neural Link Open", "Shanghai Tech Summit", "Giga-Factory Brawl".
- **Icons:** Lucide `Trophy`, `Calendar`.
#### 4. Roster (The Combatants)
- **Feature:** Interactive cards for **Tesla Optimus Gen 2** vs. **Unitree G1**.
- **Details:** Tech specs (Actuators, AI Model, Battery).
- **Visual:** Use `framer-motion` LayoutId for smooth expansion on click.
#### 5. Stats & Tech Review
- **Layout:** Horizontal flex with animated counters.
- **Metrics:** "Processing Power (TFLOPS)", "Torque Density", "Degrees of Freedom".
- **Comparison:** Side-by-side bar charts using Tailwind widths.
#### 6. CTA & Footer
- **CTA:** Full-width section, `bg-gradient-to-r from-cyan-900/20 to-red-900/20`. Button: "JOIN THE EVOLUTION".
- **Footer:** 4-column layout. Socials (Lucide `Twitter`, `Github`, `Youtube`). Copyright "© 2024 Robo-Clash Arena".
### Animations & Micro-Interactions
- **Scroll Reveal:** Use `whileInView` for all sections with `viewport={{ once: true }}`.
- **Hover Effects:** `scale: 1.05` on cards; `filter: brightness(1.2)` on robot images.
- **Loading:** A custom SVG path animation of a circuit board.
### Technical Requirements
- **Responsive:** Mobile-first. Stacked hero on `< 768px`.
- **Performance:** Use `React.memo` for static cards. Optimize images with `object-cover`.
- **Code Quality:** Clean TypeScript interfaces for Robot and Tournament objects. Tailwind classes ordered by `prettier-plugin-tailwindcss`.