Skip to content

Commit c98eb5c

Browse files
vincenttao04vincenttao04
authored
Merge pull request #104 from UoaWDCC/feat/phone-ui-3
feat: phone ui 3
2 parents f61f344 + 404051e commit c98eb5c

File tree

18 files changed

+491
-313
lines changed

18 files changed

+491
-313
lines changed

‎README.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@
77
3. make colours/colour variables consistent across website (including logos)
88
4. check text uses p, h1, etc. tags for seo
99
5. add secondary global font to repo
10-
6. routing? (with dashes)
11-
7. add type props to files in /actions
12-
8. blur when image is rendering
13-
9. global util file (stringToList, url checker for Media, etc.)
10+
6. routing? (with dashes)
11+
7. add type props to files in /actions
12+
8. blur when image is rendering
13+
9. global util file (stringToList, url checker for Media, etc.)
14+
10. rename header to hero.tsx (so not to be confused with global header)
15+
11. purge codebase of .env and login details
16+
12. add notes to custom react component - some links have fallbacks (e.g. constitution/youtube video, etc.)
1417

1518
### BUGS
1619

1720
1. font (fraunces) not being applied globally
1821
2. double check parallax effect on phone ui screen
19-
3. min-h-screen doesn't account for footer height.
22+
3. min-h-screen doesn't account for footer height.
2023

2124
## Project Setup
2225

‎src/app/(frontend)/aboutus/page.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
import Hero from "@components/aboutus/Hero";
2-
import CardsSection from "@components/aboutus/CardsSection";
2+
import CardLayout from "@components/aboutus/CardLayout";
33

44
import { getAboutUs } from "@/actions/pageActions";
5+
import { getSiteSetting } from "@/actions/globalActions";
56

