From b3ec31a26504c77926cad86c516b32599f95214f Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Sat, 11 Oct 2025 07:44:03 +0000
Subject: [PATCH] feat: add all donation methods to Join the Mission + 50px
 footer CTA padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add all three donation methods to Join the Mission section:
  - Donate via PayPal (primary button)
  - Donate by Card (outlined button)
  - Kickstarter coming soon
- Change Footer CTA padding from pt: 8, pb: 0 to py: 6.25 (50px)
- Maintains consistent donation options across page sections

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/[locale]/page.tsx | 69 ++++++++++++++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 53aff45..d7cfd69 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -529,25 +529,53 @@ export default function Home() {
           If this mission speaks to you — help keep the Bible free forever.
         </Typography>
 
-        <Button
-          variant="contained"
-          size="large"
-          sx={{
-            py: 2.5,
-            px: 5,
-            fontSize: '1.4rem',
-            fontWeight: 700,
-            textTransform: 'none',
-            bgcolor: 'primary.main',
-            '&:hover': { bgcolor: 'primary.dark' },
-            mb: 2,
-          }}
-          href="https://paypal.me/biblicalguide"
-          target="_blank"
-          startIcon={<VolunteerActivism sx={{ fontSize: '2rem' }} />}
-        >
-          Donate Now
-        </Button>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 500, mx: 'auto', mb: 4 }}>
+          <Button
+            variant="contained"
+            size="large"
+            sx={{
+              py: 2,
+              fontSize: '1.2rem',
+              fontWeight: 600,
+              textTransform: 'none',
+              bgcolor: 'primary.main',
+              '&:hover': { bgcolor: 'primary.dark' },
+            }}
+            startIcon={<span style={{ fontSize: '1.5rem' }}>💳</span>}
+            href="https://paypal.me/biblicalguide"
+            target="_blank"
+          >
+            Donate via PayPal
+          </Button>
+
+          <Button
+            variant="outlined"
+            size="large"
+            sx={{
+              py: 2,
+              fontSize: '1.2rem',
+              fontWeight: 600,
+              textTransform: 'none',
+              borderColor: 'primary.main',
+              color: 'primary.main',
+              '&:hover': {
+                borderColor: 'primary.dark',
+                bgcolor: 'rgba(0, 150, 136, 0.04)',
+              },
+            }}
+            startIcon={<span style={{ fontSize: '1.5rem' }}>💰</span>}
+            onClick={() => router.push(`/${locale}/donate`)}
+          >
+            Donate by Card
+          </Button>
+
+          <Box sx={{ py: 2 }}>
+            <Typography variant="body1" color="text.secondary" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
+              <span style={{ fontSize: '1.5rem' }}>🎯</span>
+              <span>Support us on Kickstarter (coming soon)</span>
+            </Typography>
+          </Box>
+        </Box>
 
         <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.95rem', fontStyle: 'italic' }}>
           Every verse you read today stays free tomorrow.
@@ -559,8 +587,7 @@ export default function Home() {
         sx={{
           background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
           color: 'white',
-          pt: 8,
-          pb: 0,
+          py: 6.25,
           textAlign: 'center',
         }}
       >