Enhance contact CTA prominence and copy clarity
This commit is contained in:
+20
@@ -521,6 +521,15 @@
|
|||||||
padding: 0;
|
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 {
|
.contact-form {
|
||||||
background: #121212;
|
background: #121212;
|
||||||
border: 1px solid rgba(200, 134, 10, 0.22);
|
border: 1px solid rgba(200, 134, 10, 0.22);
|
||||||
@@ -1183,6 +1192,17 @@
|
|||||||
margin-right: auto;
|
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 {
|
.consent-banner {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
|
|||||||
+53
-5
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react'
|
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 AdminPage from './AdminPage'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
@@ -73,8 +73,8 @@ export const DEFAULTS: SiteContent = {
|
|||||||
studyGuideDescription:
|
studyGuideDescription:
|
||||||
'Go deeper in your study with the official Verse by Verse companion guide — now available on Amazon.',
|
'Go deeper in your study with the official Verse by Verse companion guide — now available on Amazon.',
|
||||||
studyGuideUrl: 'https://a.co/d/01sG2tOJ',
|
studyGuideUrl: 'https://a.co/d/01sG2tOJ',
|
||||||
shareHeading: "Know someone who'd love this?",
|
shareHeading: 'Help one more person hear the Word this week.',
|
||||||
shareP: 'Scan the QR code or share the link to introduce a friend to Verse by Verse with Nate.',
|
shareP: 'Scan the QR code or text the show link to a friend who needs encouragement today.',
|
||||||
customLinks: [],
|
customLinks: [],
|
||||||
customBlocks: [],
|
customBlocks: [],
|
||||||
}
|
}
|
||||||
@@ -455,9 +455,10 @@ function LandingPage({ content }: { content: SiteContent }) {
|
|||||||
<h2 className="section-heading">
|
<h2 className="section-heading">
|
||||||
<span className="ornament">✦</span> Contact Nate <span className="ornament">✦</span>
|
<span className="ornament">✦</span> Contact Nate <span className="ornament">✦</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p className="contact-highlight">
|
||||||
Have a question, testimony, or topic request? Send a message and we will get back to you.
|
Ask a Bible question, share a testimony, or request a topic for a future episode.
|
||||||
</p>
|
</p>
|
||||||
|
<p>We usually respond within 48 hours.</p>
|
||||||
</div>
|
</div>
|
||||||
<ContactForm />
|
<ContactForm />
|
||||||
</div>
|
</div>
|
||||||
@@ -501,6 +502,7 @@ function LandingPage({ content }: { content: SiteContent }) {
|
|||||||
Contact:{' '}
|
Contact:{' '}
|
||||||
<a href="mailto:hello@versebyversewithnate.us">hello@versebyversewithnate.us</a>
|
<a href="mailto:hello@versebyversewithnate.us">hello@versebyversewithnate.us</a>
|
||||||
</p>
|
</p>
|
||||||
|
<p className="footer-response">We usually reply within 48 hours.</p>
|
||||||
<nav className="footer-links" aria-label="Footer links">
|
<nav className="footer-links" aria-label="Footer links">
|
||||||
<a href={SPOTIFY_SHOW_URL} target="_blank" rel="noreferrer">Spotify</a>
|
<a href={SPOTIFY_SHOW_URL} target="_blank" rel="noreferrer">Spotify</a>
|
||||||
<span aria-hidden="true">·</span>
|
<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>,
|
<a key={l.id} href={l.url} target="_blank" rel="noreferrer">{l.label}</a>,
|
||||||
])}
|
])}
|
||||||
</nav>
|
</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-copy">© 2026 Nate Emmert · Made with faith.</p>
|
||||||
<p className="footer-privacy">
|
<p className="footer-privacy">
|
||||||
Privacy: with consent, analytics may store masked IP-based location data (country/state/county/city) and returning visitor activity.
|
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() {
|
export default function App() {
|
||||||
const [content, setContent] = useState<SiteContent>(DEFAULTS)
|
const [content, setContent] = useState<SiteContent>(DEFAULTS)
|
||||||
|
|
||||||
@@ -584,6 +606,32 @@ export default function App() {
|
|||||||
<Route path="/" element={<LandingPage content={content} />} />
|
<Route path="/" element={<LandingPage content={content} />} />
|
||||||
<Route path="/thanks" element={<ThankYouPage />} />
|
<Route path="/thanks" element={<ThankYouPage />} />
|
||||||
<Route path="/admin" element={<AdminPage content={content} onSave={setContent} />} />
|
<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>
|
</Routes>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user