Skip to content

Commit c0f26ad

Browse files
JadenJSJJadenJSJ
committed
feat(segue): add segue to other pages
1 parent e5b0d35 commit c0f26ad

6 files changed

Lines changed: 146 additions & 118 deletions

File tree

‎app/admissions/page.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function AdmissionsPage() {
2323
];
2424

2525
return (
26-
<div className="relative overflow-hidden min-h-screen pt-32 pb-20">
26+
<div className="relative overflow-hidden min-h-screen pt-32">
2727
<GradientBlob variant="warm" className="top-20 left-0 w-[600px] h-[600px] -translate-x-1/3 opacity-30" />
2828
<GradientBlob variant="cool" className="bottom-0 right-0 w-[500px] h-[500px] translate-x-1/3 opacity-30" />
2929

@@ -178,20 +178,22 @@ export default function AdmissionsPage() {
178178
</div>
179179
</div>
180180

181-
{/* CTA */}
182-
<div className="text-center bg-primary/5 rounded-3xl p-12 border border-primary/10">
183-
<h2 className="text-3xl font-display font-bold mb-6">Ready to Apply?</h2>
184-
<div className="flex flex-col sm:flex-row justify-center gap-4">
181+
182+
</div>
183+
184+
{/* Ready to Start Section */}
185+
<section className="py-24 px-6 relative overflow-hidden">
186+
<div className="absolute inset-0 bg-primary/5 -skew-y-3 transform origin-top-left scale-110" />
187+
<div className="container mx-auto max-w-4xl relative z-10 text-center">
188+
<h2 className="text-4xl md:text-5xl font-display font-bold mb-6">Ready to Start?</h2>
189+
<p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
190+
Join a community of 400+ Indonesian students at one of China&apos;s most prestigious engineering universities.
191+
</p>
192+
<div className="flex justify-center">
185193
<WhatsAppButton />
186-
{/* <Button size="lg" className="rounded-full px-8 py-6 text-lg bg-primary hover:bg-primary/90" asChild>
187-
<a href="https://apply.bit.edu.cn" target="_blank" rel="noopener noreferrer">
188-
Visit BIT Admission Portal <ChevronRight className="ml-2 w-5 h-5" />
189-
</a>
190-
</Button> */}
191194
</div>
192195
</div>
193-
194-
</div>
196+
</section>
195197
</div>
196198
);
197199
}

‎app/campus-life/page.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
44
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";
7+
import { PageSegue } from "@/components/ui/PageSegue";
78

89
import dormImg1 from "@/public/images/uni/IMG_20251103_130246 (1).webp";
910
import dormImg2 from "@/public/images/uni/IMG_20251109_094544.webp";
@@ -67,7 +68,7 @@ export default function CampusLifePage() {
6768
];
6869

