diff --git a/package-lock.json b/package-lock.json index 9ad577c..fadb748 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,10 @@ "version": "0.0.0", "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" }, @@ -3082,6 +3084,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.525.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz", + "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -3447,6 +3458,15 @@ "react": "^19.1.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", diff --git a/package.json b/package.json index 294f4ea..53e8643 100644 --- a/package.json +++ b/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" }, diff --git a/src/assets/Frame 136.png b/src/assets/Frame 136.png new file mode 100644 index 0000000..4407e56 Binary files /dev/null and b/src/assets/Frame 136.png differ diff --git a/src/assets/Frame 142.png b/src/assets/Frame 142.png new file mode 100644 index 0000000..6d74129 Binary files /dev/null and b/src/assets/Frame 142.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/config/sponsors.js b/src/config/sponsors.js new file mode 100644 index 0000000..2f95aee --- /dev/null +++ b/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; diff --git a/src/config/teammate.js b/src/config/teammate.js new file mode 100644 index 0000000..871a4f4 --- /dev/null +++ b/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; diff --git a/src/pages/landing-page/Team.jsx b/src/pages/landing-page/Team.jsx new file mode 100644 index 0000000..5d96f74 --- /dev/null +++ b/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 ( +
+
+
+

Our team

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+ +
+ +
+
+
+ {teamMembers.map((member, index) => ( +
+ {member.name} +
+

{member.name}

+

{member.title}

+

+ {member.description} +

+ +
+
+ ))} +
+
+ +
+ + +
+ +
+ {Array.from({ + length: Math.ceil(teamMembers.length / visibleCount), + }).map((_, idx) => ( + + ))} +
+
+ +
+

Join Us Today!

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+ +
+
+
+ ); +}; + +export default TeamSlider; diff --git a/src/pages/landing-page/TeamPage.jsx b/src/pages/landing-page/TeamPage.jsx new file mode 100644 index 0000000..99e477a --- /dev/null +++ b/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 ( +
+ {/* Top Banner Image */} +
+ Team Cover +
+ + {/* Heading & Description */} +
+

+ Meet Our Team +

+

+ 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. +

+
+ + {/* Team Members Grid */} +
+ {teamMembers.map((member, index) => ( +
+ {/* Image box with border */} +
+ {member.name} +
+ + {/* Text below image */} +
+

{member.name || "Full name"}

+

+ {member.title || "Job title"} +

+
+ + + + + + +
+
+
+ ))} +
+
+ ); +}; + +export default TeamPage; diff --git a/src/pages/landing-page/sponsor.jsx b/src/pages/landing-page/sponsor.jsx new file mode 100644 index 0000000..e1f8d3f --- /dev/null +++ b/src/pages/landing-page/sponsor.jsx @@ -0,0 +1,112 @@ +import React, { useRef, useEffect, useState } from "react"; +import { ArrowLeft, ArrowRight } from "lucide-react"; +import sponsors from "../../config/sponsors"; + +const SponsorsSection = () => { + const scrollRef = useRef(null); + const [isHovered, setIsHovered] = useState(false); + const pageIndex = useRef(0); + + const scrollToPage = (index) => { + const container = scrollRef.current; + if (!container) return; + + const scrollX = container.offsetWidth * index; + container.scrollTo({ left: scrollX, behavior: "smooth" }); + }; + + const totalPages = () => { + const container = scrollRef.current; + if (!container) return 0; + + const fullWidth = container.scrollWidth; + const visibleWidth = container.offsetWidth; + return Math.ceil(fullWidth / visibleWidth); + }; + + const autoScroll = () => { + const container = scrollRef.current; + if (!container) return; + + const pages = totalPages(); + pageIndex.current = (pageIndex.current + 1) % pages; + scrollToPage(pageIndex.current); + }; + + const handleManualScroll = (direction) => { + const pages = totalPages(); + if (direction === "left") { + pageIndex.current = + pageIndex.current === 0 ? pages - 1 : pageIndex.current - 1; + } else { + pageIndex.current = (pageIndex.current + 1) % pages; + } + scrollToPage(pageIndex.current); + }; + + useEffect(() => { + let interval; + if (!isHovered) { + interval = setInterval(autoScroll, 3000); + } + return () => clearInterval(interval); + }, [isHovered]); + + return ( +
+
+

+ Our Sponsors and Partners +

+

+ We are proudly supported by our amazing sponsors and partners. +

+ +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
+ {sponsors.map((sponsor, index) => ( + + {sponsor.name} + + ))} +
+ + {/* Buttons below */} +
+ + +
+
+
+
+ ); +}; + +export default SponsorsSection;