67
export default async function AboutPage() {
7-
const aboutUsContent = await getAboutUs();
8+
const [aboutUsContent, siteSettingContent] = await Promise.all([getAboutUs(), getSiteSetting()]);
9+
10+
const constitutionLink = siteSettingContent?.links?.find(
11+
(link) => link.platform === "constitution",
12+
)?.url;
13+
const cardContent = {
14+
...aboutUsContent.cards,
15+
constitutionLink,
16+
};
817

918
return (
1019
<section className="bg-(--cream)">
11-
<div className="w-full max-w-6xl mx-auto pt-44 pb-16 px-6 flex flex-col items-center">
20+
<div className="mx-auto flex w-full max-w-6xl flex-col items-center px-6 pt-44">
1221
<Hero content={aboutUsContent.hero} />
13-
<CardsSection content={aboutUsContent.cards} />
22+
</div>
23+
<div className="w-full md:pb-16">
24+
<CardLayout content={cardContent} />
1425
</div>
1526
</section>
1627
);

‎src/app/(frontend)/components/aboutus/Card.tsx‎

Lines changed: 0 additions & 172 deletions
This file was deleted.

‎src/app/(frontend)/components/aboutus/CardLayout.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { BookText, Eye, Handshake, History } from "lucide-react";
2+
3+
import { Media } from "@/payload-types";
4+
5+
import DesktopCard from "./DesktopCard";
6+
import PhoneCard from "./PhoneCard";
7+
8+
type CardProps = {
9+
background: Media | string | null;
10+
title: string;
11+
summary: string;
12+
description?: string;
13+
sponsorLogos?: { logo: Media | string | null }[] | null;
14+
};
15+
16+
type CardLayoutProps = {
17+
content: {
18+
vision: CardProps;
19+
story: CardProps;
20+
constitution: CardProps;
21+
sponsorsAndPartnerships: CardProps;
22+
constitutionLink?: string | null;
23+
};
24+
};
25+
26+
const CardLayout = ({ content }: CardLayoutProps) => {
27+
const getImageUrl = (image: Media | string | null | undefined): string | null => {
28+
if (!image) return null; // handle undefined or null
29+
if (typeof image === "string") return image; // if it's already a string URL
30+
if (typeof image === "object" && image.url) return image.url; // if it's a Media object, extract the URL
31+
return null;
32+
};
33+
34+
const getImageAlt = (image: Media | string | null | undefined, fallback: string): string => {
35+
if (!image) return fallback; // handle undefined or null
36+
if (typeof image === "object" && image?.alt) return image.alt; // if it's a Media object, extract the alt text
37+
return fallback;
38+
};
39+
40+
const constitutionLink =
41+
content.constitutionLink ??
42+
"https://auckland.campuslabs.com/engage/organization/auckland-university-student-chamber-orchestra";
43+
44+
return (
45+
<section className="flex w-full flex-col">
46+
{/* Desktop Layout: md and above */}
47+
<div className="mx-auto hidden w-full max-w-6xl flex-col items-center gap-6 px-6 md:flex">
48+
{/* First Row: Vision & Story */}
49+
<div className="flex w-full flex-row items-center gap-6">
50+
<div className="w-3/5">
51+
<DesktopCard
52+
icon={<Eye className="h-12 w-12" />}
53+
background={getImageUrl(content.vision.background)}
54+
alt={getImageAlt(content.vision.background, "Vision Background")}
55+
title={content.vision.title}
56+
summary={content.vision.summary}
57+
description={content.vision.description}
58+
link={""}
59+
/>
60+
</div>
61+
62+
<div className="w-2/5">
63+
<DesktopCard
64+
icon={<History className="h-12 w-12" />}
65+
background={getImageUrl(content.story.background)}
66+
alt={getImageAlt(content.story.background, "Story Background")}
67+
title={content.story.title}
68+
summary={content.story.summary}
69+
description={`View ${content.story.title}`}
70+
link={"https://ausco.wdcc.co.nz/ourstory"}
71+
/>
72+
</div>
73+
</div>
74+
75+
{/* Second Row: Constitution & Sponsors/Partnerships */}
76+
<div className="flex w-full flex-row items-center gap-6">
77+
<div className="w-2/5">
78+
<DesktopCard
79+
icon={<BookText className="h-12 w-12" />}
80+
background={getImageUrl(content.constitution.background)}
81+
alt={getImageAlt(content.constitution.background, "Constitution Background")}
82+
title={content.constitution.title}
83+
summary={content.constitution.summary}
84+
description={`View ${content.constitution.title}`}
85+
link={constitutionLink}
86+
/>
87+
</div>
88+
89+
<div className="w-3/5">
90+
<DesktopCard
91+
icon={<Handshake className="h-12 w-12" />}
92+
background={getImageUrl(content.sponsorsAndPartnerships.background)}
93+
alt={getImageAlt(
94+
content.sponsorsAndPartnerships.background,
95+
"Sponsors and Partnerships Background",
96+
)}
97+
title={content.sponsorsAndPartnerships.title}
98+
summary={content.sponsorsAndPartnerships.summary}
99+
description={content.sponsorsAndPartnerships.description}
100+
link={""}
101+
sponsorLogos={content.sponsorsAndPartnerships.sponsorLogos}
102+
/>
103+
</div>
104+
</div>
105+
</div>
106+
107+
{/* Mobile Layout: below md */}
108+
<div className="flex w-full flex-col bg-(--lightblue) text-(--navy) md:hidden">
109+
<div className="flex flex-col">
110+
<PhoneCard type="vision" content={content.vision.description} />
111+
112+
<div className="mx-6 h-px bg-(--navy) md:hidden" />
113+
114+
<PhoneCard
115+
type="sponsors"
116+
content={content.sponsorsAndPartnerships.description}
117+
sponsorLogos={content.sponsorsAndPartnerships.sponsorLogos}
118+
/>
119+
120+
<div className="mx-6 h-px bg-(--navy) md:hidden" />
121+
122+
<PhoneCard type="story" link="/ourstory" />
123+
124+
<div className="mx-6 h-px bg-(--navy) md:hidden" />
125+
126+
<PhoneCard type="constitution" link={constitutionLink} />
127+
</div>
128+
</div>
129+
</section>
130+
);
131+
};
132+
133+
export default CardLayout;

0 commit comments

Comments
 (0)