PROMPT_008 / CARDS

STOP SHIPPING FOUR IDENTICAL CARDS.

An editorial bento layout that mixes tile sizes and leaves deliberate negative space.

BEST FOR: Feature sections that currently read as a template.
DIFFICULTY: Intermediate
TOOLS: Lovable · v0 · Bolt

USE THIS IN LOVABLE

Rebuild this feature section as an asymmetric bento grid.

Use a 12-column grid with mixed spans: one large interactive tile (7 columns, tall), two standard tiles (5 columns), one wide thin tile (12 columns, short) and one small utility tile. Vary the internal composition of each tile — do not repeat the same icon-title-paragraph pattern.

Radius 24px for large panels and 18px for smaller ones so not everything is equally rounded. Hover lifts 4px with a brighter border. Leave at least one grid cell intentionally empty as negative space. Collapse to a single column on mobile with the large tile first.

---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.

RECOMMENDED INTERACTIONS.

CARD_01

INTERACTION_006CSS

Premium Card Lift

4px elevation with border brightening.

Cards / LightView

SPOTLIGHT

Move the cursor across this surface.

INTERACTION_007CSS + JS

Mouse Spotlight Card

A soft radial light follows the cursor across the surface.

Cards / LightView

RELATED PROMPTS.

All prompts

PROMPT_001 / LANDING PAGES

MAKE MY WEBSITE FEEL EXPENSIVE.

Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.

premiumlanding-pagemicrointeraction

Preview

PROMPT_002 / LANDING PAGES

BUILD A LANDING PAGE THAT LOOKS HIRED.

A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.

premiumlanding-pagedark-ui

Preview

PROMPT_003 / BUTTONS

GIVE MY CTA GRAVITY.

A reusable cursor-following button component with proper touch and reduced-motion fallbacks.

buttonmousepremium

Preview