Skip to content

Commit 3b03670

Browse files
itsbhavik1itsbhavik1
committed
Responsive fixes
1 parent aee9c02 commit 3b03670

File tree

5 files changed

+149
-60
lines changed

5 files changed

+149
-60
lines changed

‎components/Timeline.tsx‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { motion } from "framer-motion"
2-
import { Card, CardContent } from "../components/card"
1+
import { motion } from "framer-motion";
2+
import { Card, CardContent } from "../components/card";
33

44
export default function Timeline() {
55
const timelineEvents = [
@@ -33,7 +33,7 @@ export default function Timeline() {
3333
title: "Results & Awards",
3434
description: "Celebration and recognition of achievements",
3535
},
36-
]
36+
];
3737

3838
return (
3939
<section className="py-20 bg-red">
@@ -46,13 +46,17 @@ export default function Timeline() {
4646
className="max-w-7xl mx-auto"
4747
>
4848
<div className="text-center mb-16">
49-
<h2 className="text-4xl md:text-5xl font-bold text-[#274495] mb-4">Program Timeline</h2>
50-
<p className="text-2xl text-[#274495]/80 max-w-3xl mx-auto font-semibold">Your journey through PWOC</p>
49+
<h2 className="text-4xl md:text-5xl font-bold text-[#274495] mb-4">
50+
Program Timeline
51+
</h2>
52+
<p className="text-2xl text-[#274495]/80 max-w-3xl mx-auto font-semibold">
53+
Your journey through PWOC
54+
</p>
5155
</div>
5256

5357
<div className="relative">
5458
{/* Timeline line */}
55-
<div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-[#0B4F6C]/20 rounded-full" />
59+
<div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-[#0B4F6C]/20 rounded-full hidden md:block" />
5660

5761
{/* Timeline events */}
5862
<div className="space-y-12">
@@ -63,18 +67,30 @@ export default function Timeline() {
6367
whileInView={{ opacity: 1, y: 0 }}
6468
transition={{ duration: 0.5, delay: index * 0.1 }}
6569
viewport={{ once: true }}
66-
className={`flex items-center ${index % 2 === 0 ? "flex-row-reverse" : ""}`}
70+
className={`flex flex-col md:flex-row items-center md:items-start ${
71+
index % 2 === 0 ? "md:flex-row-reverse" : ""
72+
}`}
6773
>
68-
<div className="w-1/2" />
74+
<div className="hidden md:block md:w-1/2" />
6975
<div className="w-10 h-10 text-[#274495] rounded-full border-4 border-white flex items-center justify-center relative z-10">
7076
<div className="w-3 h-3 bg-white rounded-full" />
7177
</div>
72-
<div className="w-1/2">
73-
<Card className={`bg-white/80 backdrop-blur-sm border-none ${index % 2 === 0 ? "mr-8" : "ml-8"}`}>
74-
<CardContent className="p-6">
75-
<div className="text-sm text-[#274495]/60 mb-1 font-semibold">{event.date}</div>
76-
<h3 className="text-2xl font-semibold text-[#0B4F6C] mb-2">{event.title}</h3>
77-
<p className="text-[#274495]/70 text-xl">{event.description}</p>
78+
<div className="mt-4 md:mt-0 md:w-1/2">
79+
<Card
80+
className={`bg-white/80 backdrop-blur-sm border-none p-4 ${
81+
index % 2 === 0 ? "md:mr-8" : "md:ml-8"
82+
}`}
83+
>
84+
<CardContent className="p-4">
85+
<div className="text-sm text-[#274495]/60 mb-1 font-semibold">
86+
{event.date}
87+
</div>
88+
<h3 className="text-2xl font-semibold text-[#0B4F6C] mb-2">
89+
{event.title}
90+
</h3>
91+
<p className="text-[#274495]/70 text-xl">
92+
{event.description}
93+
</p>
7894
</CardContent>
7995
</Card>
8096
</div>
@@ -85,6 +101,5 @@ export default function Timeline() {
85101
</motion.div>
86102
</div>
87103
</section>
88-
)
104+
);
89105
}
90-

‎components/layout/PageLayout.tsx‎

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@ import Link from "next/link";
33
import { Button } from "../../components/button";
44
import Snowfall from "react-snowfall";
55
import Footer from "../Footer";
6+
import { useState } from "react";
7+
import { Menu, X } from "lucide-react";
68

79
function PageLayout({ title = "PWOC | PEC Winter of Code", children, description }: any) {
10+
11+
const [isMenuOpen, setIsMenuOpen] = useState(false);
12+
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
13+
814
return (
915
<div className="relative flex flex-col min-h-screen">
1016
{/* Background Image with Overlay */}
@@ -22,29 +28,59 @@ function PageLayout({ title = "PWOC | PEC Winter of Code", children, description
2228
<Snowfall />
2329

2430
{/* Navigation */}
25-
<nav className="relative px-6 py-4 bg-black/5">
26-
<div className="max-w-7xl mx-auto flex items-center justify-between">
27-
<Link href="/">
28-
<Image
29-
src="/assets/logo/pwoc_text.png"
30-
alt="Winter of Code"
31-
width={150}
32-
height={40}
33-
className="cursor-pointer"
34-
/>
35-
</Link>
36-
37-
<div className="hidden md:flex items-center space-x-8">
38-
{["Home", "Leaderboard", "Projects", "Graveyard", "Faq"].map((item) => (
39-
<Link key={item} href={item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`}>
40-
<span className="text-[#274495] text-[1.1rem] font-semibold hover:text-white transition-colors cursor-pointer">
41-
{item}
42-
</span>
43-
</Link>
44-
))}
45-
</div>
46-
</div>
47-
</nav>
31+
<nav className="relative z-10 px-6 py-4 bg-black/10">
32+
<div className="max-w-7xl mx-auto flex items-center justify-between">
33+
<Link href="/">
34+
<Image
35+
src="/assets/logo/pwoc_text.png"
36+
alt="Winter of Code"
37+
width={150}
38+
height={40}
39+
className="cursor-pointer"
40+
/>
41+
</Link>
42+
43+
{/* Hamburger Menu Button for Mobile */}
44+
<button
45+
className="block md:hidden text-white"
46+
onClick={toggleMenu}
47+
aria-label="Toggle Menu"
48+
>
49+
{isMenuOpen ? <X size={28} /> : <Menu size={28} />}
50+
</button>
51+
52+
{/* Desktop Navigation */}
53+
<div className="hidden md:flex items-center space-x-8">
54+
{["Home", "Leaderboard", "Projects", "Graveyard", "Faq"].map((item) => (
55+
<Link
56+
key={item}
57+
href={item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`}
58+
>
59+
<span className="text-[#274495] text-[1.1rem] font-semibold hover:text-white transition-colors cursor-pointer">
60+
{item}
61+
</span>
62+
</Link>
63+
))}
64+
</div>
65+
</div>
66+
67+
{/* Mobile Navigation */}
68+
{isMenuOpen && (
69+
<div className="md:hidden mt-4 bg-black/20 rounded-lg p-4 space-y-4">
70+
{["Home", "Leaderboard", "Projects", "Graveyard", "Faq"].map((item) => (
71+
<Link
72+
key={item}
73+
href={item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`}
74+
onClick={() => setIsMenuOpen(false)} // Close menu on link click
75+
>
76+
<span className="block text-[#fbfbfb] text-[1.1rem] font-semibold hover:text-white transition-colors cursor-pointer">
77+
{item}
78+
</span>
79+
</Link>
80+
))}
81+
</div>
82+
)}
83+
</nav>
4884

4985
{/* Main Content with Flex Grow */}
5086
<div className="flex-grow">{children}</div>

‎pages/index.tsx‎

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,15 @@ import Timeline from "../components/Timeline"
99
import Registration from "../components/index/RegistrationCard"
1010
import Sponsor from "../components/index/Sponsor"
1111
import Footer from "../components/Footer"
12+
import { useState } from "react";
13+
import { Menu, X } from "lucide-react";
14+
15+
1216

1317
const Home: NextPage = () => {
18+
19+
const [isMenuOpen, setIsMenuOpen] = useState(false);
20+
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
1421
return (
1522
<>
1623
<div className="fixed inset-0 bg-black/10">
@@ -31,27 +38,58 @@ const Home: NextPage = () => {
3138

3239
{/* Navigation */}
3340
<nav className="relative z-10 px-6 py-4 bg-black/10">
34-
<div className="max-w-7xl mx-auto flex items-center justify-between">
35-
<Link href="/">
36-
<Image
37-
src="/assets/logo/pwoc_text.png"
38-
alt="Winter of Code"
39-
width={150}
40-
height={40}
41+
<div className="max-w-7xl mx-auto flex items-center justify-between">
42+
<Link href="/">
43+
<Image
44+
src="/assets/logo/pwoc_text.png"
45+
alt="Winter of Code"
46+
width={150}
47+
height={40}
4148
className="cursor-pointer"
42-
/>
49+
/>
4350
</Link>
51+
52+
{/* Hamburger Menu Button for Mobile */}
53+
<button
54+
className="block md:hidden text-white"
55+
onClick={toggleMenu}
56+
aria-label="Toggle Menu"
57+
>
58+
{isMenuOpen ? <X size={28} /> : <Menu size={28} />}
59+
</button>
60+
61+
{/* Desktop Navigation */}
4462
<div className="hidden md:flex items-center space-x-8">
45-
{["Home", "Leaderboard", "Projects", "Graveyard", "Faq"].map((item) => (
46-
<Link key={item} href={item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`}>
47-
<span className="text-[#274495] text-[1.1rem] font-semibold hover:text-white transition-colors cursor-pointer">
48-
{item}
49-
</span>
50-
</Link>
51-
))}
63+
{["Home", "Leaderboard", "Projects", "Graveyard", "Faq"].map((item) => (
64+
<Link
65+
key={item}
66+
href={item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`}
67+
>
68+
<span className="text-[#274495] text-[1.1rem] font-semibold hover:text-white transition-colors cursor-pointer">
69+
{item}
70+
</span>
71+
</Link>
72+
))}
73+
</div>
5274
</div>
75+
76+
{/* Mobile Navigation */}
77+
{isMenuOpen && (
78+
<div className="md:hidden mt-4 bg-black/20 rounded-lg p-4 space-y-4">
79+
{["Home", "Leaderboard", "Projects", "Graveyard", "Faq"].map((item) => (
80+
<Link
81+
key={item}
82+
href={item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`}
83+
onClick={() => setIsMenuOpen(false)} // Close menu on link click
84+
>
85+
<span className="block text-[#fbfbfb] text-[1.1rem] font-semibold hover:text-white transition-colors cursor-pointer">
86+
{item}
87+
</span>
88+
</Link>
89+
))}
5390
</div>
54-
</nav>
91+
)}
92+
</nav>
5593

5694
{/* Hero Section */}
5795
<div className="relative z-10 px-6 pt-20 pb-32 bg-white/10">

‎pages/leaderboard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,15 @@ const Leaderboard: NextPage = () => {
6363
animate={{ opacity: 1, x: 0 }}
6464
exit={{ opacity: 0, x: 50 }}
6565
transition={{ duration: 0.5 }}
66-
className="fixed top-6 right-6 bg-white/20 text-white py-3 px-5 rounded-lg shadow-lg backdrop-blur-md border border-gray-400 z-50"
66+
className="fixed top-6 right-6 bg-white/20 text-white py-3 px-5 rounded-lg shadow-lg backdrop-blur-md border border-gray-400 z-50 sm:top-4 sm:right-4 sm:px-3 sm:py-2"
6767
>
6868
<p className="text-sm font-medium">🔄 Leaderboard refreshes every 5 minutes.</p>
6969
</motion.div>
7070
)}
7171
</AnimatePresence>
7272

7373
{/* Leaderboard Content */}
74-
<div className="flex items-center flex-col">
74+
<div className="flex items-center flex-col px-4 sm:px-2">
7575
{leaderboard.length > 2 ? (
7676
<>
7777
<TopThree topList={leaderboard.slice(0, 3)} />
@@ -81,8 +81,8 @@ const Leaderboard: NextPage = () => {
8181
<LeaderboardTable leaderboard={leaderboard} />
8282
) : (
8383
<div className="flex flex-col items-center my-[30px]">
84-
{isClient && <Lottie animationData={snowman} loop className="h-[300px] w-auto my-[30px]" />}
85-
<div className="font-bold text-[30px] animate-pulse">Loading, please wait..</div>
84+
{isClient && <Lottie animationData={snowman} loop className="h-[300px] w-auto my-[30px] sm:h-[200px]" />}
85+
<div className="font-bold text-[30px] animate-pulse text-center sm:text-[20px]">Loading, please wait...</div>
8686
</div>
8787
)}
8888
</div>

0 commit comments

Comments
 (0)