From 2ad6fded02379a088aa5cdec2889f8a39b21c05e Mon Sep 17 00:00:00 2001
From: AvantikaSharma2307
 <123316093+AvantikaSharma2307@users.noreply.github.com>
Date: Tue, 16 Apr 2024 23:59:13 +0530
Subject: [PATCH 1/2] Updated the sponser section

---
 src/Sections/Card.css     | 10 ++++++++-
 src/Sections/Sponsors.tsx | 44 +++++++++++++++++++++++++++++++--------
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/Sections/Card.css b/src/Sections/Card.css
index d32d59aeff..f22b6ceada 100644
--- a/src/Sections/Card.css
+++ b/src/Sections/Card.css
@@ -1,5 +1,5 @@
 .card {
-    width: 300px;
+    width: 250px;
     height: 200px;
     background-color:white;
     border-radius: 10px;
@@ -31,4 +31,12 @@
       grid-template-columns: 1fr;
     }
   }
+  .card {
+    transition: opacity 0.5s ease;
+    opacity: 0;
+  }
   
+  .appear {
+    opacity: 1;
+  }
+  
\ No newline at end of file
diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
index 27039a8f41..24ff992ed5 100644
--- a/src/Sections/Sponsors.tsx
+++ b/src/Sections/Sponsors.tsx
@@ -1,23 +1,49 @@
-
+import { useEffect, useRef, useState } from 'react';
 import './Card.css'; 
 import devtron from '../images/devtron.png';
 import microsoft from '../images/microsoft.png';
 import tata from'../images/tata 1 mg.png';
 import epam from '../images/epam.png';
+
 export const Sponsors = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const sponsorRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        setIsVisible(entry.isIntersecting);
+      });
+    }, options);
+
+    if (sponsorRef.current) {
+      observer.observe(sponsorRef.current);
+    }
+
+    return () => {
+      if (sponsorRef.current) {
+        observer.unobserve(sponsorRef.current);
+      }
+    };
+  }, []);
+
   return (
     <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
-      <div className="mb-96">
+      <div className="">
         <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
-        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-1 md:grid-cols-2 gap-20">
-          <div className='card ease-in-out '><img src={devtron} className='img pt-8'></img></div>
-          <div className='card ease-in-out '><img src={microsoft} className='img pt-8'></img></div>
-          <div className='card ease-in-out '><img src={tata} className='img'></img></div>
-          <div className='card ease-in-out '><img src={epam}  className='img h-36'></img></div>
+        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-1 md:grid-cols-4 gap-20" ref={sponsorRef}>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={devtron} className='img pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={microsoft} className='img pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={tata} className='img h-36'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={epam}  className='img h-36'></img></div>
         </div>
       </div>
     </div>
   );
 };
-
-

From d654530dc4d42cdfdd0cd3432149f4bf6e4e1755 Mon Sep 17 00:00:00 2001
From: AvantikaSharma2307
 <123316093+AvantikaSharma2307@users.noreply.github.com>
Date: Fri, 19 Apr 2024 23:58:05 +0530
Subject: [PATCH 2/2] all changes done in sponser section

Can be easily merged
---
 src/Sections/Card.css     | 127 +++++++++++++++++++++++++++++---------
 src/Sections/Sponsors.tsx |  10 +--
 2 files changed, 104 insertions(+), 33 deletions(-)

diff --git a/src/Sections/Card.css b/src/Sections/Card.css
index f22b6ceada..c23f67032a 100644
--- a/src/Sections/Card.css
+++ b/src/Sections/Card.css
@@ -1,42 +1,113 @@
 .card {
-    width: 250px;
-    height: 200px;
-    background-color:white;
-    border-radius: 10px;
-    border-color: beige;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
-    padding: 20px;
-    text-align: center;
+  width: 200px; /* Default width */
+  height: 200px; /* Default height */
+  background-color: white;
+  border-radius: 10px;
+  border-color: beige;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  transition: opacity 0.5s ease;
+  opacity: 0;
+}
+
+.card h2 {
+  margin-top: 0;
+  color: #333333;
+}
+
+.card p {
+  color: #666666;
+}
+
+.card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+
+
+  @media (max-width: 640px) {
+    .sm\:grid-cols-2 {
+      grid-template-columns: 1fr;
+    }
+  }
+  .card {
+    transition: opacity 0.5s ease;
+    opacity: 0;
   }
   
-  .card h2 {
-    margin-top: 0;
-    color: #333333;
+  .appear {
+    opacity: 1;
   }
   
-  .card p {
-    color: #666666;
+  
+
+
+@media screen and (max-width: 640px) {
+  .card {
+    width: 50%;
+    height:100px;
+    max-height: 100%;
+    padding:3px;
   }
-  .img {
+
+.card img {
     width: 100%;
     height: auto;
-    display: block;
-  }
-  .card:hover {
-    transform: scale(1.05); 
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
+    max-height: 100%;
+    object-fit: contain;
+    padding-top: 12px;
   }
-  @media (max-width: 640px) {
-    .sm\:grid-cols-1 {
-      grid-template-columns: 1fr;
-    }
+
+
+ .grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 3fr);
+  grid-gap:5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   }
+}
+@media screen and (max-width:440px) {
   .card {
-    transition: opacity 0.5s ease;
-    opacity: 0;
+    width: 100%;
+    height:50px;
+    max-height: 100%;
+    padding:3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
+
+.card img {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    object-fit: contain;
+    padding-top:1px;
+  }
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-gap:1px;
   
-  .appear {
-    opacity: 1;
+    }
+
+}
+@media screen and (min-width:650px) and (max-width:750px) {
+  .card img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    padding-top:8vh;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
index 24ff992ed5..1a88972f0c 100644
--- a/src/Sections/Sponsors.tsx
+++ b/src/Sections/Sponsors.tsx
@@ -37,11 +37,11 @@ export const Sponsors = () => {
     <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
       <div className="">
         <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
-        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-1 md:grid-cols-4 gap-20" ref={sponsorRef}>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={devtron} className='img pt-12'></img></div>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={microsoft} className='img pt-12'></img></div>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={tata} className='img h-36'></img></div>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={epam}  className='img h-36'></img></div>
+        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-2 md:grid-cols-4 gap-20 grid-container" ref={sponsorRef}>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={devtron} className='img md:pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={microsoft} className='img md:pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={tata} className='img h-36 md:pt-4'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={epam}  className='img h-36 md:pt-2'></img></div>
         </div>
       </div>
     </div>