- Project Name: COED Processor Landing Page
- Type: Multi-page marketing website with e-commerce functionality ๐
- Core Functionality: Showcase the next-gen processor with immersive visuals, technical breakdowns, product catalog, and shopping cart ๐๏ธ
| Page | Description |
|---|---|
| ๐ index.html | Landing page with hero, features, and architecture breakdown |
| ๐ buy.html | Product catalog with 5 processor models and shopping cart |
- Header: Fixed navigation with logo and CTA button ๐
- Hero Section: Full-bleed immersive header with processor showcase ๐
- Features Section: Grid of technical specifications ๐
- Breakdown Section: Chip internal architecture visualization ๐ฌ
- Footer: Minimal footer with links ๐
| Device | Breakpoint |
|---|---|
| ๐ฒ Mobile | < 768px |
| ๐ฒ Tablet | 768px - 1024px |
| ๐ฅ๏ธ Desktop | > 1024px |
| Color Role | Color | Hex Code |
|---|---|---|
| โซ Background | Obsidian Black | #000000 |
| ๐ฃ Primary Accent | Neon Electric Purple | #9806f9 |
| ๐ช Secondary Accent | Deep Purple | #1a0524 |
| โช Text Primary | White | #ffffff |
| โช Text Secondary | Light Gray | #a0a0a0 |
| โฌ Border | Semi-transparent white | rgba(255, 255, 255, 0.1-0.15) |
- Primary Font: Space Grotesk (Google Fonts) โจ
- Monospace Font: JetBrains Mono (Google Fonts) ๐ป
- Headline Sizes:
- H1: 72px (desktop), 48px (mobile) ๐
- H2: 48px (desktop), 32px (mobile) ๐
- H3: 24px ๐
- Body: 16px ๐
- Technical Data: 14px monospace ๐ข
- Section padding: 120px vertical (desktop), 60px (mobile) ๐
- Grid gap: 32px ๐ฒ
- Container max-width: 1400px ๐
- Glassmorphism:
backdrop-filter: blur(30px),background: rgba(0,0,0,0.6)๐ฎ - Glow Effects: box-shadow with purple (#9806f9) ๐
- Plasma Background: Animated gradient orbs with blur ๐
- Energy Pulse: CSS animations for processor visual โก
- Logo (text-based "COED") ๐ท๏ธ
- "Pre-Order Now" CTA button ๐
- Glassmorphism background ๐ซ๏ธ
- Large headline: "THE FUTURE OF COMPUTING" ๐ซ
- Subheadline: Technical tagline ๐
- Central processor image with energy pulse animation โก๐ฏ
- Floating purple orbs in background ๐ฃโจ
- 4-column grid (desktop), 2-column (tablet), 1-column (mobile) ๐ข
- Glass cards with technical specs ๐
- NPU icon decorations ๐จ
- Chip architecture image ๐ผ๏ธ
- Glowing glass panel frame ๐ฒ
- Technical annotations ๐
- Background: #9806f9 ๐ฃ
- Hover: Glow effect, slight scale ๐โจ
- Text: White, bold ๐ค
- Smooth scroll navigation ๐ฑ๏ธโก๏ธ๐
- Animated plasma background (CSS keyframes) ๐
- Energy pulse animation on processor image โก๐ฌ
- Hover effects on cards ๐โจ
- Responsive layout switching ๐ฑ๐๐ฅ๏ธ
- Add to cart functionality ๐
- Cart quantity management โโ
- Persistent cart storage (localStorage) ๐พ
- Toast notifications for user feedback ๐
| Animation | Description | Duration |
|---|---|---|
| ๐ Plasma orbs | Continuous floating animation | 20s loop |
| โก Energy pulse | Subtle scale/glow pulse | 3s loop |
| ๐ Cards | Fade-in on scroll | CSS only |
| ๐ Buttons | Scale and glow on hover | CSS only |
| Model | Category | Neural Cores | Processing Cores | Clock Speed | Memory Bandwidth | TDP | Price |
|---|---|---|---|---|---|---|---|
| ๐ฃ COED X1 | Entry Level | 64 TOPS | 128 Hybrid | 8.5 THz | 1.8 TB/s | 650W | 2,499ใใซ |
| ๐ฃ COED ELITE | High Performance | 96 TOPS | 192 Hybrid | 10.2 THz | 2.1 TB/s | 750W | 3,499ใใซ |
| ๐ข COED LIGHT | Energy Efficient | 48 TOPS | 96 Hybrid | 6.4 THz | 1.2 TB/s | 280W | 1,799ใใซ |
| ๐ก COED QUANTUM | Quantum Ready | 160 TOPS | 320 Hybrid | 15.6 THz | 3.2 TB/s | 1,200W | 7,999ใใซ |
| ๐ด COED NEURAL | AI Supremacy | 256 TOPS | 512 Hybrid | 18.2 THz | 4.8 TB/s | 1,500W | 12,499ใใซ |
- Add to Cart: One-click add to cart from product cards ๐
- Quantity Management: Increase/decrease item quantities โโ
- Remove Items: Remove products from cart ๐๏ธ
- Clear Cart: Remove all items at once ๐๏ธ๐
- Persistent Storage: Cart data saved to localStorage ๐พ
- Cart Count: Real-time item count in navigation ๐ข
- Cart Summary: Subtotal, shipping, and total calculations ๐ฐ
- Free Shipping: Automatic free shipping on all orders ๐
- Toast Notifications: Feedback on cart actions ๐
๐ก Pro Tip: This landing page is designed to captivate visitors with stunning visuals and smooth animations! Visit the buy page to explore our range of processors and experience the full e-commerce functionality! ๐๐