Sponsers Section created (cncgnd#16)

[Feature] Sponsers section has been created which includes the sponsers
of cncg delhi.

src/Sections/Card.css

@@ -0,0 +1,34 @@
+.card {
+    width: 300px;
+    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;
+  }
+
+  .card h2 {
+    margin-top: 0;
+    color: #333333;
+  }
+
+  .card p {
+    color: #666666;
+  }
+  .img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  .card:hover {
+    transform: scale(1.05); 
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
+  }
+  @media (max-width: 640px) {
+    .sm\:grid-cols-1 {
+      grid-template-columns: 1fr;
+    }
+  }
+

src/Sections/Home.tsx

@@ -4,14 +4,17 @@ import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
 import { AboutUs } from "./AboutUs";
 import { Events } from "./Events";
 import { Stats } from "./Stats";
-import { Sponsors } from "./Sponsors";
+
 import { Developers } from "./Developers";
 import { Footer } from "@/components/Footer";
 import { Team } from "./Team";
+
+import { Sponsors } from "./Sponsors";
 import { ScrollToTopButton } from "@/components/ScrollToTopButton";
 import { Talks } from "./Talks";
 import { Link } from "react-router-dom";
 
+
 export const Home = () => {
   return (
     <div className="h-full w-screen flex flex-col">
@@ -48,7 +51,7 @@ export const Home = () => {
         <Stats />
       </div>
       <div>
-        <Sponsors />
+         <Sponsors/>
       </div>
       <div>
         <Talks />

src/Sections/Sponsors.tsx

@@ -1,15 +1,23 @@
+
+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 = () => {
   return (
-    <div
-      id="sponsors"
-      className="flex flex-col items-center justify-center bg-black w-screen h-full"
-    >
-      <div>
-        <h2 className="text-white text-3xl font-bold mb-4 mt-[400px]">
-          Our Sponsors
-        </h2>
-        <div className=" p-4 rounded-lg shadow-lg"></div>
+    <div  id="sponsors" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
+      <div className="mb-96">
+        <h2 className="text-white text-3xl font-bold mb-20 text-center">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>
       </div>
     </div>
   );
 };
+
+