Framed estate landing page

## Goal

Design a landing page for Solenne Estates, a developer of low-energy luxury homes. Keep the tone quiet, confident and premium.

Use the style, layout, image and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same sections, the same number of items in each, and similar text lengths.

## Style

Keep this exactly: it is what makes the design look the way it does. The whole site sits in one tall dark "frame" with rounded top corners, floating over a blurred copy of the hero photo, with huge tight uppercase headings and small quiet text.
- Font, from Google Fonts: **Inter Tight** (400, 500, 600) for everything, with Helvetica Neue and Arial as fallbacks. Load the stylesheet so it can never block the page (in plain HTML: `media="print" onload="this.media='all'"` on the `<link>`).
- Colors: page #0D1013, frame #050506, tiles #131416, text #F4F2EE, muted text at 62% of the text color, dim text at 34%, hairlines white at 10%, a light button color #E9E6E1 with near-black #111 text. No other accent colors.
- **Big headings:** weight 500, uppercase, letter-spacing -0.065em (the wordmark -0.075em), line-height 0.84 to 0.88, so the letters nearly touch.
- **Glass pieces** (nav pill, motto tag, hero card): white at 10% fill, 1px border white at 22%, `backdrop-filter: blur(14px) saturate(1.2)`.
- Side padding everywhere inside the frame: `--gutter: clamp(18px, 4.5vw, 64px)`.
- Every focusable element shows a 2px #E9E6E1 focus outline with 3px offset.

## Layout

1. **Backdrop**, fixed behind everything: a radial gradient (80% × 60% at the top center, #22303A to the page color by 70%) with the hero photo on top, blurred 40px, saturate 0.8, opacity 0.35, scaled 1.2.
2. **The frame**: margin clamp(16px, 4vw, 56px) on top and clamp(10px, 7vw, 104px) on the sides, no bottom margin; 1px border white at 22% on the top and sides only, radius 30px 30px 0 0, background #050506, overflow hidden, shadow 0 40px 120px -40px rgb(0 0 0 / 0.8). Everything below lives inside it.
3. **Hero**, height clamp(560px, 52vw, 780px), the hero photo covering it, under a gradient that darkens the top (5,8,12 at 55% → transparent by 38%) and slightly the bottom (45% at the very bottom). Absolutely positioned on it:
   - Top left (26px down, gutter from the left): a glass nav pill (5px padding, 4px gaps) with five links, 13px weight 500, 8px × 15px padding each; the current link and hovered links get a white 14% fill.
   - Top right (26px down): a light "Book a tour" pill (#E9E6E1, 13px weight 600, 11px × 20px padding) with a small ↗ arrow icon.
   - A glass motto tag (radius 12px, 11px text at 70% white, max 170px wide) 84px down, about 120px left of the right gutter.
   - A small 11px note (80% white, max 170px wide) under the nav, 96px down.
   - **The wordmark**, the page's h1: the brand on two lines, clamp(56px, 8.6vw, 148px), 15% from the top and 22% from the left; the second line is pushed right by 1.15em so the two lines stagger. A soft text shadow (0 10px 40px, 25% black).
   - Bottom left (48px up): a glass card (radius 16px, 8px padding, max 320px) with a 112px square thumbnail (radius 10px) and, beside it, a 17px weight 600 two-line title and an 11px line at 75% white.
   - Bottom right (130px up): a 150px square dark tile (#08090B at 92%, radius 18px, 18px padding, hairline border) with "View homes" (15px weight 600) at the top and a 54px circle with a 2px white border and a ↘ arrow centered at the bottom.
   - An 11px caption (max 200px) 40px from the bottom, 22% from the right.
4. **About section** (padding clamp(72px, 8vw, 120px) gutter 0):
   - A head row: the heading "Designed around life" (clamp(40px, 5.4vw, 84px)) on the left, and on the right a 12px muted note, right-aligned, max 200px, aligned to the heading's baseline.
   - Below (clamp(40px, 4.6vw, 64px) down), two columns (the rest and 22%): a statement paragraph (clamp(24px, 2.6vw, 40px), weight 600, line-height 1.02, letter-spacing -0.035em, justified, max 860px) where **some phrases are dim** (34%) and the rest full white, alternating every few words; and a 16 : 9 image with 14px radius.
   - A bento grid of 4 equal columns, 14px gaps: row one is a stat tile, an **empty cell**, a stat tile, a stat tile; row two is a wide image spanning two columns, an **empty cell**, a stat tile. Tiles: 200px min height, 28px padding, radius 16px, #131416, hairline border, content vertically centered: the number (26px weight 600) and a 13px muted label under it.
5. **Featured section**: a head row like the one above ("Selected residences" and a note), then a **carousel** of six cards in one row, 14px apart, aligned to the top: small cards are clamp(110px, 12.5vw, 190px) wide with a 4 : 5 image, and the **active card** is clamp(220px, 26vw, 400px) wide with a 3 : 4 image, always slid to the horizontal center of the frame. Images have a 14px radius; the small ones are slightly dimmed (saturate 0.85, brightness 0.9). Under each image, 10px down, an 11px row: the name (weight 600, full white) on the left and the year (muted) on the right. Two 56px circle buttons (2px white border, ← and →) sit **below the small cards** (top at the small image height plus 56px), just outside the active card on each side, so they never cover a caption. The third card starts active.
6. **Technology section**: a head row with a two-line heading "Engineered / for tomorrow" on the left and a small 16 : 9 image (clamp(120px, 12vw, 180px) wide, radius 14px) on the right. Below, two equal columns aligned to the bottom: a 16 : 10 image (radius 16px) on the left; on the right a 13px muted paragraph (max 300px), then a list of three rows with hairlines above and below each (15px weight 500 name on the left, 13px muted value on the right, 16px vertical padding).
7. **Closing**, centered, with clamp(96px, 10vw, 150px) padding on top, clamp(64px, 6vw, 90px) at the bottom and the gutter at the sides: a two-line heading at clamp(44px, 7vw, 116px) and, 36px below, the light "Book a tour" pill at 14px with 14px × 26px padding.
8. **Footer**: a hairline above, 22px gutter padding, 12px muted text, copyright on the left and "Privacy · Terms · Careers" on the right.

Under 900px wide: the wordmark moves to the left gutter, 22% from the top; the motto and caption hide; the dark tile moves to 48px from the bottom and shrinks to 120px (44px circle); the statement and its image stack (image max 320px); the bento becomes two columns with the empty cells removed; the technology columns stack; the carousel arrows sit 8px in from each edge. Under 600px: the nav pill scrolls sideways if it doesn't fit, the note hides, the hero card moves up to 184px from the bottom (just above the dark tile), head rows stack with their notes left-aligned, and tiles drop to 150px tall with 22px padding.

## Motion

Easing for everything: cubic-bezier(0.22, 1, 0.36, 1).
- **Hero settle:** on load, the hero photo scales from 1.08 to 1 over 1800ms, and each wordmark line slides up from 105% below a clipping box over 1000ms, the second line 120ms later.
- **Reveal:** each head row, the statement, its image, every tile, the wide image, the carousel and the technology blocks fade in and rise 26px over 800ms when 12% visible, each once; tiles in a row are staggered 100ms apart. Add the hidden starting state from script (a class on `<html>` set in the `<head>`), so the page shows complete if JavaScript doesn't run.
- **Carousel:** the arrows (and the left/right arrow keys) move the active card by one, wrapping around. The newly active card grows to the large size and the old one shrinks over 700ms, while the row slides so the active card stays centered (re-measure every frame while the sizes change).
- **Hover:** the light pills lift 2px; the circle on the dark tile turns -45deg and fills white with a dark arrow; the carousel arrows fill white with a dark arrow; nav links get their white fill.
- **Reduced motion:** with prefers-reduced-motion: reduce, turn off every transition and animation and show everything in place at once (the carousel still works, it just jumps).

## Sample content

- The wordmark is the brand, Solenne Estates, split over two lines between its words (one word per line works best). Nav links "Home", "About", "Residences", "Technology", "Contact"; "Home" is current. Button "Book a tour".
- Motto "Quiet design. Intelligent homes. Lasting comfort." Note "Every residence is planned for daylight, quiet and decades of low-energy living." Hero card "Homes shaped by light." with "Low-energy residences with smart systems and natural materials." Dark tile "View homes". Caption "Residences planned around light, landscape and the people who live in them."
- About: heading "Designed around life", note "From the first sketch to the final key, each home is built to be lived in for generations." Statement "We think a home is _more than_ its walls. It is _the quiet_ meeting of _light, materials,_ technology _and the_ people _who_ live _inside_ them." (the phrases in asterisks are dim). Stats "640+" Homes delivered, "18" Cities, "92%" Less grid energy, "24/7" Home care.
- Featured: heading "Selected residences", note "Six recent homes, each designed for its site and the family that lives there." Cards: Pinecrest Cabin 2025, Cliffside Rings 2026, Linea House 2025, Palmora Round 2026, Mirrorlake 2025, Aurum Pavilion 2026.
- Technology: heading "Engineered / for tomorrow", paragraph "We pair passive design with smart systems, so every home heats, cools and powers itself with far less." Rows: "Solar glass roofs" · "Up to 14 kW", "Heat-recovery air" · "90% recovered", "Adaptive lighting" · "Follows the sun".
- Closing "Come home / to light". Footer "© 2026 Solenne Estates".

## Images

Every image slot below must show a real image, never an empty box or emoji. Each slot has an image prompt in **Image prompts** at the end of this prompt.
1. If you can generate images, generate one for each slot from its image prompt.
2. Otherwise, load each slot's image from the file name given below (in an `images/` folder next to the page; in a framework project, wherever it keeps static images), so the user can generate the images from the image prompts and drop them in. Under every image, draw a fallback so the page looks finished before the files exist: a dark blue-grey gradient (#2A3440 → #12161B at 160deg) with a soft warm glow (a radial gradient of rgb(255 196 120 / 0.35)) near the bottom. The image covers it once it loads; if an image fails to load, hide it (for example from its `error` event) so the fallback shows cleanly with no broken-image icon or alt text.

Slots (all cropped to cover):
- Hero, `images/hero-house.jpg`: the full hero, and the blurred backdrop.
- Hero card thumbnail, `images/hero-card.jpg`.
- About image, `images/intro-facade.jpg`; bento wide image, `images/stats-wide.jpg`.
- Carousel cards, `images/project-1.jpg` to `images/project-6.jpg`, in order.
- Technology: main image `images/tech-main.jpg`, small head image `images/tech-thumb.jpg`.

## Output

If you are working inside an existing project, build the page as components that follow that project's framework, styling and file conventions (for example React, Next.js, Vue, Tailwind or CSS modules), and load the font the way the project loads fonts. In a component framework:
- start the hero settle, the reveal observer and the carousel inside the framework's mount hook (for example `useEffect`), and clean up observers and listeners when the component unmounts;
- use refs, not `document.querySelector`;
- scope every style to the components, and only set the page background on `html` and `body`;
- only touch `window` and `document` on the client (in Next.js, mark the file `"use client"`).

Otherwise, produce a single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag; the only external files allowed are the Google Font and the images above, with no libraries or frameworks. Either way it is designed for a 1440 × 900 screen and responsive down to 375px wide, with semantic HTML (header, nav, main, sections with headings, real buttons for the carousel arrows) and visible keyboard focus states.

## Image prompts

Use these with any image generator. Keep every image free of text, logos and people in focus. Style for all: architectural photography, photorealistic, sharp, high detail.
- **hero-house.jpg** (16:9): a sculptural futuristic two-storey villa with sweeping curved white concrete terraces and full-height glass walls, warm golden interior light at blue hour, a long infinity pool with thin glowing light lines in front, dark pines, deep blue dusk sky.
- **hero-card.jpg** (4:3): a curved futuristic residential tower with horizontal bands of dark glass and white concrete, soft dusk light.
- **intro-facade.jpg** (4:3): looking up at a white angular apartment building with staggered balconies and glass railings against a pale blue sky.
- **stats-wide.jpg** (21:9): a futuristic flowing white pavilion with a lattice glass dome at blue hour, warm lights inside, a few tiny figures far away on the plaza.
- **project-1.jpg** to **project-6.jpg** (3:4), in order: a black timber and glass cabin with a sharp gabled roof in a snowy pine forest at dusk; a curved stacked white villa with rounded terraces on a coastal cliff at sunset; a minimalist concrete double-height living room with floor-to-ceiling glass and low lounge chairs in the evening; a round glass house with layered white balconies among palms and a reflecting pool at blue hour; an angular glass lake house cantilevered over still water at twilight; a sculptural house with a golden curved metal roof and blue glass beside a calm pool under a bright sky.
- **tech-main.jpg** (16:9): a futuristic house with a faceted perforated white metal facade and a solar glass roof under a bright sky.
- **tech-thumb.jpg** (16:9): a panoramic curved window of a minimal living room looking out to a green lawn and the sea, soft daylight.