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>
     </>
   );
 };

src/pages/style.ts

@@ -0,0 +1,55 @@
+import styled from "@emotion/styled";
+
+import { CardWrapper } from "../components/card";
+import { CardText } from "../components/card/card.style";
+import { Paragraph } from "../components/common";
+
+export const Main = styled.main`
+  width: 1024px;
+  max-width: calc(100% - 32px);
+  margin: 0 auto;
+`;
+
+export const MainCardWrapper = styled(CardWrapper)`
+  background-color: #ffffff;
+  flex-direction: row;
+`;
+
+export const MainCardText = styled(CardText)`
+  margin-top: 0;
+`;
+
+export const MainCardTextP = styled(Paragraph)`
+  max-width: 630px;
+`;
+
+export const MainCardImg = styled.img`
+  margin-left: auto;
+`;
+
+export const PageHeader = styled.header`
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  padding-left: 24px;
+  border-bottom: 1px solid var(--brand);
+  min-height: 62px;
+  align-items: flex-start;
+`;
+
+export const BrandText = styled.span`
+  color: var(--brand);
+`;
+
+export const Logo = styled.img`
+  margin: auto 0;
+`;
+
+export const PageFooter = styled.footer`
+  min-height: 100px;
+  background-color: var(--accent);
+  margin-top: 64px;
+`;