Studiu de caz · Concept
Helios Solar — Energie Solară
Un site de marketing bilingv pentru un instalator solar fictiv din Moldova, construit în jurul unui calculator interactiv de economii și amortizare.
Prezentare generală
Helios Solar este un proiect concept care explorează cum s-ar putea prezenta online un instalator de panouri solare din Moldova. Cerința a fost un site de marketing one-page care transformă curiozitatea unui vizitator despre energia solară într-un număr concret și personalizat — și o cerere de ofertă.
Piesa centrală este un calculator interactiv: proprietarul introduce factura lunară la curent și tipul acoperișului și vede instant puterea recomandată a sistemului, economiile anuale estimate, perioada de amortizare și economiile pe 25 de ani — animate pe măsură ce cifrele cresc. Restul paginii este complet bilingv prin next-intl, într-o identitate calmă și premium, în bleumarin și chihlimbar.
Cerința
- Site de marketing one-page pentru conceptul unui instalator solar din Moldova
- Calculator interactiv: factura lunară + tipul acoperișului → putere, economii, amortizare
- Interfață bilingvă — RO implicit, RU secundar
- Identitate calmă și premium în bleumarin și chihlimbar
- Responsive și mobile-first
Abordare
Calculator interactiv de economii
Un singur câmp — factura lunară la curent — plus tipul acoperișului alimentează o configurație ajustabilă de constante locale (tarif, randament per kW, cost de instalare) pentru a calcula puterea sistemului, economiile anuale, amortizarea și economiile pe 25 de ani.
Cifre de rezultat animate
Rezultatele cresc animat cu un ease-out pe requestAnimationFrame, cu o stare goală tip skeleton și formatarea numerelor în funcție de limbă.
Hero fotografic full-bleed
O fotografie hero pe toată lățimea, cu un gradient pentru lizibilitate — text închis pe deschis pe desktop, text alb pe închis pe mobil — astfel încât imaginea rămâne vie la orice lățime.
Strat de conținut bilingv
Tot textul trăiește în fișiere de mesaje next-intl — română implicit, rusă secundar — cu un comutator de limbă care păstrează ruta curentă.
Animație la scroll
Secțiunile apar cu fade-and-rise printr-un Intersection Observer, condiționate de prefers-reduced-motion și vizibile implicit dacă scripturile eșuează.
Aspecte tehnice
- Next.js 16 App Router cu TypeScript și Tailwind CSS v4 (token-uri @theme, CSS-first)
- Logica calculatorului izolată într-un singur obiect de configurare ajustabil
- Routing next-intl — RO implicit, RU secundar — fără text hardcodat
- Imagini locale next/image, iconițe Lucide, deployment pe Vercel
Galerie
Rezultat
- Un landing solar bilingv finisat, live la helios-solar.vercel.app
- Un calculator interactiv care transformă o factură într-o estimare personalizată a economiilor
- Cod Next.js curat, pregătit pentru producție, cu build și lint care trec
- Servește ca demo de portofoliu pentru site-uri de marketing orientate pe conversie
Vrei ceva similar?
Ai un proiect în minte? Hai să discutăm ce pot construi pentru tine.
Pornește un proiect→