Lumina SaaS Landing Page

=== ARCHITECTURE & VISION ===
A vibrant Neo-Brutalist SaaS landing page utilizing a dominant #ffe17c yellow, deep charcoal #171e19, and sage #b7c6c2 accents. It features high-contrast black borders, hard offset shadows, and bold geometric typography to convey professional confidence with a playful edge.

=== STYLE & DIRECTION ARTISTIQUE ===
• description: The style is a modern take on Neo-Brutalism. Typography pairs the high-impact 'Cabinet Grotesk' (weights 400-800) for headings with 'Satoshi' for readability. The palette uses #ffe17c as a primary background, balanced by #171e19 charcoal and #b7c6c2 sage. Visual elements are defined by 2px solid black borders and 4px-8px hard shadows (no blur). Micro-interactions involve 'translate' effects on hover where buttons move 4px to 'fill' their shadow space.
• prompt: Create a design based on Neo-Brutalist principles. Colors: Primary #ffe17c (Yellow), Background #171e19 (Charcoal), Accent #b7c6c2 (Sage), UI #ffffff (White), Text #000000 (Black). Typography: Headings in 'Cabinet Grotesk' (Extrabold, tracking-tighter), Body in 'Satoshi' (Medium, 500). UI Elements: Use 2px solid black borders on all cards, buttons, and sections. Implement 'Hard Shadows' using box-shadow: 4px 4px 0px 0px #000000 for standard elements and 8px 8px 0px 0px #000000 for large containers. Buttons should have a hover state that transforms: translate(4px, 4px) and removes the shadow to simulate a physical press. Include a 32px x 32px radial dot pattern (opacity 10%) on primary yellow backgrounds.

=== STRUCTURE & SECTIONS ===
• description: A vertically stacked landing page with high-contrast section transitions. It moves from a high-energy yellow hero to a dark charcoal social proof bar, followed by white/yellow feature grids and a dark-mode 'how it works' flow.
• prompts: [{"part":"Navigation","prompt":"Fixed header at top-0, h-20, background #ffe17c, border-b-2 border-black. Left: Logo with a 10x10 black square icon containing a #ffe17c bolt. Center: Horizontal links in bold Satoshi. Right: 'Start Free Trial' button (Black background, white text, 2px border, hard shadow)."},{"part":"Hero Section","prompt":"Two-column grid on #ffe17c background with radial dot pattern. Left column: Badge 'NEW: AI Content Assistant 2.0' (White, pill-shaped, 2px border). Heading: 'Cabinet Grotesk' 8xl, black, with one keyword using -webkit-text-stroke: 2px black and transparent fill. CTA group: Primary black button with 8px hard shadow, secondary white button with 4px hard shadow. Right column: Browser mockup (White, 2px border, 12px hard shadow) showing a dashboard with revenue charts and sage-colored accent panels."},{"part":"Social Proof Marquee","prompt":"Full-width bar, background #171e19, border-b-2 border-black. Contains a continuous horizontal marquee of brand names (ACME, GLOBEX, etc.) in Cabinet Grotesk, color #b7c6c2, 50% opacity, moving infinitely at a slow linear pace."},{"part":"Problem vs Solution","prompt":"White background section. Two large 3xl-rounded cards side-by-side. Card A (Problem): #f4f4f5, 2px dashed gray border, 70% opacity. Card B (Solution): #ffe17c, 2px solid black border, 8px hard shadow. Both cards use bold lists with custom check/x icons."},{"part":"Feature Grid","prompt":"Background #ffe17c, border-y-2 border-black. 3-column grid of white cards. Each card: 2px border, 4px hard shadow. Top of card features a 16x16 icon box in #b7c6c2 that turns #ffe17c on hover. Headings are Cabinet Grotesk 2xl."},{"part":"How It Works","prompt":"Dark mode section (Background #171e19). 3-step horizontal flow. Steps are marked by large 24x24 circles with 4px colored 'glow' borders (Sage, Yellow, White). Steps are connected by a dark gray #272727 horizontal line."},{"part":"Use Case Personas","prompt":"White background. 3-column bento-style grid. Card 1: Sage (#b7c6c2). Card 2: Yellow (#ffe17c) with 8px hard shadow. Card 3: Dark Gray (#272727) with white text. Each card features a white 'pill' badge at the top indicating the user type."},{"part":"Testimonials","prompt":"Background #b7c6c2. Grid of 3 white cards. Unique styling: Cards have asymmetric corner rounding (Top-Right and Bottom-Left are 3xl, Top-Left and Bottom-Right are 2px). Includes a 5-star rating in #ffbc2e yellow."},{"part":"Final CTA & Footer","prompt":"Final CTA on #ffe17c with large centered heading. Footer in #171e19 with 4 columns. Social icons are 10x10 squares (#272727) with light gray borders that turn Yellow/Black on hover."}]

=== COMPOSANTS CLÉS ===
• {"component":"Neo-Brutalist Push Button","description":"A high-contrast button that visually 'depresses' when hovered or clicked.","prompt":"Implementation: background-color: #000; color: #fff; padding: 1rem 2rem; border: 2px solid #000; border-radius: 0.75rem; box-shadow: 8px 8px 0px 0px #000; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); On Hover: transform: translate(4px, 4px); box-shadow: 4px 4px 0px 0px #000;"}
• {"component":"Browser Mockup Dashboard","description":"A stylized application UI container for marketing visuals.","prompt":"Implementation: Background white, border 2px solid black, border-radius 1rem, shadow 12px 12px 0px black. Header bar: background black, contains three small colored circles (Red #ff5f57, Yellow #febc2e, Green #28c840). Content area uses a grid layout with sage #b7c6c2 and charcoal #171e19 internal cards."}

Superdesign UI · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.