Strona docelowa dla AI-startupu Neura (Next.js + Tailwind CSS)
Nowoczesna responsywna strona docelowa dla startupu AI/wearable Neura - firmy, która opracowuje neurokomputerowe urządzenia nowej generacji.
Główne zadanie - stworzenie premium, technologicznego i emocjonalnego interfejsu na poziomie Apple, który przekazuje innowacyjność produktu, buduje zaufanie i przyciąga audytorium inwestorów oraz wczesnych użytkowników.
W projekcie zastosowano minimalistyczne podejście z naciskiem na duże bloki typograficzne, płynne animacje podczas przewijania oraz kontrastową czarno-białą paletę z akcentującym niebieskim (#0071E3), która podkreśla technologiczną wizję marki.
Co zostało zrealizowane:
- Responsywny design (mobile-first) z pixel-perfect layoutem
- Architektura komponentowa na React 19 z komponentami serwerowymi i klienckimi
- Hero-blok z animowanym obrazem, efektami rozmycia i stagger-animacjami tekstu
- Dynamiczna nawigacja z automatyczną zmianą motywu (jasny/ciemny) w zależności od sekcji
- Wysuwane panele nawigacyjne (Wearable, Neural, Search) z efektem backdrop-blur
- Pełnofunkcjonalne mobilne menu z płynnymi animacjami otwierania/zamykania
- Sekcja "Overview" z rotacją tekstu (AnimatePresence) - cykliczna zmiana komunikatów
- Sekcja "Mission" ze strukturalnym wyświetlaniem misji, wizji i ambicji firmy
- Sekcja "Invisible Approach" z animacją unoszenia urządzenia nad dużym nagłówkiem
- Sekcja "Progress" - strukturalne bloki z treścią o kierunkach rozwoju
- Sekcja "Scientific Evidence" - akcentujący blok CTA na niebieskim tle
- Niestandardowe efekty hover na wszystkich interaktywnych elementach (slide-up pill przyciski, arrow links z podwójnym trikiem SVG)
- Sticky Logo przycisk - pojawia się podczas przewijania dla szybkiego powrotu na górę
- Płynne przewijanie przez Lenis - natywne płynne przewijanie zamiast przeglądarkowego
- Wsparcie prefers-reduced-motion dla dostępności
- Optymalna struktura kodu dla skalowalności
Stos: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Framer Motion, Lenis, Geist Font
Główne zadanie - stworzenie premium, technologicznego i emocjonalnego interfejsu na poziomie Apple, który przekazuje innowacyjność produktu, buduje zaufanie i przyciąga audytorium inwestorów oraz wczesnych użytkowników.
W projekcie zastosowano minimalistyczne podejście z naciskiem na duże bloki typograficzne, płynne animacje podczas przewijania oraz kontrastową czarno-białą paletę z akcentującym niebieskim (#0071E3), która podkreśla technologiczną wizję marki.
Co zostało zrealizowane:
- Responsywny design (mobile-first) z pixel-perfect layoutem
- Architektura komponentowa na React 19 z komponentami serwerowymi i klienckimi
- Hero-blok z animowanym obrazem, efektami rozmycia i stagger-animacjami tekstu
- Dynamiczna nawigacja z automatyczną zmianą motywu (jasny/ciemny) w zależności od sekcji
- Wysuwane panele nawigacyjne (Wearable, Neural, Search) z efektem backdrop-blur
- Pełnofunkcjonalne mobilne menu z płynnymi animacjami otwierania/zamykania
- Sekcja "Overview" z rotacją tekstu (AnimatePresence) - cykliczna zmiana komunikatów
- Sekcja "Mission" ze strukturalnym wyświetlaniem misji, wizji i ambicji firmy
- Sekcja "Invisible Approach" z animacją unoszenia urządzenia nad dużym nagłówkiem
- Sekcja "Progress" - strukturalne bloki z treścią o kierunkach rozwoju
- Sekcja "Scientific Evidence" - akcentujący blok CTA na niebieskim tle
- Niestandardowe efekty hover na wszystkich interaktywnych elementach (slide-up pill przyciski, arrow links z podwójnym trikiem SVG)
- Sticky Logo przycisk - pojawia się podczas przewijania dla szybkiego powrotu na górę
- Płynne przewijanie przez Lenis - natywne płynne przewijanie zamiast przeglądarkowego
- Wsparcie prefers-reduced-motion dla dostępności
- Optymalna struktura kodu dla skalowalności
Stos: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Framer Motion, Lenis, Geist Font