diff --git a/src/App.css b/src/App.css index c4ac0c6..e0d76cc 100644 --- a/src/App.css +++ b/src/App.css @@ -816,6 +816,71 @@ } /* ── Home Jump Section ── */ +.section-share { + background: #080808; + border-top: 1px solid rgba(201, 168, 76, 0.18); + border-bottom: 1px solid rgba(201, 168, 76, 0.12); + padding: 4rem 0; +} + +.section-share-inner { + display: flex; + align-items: center; + gap: 3rem; + max-width: 860px; +} + +.share-text { + flex: 1; +} + +.share-text .section-heading { + text-align: left; + margin-bottom: 0.75rem; +} + +.share-p { + font-family: var(--brand-font-body); + font-size: 1.05rem; + line-height: 1.65; + color: var(--brand-muted); + margin: 0 0 1.5rem; +} + +.share-show-wrap { + display: flex; + flex-direction: column; + gap: 0.6rem; + align-items: flex-start; +} + +.share-feedback { + font-family: var(--brand-font-body); + font-size: 0.9rem; + color: var(--brand-gold); + margin: 0; +} + +.share-qr { + width: 180px; + height: auto; + flex-shrink: 0; + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 168, 76, 0.15); +} + +@media (max-width: 600px) { + .section-share-inner { + flex-direction: column; + text-align: center; + gap: 1.75rem; + } + + .share-text .section-heading { + text-align: center; + } +} + .section-home-jump { background: var(--brand-black); border-top: 1px solid rgba(201, 168, 76, 0.16); diff --git a/src/App.tsx b/src/App.tsx index 82e89a7..a178591 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -746,6 +746,40 @@ function DownloadDetailPage({ content }: { content: SiteContent }) { ) } +function ShareShowButton() { + const [feedback, setFeedback] = useState('') + + async function handleShare() { + const shareUrl = window.location.origin + const shareTitle = 'Verse by Verse with Nate' + const shareText = 'Check out Verse by Verse with Nate.' + try { + if (navigator.share) { + await navigator.share({ title: shareTitle, text: shareText, url: shareUrl }) + setFeedback('Shared successfully.') + return + } + if (navigator.clipboard?.writeText) { + await navigator.clipboard.writeText(shareUrl) + setFeedback('Link copied. Share it with a friend.') + return + } + setFeedback(`Copy this link: ${shareUrl}`) + } catch { + setFeedback('Share canceled.') + } + } + + return ( +
{feedback}
} +{content.shareP || 'Scan the QR code or text the show link to a friend who needs encouragement today.'}
+
+