diff --git a/client/src/assets/about-us/Vector 27.svg b/client/src/assets/about-us/Vector 27.svg new file mode 100644 index 0000000..e2d97ce --- /dev/null +++ b/client/src/assets/about-us/Vector 27.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 36.svg b/client/src/assets/about-us/Vector 36.svg new file mode 100644 index 0000000..2d9edb8 --- /dev/null +++ b/client/src/assets/about-us/Vector 36.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 42.svg b/client/src/assets/about-us/Vector 42.svg new file mode 100644 index 0000000..4eb4ef7 --- /dev/null +++ b/client/src/assets/about-us/Vector 42.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 66.svg b/client/src/assets/about-us/Vector 66.svg new file mode 100644 index 0000000..1a75e7b --- /dev/null +++ b/client/src/assets/about-us/Vector 66.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 67.svg b/client/src/assets/about-us/Vector 67.svg new file mode 100644 index 0000000..c715a3a --- /dev/null +++ b/client/src/assets/about-us/Vector 67.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 73.svg b/client/src/assets/about-us/Vector 73.svg new file mode 100644 index 0000000..1b34553 --- /dev/null +++ b/client/src/assets/about-us/Vector 73.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 74.svg b/client/src/assets/about-us/Vector 74.svg new file mode 100644 index 0000000..6e90afe --- /dev/null +++ b/client/src/assets/about-us/Vector 74.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 78.svg b/client/src/assets/about-us/Vector 78.svg new file mode 100644 index 0000000..fdc2f2b --- /dev/null +++ b/client/src/assets/about-us/Vector 78.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 87.svg b/client/src/assets/about-us/Vector 87.svg new file mode 100644 index 0000000..4eb4ef7 --- /dev/null +++ b/client/src/assets/about-us/Vector 87.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 88.svg b/client/src/assets/about-us/Vector 88.svg new file mode 100644 index 0000000..55d56e0 --- /dev/null +++ b/client/src/assets/about-us/Vector 88.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 89.svg b/client/src/assets/about-us/Vector 89.svg new file mode 100644 index 0000000..e630342 --- /dev/null +++ b/client/src/assets/about-us/Vector 89.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/Vector 90.svg b/client/src/assets/about-us/Vector 90.svg new file mode 100644 index 0000000..baa4c2e --- /dev/null +++ b/client/src/assets/about-us/Vector 90.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/about-us/badge.svg b/client/src/assets/about-us/badge.svg new file mode 100644 index 0000000..480dec1 --- /dev/null +++ b/client/src/assets/about-us/badge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/about-us/banner.svg b/client/src/assets/about-us/banner.svg new file mode 100644 index 0000000..3125495 --- /dev/null +++ b/client/src/assets/about-us/banner.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/about-us/mascot.png b/client/src/assets/about-us/mascot.png new file mode 100644 index 0000000..41a64a7 Binary files /dev/null and b/client/src/assets/about-us/mascot.png differ diff --git a/client/src/assets/about-us/social-icons.svg b/client/src/assets/about-us/social-icons.svg new file mode 100644 index 0000000..2b6d994 --- /dev/null +++ b/client/src/assets/about-us/social-icons.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/about-us/squiggle.svg b/client/src/assets/about-us/squiggle.svg new file mode 100644 index 0000000..a26ec62 --- /dev/null +++ b/client/src/assets/about-us/squiggle.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/components/AboutNavbar.tsx b/client/src/components/AboutNavbar.tsx new file mode 100644 index 0000000..cf427f8 --- /dev/null +++ b/client/src/components/AboutNavbar.tsx @@ -0,0 +1,56 @@ +import { Link, NavLink } from "react-router-dom"; +import mascot from "../assets/about-us/mascot.png"; + +const BLUE = "#2727DC"; +const FONT = "'Sekuya', sans-serif"; + +const links = [ + { to: "/", label: "home", end: true }, + { to: "/about", label: "about" }, + { to: "/events", label: "events" }, + { to: "/sponsors", label: "sponsors" }, +]; + +export default function AboutNavbar() { + return ( +
+ + UMSA + + + + + {/* TODO: there is no login page yet, so this points at sign-up */} + + login + +
+ ); +} \ No newline at end of file diff --git a/client/src/index.css b/client/src/index.css index c69da88..bb719ec 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Sekuya&display=swap'); @import "tailwindcss"; @import "./tokens.css"; diff --git a/client/src/layouts/RootLayout.tsx b/client/src/layouts/RootLayout.tsx index 3207208..79332ac 100644 --- a/client/src/layouts/RootLayout.tsx +++ b/client/src/layouts/RootLayout.tsx @@ -1,16 +1,19 @@ -import { Outlet, ScrollRestoration } from "react-router-dom"; +import { Outlet, ScrollRestoration, useLocation } from "react-router-dom"; import Navbar from "../components/Navbar"; import Footer from "../components/Footer"; export default function RootLayout() { + const { pathname } = useLocation(); + const isAbout = pathname.toLowerCase() === "/about"; + return (
- -
+ {!isAbout && } +
-
); -} +} \ No newline at end of file diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx index 80f112d..be4ebba 100644 --- a/client/src/pages/About.tsx +++ b/client/src/pages/About.tsx @@ -1,6 +1,63 @@ import { useEffect } from "react"; -import flagphoto from "../assets/about-us/flag.png"; -import statuephoto from "../assets/about-us/statue.jpg"; +import { Link } from "react-router-dom"; +import mascot from "../assets/about-us/mascot.png"; +import squiggle from "../assets/about-us/squiggle.svg"; +import dashed from "../assets/about-us/Vector 88.svg"; +import AboutNavbar from "../components/AboutNavbar"; + +// Stars and clouds +import starBlue from "../assets/about-us/Vector 87.svg"; +import starAbove from "../assets/about-us/Vector 42.svg"; +import starRed from "../assets/about-us/Vector 73.svg"; +import starPinkA from "../assets/about-us/Vector 74.svg"; +import starPinkB from "../assets/about-us/Vector 36.svg"; +import starLavender from "../assets/about-us/Vector 89.svg"; +import cloudPink from "../assets/about-us/Vector 66.svg"; +import cloudPurple from "../assets/about-us/Vector 78.svg"; +import cloudPinkB from "../assets/about-us/Vector 67.svg"; +import footerWave from "../assets/about-us/Vector 27.svg"; +import badge from "../assets/about-us/badge.svg"; +import socialIcons from "../assets/about-us/social-icons.svg"; +import banner from "../assets/about-us/banner.svg"; +// TODO: swap Archivo Black for Sekuya once the font file is available +const DISPLAY = "'Sekuya', sans-serif"; +const BLUE = "#2727DC"; +const RED = "#FF5252"; + +const headingStyle = { + color: BLUE, + fontFamily: DISPLAY, + fontSize: "48px", + lineHeight: "50px", + letterSpacing: "4.8px", +} as const; + +const bodyStyle = { + color: BLUE, + fontFamily: DISPLAY, + fontSize: "16px", + lineHeight: "30px", + letterSpacing: "1.6px", + textAlign: "justify", +} as const; + +// small star beside a heading, shown at its natural Figma size +function Star({ src }: { src: string }) { + return ; +} + +// big star placed by its CENTER point on the canvas, natural Figma size +function BigStar({ src, x, y }: { src: string; x: number; y: number }) { + return ( + + ); +} export default function About() { useEffect(() => { @@ -8,109 +65,140 @@ export default function About() { }, []); return ( -
- {/*header*/} -
-

