Next.js 13 w Praktyce: Hero section

0:01Teraz przejdźmy sobie do zbudowania tej

0:03sekcji promocyjnej naszej strony, bo na razie mamy Hello from Pocket SAP i nie

0:07wygląda to zbyt zachęcająco dla użytkowników, którzy odwiedzają nasz

0:11startup do tego, żeby zainteresować się naszą aplikacją.

0:15Dlatego zmienimy tutaj całkowicie naszą sekcję.

0:19Zamienimy tego maila na Section.

0:23Mamy sekcję. Tutaj też musimy sobie zmienić.

0:27OK. Jeżeli chodzi o

0:29to co będzie w środku w tej sekcji, no to chciałbym dwójkę, która

0:35prezentuje value naszego startupu i niech to będzie IS jest tłumaczyć piu payment.

0:45Mamy już jakiś napis u góry.

0:47Jeżeli chodzi o to co poniżej tego napisu.

0:50No to chciałbym jakąś trójkę, też jakiś sub section.

0:54Tutaj mam przygotowany tekst na boku,

0:56który chciałbym żeby tutaj był wyświetlony.

0:58No i zostawiłem sobie Keep albo Payments

1:01i były w Pocket SAP Simple System Design, Help top of your finance.

1:08To jest taki SAP Section, który ma zachęcać do

1:13użytkowników, do tego, żeby zapisywali się tutaj, lokowali i zakładali swoje konta.

1:20Jeżeli chodzi o następną rzecz, którą

1:22chciałbym mieć tutaj, to link do tego, żeby się zalogować.

1:27Czyli możemy to dopisać kiedy trzeba.

1:30Jeżeli chodzi o href który chcemy zrobić importujemy ten link i tutaj.

1:36Jeżeli chodzi o adres no to możemy

1:38przenieść użytkownika tutaj do strony Sign up tak naprawdę app.

1:43No i tutaj faktury stworzyliśmy sobie już tym momencie.

1:47Niech to będzie link, który przenosi naszą stronę w Caina.

1:50To działa jak najbardziej.

1:52Mamy linka, który przenosi nas na stronę Sign up.

1:55To jest jedna z sekcji, które będą zawarte.

1:59Ja sobie to tutaj zamknę w read fragment, bo chciałbym też mieć jeszcze jedną sekcję

2:04poniżej, w której będziemy mieli nasz główny obrazek i przedstawienie czym tak

2:09naprawdę jest Pocket cap, Czyli tutaj tak naprawdę w drugiej sekcji mamy.

2:19Zróbmy sobie pe i zadajmy pytanie łot pocket cap?

2:25Znak zapytania.

2:27Poniżej zrobimy sobie dwójkę znowu.

2:32Żeby też zachęcić naszych użytkowników do odwiedzenia.

2:35Do założenia konta czyli potrzeba payments.

2:41Jeżeli chodzi o ostatni element

2:45to jest trójka i tu też tekst mam przygotowany wcześniej.

2:50Jeżeli chodzi o ten startup to jest.

2:53Coś takiego.

2:55Poniżej tego linku jeszcze chciałbym wrzucić obrazek obrazek z naszym

2:59startupem, z naszym, który przygotowaliśmy już wcześniej mamy w

3:03folderze public, czyli zróbmy sobie tutaj image.

3:07I jeżeli chodzi o naszym takim możemy zrobić self clothing.

3:11Jeżeli chodzi o resource

3:12to będziemy potrzebowali naszego obrazka, czyli teraz możemy sobie go zaimportować.

3:17Import hiro img from.

3:23I w tym przypadku będzie musimy się odnieść do folderu public img i

3:31to będzie nasz obrazek, który chcemy żeby był tutaj jako nasz hero.

3:37Jeżeli chodzi o alt możemy sobie zrobić hero image.

3:44Nie potrzebujemy wymiary klas czy klasy?

3:47Dlaczego obrazka?

3:50I niech to będzie

3:52obrazek, który będzie miał MX auto, czyli chcemy go zawsze wyśrodkować.

3:56Jeżeli chodzi o wysokość i szerokość to chcemy zrobić tutaj

4:02jeszcze margin top na 10 i niech to na razie zostanie tak jak jest.

4:09I tutaj mieć istotny find.

4:10Oczywiście musimy sobie zaimportować ten

4:12komponent z frameworka Next i już mamy obrazek przedstawiający nasz

4:18start up wyimaginowany, który sobie budujemy tutaj razem w tym kursie.

4:23Jeżeli chodzi o styl owanie tego

4:24wszystkiego, to możemy się zająć teraz stylami jeżeli chodzi o sekcję.

4:31Jak ona ma być duża?

4:32No to zacznijmy od tego MX Auto.

4:34Chcę to zawsze mieć wyśrodkować i max 7 XL to nam wystarczy.

4:42Jeżeli chodzi o dwójkę to musimy przejść

4:46na class i tutaj jeżeli chodzi o style chcemy zrobić remix auto.

4:50Chcemy żeby to było wyśrodkować.

4:53Margin bottom ustawimy sobie na 6.

4:55Żeby odsunąć się troszeczkę od tego następnego tekstu.

4:58Margin to ustawimy na 10 max.

5:02Zrobimy 3 XL.

5:06Tekst na center.

5:08Chcemy, żeby to było na środku.

5:10Tekst żeby był bardzo duży, czyli 5 XL i font bold.

5:16Najlepiej.

