MORADA — Design your home together
Source code 
Key features
Miro-inspired design system: white canvas + near-black ink, five pastel surface pairs with same-hue dark text (AA), single interactive blue, ring borders, 8-26px radii
Hero = CSS-built collaborative board: photo pin, three pastel sticky notes, palette swatches, floating cursor and bobbing notes animating with expo-out ease
Asymmetric 12-column feature grid of varied pastel panels: coral moodboard with pinned chips, teal palette strip, yellow comment bubbles, rose room chips, moss one-click share
Masonry-style inspiration gallery: six curated room boards with gradient captions and pin counts, hover zoom, wide full-house feature tile
Pricing as a Compare surface: Free / Studio €8 (featured, blue) / Team €19 with feature checklists and success-green checks
FAQ accordions, newsletter with inline email validation and success state, delayed bottom-right cookie banner with Got it / No thanks
Day/Dusk theme toggle (kairos-theme key), scroll-reveal sections with exponential easing, semantic z-index scale, WCAG AA in both themes
Full i18n in 6 languages (EN/ES/FR/DE/IT/PT): browser detection, desktop + mobile switchers, translated SEO meta, native copywriting in every language
Description
Landing page for MORADA, a visual home-design board platform where couples, families and architects design rooms together on a shared canvas. Design system: Miro-inspired collaborative software — white canvas, near-black text (#1c1c1e), pastel surface pairs (coral/rose/teal/yellow/moss/orange) each with a same-hue dark ink for AA contrast, one interactive blue (#3f55d9) used only for CTAs and links, thin ring borders (rgb(224,226,232)), 8–26px radii, minimal elevation. Inter display with tight -0.035em tracking mirrors Miro's Roobert PRO. The hero art is a CSS-built collaborative board: photo pin, three pastel sticky notes (furniture / palette / favorites), color swatches and a floating cursor — no stock hero image. Signature interactions: (1) floating cursor and gently bobbing notes inside the board; (2) varied pastel feature panels in an asymmetric 12-col grid (coral split-span with mini moodboard, teal palette strip, yellow comment bubbles, rose room chips, moss share card) — never an identical card grid; (3) masonry-style gallery with duotone-cap room tiles and wide full-house board; (4) pricing as a Compare surface (Free / Studio €8 featured / Team €19); (5) FAQ accordions, newsletter with inline validation, delayed bottom-right cookie banner. Full i18n in 6 languages (EN/ES/FR/DE/IT/PT) with browser detection, dual desktop/mobile switchers, translated SEO meta and native-level copywriting. WCAG AA contrast verified across 35 text/background pairs in both themes; all motion respects prefers-reduced-motion.
Technologies used
HTML 
CSS 
JavaScript 