finish landing page

components/Header.tsx

@@ -36,7 +36,8 @@ const Header =() => {
             <Link href='/checkout'>
             <div className="relative cursor-pointer">
                 <span className="absolute -right-1 -top-1 z-50 flex h-4 w-4 
-                items-center jusfity-center rounded-full bg-gradient-to-r from-pink-500 to-violet-500
+                items-center justify-center rounded-full bg-gradient-to-r from-pink-500 to-violet-500
+                text-[10px] text-white
                 ">5</span>
                 <ShoppingBagIcon className='headerIcon'/>
             </div>

components/Landing.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+
+export const Landing = () => {
+    return (
+        <section className="sticky top-0 mx-auto flex h-screen max-w-[1350px] items-center justify-between px-8">
+            <div className="space-y-8">
+                <h1 className="space-y-3 text-5xl font-semibold tracking-wide lg:text-6xl
+                xl:text-7xl">
+                    <span className="block bg-gradient-to-r from-pink-600 to-violet-500 
+                    bg-clip-text text-transparent
+                    ">Powered</span>
+                    <span className="block">By Intellect</span>
+                    <span className="block">Driven By Values</span>
+                </h1>
+
+                <div>
+                    {/* <Button title="Buy Now/> */}
+                    <a className="link">Learn More</a>
+                    </div>
+                </div>
+
+                <div className="relative hidden h-[450px] w-[450px] transition-all duration-500
+                md:inline lg:h-[650px] lg:w-[600px]">
+                    <Image src='/iphone14.png' layout="fill" objectFit="contain" />
+                </div>
+
+        </section>
+    )
+}

pages/index.tsx

@@ -2,6 +2,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
 import Header from '../components/Header'
+import { Landing } from '../components/Landing'
 
 const Home: NextPage = () => {
   return (
@@ -13,6 +14,10 @@ const Home: NextPage = () => {
 
       <Header />
 
+      <main>
+        <Landing />
+      </main>
+
 
     </div>
   )

styles/globals.css

@@ -1,13 +1,30 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer base{
+    body{
+        @apply font-body text-[#232428]
+    }
+}
+
 @layer components{
     .headerLink{
         @apply cursor-pointer opacity-75 transition hover:opacity-100;
     }
     .headerIcon{
         @apply h-6 w-6 cursor-pointer opacity-75 transition hover:opacity-100;
     }
+    .link {
+        @apply relative cursor-pointer text-lg font-medium before:absolute before:inset-x-0
+        before:-bottom-1.5 before:h-0.5 before:origin-left before:scale-x-0 before:transform
+        before:rounded-bl before:bg-black before:transition-all before:duration-200
+        hover:before:scale-x-100;
+    }
 }
 

tailwind.config.js

@@ -5,7 +5,12 @@ module.exports = {
     './components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        body: ["Poppins", "san-serif"]
+      }
+    },
   },
   plugins: [],
 }
+