From 727a768b55a5a7ee85376212449c658e2eb9fb14 Mon Sep 17 00:00:00 2001
From: vishal035 <kumarvishal880288@gmail.com>
Date: Fri, 26 Aug 2022 23:58:05 +0530
Subject: [PATCH] Basic Structure

---
 components/Buttons/Default/index.tsx | 16 ++++++++++++++
 components/Header/Navbar/index.tsx   |  2 +-
 components/HeroSection/index.tsx     | 31 ++++++++++++++++++++++++++++
 pages/index.tsx                      |  4 +++-
 styles/globals.css                   |  1 +
 tailwind.config.js                   |  3 +++
 6 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 components/Buttons/Default/index.tsx
 create mode 100644 components/HeroSection/index.tsx

diff --git a/components/Buttons/Default/index.tsx b/components/Buttons/Default/index.tsx
new file mode 100644
index 0000000..c848c02
--- /dev/null
+++ b/components/Buttons/Default/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Button = () => {
+  return (
+    <div className="relative hover:-translate-x-1 hover:-translate-y-1 active:translate-y-0 active:translate-x-0 transition-all ease-in-out">
+      <a
+        href="#"
+        className="px-12 py-6 tracking-widest bg-primary-black text-primary hover:bg-primary-black hover:text-primary "
+      >
+        Resume
+      </a>
+    </div>
+  );
+};
+
+export default Button;
diff --git a/components/Header/Navbar/index.tsx b/components/Header/Navbar/index.tsx
index 13a1528..6656eb1 100644
--- a/components/Header/Navbar/index.tsx
+++ b/components/Header/Navbar/index.tsx
@@ -5,7 +5,7 @@ const NavBar = () => {
     <>
       <div className="navbar bg-primary">
         <div className="flex-1">
-          <a className="btn text-primary-black btn-ghost hover:bg-primary-black hover:text-primary normal-case text-xl">
+          <a href="#" className=" text-primary-black uppercase text-xl">
             VK
           </a>
         </div>
diff --git a/components/HeroSection/index.tsx b/components/HeroSection/index.tsx
new file mode 100644
index 0000000..26a3e00
--- /dev/null
+++ b/components/HeroSection/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Button from '../Buttons/Default';
+
+const HeroSection = () => {
+  return (
+    <main className="relative  w-full h-full flex flex-col items-center">
+      <section className="ralative h-2/4 w-full flex flex-col items-center text-primary mix-blend-difference ">
+        <h1 className="relative top-4 font-black text-6xl tracking-wider">
+          Hi
+        </h1>
+        <h2 className="relative top-8 font-bold text-4xl tracking-widest">
+          I&apos;m Vishal Kumar
+        </h2>
+        <h3 className="relative top-8 text-4xl font-bold tracking-widest">
+          A Self Taught
+        </h3>
+        <h4 className="relative top-16 text-4xl font-semibold tracking-widest">
+          FullStack Developer
+        </h4>
+        <p className="relative top-16 tracking-[2.2px]">
+          on the way to become Senior of MySelf 🔥
+        </p>
+      </section>
+      <section className="relative w-full h-full flex flex-col justify-center items-center">
+        <Button />
+      </section>
+    </main>
+  );
+};
+
+export default HeroSection;
diff --git a/pages/index.tsx b/pages/index.tsx
index 41cf0e5..0fee757 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import NavBar from '../components/Header/Navbar';
+import HeroSection from '../components/HeroSection';
 
 const Home: NextPage = () => {
   return (
@@ -10,8 +11,9 @@ const Home: NextPage = () => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="absolute top-0 left-0 w-full h-full bg-primary">
+      <main className="absolute top-0 left-0 w-screen h-screen bg-primary overflow-hidden">
         <NavBar />
+        <HeroSection />
       </main>
     </>
   );
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c9..8bc23a5 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 97a1fcf..990dfb5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: 'Josefin Sans',
+      },
       colors: {
         primary: '#E7E7E5',
         'primary-black': '#2A2A2A',