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/App.jsx b/src/App.jsx index 6a5570f..4c25feb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,16 @@ -import Button from "./components/shared/Button"; +import React from "react"; +import SponsorsSection from "../src/pages/landing-page/sponsor"; +import TeamSlider from "../src/pages/landing-page/Team"; +import teamMembers from "../src/config/teammate"; +import TeamPage from "../src/pages/landing-page/TeamPage"; function App() { return ( -
- ASME Website - -
+ <> + + + + ); } 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..372db12 --- /dev/null +++ b/src/config/teammate.js @@ -0,0 +1,95 @@ +// 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", + }, + { + name: "Krish Agarwal8", + 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", + }, + { + name: "Krish Agarwal8", + 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", + }, +]; + +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..5b2bf31 --- /dev/null +++ b/src/pages/landing-page/Team.jsx @@ -0,0 +1,148 @@ +import React, { useState, useEffect } from "react"; +import teamMembers from "../../config/teammate"; +import { FaLinkedin, FaXTwitter } from "react-icons/fa6"; + +const TeamSlider = () => { + const [currentIndex, setCurrentIndex] = useState(0); + const [visibleCount, setVisibleCount] = useState(1); + + const getVisibleCount = () => { + if (window.innerWidth < 640) return 1; + if (window.innerWidth < 768) return 1; + if (window.innerWidth < 1024) return 2; + if (window.innerWidth < 1280) return 3; + return 4; + }; + + useEffect(() => { + const handleResize = () => { + const count = getVisibleCount(); + setVisibleCount(count); + const maxIndex = Math.max(0, teamMembers.length - count); + if (currentIndex > maxIndex) { + setCurrentIndex(maxIndex); + } + }; + + setVisibleCount(getVisibleCount()); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [currentIndex]); + + const nextSlide = () => { + const maxIndex = Math.max(0, teamMembers.length - visibleCount); + setCurrentIndex((prev) => Math.min(prev + visibleCount, maxIndex)); + }; + + const prevSlide = () => { + setCurrentIndex((prev) => Math.max(prev - visibleCount, 0)); + }; + + const pageCount = Math.ceil(teamMembers.length / visibleCount); + const activeDot = Math.round(currentIndex / visibleCount); + + 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: pageCount }).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..0206c37 --- /dev/null +++ b/src/pages/landing-page/TeamPage.jsx @@ -0,0 +1,96 @@ +import React, { useState } from "react"; +import { FaLinkedin, FaXTwitter } from "react-icons/fa6"; +import container from "../../assets/Frame 142.png"; + +const TeamPage = ({ teamMembers = [] }) => { + const [activeTeam, setActiveTeam] = useState("All"); + + const teams = ["All", "Team 1", "Team 2", "Team 3", "Team 4"]; + + const filteredMembers = + activeTeam === "All" + ? teamMembers + : teamMembers.filter((member) => member.team === activeTeam); + + return ( +
+
+ Team Cover +
+ +
+

+ Meet Our Team +

+

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

+
+ + {/* Tabs */} +
+ {teams.map((team) => ( + + ))} +
+ + {/* Team Cards */} +
+ {filteredMembers.map((member, index) => ( +
+
+ {member.name} +
+ +
+

{member.name || "Full name"}

+

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

+ +
+
+ ))} +
+
+ ); +}; + +export default TeamPage; diff --git a/src/pages/landing-page/sponsor.css b/src/pages/landing-page/sponsor.css new file mode 100644 index 0000000..7613c95 --- /dev/null +++ b/src/pages/landing-page/sponsor.css @@ -0,0 +1,7 @@ +.hide-scrollbar::-webkit-scrollbar { + display: none; +} +.hide-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; +} diff --git a/src/pages/landing-page/sponsor.jsx b/src/pages/landing-page/sponsor.jsx new file mode 100644 index 0000000..e6067f7 --- /dev/null +++ b/src/pages/landing-page/sponsor.jsx @@ -0,0 +1,125 @@ +import React, { useRef, useEffect, useState } from "react"; +import { ArrowLeft, ArrowRight } from "lucide-react"; +import sponsors from "../../config/sponsors"; +import "./sponsor.css"; + +const SponsorsSection = () => { + const scrollRef = useRef(null); + const [isHovered, setIsHovered] = useState(false); + const pageIndex = useRef(0); + const [visibleCount, setVisibleCount] = useState(1); + + useEffect(() => { + const handleResize = () => { + const width = window.innerWidth; + if (width < 640) setVisibleCount(1); + else if (width < 1024) setVisibleCount(2); + else setVisibleCount(3); + }; + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + const scrollToPage = (index) => { + const container = scrollRef.current; + if (!container) return; + + const cardWidth = container.scrollWidth / sponsors.length; + const scrollX = cardWidth * visibleCount * index; + container.scrollTo({ left: scrollX, behavior: "smooth" }); + }; + + const totalPages = () => { + return Math.ceil(sponsors.length / visibleCount); + }; + + 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, visibleCount]); + + 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} +
+ + ))} +
+ +
+ + +
+
+
+
+ ); +}; + +export default SponsorsSection;