5:18Myślę, że najlepiej na świecie sprawdzi mamy i tu manager Payments.

5:23Jak najbardziej wygląda to na chwilę obecną ok.

5:25Jeszcze sobie zmienimy czcionkę za

5:27chwilkę, bo póki co mamy domyślną czcionkę.

5:30Myślę, że warto byłoby tutaj ustawić.

5:32Inter dużo lepiej wygląda.

5:34Wróćmy teraz do tej trójki.

5:37Wpisujemy trójkę tutaj.

5:39Jeżeli chodzi o trójkę to klasa.

5:43No i teraz tak zacznijmy od wielkości tego tekstu.

5:47Niech to będzie tekst XL.

5:51FX Auto Max View 3x all Zrobimy Text center.

6:02Font, medium i tekst to jest kolor.

6:07Niech będzie 700.

6:08Chcemy, żeby był troszeczkę bardziej

6:10wyblakły niż główny tekst na naszej stronie.

6:13Wygląda jak najbardziej ok.

6:15Jeżeli chodzi o nasz button, to tutaj też

6:17oczywiście musimy zająć się tymi scenami, bo póki co nie wygląda to jak guzik.

6:24I MX Auto.

6:29Margin top ustalony na 4 to odsunie nam przycisk flex.

6:34Niech będzie max.

6:37Ustawiamy maksymalną szerokość tego guzika na 240 pikseli.

6:43Mamy już wyśrodkować.

6:45Jeżeli chodzi o

6:47rozmieszczenie elementu w środku to Items Center sobie ustawimy czas Sci-Fi Center.

6:56Już napis się wyśrodkować tutaj.

6:58Jeżeli chodzi o style to chcemy tak.

7:02Chcemy żeby był zaokrąglony jak to przycisk chcemy zmienić

7:09i zmienimy ten ekran na godzinkę 900 żeby był czarny background.

7:13Jeżeli chodzi o padding to PX 12 zrobimy lepiej jak zrobimy na 3.

7:23Już tam się troszeczkę zwiększy.

7:25Jeżeli chodzi o font to zrobimy sobie sami bold.

7:31Zrobimy sobie jeszcze tracking white.

7:37I tekst z ING.

7:40Niech to będzie kolor sing stop.

7:43No już to wygląda dużo lepiej.

7:46Ten obrazek tutaj zostawimy tak jak jest.

7:48Jeżeli chodzi o naszą kolejną sekcję, to

7:50przejdźmy teraz tutaj, to poniżej do naszej kolejnej sekcji.

7:55I jeszcze smsowe czy obrazek.

7:57Nie chcemy odsunąć bardziej od tych boków,

7:59bo tak naprawdę styka nam się na razie z krawędziami.

8:02Dlatego myślę, że przydałoby się go tutaj odsunąć.

8:04I zróbmy sobie PX 4.

8:08Myślę.

8:08Na chwilę obecną jak najbardziej to nam wystarczy.

8:13Przejdźmy do kolejnej sekcji.

8:15Myślę, że tutaj style mogą być podobne co w tej pierwszej.

8:19Czyli też chcemy mieć mix auto i max na 7x l.

8:23Czyli możemy sobie skopiować.

8:26To jeżeli chodzi o stosowanie tych testów.

8:28Zacznijmy od tego p + name tutaj zrobić sobie margin top na 20.

8:35Odsuniemy to wszystko od całej reszty.

8:38Jeżeli chodzi o nasz tekst, no to chcemy go kontrować.

8:42Chcielibyśmy też.

8:43Jeżeli chodzi o wielkość to tekst X zrobić, żeby to było dużo mniejsze.

8:50Font Bold.

8:53A niech to będzie napisane, bo będzie się wyróżnia.

8:56Troszeczkę to pytanie.

8:57Tracking ustawimy sobie customowe na 2,4 pixela.

9:08Jeżeli chodzi o tekst no to niech będzie link.

9:14500.

9:18No i już mamy jakiś taki napis złoty,

9:21którym możemy się teraz zając wylewaniem kolejnych części.

9:23Jest tak dwójka, czyli klasa name.

9:27Chcemy też, żeby ona była większa, także X, ale to.

9:34Kolejne margin bottom niech będzie na szóstkę.

9:37Odsuniemy ten napis margin top na 4 max 2 x.

9:47Text Center.

9:51Tekst 3 x i font niech będzie na bold.

9:58Troszeczkę zmieniło nam teraz ten napis.

10:00Mamy ten pierwszy główny head i mamy dużo większy niż ten mniejszy.

10:03To jest taki sam header, który wprowadza kolejną sekcję na naszym landing page.

10:10Jeżeli chodzi o tą trójkę, to też musimy

10:12się tym zająć, bo nie wygląda to na razie zachęcająco.

10:16MX Auto.

10:19Max.

10:202 XL zrobimy sobie text center.

10:26I tekst von bis.

10:29Nie musimy tego zaznaczać.

10:30Generalnie rzecz biorąc nie potrzeba,

10:33bo jest domyślnie i tekst kolor możemy ustawić na 700.

10:41No i już mamy dosyć ładnie zrobioną hero section w naszej aplikacji, która.

10:48Jeżeli ktoś odwiedzi taką stronę to myślę,

10:50że zachęca do tego, żeby założyć sobie konto i spróbować tego startupu.

10:54Tak naprawdę teraz przejdziemy do

10:58sterowania stymulowania kolejnej części naszej aplikacji.