Polish About, forms, and share/contact UI

data/admin-content.json

@@ -5,7 +5,7 @@
     "aboutShowHeading": "Depth. Clarity. Application.",
     "aboutShowP1": "Verse by Verse with Nate walks through Scripture passage by passage — unpacking the original context, drawing out the meaning, and connecting each verse to how we live today.",
     "aboutShowP2": "Whether you're in the car, at the gym, or just looking for something to anchor your day, each episode is designed to feed your faith with solid, practical teaching.",
-    "aboutNate": "Nate Emmert is a husband, dad, and lifelong student of the Bible from Lynchburg, Va. He created Verse by Verse to share the joy of deep Scripture study in a format anyone can follow along with — no seminary required.",
+    "aboutNate": "Nate Emmert is a husband, dad, and lifelong student of the Bible from Lynchburg, Va. He's not a pastor or a professor — just someone who fell in love with digging into Scripture and wanted to bring others along for the journey. He created Verse by Verse to make deep Bible study accessible to anyone, whether you've read the Bible your whole life or you're just getting started. No seminary required. No prior knowledge assumed. Just the Word, unpacked verse by verse.",
     "seriesLabel": "Now Playing",
     "seriesTitle": "Study of Titus: Sound Doctrine",
     "seriesDescription": "A deep-dive into Paul's letter to Titus — unpacking what it means to build a church and a life on sound doctrine.",

src/App.css

@@ -96,11 +96,17 @@
 .art-glow {
   position: absolute;
   inset: -44%;
-  background: radial-gradient(ellipse, rgba(201, 168, 76, 0.42) 0%, rgba(201, 168, 76, 0.16) 44%, transparent 72%);
+  background: radial-gradient(
+    ellipse,
+    rgba(201, 168, 76, 0.58) 0%,
+    rgba(201, 168, 76, 0.3) 34%,
+    rgba(201, 168, 76, 0.1) 58%,
+    transparent 78%
+  );
   z-index: 0;
   border-radius: 50%;
   pointer-events: none;
-  filter: blur(12px);
+  filter: blur(18px) saturate(112%);
   animation: glow-pulse 4s ease-in-out infinite;
 }
 
@@ -429,14 +435,25 @@
   padding: 5rem 0;
 }
 
+.section-about .section-inner {
+  max-width: 1160px;
+}
+
 .about-inner {
   display: grid;
-  grid-template-columns: 360px 1fr;
+  grid-template-columns: minmax(340px, 420px) 1fr;
-  gap: 4rem;
+  gap: 4.5rem;
   align-items: start;
 }
 
+.about-photo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .about-photo img {
+  display: block;
   width: 100%;
   border-radius: 14px;
   box-shadow:
@@ -444,6 +461,75 @@
     0 0 0 1px rgba(201, 168, 76, 0.15);
 }
 
+.about-photo-divider {
+  width: 86%;
+  height: 1px;
+  margin: 0.3rem auto 0.45rem;
+  background: linear-gradient(
+    90deg,
+    rgba(201, 168, 76, 0),
+    rgba(201, 168, 76, 0.6) 20%,
+    rgba(201, 168, 76, 0.9) 50%,
+    rgba(201, 168, 76, 0.6) 80%,
+    rgba(201, 168, 76, 0)
+  );
+}
+
+.about-nate-copy {
+  padding: 0;
+}
+
+.about-nate-copy .eyebrow {
+  margin-bottom: 0.3rem;
+}
+
+.about-nate-rule {
+  width: 170px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--brand-gold), rgba(201, 168, 76, 0.18));
+  margin-bottom: 0.8rem;
+}
+
+.about-nate-copy p {
+  font-family: var(--brand-font-body);
+  font-weight: 400;
+  font-size: 1.2rem;
+  line-height: 1.7;
+  color: var(--brand-warm-white);
+  margin: 0 0 1rem;
+  padding: 0;
+  opacity: 0.9;
+}
+
+.about-nate-cta {
+  display: inline-block;
+  font-family: var(--brand-font-body);
+  font-size: 0.95rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--brand-gold);
+  text-decoration: none;
+  margin-top: 0.35rem;
+  padding-bottom: 0.1rem;
+  border-bottom: 1px solid rgba(201, 168, 76, 0.45);
+  transition: color 180ms ease, border-color 180ms ease;
+}
+
+.about-nate-cta:hover {
+  color: var(--brand-warm-white);
+  border-bottom-color: rgba(246, 232, 186, 0.85);
+}
+
+.about-verse-art {
+  display: block;
+  width: 100%;
+  margin-top: 1.1rem;
+  border-radius: 14px;
+  box-shadow:
+    0 12px 50px rgba(0, 0, 0, 0.55),
+    0 0 0 1px rgba(201, 168, 76, 0.15);
+}
+
 .about-text h2 {
   font-family: var(--brand-font-heading);
   font-size: clamp(1.8rem, 3vw, 2.4rem);
@@ -669,13 +755,24 @@
   padding: 5rem 0;
 }
 
