From 9fe40109434f670abe725c3e8b817bf64afc2d2b Mon Sep 17 00:00:00 2001
From: Shalom Mendonca <menshalom07@gmail.com>
Date: Sun, 31 Aug 2025 22:44:24 +0530
Subject: [PATCH 1/3] herosec images

---
 src/config/navbarHero.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/config/navbarHero.js b/src/config/navbarHero.js
index 5e5275e..8fbd4b8 100644
--- a/src/config/navbarHero.js
+++ b/src/config/navbarHero.js
@@ -19,7 +19,7 @@ export const siteConfig = {
     primaryButton: "Join Us",
     secondaryLink: "Learn More",
     image:
-      "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132771/image_1_w5ijjl.png",
+      "https://res.cloudinary.com/djqgs2pet/image/upload/v1756018619/IMG_20250822_234850_bxluqx.jpg",
     image1:
       "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159681/Ellipse_1_sxc0u7.png",
     image2:
@@ -32,7 +32,7 @@ export const siteConfig = {
       "ASME NIT Rourkela is dedicated to fostering engineering innovation among students. We serve as a pivotal connecting link between academia and industry, tackling technical obstacles with enthusiasm through our various initiatives and events. ASME NIT Rourkela is committed to fostering engineering innovation and practical application among students. All of us are free to make a positive impact through our various technical and non-events.",
     button: "Learn More",
     image:
-      "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132823/image_lxdaqf.png",
+      "https://res.cloudinary.com/djqgs2pet/image/upload/v1756018623/IMG-20250819-WA0130_pogbzm.jpg",
   },
 
   missions: [

From 0992e81a2e237104d701f973a63bf6785febd77b Mon Sep 17 00:00:00 2001
From: mshalom27 <menshalom07@gmail.com>
Date: Thu, 4 Sep 2025 23:01:50 +0530
Subject: [PATCH 2/3] transition

---
 src/components/AboutSection.jsx | 36 +++++++++++++++++++++-----
 src/components/HeroSection.jsx  | 46 ++++++++++++++++++++++++---------
 2 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/components/AboutSection.jsx b/src/components/AboutSection.jsx
index 03c6d3d..ba1dc6d 100644
--- a/src/components/AboutSection.jsx
+++ b/src/components/AboutSection.jsx
@@ -1,22 +1,44 @@
-import Button from "./shared/Button";
+import { useState, useEffect } from "react";
 import { siteConfig } from "../config/navbarHero";
 
 export default function AboutSection() {
+  const [showFirst, setShowFirst] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <section
       id="about"
       className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
     >
-      <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 xl:gap-x-12 2xl:gap-x-14">
-        <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
+      <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-x-10 xl:gap-x-12 2xl:gap-x-14">
+        <div className="w-full relative flex justify-center items-center h-[400px] md:h-[500px]">
+          <img
+            src={siteConfig.about.image}
+            alt="About image 1"
+            className="block md:hidden rounded-md shadow-lg object-cover w-full h-full"
+          />
+
           <img
             src={siteConfig.about.image}
-            alt="ASME NIT Rourkela team members"
-            className="rounded-md shadow-lg object-cover w-full h-auto"
+            alt="About image 1 fade"
+            className={`hidden md:block rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
+              showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
+            }`}
+          />
+          <img
+            src={siteConfig.hero.image}
+            alt="About image 2 fade"
+            className={`hidden md:block rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
+              showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
+            }`}
           />
         </div>
 
-        <div className="w-full  text-center md:text-left space-y-4 max-w-[700px]">
+        <div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
           <h1
             className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
             style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
@@ -36,7 +58,7 @@ export default function AboutSection() {
               href="#cards"
               role="button"
               tabIndex={0}
-              className=" text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
+              className="text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.about.button}
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index 1601dee..b6a3b67 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -1,9 +1,17 @@
+import { useState, useEffect } from "react";
 import Button from "./shared/Button";
 import { siteConfig } from "../config/navbarHero";
 
 export default function HeroSection() {
+  const [showFirst, setShowFirst] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
-    <section className="bg-white min-h-[400px]  pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <section className="bg-white min-h-[400px] pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
       <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between md:gap-x-12">
         <div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
           <p
@@ -12,21 +20,18 @@ export default function HeroSection() {
           >
             {siteConfig.hero.title}
           </p>
-
           <h1
             className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] xl:text-[64px] font-bold uppercase text-black leading-[120%]"
             style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
           >
             {siteConfig.hero.subtitle}
           </h1>
-
           <p
             className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
             style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
           >
             {siteConfig.hero.description}
           </p>
-
           <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
             <Button
               className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
@@ -38,7 +43,7 @@ export default function HeroSection() {
               href="#about"
               role="button"
               tabIndex={0}
-              className=" h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
+              className="h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.hero.secondaryLink}
@@ -46,12 +51,30 @@ export default function HeroSection() {
           </div>
         </div>
 
-        <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0 ">
-          <img
-            src={siteConfig.hero.image}
-            alt="ASME NIT Rourkela team members"
-            className="rounded-md shadow-lg object-cover w-full h-auto"
-          />
+        <div className="w-full max-w-[1600px] px-2 md:px-0 relative h-[400px] md:h-[500px] flex justify-center items-center">
+          <div className="w-full max-w-[1600px] px-2 md:px-0 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
+            <img
+              src={siteConfig.hero.image}
+              alt="Hero image 1"
+              className="rounded-md shadow-lg object-cover w-full h-full"
+            />
+
+            <img
+              src={siteConfig.about.image}
+              alt="Hero image 2"
+              className={`rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 hidden md:block ${
+                showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
+              }`}
+            />
+
+            <img
+              src={siteConfig.hero.image}
+              alt="Hero image 1 fade"
+              className={`rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 hidden md:block ${
+                showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
+              }`}
+            />
+          </div>
 
           <img
             src={siteConfig.hero.image1}
@@ -65,7 +88,6 @@ export default function HeroSection() {
               opacity: 0.36,
             }}
           />
-
           <img
             src={siteConfig.hero.image2}
             alt="Background figure 2"

From 7f1f448b2f0dce191ed8c4348a275ba8df25dd19 Mon Sep 17 00:00:00 2001
From: mshalom27 <menshalom07@gmail.com>
Date: Fri, 5 Sep 2025 12:55:11 +0530
Subject: [PATCH 3/3] spacing

---
 src/components/AboutSection.jsx |  4 ++--
 src/components/HeroSection.jsx  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/AboutSection.jsx b/src/components/AboutSection.jsx
index ba1dc6d..dd8cc10 100644
--- a/src/components/AboutSection.jsx
+++ b/src/components/AboutSection.jsx
@@ -15,11 +15,11 @@ export default function AboutSection() {
       className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
     >
       <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-x-10 xl:gap-x-12 2xl:gap-x-14">
-        <div className="w-full relative flex justify-center items-center h-[400px] md:h-[500px]">
+        <div className="w-full px-4 relative flex justify-center items-center  h-[300px] sm:h-[350px] md:h-[500px]">
           <img
             src={siteConfig.about.image}
             alt="About image 1"
-            className="block md:hidden rounded-md shadow-lg object-cover w-full h-full"
+            className="block md:hidden  mb-10 rounded-md shadow-lg object-cover w-full h-full"
           />
 
           <img
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index b6a3b67..8eb6d10 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -11,7 +11,7 @@ export default function HeroSection() {
   }, []);
 
   return (
-    <section className="bg-white min-h-[400px] pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <section className="bg-white min-h-[400px] pt-[40px] sm:pt-[30px] md:pt-[80px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-8">
       <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between md:gap-x-12">
         <div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
           <p
@@ -51,8 +51,8 @@ export default function HeroSection() {
           </div>
         </div>
 
-        <div className="w-full max-w-[1600px] px-2 md:px-0 relative h-[400px] md:h-[500px] flex justify-center items-center">
-          <div className="w-full max-w-[1600px] px-2 md:px-0 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
+        <div className="w-full max-w-[1600px] px-2 md:px-0 relative h-[350px] md:h-[500px] flex justify-center items-center">
+          <div className="w-full max-w-[1600px] mt-0 px-2 md:px-0 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
             <img
               src={siteConfig.hero.image}
               alt="Hero image 1"
@@ -84,14 +84,14 @@ export default function HeroSection() {
               width: "705px",
               height: "705px",
               top: "-234px",
-              left: "-151px",
+              left: "-800px",
               opacity: 0.36,
             }}
           />
           <img
             src={siteConfig.hero.image2}
             alt="Background figure 2"
-            className="absolute hidden min-[980px]:block"
+            className="absolute hidden min-[1800px]:block"
             style={{
               width: "478px",
               height: "478px",