Skip to content

Commit 2d3784b

Browse files
TimothyHTanTimothyHTan
committed
add some fixes to the mobile version of the website, making certain components smaller and added a carousal animation in the mobile old building
1 parent 74fc5c3 commit 2d3784b

5 files changed

Lines changed: 365 additions & 66 deletions

File tree

‎app/campus-life/page.tsx‎

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BlurImage } from "@/components/ui/blur-image";
55
import { MapPin, Coffee, Utensils, Wifi, Bus, Bike, Shield } from "lucide-react";
66
import { GradientBlob } from "@/components/ui/GradientBlob";
77
import { PageSegue } from "@/components/ui/PageSegue";
8+
import Carousel from "@/components/ui/Carousel";
89

910
import dormImg1 from "@/public/images/uni/IMG_20251103_130246 (1).webp";
1011
import dormImg2 from "@/public/images/uni/IMG_20251109_094544.webp";
@@ -147,8 +148,10 @@ export default function CampusLifePage() {
147148
<div className="space-y-16">
148149
{/* New Building */}
149150
<div>
150-
<h3 className="text-2xl font-display font-bold mb-8 text-primary">New Building (Bohou)</h3>
151-
<div className="grid md:grid-cols-3 gap-8">
151+
<h3 className="text-xl md:text-2xl font-display font-bold mb-4 md:mb-8 text-primary">New Building (Bohou)</h3>
152+
153+
{/* Desktop Grid */}
154+
<div className="hidden md:grid md:grid-cols-3 gap-8">
152155
{newDorms.map((dorm, idx) => (
153156
<motion.div
154157
key={idx}
@@ -169,7 +172,39 @@ export default function CampusLifePage() {
169172
<ul className="space-y-2">
170173
{dorm.features.map((feature, i) => (
171174
<li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
172-
<div className="w-1.5 h-1.5 rounded-full bg-primary" />
175+
<div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
176+
{feature}
177+
</li>
178+
))}
179+
</ul>
180+
</div>
181+
</motion.div>
182+
))}
183+
</div>
184+
185+
{/* Mobile - centered card matching carousel width */}
186+
<div className="md:hidden flex justify-center">
187+
{newDorms.map((dorm, idx) => (
188+
<motion.div
189+
key={idx}
190+
initial={{ opacity: 0, y: 20 }}
191+
whileInView={{ opacity: 1, y: 0 }}
192+
viewport={{ once: true, margin: "-100px" }}
193+
transition={{ delay: idx * 0.1 }}
194+
className="bg-white rounded-2xl overflow-hidden shadow-sm border border-border w-[288px]"
195+
>
196+
<div className="h-44 overflow-hidden relative">
197+
<BlurImage src={dorm.image} alt={dorm.title} placeholder="blur" className="w-full h-full object-cover" />
198+
<div className="absolute bottom-3 right-3 bg-black/70 backdrop-blur-md text-white px-2.5 py-0.5 rounded-full text-xs font-medium z-10">
199+
{dorm.price}
200+
</div>
201+
</div>
202+
<div className="p-4">
203+
<h3 className="text-base font-bold mb-3">{dorm.title}</h3>
204+
<ul className="space-y-1.5">
205+
{dorm.features.map((feature, i) => (
206+
<li key={i} className="flex items-center gap-2 text-xs text-muted-foreground">
207+
<div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
173208
{feature}
174209
</li>
175210
))}
@@ -182,8 +217,10 @@ export default function CampusLifePage() {
182217

183218
{/* Old Building */}
184219
<div>
185-
<h3 className="text-2xl font-display font-bold mb-8 text-primary">Old Building (International Students Dorm)</h3>
186-
<div className="grid md:grid-cols-3 gap-8">
220+
<h3 className="text-xl md:text-2xl font-display font-bold mb-4 md:mb-8 text-primary">Old Building (International Students Dorm)</h3>
221+
222+
{/* Desktop Grid */}
223+
<div className="hidden md:grid md:grid-cols-3 gap-8">
187224
{oldDorms.map((dorm, idx) => (
188225
<motion.div
189226
key={idx}
@@ -204,7 +241,7 @@ export default function CampusLifePage() {
204241
<ul className="space-y-2">
205242
{dorm.features.map((feature, i) => (
206243
<li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
207-
<div className="w-1.5 h-1.5 rounded-full bg-primary" />
244+
<div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
208245
{feature}
209246
</li>
210247
))}
@@ -213,6 +250,33 @@ export default function CampusLifePage() {
213250
</motion.div>
214251
))}
215252
</div>
253+
254+
{/* Mobile Carousel */}
255+
<div className="md:hidden flex justify-center">
256+
<Carousel baseWidth={320} loop>
257+
{oldDorms.map((dorm, idx) => (
258+
<div key={idx} className="bg-white rounded-2xl overflow-hidden shadow-sm border border-border h-full">
259+
<div className="h-44 overflow-hidden relative">
260+
<BlurImage src={dorm.image} alt={dorm.title} placeholder="blur" className="w-full h-full object-cover" />
261+
<div className="absolute bottom-3 right-3 bg-black/70 backdrop-blur-md text-white px-2.5 py-0.5 rounded-full text-xs font-medium z-10">
262+
{dorm.price}
263+
</div>
264+
</div>
265+
<div className="p-4">
266+
<h3 className="text-base font-bold mb-3">{dorm.title}</h3>
267+
<ul className="space-y-1.5">
268+
{dorm.features.map((feature, i) => (
269+
<li key={i} className="flex items-center gap-2 text-xs text-muted-foreground">
270+
<div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
271+
{feature}
272+
</li>
273+
))}
274+
</ul>
275+
</div>
276+
</div>
277+
))}
278+
</Carousel>
279+
</div>
216280
</div>
217281
</div>
218282
</div>

‎app/community/page.tsx‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -195,40 +195,39 @@ export default function CommunityPage() {
195195
initial="hidden"
196196
whileInView="visible"
197197
viewport={{ once: true }}
198-
className="grid md:grid-cols-2 gap-8 mb-32"
198+
className="grid grid-cols-2 gap-3 md:gap-8 mb-32"
199199
>
200200
{pillars.map((pillar, idx) => (
201201
<motion.div
202202
key={idx}
203203
variants={itemVariants}
204-
className="bg-white/50 backdrop-blur-md border border-white/60 rounded-3xl p-8 hover:shadow-xl transition-all duration-300 group"
204+
className="bg-white/50 backdrop-blur-md border border-white/60 rounded-2xl md:rounded-3xl p-4 md:p-8 hover:shadow-xl transition-all duration-300 group"
205205
>
206-
<div className="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
207-
<pillar.icon className="w-6 h-6 text-primary" />
206+
<div className="w-9 h-9 md:w-12 md:h-12 bg-primary/10 rounded-xl md:rounded-2xl flex items-center justify-center mb-3 md:mb-6 group-hover:scale-110 transition-transform">
207+
<pillar.icon className="w-4 h-4 md:w-6 md:h-6 text-primary" />
208208
</div>
209-
<h3 className="text-2xl font-bold font-display mb-3">{pillar.title}</h3>
210-
<p className="text-muted-foreground mb-6 leading-relaxed">
209+
<h3 className="text-sm md:text-2xl font-bold font-display mb-1.5 md:mb-3">{pillar.title}</h3>
210+
<p className="text-xs md:text-base text-muted-foreground mb-3 md:mb-6 leading-relaxed">
211211
{pillar.desc}
212212
</p>
213-
<blockquote className="border-l-4 border-primary/20 pl-4 italic text-sm text-muted-foreground">
213+
<blockquote className="border-l-2 md:border-l-4 border-primary/20 pl-2.5 md:pl-4 italic text-[10px] md:text-sm text-muted-foreground">
214214
{pillar.quote}
215-
<footer className="mt-2 font-semibold text-foreground not-italic">— {pillar.author}</footer>
215+
<footer className="mt-1 md:mt-2 font-semibold text-foreground not-italic text-[10px] md:text-sm">— {pillar.author}</footer>
216216
</blockquote>
217217
</motion.div>
218218
))}
219219
</motion.div>
220220

221221
{/* Arrival System */}
222222
<div className="mb-32">
223-
<div className="text-center mb-16">
224-
<h2 className="text-3xl font-display font-bold mb-4">Zero-Stress Arrival</h2>
225-
<p className="text-muted-foreground">The things that usually stress parents out? We&apos;ve got them covered.</p>
223+
<div className="text-center mb-8 md:mb-16">
224+
<h2 className="text-2xl md:text-3xl font-display font-bold mb-2 md:mb-4">Zero-Stress Arrival</h2>
225+
<p className="text-sm md:text-base text-muted-foreground">The things that usually stress parents out? We&apos;ve got them covered.</p>
226226
</div>
227227

228-
<div className="grid md:grid-cols-3 gap-8 relative">
229-
{/* Connecting Line (Desktop) */}
230-
<div className="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-primary/20 via-primary/50 to-primary/20 -z-10" />
231-
228+
{/* Desktop - 3 column grid */}
229+
<div className="hidden md:grid md:grid-cols-3 gap-8 relative">
230+
<div className="absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-primary/20 via-primary/50 to-primary/20 -z-10" />
232231
{arrivalSteps.map((step, idx) => (
233232
<motion.div
234233
key={idx}
@@ -244,9 +243,30 @@ export default function CommunityPage() {
244243
<div className="text-center">
245244
<span className="text-sm font-bold text-primary tracking-widest uppercase mb-2 block">{step.step}</span>
246245
<h3 className="text-xl font-bold mb-3">{step.title}</h3>
247-
<p className="text-sm text-muted-foreground leading-relaxed">
248-
{step.desc}
249-
</p>
246+
<p className="text-sm text-muted-foreground leading-relaxed">{step.desc}</p>
247+
</div>
248+
</motion.div>
249+
))}
250+
</div>
251+
252+
{/* Mobile - vertical stack with left-aligned timeline */}
253+
<div className="md:hidden space-y-4">
254+
{arrivalSteps.map((step, idx) => (
255+
<motion.div
256+
key={idx}
257+
initial={{ opacity: 0, y: 15 }}
258+
whileInView={{ opacity: 1, y: 0 }}
259+
viewport={{ once: true, margin: "-30px" }}
260+
transition={{ delay: idx * 0.15 }}
261+
className="relative bg-white rounded-2xl p-4 shadow-sm border border-border flex gap-4 items-start"
262+
>
263+
<div className="w-11 h-11 bg-primary/5 rounded-full flex items-center justify-center flex-shrink-0 border-2 border-primary/20">
264+
<step.icon className="w-5 h-5 text-primary" />
265+
</div>
266+
<div className="flex-1 min-w-0">
267+
<span className="text-[10px] font-bold text-primary tracking-widest uppercase">{step.step}</span>
268+
<h3 className="text-sm font-bold mb-1">{step.title}</h3>
269+
<p className="text-xs text-muted-foreground leading-relaxed">{step.desc}</p>
250270
</div>
251271
</motion.div>
252272
))}

‎app/page.tsx‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -174,63 +174,32 @@ export default function Home() {
174174
/>
175175
</div>
176176

177-
{/* Mobile Card Layout */}
177+
{/* Rankings Table */}
178178
<motion.div
179179
initial={{ opacity: 0, y: 20 }}
180180
whileInView={{ opacity: 1, y: 0 }}
181181
viewport={{ once: true, margin: "-100px" }}
182182
transition={{ duration: 0.5 }}
183-
className="block sm:hidden space-y-6"
184-
>
185-
{metricsData.map((metric, index) => (
186-
<div key={index} className="bg-white/60 backdrop-blur-md rounded-3xl p-8 border border-white/40 shadow-sm">
187-
<div className="flex items-baseline gap-1 mb-2">
188-
<span className="text-3xl md:text-4xl font-semibold font-display tabular-nums text-foreground">
189-
{metric.rankValue}
190-
</span>
191-
<span className={`text-sm font-medium ${metric.rankColor === 'emerald' ? 'text-emerald-600' : 'text-primary'}`}>
192-
{metric.rankSuffix}
193-
</span>
194-
</div>
195-
<p className="text-sm text-muted-foreground mb-4">
196-
{metric.metric}
197-
</p>
198-
<h3 className="font-bold text-foreground mb-2">
199-
{metric.insightTitle}
200-
</h3>
201-
<p className="text-muted-foreground">
202-
{metric.insightDescription}
203-
</p>
204-
</div>
205-
))}
206-
</motion.div>
207-
208-
{/* Desktop Table Layout */}
209-
<motion.div
210-
initial={{ opacity: 0, y: 20 }}
211-
whileInView={{ opacity: 1, y: 0 }}
212-
viewport={{ once: true, margin: "-100px" }}
213-
transition={{ duration: 0.5 }}
214-
className="hidden sm:block overflow-hidden rounded-3xl border border-border bg-white/40 backdrop-blur-sm shadow-xl"
183+
className="overflow-hidden rounded-2xl sm:rounded-3xl border border-border bg-white/40 backdrop-blur-sm shadow-xl"
215184
>
216185
<table className="w-full text-left border-collapse">
217186
<thead>
218187
<tr className="bg-white/50 border-b border-border/50">
219-
<th className="p-6 font-display font-bold text-foreground">Metric</th>
220-
<th className="p-6 font-display font-bold text-primary">Rank</th>
221-
<th className="p-6 font-display font-bold text-foreground">Elaboration</th>
188+
<th className="p-3 sm:p-6 font-display font-bold text-foreground text-xs sm:text-base">Metric</th>
189+
<th className="p-3 sm:p-6 font-display font-bold text-primary text-xs sm:text-base">Rank</th>
190+
<th className="p-3 sm:p-6 font-display font-bold text-foreground text-xs sm:text-base">Elaboration</th>
222191
</tr>
223192
</thead>
224193
<tbody className="divide-y divide-border/50">
225194
{metricsData.map((metric, index) => (
226195
<tr key={index} className="hover:bg-white/40 transition-colors">
227-
<td className="p-6 font-medium">{metric.metric}</td>
228-
<td className={`p-6 font-bold text-xl ${metric.rankColor === 'emerald' ? 'text-emerald-600' : ''}`}>
196+
<td className="p-3 sm:p-6 font-medium text-xs sm:text-base">{metric.metric}</td>
197+
<td className={`p-3 sm:p-6 font-bold text-sm sm:text-xl ${metric.rankColor === 'emerald' ? 'text-emerald-600' : ''}`}>
229198
#{metric.rankValue}
230199
</td>
231-
<td className="p-6 text-muted-foreground text-sm leading-relaxed">
232-
<strong className="text-foreground block mb-1">{metric.insightTitle}</strong>
233-
{metric.insightDescription}
200+
<td className="p-3 sm:p-6 text-muted-foreground text-[10px] sm:text-sm leading-relaxed">
201+
<strong className="text-foreground block mb-0.5 sm:mb-1 text-xs sm:text-sm">{metric.insightTitle}</strong>
202+
<span className="hidden sm:inline">{metric.insightDescription}</span>
234203
</td>
235204
</tr>
236205
))}

‎components/layout/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export function Navbar() {
7070

7171
<button
7272
onClick={() => setIsOpen(!isOpen)}
73-
className="md:hidden p-2 rounded-full hover:bg-black/5 text-foreground transition-colors"
73+
className="md:hidden p-2 mr-2 rounded-full hover:bg-black/5 text-foreground transition-colors"
7474
>
7575
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
7676
</button>

0 commit comments

Comments
 (0)