Concept landing page for a residential quarter on the edge of the city and a pine forest.Conceptlandingpageforaresidentialquarterontheedgeofthecityandapineforest.
Design a landing page for a premium residential complex in Figma, then build it in code. A visual system, AI photography, responsive layouts and an ad campaign — so that it all reads as the work of one team, not a set of sections.DesignalandingpageforapremiumresidentialcomplexinFigma,thenbuilditincode.Avisualsystem,AIphotography,responsivelayoutsandanadcampaign—sothatitallreadsastheworkofoneteam,notasetofsections.
SolutionSolution
A residential quarter where the city meets a pine forest. Six colours hold that quiet, and one accent marks it: the heather dot. A dot is a silence. In heather, it is the silence of the pine forest. The wordmark stays the city. “The city ends quietly” runs from the first screen through the banners and the billboard. The frames were generated in Krea from a written prompt and graded in Lightroom.Aresidentialquarterwherethecitymeetsapineforest.Sixcoloursholdthatquiet,andoneaccentmarksit:theheatherdot.Adotisasilence.Inheather,itisthesilenceofthepineforest.Thewordmarkstaysthecity.“Thecityendsquietly”runsfromthefirstscreenthroughthebannersandthebillboard.TheframesweregeneratedinKreafromawrittenpromptandgradedinLightroom.
“Заканчивается” (“ends”) is set exactly to the column width: 8.95cqi, no JavaScript.“Заканчивается”(“ends”)issetexactlytothecolumnwidth:8.95cqi,noJavaScript.
A pine forest lies hidden under the section. The cursor raises it as a relief, then it fades: the quarter stands in the wood, not beside it.Apineforestlieshiddenunderthesection.Thecursorraisesitasarelief,thenitfades:thequarterstandsinthewood,notbesideit.The menu opens with shutters; the strip of frames on the right slides up to the item under the cursor.Themenuopenswithshutters;thestripofframesontherightslidesuptotheitemunderthecursor.Filters hide the excess; hovering a point shows the travel time from the courtyard.Filtershidetheexcess;hoveringapointshowsthetraveltimefromthecourtyard.A black curtain crosses the plans. The next layout is already behind it.Ablackcurtaincrossestheplans.Thenextlayoutisalreadybehindit.
Generation → selection → colour grading. Every frame in the series is built from the approved hero as a reference.Generation→selection→colourgrading.Everyframeintheseriesisbuiltfromtheapprovedheroasareference.
Hero frame — BeforeHeroframe—Before
Hero frame — AfterHeroframe—After
Facade — BeforeFacade—Before
Facade — AfterFacade—After
Living room — BeforeLivingroom—Before
Living room — AfterLivingroom—After
One line, six formats: from stories to a 6 × 3 m billboard. In motion — the same rhythm as on the site.Oneline,sixformats:fromstoriestoa6×3mbillboard.Inmotion—thesamerhythmasonthesite.
Billboard 6 × 3 mBillboard6×3m
Stories 1080×1920Stories1080×1920
Half page 300×600Halfpage300×600
Post 1080×1350Post1080×1350
Skyscraper 240×400Skyscraper240×400
OG 1200×630OG1200×630Stories 1080×1920Stories1080×1920Half page 300×600Halfpage300×600Billboard 6 × 3 mBillboard6×3m
Frames from the case page. Colour, spacing, type, components and more, written out in detail.Framesfromthecasepage.Colour,spacing,type,componentsandmore,writtenoutindetail.
