Hero Component

components/Home/Hero.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="relative max-w-7xl mx-auto overflow-hidden">
+    <div class="overflow-hidden max-w-7xl mx-auto z-[-50]">
+      <div
+        class="absolute h-[37rem] w-[37rem] rounded-[250px] backdrop-filter blur bg-gradient-to-tr from-footer via-lime-100 z-[-50] left-[50%] translate-x-[-50%] md:hidden "
+      />
+        <div
+            class="absolute h-[35rem] w-[35rem] rounded-[250px] backdrop-filter blur bg-gradient-to-tr from-footer via-lime-100 z-[-50] right-[-50px] top-[-50px] hidden md:block"
+        />
+      <div
+        class="hidden md:block absolute h-[30rem] w-[30rem] rounded-[250px] backdrop-filter blur bg-gradient-to-tr from-footer via-lime-100 z-[-50] left-[-170px] top-[100px]"
+      />
+      <!-- <div
+        class="absolute h-[30rem] w-[30rem] rounded-[250px] backdrop-filter blur bg-gradient-to-tr from-footer via-lime-100 z-[-50] left-[-170px] top-[50px] "
+      /> -->
+    </div>
+    <div class="my-24 sm:my-36 flex flex-col justify-center items-center">
+      <div
+        class="flex sm:block flex-wrap justify-center items-center font-extrabold font-popins text-primary text-5xl sm:text-6xl text-center leading-[1.15] my-4"
+      >
+        <div >Connecting Campus</div>
+        <div>Sellers & Buyers</div>
+      </div>
+      <div
+        class="mt-5 text-lg text-gray-700 sm:text-xl max-w-2xl text-center backdrop:blur-sm mx-auto p-2"
+      >
+        <span class="font-extrabold">KIIT OLX</span> is designed specifically for the KIIT University under GDSC
+        KIIT. It enables easy exchange of owned items among students, faculty,
+        and staff.
+      </div>
+      <div class="flex items-center my-4">
+        <a
+          href="/signup"
+          class="hover:text-white flex gap-1 items-center bg-secondary hover:bg-secondary/95 text-white px-4 py-2 rounded-full"
+          >Get Started
+          <div><VectorIconsRightArrow class="text-2xl" /></div
+        ></a>
+      </div>
+    </div>
+  </div>
+</template>

components/Nav.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="fixed max-w-7xl left-0 right-0 mx-auto">
+  <div class="fixed max-w-7xl left-0 right-0 mx-auto top-0 m-0 z-[10]">
     <nav
-      class="flex items-center justify-between p-2 max-w-7xl mx-auto text-primary font-popins"
+      class="flex items-center justify-between p-2 max-w-7xl mx-auto text-primary font-popins "
     >
       <div class="flex gap-2 items-center">
         <NuxtImg
           src="/KIIT olx.svg"
           alt="KIIT OLX"
           width="50"
           height="50"
-          class="h-[80px] mb-1"
+          class="h-[50px] mb-1"
         />
         <h1 class="text-xl"><span class="font-bold">KIIT</span> OLX</h1>
       </div>

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
         <Nav/>
-        <!-- <div class="text-3xl">KIIT OLX</div> -->
+        <HomeHero/>
     </div>
 </template>

tailwind.config.js

@@ -14,14 +14,17 @@ export default {
         "primary": "#273321",
         "secondary": "#629549",
         "footer": "#D6FFC0",
-        "destructive": "#3C3D8E",
+        "destructive": "#FF0000",
       },
       fontFamily: {
         "sans": ["Roboto", "sans-serif"],
         "serif": ["Merriweather", "serif"],
         "popins": ["Poppins", "sans-serif"],
         "inter": ["Inter", "sans-serif"],
       },
+      backgroundImage:{
+        heroCircle:"linear-gradient(194deg, rgba(182, 218, 164, 0.97) -30.62%, rgba(139, 167, 126, 0.97) 29.68%, rgba(118, 142, 106, 0.97) 59.82%, rgba(108, 129, 97, 0.97) 74.9%)",
+      },
     }
   },
   plugins: [],