diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index fb2c8d3c..1f5a89dd 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,7 +1,8 @@ import FancyRectangle from '@/components/FancyRectangle'; -import Sponsors from '@/components/Sponsors'; import Title from '@/components/Title'; +import { SPONSOR_TYPES, getSponsors } from '@/data/sponsors'; import Image from 'next/image'; +import { Fragment } from 'react'; import ImageCarousel from './ImageCarousel'; export default function HomePage() { @@ -184,14 +185,32 @@ export default function HomePage() { - ( -

- {type} Sponsors -

- )} - /> +
+ {SPONSOR_TYPES.map((type) => { + const sponsors = getSponsors(type); + if (sponsors.length === 0) return; + return ( + +

+ {type} Sponsors +

+
+ {sponsors.map(({ image, website, name }, i) => ( + + {`${name} + + ))} +
+ + ); + })} +
{/* CTA part 2 */} diff --git a/src/app/sponsors/Sponsors.tsx b/src/app/sponsors/Sponsors.tsx new file mode 100644 index 00000000..9aea8c55 --- /dev/null +++ b/src/app/sponsors/Sponsors.tsx @@ -0,0 +1,97 @@ +import { SPONSOR_TYPES, getSponsors, type Sponsor, type SponsorType } from '@/data/sponsors'; +import Image from 'next/image'; +import { Fragment } from 'react'; +import FancyRectangle from '../../components/FancyRectangle'; + +const SPONSOR_TYPE_COLORS = { + gold: '#FCC018', + silver: '#C3C3C3', + bronze: '#E8903F', +} as const satisfies Record; +function SponsorTypeTitle({ type }: { type: SponsorType }) { + const color = SPONSOR_TYPE_COLORS[type]; + return ( +
+
+ Our{' '} + + {type} + {' '} + Sponsors +
+
+
+
+
+
+ ); +} + +type SponsorCardProps = Sponsor & { reverse?: boolean }; +function SponsorCard({ image, name, description, website, type, reverse }: SponsorCardProps) { + return ( +
+ {`${name} + +
+ +
{description}
+
+ +
+ ); +} + +export default function Sponsors() { + let count = 0; + return ( +
+ {SPONSOR_TYPES.map((type) => { + const sponsors = getSponsors(type); + if (sponsors.length === 0) return; + return ( + + + {sponsors.map((sponsor, i) => { + count++; + return ( + + ); + })} + + ); + })} +
+ ); +} diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index f520e749..3d7d72a1 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -1,15 +1,9 @@ +import Sponsors from '@/app/sponsors/Sponsors'; import Paragraph from '@/components/Paragraph'; -import Sponsors from '@/components/Sponsors'; import Title from '@/components/Title'; -import { YEAR, type SponsorType } from '@/data/sponsors'; +import { YEAR } 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 (
@@ -36,35 +30,7 @@ export default function SponsorsPage() { 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:{' '} diff --git a/src/components/Sponsors.tsx b/src/components/Sponsors.tsx deleted file mode 100644 index 193a3872..00000000 --- a/src/components/Sponsors.tsx +++ /dev/null @@ -1,89 +0,0 @@ -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 index 4b31f4a9..87ccb943 100644 --- a/src/data/sponsors.ts +++ b/src/data/sponsors.ts @@ -1,4 +1,6 @@ -export type SponsorType = 'gold' | 'silver' | 'bronze'; +export const SPONSOR_TYPES = ['gold', 'silver', 'bronze'] as const; + +export type SponsorType = (typeof SPONSOR_TYPES)[number]; export type Sponsor = { name: string; description: string; @@ -10,7 +12,7 @@ export type Sponsor = { export const YEAR = 2023; // Image file should be in `/public/images/sponsors` -export const SPONSORS: Sponsor[] = [ +const SPONSORS: Sponsor[] = [ { name: 'Macquarie', image: 'macquarie-group.svg', @@ -37,3 +39,6 @@ export const SPONSORS: Sponsor[] = [ '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.', }, ]; + +export const getSponsors = (type: SponsorType) => + SPONSORS.filter((sponsor) => sponsor.type === type);