replace style.css by components

src/pages/landing.tsx

@@ -7,6 +7,18 @@ import logo2x from "../assets/logo_2x.png";
 import logo4x from "../assets/logo_4x.png";
 import { Link } from "../components/link";
 import { Card } from "../components/card";
+import { Header1 } from "../components/common";
+import {
+  BrandText,
+  Logo,
+  Main,
+  MainCardImg,
+  MainCardText,
+  MainCardTextP,
+  MainCardWrapper,
+  PageFooter,
+  PageHeader,
+} from "./style";
 
 const data = [
   {
@@ -50,9 +62,8 @@ const data = [
 export const LandingPage = () => {
   return (
     <>
-      <header id="header">
-        <img
-          className="logo"
+      <PageHeader>
+        <Logo
           height="44px"
           width="227"
           src={logo4x}
@@ -69,27 +80,27 @@ export const LandingPage = () => {
         "
         />
         <NavPanel />
-      </header>
+      </PageHeader>
 
-      <main className="main">
-        <header className="card card-main">
-          <div className="card-text">
-            <h1 className="h1">
+      <Main>
+        <MainCardWrapper as="header">
+          <MainCardText>
+            <Header1>
               Персонажи из <br />
-              <span className="brand-text">огурчиковой вселенной</span>
-            </h1>
+              <BrandText>огурчиковой вселенной</BrandText>
+            </Header1>
 
-            <p className="p card--text__p">
+            <MainCardTextP>
               На этой странице представлены персонажи из сериала “
               <Link href="#">Rick and Morty</Link>
               ”. Этот популярный анимационный сериал, созданный Джастином
               Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
               Санчеза, гениального и эксцентричного ученого, и его внука Морти
               Смита.
-            </p>
-          </div>
-          <img className="card--img" src={cucumber} alt="" />
-        </header>
+            </MainCardTextP>
+          </MainCardText>
+          <MainCardImg src={cucumber} alt="" />
+        </MainCardWrapper>
         {data.map((item, index) => (
           <Card
             directionReverse={index % 2 === 0}
@@ -102,9 +113,9 @@ export const LandingPage = () => {
             {item.body}
           </Card>
         ))}
-      </main>
+      </Main>
 
-      <footer className="page-footer"></footer>
+      <PageFooter></PageFooter>
     </>
   );
 };