Skip to content

Commit 496ad99

Browse files
Miran-FirdausiMiran-Firdausi
authored
Merge pull request #72 from codeXsit/codex-home-events-highlight
Add events highlight on home
2 parents 3b00b6c + 2f8f7a6 commit 496ad99

File tree

8 files changed

+166
-60
lines changed

8 files changed

+166
-60
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@vitejs/plugin-react": "^4.2.1",
2121
"baffle": "^0.3.6",
2222
"framer-motion": "^11.5.4",
23+
"gsap": "^3.12.5",
2324
"lodash": "^4.17.21",
2425
"prop-types": "^15.8.1",
2526
"react": "^18.2.0",

‎src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Navbar from "@/components/Navbar/index";
77
import Cursor from "./components/Cursor";
88
import CursorVariantProvider from "@/context/CursorVariantProvider";
99
import Loader from "@/components/Loader";
10+
import ScrollToTop from "@/components/ScrollToTop";
1011

1112
const navLinks = [
1213
{ name: "About Us", path: "/about-us" },
@@ -34,6 +35,7 @@ function App() {
3435
<Navbar links={navLinks} />
3536
<Cursor />
3637
<ToastContainer />
38+
<ScrollToTop />
3739
<Routes>
3840
{routes.map((route) => (
3941
<Route

‎src/assets/images/About/oval.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/AboutUs/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default function AboutSection() {
8484
<section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
8585
<div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
8686
<div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
87-
<div className="max-w-full mx-auto px-24 relative z-20">
87+
<div className="max-w-full mx-auto px-12 relative z-20">
8888
<h1
8989
className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
9090
style={{

‎src/components/EventsHighlight/index.jsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { useEffect, useRef } from "react";
2+
import gsap from "gsap";
3+
import { ScrollTrigger } from "gsap/ScrollTrigger";
4+
5+
function EventsHighlight() {
6+
const containerRef = useRef(null);
7+
8+
const images = [
9+
{
10+
key: 0,
11+
url: "/CodeX-Website/gallery/Community Session/cs1.jpg",
12+
alt: "Image 1",
13+
side: "left",
14+
},
15+
{
16+
key: 1,
17+
url: "/CodeX-Website/gallery/AIML SESSION/aiml1.jpg",
18+
alt: "Image 2",
19+
side: "right",
20+
},
21+
{
22+
key: 2,
23+
url: "/CodeX-Website/gallery//AIML SESSION/aiml6.jpg",
24+
alt: "Image 3",
25+
side: "left",
26+
},
27+
{
28+
key: 3,
29+
url: "/CodeX-Website/gallery/Community Session/cs3.jpg",
30+
alt: "Image 4",
31+
side: "right",
32+
},
33+
{
34+
key: 4,
35+
url: "/CodeX-Website/gallery/HackTober Fest/htf1_1.jpg",
36+
alt: "Image 5",
37+
side: "left",
38+
},
39+
{
40+
key: 5,
41+
url: "/CodeX-Website/gallery/Laser Lock/ll1.jpg",
42+
alt: "Image 6",
43+
side: "right",
44+
},
45+
];
46+
47+
useEffect(() => {
48+
gsap.registerPlugin(ScrollTrigger);
49+
50+
// Set up each image animation
51+
images.forEach((_, index) => {
52+
const imageSection = containerRef.current.children[index];
53+
54+
gsap.fromTo(
55+
imageSection,
56+
{
57+
opacity: 1,
58+
y: "20vh",
59+
},
60+
{
61+
opacity: 1,
62+
y: "-100vh",
63+
ease: "none",
64+
scrollTrigger: {
65+
trigger: imageSection,
66+
start: "top bottom",
67+
end: "bottom top",
68+
scrub: 1,
69+
markers: false,
70+
},
71+
},
72+
);
73+
});
74+
75+
return () => {
76+
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
77+
};
78+
}, []);
79+
80+
return (
81+
<div className="relative">
82+
{/* Fixed description */}
83+
<div className="sticky top-1/2 z-0 text-center">
84+
<h2 className="xs:text-4xl md:text-6xl lg:text-8xl font-bold text-black mb-4 text-white mt-[48vh] tracking-tighter font-black font-poppins">
85+
Events Highlight
86+
</h2>
87+
</div>
88+
89+
{/* Images container */}
90+
<div ref={containerRef} className="relative">
91+
{images.map((image) => (
92+
<div
93+
key={image.key}
94+
className={`relative h-[50vh] flex items-center justify-center ${
95+
image.side === "left" ? "ml-24" : "mr-24"
96+
}`}
97+
>
98+
<div
99+
className={`absolute ${
100+
image.side === "left" ? "left-0 z-100" : "right-0"
101+
} xs:w-[20rem] md:w-[30rem]`}
102+
>
103+
<img
104+
src={image.url}
105+
alt={image.alt}
106+
className="w-full object-contain rounded-lg shadow-xl"
107+
/>
108+
</div>
109+
</div>
110+
))}
111+
</div>
112+
</div>
113+
);
114+
}
115+
116+
export default EventsHighlight;

‎src/components/Footer/index.jsx‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/components/ScrollToTop/index.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { useEffect } from "react";
2+
import { useLocation } from "react-router-dom";
3+
4+
function ScrollToTop() {
5+
const location = useLocation();
6+
7+
useEffect(() => {
8+
window.scrollTo(0, 0);
9+
}, [location]);
10+
11+
return null;
12+
}
13+
14+
export default ScrollToTop;

‎src/pages/Home/index.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { useContext } from "react";
22
import { CursorVariantContext } from "@/context/CursorVariantProvider";
33
import PageTransition from "@/components/PageTransition";
4+
import EventsHighlight from "../../components/EventsHighlight";
5+
import SkewButton from "../../components/SkewButton";
46
import AboutSection from "@/components/AboutUs";
7+
import TeamMember from "../Teams/TeamMember";
8+
import teamMembersData from "../Teams/teamsdata.json";
9+
import Heading from "@/components/Heading";
510

611
function Home() {
712
const { setCursorVariantText, setCursorVariantDefault } =
@@ -24,6 +29,26 @@ function Home() {
2429
</div>
2530
</div>
2631
<AboutSection />
32+
<div className="min-h-screen mt-32">
33+
<div className="flex justify-center items-center">
34+
<div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
35+
<Heading
36+
text="MEET OUR TEAM"
37+
className="text-center absolute top-0 left-0 right-0 mb-24"
38+
/>
39+
<div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
40+
{teamMembersData.slice(0, 3).map((member) => (
41+
<TeamMember key={member.name} member={member} />
42+
))}
43+
</div>
44+
<SkewButton text="SEE ALL" link="/teams" className="mt-16" />
45+
</div>
46+
</div>
47+
</div>
48+
<EventsHighlight />
49+
<div className="h-[50vh]">
50+
<SkewButton link="/events" text="See all events" />
51+
</div>
2752
</PageTransition>
2853
);
2954
}

0 commit comments

Comments
 (0)