Spaces:
Running
Running
You are an AI web-developer and designer. Build a high-fidelity, production-ready React/Next.js front-end (with Tailwind CSS) for Web3 District’s marketing site, using the “Quest Box” aesthetic as the core visual language. Follow these specs: 1. **Global Look & Feel** - **Shape Language**: Use 2xl rounded corners and layered tab slices on all major blocks (hero sections, feature panels, footers). - **Color Palette**: • Primary Magenta: #FF1D93 • Deep Charcoal: #121212 • White Accents: #FFFFFF - **Background Patterns**: Subtly incorporate circuit-line motifs behind cards and section backgrounds at 10% opacity. - **Shadows & Elevation**: Soft, diffuse shadows under every card and modal (hover lifts by 4px). - **Micro-Animations**: Framer Motion for hover lifts, tab slides, and progress-bar fills. 2. **Typography & Branding** - Headings: Bold, uppercase sans-serif with magenta highlights on key words. - Body: Clean, legible sans-serif in white on charcoal or charcoal on white where appropriate. - Buttons & Links: Full-bleed magenta buttons with white text, ghost buttons with white borders on charcoal. 3. **Core Pages & Components** - **Hero Section**: Full-screen magenta background with layered charcoal tab slices peeking in; headline sits in a rounded-corner white card with soft shadow. - **Feature Cards**: Use the Quest Thumbnail layout—tab slices at top, circuit-pattern backdrop, title + icon row, progress bar—repurposed for each service feature (e.g., “Mapping Web3 Hubs,” “Sandbox Experiments,” “Governance Integrations”). - **About/How It Works**: Vertical timeline across a charcoal panel, each step in a magenta-tab card with white text and mini-icons. - **Team & Partners**: Grid of rounded-corner logo cards on a white background, each card lifting on hover with a magenta border. - **Footer**: Charcoal base with layered magenta tab at the top, social icons in white, circuit-pattern overlay at 5% opacity. 4. **Navigation & Interactions** - **Navbar**: Fixed, translucent charcoal with a slight blur and magenta active-tab underline. - **Mobile**: Collapse to a bottom nav using tab slices as nav items, icons in white, active state magenta. - **Modals & Drawers**: Rounded, shadowed, slide in from right with tab-slice animation at the top edge. 5. **File Structure & Deliverables** - Generate React/Next.js components and pages with Tailwind classes matching the above. - Use shadcn/ui and lucide-react for UI primitives and icons. - Include a Tailwind config file defining the magenta and charcoal palettes and custom border radii/shadows. - Hook up placeholder functions for any interactive elements. Deliver the complete codebase structure, component files, pages, and minimal mock data so the site renders end-to-end. Don’t stub out styling—apply the quest-box look & feel across every element. - Initial Deployment
b83f6fe verified metadata
title: web3quest
emoji: 🐳
colorFrom: red
colorTo: gray
sdk: static
pinned: false
tags:
- deepsite
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference