Product landing page with 3D renders

A full-width, cool off-white product landing page with a cobalt accent: a hero that bleeds a 3D product render to the edge, image feature cards, a four-step process and a CTA banner.

Prompt

## Goal

Design a product landing page for Nimbair, a smart home air purifier company. Keep the tone calm, clear and confident.

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 page is a calm, premium product landing page: cool off-white space, crisp dark type, one cobalt-blue accent, and soft 3D renders of white objects and frosted blue glass.
- Fonts, from Google Fonts: **Plus Jakarta Sans** (400, 500, 600) for headings, numbers and the logo; **Inter** (400, 500, 600) for everything else.
- Colors: page background #F3F5F8, white surfaces #FFFFFF, text #12161F, muted text #5B6474, hairlines #E2E6ED, accent cobalt #2F5BFF (hover #1E3FD1).
- **Full width:** nothing has a max-width. Every section spans the whole window with side padding clamp(20px, 5vw, 80px), and the hero image runs to the right edge of the window.
- Headings: Plus Jakarta Sans 500, letter-spacing -0.03em. Hero heading clamp(44px, 5.1vw, 78px), line-height 1.02, on three lines; section headings clamp(34px, 3vw, 46px), line-height 1.08. Each big heading ends with a period in cobalt.
- Eyebrows above headings: 12px, weight 600, uppercase, letter-spacing 0.24em, cobalt.
- Buttons, 52px tall, 12px radius, 15px weight 500, 26px side padding. Primary: cobalt with white text and a soft cobalt shadow (0 10px 24px -8px rgb(47 91 255 / 0.55)); on hover it darkens, lifts 2px and its arrow slides 4px right. Secondary: white at 70% with a 1px hairline border, a light backdrop blur and a 28px round outlined play icon.
- Cards: 20px radius, a vertical gradient #FAFBFD → #EDF0F5, a 1px white border, and a soft shadow (0 1px 0 #E2E6ED, 0 20px 40px -28px rgb(18 22 31 / 0.25)).
- Every focusable element shows a 2px cobalt focus outline with 3px offset.

## Layout

