[#4] docs: restyled blockquote component

package.json

@@ -47,4 +47,4 @@
   "resolutions": {
     "styled-components": "^5"
   }
-}
+}

src/components/block-quote/block-quote.component.jsx

@@ -3,5 +3,9 @@ import React from "react";
 import "./block-quote.styles.scss";
 
 export default function BlockQuote({ children }) {
-  return <blockquote>{children}</blockquote>;
+  return (
+    <div className="block-quote">
+      <blockquote>{children}</blockquote>
+    </div>
+  );
 }

src/components/block-quote/block-quote.styles.scss

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Amiri&family=Mulish:ital,wght@1,300&display=swap");
 
-blockquote {
+.block-quote {
   font-family: "Amiri", serif;
   font-size: 3rem;
+  max-width: 70vw;
 }

src/components/custom-button/custom-button.component.jsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 import "./custom-button.styles.scss";
 
 export default function CustomButton({ children }) {
-  return <button className="custom-button">{children}</button>;
+  return <Link className="custom-button">{children}</Link>;
 }

src/components/layout/header/header.component.jsx

@@ -30,7 +30,11 @@ function Header() {
         </Menu>
       </nav>
       <div className="block-quote-container">
-        <BlockQuote>test deneme test</BlockQuote>
+        <BlockQuote>
+          Karsal; işinin profesyonelleri sayesinde müşterilerine, sağladığı
+          kaliteli hammaddeyi, titiz bir işçilik ve düzenli ve hızlı sunumla
+          müşteriye ulaştırmaktadır.
+        </BlockQuote>
         <CustomButton>&#8642;</CustomButton>
       </div>
     </div>

src/components/layout/header/header.styles.scss

@@ -21,6 +21,11 @@
   }
 
   .block-quote-container {
-    background: grey;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column;
+    min-height: 70vh;
+    text-align: center;
   }
 }

src/pages/homepage/homepage.component.jsx

@@ -8,7 +8,9 @@ export default function HomePage() {
   return (
     <>
       <Layout>
-        <Section BgColor="pink">test</Section>
+        <Section id="section1" BgColor="pink">
+          test
+        </Section>
         <Section BgColor="white">test2</Section>
         <Section BgColor="#ebebeb">test3</Section>
       </Layout>