6970
return (
70-
<div className="relative overflow-hidden min-h-screen pt-32 pb-20">
71+
<div className="relative overflow-hidden min-h-screen pt-32">
7172
<GradientBlob variant="cool" className="top-20 left-0 w-[600px] h-[600px] -translate-x-1/3 opacity-30" />
7273
<GradientBlob variant="warm" className="bottom-0 right-0 w-[500px] h-[500px] translate-x-1/3 opacity-30" />
7374

@@ -221,7 +222,7 @@ export default function CampusLifePage() {
221222
{/* Gallery */}
222223
<div>
223224
<h2 className="text-3xl font-display font-bold mb-12 text-center">Campus Moments</h2>
224-
<div className="columns-2 md:columns-3 gap-4 md:gap-6">
225+
<div className="mb-24 columns-2 md:columns-3 gap-4 md:gap-6">
225226
{galleryImages.map((img, idx) => (
226227
<motion.div
227228
key={idx}
@@ -247,6 +248,14 @@ export default function CampusLifePage() {
247248
</div>
248249

249250
</div>
251+
252+
{/* Link to Community Page */}
253+
<PageSegue
254+
title="Meet Your Community"
255+
description="Join 400+ Indonesian students and discover the support system that makes BIT feel like home."
256+
buttonText="Discover the Community"
257+
buttonHref="/community"
258+
/>
250259
</div>
251260
);
252261
}

‎app/community/page.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Users, BookOpen, Briefcase, Heart, Plane, Home } from "lucide-react";
77
import { Button } from "@/components/ui/button";
88
import { WhatsAppButton } from "@/components/ui/WhatsAppButton";
99
import { GradientBlob } from "@/components/ui/GradientBlob";
10+
import { PageSegue } from "@/components/ui/PageSegue";
1011

1112
import galleryImg1 from "@/public/images/uni/IMG_20250917_093259940.CCD.webp";
1213
import galleryImg2 from "@/public/images/uni/IMG_20251122_121955346.CCD.webp";
@@ -91,7 +92,7 @@ export default function CommunityPage() {
9192
];
9293

9394
return (
94-
<div className="relative overflow-hidden min-h-screen pt-32 pb-20">
95+
<div className="relative overflow-hidden min-h-screen pt-32">
9596
<GradientBlob variant="warm" className="top-20 left-0 w-[600px] h-[600px] -translate-x-1/3 opacity-30" />
9697
<GradientBlob variant="cool" className="bottom-0 right-0 w-[500px] h-[500px] translate-x-1/3 opacity-30" />
9798

@@ -245,17 +246,20 @@ export default function CommunityPage() {
245246
</div>
246247

247248
{/* CTA */}
248-
<div className="text-center">
249+
{/* <div className="text-center mb-20">
249250
<h2 className="text-3xl font-display font-bold mb-6">Want to talk to a senior?</h2>
250251
<WhatsAppButton />
251-
{/* <Button size="lg" className="rounded-full px-8 py-6 text-lg bg-primary hover:bg-primary/90" asChild>
252-
<a href="https://wa.me/6281388577873" target="_blank" rel="noopener noreferrer">
253-
Chat with BIND Team <ChevronRight className="ml-2 w-5 h-5" />
254-
</a>
255-
</Button> */}
256-
</div>
252+
</div> */}
257253

258254
</div>
255+
256+
{/* Link to Admissions Page */}
257+
<PageSegue
258+
title="Ready to Apply?"
259+
description="Learn about requirements, scholarships, and the application timeline for BIT."
260+
buttonText="View Admissions Info"
261+
buttonHref="/admissions"
262+
/>
259263
</div>
260264
);
261265
}

‎app/page.tsx‎

Lines changed: 49 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { motion } from "framer-motion";
44
import { BlurImage } from "@/components/ui/blur-image";
55
import { TrendingUp, Shield, Award, Zap } from "lucide-react";
66
import { GradientBlob } from "@/components/ui/GradientBlob";
7-
import { WhatsAppButton } from "@/components/ui/WhatsAppButton";
8-
import { Card, CardContent, CardHeader } from "@/components/ui/card";
7+
import { PageSegue } from "@/components/ui/PageSegue";
98
import { siteContent } from "@/lib/content";
109

1110
// Static Image Imports
@@ -222,13 +221,53 @@ export default function Home() {
222221
</motion.div>
223222
</div>
224223

224+
{/* Chinese Language Section */}
225+
<div className="grid mb-24 md:grid-cols-2 gap-12 items-center">
226+
<div className="order-2 md:order-1">
227+
<motion.div
228+
initial={{ opacity: 0, scale: 0.9 }}
229+
whileInView={{ opacity: 1, scale: 1 }}
230+
viewport={{ once: true, margin: "-100px" }}
231+
transition={{ duration: 0.5 }}
232+
className="relative rounded-3xl overflow-hidden shadow-xl border border-border group"
233+
>
234+
<div className="aspect-video relative">
235+
<BlurImage src={shanghaiImg} alt="Shanghai Skyline - China's Rise" fill className="object-cover group-hover:scale-105 transition-transform duration-700" placeholder="blur" />
236+
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent z-10" />
237+
</div>
238+
</motion.div>
239+
</div>
240+
<div className="order-1 md:order-2">
241+
<h2 className="text-3xl font-display font-bold mb-6">Rise with a <span className="text-primary">Superpower</span></h2>
242+
<p className="text-muted-foreground text-lg leading-relaxed mb-6">
243+
China is not just the world&apos;s factory; it is becoming the world&apos;s laboratory. Speaking Chinese is no longer just a &quot;nice-to-have&quot;—it is a critical career asset for the next 50 years.
244+
</p>
245+
<ul className="space-y-4">
246+
<li className="flex items-start gap-3">
247+
<TrendingUp className="w-6 h-6 text-primary mt-1" />
248+
<div>
249+
<h4 className="font-bold text-foreground">Economic Gravity</h4>
250+
<p className="text-sm text-muted-foreground">As trade between Indonesia and China explodes, bilingual engineers are the most sought-after talent in Jakarta.</p>
251+
</div>
252+
</li>
253+
<li className="flex items-start gap-3">
254+
<Shield className="w-6 h-6 text-primary mt-1" />
255+
<div>
256+
<h4 className="font-bold text-foreground">Future-Proof Career</h4>
257+
<p className="text-sm text-muted-foreground">Mastering Mandarin (aiming for HSK 5/6) opens doors to multinational giants like Huawei, BYD, and TikTok.</p>
258+
</div>
259+
</li>
260+
</ul>
261+
</div>
262+
</div>
263+
225264
{/* Rankings Table */}
226-
<div className="mb-24">
265+
<div className="mb-12">
227266
<div className="text-center mb-8">
267+
<h2 className="text-3xl font-display font-bold mb-4">Other Metrics</h2>
228268
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-4">
229269
Global Recognition <span className="text-muted-foreground/50">(Multiple Rankings)</span>
230270
</p>
231-
<h2 className="text-3xl font-display font-bold mb-4">Other Metrics</h2>
232271
</div>
233272

234273
{/* Mobile Card Layout */}
@@ -295,62 +334,15 @@ export default function Home() {
295334
</table>
296335
</motion.div>
297336
</div>
298-
299-
{/* Chinese Language Section */}
300-
<div className="grid md:grid-cols-2 gap-12 items-center">
301-
<div className="order-2 md:order-1">
302-
<motion.div
303-
initial={{ opacity: 0, scale: 0.9 }}
304-
whileInView={{ opacity: 1, scale: 1 }}
305-
viewport={{ once: true, margin: "-100px" }}
306-
transition={{ duration: 0.5 }}
307-
className="relative rounded-3xl overflow-hidden shadow-xl border border-border group"
308-
>
309-
<div className="aspect-video relative">
310-
<BlurImage src={shanghaiImg} alt="Shanghai Skyline - China's Rise" fill className="object-cover group-hover:scale-105 transition-transform duration-700" placeholder="blur" />
311-
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent z-10" />
312-
</div>
313-
</motion.div>
314-
</div>
315-
<div className="order-1 md:order-2">
316-
<h2 className="text-3xl font-display font-bold mb-6">Rise with a <span className="text-primary">Superpower</span></h2>
317-
<p className="text-muted-foreground text-lg leading-relaxed mb-6">
318-
China is not just the world&apos;s factory; it is becoming the world&apos;s laboratory. Speaking Chinese is no longer just a &quot;nice-to-have&quot;—it is a critical career asset for the next 50 years.
319-
</p>
320-
<ul className="space-y-4">
321-
<li className="flex items-start gap-3">
322-
<TrendingUp className="w-6 h-6 text-primary mt-1" />
323-
<div>
324-
<h4 className="font-bold text-foreground">Economic Gravity</h4>
325-
<p className="text-sm text-muted-foreground">As trade between Indonesia and China explodes, bilingual engineers are the most sought-after talent in Jakarta.</p>
326-
</div>
327-
</li>
328-
<li className="flex items-start gap-3">
329-
<Shield className="w-6 h-6 text-primary mt-1" />
330-
<div>
331-
<h4 className="font-bold text-foreground">Future-Proof Career</h4>
332-
<p className="text-sm text-muted-foreground">Mastering Mandarin (aiming for HSK 5/6) opens doors to multinational giants like Huawei, BYD, and TikTok.</p>
333-
</div>
334-
</li>
335-
</ul>
336-
</div>
337-
</div>
338337
</div>
339338
</section>
340339

341-
{/* CTA Section */}
342-
<section className="py-24 px-6 relative overflow-hidden">
343-
<div className="absolute inset-0 bg-primary/5 -skew-y-3 transform origin-top-left scale-110" />
344-
<div className="container mx-auto max-w-4xl relative z-10 text-center">
345-
<h2 className="text-4xl md:text-5xl font-display font-bold mb-6">Ready to Start?</h2>
346-
<p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
347-
Join a community of 400+ Indonesian students at one of China&apos;s most prestigious engineering universities.
348-
</p>
349-
<div className="flex justify-center">
350-
<WhatsAppButton />
351-
</div>
352-
</div>
353-
</section>
340+
<PageSegue
341+
title="What Actually Matters"
342+
description="Beyond the numbers, there's a vibrant community, unforgettable experiences, and a life-changing journey waiting for you."
343+
buttonText="Explore Campus Life"
344+
buttonHref="/campus-life"
345+
/>
354346
</div>
355347
);
356348
}

‎components/ui/PageSegue.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import { SquareArrowTopRight } from "@/components/ui/SquareArrowTopRight";
5+
6+
interface PageSegueProps {
7+
title: string;
8+
description: string;
9+
buttonText: string;
10+
buttonHref: string;
11+
}
12+
13+
export function PageSegue({ title, description, buttonText, buttonHref }: PageSegueProps) {
14+
return (
15+
<section className="pb-24 px-6">
16+
<div className="container mx-auto max-w-4xl text-center">
17+
{title && <h2 className="text-4xl md:text-5xl font-display font-bold mb-6">{title}</h2>}
18+
{description && (
19+
<p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
20+
{description}
21+
</p>
22+
)}
23+
<div className="flex justify-center">
24+
<Button
25+
asChild
26+
size="lg"
27+
variant="outline"
28+
className="group rounded-full px-8 py-6 text-lg bg-white text-foreground hover:bg-gray-100 hover:text-foreground shadow-lg border border-border transition-colors"
29+
>
30+
<a href={buttonHref} className="flex items-center gap-2">
31+
{buttonText}
32+
<SquareArrowTopRight />
33+
</a>
34+
</Button>
35+
</div>
36+
</div>
37+
</section>
38+
);
39+
}

‎components/ui/SquareArrowTopRight.tsx‎

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,31 @@
1-
import React from "react";
2-
import { cn } from "@/lib/utils";
1+
"use client";
32

4-
export interface SquareArrowTopRightProps extends React.SVGProps<SVGSVGElement> {
5-
/**
6-
* The width and height of the icon in pixels.
7-
* @default 24
8-
*/
9-
size?: number | string;
10-
/**
11-
* The thickness of the stroke.
12-
* @default 3
13-
*/
14-
strokeWidth?: number;
3+
import { motion } from "framer-motion";
4+
5+
interface SquareArrowTopRightProps {
6+
className?: string;
157
}
168

17-
export function SquareArrowTopRight({
18-
size = 24,
19-
strokeWidth = 3,
20-
className,
21-
...props
22-
}: SquareArrowTopRightProps) {
9+
export function SquareArrowTopRight({ className = "w-5 h-5" }: SquareArrowTopRightProps) {
2310
return (
2411
<svg
25-
width={size}
26-
height={size}
27-
viewBox="0 0 32 32"
28-
fill="none"
2912
xmlns="http://www.w3.org/2000/svg"
30-
className={cn(className)}
31-
{...props}
13+
viewBox="0 0 24 24"
14+
fill="none"
15+
stroke="currentColor"
16+
strokeWidth="2"
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
className={className}
3220
>
33-
<path
34-
d="M2 3H29V30"
35-
stroke="currentColor"
36-
strokeWidth={strokeWidth}
37-
strokeLinecap="round"
38-
strokeLinejoin="round"
39-
/>
40-
<path
41-
d="M2 30L29 3"
42-
stroke="currentColor"
43-
strokeWidth={strokeWidth}
44-
strokeLinecap="round"
45-
strokeLinejoin="round"
46-
/>
21+
{/* Square - static */}
22+
<rect width="18" height="18" x="3" y="3" rx="2" className="opacity-80 group-hover:opacity-100 transition-opacity" />
23+
24+
{/* Arrow - animated on parent hover */}
25+
<g className="opacity-80 group-hover:opacity-100 transition-opacity group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-200">
26+
<path d="M15 9l-6 6" />
27+
<path d="M15 15V9h-6" />
28+
</g>
4729
</svg>
4830
);
4931
}

0 commit comments

Comments
 (0)