Knowledge > Products > Pro Website > Template System
Pro Website Template System
Architecture: One Template, Three Visual Families
Pro Website uses a single UnifiedTemplate (UnifiedTemplate.tsx, ~560 lines) to render every church's website. The template dynamically adapts its visual style based on the church's denomination. There is no template picker or manual style selector -- the system auto-detects the best visual family from the denomination string.
Why One Template, Not Three
An earlier iteration had three separate template components (CatholicLiturgicalTemplate, NondenominationalCommunityTemplate, ProtestantModernTemplate). These were consolidated into UnifiedTemplate because:
- Maintenance burden. Three templates meant every new feature (events, sermons, What to Expect) had to be implemented three times.
- Inconsistent quality. New features would land in one template first and the others would fall behind.
- Testing surface. Three templates tripled the QA effort for every release.
- Data model is identical. All denominations use the same JSONB fields in
premium_churches. The only differences are visual (colors, fonts, label text).
The legacy templates still exist in the codebase but are dead code. They are not imported or rendered anywhere. They should be removed in a future cleanup but are harmless.
Denomination Auto-Detection
The Detection Function: getStyleByDenomination()
Located in denomination-labels.ts, this function takes a denomination string and returns the visual family. Detection is substring-based (case-insensitive):
function getStyleByDenomination(denomination: string): DenominationFamily
INPUT: "Greek Orthodox"
OUTPUT: "liturgical"
INPUT: "Southern Baptist"
OUTPUT: "protestant"
INPUT: "Non-denominational"
OUTPUT: "community"
Family Assignment Rules
| Family | Substring Matches | Fallback |
|---|---|---|
liturgical | Orthodox, Greek Orthodox, Russian Orthodox, Serbian Orthodox, Romanian Orthodox, Coptic, Catholic, Roman Catholic, Episcopal, Anglican, Lutheran | -- |
community | Non-denominational, Nondenominational, Bible Church, Vineyard, Calvary Chapel, Independent, Interdenominational | -- |
protestant | Baptist, Methodist, Presbyterian, Pentecostal, Evangelical, Reformed, Church of God, Assemblies, Nazarene, Wesleyan, Mennonite, Brethren, Quaker, Adventist, Congregational, Disciples, UCC, AME, CME, COGIC | Default fallback |
If no substring matches, the function returns protestant as the default. This covers edge cases like uncommon denominations, typos, or empty strings.
Detection Priority
The function checks families in this order: liturgical first, community second, protestant last (as default). This matters because some denomination strings could theoretically match multiple families. The first match wins.
Example edge case: "Independent Catholic" would match liturgical (because "Catholic" is checked before "Independent" in the community list) since liturgical is checked first.
Visual Families
Liturgical Family
Designed for Catholic, Orthodox, Episcopal, Anglican, and Lutheran churches.
| Property | Value |
|---|---|
| Primary color | Amber (#D4AF37) |
| Accent color | Deep Gold (#B8860B) |
| Background | Dark stone textures, deep charcoal gradients |
| Heading font | Playfair Display (serif) |
| Body font | System serif stack |
| Hero overlay | Dark with golden accent border |
| Section dividers | Ornamental, subtle gold rules |
| Chatbot accent | Amber (#D4AF37) |
| Icon style | Traditional, ornate |
| Overall mood | Reverent, dignified, timeless |
The liturgical family evokes stained glass warmth and cathedral gravitas. Gold and amber dominate the accent palette, contrasting against dark backgrounds. Typography is serif-heavy, reinforcing tradition.
Protestant Family (Default)
Designed for Baptist, Methodist, Presbyterian, Pentecostal, Reformed, Evangelical, and all denominations not matched elsewhere.
| Property | Value |
|---|---|
| Primary color | Navy Blue (#1B365D) |
| Accent color | Royal Blue (#2563EB) |
| Background | White/light gray with blue gradient accents |
| Heading font | System sans-serif stack |
| Body font | System sans-serif stack |
| Hero overlay | Blue gradient, semi-transparent |
| Section dividers | Clean horizontal rules |
| Chatbot accent | Blue (#1B365D) |
| Icon style | Clean, professional |
| Overall mood | Trustworthy, clean, accessible |
The protestant family is the safe default -- professional, unassuming, broadly appropriate. Navy blue conveys trust and stability. Clean sans-serif typography keeps the focus on content.
Community Family
Designed for Non-denominational, Bible Church, Vineyard, Calvary Chapel, and Independent churches.
| Property | Value |
|---|---|
| Primary color | Orange (#E8751A) |
| Accent color | Warm Amber (#F59E0B) |
| Background | Warm cream, soft orange gradients |
| Heading font | Modern rounded sans-serif |
| Body font | System sans-serif stack |
| Hero overlay | Warm gradient, inviting opacity |
| Section dividers | Soft, rounded edges |
| Chatbot accent | Orange (#E8751A) |
| Icon style | Friendly, rounded, contemporary |
| Overall mood | Welcoming, warm, casual |
The community family targets the "come as you are" church vibe. Orange and warm tones create an inviting, low-barrier feel. Typography is modern and friendly, avoiding formality.
Template Labels
What Labels Do
Template labels adapt the UI text to denomination-specific terminology. A Catholic church says "Mass Times" where a Baptist church says "Service Times." A Lutheran church says "Pastor" where a Catholic church says "Parish Priest."
Label Sets
Located in template-labels.ts, there are 4 label sets:
| Label Set | Used By | Example: Service Times | Example: Pastor | Example: Ministries |
|---|---|---|---|---|
protestant_modern | Baptist, Methodist, Presbyterian, Pentecostal, etc. | "Service Times" | "Pastor" | "Ministries" |
catholic_liturgical | Catholic, Roman Catholic | "Mass & Confession Times" | "Parish Priest" | "Parish Ministries" |
orthodox_liturgical | Orthodox (all), Episcopal, Anglican, Lutheran | "Divine Liturgy Times" | "Clergy" | "Parish Ministries" |
nondenominational_community | Non-denominational, Bible Church, Vineyard, etc. | "Gathering Times" | "Lead Pastor" | "Get Involved" |
Full Label Key Reference
Each label set defines 12+ keys:
| Key | Protestant | Catholic | Orthodox | Community |
|---|---|---|---|---|
serviceTimes | Service Times | Mass & Confession Times | Divine Liturgy Times | Gathering Times |
pastor | Pastor | Parish Priest | Clergy | Lead Pastor |
staff | Staff | Parish Staff | Clergy & Staff | Our Team |
sermon | Sermons | Homilies | Homilies | Messages |
ministries | Ministries | Parish Ministries | Parish Ministries | Get Involved |
about | About Us | About Our Parish | About Our Parish | Who We Are |
beliefs | What We Believe | Our Faith | Our Faith | What We Believe |
events | Upcoming Events | Parish Events | Parish Events | What's Happening |
giving | Give Online | Support Our Parish | Support Our Parish | Give |
contact | Contact Us | Contact the Parish | Contact the Parish | Reach Out |
whatToExpect | What to Expect | Visiting Our Parish | Visiting Our Parish | Your First Visit |
welcome | Welcome | Welcome to Our Parish | Welcome to Our Parish | Welcome Home |
Label Selection Logic
1. Get church denomination string
2. getStyleByDenomination(denomination) → family (liturgical | protestant | community)
3. IF family === 'liturgical':
IF denomination contains 'Catholic':
labels = catholic_liturgical
ELSE:
labels = orthodox_liturgical
4. ELSE IF family === 'community':
labels = nondenominational_community
5. ELSE:
labels = protestant_modern
Note that liturgical family has two sub-label-sets (Catholic vs Orthodox) because their terminology differs despite sharing the same visual style. Catholic churches say "Mass" while Orthodox churches say "Divine Liturgy."
Video Library
Structure
Located in video-library.ts, the video library defines all available videos for hero backgrounds and transitions.
Each video entry has:
interface VideoEntry {
key: string; // Unique identifier
label: string; // Display name in admin picker
description: string; // Human-readable description
mood: string; // Emotional tone descriptor
src: string; // Video file URL (Supabase Storage or CDN)
posterSrc: string; // Poster image URL (shown before video loads)
}
Hero Videos (12 Options)
| Key | Label | Description | Mood |
|---|---|---|---|
church-entrance | Church Entrance | Welcoming church exterior | Warm, inviting |
worship-many | Worship (Large) | Congregation worshipping together | Vibrant, communal |
kids-checkin | Kids Check-In | Children's ministry check-in | Family-friendly, joyful |
prayer-time | Prayer Time | Quiet prayer moment | Contemplative, peaceful |
lobby-time | Church Lobby | People greeting in lobby | Social, welcoming |
closing-hope | Closing Hope | End-of-service moment | Hopeful, uplifting |
worship-solo | Worship (Solo) | Individual worship leader | Intimate, focused |
hard-life | Life's Challenges | Reflective imagery | Empathetic, real |
church-sideview | Church Side View | Exterior side angle | Architectural, calm |
hero-protestant | Protestant Default | Blue-toned worship scene | Clean, trustworthy |
hero-catholic | Catholic Default | Cathedral interior | Reverent, grand |
hero-nondenom | Community Default | Modern church gathering | Casual, warm |
Default: church-entrance is the default hero video for all new Pro Website pages.
Transition Videos (3 Options)
| Key | Label | Description | Mood |
|---|---|---|---|
transition-1 | Gentle Flow | Slow abstract visual flow | Default, subtle |
transition-1b | Warm Fade | Warm-toned fade transition | Cozy |
transition-1c | Soft Wave | Gentle wave pattern | Smooth |
Default: transition-1 (Gentle Flow) is the default transition video.
Slideshow Mode
Instead of a single hero video, churches can configure a slideshow that cycles through multiple hero videos. This is stored as hero_slideshow_keys (text array) in premium_churches.
Slideshow behavior:
1. IF hero_slideshow_keys is non-empty:
Cycle through videos in array order
Crossfade between videos (CSS transition)
Each video plays for its natural duration before advancing
2. ELSE:
Use single hero_video_key (or default 'church-entrance')
Video Hosting
All videos are served from Supabase Storage or a CDN URL. Poster images (shown while video loads or on mobile where autoplay is restricted) are co-located with the videos.
Video files are optimized for web delivery:
- Format: MP4 (H.264)
- Resolution: 1920x1080 (hero), 1920x400 (transition)
- Autoplay: muted, loop, playsinline
- Mobile: poster image shown instead of video on some devices (browser-dependent)
Style Object
The template receives a computed style object that contains all visual properties for the detected family:
interface DenominationStyle {
family: 'liturgical' | 'protestant' | 'community';
primaryColor: string;
accentColor: string;
backgroundColor: string;
headingFont: string;
bodyFont: string;
heroOverlayClass: string;
sectionDividerClass: string;
chatbotAccent: string;
iconStyle: string;
labels: LabelSet;
}
This object is computed once when the page loads and threaded through all 18 sections. Individual sections never re-detect the denomination -- they consume the style object.
ISR and Caching
Pro Website pages use Incremental Static Regeneration (ISR) with a 1-hour revalidation period. This means:
- First visit after a content change may show stale data (up to 1 hour)
- Subsequent visits get the regenerated page
- Video and image assets are cached at the CDN level
- The denomination detection and label selection happen at build/ISR time, not per-request
Admin edits to premium_churches take effect on the next ISR revalidation cycle.
Legacy Templates (Dead Code)
Three legacy template components exist but are no longer used:
| File | Status | Notes |
|---|---|---|
CatholicLiturgicalTemplate.tsx | Dead code | Was liturgical-only, replaced by UnifiedTemplate |
NondenominationalCommunityTemplate.tsx | Dead code | Was community-only, replaced by UnifiedTemplate |
ProtestantModernTemplate.tsx | Dead code | Was protestant-only, replaced by UnifiedTemplate |
These files can be safely deleted but are harmless. They are not imported anywhere in the current codebase.
See Also
- Overview -- product summary, pricing, data model
- Sections -- how each of the 18 sections renders using the style object
- Admin Features -- how churches select hero/transition videos in the admin
- Chatbot Integration -- how
chatbotAccentfrom the style object colors the widget