Uilora Glow Cards
Ultra-dark feature section with a large gradient '700+' headline stat and a 2×2 grid of glassmorphic cards. Each card has a unique per-card colored glow blob that intensifies on hover, plus an accent gradient top-border line.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Powerful features, beautiful by default | Section heading in Georgia serif, below the large stat. |
| description | string | Every Uilora component is crafted to be drop-in ready… | Subtitle in zinc-400 below the heading. |
| accentColor | string | #34d399 | Hex accent used for the '700+' gradient stat and for the first card's glow color. The other 3 cards use fixed glow colors (cyan, orange, violet). |
When to Use
Best for dark-themed SaaS pages, AI/developer tool homepages, and any product that wants a futuristic, high-tech feel. The glow cards communicate distinct feature categories with unique color identities.
Best Practices
The dark gradient background (#07070f → #0e0e1a) requires the page to also be dark for seamless blending. Use bright accent colors (emerald, cyan, blue) — the glow effect relies on saturation. Avoid desaturated accents like gray or beige.
Why This Component Matters
Per-card unique glow colors create a visual hierarchy and memorability — each card has its own 'personality'. The gradient top-border line and glow blob work together to create a premium glass-card effect without any actual CSS backdrop-filter issues on older browsers.
FAQ
QCan I change the per-card glow colors?
Yes — in the `cards` array, each card object has a `glow` property. Card 0 uses `accentColor` by default; cards 1-3 use fixed colors (#22d3ee cyan, #fb923c orange, #a78bfa violet). Update any of these to your preferred hex values.
QHow does the glass card effect work?
Each card has `background: rgba(255,255,255,0.04)`, `border: 1px solid rgba(255,255,255,0.07)`, and `backdropFilter: blur(12px)`. The glow blob is an absolutely positioned div with `filter: blur(44px)` and `overflow-hidden` on the card clips it.
QHow does the hover lift work?
Framer Motion's `whileHover={{ y: -4 }}` translates the card 4px upward with a fast `cubic-bezier(0.22, 1, 0.36, 1)` ease. Only `transform` is animated — no layout properties.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.