diff --git a/public/images/PRISM.mp4 b/public/images/PRISM.mp4 new file mode 100644 index 0000000..5c9fbf5 Binary files /dev/null and b/public/images/PRISM.mp4 differ diff --git a/src/AdminPage.tsx b/src/AdminPage.tsx index 3a1f662..01d2b43 100644 --- a/src/AdminPage.tsx +++ b/src/AdminPage.tsx @@ -189,7 +189,7 @@ type AdminView = | 'emails' | 'subscribers' | 'contacts' | 'seo' | 'legal' | 'security' | 'brand' | 'global' -type MainContentSection = 'hero' | 'start-here' | 'about' | 'contact' | 'series' | 'share' | 'global' +type MainContentSection = 'hero' | 'start-here' | 'about' | 'contact' | 'series' | 'share' | 'prism' | 'global' const BRAND_KIT_SWATCHES = [ { name: 'Rich Black', hex: '#0a0a08', role: 'Primary background' }, @@ -276,6 +276,18 @@ const FIELDS: Array<{ key: StringField; label: string; multiline?: boolean; sect { key: 'studyGuideUrl', label: 'Study Guide URL (Amazon link)', section: 'series' }, { key: 'shareHeading', label: 'Share Section — Heading', section: 'share' }, { key: 'shareP', label: 'Share Section — Paragraph', multiline: true, section: 'share' }, + { key: 'prismVideoUrl', label: 'PRISM — Video URL', section: 'prism' }, + { key: 'prismEyebrow', label: 'PRISM — Eyebrow', section: 'prism' }, + { key: 'prismHeading', label: 'PRISM — Heading', section: 'prism' }, + { key: 'prismIntro', label: 'PRISM — Intro Text', multiline: true, section: 'prism' }, + { key: 'prismPatternIntro', label: 'PRISM — Pattern Intro', multiline: true, section: 'prism' }, + { key: 'prismStep1', label: 'PRISM — Step 1', section: 'prism' }, + { key: 'prismStep2', label: 'PRISM — Step 2', section: 'prism' }, + { key: 'prismStep3', label: 'PRISM — Step 3', section: 'prism' }, + { key: 'prismStep4', label: 'PRISM — Step 4', section: 'prism' }, + { key: 'prismStep5', label: 'PRISM — Step 5', section: 'prism' }, + { key: 'prismOutro', label: 'PRISM — Outro Text', multiline: true, section: 'prism' }, + { key: 'prismClosing', label: 'PRISM — Closing Line', multiline: true, section: 'prism' }, // Global / Footer / Platform { key: 'footerTitle', label: 'Footer — Brand Title', section: 'global' }, { key: 'footerSubtitle', label: 'Footer — Subtitle', section: 'global' }, @@ -2457,9 +2469,9 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {

Homepage

-

Controls the hero, button labels, share section, and "Where to Next" navigation cards.

+

Controls the hero, share section, PRISM video block, and "Where to Next" navigation cards.

- {FIELDS.filter(f => f.section === 'hero' || f.section === 'share').map(({ key, label, multiline }) => ( + {FIELDS.filter(f => f.section === 'hero' || f.section === 'share' || f.section === 'prism').map(({ key, label, multiline }) => (
{multiline diff --git a/src/App.css b/src/App.css index 28089b7..5ed72c7 100644 --- a/src/App.css +++ b/src/App.css @@ -307,6 +307,94 @@ font-style: normal; } +/* ── PRISM ── */ +.section-prism { + background: + radial-gradient(circle at top, rgba(201, 168, 76, 0.12), transparent 46%), + linear-gradient(180deg, rgba(13, 13, 11, 0.98), rgba(7, 7, 7, 1)); + border-bottom: 1px solid rgba(201, 168, 76, 0.12); + padding: 5rem 0; +} + +.prism-feature { + max-width: 1280px; + display: grid; + grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); + gap: 2.5rem; + align-items: center; +} + +.prism-copy { + max-width: 36rem; + width: 100%; + justify-self: start; + text-align: left; +} + +.prism-copy .eyebrow { + margin-bottom: 0.8rem; +} + +.prism-heading { + text-align: left; + margin-bottom: 1rem; +} + +.prism-description { + color: rgba(255, 255, 255, 0.72); + line-height: 1.7; + margin: 0 0 1rem; +} + +.prism-steps { + display: grid; + gap: 0.55rem; + margin: 1.35rem 0 1.3rem; +} + +.prism-steps p { + margin: 0; + padding: 0.7rem 0.85rem; + border-radius: 12px; + border: 1px solid rgba(201, 168, 76, 0.18); + background: rgba(201, 168, 76, 0.05); + color: var(--brand-warm-white); + font-family: var(--brand-font-body); + font-size: 0.93rem; + letter-spacing: 0.03em; +} + +.prism-steps strong { + color: var(--brand-gold); + font-weight: 700; +} + +.prism-emphasis { + color: var(--brand-warm-white); + font-weight: 600; +} + +.prism-video-shell { + position: relative; + width: 100%; + max-width: none; + border-radius: 18px; + padding: 0.75rem; + background: linear-gradient(180deg, rgba(201, 168, 76, 0.14), rgba(255, 255, 255, 0.02)); + box-shadow: + 0 0 0 1px rgba(201, 168, 76, 0.18), + 0 18px 70px rgba(0, 0, 0, 0.45); +} + +.prism-video { + display: block; + width: 100%; + aspect-ratio: 16 / 9; + border: 0; + border-radius: 12px; + background: #000; +} + /* ── Player ── */ .section-player { background: #070707; @@ -3797,6 +3885,25 @@ max-width: 280px; } + .prism-feature { + grid-template-columns: 1fr; + gap: 1.2rem; + } + + .prism-heading { + text-align: center; + } + + .prism-copy { + max-width: none; + text-align: center; + justify-self: stretch; + } + + .prism-steps { + text-align: left; + } + .hero-title { white-space: normal; } diff --git a/src/App.tsx b/src/App.tsx index 01e1de6..f65ce25 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -990,6 +990,49 @@ function LandingPage({ content }: { content: SiteContent }) {
+
+
+
+ +
+ +
+

{content.prismEyebrow || 'Featured Video'}

+

+ {content.prismHeading || 'PRISM'} +

+

+ {content.prismIntro || 'What if every time you opened your Bible, you had a clear, repeatable method to actually dig in?'} +

+

+ {content.prismPatternIntro || 'In this bonus episode, I walk you through P.R.I.S.M. — a five-step daily Bible study pattern designed to help you slow down, go deep, and let the Word do its work.'} +

+
+

{content.prismStep1 || 'P — Pray before you read'}

+

{content.prismStep2 || 'R — Read slowly and observe'}

+

{content.prismStep3 || 'I — Interpret with context'}

+

{content.prismStep4 || 'S — Study and apply specifically'}

+

{content.prismStep5 || 'M — Memorize one verse at a time'}

+
+

+ {content.prismOutro || "Whether you're brand new to daily Bible reading or you've been at it for years, P.R.I.S.M. gives you a consistent framework for every passage, every day."} +

+

+ {content.prismClosing || "The goal isn't to get through the text — it's to let the text get through to you."} +

+
+
+
+

diff --git a/src/content.ts b/src/content.ts index 21e8c43..0b9ce54 100644 --- a/src/content.ts +++ b/src/content.ts @@ -174,6 +174,19 @@ export interface SiteContent { // ── Share ── shareHeading: string shareP: string + // ── PRISM Video ── + prismVideoUrl: string + prismEyebrow: string + prismHeading: string + prismIntro: string + prismPatternIntro: string + prismStep1: string + prismStep2: string + prismStep3: string + prismStep4: string + prismStep5: string + prismOutro: string + prismClosing: string // ── Homepage navigation cards ── whereToNextEyebrow: string whereToNextHeading: string @@ -319,6 +332,21 @@ export const DEFAULTS: SiteContent = { colossiansStudySections: DEFAULT_COLOSSIANS_STUDY_SECTIONS, 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.', + prismVideoUrl: '/images/PRISM.mp4', + prismEyebrow: 'Featured Video', + prismHeading: 'PRISM', + prismIntro: + 'What if every time you opened your Bible, you had a clear, repeatable method to actually dig in?', + prismPatternIntro: + 'In this bonus episode, I walk you through P.R.I.S.M. — a five-step daily Bible study pattern designed to help you slow down, go deep, and let the Word do its work.', + prismStep1: 'P — Pray before you read', + prismStep2: 'R — Read slowly and observe', + prismStep3: 'I — Interpret with context', + prismStep4: 'S — Study and apply specifically', + prismStep5: 'M — Memorize one verse at a time', + prismOutro: + "Whether you're brand new to daily Bible reading or you've been at it for years, P.R.I.S.M. gives you a consistent framework for every passage, every day.", + prismClosing: "The goal isn't to get through the text - it's to let the text get through to you.", whereToNextEyebrow: 'Where to Next', whereToNextHeading: 'Choose the page you need.', whereToNextCards: [