[Giving Day] New Heros #874
Conversation
|
[diff-counting] Significant lines: 255. |
| </SectionWrapper> | ||
| </div> | ||
| </section> | ||
| <div className="lg:pb-24 pb-12"> |
There was a problem hiding this comment.
need some extra padding (tho less on mobile)
|
|
||
| const InitiativePage = () => { | ||
| useTitle('Initiatives'); | ||
| return ( | ||
| <div className="bg-white flex flex-col"> | ||
| <InitiativeHero /> | ||
| <div className="lg:pb-24 pb-12 bg-[#000000]"> |
There was a problem hiding this comment.
same thing as here, plus need to make the hero section black (rest of page is white)
| @@ -17,25 +18,17 @@ export default function Page() { | |||
| useTitle('Products'); | |||
|
|
|||
| return ( | |||
| <div className="overflow-x-hidden md:pt-[100px] xs:pt-9"> | |||
There was a problem hiding this comment.
removed padding as no longer needed
|
|
||
| const { impacts } = impactData; | ||
| const { companies } = companyData; | ||
|
|
||
| const SponsorHero = () => ( | ||
| <div | ||
| className="bg-black text-white md:my-[100px] xs:my-9 min-h-[calc(100vh-300px)] |
There was a problem hiding this comment.
also removed weird calc height stuff
| </div> | ||
| </SectionWrapper> | ||
| <div className="relative"></div> | ||
| <div className="flex items-center pt-12 w-[100%]"> |
There was a problem hiding this comment.
padding changes to accomodate for banner
| action?: { | ||
| buttonText: string; | ||
| link: string; | ||
| disabled?: boolean; |
There was a problem hiding this comment.
for the Apply button in hero section to be disabled when applications not open
new-dti-website/components/hero.tsx
Outdated
| className={`primary-button ${ | ||
| action.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '' | ||
| }`} | ||
| href={action.disabled ? '' : action.link} |
There was a problem hiding this comment.
empty href attribute (but still need it) so that it's still keyboard accessible even if disabled
There was a problem hiding this comment.
maybe we just don't render the button if the button is disabled. I think it's okay since the banner will indicate that the form is not open anymore
There was a problem hiding this comment.
i just read this which says we shouldn't be "disabling" links.
so i think ur right, let's just render a disabled <button> instead!
| {action && | ||
| (action.disabled ? ( | ||
| <button className="primary-button opacity-50 cursor-not-allowed" disabled={true}> | ||
| {action.buttonText} | ||
| </button> | ||
| ) : ( | ||
| <a className="primary-button" href={action.link}> | ||
| {action.buttonText} | ||
| </a> | ||
| ))} |
There was a problem hiding this comment.
Summary
Update heros to new design for giving day.
Notion/Figma Link
Figma
DESKTOP:
MOBILE