Hero section

package.json

@@ -13,7 +13,7 @@
     "react-icons": "^4.8.0",
     "react-paystack": "^4.0.3",
     "react-router-dom": "^6.10.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.9",

src/Components/Hero.jsx

@@ -1,22 +1,35 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import Card from "./Card";
-import Books from "./Books";
-import Banner from './Banner'
-import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+import "../Stylesheets/Hero.css";
+// import Card from "./Card";
+// import Books from "./Books";
+// import Banner from "./Banner";
+// import styled from "styled-components";
 
 const Hero = () => {
   return (
-    <Section>
-      <Card/>
-      <Books/>
-      <Banner />
-    </Section>
+    <section className="hero-container">
+      <h1 className="hero-lead-text">
+        Heroes read <br /> about heroes
+      </h1>
+      <p className="hero-sub-text">
+        Digital marketplace for all kind of comic books, easily find and read
+        <br />
+        your favorite comic hero's
+      </p>
 
+      <NavLink to="/" className="hero-button">
+        View by Category
+      </NavLink>
+      {/* <div className="comic">
+      <Link to="/" className="hero-button">
+        View by Category
+      </Link>
+      </div> */}
+    </section> 
   );
 };
 
 export default Hero;
 
-const Section = styled.section`
-`
+// const Section = styled.section``;

src/Stylesheets/Comics.css

@@ -67,8 +67,10 @@
 
 .banner-image img {
   width: 100%;
-  width: 100%;
+  height: 100%;
+  object-fit: cover;
   padding: 2rem;
+  border-radius: 0.5rem !important;
 }
 
 .banner-text {
@@ -138,3 +140,12 @@
   max-width: 400px;
   text-align: justify;
 }
+
+
+@media(max-width: 698px){
+  .latest-comics-banner {
+    display: grid;
+    grid-template-columns: 1fr;
+    border-bottom: 1px solid #131211;
+  }
+}

src/Stylesheets/Hero.css

@@ -0,0 +1,60 @@
+.hero-container {
+  background-color: #fff;
+  height: calc(100vh - 4rem);
+  margin: 2rem auto;
+}
+
+.hero-container .hero-lead-text {
+  font-family: "Monument Extended";
+  font-size: 90px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.hero-container .hero-sub-text {
+  font-family: "Comic Sans MS";
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: center;
+  margin: 2rem auto;
+}
+
+.hero-button {
+  background: linear-gradient(117.42deg, #f20505 -49.9%, #ff207e 71.21%);
+  color: #fff;
+  padding: 1rem 2.5rem;
+  border-radius: 153.911px;
+  font-family: "Comic Sans MS";
+  text-decoration: none;
+  margin: 2rem auto;
+  transition: all 0.3s ease-in-out !important;
+}
+
+.hero-button:hover {
+  background: linear-gradient(117.42deg, #500606 -49.9%, #41041e 71.21%);
+  color: #fff;
+  text-decoration: none;
+}
+@media (max-width: 689px) {
+  .hero-container {
+    background-color: #fff;
+    margin: 1rem auto;
+  }
+
+  .hero-container .hero-lead-text {
+    font-family: "Monument Extended";
+    font-size: 50px;
+    font-weight: 900;
+    text-align: center;
+  }
+
+  .hero-container .hero-sub-text {
+    font-family: "Comic Sans MS";
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 26px;
+    text-align: center;
+    margin: 1rem auto;
+  }
+}