fix(giveback): restore source page layout
This commit is contained in:
DeCentN2Madness committed
1 parent
6db91105da
commit
21b0ad7461
5 files changed
+260
-10
No files matched your search
@@ -0,0 +1,213 @@
|
||||
---
|
||||
import Button from './Button.astro';
|
||||
|
||||
interface Props {
|
||||
variant: 'intro' | 'wishlist' | 'fundraiser' | 'community';
|
||||
heading: string;
|
||||
headingId: string;
|
||||
image?: string;
|
||||
imageAlt?: string;
|
||||
actionHref?: string;
|
||||
actionLabel?: string;
|
||||
actionRel?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
variant,
|
||||
heading,
|
||||
headingId,
|
||||
image,
|
||||
imageAlt = '',
|
||||
actionHref,
|
||||
actionLabel,
|
||||
actionRel
|
||||
} = Astro.props;
|
||||
|
||||
const Heading = variant === 'intro' || variant === 'community' ? 'h2' : 'h3';
|
||||
const hasImage = Boolean(image);
|
||||
const actionIsCentered = variant === 'community';
|
||||
---
|
||||
|
||||
<section
|
||||
class:list={[
|
||||
'giveback-section',
|
||||
`giveback-section--${variant}`,
|
||||
{ 'giveback-section--split': hasImage }
|
||||
]}
|
||||
aria-labelledby={headingId}
|
||||
>
|
||||
<div class="container">
|
||||
<div class="giveback-section__grid">
|
||||
{image && variant === 'wishlist' && (
|
||||
<img
|
||||
class="giveback-section__image giveback-section__image--gift"
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div class="giveback-section__copy">
|
||||
<Heading id={headingId}>{heading}</Heading>
|
||||
<slot />
|
||||
|
||||
{actionHref && actionLabel && !actionIsCentered && (
|
||||
<div class="giveback-section__action">
|
||||
<Button href={actionHref} target="_blank" rel={actionRel}>{actionLabel}</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{image && variant === 'community' && (
|
||||
<img
|
||||
class="giveback-section__image giveback-section__image--community"
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{actionHref && actionLabel && actionIsCentered && (
|
||||
<div class="giveback-section__action giveback-section__action--center">
|
||||
<Button href={actionHref} target="_blank" rel={actionRel}>{actionLabel}</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.giveback-section {
|
||||
color: var(--color-primary);
|
||||
padding-block: 80px;
|
||||
}
|
||||
|
||||
.giveback-section--wishlist {
|
||||
background: var(--color-tint);
|
||||
}
|
||||
|
||||
.giveback-section--fundraiser {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.giveback-section__grid {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.giveback-section--split .giveback-section__grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.giveback-section--wishlist .giveback-section__grid {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.giveback-section--community .giveback-section__grid {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(h2),
|
||||
.giveback-section__copy :global(h3) {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(h2) {
|
||||
font-size: 2.4rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(h3) {
|
||||
font-size: 2.2rem;
|
||||
line-height: 2.8rem;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(p) {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.giveback-section--wishlist .giveback-section__copy :global(h3),
|
||||
.giveback-section--wishlist .giveback-section__copy :global(p),
|
||||
.giveback-section--fundraiser .giveback-section__copy :global(h3),
|
||||
.giveback-section--fundraiser .giveback-section__copy :global(p),
|
||||
.giveback-section--community .giveback-section__copy :global(h2),
|
||||
.giveback-section--community .giveback-section__copy :global(p) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.giveback-section--fundraiser .giveback-section__copy :global(h3),
|
||||
.giveback-section--fundraiser .giveback-section__copy :global(p) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.giveback-section__image {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.giveback-section__image--gift {
|
||||
margin-inline: auto;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.giveback-section__image--community {
|
||||
justify-self: start;
|
||||
max-width: 266px;
|
||||
}
|
||||
|
||||
.giveback-section__action {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.giveback-section__action--center {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.giveback-section__action :global(.content-button) {
|
||||
padding: .8rem 1.2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.giveback-section {
|
||||
padding-block: 40px;
|
||||
}
|
||||
|
||||
.giveback-section--intro {
|
||||
padding-block: 50px;
|
||||
}
|
||||
|
||||
.giveback-section--split .giveback-section__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(h2) {
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(h3) {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.375rem;
|
||||
}
|
||||
|
||||
.giveback-section__copy :global(p) {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.giveback-section--wishlist .giveback-section__copy :global(h3),
|
||||
.giveback-section--wishlist .giveback-section__copy :global(p),
|
||||
.giveback-section--fundraiser .giveback-section__copy :global(h3),
|
||||
.giveback-section--fundraiser .giveback-section__copy :global(p),
|
||||
.giveback-section--community .giveback-section__copy :global(h2),
|
||||
.giveback-section--community .giveback-section__copy :global(p) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.giveback-section__image--community {
|
||||
margin-bottom: 20px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,27 +8,54 @@ translationKey: "donate-autism-giveback"
|
||||
draft: false
|
||||
---
|
||||
import ContactObfuscation from '../../../components/ContactObfuscation.astro';
|
||||
import GivebackSection from '../../../components/GivebackSection.astro';
|
||||
|
||||
## Ways to Giveback
|
||||
<GivebackSection
|
||||
variant="intro"
|
||||
heading="Ways to Giveback"
|
||||
headingId="ways-to-giveback-heading"
|
||||
>
|
||||
|
||||
Every act of generosity, no matter how big or small, makes a difference at the Arizona Institute for Autism. Whether you donate items directly, support our Amazon iGiveback Wishlist, or contribute to our 501(c)(3) public charity, your support helps improve the lives of children with autism, their families, and the communities around them.
|
||||
|
||||
|
||||
</GivebackSection>
|
||||
|
||||
### Give the Gift of a Smile!
|
||||
<GivebackSection
|
||||
variant="wishlist"
|
||||
heading="Give the Gift of a Smile!"
|
||||
headingId="give-the-gift-of-a-smile-heading"
|
||||
image="/assets/images/giveback-donation-gift.webp"
|
||||
imageAlt="giveback donation gift"
|
||||
actionHref="https://www.amazon.com/hz/wishlist/ls/17A5XHRQJN3QT"
|
||||
actionLabel="View our Amazon Wishlist"
|
||||
actionRel="nofollow noopener"
|
||||
>
|
||||
|
||||
Visit AIA’s Amazon iGiveback Wishlist today, pick an item (or two!), and help us turn everyday needs into moments of happiness and growth.
|
||||
|
||||
View our Amazon Wishlist
|
||||
</GivebackSection>
|
||||
|
||||
### Host a Fundraiser
|
||||
<GivebackSection
|
||||
variant="fundraiser"
|
||||
heading="Host a Fundraiser"
|
||||
headingId="host-a-fundraiser-heading"
|
||||
>
|
||||
|
||||
Would you like to host a fundraiser to benefit the Arizona Institute for Autism? Please contact us at <ContactObfuscation email="info@azinstitute4autism.com" obfuscatedText="moc.msitua4etutitsniza@ofni" /> and a member of our team will be in touch to discuss next steps! All potential third party events will be evaluated in terms of their alignment with Arizona Institute for Autism's mission.
|
||||
|
||||
## Community 4 Autism
|
||||
</GivebackSection>
|
||||
|
||||
A 501(c)(3) nonprofit organization (EIN 92-2808564), Community 4 Autism was established in June 2023. Your tax-deductible donation directly supports families of children and individuals diagnosed with autism.
|
||||
<GivebackSection
|
||||
variant="community"
|
||||
heading="Community 4 Autism"
|
||||
headingId="community-4-autism-heading"
|
||||
image="/assets/images/community-4-autism-logo-blue-1.png"
|
||||
imageAlt="Community 4 Autism - Nonprofit Giveback Solution"
|
||||
actionHref="https://www.givingfountain.org/directory/dc917b98-89c6-4003-bf2d-a4ac8f848c7b"
|
||||
actionLabel="Donate with GivingFountain"
|
||||
actionRel="noopener"
|
||||
>
|
||||
|
||||
|
||||
A 501(c)(3) nonprofit organization (EIN 92-2808564), **Community 4 Autism** was established in June 2023. Your tax-deductible donation directly supports families of children and individuals diagnosed with autism.
|
||||
|
||||
Donate with GivingFountain
|
||||
</GivebackSection>
|
||||
@@ -70,6 +70,8 @@ const heroImage = pageHeroImages[entry.data.slug];
|
||||
? <FaqPage><slot /></FaqPage>
|
||||
: entry.data.slug === 'insurance' && entry.data.lang === 'en'
|
||||
? <InsurancePage><slot /></InsurancePage>
|
||||
: entry.data.slug === 'donate-autism-giveback' && entry.data.lang === 'en'
|
||||
? <slot />
|
||||
: entry.data.slug === 'contact'
|
||||
? <ContactPage title={bannerTitle}><slot /></ContactPage>
|
||||
: <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
|
||||
|
||||
Reference in new issue
Block a user