+-----------------------------------------------------------------------------------------+ | TARGET: WP_MNGR - RECOMMENDED DESIGN SYSTEM | +-----------------------------------------------------------------------------------------+ | | | PATTERN: Horizontal Scroll Journey | | Conversion: Immersive product discovery. High engagement. Keep navigation visible. 28,Bento Grid Showcase,bento, grid, features, modular, apple-style, showcase", 1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA, Floating Action Button or Bottom of Grid, Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark., Hover card scale (1.02), video inside cards, tilt effect, staggered reveal, Scannable value props. High information density without clutter. Mobile stack. 29,Interactive 3D Configurator,3d, configurator, customizer, interactive, product", 1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase, Inside Configurator UI + Sticky Bottom Bar, Neutral studio background. Product: Realistic materials. UI: Minimal overlay., Real-time rendering, material swap animation, camera rotate/zoom, light reflection, Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart. 30,AI-Driven Dynamic Landing,ai, dynamic, personalized, adaptive, generative", 1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop, Input Field (Hero) + 'Try it' Buttons, Adaptive to user input. Dark mode for compute feel. Neon accents., Typing text effects, shimmering generation loaders, morphing layouts, Immediate value demonstration. 'Show, don't tell'. Low friction start.| | CTA: Floating Sticky CTA or End of Horizontal Track | | Sections: | | 1. 1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer| | | | STYLE: Cyberpunk UI | | Keywords: Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, | | matrix, tech noir | | Best For: Gaming platforms, tech products, crypto apps, sci-fi applications, | | developer tools, entertainment | | Performance: ÔÜá Moderate | Accessibility: ÔÜá Limited (dark+neon) | | | | COLORS: | | Primary: #0F172A | | Secondary: #1E293B | | CTA: #22C55E | | Background: #020617 | | Text: #F8FAFC | | Notes: Dark bg + green positive indicators | | | | TYPOGRAPHY: Orbitron / Exo 2 | | Mood: crypto, web3, futuristic, tech, blockchain, digital | | Best For: Crypto platforms, NFT, blockchain, web3, futuristic tech | | Google Fonts: https://fonts.google.com/share?selection.family=Exo+2:wght@300;400;500;600;700|Orbitron:wght@400;500;600;700| | CSS Import: @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;4...| | | | KEY EFFECTS: | | Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before | | overlay), terminal fonts | | | | AVOID (Anti-patterns): | | Light mode default + No transaction status | | | | PRE-DELIVERY CHECKLIST: | | [ ] No emojis as icons (use SVG: Heroicons/Lucide) | | [ ] cursor-pointer on all clickable elements | | [ ] Hover states with smooth transitions (150-300ms) | | [ ] Light mode: text contrast 4.5:1 minimum | | [ ] Focus states visible for keyboard nav | | [ ] prefers-reduced-motion respected | | [ ] Responsive: 375px, 768px, 1024px, 1440px | | | +-----------------------------------------------------------------------------------------+