+.section-qr .section-inner {
+  max-width: 1080px;
+}
+
 .qr-inner {
   display: grid;
   grid-template-columns: 1fr auto;
-  gap: 4rem;
+  gap: 4.5rem;
   align-items: center;
 }
 
+.qr-text {
+  background: linear-gradient(180deg, rgba(17, 17, 17, 0.92), rgba(11, 11, 11, 0.94));
+  border: 1px solid rgba(201, 168, 76, 0.22);
+  border-radius: 16px;
+  padding: 2rem 2.1rem;
+}
+
 .qr-text h2 {
   font-family: var(--brand-font-heading);
   font-size: clamp(1.6rem, 2.5vw, 2.2rem);
@@ -716,6 +813,11 @@
 .qr-code-wrap {
   text-align: center;
   flex-shrink: 0;
+  background: rgba(16, 16, 16, 0.9);
+  border: 1px solid rgba(201, 168, 76, 0.22);
+  border-radius: 16px;
+  padding: 1.35rem 1.2rem 1rem;
+  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.38);
 }
 
 .qr-frame {
@@ -877,13 +979,16 @@
 }
 
 .contact-profile-photo {
-  width: 72px;
+  width: 108px;
-  height: 72px;
+  height: 108px;
   border-radius: 999px;
   object-fit: cover;
-  object-position: top;
+  object-position: center 22%;
   border: 2px solid var(--brand-gold);
   flex-shrink: 0;
+  box-shadow:
+    0 0 0 4px rgba(201, 168, 76, 0.16),
+    0 10px 28px rgba(0, 0, 0, 0.42);
 }
 
 .contact-profile-name {
@@ -989,8 +1094,8 @@
 .contact-form input,
 .contact-form textarea,
 .contact-form select {
-  background: #0c0c0c;
+  background: #090909;
-  border: 1px solid rgba(201, 168, 76, 0.25);
+  border: 1px solid rgba(201, 168, 76, 0.38);
   border-radius: 8px;
   color: var(--brand-warm-white);
   font-family: var(--brand-font-body);
@@ -998,12 +1103,34 @@
   font-weight: 300;
   padding: 0.7rem 0.85rem;
   outline: none;
-  transition: border-color 200ms;
+  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
 }
 
 .contact-form input:focus,
-.contact-form textarea:focus {
+.contact-form textarea:focus,
-  border-color: rgba(201, 168, 76, 0.7);
+.contact-form select:focus {
+  border-color: rgba(201, 168, 76, 0.85);
+  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
+}
+
+.contact-form input::placeholder,
+.contact-form textarea::placeholder {
+  color: rgba(214, 193, 140, 0.6);
+}
+
+.contact-form select {
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, rgba(201, 168, 76, 0.9) 50%),
+    linear-gradient(135deg, rgba(201, 168, 76, 0.9) 50%, transparent 50%);
+  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 2rem;
+}
+
+.contact-form select option {
+  background: #0b0b0b;
+  color: var(--brand-warm-white);
 }
 
 .contact-form textarea {
@@ -1387,8 +1514,8 @@
 }
 
 .study-download-form input {
-  background: #0c0c0c;
+  background: #090909;
-  border: 1px solid rgba(201, 168, 76, 0.25);
+  border: 1px solid rgba(201, 168, 76, 0.38);
   border-radius: 8px;
   color: var(--brand-warm-white);
   font-family: var(--brand-font-body);
@@ -1396,11 +1523,26 @@
   font-weight: 300;
   padding: 0.7rem 0.85rem;
   outline: none;
-  transition: border-color 200ms;
+  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
 }
 
 .study-download-form input:focus {
-  border-color: rgba(201, 168, 76, 0.7);
+  border-color: rgba(201, 168, 76, 0.85);
+  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
+}
+
+.study-download-form input::placeholder {
+  color: rgba(214, 193, 140, 0.6);
+}
+
+.contact-form input:-webkit-autofill,
+.contact-form textarea:-webkit-autofill,
+.contact-form select:-webkit-autofill,
+.study-download-form input:-webkit-autofill {
+  -webkit-text-fill-color: var(--brand-warm-white);
+  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
+  box-shadow: 0 0 0 1000px #0a0a0a inset;
+  transition: background-color 9999s ease-in-out 0s;
 }
 
 .study-download-form .btn-primary {

src/App.tsx

@@ -119,7 +119,7 @@ export const DEFAULTS: SiteContent = {
   aboutShowP2:
     "Whether you're in the car, at the gym, or just looking for something to anchor your day, each episode is designed to feed your faith with solid, practical teaching.",
   aboutNate:
-    'Nate Emmert is a husband, dad, and lifelong student of the Bible from Lynchburg, Va. He created Verse by Verse to share the joy of deep Scripture study in a format anyone can follow along with — no seminary required.',
+    "Nate Emmert is a husband, dad, and lifelong student of the Bible from Lynchburg, Va. He's not a pastor or a professor — just someone who fell in love with digging into Scripture and wanted to bring others along for the journey. He created Verse by Verse to make deep Bible study accessible to anyone, whether you've read the Bible your whole life or you're just getting started. No seminary required. No prior knowledge assumed. Just the Word, unpacked verse by verse.",
   seriesLabel: 'Now Playing',
   seriesTitle: 'Study of Titus: Sound Doctrine',
   seriesDescription:
@@ -862,6 +862,13 @@ function LandingPage({ content }: { content: SiteContent }) {
         <div className="section-inner about-inner">
           <div className="about-photo">
             <img src="/images/nate-photo.jpeg" alt="Nate Emmert" />
+            <div className="about-photo-divider" aria-hidden="true" />
+            <div className="about-nate-copy">
+              <p className="eyebrow">About Nate</p>
+              <div className="about-nate-rule" aria-hidden="true" />
+              <p>{content.aboutNate}</p>
+              <a href="#listen" className="about-nate-cta">Listen Now ↓</a>
+            </div>
           </div>
           <div className="about-text">
             <p className="eyebrow">About the Show</p>
@@ -869,8 +876,11 @@ function LandingPage({ content }: { content: SiteContent }) {
             <p>{content.aboutShowP1}</p>
             <p>{content.aboutShowP2}</p>
             <div className="rule-divider" aria-hidden="true" />
-            <p className="eyebrow">About Nate</p>
+            <img
-            <p>{content.aboutNate}</p>
+              src="/images/hebrews-4-12-verse-art.png"
+              alt="Hebrews 4:12 verse artwork"
+              className="about-verse-art"
+            />
           </div>
         </div>
       </section>
@@ -1094,7 +1104,7 @@ function LandingPage({ content }: { content: SiteContent }) {
               rel="noreferrer"
               className="btn-secondary"
             >
-              creators.spotify.com/pod/profile/nmemmert
+              Open Spotify Creator Profile
             </a>
             <ShareShowButton />
           </div>