UMSA

-

Welcome to the UMSA about us page

-
+
+ + {/* ---------- banner ---------- */} + Welcome to UMSA + {/* clouds are positioned against the page edges so they bleed off like in Figma */} + + + +
+ {/* header: left-aligned like Figma */} +

+ about + us... +

- {/*history */} - -
-

History

-

- Evidence of modern human habitation in Malaysia dates back 40,000 - years.[41] In the Malay Peninsula, the first inhabitants are thought - to be Negritos.[42][43] Areas of Malaysia participated in the Maritime - Jade Road between 2000 BC to 1000 AD.[44][45][46][47] Traders and - settlers from India and China arrived as early as the first century - AD, establishing trading ports and coastal towns in the second and - third centuries. Their presence resulted in strong Indian and Chinese - influences on the local cultures, and the people of the Malay - Peninsula adopted the religions of Hinduism and Buddhism. Sanskrit - inscriptions appear as early as the fourth or fifth century.[48] The - Kingdom of Langkasuka arose around the second century in the northern - area of the Malay Peninsula, lasting until about the 15th century.[36] - Between the 7th and 13th centuries, much of the southern Malay - Peninsula was part of the maritime Srivijayan empire. By the 13th and - the 14th century, the Majapahit empire had successfully wrested - control over most of the peninsula and the Malay Archipelago from - Srivijaya.[49] In the early 15th century, Parameswara, a runaway king - of the former Kingdom of Singapura linked to the old Srivijayan court, - founded the Malacca Sultanate.[50] The spread of Islam increased - following Parameswaras conversion to that religion. Malacca was an - important commercial centre during this time, attracting trade from - around the region.[51] -

