<!DOCTYPE html>

<head>

<title>HELLO FURNITURE | Modern Craftsmanship</title>

<style>

:root {

--bg-primary: #f9f8f6;

--bg-surface: #ffffff;

--text-main: #1c1c1c;

--text-muted: #666666;

--accent-clay: #a35d4d;

--accent-sage: #8a9a86;

--accent-navy: #2b3a4a;

--border-color: #e5e3df;

--font-sans: 'Plus Jakarta Sans', sans-serif;

--font-serif: 'Playfair Display', serif;

--transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: var(--font-sans);

background-color: var(--bg-primary);

color: var(--text-main);

line-height: 1.6;

-webkit-font-smoothing: antialiased;

}

/* Header Navigation */

header {

position: sticky;

top: 0;

z-index: 100;

background: rgba(249, 248, 246, 0.9);

backdrop-filter: blur(10px);

border-bottom: 1px solid var(--border-color);

padding: 1.25rem 2rem;

display: flex;

justify-content: space-between;

align-items: center;

}

.brand {

font-family: var(--font-sans);

font-size: 1.25rem;

font-weight: 700;

letter-spacing: 0.15em;

text-transform: uppercase;

color: var(--text-main);

text-decoration: none;

}

nav ul {

display: flex;

list-style: none;

gap: 2rem;

}

nav a {

text-decoration: none;

color: var(--text-main);

font-size: 0.9rem;

font-weight: 500;

letter-spacing: 0.05em;

transition: var(--transition);

}

nav a:hover {

color: var(--accent-clay);

}

/* Hero Section */

