feat: add photos and animations in hero sections

src/components/AboutUs/index.jsx

@@ -158,10 +158,10 @@ export default function AboutSection() {
     <>
       <section className="relative min-h-fit bg-background-dark text-white py-12 md:px-6 lg:px-12 overflow-hidden">
         <div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
-        <div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
+        <div className="absolute -top-2 right-4 md:right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
         <div className="max-w-full mx-auto relative z-20 px-4 md:px-0">
           <h1
-            className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
+            className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20 mt-12"
             style={{
               WebkitTextStroke: "2px #737373",
             }}

src/components/Navbar/index.jsx

@@ -19,7 +19,7 @@ function Navbar({ links }) {
 
   return (
     <nav
-      className={`shadow-md w-full flex xs:flex-col md:flex-row ${isOpen ? "xs:h-screen" : ""} md:h-full justify-between items-center px-6 bg-secondary-dark`}
+      className={`shadow-md w-full flex xs:flex-col md:flex-row ${isOpen ? "xs:h-screen" : ""} md:h-full justify-between items-center px-6 bg-secondary-dark relative z-50`}
     >
       <div className="flex flex-row justify-between xs:w-full md:w-auto items-center">
         <Link

src/components/WebsiteTeam/TeamMember.jsx

@@ -83,12 +83,12 @@ function TeamMember({ member, className }) {
           <img
             src={bgimages[id]}
             alt="background"
-            className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-56 h-56 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
+            className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-40 h-40 sm:w-48 sm:h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
           />
           <img
             src={image}
             alt={name}
-            className="relative w-72 h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
+            className="relative w-48 h-48 sm:w-56 sm:h-56 md:w-64 md:h-64 lg:w-72 lg:h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
           />
         </div>
         <h2 className="text-2xl mt-6 font-poppins font-semibold text-center tracking-wide text-text-light">

src/components/WebsiteTeam/index.jsx

@@ -46,7 +46,7 @@ function WebsiteTeam() {
       <div className="flex justify-center items-center">
         <div className="flex flex-col w-full">
           <div className="flex flex-col md:flex-wrap lg:flex-row gap-4 justify-center items-center p-6">
-            <div className="md:min-w-[450px] flex-1 lg:ml-16 text-center xl:text-left text-xl sm:text-2xl md:text-3xl lg:text-[2.7rem] font-poppins space-y-2 ">
+            <div className="md:min-w-[450px] flex-1 lg:ml-16 text-center xl:text-left text-xl sm:text-2xl md:text-3xl lg:text-[2rem] xl:text-[2.5rem] font-poppins space-y-2 ">
               <div className="leading-[1.3]">
                 <span className="text-text-websiteteamlight font-thin">
                   Special Thanks
@@ -73,7 +73,7 @@ function WebsiteTeam() {
                 </span>
               </div>
             </div>
-            <div className="flex flex-row flex-wrap md:flex-nowrap justify-center md:justify-between md:justify-center w-full md:w-min">
+            <div className="flex flex-row flex-wrap md:flex-nowrap gap-4 justify-center md:justify-between md:justify-center w-full md:w-min">
               {teamMembers.slice(0, 2)}
             </div>
           </div>

src/pages/Home/Home.css

@@ -0,0 +1,47 @@
+/* Base Bubble Style */
+.bubble {
+  position: absolute;
+  background: white;
+  border-radius: 50%;
+  opacity: 0.7;
+  animation: float 6s infinite ease-in-out;
+  z-index: -1;
+}
+
+/* Bubble Sizes and Positions */
+.bubble1 {
+  width: 60px;
+  height: 60px;
+  top: 20%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.bubble2 {
+  width: 100px;
+  height: 100px;
+  top: 35%;
+  left: 40%;
+  animation-delay: 2s;
+}
+
+.bubble3 {
+  width: 60px;
+  height: 60px;
+  top: 70%;
+  left: 80%;
+  animation-delay: 4s;
+}
+
+/* Floating Animation */
+@keyframes float {
+  0% {
+    transform: translateY(0) translateX(0);
+  }
+  50% {
+    transform: translateY(-30px) translateX(20px);
+  }
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+}

src/pages/Home/index.jsx

@@ -8,6 +8,8 @@ import TeamMember from "../Teams/TeamMember";
 import teamMembersData from "../Teams/teamsdata.json";
 import Heading from "@/components/Heading";
 import WebsiteTeam from "@/components/WebsiteTeam";
+import stars from "@/assets/images/Christmas stars.png";
+import "./Home.css";
 
 function Home() {
   const { setCursorVariantText, setCursorVariantDefault } =
@@ -16,7 +18,26 @@ function Home() {
   return (
     <PageTransition>
       <div className="bg-background-dark h-[calc(100vh-4.6rem)] flex">
-        <div className="m-auto">
+        <div className="absolute top-0 left-0 z-[0] overflow-hidden h-screen w-full">
+          <img
+            onMouseOver={setCursorVariantText}
+            onMouseLeave={setCursorVariantDefault}
+            className="absolute top-[67%] md:top-[53%] -left-[10%] w-[300px] md:w-[35vw]"
+            src="/CodeX-Website/images/hero2.png"
+            alt="codex-team - laser lock"
+          />
+          <img
+            onMouseOver={setCursorVariantText}
+            onMouseLeave={setCursorVariantDefault}
+            className="absolute top-[13%] -right-[10%] w-[300px] md:w-[35vw]"
+            src="/CodeX-Website/images/hero1.png"
+            alt="codex guest session"
+          />
+          <div className="bubble bubble1" />
+          <div className="bubble bubble2" />
+          <div className="bubble bubble3" />
+        </div>
+        <div className="m-auto relaive z-[1]">
           <div
             onMouseOver={setCursorVariantText}
             onMouseLeave={setCursorVariantDefault}
@@ -25,10 +46,22 @@ function Home() {
             Codex, SIT
           </div>
           <div className="text-lg md:text-2xl lg:text-3xl mt-4 text-text-light text-center">
-            Coding Club
+            Embracing Coding Culture
           </div>
         </div>
       </div>
+      <div className="bg-[#B7AB98] h-16 mt-12 flex flex-row gap-8 justify-between items-center text-2xl uppercase font-bold overflow-hidden">
+        <span>Learn</span>
+        <img src={stars} alt="star-icon" />
+        <span>Code</span>
+        <img src={stars} alt="star-icon" />
+        <span>Collaborate</span>
+        <img src={stars} alt="star-icon" />
+        <span>Build</span>
+        <img src={stars} alt="star-icon" />
+        <span>Solve</span>
+        <img src={stars} alt="star-icon" />
+      </div>
       <AboutSection />
       <div className="min-h-screen mt-32">
         <div className="flex justify-center items-center">