Site-uri web
Site-uri webTOP WRAP S.R.L.

Site cinematic pe Next.js, cu un configurator AI de folii

Un site de prezentare construit de la zero pe Next.js: 100% static, deci rapid, scroll cinematic cu GSAP, design dark adaptat perfect pe telefon și un configurator AI care pune folia pe poza mașinii. Mai jos e ce are în față și ce are în spate.

Vezi live
Site cinematic pe Next.js, cu un configurator AI de folii

100% static

Arhitectură

Next.js 16 + React 19

Front-end

GSAP + Lenis

Scroll cinematic

Configurator AI

Tool integrat

Punctul de plecare

Unde era clientul

Brieful pentru site a fost clar: să arate ca un showroom premium, să se încarce instant și să aibă ceva ce niciun atelier din zonă nu are.

Fără teme gata făcute, fără page builder. Totul construit de la zero, ca să arate și să funcționeze exact cum trebuie, nu cum permite un șablon.

Provocarea

Ce trebuia rezolvat

Provocarea reală a fost tehnică. Un site greu vizual, cu imagini mari și animații, trebuie totuși să fie rapid.

Scroll-ul cinematic nu are voie să se simtă greoi. Experiența trebuie să fie identică pe desktop și pe telefon. Iar configuratorul AI trebuie să proceseze poze reale fără un cost de infrastructură care să mănânce tot.

Ce am construit

Sistemul, pas cu pas

Apasa pe un pas pentru detalii

Fără template. Next.js 16 cu React 19 și TypeScript, design dark cu accent ca o lumină vie și tipografie de poster auto. Fiecare secțiune e gândită cap-coadă, nu trasă dintr-un kit.

Secțiunea de servicii e un deck care se derulează fluid, legat pe scroll. Mișcarea e calibrată să se simtă fină, nu încărcată, și se oprește automat pentru cei care preferă mai puțină animație.

Aceeași senzație premium pe telefon ca pe desktop: hero adaptat, meniu curat, butoane mari ușor de apăsat. Pe ecran mic site-ul rămâne la fel de clar și de rapid.

Clientul încarcă o poză cu mașina, alege dintr-o bibliotecă de peste 300 de folii reale și primește mașina lui înfoliată. Upload, validare, preview și comparație înainte/după cu zoom, totul direct în browser.

Generarea rulează pe un backend separat care vorbește cu un model AI, cu polling, limită de cereri și tratarea erorilor. Site-ul rămâne static și rapid, iar partea grea de procesare stă în afara lui.

Imagini servite în AVIF și WebP, cache pe un an, randare 100% statică. Plus schemă de date pentru Google, sitemap, llms.txt pentru motoarele AI și headere de securitate complete (CSP, HSTS).

Rezultatul

Ce a ieșit

Un site care arată premium și se încarcă la fel de repede ca unul simplu. În față: experiență cinematic, mobil impecabil și un tool AI pe care îl folosești chiar tu. În spate: Next.js static, fără server de întreținut, optimizat pentru Google și securizat.

Asta primești dacă vrei și tu un site la nivelul ăsta. Tehnologia e aceeași, indiferent de domeniul tău.

Galerie

Din proiect

Apasa pe o imagine pentru a o mari

Construit cu

Next.js 16
React 19
TypeScript
Tailwind CSS v4
GSAP
Lenis
AI / Replicate
Netlify
Ce urmeaza

Pașii următori

Site-ul e construit să crească. Ce urmează:

  • Pagini dedicate pe fiecare serviciu
  • Galerie cu lucrări reale
  • Secțiune de întrebări frecvente, optimizată pentru căutări și pentru AI
  • Legarea configuratorului direct de o cerere de ofertă

Urmatorul pas

Vrei un sistem ca acesta pentru afacerea ta?

Programeaza o discutie de 30 de minute. Analizam situatia ta concreta si iti spun exact ce pasi ai de facut. Gratuit, fara obligatii.