.hero {

padding: 6rem 2rem;

max-width: 1200px;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.hero-content h1 {

font-family: var(--font-serif);

font-size: 3.5rem;

font-weight: 400;

line-height: 1.15;

margin-bottom: 1.5rem;

}

.hero-content p {

color: var(--text-muted);

font-size: 1.1rem;

margin-bottom: 2rem;

max-width: 480px;

}

.btn {

display: inline-block;

padding: 1rem 2.5rem;

background-color: var(--text-main);

color: var(--bg-surface);

text-decoration: none;

font-size: 0.85rem;

font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

border: 1px solid var(--text-main);

transition: var(--transition);

cursor: pointer;

}

.btn:hover {

background-color: transparent;

color: var(--text-main);

}

/* Vector Headboard Visualizer */

.hero-preview {

background: var(--bg-surface);

border: 1px solid var(--border-color);

padding: 3rem;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 400px;

position: relative;

}

.headboard-svg {

width: 100%;

max-width: 320px;

height: auto;

filter: drop-shadow(0 15px 25px rgba(0,0,0,0.06));

transition: var(--transition);

}

/* Section Styling */

section {

max-width: 1200px;

margin: 6rem auto;

padding: 0 2rem;

}

.section-title {

font-family: var(--font-serif);

font-size: 2.25rem;

font-weight: 400;

margin-bottom: 1rem;

text-align: center;

}

.section-subtitle {

text-align: center;

color: var(--text-muted);

margin-bottom: 3rem;

font-size: 1rem;

}

/* Grid Layouts */

.grid-4 {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

gap: 2rem;

}

.grid-2 {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

gap: 3rem;

}

/* Interactive Cards */

.card {

background: var(--bg-surface);

border: 1px solid var(--border-color);

padding: 2rem;

text-align: center;

transition: var(--transition);

}

.card:hover {

transform: translateY(-4px);

box-shadow: 0 10px 30px rgba(0,0,0,0.04);

}

.card-icon {

margin-bottom: 1.5rem;

display: flex;

justify-content: center;

}

.card h3 {

font-size: 1.1rem;

font-weight: 600;

margin-bottom: 0.5rem;

}

.card p {

color: var(--text-muted);

font-size: 0.9rem;

}

/* Configurator Area */

.configurator {

background: var(--bg-surface);

border: 1px solid var(--border-color);

padding: 3rem;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.controls-group {

margin-bottom: 2rem;

}

.controls-group label {

display: block;

font-size: 0.8rem;

font-weight: 700;

letter-spacing: 0.1em;

text-transform: uppercase;

margin-bottom: 1rem;

color: var(--text-muted);

}

.option-buttons {

display: flex;

flex-wrap: wrap;

gap: 0.75rem;

}

.opt-btn {

padding: 0.6rem 1.2rem;

border: 1px solid var(--border-color);

background: var(--bg-primary);

color: var(--text-main);

font-size: 0.85rem;

font-weight: 500;

cursor: pointer;

transition: var(--transition);

}

.opt-btn.active, .opt-btn:hover {

background: var(--text-main);

color: var(--bg-surface);

border-color: var(--text-main);

}

/* Features List */

.feature-list {

list-style: none;

}

.feature-item {

padding: 1.25rem 0;

border-bottom: 1px solid var(--border-color);

display: flex;

justify-content: space-between;

align-items: center;

}

.feature-item:last-child {

border-bottom: none;

}

.feature-number {

font-family: var(--font-serif);

font-style: italic;

color: var(--accent-clay);

margin-right: 1rem;

}

/* Footer */

footer {

border-top: 1px solid var(--border-color);

padding: 4rem 2rem;

text-align: center;

color: var(--text-muted);

font-size: 0.85rem;

background: var(--bg-surface);

}

@media (max-width: 768px) {

.hero, .configurator {

grid-template-columns: 1fr;

gap: 2rem;

}

nav ul {

display: none;

}

</style>

</head>

<body>

<a href="#" class="brand">Hello Furniture</a>

<nav>

<ul>

<li><a href="#shapes">Beds & Shapes</a></li>

<li><a href="#fabrics">Fabric Catalogue</a></li>

<li><a href="#sets">Bedroom Sets</a></li>

<li><a href="#kids">Kids Collection</a></li>

</ul>

</nav>

</header>

<h1>Custom Upholstered Beds & Tailored Living</h1>

<p>Handcrafted precision featuring cut-to-shape MDF frames, high-density padding, and piping finishes. Designed to bring tailored Scandinavian comfort into your home.</p>

<a href="#configurator" class="btn">Configure Your Bed</a>

</div>

</svg>

<span style="margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.05em;">THE DAISY HEADBOARD IN COZY TOWNHOUSE</span>

</div>

</section>

<h2 class="section-title">The Art of Fabrication</h2>

<p class="section-subtitle">Every piece is built to order using high-grade materials and artisan upholstery techniques.</p>

</div>

<h3>1. Precision Frame</h3>

<p>A durable wooden/MDF frame is precisely cut into custom shapes and constructed in layered panels.</p>

</div>

</div>

<h3>2. Foam Padding</h3>

<p>Each structural layer is padded with dense foam to create a soft, raised contour profile.</p>

</div>

</div>

<h3>3. Fine Upholstery</h3>

<p>Selected premium fabrics are hand-upholstered securely over the contoured layers.</p>

</div>

</div>

<h3>4. Piping Outline</h3>

<p>Completed with refined piping along the outer edges to establish a clean, architectured outline[cite: 1].</p>

</div>

</section>

<h2 class="section-title">Design Your Headboard</h2>

<p class="section-subtitle">Select your preferred silhouette, size, and curated fabric category[cite: 1].</p>

</svg>

Daisy Silhouette • Queen Size (5 FT) • Cozy Townhouse

</div>

<label>1. Select Shape[cite: 1]</label>

<button class="opt-btn active" data-shape="daisy">Daisy</button>

<button class="opt-btn" data-shape="willow">Willow</button>

</div>

<label>2. Select Size[cite: 1]</label>

<button class="opt-btn" data-size="Single (3 FT)">Single (3 FT)</button>

<button class="opt-btn" data-size="Double (4 FT)">Double (4 FT)</button>

<button class="opt-btn active" data-size="Queen (5 FT)">Queen (5 FT)</button>

<button class="opt-btn" data-size="Super King (7 FT)">Super King (7 FT)</button>

</div>

<label>3. Select Fabric Theme[cite: 1]</label>

<button class="opt-btn active" data-color="#e2d2c3" data-theme="Cozy Townhouse">Cozy Townhouse</button>

<button class="opt-btn" data-color="#8a9a86" data-theme="Cottage Retreat">Cottage Retreat</button>

<button class="opt-btn" data-color="#d9b4b4" data-theme="Kids Corner">Kids Corner</button>

<button class="opt-btn" data-color="#2b3a4a" data-theme="Stripe Lovers">Stripe Lovers</button>

</div>

</section>

<h2 class="section-title">Coordinated Bedroom Sets</h2>

<p class="section-subtitle">Bed and accent chair pairings created for harmonious interior aesthetics[cite: 1].</p>

<div>

<div>

<strong>Coordinated Aesthetic[cite: 1]</strong>

<p style="color: var(--text-muted); font-size: 0.85rem;">Eliminates guesswork with designer-matched headboard and chair combinations[cite: 1].</p>

</div>

</li>

<div>

<strong>Functional Seating Area[cite: 1]</strong>

<p style="color: var(--text-muted); font-size: 0.85rem;">Adds practical utility for dressing, reading, or relaxing in the bedroom space[cite: 1].</p>

</div>

</li>

<div>

<strong>Turnkey Buying Experience[cite: 1]</strong>

<p style="color: var(--text-muted); font-size: 0.85rem;">Reduces decision fatigue with unified, ready-made design solutions[cite: 1].</p>

</div>

</li>

</ul>

</div>

</svg>

<h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">Fabricated Accent Chairs</h3>

<p style="color: var(--text-muted); font-size: 0.85rem;">Available in Single-Seater Accent Chairs and Spacious Lounge Chairs/Sofas[cite: 1].</p>

</div>

</section>

</footer>

// SVGs paths for different headboard silhouettes

const shapes = {

daisy: {

shape: "M 30,170 L 30,90 Q 30,50 150,30 Q 270,50 270,90 L 270,170 Z",

piping: "M 38,162 L 38,92 Q 38,56 150,38 Q 262,56 262,92 L 262,162"

rose: {

shape: "M 30,170 L 30,100 C 30,60 90,80 90,50 C 90,20 210,20 210,50 C 210,80 270,60 270,100 L 270,170 Z",

piping: "M 38,162 L 38,102 C 38,66 94,84 94,54 C 94,28 206,28 206,54 C 206,84 262,66 262,102 L 262,162"

lily: {

shape: "M 30,170 L 30,80 Q 150,20 270,80 L 270,170 Z",

piping: "M 38,162 L 38,84 Q 150,28 262,84 L 262,162"

willow: {

shape: "M 30,170 L 30,60 L 270,60 L 270,170 Z",

piping: "M 38,162 L 38,68 L 262,68 L 262,162"

}

};

let currentShape = 'daisy';

let currentSize = 'Queen (5 FT)';

let currentTheme = 'Cozy Townhouse';

let currentColor = '#e2d2c3';

const pathShape = document.getElementById('svg-headboard-shape');

const pathPiping = document.getElementById('svg-headboard-piping');

const summaryText = document.getElementById('summary-text');

function updateVisualizer() {

pathShape.setAttribute('d', shapes[currentShape].shape);

pathShape.setAttribute('fill', currentColor);

pathPiping.setAttribute('d', shapes[currentShape].piping);

const capitalizedShape = currentShape.charAt(0).toUpperCase() + currentShape.slice(1);

summaryText.textContent = `${capitalizedShape} Silhouette • ${currentSize} • ${currentTheme}`;

}

// Attach click listeners

document.querySelectorAll('#shape-options .opt-btn').forEach(btn => {

btn.addEventListener('click', (e) => {

document.querySelectorAll('#shape-options .opt-btn').forEach(b => b.classList.remove('active'));

e.target.classList.add('active');

currentShape = e.target.getAttribute('data-shape');

updateVisualizer();

});

document.querySelectorAll('#size-options .opt-btn').forEach(btn => {

btn.addEventListener('click', (e) => {

document.querySelectorAll('#size-options .opt-btn').forEach(b => b.classList.remove('active'));

e.target.classList.add('active');

currentSize = e.target.getAttribute('data-size');

updateVisualizer();

});

document.querySelectorAll('#fabric-options .opt-btn').forEach(btn => {

btn.addEventListener('click', (e) => {

document.querySelectorAll('#fabric-options .opt-btn').forEach(b => b.classList.remove('active'));

e.target.classList.add('active');

currentColor = e.target.getAttribute('data-color');

currentTheme = e.target.getAttribute('data-theme');

updateVisualizer();

});

</script>

</body>

</html>