Refine homepage sections and contact card design

src/App.tsx

@@ -640,6 +640,94 @@ function ShareShowButton() {
   )
 }
 
+interface Episode {
+  title: string
+  pubDate: string
+  link: string
+  description: string
+  duration: string
+  episode: string
+}
+
+function formatPubDate(raw: string): string {
+  try {
+    return new Date(raw).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+  } catch {
+    return raw
+  }
+}
+
+function LatestEpisodesList() {
+  const [episodes, setEpisodes] = useState<Episode[]>([])
+  const [loading, setLoading] = useState(true)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/episodes')
+      .then(r => (r.ok ? r.json() : Promise.reject(new Error('fetch failed'))))
+      .then((data: { episodes: Episode[] }) => {
+        if (data.episodes.length === 0) setFailed(true)
+        else setEpisodes(data.episodes)
+        setLoading(false)
+      })
+      .catch(() => {
+        setFailed(true)
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="episode-list-loading">
+        {[1, 2, 3].map(i => <div key={i} className="episode-skeleton" aria-hidden="true" />)}
+      </div>
+    )
+  }
+
+  if (failed) {
+    return (
+      <div className="embed-wrap">
+        <iframe
+          title="Verse by Verse with Nate"
+          src={SPOTIFY_EMBED_URL}
+          width="100%"
+          height="352"
+          frameBorder="0"
+          allowFullScreen
+          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+          loading="lazy"
+          style={{ borderRadius: '14px' }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="episode-list">
+      {episodes.map((ep, idx) => (
+        <a
+          key={idx}
+          href={ep.link || SPOTIFY_SHOW_URL}
+          target="_blank"
+          rel="noreferrer"
+          className="episode-card"
+        >
+          <div className="episode-card-meta">
+            {ep.episode && <span className="episode-number">Ep. {ep.episode}</span>}
+            {ep.pubDate && <span className="episode-date">{formatPubDate(ep.pubDate)}</span>}
+            {ep.duration && <span className="episode-duration">{ep.duration}</span>}
+          </div>
+          <h3 className="episode-title">{ep.title}</h3>
+          {ep.description && <p className="episode-desc">{ep.description}</p>}
+          <span className="episode-listen-cta">
+            <SpotifyIcon /> Listen →
+          </span>
+        </a>
+      ))}
+    </div>
+  )
+}
+
 function LandingPage({ content }: { content: SiteContent }) {
   const archivedSeries = content.archivedSeries ?? []
   const [seriesView, setSeriesView] = useState<'current' | 'archive'>('current')
@@ -739,19 +827,7 @@ function LandingPage({ content }: { content: SiteContent }) {
             <span className="ornament">✦</span> Latest Episodes{' '}
             <span className="ornament">✦</span>
           </h2>
-          <div className="embed-wrap">
-            <iframe
-              title="Verse by Verse with Nate"
-              src={SPOTIFY_EMBED_URL}
-              width="100%"
-              height="352"
-              frameBorder="0"
-              allowFullScreen
-              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-              loading="lazy"
-              style={{ borderRadius: '14px' }}
-            />
-          </div>
+          <LatestEpisodesList />
           <div className="platform-buttons">
             <a href={SPOTIFY_SHOW_URL} target="_blank" rel="noreferrer" className="platform-btn spotify-btn">
               <SpotifyIcon />
@@ -977,14 +1053,12 @@ function LandingPage({ content }: { content: SiteContent }) {
       {/* ── STUDY GUIDE ── */}
       <section className="section-guide" aria-label="Companion study guide">
         <div className="section-inner guide-inner">
-          <div className="guide-icon" aria-hidden="true">
-            <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect x="8" y="6" width="36" height="48" rx="3" fill="#c8860a" opacity="0.15" stroke="#c8860a" strokeWidth="1.5"/>
-              <rect x="14" y="6" width="36" height="48" rx="3" fill="#0f0f0f" stroke="#c8860a" strokeWidth="1.5"/>
-              <line x1="22" y1="22" x2="42" y2="22" stroke="#c8860a" strokeWidth="1.5" strokeLinecap="round"/>
-              <line x1="22" y1="30" x2="42" y2="30" stroke="#c8860a" strokeWidth="1.5" strokeLinecap="round" opacity="0.6"/>
-              <line x1="22" y1="38" x2="34" y2="38" stroke="#c8860a" strokeWidth="1.5" strokeLinecap="round" opacity="0.4"/>
-            </svg>
+          <div className="guide-cover-art">
+            <img
+              src={content.seriesImageUrl || '/images/titus-cover.png'}
+              alt={content.seriesTitle}
+              className="guide-cover-img"
+            />
           </div>
           <div className="guide-text">
             <p className="eyebrow">Free Download</p>
@@ -1044,14 +1118,53 @@ function LandingPage({ content }: { content: SiteContent }) {
       <section className="section-contact" id="contact" aria-label="Contact form">
         <div className="section-inner contact-inner">
           <div className="contact-copy">
-            <p className="eyebrow">Get in Touch</p>
-            <h2 className="section-heading">
-              <span className="ornament">✦</span> Contact Nate <span className="ornament">✦</span>
-            </h2>
-            <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 className="contact-card">
+              <p className="eyebrow">Get in Touch</p>
+              <h2>Contact Nate</h2>
+
+              <div className="contact-profile">
+                <img
+                  src="/images/nate-contact-photo.png"
+                  alt="Nate"
+                  className="contact-profile-photo"
+                />
+                <div className="contact-profile-meta">
+                  <p className="contact-profile-name">Nate</p>
+                  <p className="contact-profile-role">Bible teacher · Lynchburg, VA</p>
+                </div>
+              </div>
+
+              <blockquote className="contact-quote">
+                <p>"I read every message - nothing blesses me more than hearing how God's Word is at work in your life."</p>
+              </blockquote>
+
+              <p className="contact-intro">
+                Ask a Bible question, share a testimony, or request a topic for a future episode.
+              </p>
+
+              <div className="contact-points" aria-label="Contact response details">
+                <div className="contact-point">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                  </svg>
+                  <span>I read every message personally</span>
+                </div>
+                <div className="contact-point">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                  </svg>
+                  <span>Response within 48 hours</span>
+                </div>
+              </div>
+
+              <div className="contact-scripture">
+                <p>
+                  "Your word is a lamp to my feet and a light to my path." -{' '}
+                  <span className="contact-scripture-ref">Psalm 119:105</span>
+                </p>
+              </div>
+            </div>
           </div>
           <ContactForm />
         </div>