LIVE PRODUCT

SolMais

SolMais — Solar energy with photographic hero and interactive simulation

Use now Architecture

solmais.expostacker.com.br

live preview

Tech stack: HTML5 CSS3 JavaScript Cloudflare Pages Sora Inter

95%
Bill reduction (illustrative): 3
Acquisition models: AA
WCAG compliance

Client

SolMais

Sector

Solar Photovoltaic Energy

Timeline

3 dias de implementação · 2026-08

Live product

Use now

Results

Client-reported results during rollout

90+ Lighthouse mobile performance

Baseline: 80-85 (MVP)

Fonte: (estimated)

AA WCAG color contrast compliance

Baseline: Fail (2.28:1)

Fonte: (delivered)

8.5 Visual quality (estimated)

Baseline: 6.9 (MVP)

Fonte: (estimated)

Client-reported data

The challenge

SolMais is a solar energy landing page demonstration. The experience includes a hero with real solar rooftop photo and navy overlay, interactive savings simulator with illustrative calculations, comparison of 3 acquisition models (cash, financing, subscription), varied testimonials with single disclosure, accessible FAQ and legal pages.

Empresas de energia solar precisam comunicar economia, processo e credibilidade em segundos. A maioria dos sites do setor usa fotos genéricas, copy vago e simuladores que parecem planilhas. Falta uma experiência que combine impacto visual real com transparência sobre o que é demonstração.

The approach

We researched 20 agents analyzing premium solar sites (Tesla, Sunrun, SunPower, Palmetto, Enphase, SolarEdge) and auditing the page against professional standards. We identified the weak point was visual: no photo, no distinctive typography and insufficient contrast. We applied a hero with real solar installation photo, self-hosted Sora + Inter, accessible navy + dark orange palette (WCAG AA), scroll-triggered animations and clean copy without fake seals.

The solution

Hero with real solar installation photo (Unsplash) and navy gradient overlay for text contrast
Sora (display) + Inter (body) typography self-hosted with critical font preload
Refined palette: navy #0A2463 + dark orange #E07B00 with WCAG AA 4.6:1 contrast
Interactive savings simulator with illustrative calculations and aria-live for accessibility
Comparison of 3 acquisition models (cash, financing, subscription)
Varied testimonials (4-5 stars) with installation dates and single section disclosure
Accessible FAQ with details/summary and automatic closing of other items
Scroll-triggered animations via Intersection Observer with stagger on card groups
Respects prefers-reduced-motion (animations disabled)
Cards with hairline border and subtle shadow, 4px hover lift
Schema.org as WebApplication (not LocalBusiness — not a real company)
Hero image with responsive srcset (800w mobile / 1920w desktop) and fetchpriority high
Removal of fake seals (INMETRO, ANEEL, ABSOLAR) and illustrative CNPJ

Timeline

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

8 horas

Discovery

Premium solar sites research with 20 agents (10 analysis, 10 market research)
Benchmark against Tesla, Sunrun, SunPower, Palmetto, Enphase, SolarEdge
Visual, technical, performance and accessibility audit of initial version

4 horas

Design

Photographic hero with navy gradient overlay
Accessible navy + dark orange palette (WCAG AA)
Self-hosted Sora + Inter typography
Card system with hairline border and hover lift

6 horas

Dev

Hero with real photo (Unsplash) + responsive srcset
Interactive savings simulator kept from MVP
Scroll-triggered animations via Intersection Observer
Clean copy: fake seals removed, varied testimonials, single disclosure
Schema.org changed from LocalBusiness to WebApplication

Methodology

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Research with 20 specialized agents (10 analysis + 10 market)

Benchmark against international premium solar sites

Design centered on visual impact and honesty

Mobile-first

Accessibility first (WCAG AA)

Performance first

Focused incremental iteration

Architecture

→ Static site served via CDN with immutable asset caching
→ Savings simulator with illustrative client-side calculations
→ Scroll-triggered animations via Intersection Observer
→ Self-hosted fonts (Sora + Inter) with critical preload
→ Hero image with responsive srcset and fetchpriority high
→ Ready for evolution with backend, CRM and payment gateway

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

Frontend

HTML5

Why: Native semantics and SEO.

Rejected alternative: JSX in Next.js

CSS3

Why: Design tokens, hairline borders, scroll animations and responsiveness without build.

Rejected alternative: Tailwind CSS

JavaScript

Why: Simulator, menu, FAQ and scroll animations without frameworks.

Rejected alternative: React + TypeScript

Assets

Sora + Inter (self-hosted)

Why: Local fonts with preload to eliminate external connection.

Rejected alternative: Google Fonts CDN

Unsplash + srcset

Why: Real solar installation photo with responsive srcset and fetchpriority.

Rejected alternative: CSS illustration

Deploy

Cloudflare Pages

Why: Static hosting with SSL and global cache.

Rejected alternative: Vercel

Decision log

What I chose, what I rejected, and why.

Photographic hero instead of CSS composition

Why: Premium solar sites (Tesla, Sunrun, Palmetto) use real installation photography. A solar rooftop photo communicates the product in 2 seconds — something gradient mesh and floating cards cannot.

Rejected alternatives: CSS composition with gradient mesh and glass cards (like VendaMais) — rejected for looking like an empty template for the solar sector.

Sora + Inter instead of Inter only

Why: Sora in headings gives tech personality and differentiates from Inter used in body. Self-hosted maintains performance without external connection.

Rejected alternatives: Inter only — functional, but without distinctive personality in headings.

Dark orange #E07B00 instead of light orange #F79320

Why: Light orange #F79320 on white has 2.28:1 contrast, failing WCAG AA. Dark orange #E07B00 achieves 4.6:1, passing AA for normal text.

Rejected alternatives: Keep #F79320 — rejected for failing accessibility.

Removal of fake seals (INMETRO, ANEEL, ABSOLAR)

Why: SolMais is a portfolio project. Using real organization seals implies certification or affiliation that doesn't exist. Ethically unacceptable.

Rejected alternatives: Reframing seals as research references — rejected for still potentially confusing visitors.

Schema.org as WebApplication, not LocalBusiness

Why: LocalBusiness implies a real company with address, hours and CNPJ. WebApplication correctly reflects that it's a web demonstration without commercial operation.

Rejected alternatives: LocalBusiness with fake address — rejected for creating legal ambiguity.

Gamification

Experience points (XP)

Every sales action earns XP, making progress visible and measurable.

Leagues and seasons

Performance-based leagues with promotion and relegation each cycle.

Badges and achievements

Recognition for specific goals, cadence, and sales consistency.

Live ranking

Real-time leaderboard to stimulate healthy competition.

Rewards and unlocks

Tangible benefits unlocked at each score threshold.

Challenges and missions

Short-term objectives to keep engagement and test new tactics.

Security and access

Security and privacy

No personal data is collected or sent to a server
Simulator is fully client-side — no persistence
No lead forms, login or registration
Schema.org declares WebApplication, not LocalBusiness
Ready for evolution with backend, CRM and payment gateway

Lessons learned

Not everything went as planned.

— A solar energy site needs real photography to have credibility. CSS composition works for e-commerce, but for solar the user wants to see the product — panels on a roof. Honesty about the demonstrative nature (no fake seals, no CNPJ, single disclosure) strengthens rather than weakens the portfolio.