Skip to content

Commit

Permalink
Merge pull request #15 from 1xINTERNET/22-donate-2
Browse files Browse the repository at this point in the history
#22: Donate 2
  • Loading branch information
john1xi authored Jun 20, 2024
2 parents 357bc29 + 74fb68a commit b650786
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 16 deletions.
Binary file added public/images/goal.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 46 additions & 12 deletions src/components/Section.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,32 @@ import PrimaryLink from "./PrimaryLink.astro";
interface Props {
backgroundColor: "blue" | "green";
backgroundImage?: string;
contentImage?: string;
eyebrow?: string;
heading?: string;
id?: string;
links?: {
href: string;
text: string;
}[];
subheading?: string;
}
const { backgroundColor, backgroundImage, eyebrow, heading, links } =
Astro.props;
const {
backgroundColor,
backgroundImage,
contentImage,
eyebrow,
heading,
id,
links,
subheading,
} = Astro.props;
---

<section
class={`bg-${backgroundImage ? `[url('${backgroundImage}')]` : backgroundColor} bg-cover p-6 sm:p-12`}
id={id}
>
<div
class={`container flex flex-col gap-6 sm:gap-12 items-center justify-center mx-auto ${backgroundImage ? "text-light-lilac" : backgroundColor === "green" ? "text-blue" : "text-white"}`}
Expand All @@ -27,16 +39,38 @@ const { backgroundColor, backgroundImage, eyebrow, heading, links } =
>
{eyebrow}
</div>
<div class="text-3xl sm:text-5xl text-center">{heading}</div>
<slot />
{
links && (
<div class="flex gap-6">
{links?.map((link) => (
<PrimaryLink href={link.href} text={link.text} />
))}
<div
class=`flex flex-col sm:flex-row gap-6 sm:gap-12 sm:gap-24 items-center`
>
{
contentImage && (
<img
class="min-w-0 object-cover sm:max-lg:hidden"
src={contentImage}
alt=""
/>
)
}
<div
class=`flex flex-col gap-6 sm:gap-12 items-center ${contentImage ? 'sm:items-start' : ''}`
>
<div
class=`flex flex-col items-center text-center ${contentImage ? 'sm:items-start sm:text-left' : ''}`
>
<h2>{heading}</h2>
{subheading && <h2 class="font-light">{subheading}</h2>}
</div>
)
}
<slot />
{
links && (
<div class="flex flex-col sm:flex-row gap-6">
{links?.map((link) => (
<PrimaryLink href={link.href} text={link.text} />
))}
</div>
)
}
</div>
</div>
</div>
</section>
14 changes: 14 additions & 0 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,18 @@ import VideoPlayer from "../components/VideoPlayer.astro";
>
<VideoPlayer />
</Section>
<Section
backgroundColor="green"
contentImage="/images/goal.jpeg"
eyebrow="Donations"
heading="Let's get every child a football."
links={[
{ href: "https://gofund.me/96424540", text: "GoFundMe" },
{
href: "https://www.betterplace.me/why-do-you-love-football",
text: "Betterplace",
},
]}
subheading="Donate now on"
/>
</Layout>
11 changes: 7 additions & 4 deletions src/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@font-face {
font-family: "Stolzl";
src: url("/fonts/Stolzl-Light.ttf") format("truetype");
font-weight: lighter;
font-weight: light;
font-style: normal;
font-display: swap;
}
Expand Down Expand Up @@ -46,7 +46,7 @@
}

h2 {
@apply text-[44px] leading-[64px];
@apply text-[48px] leading-[64px];
}

h3 {
Expand All @@ -58,12 +58,15 @@
@apply text-[18px] leading-6;
}

@media only screen and (max-width: 768px) {
@media only screen and (max-width: 640px) {
h1 {
@apply text-[36px] leading-[48px];
}
h2 {
@apply text-[32px] leading-[40px];
}
}

iframe {
@apply aspect-video;
}
Expand Down

0 comments on commit b650786

Please sign in to comment.