Team and Sponsor section

package.json

@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
     "react-router": "^7.6.3",
     "tailwindcss": "^4.1.11"
   },

src/config/sponsors.js

@@ -0,0 +1,46 @@
+// sponsors.js
+const sponsors = [
+  {
+    name: "Sponsor One",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+1",
+    link: "https://sponsor1.com",
+  },
+  {
+    name: "Sponsor Two",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+2",
+    link: "https://sponsor2.com",
+  },
+  {
+    name: "Sponsor Three",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
+    link: "https://sponsor3.com",
+  },
+  {
+    name: "Sponsor Three",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
+    link: "https://sponsor3.com",
+  },
+  {
+    name: "Sponsor Three",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
+    link: "https://sponsor3.com",
+  },
+  {
+    name: "Sponsor Three",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
+    link: "https://sponsor3.com",
+  },
+  {
+    name: "Sponsor Three",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
+    link: "https://sponsor3.com",
+  },
+  {
+    name: "Sponsor Three",
+    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
+    link: "https://sponsor3.com",
+  },
+  // Add more sponsors freely
+];
+
+export default sponsors;

src/config/teammate.js

@@ -0,0 +1,64 @@
+// config/team.js
+import Frame from "../assets/Frame 136.png";
+
+const teamMembers = [
+  {
+    name: "Krish Agarwal1",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  {
+    name: "Krish Agarwal2",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  {
+    name: "Krish Agarwal3",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  {
+    name: "Krish Agarwal4",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  {
+    name: "Krish Agarwal5",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long6",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  {
+    name: "Krish Agarwal7",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  {
+    name: "Krish Agarwal8",
+    title: "Frontend Developer",
+    img: Frame,
+    description: "Eat good live long",
+
+    linkedin: "https://linkedin.com/in/krishagarwal",
+  },
+  // ...add more team members
+];
+
+export default teamMembers;

src/pages/landing-page/Team.jsx

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import teamMembers from "../../config/teammate";
+import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
+
+const TeamSlider = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const getVisibleCount = () => {
+    if (window.innerWidth < 640) return 1;
+    if (window.innerWidth < 1024) return 2;
+    return 3;
+  };
+
+  const [visibleCount, setVisibleCount] = useState(getVisibleCount());
+
+  React.useEffect(() => {
+    const handleResize = () => setVisibleCount(getVisibleCount());
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const nextSlide = () => {
+    if (currentIndex < teamMembers.length - visibleCount)
+      setCurrentIndex((prev) => prev + 1);
+  };
+
+  const prevSlide = () => {
+    if (currentIndex > 0) setCurrentIndex((prev) => prev - 1);
+  };
+
+  return (
+    <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16 relative overflow-hidden">
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-8">
+          <h2 className="text-3xl font-bold mb-2">Our team</h2>
+          <p className="text-lg text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+          <button className="mt-4 border border-white text-white py-2 px-4 rounded hover:bg-white hover:text-[#00163A] transition">
+            View all team members
+          </button>
+        </div>
+
+        <div className="relative">
+          <div className="overflow-hidden w-full">
+            <div
+              className="flex gap-6 transition-transform duration-700 ease-in-out"
+              style={{
+                transform: `translateX(-${(currentIndex * 100) / visibleCount}%)`,
+                width: `${(teamMembers.length / visibleCount) * 100}%`,
+              }}
+            >
+              {teamMembers.map((member, index) => (
+                <div
+                  key={index}
+                  className="w-full sm:w-1/2 lg:w-72 min-w-full sm:min-w-1/2 lg:min-w-72 bg-[#00163A] rounded-lg flex-shrink-0"
+                >
+                  <img
+                    src={member.img}
+                    alt={member.name}
+                    className="w-full h-64 object-cover rounded-md"
+                  />
+                  <div className="mt-3">
+                    <p className="font-semibold text-white">{member.name}</p>
+                    <p className="text-sm text-gray-300">{member.title}</p>
+                    <p className="text-sm text-gray-400 mt-2">
+                      {member.description}
+                    </p>
+                    <div className="flex gap-3 mt-3 text-white text-lg">
+                      <a
+                        href={member.linkedin}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-blue-400 cursor-pointer"
+                      >
+                        <FaLinkedin />
+                      </a>
+                      <a
+                        href={member.twitter}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-blue-400 cursor-pointer"
+                      >
+                        <FaXTwitter />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="absolute -bottom-6 right-4 flex items-center gap-3 z-10">
+            <button
+              onClick={prevSlide}
+              className="bg-white text-[#00163A] w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold"
+            >
+              {"<"}
+            </button>
+            <button
+              onClick={nextSlide}
+              className="bg-white text-[#00163A] w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold"
+            >
+              {">"}
+            </button>
+          </div>
+
+          <div className="absolute -bottom-6 left-2 flex gap-2">
+            {Array.from({
+              length: Math.ceil(teamMembers.length / visibleCount),
+            }).map((_, idx) => (
+              <span
+                key={idx}
+                className={`w-2 h-2 rounded-full ${
+                  idx === Math.floor(currentIndex / visibleCount)
+                    ? "bg-white"
+                    : "bg-gray-500"
+                }`}
+              ></span>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-24">
+          <h3 className="text-xl font-bold mb-1">Join Us Today!</h3>
+          <p className="text-base text-gray-300 mb-3">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+          <button className="border border-white text-white py-2 px-4 rounded hover:bg-white hover:text-[#00163A] transition">
+            Apply here
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TeamSlider;

src/pages/landing-page/TeamPage.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
+import container from "../../assets/Frame 142.png";
+
+const TeamPage = ({ teamMembers = [] }) => {
+  return (
+    <section className="bg-white text-black">
+      {/* Top Banner Image */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28">
+        <img
+          src={container}
+          alt="Team Cover"
+          className="w-full h-auto object-contain rounded-lg"
+        />
+      </div>
+
+      {/* Heading & Description */}
+      <div className="text-center py-10 px-4 max-w-4xl mx-auto">
+        <h2 className="text-3xl sm:text-4xl font-bold text-[#021640] mb-4">
+          Meet Our Team
+        </h2>
+        <p className="text-gray-700 text-lg ">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          varius enim in eros elementum tristique. Duis cursus, mi quis viverra
+          ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
+        </p>
+      </div>
+
+      {/* Team Members Grid */}
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+        {teamMembers.map((member, index) => (
+          <div key={index} className="flex flex-col items-center text-center">
+            {/* Image box with border */}
+            <div className="w-full max-w-xs border rounded-md overflow-hidden shadow">
+              <img
+                src={
+                  member.img || "https://via.placeholder.com/300x250?text=Photo"
+                }
+                alt={member.name}
+                className="w-full h-60 object-cover"
+              />
+            </div>
+
+            {/* Text below image */}
+            <div className="mt-4">
+              <h3 className="font-bold">{member.name || "Full name"}</h3>
+              <p className="text-sm text-gray-600">
+                {member.title || "Job title"}
+              </p>
+              <div className="flex justify-center space-x-3 mt-2">
+                <a
+                  href={member.linkedin || "#"}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-black hover:text-blue-700"
+                >
+                  <FaLinkedin size={18} />
+                </a>
+                <a
+                  href={member.twitter || "#"}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-black hover:text-blue-500"
+                >
+                  <FaXTwitter size={18} />
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default TeamPage;