From 04476c2c798628746f41fff6d69dacbad7350151 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Fri, 26 Jan 2024 01:35:45 +1030 Subject: [PATCH] feat: add sponsor page --- public/images/sponsors/atlassian.svg | 1 + public/images/sponsors/level-star/bronze.svg | 4 + public/images/sponsors/level-star/gold.svg | 4 + public/images/sponsors/level-star/silver.svg | 4 + public/images/sponsors/macquarie-group.svg | 101 +++++ .../sponsors/pricewaterhouse-coopers.svg | 352 ++++++++++++++++++ src/app/(home)/page.tsx | 21 +- src/app/sponsors/page.tsx | 77 ++++ src/components/FancyRectangle.tsx | 7 +- src/components/Sponsors.tsx | 92 +++++ src/data/sponsors.ts | 37 ++ 11 files changed, 685 insertions(+), 15 deletions(-) create mode 100644 public/images/sponsors/atlassian.svg create mode 100644 public/images/sponsors/level-star/bronze.svg create mode 100644 public/images/sponsors/level-star/gold.svg create mode 100644 public/images/sponsors/level-star/silver.svg create mode 100644 public/images/sponsors/macquarie-group.svg create mode 100644 public/images/sponsors/pricewaterhouse-coopers.svg create mode 100644 src/app/sponsors/page.tsx create mode 100644 src/components/Sponsors.tsx create mode 100644 src/data/sponsors.ts diff --git a/public/images/sponsors/atlassian.svg b/public/images/sponsors/atlassian.svg new file mode 100644 index 00000000..02c91baa --- /dev/null +++ b/public/images/sponsors/atlassian.svg @@ -0,0 +1 @@ +Atlassian-horizontal-blue-rgb \ No newline at end of file diff --git a/public/images/sponsors/level-star/bronze.svg b/public/images/sponsors/level-star/bronze.svg new file mode 100644 index 00000000..b0134c4b --- /dev/null +++ b/public/images/sponsors/level-star/bronze.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/sponsors/level-star/gold.svg b/public/images/sponsors/level-star/gold.svg new file mode 100644 index 00000000..e2f199a3 --- /dev/null +++ b/public/images/sponsors/level-star/gold.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/sponsors/level-star/silver.svg b/public/images/sponsors/level-star/silver.svg new file mode 100644 index 00000000..60a5f5c0 --- /dev/null +++ b/public/images/sponsors/level-star/silver.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/sponsors/macquarie-group.svg b/public/images/sponsors/macquarie-group.svg new file mode 100644 index 00000000..1a60df59 --- /dev/null +++ b/public/images/sponsors/macquarie-group.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/public/images/sponsors/pricewaterhouse-coopers.svg b/public/images/sponsors/pricewaterhouse-coopers.svg new file mode 100644 index 00000000..c95f878d --- /dev/null +++ b/public/images/sponsors/pricewaterhouse-coopers.svg @@ -0,0 +1,352 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 23e6734a..eed7d708 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,4 +1,5 @@ import FancyRectangle from '@/components/FancyRectangle'; +import Sponsors from '@/components/Sponsors'; import Title from '@/components/Title'; import Image from 'next/image'; import ImageCarousel from './ImageCarousel'; @@ -194,18 +195,14 @@ export default function HomePage() { -

- Gold Sponsors -

-
-

- Silver Sponsors -

-
-

- Bronze Sponsors -

-
+ ( +

+ {type} Sponsors +

+ )} + /> {/* CTA part 2 */} diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx new file mode 100644 index 00000000..3ce151fc --- /dev/null +++ b/src/app/sponsors/page.tsx @@ -0,0 +1,77 @@ +import Paragraph from '@/components/Paragraph'; +import Sponsors from '@/components/Sponsors'; +import Title from '@/components/Title'; +import type { SponsorType } from '@/data/sponsors'; +import Image from 'next/image'; + +const SPONSOR_TYPE_COLORS = { + gold: '#FCC018', + silver: '#C3C3C3', + bronze: '#E8903F', +} as const satisfies Record; + +export default function SponsorsPage() { + return ( +
+
+ Duck + {`${new Date().getFullYear()} Sponsors`} + Duck +
+
+ The University of Adelaide Computer Science Club are proudly supported by our{' '} + generous sponsors. Their unwavering support make events and workshops + possible, fostering an environment for aspiring tech enthusiastic to excel within + our community. +
+ { + const color = SPONSOR_TYPE_COLORS[type]; + return ( +
+
+ Our{' '} + + {type} + {' '} + Sponsors +
+
+
+
+
+
+ ); + }} + /> + + If you'd like to partner with us, please enquire at:{' '} + + sponsorships@csclub.org.au + + +
+ ); +} diff --git a/src/components/FancyRectangle.tsx b/src/components/FancyRectangle.tsx index 4b568f0d..9ababd57 100644 --- a/src/components/FancyRectangle.tsx +++ b/src/components/FancyRectangle.tsx @@ -7,10 +7,11 @@ interface FancyRectangleProps { children: React.ReactNode; colour: Colour; offset: string; - filled: boolean; + filled?: boolean; + rounded?: boolean; } -const FancyRectangle = ({ children, colour, offset, filled }: FancyRectangleProps) => { +const FancyRectangle = ({ children, colour, offset, filled, rounded }: FancyRectangleProps) => { const offsetValue = parseInt(offset, 10); const offsetStyles = { @@ -25,7 +26,7 @@ const FancyRectangle = ({ children, colour, offset, filled }: FancyRectangleProp style={offsetStyles} className={`absolute bottom-0 right-0 h-full w-full ${ filled ? BG_COLOURS[colour] : BORDER_COLOURS[colour] - }`} + } ${rounded ? 'rounded-xl' : ''}`} >
{children} diff --git a/src/components/Sponsors.tsx b/src/components/Sponsors.tsx new file mode 100644 index 00000000..0322b0c4 --- /dev/null +++ b/src/components/Sponsors.tsx @@ -0,0 +1,92 @@ +import { SPONSORS, type Sponsor, type SponsorType } from '@/data/sponsors'; +import Image from 'next/image'; +import FancyRectangle from './FancyRectangle'; + +type SponsorCardProps = Sponsor & { reverse?: boolean }; +function SponsorCard({ image, name, description, website, type, reverse }: SponsorCardProps) { + return ( +
+
+ {`${name} +
+
+ +
+ +
{description}
+
+ +
+
+ ); +} + +const GOLD_SPONSORS = SPONSORS.filter(({ type }) => type === 'gold'); +const SILVER_SPONSORS = SPONSORS.filter(({ type }) => type === 'silver'); +const BRONZE_SPONSORS = SPONSORS.filter(({ type }) => type === 'bronze'); + +interface SponsorsProps { + typeTitle: (type: SponsorType) => React.ReactNode; + className?: string; +} +export default function Sponsors({ typeTitle, className }: SponsorsProps) { + return ( +
+ {GOLD_SPONSORS.length > 0 && ( + <> + {typeTitle('gold')} + {GOLD_SPONSORS.map((sponsor, i) => ( + + ))} + + )} + {SILVER_SPONSORS.length > 0 && ( + <> + {typeTitle('silver')} + {SILVER_SPONSORS.map((sponsor, i) => ( + + ))} + + )} + {BRONZE_SPONSORS.length > 0 && ( + <> + {typeTitle('bronze')} + {BRONZE_SPONSORS.map((sponsor, i) => ( + + ))} + + )} +
+ ); +} diff --git a/src/data/sponsors.ts b/src/data/sponsors.ts new file mode 100644 index 00000000..a881e7ef --- /dev/null +++ b/src/data/sponsors.ts @@ -0,0 +1,37 @@ +export type SponsorType = 'gold' | 'silver' | 'bronze'; +export type Sponsor = { + name: string; + description: string; + image: string; + website: string; + type: SponsorType; +}; + +// Image file should be in `/public/images/sponsors` +export const SPONSORS: Sponsor[] = [ + { + name: 'Macquarie', + image: 'macquarie-group.svg', + website: 'https://www.macquarie.com.au/', + type: 'gold', + description: + "At Macquarie, we're connecting people and data, building platforms and applications, and designing tomorrow's technology solutions. We have market leading expertise, so where could a career in Technology at Macquarie take you? Join our leaders and graduates to gain first-hand insights into a career in Technology.", + }, + { + name: 'PwC', + image: 'pricewaterhouse-coopers.svg', + website: 'https://www.pwc.com.au/', + type: 'silver', + description: + "At PwC, our purpose is to build trust in society and solve important problems. In our increasingly complex world, we work with businesses, government and the community to deliver solutions and sustained outcomes. To help Australia continue to thrive and grow. We're a network of firms in 152 countries with over 328,000 people. PwC is one of the top 50 brands worldwide and PwC Australia is among LinkedIn's top companies for where Australians want to work.", + }, + { + name: 'Atlassion', + image: 'atlassian.svg', + website: + 'https://www.atlassian.com/company/careers/resources/perk-and-benefits/global/australia', + type: 'bronze', + description: + 'Here at Atlassian we believe that behind every great human achievement, there is a team. From medicine and space travel, to disaster response and pizza deliveries, our products help teams all over the planet advance humanity through the power of software. Our mission is to help unleash the potential of every team.', + }, +];