Skip to content

Commit ccf2c3e

Browse files
chenfoonglimchenfoonglim
committed
Added "why" section on index.tsx
1 parent e55b4e8 commit ccf2c3e

2 files changed

Lines changed: 208 additions & 2 deletions

File tree

‎client/package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/pages/index.tsx‎

Lines changed: 191 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
LogIn,
88
Mail,
99
MessageCircle,
10+
Shield,
1011
Sparkles,
1112
Star,
1213
TrendingUp,
@@ -366,6 +367,194 @@ export default function AboutPage() {
366367
Benefits for everyone in the university community
367368
</p>
368369
</div>
370+
371+
<div className="mb-12 grid gap-8 md:grid-cols-2">
372+
{/* Student card */}
373+
<Card className={`${COLORS.border.default} shadow-lg`}>
374+
<CardHeader className={COLORS.background.cardHeader}>
375+
<CardTitle
376+
className={`text-3xl ${COLORS.text.primary} flex items-center gap-3`}
377+
>
378+
<Users className="h-8 w-8" />
379+
For Students
380+
</CardTitle>
381+
</CardHeader>
382+
<CardContent className="space-y-6 pt-6">
383+
<div>
384+
<h4
385+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
386+
>
387+
<div
388+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
389+
></div>
390+
Build Genuine Friendships
391+
</h4>
392+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
393+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
394+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
395+
</p>
396+
</div>
397+
<div>
398+
<h4
399+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
400+
>
401+
<div
402+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
403+
></div>
404+
Reduce Social Anxiety at Events
405+
</h4>
406+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
407+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
408+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
409+
</p>
410+
</div>
411+
<div>
412+
<h4
413+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
414+
>
415+
<div
416+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
417+
></div>
418+
Discover your community
419+
</h4>
420+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
421+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
422+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
423+
</p>
424+
</div>
425+
<div>
426+
<h4
427+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
428+
>
429+
<div
430+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
431+
></div>
432+
Make the Most of Events
433+
</h4>
434+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
435+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
436+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
437+
</p>
438+
</div>
439+
</CardContent>
440+
</Card>
441+
442+
{/* Events card */}
443+
<Card className={`${COLORS.border.default} shadow-lg`}>
444+
<CardHeader className={COLORS.background.cardHeader}>
445+
<CardTitle
446+
className={`text-3xl ${COLORS.text.primary} flex items-center gap-3`}
447+
>
448+
<Users className="h-8 w-8" />
449+
For Event Organisers
450+
</CardTitle>
451+
</CardHeader>
452+
<CardContent className="space-y-6 pt-6">
453+
<div>
454+
<h4
455+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
456+
>
457+
<div
458+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
459+
></div>
460+
Build Genuine Friendships
461+
</h4>
462+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
463+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
464+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
465+
</p>
466+
</div>
467+
<div>
468+
<h4
469+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
470+
>
471+
<div
472+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
473+
></div>
474+
Reduce Social Anxiety at Events
475+
</h4>
476+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
477+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
478+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
479+
</p>
480+
</div>
481+
<div>
482+
<h4
483+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
484+
>
485+
<div
486+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
487+
></div>
488+
Discover your community
489+
</h4>
490+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
491+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
492+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
493+
</p>
494+
</div>
495+
<div>
496+
<h4
497+
className={`text-lg font-bold ${COLORS.text.primary} mb-2 flex items-center gap-2`}
498+
>
499+
<div
500+
className={`h-2 w-2 ${COLORS.decoration.bullet} rounded-full`}
501+
></div>
502+
Make the Most of Events
503+
</h4>
504+
<p className={`${COLORS.text.secondary} ml-4 leading-relaxed`}>
505+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
506+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
507+
</p>
508+
</div>
509+
</CardContent>
510+
</Card>
511+
</div>
512+
513+
{/* Smaller cards */}
514+
515+
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
516+
{[
517+
{
518+
title: "Inclusivity",
519+
icon: Users,
520+
desc: "Lorem ipsum dolor sit amet",
521+
},
522+
{
523+
title: "Authenticity",
524+
icon: Heart,
525+
desc: "Lorem ipsum dolor sit amet",
526+
},
527+
{
528+
title: "Privacy & Safety",
529+
icon: Shield,
530+
desc: "Lorem ipsum dolor sit amet",
531+
},
532+
{
533+
title: "Community",
534+
icon: Sparkles,
535+
desc: "Lorem ipsum dolor sit amet",
536+
},
537+
].map((value, index) => (
538+
<Card
539+
key={index}
540+
className={`${COLORS.border.default} text-center ${COLORS.interactive.cardHover} transition-shadow`}
541+
>
542+
<CardContent className="pt-6">
543+
<div
544+
className={`h-14 w-14 ${COLORS.decoration.iconBg} mx-auto mb-3 flex items-center justify-center rounded-full`}
545+
>
546+
<value.icon className={`h-7 w-7 ${COLORS.icon.nav}`} />
547+
</div>
548+
<h4 className={`font-bold ${COLORS.text.primary} mb-1`}>
549+
{value.title}
550+
</h4>
551+
<p className={`text-sm ${COLORS.text.secondary}`}>
552+
{value.desc}
553+
</p>
554+
</CardContent>
555+
</Card>
556+
))}
557+
</div>
369558
</section>
370559
<section
371560
id="login"
@@ -425,7 +614,7 @@ export default function AboutPage() {
425614
size="lg"
426615
className={`w-full ${COLORS.button.primary} ${COLORS.button.primaryHover} ${COLORS.text.white} py-6 text-lg`}
427616
>
428-
Create Account
617+
Sign In
429618
</Button>
430619

431620
<div className="relative">
@@ -448,7 +637,7 @@ export default function AboutPage() {
448637
variant="outline"
449638
className={`w-full ${COLORS.button.outline} py-6 text-lg`}
450639
>
451-
Sign In
640+
Create Account
452641
</Button>
453642

454643
{/* Placeholder, there is no link rn */}

0 commit comments

Comments
 (0)