Skip to content

Commit d66beca

Browse files
Pratik2026Pratik2026
committed
removed page transition animation as it is not compatible with nextjs component composition pattern
1 parent 5f30b8e commit d66beca

File tree

9 files changed

+119
-64
lines changed

9 files changed

+119
-64
lines changed

‎app/gallery/page.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const Gallery = () => {
5252
className="text-[#FAF8ED] text-center font-bold text-[2.375rem]
5353
leading-[1.2] lg:leading-[1.1] lg:text-[3rem]"
5454
>
55-
<AnimatedTitle>COMMITTEE <span>CREW</span></AnimatedTitle>
55+
<AnimatedTitle viewport={true}>COMMITTEE <span>CREW</span></AnimatedTitle>
5656
</div>
5757
</div>
5858

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
body {
2929
@apply font-gotham;
30-
overflow: hidden;
30+
overflow-x: hidden;
3131
}
3232

3333
.clip-trapezium {

‎app/page.tsx‎

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import topstats from "@/public/lower.svg";
1717
import * as motion from "motion/react-client";
1818
import AnimatedTitle from "@/components/AnimatedTitle";
1919

20-
2120
interface GuidlinesCard {
2221
title: string;
2322
description: string;
@@ -27,32 +26,32 @@ interface GuidlinesCard {
2726

2827
function GuidelinesCard({ title, description, icon, index }: GuidlinesCard) {
2928
// Define animation variants based on index
30-
const animationVariants = {
31-
hidden: { opacity: 0, x: index % 2 === 0 ? -50 : 50 },
32-
visible: { opacity: 1, x: 0 },
33-
};
29+
const animationVariants = {
30+
hidden: { opacity: 0, x: index % 2 === 0 ? -50 : 50 },
31+
visible: { opacity: 1, x: 0 },
32+
};
3433

35-
return (
36-
<motion.div
37-
className="card flex gap-4 items-start"
38-
initial="hidden"
39-
whileInView="visible"
40-
viewport={{ once: true }}
41-
transition={{ duration: 0.5, delay: 0.2 }}
42-
variants={animationVariants}
43-
>
44-
<Image src={icon} alt="Icon" className="xl:w-20 md:w-16 pt-1" />
45-
<div className="flex flex-col justify-center gap-2">
46-
<div className="monitor:text-4xl xl:text-3xl lg:text-2xl text-xl text-white font-bold">
47-
{title}
48-
</div>
49-
<div className="text-base lg:text-base xl:text-lg monitor:text-xl font-normal text-supporting-darkGray md:max-w-64 lg:max-w-[500px] leading-[1.5rem]">
50-
{description}
51-
</div>
52-
</div>
53-
</motion.div>
54-
);
55-
}
34+
return (
35+
<motion.div
36+
className="card flex gap-4 items-start"
37+
initial="hidden"
38+
whileInView="visible"
39+
viewport={{ once: true }}
40+
transition={{ duration: 0.5, delay: 0.2 }}
41+
variants={animationVariants}
42+
>
43+
<Image src={icon} alt="Icon" className="xl:w-20 md:w-16 pt-1" />
44+
<div className="flex flex-col justify-center gap-2">
45+
<div className="monitor:text-4xl xl:text-3xl lg:text-2xl text-xl text-white font-bold">
46+
{title}
47+
</div>
48+
<div className="text-base lg:text-base xl:text-lg monitor:text-xl font-normal text-supporting-darkGray md:max-w-64 lg:max-w-[500px] leading-[1.5rem]">
49+
{description}
50+
</div>
51+
</div>
52+
</motion.div>
53+
);
54+
}
5655

5756
export default function Home() {
5857
const Guidelines = [
@@ -114,19 +113,15 @@ export default function Home() {
114113
<div className="overflow-hidden">
115114
<HeroSection />
116115
<div className="sm:hidden w-screen mt-28">
117-
<Image
118-
src={bottomstats}
119-
alt="bottomstats"
120-
className="w-screen"
121-
/>
122-
<Image
123-
src={topstats}
124-
alt="topstats"
125-
className="w-screen"
126-
/>
116+
<Image src={bottomstats} alt="bottomstats" className="w-screen" />
117+
<Image src={topstats} alt="topstats" className="w-screen" />
127118
</div>
128119
<div className="relative sm:mt-0 mt-28 sm:block hidden">
129-
<Image src={stats} alt="Stats" className=" md:w-full md:scale-125 lg:scale-100" />
120+
<Image
121+
src={stats}
122+
alt="Stats"
123+
className=" md:w-full md:scale-125 lg:scale-100"
124+
/>
130125
<div className="w-full flex justify-evenly rotate-[5deg] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
131126
<div className="max-w-[90px] md:max-w-[250px] text-center flex flex-col items-center gap-2 lg:gap-4">
132127
<div className="font-black text-xl md:text-4xl lg:text-6xl xl:text-7xl text-white">
@@ -178,19 +173,25 @@ export default function Home() {
178173
{/* Why Participate */}
179174
<div className="flex flex-col items-center gap-4 md:gap-16 md:py-28 py-16">
180175
<div className=" text-supporting-lightGray lg:text-5xl monitor:text-7xl xl:text-6xl md:text-4xl sm:text-2xl text-3xl xs:text-4xl font-bold leading-[48px] xs:leading-[64px] text-center">
181-
<AnimatedTitle>Why Participate in Hackbyte 3.0?</AnimatedTitle>
176+
<AnimatedTitle viewport={true}>
177+
Why Participate in Hackbyte 3.0?
178+
</AnimatedTitle>
182179
</div>
183-
<Image
184-
src={whyParticipate}
185-
alt="Why Participate"
186-
className="monitor:w-[900px] xl:w-[800px] lg:w-[700px] md:w-[500px] w-[350px] pt-4 md:pt-0 px-2 xs:px-0"
187-
/>
180+
<AnimatedTitle viewport={true}>
181+
<Image
182+
src={whyParticipate}
183+
alt="Why Participate"
184+
className="monitor:w-[900px] xl:w-[800px] lg:w-[700px] md:w-[500px] w-[350px] pt-4 md:pt-0 px-2 xs:px-0"
185+
/>
186+
</AnimatedTitle>
188187
</div>
189188

190189
{/* Guidelines */}
191190
<div className="flex flex-col items-center gap-4 md:gap-16">
192191
<div className=" text-supporting-lightGray lg:text-5xl monitor:text-7xl xl:text-6xl md:text-4xl text-center text-3xl xs:text-2xl font-bold leading-[48px] xs:leading-[64px]">
193-
<AnimatedTitle>Guidelines for Hackbyte 3.0</AnimatedTitle>
192+
<AnimatedTitle viewport={true}>
193+
Guidelines for Hackbyte 3.0
194+
</AnimatedTitle>
194195
</div>
195196
<div className="w-full grid md:grid-cols-2 grid-cols-1 gap-y-20 xl:gap-x-28 lg:gap-x-16 gap-x-4 py-8 md:py-16 xl:px-28 lg:px-16 px-4 monitor:place-items-center">
196197
{Guidelines.map((item, index) => (
@@ -207,7 +208,7 @@ export default function Home() {
207208

208209
<div className="flex flex-col items-center gap-4 md:gap-16 pt-4 lg:pt-8 xl:pb-12 pb-8 md:pb-16">
209210
<div className=" text-supporting-lightGray lg:text-5xl monitor:text-7xl xl:text-6xl md:text-4xl text-2xl font-bold leading-[64px] pb-4 md:pb-8 lg:pb-16">
210-
<AnimatedTitle>Join our Newsletter</AnimatedTitle>
211+
<AnimatedTitle viewport={true}>Join our Newsletter</AnimatedTitle>
211212
</div>
212213
<Newsletter />
213214
</div>

‎app/partners/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ const PartnersPage = () => {
241241
<TitleSponsorCard />
242242
<div
243243
className="w-full xl:max-w-[95%] monitor:max-w-[90%] grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3
244-
gap-8 lg:gap-[44px] md:px-8 lg:px-0"
244+
gap-8 lg:gap-[44px] md:px-8 lg:px-0 place-items-center"
245245
>
246246
{normalSponsorsData.map((sponsor, index) => {
247247
return <SponsorCard key={index} index={index} {...sponsor} />;

‎app/template.jsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22
import { ReactLenis, useLenis } from "lenis/react";
3-
import { motion } from "motion/react";
43

54
function Template({ children }) {
65
useLenis(({ scroll }) => {
@@ -14,21 +13,15 @@ function Template({ children }) {
1413
<ReactLenis
1514
root
1615
options={{
17-
duration: 0.6,
16+
duration: 1,
1817
easing: (t) => 1 - Math.pow(1 - t, 3),
1918
smooth: true,
2019
smoothTouch: true,
2120
}}
2221
>
23-
<motion.div
24-
initial={{ opacity: 0, scale: 0.99 }}
25-
whileInView={{ opacity: 1, scale: 1 }}
26-
transition={{ duration: 1.2, ease: "easeInOut" }}
27-
>
28-
{children}
29-
</motion.div>
22+
{children}
3023
</ReactLenis>
3124
);
3225
}
3326

34-
export default Template;
27+
export default Template;

‎components/SponsorCard/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SponsorCard: React.FC<SponsorCardProps> = ({
4747
<>
4848
<AnimatedTitle delay={0.2} viewport={true}>
4949
<Link href={site} target="_blank" rel="noreferrer" key={index}>
50-
<div className="w-full text-white hover:scale-105 transition-all ease-in-out duration-300 max-w-[400px]">
50+
<div className="w-full text-white hover:scale-105 transition-all ease-in-out duration-300 max-w-[350px] md:max-w-[400px]">
5151
<Image
5252
src={sponsorimgsrc}
5353
className="w-full h-[181px] xl:h-[216px] rounded-t-[20px] outline-none"

‎components/SpotlightCard/index.jsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
"use client";
2+
import { useRef, useState } from "react";
3+
4+
const SpotlightCard = ({
5+
children,
6+
className = "",
7+
spotlightColor = "rgba(255, 255, 255, 0.25)",
8+
}) => {
9+
const divRef = useRef(null);
10+
const [isFocused, setIsFocused] = useState(false);
11+
const [position, setPosition] = useState({ x: 0, y: 0 });
12+
const [opacity, setOpacity] = useState(0);
13+
14+
const handleMouseMove = (e) => {
15+
if (!divRef.current || isFocused) return;
16+
17+
const rect = divRef.current.getBoundingClientRect();
18+
setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
19+
};
20+
21+
const handleFocus = () => {
22+
setIsFocused(true);
23+
setOpacity(0.6);
24+
};
25+
26+
const handleBlur = () => {
27+
setIsFocused(false);
28+
setOpacity(0);
29+
};
30+
31+
const handleMouseEnter = () => {
32+
setOpacity(0.6);
33+
};
34+
35+
const handleMouseLeave = () => {
36+
setOpacity(0);
37+
};
38+
39+
return (
40+
<div
41+
ref={divRef}
42+
onMouseMove={handleMouseMove}
43+
onFocus={handleFocus}
44+
onBlur={handleBlur}
45+
onMouseEnter={handleMouseEnter}
46+
onMouseLeave={handleMouseLeave}
47+
className={`relative rounded-3xl border border-neutral-800 bg-neutral-900 overflow-hidden p-8 ${className}`}
48+
>
49+
<div
50+
className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out"
51+
style={{
52+
opacity,
53+
background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
54+
}}
55+
/>
56+
{children}
57+
</div>
58+
);
59+
};
60+
61+
export default SpotlightCard;

components/dotbg.js renamed to components/dotbg.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const InteractiveBackground = ({ children }) => {
99
useEffect(() => {
1010
const canvas = canvasRef.current;
1111
const ctx = canvas.getContext("2d");
12-
let cw = window.innerWidth + 10;
12+
let cw = window.innerWidth -50;
1313
let ch = window.innerHeight;
1414
canvas.width = cw;
1515
canvas.height = ch;
@@ -131,10 +131,10 @@ const InteractiveBackground = ({ children }) => {
131131
left: 0,
132132
width: "100%",
133133
height: "100%",
134-
zIndex: -1,
134+
zIndex: -100,
135135
pointerEvents: "none",
136136
}}
137-
className="px-12 py-8"
137+
className="sm:px-12 py-8 px-1"
138138
/>
139139
{children}
140140
</div>

‎components/footer/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ const Footer = () => {
3030
/>
3131
<div className="flex flex-col gap-2 justify-start items-start md:items-end pt-8 md:pt-16 w-full">
3232
<div className="text-right text-supporting-lightGray monitor:text-6xl xl:text-5xl text-3xl xs:text-4xl font-bold w-full">
33-
<AnimatedTitle>Hack the Protocol</AnimatedTitle>
33+
<AnimatedTitle viewport={true}>Hack the Protocol</AnimatedTitle>
3434
</div>
3535
<div className="text-right text-supporting-mediumGray monitor:text-5xl xl:text-4xl text-2xl xs:text-3xl font-normal w-full">
36-
<AnimatedTitle>Break the red tape</AnimatedTitle>
36+
<AnimatedTitle viewport={true}>Break the red tape</AnimatedTitle>
3737
</div>
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)