Job description
Landing page w Idosell
Cel Projektu:
Stworzenie jednej podstrony (Landing Page, LP) w HTML/CSS/JS na podstawie przesłanego projektu graficznego (.PSD). LP będzie osadzony w SaaS Idosell i ma efektywnie służyć dwóm grupom docelowym: B2B i konsumentom. Strona powinna umożliwić łatwe nawigowanie między dedykowanymi sekcjami dla każdej grupy przez przyciski i zakotwiczone linki.
Przykład:
Ktoś klika w Google w wynik. Wchodzi na stronę i wyskakuje mu okienko - Jesteś konsumentem czy B2B? I teraz w zależności co kliknie to LP będzie inny.
Wymagana osoba, która miała styczność z Idosell. Trzeba stworzyć podstronę w obrębie CMS Idosell.
Krok 1: Struktura HTML
1. Podstrona LP: Utwórz jedną podstronę HTML, która będzie zawierać wszystkie niezbędne sekcje.
2. Sekcje Dedykowane: W dokumencie HTML, zdefiniuj dwie główne sekcje: <section id="B2B"> dla klientów biznesowych i <section id="Konsument"> dla konsumentów indywidualnych.
3. Szerokość strony 1260 px – zgodnie z projektem graficznym
Krok 2: Nawigacja i Przyciski wyboru odbiorcy
1. Przyciski wyboru odbiorcy: Dodaj na górze strony dwa przyciski: jeden z napisem "B2B", drugi "Konsument". Każdy przycisk powinien mieć przypisane funkcje przewijania do odpowiedniej sekcji (zdefiniowanie wyboru odbiorcy to I krok interakcji z użytkownikiem – dopiero po jego zdefiniowaniu. Użytkownikowi prezentujemy daną dedykowaną sekcję).
2. Funkcja Przewijania: Implementuj funkcję, która przewija do danej sekcji.
Krok 3: Ukrywanie Treści
1. CSS na Początku: Na początku wszystkie sekcje powinny być wyrenderowane i widoczne – kwestie SEO. Nie wstrzykujemy dodatkowych treści za pomocą JS.
2. Ukrywanie Treści: Po kliknięciu w przycisk, użyj JavaScript, aby ukryć nieodpowiednie sekcje, stosując klasę CSS, która ustawi display: none dla niechcianych sekcji.
Krok 4: Grafiki
1. Potnij grafiki z uzyskanego projektu w formacie .PSD
2. Grafiki umieść w dwóch folderach – B2C oraz B2B
Krok 5: SEO, przyciski wewnątrz LP
....Opis całości zlecenia dostępny w załączniku.