Create hero

src/App.tsx

@@ -1,11 +1,10 @@
 import './App.css'
+import HomePage from './pages/HomePage'
 
 function App() {
 
   return (
-    <>
-      <p>Project for Team 12</p>
-    </>
+    <HomePage />
   )
 }
 

src/components/Hero.css

@@ -0,0 +1,76 @@
+.hero {
+  min-height: 750px;
+  padding: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 70px;
+  background-color: black;
+  color: white;
+  overflow: hidden;
+  border-radius: 0 0 50% 50% / 0 0 10% 10%;
+}
+
+.hero-content {
+  width: 360px;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+}
+
+.hero-description {
+  margin: 25px 0 35px;
+  font-size: 16px;
+  line-height: 1.3;
+}
+
+.hero-button {
+  width: 100%;
+  padding: 15px;
+  display: block;
+  background-color: #45b4ca;
+  color: white;
+  border-radius: 18px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.hero-characters {
+  width: 480px;
+  height: auto;
+}
+
+@media (max-width: 900px) {
+  .hero {
+    min-height: 740px;
+    padding: 80px 20px;
+    display: block;
+    border-radius: 0 0 50% 50% / 0 0 4% 4%;
+  }
+
+  .hero-content {
+    width: 100%;
+    max-width: 310px;
+    margin: 70px auto 0;
+  }
+
+  .logo {
+    width: 100%;
+  }
+
+  .hero-description {
+    margin: 30px 5px 40px;
+    font-size: 16px;
+  }
+
+  .hero-button {
+    width: 100%;
+  }
+
+  .hero-characters {
+    display: none;
+  }
+}

src/components/Hero.tsx

@@ -0,0 +1,25 @@
+import heroImage from "../assets/hero.png";
+import logo from "../assets/logo.png";
+import "./Hero.css";
+
+function Hero() {
+    return (
+        <section className="hero">
+            <div className="hero-content">
+                <img className="logo" src={logo} alt="Rick and Morty" />
+
+                <p className="hero-description">
+                    Explore every character in the TV universe Rick and Morty.
+                    Enter an item name or keyword in the search bar to instantly
+                    narrow down the results and find exactly what you're looking for.
+                </p>
+
+                <a className="hero-button" href="https://www.imdb.com/title/tt2861424/" target="_blank" rel="noopener noreferrer"> Read more </a>
+            </div>
+
+            <img className="hero-characters" src={heroImage} alt="Rick and Morty characters"/>
+        </section>
+    );
+}
+
+export default Hero;

src/index.css

@@ -51,14 +51,8 @@
 }
 
 #root {
-  margin-top: 2rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+  width: 100%;
+  min-height: 100vh;
 }
 
 body {

src/pages/CharactersPage.css

@@ -1,5 +1,6 @@
 .content{
     display: flex;
+    padding-top: 6rem;
 }
 
 .search-area{

src/pages/HomePage.tsx

@@ -0,0 +1,11 @@
+import Hero from "../components/Hero"; 
+
+function HomePage() {
+    return (
+        <main>
+            <Hero/>
+        </main>
+    );
+}
+
+export default HomePage;