About page redesign: photo + bio intro with actions, compact about-the-show card, where-to-start links, testimonials before the support card; v2.28.0
Publish Container / build (push) Successful in 15m26s
Publish Container / build (push) Successful in 15m26s
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed
1 parent
3cf7e02561
commit
2c342f14bd
4 files changed
+115
-138
No files matched your search
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "siteforge",
|
||||
"version": "2.27.0",
|
||||
"version": "2.28.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "siteforge",
|
||||
"version": "2.27.0",
|
||||
"version": "2.28.0",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.1135.0",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "siteforge",
|
||||
"private": true,
|
||||
"version": "2.27.0",
|
||||
"version": "2.28.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
+72
-118
@@ -978,124 +978,35 @@
|
||||
}
|
||||
|
||||
/* ── About ── */
|
||||
.section-about {
|
||||
background: #0d0d0d;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-about .section-inner {
|
||||
max-width: 1160px;
|
||||
}
|
||||
|
||||
.about-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(340px, 420px) 1fr;
|
||||
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:
|
||||
0 12px 50px rgba(0, 0, 0, 0.55),
|
||||
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);
|
||||
color: var(--brand-warm-white);
|
||||
margin: 0.5rem 0 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.about-text 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ── Homepage Newsletter ── */
|
||||
.section-newsletter {
|
||||
@@ -7667,15 +7578,9 @@ a.study-track-card:hover {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.about-photo {
|
||||
max-width: 260px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.series-card {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -13500,9 +13405,7 @@ a.study-track-card:hover {
|
||||
}
|
||||
|
||||
/* About copy was set larger than body text everywhere else */
|
||||
.about-inner p {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
|
||||
/* Nothing readable below 12px */
|
||||
.study-module-lesson,
|
||||
@@ -13553,9 +13456,7 @@ a.study-track-card:hover {
|
||||
font-size: clamp(1.4rem, 2.4vw, 1.625rem);
|
||||
}
|
||||
|
||||
.about-inner p {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ── Resources page (tabs + compact grids) ─────────────────────────────── */
|
||||
@@ -13750,3 +13651,56 @@ a.study-track-card:hover {
|
||||
.cx-row { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
|
||||
/* ── About page ────────────────────────────────────────────────────────── */
|
||||
.ab-section { padding: 2.5rem 0 1.5rem; }
|
||||
.ab-intro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
|
||||
.ab-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--brand-gold-dark); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); }
|
||||
.ab-intro-copy { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
|
||||
.ab-intro-copy .eyebrow { margin: 0; }
|
||||
.ab-bio { margin: 0; font-size: 1.1rem; line-height: 1.75; color: var(--brand-warm-white); max-width: 60ch; }
|
||||
.ab-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
|
||||
|
||||
.ab-show {
|
||||
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2.5rem; align-items: center;
|
||||
margin-top: 3rem; padding: 2rem; border-radius: 16px;
|
||||
background: var(--brand-black-3); border: 1px solid var(--brand-border);
|
||||
}
|
||||
.ab-show-copy { display: flex; flex-direction: column; gap: 0.8rem; }
|
||||
.ab-show-copy .eyebrow { margin: 0; }
|
||||
#root > :not(.admin-shell) .ab-show-copy h2 { margin: 0; line-height: 1.15; }
|
||||
.ab-show-copy p:not(.eyebrow) { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--brand-muted); max-width: 60ch; }
|
||||
.ab-verse-art { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
|
||||
|
||||
.ab-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
|
||||
.ab-path {
|
||||
display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem; text-decoration: none; color: inherit;
|
||||
background: transparent; border: 1px solid var(--brand-border); border-radius: 12px;
|
||||
transition: border-color 150ms, transform 150ms;
|
||||
}
|
||||
.ab-path:hover { border-color: var(--brand-gold-dark); transform: translateY(-2px); }
|
||||
.ab-path-title { font-family: var(--brand-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--brand-warm-white); }
|
||||
.ab-path-text { font-size: 0.92rem; line-height: 1.5; color: var(--brand-muted); }
|
||||
.ab-path-go { margin-top: 0.2rem; font-size: 0.85rem; color: var(--brand-gold); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.ab-intro { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.75rem; }
|
||||
.ab-show { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
|
||||
.ab-verse-art { max-width: 420px; justify-self: center; }
|
||||
.ab-paths { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
|
||||
.ab-path { padding: 0.9rem 1rem; }
|
||||
.ab-path-go { display: none; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.ab-section { padding: 1.5rem 0 1rem; }
|
||||
.ab-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
|
||||
.ab-photo { max-width: 200px; aspect-ratio: 1 / 1; }
|
||||
.ab-bio { font-size: 1.02rem; }
|
||||
.ab-show { margin-top: 2rem; padding: 1.15rem; gap: 1.25rem; }
|
||||
.ab-cta-row .btn-primary, .ab-cta-row .btn-secondary { flex: 1 1 100%; justify-content: center; text-align: center; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.section-testimonials { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.cx-support { padding-bottom: 2rem; }
|
||||
}
|
||||
|
||||
+40
-17
@@ -666,31 +666,54 @@ function KofiSupportSection({ content }: { content: SiteContent }) {
|
||||
}
|
||||
|
||||
function AboutSection({ content }: { content: SiteContent }) {
|
||||
const paths = [
|
||||
{ to: '/start-here', title: 'New here?', text: 'A short path through the show, one step at a time.' },
|
||||
{ to: '/episodes', title: 'Listen', text: 'Every episode, newest first.' },
|
||||
{ to: '/study', title: 'Study with us', text: 'Self-paced Bible studies with notes and discussion.' },
|
||||
]
|
||||
return (
|
||||
<section className="section-about" aria-label="About the show">
|
||||
<div className="section-inner about-inner">
|
||||
<div className="about-photo">
|
||||
<img src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'} alt="Nate Emmert" />
|
||||
<div className="about-photo-divider" aria-hidden="true" />
|
||||
<div className="about-nate-copy">
|
||||
<section className="ab-section" aria-label="About the show">
|
||||
<div className="section-inner">
|
||||
<div className="ab-intro">
|
||||
<img
|
||||
src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'}
|
||||
alt="Nate Emmert"
|
||||
className="ab-photo"
|
||||
/>
|
||||
<div className="ab-intro-copy">
|
||||
<p className="eyebrow">{content.aboutEyebrow || 'About Nate'}</p>
|
||||
<div className="about-nate-rule" aria-hidden="true" />
|
||||
<p>{content.aboutNate}</p>
|
||||
<Link to="/episodes" className="about-nate-cta">{content.aboutListenBtnLabel || 'Listen Now ↓'}</Link>
|
||||
<p className="ab-bio">{content.aboutNate}</p>
|
||||
<div className="ab-cta-row">
|
||||
<Link to="/episodes" className="btn-primary">{content.aboutListenBtnLabel || 'Listen Now ↓'}</Link>
|
||||
<Link to="/start-here" className="btn-secondary">New here? Start here</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-text">
|
||||
{content.aboutShowEyebrow && <p className="eyebrow">{content.aboutShowEyebrow}</p>}
|
||||
<h2>{content.aboutShowHeading}</h2>
|
||||
<p>{content.aboutShowP1}</p>
|
||||
<p>{content.aboutShowP2}</p>
|
||||
<div className="rule-divider" aria-hidden="true" />
|
||||
|
||||
<div className="ab-show">
|
||||
<div className="ab-show-copy">
|
||||
{content.aboutShowEyebrow && <p className="eyebrow">{content.aboutShowEyebrow}</p>}
|
||||
<h2>{content.aboutShowHeading}</h2>
|
||||
<p>{content.aboutShowP1}</p>
|
||||
<p>{content.aboutShowP2}</p>
|
||||
</div>
|
||||
<img
|
||||
src={content.aboutVerseArtUrl || '/images/hebrews-4-12-verse-art.png'}
|
||||
alt="Hebrews 4:12 verse artwork"
|
||||
className="about-verse-art"
|
||||
className="ab-verse-art"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ab-paths">
|
||||
{paths.map(p => (
|
||||
<Link key={p.to} to={p.to} className="ab-path">
|
||||
<span className="ab-path-title">{p.title}</span>
|
||||
<span className="ab-path-text">{p.text}</span>
|
||||
<span className="ab-path-go">Go →</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
@@ -2496,8 +2519,8 @@ function AboutPage({ content }: { content: SiteContent }) {
|
||||
<SiteSearchBar content={content} />
|
||||
<PageBanner eyebrow="About" title="About the Show" />
|
||||
<AboutSection content={content} />
|
||||
<KofiSupportSection content={content} />
|
||||
<TestimonialsSection testimonials={content.testimonials ?? []} />
|
||||
<KofiSupportSection content={content} />
|
||||
<CustomBlocksSection content={content} page="about" />
|
||||
<SiteFooter content={content} />
|
||||
<AnalyticsConsentBanner content={content} />
|
||||
|
||||
Reference in new issue
Block a user