-
-
- {/*vison and purpose*/} -
-
- -
-
-

Vision

-

- Malaysia is the 66th largest country by total land area, with a - total area of 330,803 km2 (127,724 sq mi).[10] West Malaysia - shares land borders with Thailand, while East Malaysia shares land - borders with Indonesia and Brunei.[18] Singapore is separated from - the West by the Straits of Johor and is linked to it by a narrow - causeway and a bridge. The country also shares maritime boundaries - with Indonesia, Vietnam[179] and the Philippines.[180] The land - borders are defined in large part by geological features such as - the Perlis River, the Golok River and the Pagalayan Canal, whilst - some of the maritime boundaries are the subject of ongoing - contention.[18] Brunei forms what is almost an enclave in - Malaysia,[181] with the state of Sarawak dividing it into two - parts. Malaysia is the only country with territory on both the - Asian mainland and the Malay Archipelago.[182] The Strait of - Malacca, lying between Sumatra and Peninsular Malaysia, is one of - the most important thoroughfares in global commerce, carrying 40% - of the worls trade.[183] The southernmost point of mainland Asia - is located at Tanjung Piai, in the state of Johor.[184] + {/* squiggle + text blocks share one fixed-size canvas so coordinates line up */} +

+ {/* dashed line: sits inside the S-curve, behind the solid squiggle */} + + + + + {/* mascot: bigger, tilted, covers the start of the line */} + UMSA mascot + + {/* CULTURE */} +
+
+ +

Culture

+ +
+

+ Connecting Malaysians across campus, our club celebrates Malaysian culture, fosters + friendships, and creates a welcoming space for all students.

-
-
-
- -
-
-

Purpose

-

- Malaysia[d] is a country in Southeast Asia. A federal - constitutional monarchy, it consists of 13 states and three - federal territories, separated by the South China Sea into two - regions: Peninsular Malaysia on Mainland Southeast Asia and East - Malaysia on the island of Borneo. Peninsular Malaysia shares land - and maritime borders with Thailand, as well as maritime borders - with Singapore, Vietnam, and Indonesia; East Malaysia shares land - borders with Brunei and Indonesia, and maritime borders with the - Philippines and Vietnam. Kuala Lumpur is the countrys national - capital, largest city, and the seat of the legislative branch of - the federal government, while Putrajaya is the federal - administrative capital, representing the seat of both the - executive branch and the judicial branch of the federal - government. With a population of over 34 million, it is the worlds - 42nd-most populous country. The country has its origins in the - Malay king{" "} + {/* COMMUNITY: stars sit outside the text block */} +

+
+ +

Community

+ +
+

+ From cultural events to social gatherings, we bring a piece of home to your university + life. Sign up below to join our club today!

+ + {/* big blue stars, placed by center point */} + + + + + {/* CTA line */} +

+ A home away from home. +

- {/*link*/} + {/* ---------- wave footer ---------- */} +
+ {/* Figma's blue jagged shape, stretched to full page width */} + + + {/* footer content sits on top of the shape */} +
+ + + UMSA 2026 logo -
- - - +
+ +
+ + + {/* invisible links laid over each third of the image */} + + + +
+
+
);