diff --git a/src/components/DonationFormWrapper.tsx b/src/components/DonationFormWrapper.tsx new file mode 100644 index 0000000..00f9f58 --- /dev/null +++ b/src/components/DonationFormWrapper.tsx @@ -0,0 +1,33 @@ +import { Elements } from '@stripe/react-stripe-js'; +import { loadStripe } from '@stripe/stripe-js'; +import { DonationForm, type DonateProps } from './DonationForm'; +import { type ReactNode } from 'react'; + +const stripePromise = loadStripe(import.meta.env.PUBLIC_STRIPE_KEY); + +interface DonationFormWrapperProps { + formProps: DonateProps; + campaignProgress?: ReactNode; + disableDialog?: boolean; +} + +export const DonationFormWrapper = ({ formProps, campaignProgress, disableDialog }: DonationFormWrapperProps) => { + const options = { + mode: 'payment' as const, + amount: 100, + currency: 'usd', + appearance: { + theme: 'stripe' as const, + }, + }; + + return ( + + + + ); +}; \ No newline at end of file diff --git a/src/components/SponsorCard.astro b/src/components/SponsorCard.astro index 403606b..ed15568 100644 --- a/src/components/SponsorCard.astro +++ b/src/components/SponsorCard.astro @@ -19,11 +19,11 @@ const { name, region, gender, gtlId, focus, bio, image, isSponsored, slug } = As const imageUrl = imageBuilder.image(image).width(600).fit('crop').url(); ---
-
+

{name}

Region: {region} @@ -46,47 +46,49 @@ const imageUrl = imageBuilder.image(image).width(600).fit('crop').url();

Gender: {gender}

- + |

{gtlId}

-
+
View Details -

$1,000 month needed

+ {!isSponsored && ( +

$1,000 month needed

+ )}
-
+

Focus: {focus}

{bio} diff --git a/src/pages/global-translation-leaders.astro b/src/pages/global-translation-leaders.astro index 3b1448f..b2fbe0a 100644 --- a/src/pages/global-translation-leaders.astro +++ b/src/pages/global-translation-leaders.astro @@ -2,6 +2,7 @@ import Layout from '../layouts/Layout.astro'; import SponsorCards from '../components/SponsorCards.astro'; import { sanityClient as sanity } from 'sanity:client'; +import '../styles/global.css' const sponsors = await sanity.fetch(`*[_type == "sponsor"]{ name, @@ -16,13 +17,8 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{ }`); ---

@@ -70,7 +66,7 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
Seed Company Logo
-
+

Global Translation Leaders

@@ -81,8 +77,8 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
-
-
+
+

About GTL

Seed Company's Global Translation Leaders (GTL) program is supported by generous investors who understand the power of training and leadership in Bible translation. Sponsors include individuals, families, small groups, churches, businesses, and foundations who are committed to seeing Bible translation advance around the globe.

@@ -95,20 +91,20 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
-
+
seedling icon

Our Approach

There's no one-size-fits-all approach to Bible translation. Each people group and culture is different. That's why Seed Company works alongside local partners—who know their own languages and cultures best—to translate Scripture efficiently and accurately.

-
+
seedling icon

900+ Leaders

Over the past thirty years, Seed Company has been honored to support Bible translation leaders through internship-focused training. To date, we've supported over 900 translation leaders (and counting!) in this program. Now, we're excited to share the ability to sponsor individual participants, giving investors a unique opportunity to understand the culture, the language, the challenges, and the opportunities an individual translation leader is navigating!

-
-
+
+
Woman smiling
@@ -122,8 +118,8 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
-
-
+
+

Sponsor a Global Translation Leader:

diff --git a/src/pages/sponsors/[slug].astro b/src/pages/sponsors/[slug].astro index b3c9d7e..06eac41 100644 --- a/src/pages/sponsors/[slug].astro +++ b/src/pages/sponsors/[slug].astro @@ -4,6 +4,7 @@ import { sanityClient as sanity } from 'sanity:client'; import { sponsorBySlug, type Sponsor } from './sponsorBySlug.groq'; import { imageBuilder } from '../../lib/sanity'; import '../../styles/global.css'; +import { DonationFormWrapper } from '../../components/DonationFormWrapper'; export async function getStaticPaths() { const sponsors = await sanity.fetch(`*[_type == "sponsor"]{ slug }`); @@ -22,12 +23,11 @@ if (!sponsor) { const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).url() : ''; --- -
-
+
- + ← Back to Global Translation Leaders
@@ -46,9 +46,9 @@ const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).ur
-

{sponsor.name}

+

{sponsor.name}

-
+

Region: {sponsor.region}

Gender: {sponsor.gender}

GTL ID: {sponsor.gtlId}

@@ -56,13 +56,25 @@ const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).ur
-
+
{!sponsor.isSponsored && ( -
- -
+
+ +
)} {sponsor.isSponsored && (
@@ -74,7 +86,7 @@ const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).ur
-
+

Biography

{sponsor.bio}

diff --git a/src/styles/global.css b/src/styles/global.css index f9371bf..0674155 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -54,10 +54,53 @@ --footer-bg: #000; --footer-text: #fff; --mkt-primary-heading-size: 8rem; - + --cream: #f7f1e7; + --black: #000000; --border-accent: #d6d4c9; -} + --gtl-dark-green: #1d3738; + --gtl-light-green: #29b77c; + --gtl-light-gray: #636466; + --gtl-cream: #f7f1e7; +} +/* GTL Styles */ +.gtl-container { + max-width: 1440px; + margin: 0 auto; +} +.gtl-logo-wrapper { + max-width: 1440px; + margin: 0 auto; +} +.bg-gtl-green { + background-color: var(--gtl-dark-green); +} +.bg-gtl-light-green { + background-color: var(--gtl-light-green); +} +.bg-gtl-light-gray { + background-color: var(--gtl-light-gray); +} +.bg-gtl-cream { + background-color: var(--gtl-cream); +} +.icon { + width: 50px; + height: 50px; +} +.quote { + font-weight: 300; +} +.quote::before { + content: "“"; + display: block; + font-family: 'Times New Roman', serif; + font-weight: 900; + height: 0.6em; + line-height: 1; + color: var(--gtl-light-green); + font-size: calc(1px * 100); +} /* Sustainers Template Styles */ .sus-primary-bg { background-color: var(--sus-primary-bg);