Enhance contact CTA prominence and copy clarity
This commit is contained in:
+20
@@ -521,6 +521,15 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contact-copy .contact-highlight {
|
||||
font-size: clamp(1.25rem, 2.2vw, 1.65rem);
|
||||
line-height: 1.35;
|
||||
font-weight: 600;
|
||||
color: #f0e6d0;
|
||||
margin: 0 0 0.6rem;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
background: #121212;
|
||||
border: 1px solid rgba(200, 134, 10, 0.22);
|
||||
@@ -1183,6 +1192,17 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.footer-response {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
color: #cdb483;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.footer-links--legal {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.consent-banner {
|
||||
position: fixed;
|
||||
left: 1rem;
|
||||
|
||||
+53
-5
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Routes, Route, useNavigate } from 'react-router-dom'
|
||||
import { Link, Routes, Route, useNavigate } from 'react-router-dom'
|
||||
import AdminPage from './AdminPage'
|
||||
import './App.css'
|
||||
|
||||
@@ -73,8 +73,8 @@ export const DEFAULTS: SiteContent = {
|
||||
studyGuideDescription:
|
||||
'Go deeper in your study with the official Verse by Verse companion guide — now available on Amazon.',
|
||||
studyGuideUrl: 'https://a.co/d/01sG2tOJ',
|
||||
shareHeading: "Know someone who'd love this?",
|
||||
shareP: 'Scan the QR code or share the link to introduce a friend to Verse by Verse with Nate.',
|
||||
shareHeading: 'Help one more person hear the Word this week.',
|
||||
shareP: 'Scan the QR code or text the show link to a friend who needs encouragement today.',
|
||||
customLinks: [],
|
||||
customBlocks: [],
|
||||
}
|
||||
@@ -455,9 +455,10 @@ function LandingPage({ content }: { content: SiteContent }) {
|
||||
<h2 className="section-heading">
|
||||
<span className="ornament">✦</span> Contact Nate <span className="ornament">✦</span>
|
||||
</h2>
|
||||
<p>
|
||||
Have a question, testimony, or topic request? Send a message and we will get back to you.
|
||||
<p className="contact-highlight">
|
||||
Ask a Bible question, share a testimony, or request a topic for a future episode.
|
||||
</p>
|
||||
<p>We usually respond within 48 hours.</p>
|
||||
</div>
|
||||
<ContactForm />
|
||||
</div>
|
||||
@@ -501,6 +502,7 @@ function LandingPage({ content }: { content: SiteContent }) {
|
||||
Contact:{' '}
|
||||
<a href="mailto:hello@versebyversewithnate.us">hello@versebyversewithnate.us</a>
|
||||
</p>
|
||||
<p className="footer-response">We usually reply within 48 hours.</p>
|
||||
<nav className="footer-links" aria-label="Footer links">
|
||||
<a href={SPOTIFY_SHOW_URL} target="_blank" rel="noreferrer">Spotify</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
@@ -518,6 +520,11 @@ function LandingPage({ content }: { content: SiteContent }) {
|
||||
<a key={l.id} href={l.url} target="_blank" rel="noreferrer">{l.label}</a>,
|
||||
])}
|
||||
</nav>
|
||||
<nav className="footer-links footer-links--legal" aria-label="Legal links">
|
||||
<Link to="/privacy">Privacy Policy</Link>
|
||||
<span aria-hidden="true">·</span>
|
||||
<Link to="/terms">Terms</Link>
|
||||
</nav>
|
||||
<p className="footer-copy">© 2026 Nate Emmert · Made with faith.</p>
|
||||
<p className="footer-privacy">
|
||||
Privacy: with consent, analytics may store masked IP-based location data (country/state/county/city) and returning visitor activity.
|
||||
@@ -565,6 +572,21 @@ function ThankYouPage() {
|
||||
)
|
||||
}
|
||||
|
||||
function LegalPage({ title, body }: { title: string; body: string[] }) {
|
||||
return (
|
||||
<main className="thanks-page" aria-label={title}>
|
||||
<div className="thanks-card">
|
||||
<p className="eyebrow">Verse by Verse with Nate</p>
|
||||
<h1>{title}</h1>
|
||||
{body.map((line, idx) => (
|
||||
<p key={`${title}-${idx}`}>{line}</p>
|
||||
))}
|
||||
<Link to="/" className="btn-primary">Back to Site</Link>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [content, setContent] = useState<SiteContent>(DEFAULTS)
|
||||
|
||||
@@ -584,6 +606,32 @@ export default function App() {
|
||||
<Route path="/" element={<LandingPage content={content} />} />
|
||||
<Route path="/thanks" element={<ThankYouPage />} />
|
||||
<Route path="/admin" element={<AdminPage content={content} onSave={setContent} />} />
|
||||
<Route
|
||||
path="/privacy"
|
||||
element={(
|
||||
<LegalPage
|
||||
title="Privacy Policy"
|
||||
body={[
|
||||
'We respect your privacy and collect limited data to operate and improve this site.',
|
||||
'If you consent to analytics cookies, we may store masked IP-based location signals and returning visitor activity.',
|
||||
'Contact form details are used only to respond to your message and ministry communication requests.',
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path="/terms"
|
||||
element={(
|
||||
<LegalPage
|
||||
title="Terms"
|
||||
body={[
|
||||
'Content on this site is for informational and ministry purposes.',
|
||||
'External links are provided for convenience and are subject to third-party policies.',
|
||||
'By using this site, you agree to lawful use and respectful communication.',
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user