Announcement section for innovance + hero component small change

app/page.tsx

@@ -3,10 +3,12 @@ import Process from '@/components/homePage/Process';
 import AboutUs from '@/components/homePage/AboutUs';
 import Services from '@/components/homePage/Services';
 import Showcase from '@/components/homePage/Showcase';
+import Announcement from '@/components/homePage/Announcement';
 
 export default function Home() {
   return (
     <div>
+      <Announcement />
       <Hero />
       <Process />
       <AboutUs />

components/homePage/Announcement.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import style from '../../styles/Announcement.module.css';
+
+const Announcement = () => {
+  return (
+    <div className={style.temp}>
+      <div className={style.background}>
+        <div className={style.temp4}>
+          <div className={style.icon}>
+            <img src='/images/innovance-icon-dark-small.png' alt='' />
+          </div>
+          <div className={style.vertical}></div>
+          <div className={style.title}>
+            INNOVANCE 2.0
+          </div>
+        </div>
+
+        <div className={style.text}>
+          <div className={style.temp2}>
+            <div className={style.lines}>November 18th - 19th </div>
+            <div className={`${style.lines} ${style.belowLine}`}>Campus 7 & 17</div>
+          </div>
+          <div className={style.temp3}>
+            <button className={style.button}>
+              <a
+                href='https://innovance.iotkiit.in'
+                target='_blank'
+                rel='noopener noreferrer'
+                className={style.link}
+              >
+                Register
+              </a>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Announcement;

components/homePage/Hero.tsx

@@ -1,6 +1,6 @@
 const Hero: React.FC = () => {
   return (
-    <div className='relative overflow-hidden px-0 pb-0 '>
+    <div className='relative overflow-hidden px-0 pb-0 z-0'>
       <img
         src='/images/wave.svg'
         alt='bg_cloud_photo'
@@ -9,7 +9,8 @@ const Hero: React.FC = () => {
       <div className='container mx-auto relative px-6 lg:px-12'>
         <div className='flex flex-col md:flex-row items-center pt-32 lg:pl-12 md:px-12 px-12 pb-16 md:pb-0 '>
           <div className='md:w-1/2 lg:w-1/3 mb-4 sm:mb-16 md:mb-0'>
-            <h1 className='text-6xl md:text-7xl font-bold font-sans text-secondary leading-tight mb-4 md:mb-4'>
+            <h1 className='text-6xl md:text-7xl font-bold font-sans text-secondary leading-tight mb-4 md:mb-4 mt-8 md:mt-0'> 
+            {/* Temporary change: mt-8 md:mt-0 */}
               <div>
                 <span className='flex h-7 w-7 sm:-ml-0.5 -m-1.5'>
                   <span className='animate-ping inline-flex h-full w-full rounded-full bg-primary-default opacity-75' />

styles/Announcement.module.css

@@ -0,0 +1,210 @@
+.temp {
+  z-index: 10;
+  position: absolute;
+  left: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.background {
+  background: #1f293750;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  width: 90vw;
+  height: 12.4vh;
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.temp4 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 110px;
+  height: 110px;
+
+}
+
+.vertical {
+  border-left: 0.1vw solid rgba(0, 0, 0, 0.699);
+  height: 9vh;
+}
+
+.title {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  margin-left: 2vw;
+  font-weight: 700;
+  font-size: 35px;
+  color: #17191ae5;
+}
+
+.temp2 {
+  display: flex;
+  flex-direction: column;
+  margin-right: 2.3vw;
+}
+
+.text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: 2vw;
+}
+
+.lines {
+  margin-top: auto;
+  margin-bottom: auto;
+  font-weight: 500;
+  font-size: 25px;
+  text-wrap: nowrap;
+  font-weight: bold;
+}
+
+.belowLine {
+  margin-left: 2.5vw;
+}
+
+.temp3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1vw 7vh; /* Adjust the padding as needed */
+  font-size: 19px; /* Adjust the font size as needed */
+  height: 6vh;
+  width: 11vw;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  border: 2px solid #4763b7; /* Border color */
+  color: #f7eded; /* Text color */
+  background-color: #4763b7; /* Background color */
+  border-radius: 5px; /* Adjust border-radius for rounded corners */
+  transition: background-color 0.3s, color 0.3s, border 0.3s; /* Add smooth transition effect */
+}
+
+@media screen and (max-width: 918px) {
+    .title{
+        font-size: 30px;
+    }
+}
+
+@media screen and (max-width: 936px) {
+    .title{
+        font-size: 23px;
+    }
+
+    .lines {
+        font-size: 18px;
+      }
+}
+
+@media screen and (max-width: 727px) {
+  .title{
+    font-size: 20px;
+  }
+
+  .lines {
+    font-size: 15px;
+  }
+
+  .icon {
+    width: 90px;
+    height: 90px;
+
+  }
+
+
+}
+
+@media screen and (max-width: 565px) {
+    .title{
+        display: none;
+    }
+
+    .text{
+        font-size: 18px;
+         position: relative;
+
+
+    }
+
+    .temp3{
+      margin-left: 2rem;
+    }
+}
+
+@media screen and (max-width: 454px) {
+  .title{
+      display: none;
+  }
+
+  .button{
+    height: 5vh;
+    width: 0.5vw;
+    font-size: 16px;
+}
+
+.lines{
+  font-size: 13px;
+
+}
+
+  .temp3{
+    margin-left: 0.5rem;
+  }
+
+  .icon {
+    width: 85px;
+  }
+
+}
+
+@media screen and (max-width: 400px) {
+
+
+    .background{
+        height: 13vh;
+    }
+
+    .title{
+        display: none;
+    }
+
+    .text{
+        margin: auto;
+        flex-direction: column;
+
+    }
+
+    .temp3{
+      margin-right: 14vw;
+    }
+
+    .lines{
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .button{
+        height: 4vh;
+        width: 0.5vw;
+        font-size: 14px;
+    }
+}

yarn.lock

@@ -62,11 +62,6 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@emailjs/browser@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@emailjs/browser/-/browser-3.11.0.tgz#0e78de2f85096d1a9ad5b5977b060bb5d1784cb4"
-  integrity sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==
-
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"