📦 NEW: Hero Banner Added

SiddheshKukade · Apr 5, 2022 · 85e039c · 85e039c
1 parent 28066c5
commit 85e039c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
@@ -0,0 +1,25 @@
+const Hero = () => {
+  return (
+    <div className="flex items-center justify-between border-y border-black bg-yellow-400 py-10 lg:py-4">
+      <div className="space-y-5 px-10">
+        <h1 className="max-w-xl font-serif text-6xl">
+          <span className="underline decoration-black decoration-4">
+            Medium
+          </span>{' '}
+          is place to write, read, and connect
+        </h1>
+        <h2>
+          It's easy and free to post your thinking on any topic and connect with
+          millions of readers
+        </h2>
+      </div>
+      <img
+        className="lg:h:full hidden h-32 md:inline-flex "
+        src="https://accountabilitylab.org/wp-content/uploads/2020/03/Medium-logo.png"
+        alt="Medium M logo"
+      />
+    </div>
+  )
+}
+
+export default Hero
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,15 +1,17 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
-import Header from './../components/Header/index'
+import Header from './../components/Header/'
+import Hero from './../components/Hero/'
 
 const Home: NextPage = () => {
   return (
-    <div className="">
+    <div className="mx-auto max-w-7xl">
       <Head>
         <title>Medium.com - Blogs and Articles</title>
       </Head>
       <Header />
+      <Hero />
     </div>
   )
 }