feat: add all donation methods to Join the Mission + 50px footer CTA padding

- 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

@@ -529,25 +529,53 @@ export default function Home() {
           If this mission speaks to you — help keep the Bible free forever.
         </Typography>
 
-        <Button
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 500, mx: 'auto', mb: 4 }}>
-          variant="contained"
+          <Button
-          size="large"
+            variant="contained"
-          sx={{
+            size="large"
-            py: 2.5,
+            sx={{
-            px: 5,
+              py: 2,
-            fontSize: '1.4rem',
+              fontSize: '1.2rem',
-            fontWeight: 700,
+              fontWeight: 600,
-            textTransform: 'none',
+              textTransform: 'none',
-            bgcolor: 'primary.main',
+              bgcolor: 'primary.main',
-            '&:hover': { bgcolor: 'primary.dark' },
+              '&:hover': { bgcolor: 'primary.dark' },
-            mb: 2,
+            }}
-          }}
+            startIcon={<span style={{ fontSize: '1.5rem' }}>💳</span>}
-          href="https://paypal.me/biblicalguide"
+            href="https://paypal.me/biblicalguide"
-          target="_blank"
+            target="_blank"
-          startIcon={<VolunteerActivism sx={{ fontSize: '2rem' }} />}
+          >
-        >
+            Donate via PayPal
-          Donate Now
+          </Button>
-        </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,
+          py: 6.25,
-          pb: 0,
           textAlign: 'center',
         }}
       >