feat(landing): sincronizare design v2 + aliniere latime sectiuni
Re-importa design-ul actualizat din claude.ai/design:
- sectiune noua PRIVACY ("Datele clientilor tai nu devin marfa")
- SOLVE rescris ("Nu trebuie sa fii bun cu calculatorul", text condensat)
- subtitlu preturi: "Premium gratuit 30 de zile, apoi automat pe Gratuit"
- butoane preturi uniformizate la "Creeaza cont gratuit"
Fix aliniere: wrapperele de sectiune aveau max-width inconsistent
(980/1040/1120/none) -> continutul nu se alinia intre sectiuni (unele benzi
pareau mai late). Scoatem capacele structurale ca tot continutul sa umple
acelasi gutter; capacele tipografice (text centrat) raman.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -145,7 +145,7 @@
|
||||
|
||||
<!-- PROBLEM -->
|
||||
<div style="padding:80px 40px;background:color-mix(in srgb,#E05D5D 6%,var(--bg,#0f1218));">
|
||||
<div style="display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;max-width:1120px;margin:0 auto;">
|
||||
<div style="display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin:0 auto;">
|
||||
<div>
|
||||
<h2 style="font:700 38px/1.14 'IBM Plex Sans';letter-spacing:-.02em;margin:0 0 18px;color:var(--text,#e6e9ef);">Pentru fiecare comandă stai 2–3 minute și tastezi pe rar-autopass.ro</h2>
|
||||
<p style="font:400 16px/1.65 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0 0 16px;">VIN, cod prestație, kilometraj, dată, tip operație — câmp cu câmp, comandă cu comandă. La 20 de mașini pe zi pierzi aproape o oră. În fiecare zi.</p>
|
||||
@@ -179,7 +179,7 @@
|
||||
<h2 style="font:700 36px 'IBM Plex Sans';letter-spacing:-.02em;margin:0 0 12px;color:var(--text,#e6e9ef);">Fă socoteala. Minutele acelea sunt bani.</h2>
|
||||
<p style="font:400 16px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Mută cursorul la volumul service-ului tău și vezi cât timp și câți bani pleacă pe raportarea manuală.</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto;align-items:stretch;">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 auto;align-items:stretch;">
|
||||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;padding:32px;">
|
||||
<div style="margin-bottom:28px;">
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;"><span style="font:500 14px 'IBM Plex Sans';color:var(--text,#e6e9ef);">Prestații pe lună</span><span style="font:700 20px 'IBM Plex Mono';color:var(--accent,#2E74D6);" id="out-pres">300</span></div>
|
||||
@@ -201,7 +201,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width:980px;margin:24px auto 0;display:flex;gap:20px;align-items:flex-start;background:color-mix(in srgb,#E0A93B 9%,var(--card,#181c24));border:1px solid color-mix(in srgb,#E0A93B 34%,var(--line,#262b36));border-radius:12px;padding:26px 28px;">
|
||||
<div style="margin:24px auto 0;display:flex;gap:20px;align-items:flex-start;background:color-mix(in srgb,#E0A93B 9%,var(--card,#181c24));border:1px solid color-mix(in srgb,#E0A93B 34%,var(--line,#262b36));border-radius:12px;padding:26px 28px;">
|
||||
<div style="width:44px;height:44px;flex-shrink:0;border-radius:8px;background:color-mix(in srgb,#E0A93B 16%,transparent);display:flex;align-items:center;justify-content:center;color:#E0A93B;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l8 4v5c0 4.4-3.1 8.3-8 9.5C7.1 20.3 4 16.4 4 12V7l8-4z"/><path d="M9.5 12l1.8 1.8L15 10"/></svg></div>
|
||||
<div>
|
||||
<div style="font:700 16px 'IBM Plex Sans';color:var(--text,#e6e9ef);margin-bottom:7px;">Evită riscul amenzilor — transmite automat la RAR Auto-Pass</div>
|
||||
@@ -212,28 +212,9 @@
|
||||
|
||||
<!-- SOLVE -->
|
||||
<div style="padding:80px 40px;background:color-mix(in srgb,var(--accent,#2E74D6) 8%,var(--bg,#0f1218));border-top:1px solid var(--line,#262b36);border-bottom:1px solid var(--line,#262b36);">
|
||||
<div style="text-align:center;max-width:740px;margin:0 auto 44px;">
|
||||
<h2 style="font:700 36px 'IBM Plex Sans';letter-spacing:-.02em;margin:0 0 12px;color:var(--text,#e6e9ef);">Încarci o dată. Restul se întâmplă automat.</h2>
|
||||
<p style="font:400 16px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Exporți un fișier CSV/XLSX din programul tău de service și îl imporți în ROMFAST AutoPass — pe tot, cu auto-mapări. Durează până în 5 minute, doar dacă apar operații noi. Sau trimiți direct prin API.</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:start;max-width:1040px;margin:0 auto;">
|
||||
<div style="text-align:center;">
|
||||
<div style="width:46px;height:46px;margin:0 auto 14px;border-radius:99px;background:color-mix(in srgb,var(--accent,#2E74D6) 16%,transparent);display:flex;align-items:center;justify-content:center;font:700 17px 'IBM Plex Mono';color:var(--accent,#2E74D6);">1</div>
|
||||
<h3 style="font:700 18px 'IBM Plex Sans';margin:0 0 7px;color:var(--text,#e6e9ef);">Încarci o dată</h3>
|
||||
<p style="font:400 14px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Pui fișierul CSV/XLSX sau conectezi softul prin API — o singură acțiune pentru tot lotul.</p>
|
||||
</div>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--sub,#8b93a7)" stroke-width="2" style="margin-top:12px;"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
<div style="text-align:center;">
|
||||
<div style="width:46px;height:46px;margin:0 auto 14px;border-radius:99px;background:color-mix(in srgb,var(--accent,#2E74D6) 16%,transparent);display:flex;align-items:center;justify-content:center;font:700 17px 'IBM Plex Mono';color:var(--accent,#2E74D6);">2</div>
|
||||
<h3 style="font:700 18px 'IBM Plex Sans';margin:0 0 7px;color:var(--text,#e6e9ef);">Mapare automată</h3>
|
||||
<p style="font:400 14px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Potrivim coloanele automat și îți sugerăm prestațiile. Confirmi o dată, ținem minte data viitoare.</p>
|
||||
</div>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--sub,#8b93a7)" stroke-width="2" style="margin-top:12px;"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
<div style="text-align:center;">
|
||||
<div style="width:46px;height:46px;margin:0 auto 14px;border-radius:99px;background:color-mix(in srgb,var(--accent,#2E74D6) 16%,transparent);display:flex;align-items:center;justify-content:center;font:700 17px 'IBM Plex Mono';color:var(--accent,#2E74D6);">3</div>
|
||||
<h3 style="font:700 18px 'IBM Plex Sans';margin:0 0 7px;color:var(--text,#e6e9ef);">Trimitem și urmărești</h3>
|
||||
<p style="font:400 14px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Validăm, eliminăm duplicatele și trimitem la RAR. Tu vezi starea live a fiecărei prestații.</p>
|
||||
</div>
|
||||
<div style="max-width:780px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font:700 36px 'IBM Plex Sans';letter-spacing:-.02em;margin:0 0 18px;color:var(--text,#e6e9ef);">Nu trebuie să fii bun cu calculatorul</h2>
|
||||
<p style="font:400 19px/1.75 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0 auto;max-width:660px;"><span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">Încarci</span> fișierul CSV/XLSX (sau trimiți direct prin API). ROA Auto-Pass îți propune asocierile — tu le <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">confirmi sau corectezi</span> o singură dată — apoi le <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">trimitem</span> la RAR, iar tu doar <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">urmărești</span> pe ecran.</p>
|
||||
</div>
|
||||
<div style="text-align:center;max-width:880px;margin:38px auto 0;font:400 20px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);">
|
||||
<span style="text-decoration:line-through;text-decoration-color:var(--errt,#E05D5D);text-decoration-thickness:2px;">2–3 minute de tastat pentru fiecare comandă</span><span style="color:var(--text,#e6e9ef);font-weight:700;"> → câteva secunde pentru tot lotul.</span>
|
||||
@@ -272,7 +253,7 @@
|
||||
<div style="text-align:center;margin-bottom:44px;">
|
||||
<div style="font:500 13px 'IBM Plex Sans';color:var(--accent,#2E74D6);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;">Preț</div>
|
||||
<h2 style="font:700 34px 'IBM Plex Sans';letter-spacing:-.02em;margin:0 0 10px;color:var(--text,#e6e9ef);">Pentru un service mic, nu costă nimic</h2>
|
||||
<p style="font:400 15px 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Crearea contului este gratuită, la orice plan. Fără card bancar.</p>
|
||||
<p style="font:400 15px 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0;">Fiecare cont începe cu <strong style="color:var(--text,#e6e9ef);font-weight:600;">Premium gratuit 30 de zile</strong>. Apoi trece automat pe Gratuit — fără plată, dacă nu alegi alt plan. Fără card bancar.</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 auto;align-items:start;">
|
||||
<!-- Gratuit -->
|
||||
@@ -290,7 +271,7 @@
|
||||
<div style="display:flex;gap:9px;font:400 13px/1.4 'IBM Plex Sans';color:var(--sub,#8b93a7);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--sub,#8b93a7)" stroke-width="1.8" style="flex-shrink:0;margin-top:1px;"><path d="M4 12h16"/></svg>Fără import API</div>
|
||||
<span style="display:none;"></span>
|
||||
</div>
|
||||
<button data-act="auth" data-tab="register" data-plan="Gratuit" style="width:100%;height:46px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 14px 'IBM Plex Sans';cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;" style-hover="background:#16864a;border-color:#16864a;transform:translateY(-1px)">Începe gratuit</button>
|
||||
<button data-act="auth" data-tab="register" data-plan="Gratuit" style="width:100%;height:46px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 14px 'IBM Plex Sans';cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;" style-hover="background:#16864a;border-color:#16864a;transform:translateY(-1px)">Creează cont gratuit</button>
|
||||
</div>
|
||||
<!-- Standard -->
|
||||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;padding:26px 24px;">
|
||||
@@ -304,7 +285,7 @@
|
||||
<div style="display:flex;gap:9px;font:400 13px/1.4 'IBM Plex Sans';color:var(--sub,#8b93a7);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--sub,#8b93a7)" stroke-width="1.8" style="flex-shrink:0;margin-top:1px;"><path d="M4 12h16"/></svg>Fără import API</div>
|
||||
<span style="display:none;"></span>
|
||||
</div>
|
||||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px 'IBM Plex Sans';cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="Standard">Alege Standard</button>
|
||||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px 'IBM Plex Sans';cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="Standard">Creează cont gratuit</button>
|
||||
</div>
|
||||
<!-- Pro -->
|
||||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;padding:26px 24px;position:relative;">
|
||||
@@ -319,7 +300,7 @@
|
||||
<div style="display:flex;gap:9px;font:400 13px/1.4 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Categorisire automată, cu confirmare la operațiile incerte</div>
|
||||
<span style="display:none;"></span>
|
||||
</div>
|
||||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px 'IBM Plex Sans';cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="Pro">Alege Pro</button>
|
||||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px 'IBM Plex Sans';cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="Pro">Creează cont gratuit</button>
|
||||
</div>
|
||||
<!-- Premium -->
|
||||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;padding:26px 24px;">
|
||||
@@ -332,20 +313,41 @@
|
||||
<div style="display:flex;gap:9px;font:400 13px/1.4 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Suport telefonic și online</div>
|
||||
<div style="display:flex;gap:9px;font:400 13px/1.4 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Asistență și onboarding dedicate</div>
|
||||
</div>
|
||||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px 'IBM Plex Sans';cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="Premium">Contactează-ne</button>
|
||||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px 'IBM Plex Sans';cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="Premium">Creează cont gratuit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PRIVACY -->
|
||||
<div style="padding:80px 40px;border-top:1px solid var(--line,#262b36);">
|
||||
<div style="margin:0 auto;display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:48px;align-items:center;">
|
||||
<h2 style="font:700 30px/1.2 'IBM Plex Sans';letter-spacing:-.02em;margin:0;color:var(--text,#e6e9ef);">Datele clienților tăi nu devin marfă</h2>
|
||||
<div style="display:flex;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:200px;padding:4px 28px;border-left:1px solid var(--line,#262b36);">
|
||||
<div style="font:700 16px 'IBM Plex Sans';color:var(--text,#e6e9ef);margin-bottom:7px;">Reținem doar strict necesarul</div>
|
||||
<div style="font:400 14px/1.55 'IBM Plex Sans';color:var(--sub,#8b93a7);">Doar datele de care e nevoie ca să trimitem la RAR — nimic adunat în plus, nici la conturile gratuite.</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;padding:4px 28px;border-left:1px solid var(--line,#262b36);">
|
||||
<div style="font:700 16px 'IBM Plex Sans';color:var(--text,#e6e9ef);margin-bottom:7px;">Doar pentru scopul declarat</div>
|
||||
<div style="font:400 14px/1.55 'IBM Plex Sans';color:var(--sub,#8b93a7);">Maparea și trimiterea la RAR. Nu le vindem și nu le dăm mai departe.</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;padding:4px 28px;border-left:1px solid var(--line,#262b36);">
|
||||
<div style="font:700 16px 'IBM Plex Sans';color:var(--text,#e6e9ef);margin-bottom:7px;">Se șterg la 3 luni</div>
|
||||
<div style="font:400 14px/1.55 'IBM Plex Sans';color:var(--sub,#8b93a7);">Automat, fără să ceri — sau chiar acum, cu un singur click.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AUTH / REGISTER -->
|
||||
<div id="inregistrare" style="padding:80px 40px;border-top:1px solid var(--line,#262b36);background:color-mix(in srgb,var(--accent,#2E74D6) 5%,var(--bg,#0f1218));">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1040px;margin:0 auto;align-items:center;">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:0 auto;align-items:center;">
|
||||
<div>
|
||||
<div style="font:500 13px 'IBM Plex Sans';color:var(--accent,#2E74D6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;">Creează cont</div>
|
||||
<h2 style="font:700 34px/1.15 'IBM Plex Sans';letter-spacing:-.02em;margin:0 0 14px;color:var(--text,#e6e9ef);">Creează cont în 2 minute și declară azi la RAR</h2>
|
||||
<p style="font:400 16px/1.6 'IBM Plex Sans';color:var(--sub,#8b93a7);margin:0 0 24px;">Te înregistrezi gratuit, fără card bancar. Imediat poți încărca primul fișier sau conecta softul de service.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:12px;">
|
||||
<div style="display:flex;gap:10px;align-items:center;font:400 15px 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Gratuit până la 100 de prestații/lună</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;font:400 15px 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Premium gratuit 30 de zile, apoi automat pe Gratuit</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;font:400 15px 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Fără card bancar la înscriere</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;font:400 15px 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Conform Legii 142/2023 și OMTI 210/2024</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;font:400 15px 'IBM Plex Sans';color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Datele cu caracter personal criptate (GDPR)</div>
|
||||
|
||||
Reference in New Issue
Block a user