Dynamic Bento Events demo
Dynamic Bento Events

A modern landing page style built on organized bento-style modular card grids with rounded corners and dynamic spacing, popular for event platforms and SaaS websites.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 7.1 KB · 955 words
# System Prompt: Build "Bento Eventos Dinâmicos" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt for an event discovery and ticketing platform called **Bento Eventos Dinâmicos**. Theme: dynamic, organized, engaging bento-grid event discovery. Era: 2026+ live experiences. All user-facing copy must be written in **English**.

**Required Sections:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling must live in a dedicated `style.css` file. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target all design properties, layouts, and states exclusively via class or ID selectors.
- Keep HTML semantic and clean; changing the site's look must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` and theme classes:
- **Colors:** `--primary: #8A2BE2` (Vibrant Purple), `--secondary: #FF8C00` (Vibrant Orange), `--accent-lime: #32CD32`, `--accent-blue: #00BFFF`, `--accent-pink: #FF00CC`, `--bg-primary: #fefefe` (never pure `#ffffff`), `--bg-secondary: #F0F0F0`, `--text-primary: #333333`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce in all themes.
- **Radius & Shadows:** `--radius-sm`, `--radius-md: 10px`, `--radius-lg`, `--shadow-sm`, `--shadow-md: 0 4px 10px rgba(0,0,0,0.08)`.
- **Spacing & Motion:** `--spacing-gap`, `--transition-fast`, `--transition-normal: 0.4s ease-in-out`, `--ease-standard`.
- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
- Define dark mode tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class selector. Dark palette: deep charcoal backgrounds derived from `#333333` with the vibrant purple/orange/lime/blue/pink accents adjusted for contrast.
- Theme switching must require zero HTML restructuring; persist user choice via `localStorage` with `prefers-color-scheme` fallback on first visit.
- Include a visible theme toggle with correct `aria-pressed` and `aria-label` states.

**1.4 Flexbox Layout & Mobile-First**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
- The bento grid must collapse gracefully to a single column on mobile; no horizontal scrolling at any viewport width.

**1.5 Framework**
- Use clean custom CSS (optionally structured with Tailwind's `@layer`/`@apply` directives). All utilities must map back to CSS variables and reusable class names (`.btn`, `.card`, `.bento-event-card`, `.event-image`, `.event-detail-hover`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Montserrat** (headings and body) via Google Fonts `<link>` and bind to `--font-base`.
- Use **Google Material Symbols** for all icons — minimalist event category icons (music, sports, arts, food, tech, comedy), UI icons, and decorative icons. **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.
- Hover: brightness/shadow shift with `cursor: pointer`. Focus: distinct focus ring from CSS variables. Active: `transform: scale(0.97)`.
- Loading: disables interaction, renders an animated Google Icon spinner without distorting dimensions.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Primary CTA buttons use `--primary` with white text; secondary CTAs use `--secondary`. `.btn-danger` must be visually distinct in both themes.

**2.2 Cards (Bento Event Cards & Feature Cards)**
- Default: Flexbox layout, `--bg-secondary` or `--bg-primary` surfaces, `--radius-md`, `--shadow-sm`, subtle borders.
- Hover: elevation shift plus `transform: translateY(-2px)`; bento event cards must reveal an `.event-detail-hover` overlay (date, venue, price, "Get Tickets" link) with a smooth `var(--transition-normal)` transition.
- Focus-within: card border highlights when a child link/button receives focus.
- Include a skeleton shimmer class and an empty state (Google Icon + guidance text) for event card slots.

**2.3 Forms (Newsletter signup in Footer/Final CTA, FAQ search if present)**
- Account for empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, error text, error icon), disabled, and read-only states.
- Structure: flex container wrapping label, input, and dedicated error feedback container with `aria-live="polite"`.

**2.4 FAQ Accordion / Modals**
- FAQ items open/close with animated CSS transitions; keyboard operable (Enter/Space), correct `aria-expanded`/`aria-controls`.
- If any modal is used: centered flex container, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click closing, animated opening/closing states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow; bento grid reflows at tablet and mobile breakpoints.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.
- **Accessibility:** WCAG-sufficient contrast in light AND dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback.
- **Mandatory visual feedback** on every click, hover, and submission.
- **Section content guidance:**
  - **Hero:** headline about discovering live events, subheadline, primary CTA ("Explore Events") + secondary CTA, and a mini bento grid of 3–4 event teaser cards with category icons.
  - **Features:** 3 cards (e.g., Smart Discovery, Seamless Ticketing, Social Sharing) with Google Icons.
  - **How It Works:** 3 numbered steps with icons and connecting visual flow.
  - **Testimonials:** 3 quotes with names/roles, star ratings via Google Icons.
  - **Pricing:** 3 tiers (Free, Pro, VIP) with a highlighted middle tier using `--primary`.
  - **FAQ:** 5–6 accordion items with real, relevant copy.
  - **Final CTA:** full-width vibrant gradient band (purple → orange) with white text and a high-contrast button.
  - **Footer:** brand, secondary link columns (Discover, Company, Support), social icons (Google Material Symbols), newsletter form, copyright.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond one deferred entry-point reference.
- **Naming:** One consistent BEM convention (e.g., `.bento-event-card__image`, `.bento-event-card--featured`) across the entire deliverable — never mix conventions.
- **No lorem ipsum:** write real, polished English copy for every section; placeholders only where content is genuinely unspecified.
- Generate the complete final code immediately, on the first attempt.