landing fe

app/(default)/page.tsx

@@ -1,19 +1,40 @@
 export const metadata = {
-  title: 'Home',
-  description: 'Landing page',
-}
+  title: "Home",
+  description: "Landing page",
+};
 
-import Hero from '@/components/hero'
-import Domains from '@/components/domains'
-import '../css/additional-styles/landing.css';
-import Landing from '@/components/landing';
+import Hero from "@/components/hero";
+import Domains from "@/components/domains";
+import "../css/additional-styles/landing.css";
+import Landing from "@/components/landing";
+import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <>
       <Hero />
+      <div className="flex flex-col justify-center items-center py-10 px-5 mb-20">
+        <div className="text-4xl font-bold text-center text-gray-200 mb-4">
+          Upcoming Events
+        </div>
+        <Link href="/form">
+          <Image
+            src={"/images/sih.png"}
+            alt="sih"
+            height={400}
+            width={1100}
+            className="rounded-3xl border-2 border-slate-500"
+          />
+        </Link>
+        <Link href="/form">
+          <button className="btn-sm text-xl text-black bg-green-500 mx-3 rounded-xl mt-5">
+            Register for SIH
+          </button>
+        </Link>
+      </div>
       <Domains />
       <Landing />
     </>
-  )
+  );
 }

app/css/additional-styles/landing.css

@@ -2,6 +2,10 @@
       background-image: url("../../../public/images/pbimage3.jpeg");
       background-size: cover;
       background-repeat: no-repeat;
+      background-position: center;
+      @media (max-width: 768px) {
+        margin-top: 60px;      
+      }
     };
 
 h1{
@@ -78,6 +82,7 @@ h1{
   height: 100%;
   width: 100%;
   border-radius: 2rem;
+  overflow: hidden;
   box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
   position: absolute;
   backface-visibility: hidden;