docs: prompt landing page comerciala pentru claude.ai/design
Referinta pentru generarea unui mockup de homepage public: plan gratuit (sub 100 prezentari/luna), beneficii interfata, integrare API. Tokeni de culoare/tipografie preluati din design.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
112
docs/landing-page-prompt.md
Normal file
112
docs/landing-page-prompt.md
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
# Prompt landing page — claude.ai/design
|
||||||
|
|
||||||
|
Referinta pentru generarea unui mockup de landing page comerciala (homepage public) a
|
||||||
|
produsului. De copiat ca atare in claude.ai/design. Tokenii de culoare/tipografie/control sunt
|
||||||
|
preluati din `design.md` (sursa de adevar a sistemului de design) — orice modificare la paleta
|
||||||
|
sau scara de control se face intai acolo, apoi se reflecta aici.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
Creează un mockup pentru o LANDING PAGE comercială (homepage public) a unui produs SaaS B2B românesc.
|
||||||
|
|
||||||
|
== PRODUS ==
|
||||||
|
Nume: Gateway RAR AUTOPASS (de la ROMFAST).
|
||||||
|
Ce face: un serviciu web prin care atelierele service-auto din România își declară automat
|
||||||
|
prestațiile la sistemul RAR AUTOPASS — o obligație legală (Legea 142/2023, OM 210/2024).
|
||||||
|
Înlocuiește raportarea manuală. Publicul țintă: administratori și recepționeri de service auto,
|
||||||
|
oameni ne-tehnici, ocupați. Mesajul cheie: "Conformitate RAR fără bătaie de cap — încarci un
|
||||||
|
fișier sau conectezi softul de service, noi trimitem la RAR în siguranță."
|
||||||
|
|
||||||
|
Tonul: serios, de încredere, instituțional dar modern. NU startup glumeț, NU emoji.
|
||||||
|
Limba: română (cu diacritice în text vizibil). Fără emoji nicăieri.
|
||||||
|
|
||||||
|
== OBIECTIV PAGINĂ ==
|
||||||
|
Convinge un service auto că produsul rezolvă obligația legală RAR simplu și sigur, și să se
|
||||||
|
înregistreze. Acțiune dominantă: "Creează cont" / "Autentificare".
|
||||||
|
Cârlig comercial principal: GRATUIT pentru service-urile mici, până la 100 de prezentări pe lună.
|
||||||
|
|
||||||
|
== SISTEM DE CULORI (folosește exact aceste valori — temă întunecată ca implicit) ==
|
||||||
|
Fundal pagină: #0f1218
|
||||||
|
Suprafață card: #181c24
|
||||||
|
Text principal: #e6e9ef
|
||||||
|
Text secundar: #8b93a7
|
||||||
|
Borduri/linii: #262b36
|
||||||
|
Accent (CTA/link): #2E74D6 (azur ROMFAST)
|
||||||
|
Succes: #2FBF8F
|
||||||
|
Atenție: #E0A93B
|
||||||
|
Eroare: #E05D5D
|
||||||
|
Oferă și o variantă pe temă LIGHT: fundal #f5f7fa, card #ffffff, text #1a1d24,
|
||||||
|
text secundar #5c6473, linii #e2e5ea, accent #1F66C9.
|
||||||
|
|
||||||
|
== TIPOGRAFIE ==
|
||||||
|
Font UI: IBM Plex Sans (weights 400/500/700).
|
||||||
|
Font mono (pentru coduri, VIN, ID-uri tehnice dacă apar): IBM Plex Mono.
|
||||||
|
Titlu hero mare și greu (700, letter-spacing ușor negativ). Corp 15–16px, secundar 12–13px.
|
||||||
|
|
||||||
|
== STIL CONTROALE ==
|
||||||
|
Butoane: radius 6px, padding ~10px 18px, înălțime ~44px.
|
||||||
|
- Primar: fundal #2E74D6, text alb, hover ușor mai luminos.
|
||||||
|
- Secundar: transparent, text deschis, bordură #262b36.
|
||||||
|
Carduri: fundal #181c24, bordură 1px #262b36, radius 10px, plat (umbră doar la elemente plutitoare).
|
||||||
|
Pill/badge: radius 99px. Iconițe simple liniare, monocrome, NU ilustrații colorate gen 3D.
|
||||||
|
Aspect plat, sobru, mult spațiu de respirație. Densitate compactă dar aerisită.
|
||||||
|
|
||||||
|
== STRUCTURĂ PAGINĂ (de sus în jos) ==
|
||||||
|
1. HEADER fix: stânga logo "ROMFAST" (text wordmark, accent azur pe "FAST"); dreapta două
|
||||||
|
butoane: "Autentificare" (secundar) + "Creează cont" (primar). Comutator temă opțional.
|
||||||
|
|
||||||
|
2. HERO: titlu puternic (ex. "Declară prestațiile la RAR AUTOPASS, automat"), subtitlu de o frază
|
||||||
|
despre conformitate legală fără efort. Sub titlu, un badge/pill verde vizibil:
|
||||||
|
"Gratuit până la 100 de prezentări pe lună". Apoi un buton primar mare "Creează cont gratuit"
|
||||||
|
+ un buton secundar "Vezi cum funcționează". Sub butoane, o linie mică de încredere
|
||||||
|
(ex. "Conform Legii 142/2023 · datele tale criptate · fără card bancar"). În dreapta hero:
|
||||||
|
un mockup vizual al dashboardului aplicației (un card cu o listă de "Trimiteri" cu pill-uri de
|
||||||
|
stare colorate: Trimis=verde, În coadă=albastru, Eroare=roșu).
|
||||||
|
|
||||||
|
3. BANDĂ DE ÎNCREDERE: "Construit de ROMFAST" + mențiune că înlocuiește integrarea/raportarea manuală.
|
||||||
|
|
||||||
|
4. SECȚIUNE "Cum funcționează" — 3 pași cu iconițe liniare:
|
||||||
|
(1) Încarci fișierul (xlsx/csv) sau conectezi softul de service prin API,
|
||||||
|
(2) Verifici și mapezi coloanele o singură dată (le ținem minte pentru data viitoare),
|
||||||
|
(3) Trimitem automat la RAR, tu urmărești starea live.
|
||||||
|
|
||||||
|
5. SECȚIUNE BENEFICII — de ce merită această interfață (6 carduri scurte, fiecare cu iconiță liniară):
|
||||||
|
- "Zero raportare manuală" — încarci un fișier, gata; nu mai introduci prezentări una câte una în portalul RAR.
|
||||||
|
- "Mapare reținută" — potrivești coloanele o singură dată per format; fișierele următoare se completează singure.
|
||||||
|
- "Anti-duplicat" — verificare automată ca aceeași prezentare să nu ajungă de două ori la RAR (RAR nu permite anulare).
|
||||||
|
- "Validare înainte de trimitere" — erorile (VIN, cod prestație, kilometraj) sunt prinse și explicate înainte să meargă la RAR.
|
||||||
|
- "Date criptate (GDPR)" — datele cu caracter personal sunt criptate și șterse automat după perioada legală.
|
||||||
|
- "Stare live" — vezi în timp real ce s-a trimis, ce e în coadă și ce trebuie corectat.
|
||||||
|
|
||||||
|
6. SECȚIUNE INTEGRARE API (pentru service-uri cu soft propriu / ROAAUTO):
|
||||||
|
Card mai mare, pe două coloane. Stânga: titlu "Ai deja un soft de service? Conectează-l direct."
|
||||||
|
text scurt despre faptul că nu mai e nevoie de export manual — softul tău trimite prezentările
|
||||||
|
automat printr-un singur apel API, cu cheie API per cont. Dreapta: un mic bloc de cod cu font
|
||||||
|
mono (IBM Plex Mono) care arată un exemplu de request, ex.:
|
||||||
|
POST /v1/prezentari
|
||||||
|
Authorization: rfak_••••••••
|
||||||
|
{ "vin": "...", "cod_prestatie": "...", "odometru": ... }
|
||||||
|
Sub el un link/buton secundar "Vezi documentația API".
|
||||||
|
|
||||||
|
7. SECȚIUNE PREȚ — simplă, 2 planuri unul lângă altul:
|
||||||
|
- "Gratuit": "0 lei/lună · până la 100 de prezentări/lună · import web + API · toate funcțiile de bază".
|
||||||
|
Marcat ca recomandat pentru service-uri mici. Buton primar "Începe gratuit".
|
||||||
|
- "Volum mare": "Pentru service-uri cu peste 100 de prezentări/lună · contactează-ne".
|
||||||
|
Buton secundar "Contact".
|
||||||
|
Accent pe ideea că pentru un service mic nu costă nimic, fără card bancar la înscriere.
|
||||||
|
|
||||||
|
8. CTA FINAL: card mare centrat "Începe să declari la RAR în câteva minute" + buton primar "Creează cont gratuit".
|
||||||
|
|
||||||
|
9. FOOTER: linkuri (Termeni, Confidențialitate/GDPR, Documentație API, Contact), © ROMFAST, mențiune legală.
|
||||||
|
|
||||||
|
== RESPONSIVE ==
|
||||||
|
Arată DOUĂ artboard-uri: desktop (1280px) și mobil (375px). Pe mobil: o coloană, butoanele CTA
|
||||||
|
full-width, header colapsat, cardurile de preț stivuite vertical. Ținte de atins minim 44px pe mobil.
|
||||||
|
|
||||||
|
== ACCESIBILITATE ==
|
||||||
|
Contrast text minim 4.5:1. Starea comunicată prin text + culoare (nu doar culoare) — pill-urile de
|
||||||
|
stare au etichetă text, nu doar pastilă colorată.
|
||||||
|
|
||||||
|
Livrează mockup-ul în tema întunecată ca varianta principală, plus un preview al heroului pe tema light.
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user