## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060911-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060887-full.webp
- Component on Kage: https://kage.design/component/lovable-footer

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original footer for that product—not a literal recreation of this reference.

## Build this section
Create a large, responsive website footer composed of a softly rounded, warm off-white navigation panel placed over a saturated, blurred multi-colour gradient background. The footer should feel calm and editorial inside the panel, while the surrounding colour field adds energy and a distinctive closing moment to the page.

### Design language

- **Overall composition:** Treat the footer as a prominent contained panel rather than a full-bleed block. Center it within the page with a maximum width of approximately 1120–1200px. Leave visible gradient around all sides, especially below the panel. Use a footer section with generous vertical padding so the panel has room to breathe.
- **Background:** Use an abstract, non-representational gradient with a pale, almost white center glow and saturated blue, violet, magenta, and orange edges. Approximate colours include `#fffdf9`, `#82a9ff`, `#5b48f5`, `#e649c7`, and `#ff6b12`. Blur or feather the transitions heavily; avoid hard stripes or identifiable imagery.
- **Panel:** Use a warm ivory surface around `#faf7ef` or `#f8f5ed`, with a subtle light border around `#e7e2d8`. Apply a large radius of roughly `20–24px`. The panel should have enough internal padding—around `56–60px` on desktop—to feel like a card, not a conventional footer strip.
- **Grid and alignment:** Build a five-column desktop grid. Place a small, abstract brand mark or product-specific identity element in the first column, with a locale/language control anchored near the bottom of that column. Use the remaining four columns for link groups. Keep column starts aligned to a clear grid and give the link columns equal or near-equal widths. Do not center the link groups.
- **Footer taxonomy:** Organize links under concise category headings such as company, product, resources, legal, community, or equivalent categories appropriate to the user's product. Keep categories distinct and make the hierarchy scannable. Allow the legal column to contain longer labels that wrap naturally rather than shrinking the type excessively.
- **Typography:** Use a clean contemporary sans-serif. Category headings should be compact, semibold, and near-black, around `14px` with approximately `1.3` line height. Links should be lighter gray, around `14px` with `1.55–1.7` line height. Use a consistent vertical rhythm of about `12–16px` between links. Preserve readable line lengths and allow two-line links where needed.
- **Colour:** Use near-black text for headings, approximately `#252525`, and muted gray link text around `#686762`. The language selector should use dark text on the ivory panel. Keep the panel mostly neutral so the outer gradient remains the visual accent.
- **Locale control:** Create a small rounded language selector near the lower-left area of the panel. It may include a simple globe symbol, a short locale label, and a downward chevron. Give it a thin border around `#cfcac0`, a white/ivory background, approximately `36–40px` height, and modest horizontal padding. It should look like a compact control rather than a primary button.
- **Interaction:** Make every link visibly interactive with a subtle colour shift, underline, or opacity transition on hover/focus. Give the locale selector a clear hover state and an accessible focus ring. On smaller screens, collapse the columns into a one- or two-column layout; keep headings and links left-aligned and preserve comfortable tap targets. Consider making categories collapsible on narrow screens if the list becomes very long.
- **Responsive behaviour:** At tablet widths, reduce panel padding and use two or three columns. On mobile, make the panel nearly full width with around `20–24px` outer margin, reduce the radius slightly if needed, stack the identity and navigation areas, and place the locale control after the link groups or at the bottom. Keep the gradient visible without making text contrast dependent on it.
- **Accessibility:** Use semantic `footer`, navigation groups, lists, and descriptive link labels. Ensure keyboard focus is visible, colour contrast is sufficient on the ivory surface, and the selector exposes its current language and available options to assistive technology.

## Never
- Never copy the reference's logo, brand mark, product name, category names, link labels, or exact copy.
- Never reuse the reference's distinctive visual identity as a branded asset; create a neutral or product-specific identity element instead.
- Never include illustrations, photographs, screenshots, or imagery from the reference.
- Never reproduce the exact link inventory, spacing measurements, gradient shape, or page composition pixel-for-pixel.
- Never let the gradient reduce readability or replace a properly contrasting footer surface.