diff --git a/new-dti-website/components/sponsor/SponsorshipTable.tsx b/new-dti-website/components/sponsor/SponsorshipTable.tsx index f638ba32..99dbad5f 100644 --- a/new-dti-website/components/sponsor/SponsorshipTable.tsx +++ b/new-dti-website/components/sponsor/SponsorshipTable.tsx @@ -1,23 +1,66 @@ import { useState } from 'react'; -import { benefits } from './data/benefits.json'; -import { medals } from './data/medals.json'; +import benefitData from './data/benefits.json'; +import medalData from './data/medals.json'; +import useScreenSize from '../../src/hooks/useScreenSize'; +import { TABLET_BREAKPOINT } from '../../src/consts'; type Tier = 'bronze' | 'silver' | 'gold' | 'platinum'; + +const { medals } = medalData; +const { benefits } = benefitData; + const tiers = Object.keys(medals); const SponsorshipTableMobile = () => { - const [medal, setMedal] = useState('bronze'); - return
; + const [selectedMedal, setSelectedMedal] = useState('bronze'); + return ( + <> +
+

Sponsorship benefits

+
+ {Object.keys(medals).map((medal) => ( +
+ {medal} setSelectedMedal(medal as Tier)} + height={selectedMedal === medal ? 100 : 87} + /> +
+ ))} +
+
+
+ {benefits.map((benefit) => { + const highlighted = tiers.indexOf(selectedMedal) >= tiers.indexOf(benefit.lowestTier); + return ( +
+ {highlighted +
+

{benefit.title}

+

{benefit.description}

+
+
+ ); + })} +
+ + ); }; const SponsorshipTableLaptop = () => ( <>
-

Sponsorship benefits

+

+ Sponsorship benefits +

{Object.keys(medals).map((medal) => ( -
- {medal} +
+ {medal}
))}
@@ -25,13 +68,16 @@ const SponsorshipTableLaptop = () => ( {benefits.map((benefit) => (
-

{benefit.title}

-

{benefit.description}

+

{benefit.title}

+

{benefit.description}

- {tiers.map((n) => ( -
- {tiers.indexOf(n) >= tiers.indexOf(benefit.lowestTier) && ( + {tiers.map((tier) => ( +
+ {tiers.indexOf(tier) >= tiers.indexOf(benefit.lowestTier) && ( check )}
@@ -39,14 +85,16 @@ const SponsorshipTableLaptop = () => (
))} -
); -const SponsorshipTable = () => ( -
- -
-); +const SponsorshipTable = () => { + const { width } = useScreenSize(); + return ( +
+ {width >= TABLET_BREAKPOINT ? : } +
+ ); +}; export default SponsorshipTable; diff --git a/new-dti-website/public/icons/company-icons/asana.svg b/new-dti-website/public/icons/company-icons/asana.svg new file mode 100644 index 00000000..eb2756f0 --- /dev/null +++ b/new-dti-website/public/icons/company-icons/asana.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/new-dti-website/public/icons/company-icons/invision.svg b/new-dti-website/public/icons/company-icons/invision.svg new file mode 100644 index 00000000..b1f1bcb1 --- /dev/null +++ b/new-dti-website/public/icons/company-icons/invision.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/new-dti-website/public/icons/company-icons/millennium.svg b/new-dti-website/public/icons/company-icons/millennium.svg new file mode 100644 index 00000000..2cdeb2b6 --- /dev/null +++ b/new-dti-website/public/icons/company-icons/millennium.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/new-dti-website/public/icons/company-icons/zeplin.svg b/new-dti-website/public/icons/company-icons/zeplin.svg new file mode 100644 index 00000000..0f2e40c3 --- /dev/null +++ b/new-dti-website/public/icons/company-icons/zeplin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/new-dti-website/public/icons/green_check.svg b/new-dti-website/public/icons/green_check.svg new file mode 100644 index 00000000..86f11e3a --- /dev/null +++ b/new-dti-website/public/icons/green_check.svg @@ -0,0 +1,3 @@ + + + diff --git a/new-dti-website/public/icons/red_x.svg b/new-dti-website/public/icons/red_x.svg new file mode 100644 index 00000000..77856f0f --- /dev/null +++ b/new-dti-website/public/icons/red_x.svg @@ -0,0 +1,3 @@ + + + diff --git a/new-dti-website/src/app/sponsor/page.tsx b/new-dti-website/src/app/sponsor/page.tsx index cd1e3fd5..21031c92 100644 --- a/new-dti-website/src/app/sponsor/page.tsx +++ b/new-dti-website/src/app/sponsor/page.tsx @@ -1,21 +1,28 @@ -'use client' +'use client'; -import { impacts } from '../../../components/sponsor/data/impacts.json'; -import { companies } from '../../../components/sponsor/data/sponsors.json'; +import impactData from '../../../components/sponsor/data/impacts.json'; +import companyData from '../../../components/sponsor/data/sponsors.json'; import SponsorshipTable from '../../../components/sponsor/SponsorshipTable'; +const { impacts } = impactData; +const { companies } = companyData; + const SponsorHero = () => ( -
+
-
+

- SUPPORT OUR TEAM + SUPPORT
+ OUR TEAM

@@ -42,30 +49,34 @@ type SponsorCardProps = { image: string; title: string; description: string; - key: string; + alt: string; }; -const SponsorCard: React.FC = ({ image, title, description, key }) => ( -
- {key} +const SponsorCard: React.FC = ({ image, title, description, alt }) => ( +
+ {alt}
-

{title}

-

{description}

+

{title}

+

{description}

); const SponsorImpact = () => ( -
+
{impacts.map((impact) => ( ))}
@@ -75,9 +86,13 @@ const SponsorPage = () => ( <>
-
- DTI 2024 -
+
+ DTI 2024 +

Become a sponsor!

We would love to partner with organizations that share our vision of changing the world. @@ -90,7 +105,7 @@ const SponsorPage = () => ( className="rounded-xl py-3 px-[14px] bg-[#A52424] text-white font-bold hover:bg-white hover:text-[#A52424] w-fit" > - Contact us + Contact us

@@ -99,21 +114,23 @@ const SponsorPage = () => (
-
-

Thank you to our sponsors!

-
+
+

Thank you to our sponsors!

+
{companies.map((company) => ( {company.key} ))}
-
-

Want to learn more about how you can help us make an impact?

+
+

+ Want to learn more about how you can help us make an impact? +