ux(landing): Przeniesiono "Jak to działa?" wyżej na stronie głównej
Feedback od testera: sekcja wyjaśniająca flow powinna być widoczna wcześniej, przed szczegółowymi kartami funkcji. Nowa kolejność: 1. Hero (nagłówek + statystyki + CTA) 2. "Jak to działa?" (1→2→3) ← przeniesione wyżej 3. Karty funkcji (Pełny katalog, AI Asystent, Filtry) 4. "Do czego użyjesz tego portalu?" 5. Bottom CTA Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
ebbf75e7a0
commit
9e82c00ca4
@ -295,6 +295,36 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How it works - FIRST (moved up per UX feedback) -->
|
||||
<div style="background: white; padding: var(--spacing-2xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin-bottom: var(--spacing-2xl); position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(16, 185, 129, 0.05)); border-radius: 50%; pointer-events: none;"></div>
|
||||
<div style="position: absolute; bottom: -50px; left: -50px; width: 200px; height: 200px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(239, 68, 68, 0.05)); border-radius: 50%; pointer-events: none;"></div>
|
||||
|
||||
<h2 class="animated-underline" style="text-align: center; font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: var(--text-primary); position: relative;">
|
||||
Jak to działa?
|
||||
</h2>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl);">
|
||||
<div style="text-align: center; position: relative;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: var(--font-size-3xl); font-weight: 700; color: white; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);">1</div>
|
||||
<h3 style="margin-bottom: var(--spacing-sm); color: var(--text-primary);">Zarejestruj się</h3>
|
||||
<p style="color: var(--text-secondary); font-size: var(--font-size-sm);">Wypełnij formularz rejestracyjny. Weryfikacja członkostwa w Norda Biznes.</p>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; position: relative;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--success), #34d399); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: var(--font-size-3xl); font-weight: 700; color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">2</div>
|
||||
<h3 style="margin-bottom: var(--spacing-sm); color: var(--text-primary);">Przeglądaj firmy</h3>
|
||||
<p style="color: var(--text-secondary); font-size: var(--font-size-sm);">Dostęp do pełnej bazy z kontaktami, usługami i certyfikatami wszystkich członków.</p>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; position: relative;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--warning), #fbbf24); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: var(--font-size-3xl); font-weight: 700; color: white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);">3</div>
|
||||
<h3 style="margin-bottom: var(--spacing-sm); color: var(--text-primary);">Nawiązuj kontakty</h3>
|
||||
<p style="color: var(--text-secondary); font-size: var(--font-size-sm);">Dzwoń, pisz, współpracuj. Wszystkie dane kontaktowe w jednym miejscu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-xl); margin: var(--spacing-2xl) 0;">
|
||||
<!-- Feature 1 -->
|
||||
@ -358,36 +388,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How it works -->
|
||||
<div style="background: white; padding: var(--spacing-2xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin-bottom: var(--spacing-2xl); position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(16, 185, 129, 0.05)); border-radius: 50%; pointer-events: none;"></div>
|
||||
<div style="position: absolute; bottom: -50px; left: -50px; width: 200px; height: 200px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(239, 68, 68, 0.05)); border-radius: 50%; pointer-events: none;"></div>
|
||||
|
||||
<h2 class="animated-underline" style="text-align: center; font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: var(--text-primary); position: relative;">
|
||||
Jak to działa?
|
||||
</h2>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl);">
|
||||
<div style="text-align: center; position: relative;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: var(--font-size-3xl); font-weight: 700; color: white; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);">1</div>
|
||||
<h3 style="margin-bottom: var(--spacing-sm); color: var(--text-primary);">Zarejestruj się</h3>
|
||||
<p style="color: var(--text-secondary); font-size: var(--font-size-sm);">Wypełnij formularz rejestracyjny. Weryfikacja członkostwa w Norda Biznes.</p>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; position: relative;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--success), #34d399); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: var(--font-size-3xl); font-weight: 700; color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">2</div>
|
||||
<h3 style="margin-bottom: var(--spacing-sm); color: var(--text-primary);">Przeglądaj firmy</h3>
|
||||
<p style="color: var(--text-secondary); font-size: var(--font-size-sm);">Dostęp do pełnej bazy z kontaktami, usługami i certyfikatami wszystkich członków.</p>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; position: relative;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--warning), #fbbf24); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: var(--font-size-3xl); font-weight: 700; color: white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);">3</div>
|
||||
<h3 style="margin-bottom: var(--spacing-sm); color: var(--text-primary);">Nawiązuj kontakty</h3>
|
||||
<p style="color: var(--text-secondary); font-size: var(--font-size-sm);">Dzwoń, pisz, współpracuj. Wszystkie dane kontaktowe w jednym miejscu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Use cases -->
|
||||
<div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: var(--spacing-2xl); border-radius: var(--radius-xl); margin-bottom: var(--spacing-2xl); position: relative; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.8);">
|
||||
<div style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--success), var(--warning), var(--error), var(--primary)); opacity: 0.5;"></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user