1. **Nav** (88px tall, transparent, sitting on top of the hero image): the logo on the left (a cobalt line icon of three flowing air strokes, two of them curling into small loops, and the brand name in lowercase, Plus Jakarta Sans 600, 26px, letter-spacing -0.03em); 48px later the links Products, Solutions, About, Resources (14px, weight 500, 40px apart, a cobalt underline that grows from the left on hover); on the right a 42px round search button and a "Get Started" pill (44px tall, 12px radius, white at 85% with a soft shadow, a small glowing cobalt dot before the label).
2. **Hero** (pulled up 88px so the image sits behind the nav; min-height min(948px, 100vh + 128px)): the hero image fills the right 60% of the window, from the top of the page to the bottom of the hero, cropped to cover with object-position 80% 50% (so the product sits left of the captions, never under them) and faded into the page background on its left 22% with a mask. On the left, max 600px wide and 160px from the top: the eyebrow, the heading, a 17px muted lead paragraph (max 440px), the two buttons 36px below (primary "Explore Products →", secondary "Watch Video"), and 64px below them a row of three stats separated by hairlines (each a 30px Plus Jakarta Sans 500 number with a 13px muted label). Over the image: a floating 86px frosted glass tile, rotated -12deg (cobalt gradient glass with a white top highlight, a white air-strokes icon, a soft cobalt shadow), its left edge at 47% of the full page width (not of the image) and 22% down the hero, so it floats in the open space just left of the product, never over it; and two small vertical captions pinned 32px from the right edge (11px, weight 500, uppercase, letter-spacing 0.3em, one word per line, dark grey), at 24% and 64% down, each with a short thin line under it.
3. **Feature cards**: a row of three equal cards, 22px apart, at least 236px tall. Each card shows its image on the right 58% (cropped to cover, faded in from the left over its first 30%), and over the left side: a 22px two-line title, a 13.5px muted line, and at the bottom a 38px round outlined arrow button. A small cobalt number ("01", "02", "03") sits in the top-right corner. On hover the card lifts 4px, its image zooms to 1.05, and the arrow button fills cobalt.
4. **Process** (120px top padding, 110px bottom): two columns, 30% and the rest. Left: the eyebrow, the heading, a muted line and a "Learn more →" link underlined in the text color with a cobalt arrow. Right: four steps in columns, each with a 1px hairline on its left and 26px side padding: a 46px Plus Jakarta Sans 400 number in cobalt ("01" to "04"), a 22px tall cobalt tick line, a 15px weight 600 title and a 13.5px muted line.
5. **CTA banner**: a 26px-radius card (gradient #F8F9FC → #E9EDF4), at least 300px tall, in a two-column grid. On the left, 56px by 64px padding, a 40px two-line heading and a muted line; in the middle the primary "Get Started →" button; the CTA image fills the right 58%, faded in from the left over its first 35%.
6. **Footer** (56px top, 48px bottom padding): the logo, a short muted tagline, the four links again (pushed right), and four outlined social icons (LinkedIn, X, Instagram, YouTube) that turn cobalt on hover.

Under 1100px wide, the feature cards stack into one column, the process section stacks, and the steps go two per row. Under 860px: the nav keeps only the logo, the pill and a menu button; the hero stacks with the image below the text (360px tall, faded out at the bottom); the glass tile and captions hide; the steps go one per row; the CTA stacks with its image faded behind the text.

## Motion

Easing for everything: cubic-bezier(0.22, 1, 0.36, 1).
- **Hero image** settles in on load: from scale 1.06 and transparent to its place over 1600ms.
- **Glass tile** bobs 10px up and down every 6 seconds.
- **Reveal**: the hero text, stats, cards, process columns and CTA fade in and rise 24px over 800ms when 15% visible, staggered 90ms apart. Each animates once.
- **Stats** count up from 0 to their value over 1400ms with a cubic ease-out, keeping their decimals and suffix (for example "99.97%").
- **Reduced motion**: with prefers-reduced-motion: reduce, show everything at once with no animation.

## Sample content

- Nav: "Nimbair" in lowercase. Links Products, Solutions, About, Resources. Pill "Get Started".
- Hero: eyebrow "Breathe better, live better". Heading "Cleaner Air / for a Calmer / Home." Lead "Nimbair makes quiet, intelligent air purifiers that sense, filter and refresh every room, so your home always breathes easy." Buttons "Explore Products", "Watch Video". Stats "2M+ Homes protected", "99.97% Particles captured", "40+ Countries". Captions "Pure / Quiet / Smart" and "A / Calmer / Home".
- Feature cards: "Intelligent Airflow: Sensors map every room in real time.", "Naturally Efficient: Plant-based filters. Lower energy use.", "Whisper-Quiet Design: Softer than a breath, made for living."
- Process: eyebrow "How it works", heading "From first breath / to fresh air." Line "Four quiet steps, running every minute of every day." Steps "Sense: We read dust, pollen and VOCs in every room.", "Filter: Three-stage filters capture 99.97% of particles.", "Learn: It learns your routine and adjusts quietly.", "Refresh: Clean air, measured and reported in the app."
- CTA: "Ready to breathe / a little easier?" Line "Join two million homes choosing Nimbair for cleaner, calmer air." Button "Get Started".
- Footer tagline "Cleaner air for a calmer home."

## 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), 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 soft cobalt glow (a radial gradient of rgb(47 91 255 / 0.45)) and a white glow over a pale grey-blue gradient (#EEF2F8 → #DCE3EE). The image covers it once it loads.

Slots:
- Hero product, `images/hero-purifier.jpg`: fills the right 60% of the hero.
- Feature 1, `images/feature-airflow.jpg`; Feature 2, `images/feature-leaf.jpg`; Feature 3, `images/feature-droplet.jpg`: each fills the right 58% of its card.
- CTA, `images/cta-cube.jpg`: fills the right 58% of the CTA banner.

## Output

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 two Google Fonts and the images above; no libraries or frameworks. Designed for a 1440px-wide screen, filling the full width of any screen, and responsive down to 375px wide, with semantic HTML (header, nav, main, sections with headings, footer).

## Image prompts

Use these with any image generator. Keep each image free of text and logos.
- **hero-purifier.jpg** (4:3): 3D product render. A sleek minimalist white smart air purifier tower with rounded edges, a fine perforated grille on its side, and a small dark glass display panel glowing soft cobalt blue (the display shows only abstract light, no numbers, no text). It stands on a floating slab of translucent frosted cobalt-blue glass that glows from within, set among stacked clean white architectural blocks and plinths with soft rounded edges. Soft cool morning light from the upper left, long gentle shadows, airy off-white and pale blue-grey palette, a few soft floating air particles. The product sits right of center. Premium product photography, clean, calm. No text, no letters, no logos, no brand names.
- **feature-airflow.jpg** (4:3): Abstract 3D render. A row of thin vertical frosted glass fins, curved like flowing air, glowing cobalt blue from behind, on a soft off-white background with gentle shadows. Minimal, premium, studio lighting. No text, no logos.
- **feature-leaf.jpg** (4:3): Abstract 3D render. A single translucent frosted blue glass leaf resting on a rough white stone block, soft cool light, off-white background, gentle shadow. Minimal, premium. No text, no logos.
- **feature-droplet.jpg** (4:3): Abstract 3D render. A large soft frosted glass droplet shape filled with a gentle cobalt-to-sky-blue glow, resting on a white curved plinth, off-white background, soft shadow. Minimal, premium. No text, no logos.
- **cta-cube.jpg** (16:9): 3D render. A glossy translucent cobalt-blue glass cube with a simple embossed swirl of flowing air on its front face (a curved airflow symbol, no letters), resting at an angle on a field of white rounded square tiles that recede into soft focus, cool soft light, off-white palette. The cube sits in the right third of the frame. Minimal, premium. No text, no letters, no logos.

Loading live preview…

## Goal Design a product landing page for Nimbair, a smart home air purifier company. Keep the tone calm, clear and confident. 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 page is a calm, premium product landing page: cool off-white space, crisp dark type, one cobalt-blue accent, and soft 3D renders of white objects and frosted blue glass. - Fonts, from Google Fonts: **Plus Jakarta Sans** (400, 500, 600) for headings, numbers and the logo; **Inter** (400, 500, 600) for everything else. - Colors: page background #F3F5F8, white surfaces #FFFFFF, text #12161F, muted text #5B6474, hairlines #E2E6ED, accent cobalt #2F5BFF (hover #1E3FD1). - **Full width:** nothing has a max-width. Every section spans the whole window with side padding clamp(20px, 5vw, 80px), and the hero image runs to the right edge of the window. - Headings: Plus Jakarta Sans 500, letter-spacing -0.03em. Hero heading clamp(44px, 5.1vw, 78px), line-height 1.02, on three lines; section headings clamp(34px, 3vw, 46px), line-height 1.08. Each big heading ends with a period in cobalt. - Eyebrows above headings: 12px, weight 600, uppercase, letter-spacing 0.24em, cobalt. - Buttons, 52px tall, 12px radius, 15px weight 500, 26px side padding. Primary: cobalt with white text and a soft cobalt shadow (0 10px 24px -8px rgb(47 91 255 / 0.55)); on hover it darkens, lifts 2px and its arrow slides 4px right. Secondary: white at 70% with a 1px hairline border, a light backdrop blur and a 28px round outlined play icon. - Cards: 20px radius, a vertical gradient #FAFBFD → #EDF0F5, a 1px white border, and a soft shadow (0 1px 0 #E2E6ED, 0 20px 40px -28px rgb(18 22 31 / 0.25)). - Every focusable element shows a 2px cobalt focus outline with 3px offset. ## Layout 1. **Nav** (88px tall, transparent, sitting on top of the hero image): the logo on the left (a cobalt line icon of three flowing air strokes, two of them curling into small loops, and the brand name in lowercase, Plus Jakarta Sans 600, 26px, letter-spacing -0.03em); 48px later the links Products, Solutions, About, Resources (14px, weight 500, 40px apart, a cobalt underline that grows from the left on hover); on the right a 42px round search button and a "Get Started" pill (44px tall, 12px radius, white at 85% with a soft shadow, a small glowing cobalt dot before the label). 2. **Hero** (pulled up 88px so the image sits behind the nav; min-height min(948px, 100vh + 128px)): the hero image fills the right 60% of the window, from the top of the page to the bottom of the hero, cropped to cover with object-position 80% 50% (so the product sits left of the captions, never under them) and faded into the page background on its left 22% with a mask. On the left, max 600px wide and 160px from the top: the eyebrow, the heading, a 17px muted lead paragraph (max 440px), the two buttons 36px below (primary "Explore Products →", secondary "Watch Video"), and 64px below them a row of three stats separated by hairlines (each a 30px Plus Jakarta Sans 500 number with a 13px muted label). Over the image: a floating 86px frosted glass tile, rotated -12deg (cobalt gradient glass with a white top highlight, a white air-strokes icon, a soft cobalt shadow), its left edge at 47% of the full page width (not of the image) and 22% down the hero, so it floats in the open space just left of the product, never over it; and two small vertical captions pinned 32px from the right edge (11px, weight 500, uppercase, letter-spacing 0.3em, one word per line, dark grey), at 24% and 64% down, each with a short thin line under it. 3. **Feature cards**: a row of three equal cards, 22px apart, at least 236px tall. Each card shows its image on the right 58% (cropped to cover, faded in from the left over its first 30%), and over the left side: a 22px two-line title, a 13.5px muted line, and at the bottom a 38px round outlined arrow button. A small cobalt number ("01", "02", "03") sits in the top-right corner. On hover the card lifts 4px, its image zooms to 1.05, and the arrow button fills cobalt. 4. **Process** (120px top padding, 110px bottom): two columns, 30% and the rest. Left: the eyebrow, the heading, a muted line and a "Learn more →" link underlined in the text color with a cobalt arrow. Right: four steps in columns, each with a 1px hairline on its left and 26px side padding: a 46px Plus Jakarta Sans 400 number in cobalt ("01" to "04"), a 22px tall cobalt tick line, a 15px weight 600 title and a 13.5px muted line. 5. **CTA banner**: a 26px-radius card (gradient #F8F9FC → #E9EDF4), at least 300px tall, in a two-column grid. On the left, 56px by 64px padding, a 40px two-line heading and a muted line; in the middle the primary "Get Started →" button; the CTA image fills the right 58%, faded in from the left over its first 35%. 6. **Footer** (56px top, 48px bottom padding): the logo, a short muted tagline, the four links again (pushed right), and four outlined social icons (LinkedIn, X, Instagram, YouTube) that turn cobalt on hover. Under 1100px wide, the feature cards stack into one column, the process section stacks, and the steps go two per row. Under 860px: the nav keeps only the logo, the pill and a menu button; the hero stacks with the image below the text (360px tall, faded out at the bottom); the glass tile and captions hide; the steps go one per row; the CTA stacks with its image faded behind the text. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Hero image** settles in on load: from scale 1.06 and transparent to its place over 1600ms. - **Glass tile** bobs 10px up and down every 6 seconds. - **Reveal**: the hero text, stats, cards, process columns and CTA fade in and rise 24px over 800ms when 15% visible, staggered 90ms apart. Each animates once. - **Stats** count up from 0 to their value over 1400ms with a cubic ease-out, keeping their decimals and suffix (for example "99.97%"). - **Reduced motion**: with prefers-reduced-motion: reduce, show everything at once with no animation. ## Sample content - Nav: "Nimbair" in lowercase. Links Products, Solutions, About, Resources. Pill "Get Started". - Hero: eyebrow "Breathe better, live better". Heading "Cleaner Air / for a Calmer / Home." Lead "Nimbair makes quiet, intelligent air purifiers that sense, filter and refresh every room, so your home always breathes easy." Buttons "Explore Products", "Watch Video". Stats "2M+ Homes protected", "99.97% Particles captured", "40+ Countries". Captions "Pure / Quiet / Smart" and "A / Calmer / Home". - Feature cards: "Intelligent Airflow: Sensors map every room in real time.", "Naturally Efficient: Plant-based filters. Lower energy use.", "Whisper-Quiet Design: Softer than a breath, made for living." - Process: eyebrow "How it works", heading "From first breath / to fresh air." Line "Four quiet steps, running every minute of every day." Steps "Sense: We read dust, pollen and VOCs in every room.", "Filter: Three-stage filters capture 99.97% of particles.", "Learn: It learns your routine and adjusts quietly.", "Refresh: Clean air, measured and reported in the app." - CTA: "Ready to breathe / a little easier?" Line "Join two million homes choosing Nimbair for cleaner, calmer air." Button "Get Started". - Footer tagline "Cleaner air for a calmer home." ## 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), 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 soft cobalt glow (a radial gradient of rgb(47 91 255 / 0.45)) and a white glow over a pale grey-blue gradient (#EEF2F8 → #DCE3EE). The image covers it once it loads. Slots: - Hero product, `images/hero-purifier.jpg`: fills the right 60% of the hero. - Feature 1, `images/feature-airflow.jpg`; Feature 2, `images/feature-leaf.jpg`; Feature 3, `images/feature-droplet.jpg`: each fills the right 58% of its card. - CTA, `images/cta-cube.jpg`: fills the right 58% of the CTA banner. ## Output 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 two Google Fonts and the images above; no libraries or frameworks. Designed for a 1440px-wide screen, filling the full width of any screen, and responsive down to 375px wide, with semantic HTML (header, nav, main, sections with headings, footer). ## Image prompts Use these with any image generator. Keep each image free of text and logos. - **hero-purifier.jpg** (4:3): 3D product render. A sleek minimalist white smart air purifier tower with rounded edges, a fine perforated grille on its side, and a small dark glass display panel glowing soft cobalt blue (the display shows only abstract light, no numbers, no text). It stands on a floating slab of translucent frosted cobalt-blue glass that glows from within, set among stacked clean white architectural blocks and plinths with soft rounded edges. Soft cool morning light from the upper left, long gentle shadows, airy off-white and pale blue-grey palette, a few soft floating air particles. The product sits right of center. Premium product photography, clean, calm. No text, no letters, no logos, no brand names. - **feature-airflow.jpg** (4:3): Abstract 3D render. A row of thin vertical frosted glass fins, curved like flowing air, glowing cobalt blue from behind, on a soft off-white background with gentle shadows. Minimal, premium, studio lighting. No text, no logos. - **feature-leaf.jpg** (4:3): Abstract 3D render. A single translucent frosted blue glass leaf resting on a rough white stone block, soft cool light, off-white background, gentle shadow. Minimal, premium. No text, no logos. - **feature-droplet.jpg** (4:3): Abstract 3D render. A large soft frosted glass droplet shape filled with a gentle cobalt-to-sky-blue glow, resting on a white curved plinth, off-white background, soft shadow. Minimal, premium. No text, no logos. - **cta-cube.jpg** (16:9): 3D render. A glossy translucent cobalt-blue glass cube with a simple embossed swirl of flowing air on its front face (a curved airflow symbol, no letters), resting at an angle on a field of white rounded square tiles that recede into soft focus, cool soft light, off-white palette. The cube sits in the right third of the frame. Minimal, premium. No text, no letters, no logos.