6a69084de2
The home page is rebuilt from scratch and configured from a new Front page tab in the admin, backed by migration 017 and served by GET /api/front-page. Hero: brand, photos (crossfading slideshow with progress and pause) or livestream (YouTube/Facebook/Vimeo embed with a LIVE badge), switched by hand. After it, bands the admin can reorder, retitle or hide: a countdown to the next event (series-aware), the National Retreats carousel, a numbers band (typed in or counted from the database), a horizontal rail of featured timeline entries, and a "Find your way in" pathfinder replacing the old connect section. The CRUD engine gains a `singleton` flag: the entity has one row, made by its migration, and create and delete are refused. The list screen opens that row and the editor drops the slug, back link and delete. shapeSeries moves to shape.js so /front-page can share it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
/* ═══════════════════════════════════════════════════════════════
|
|
RETREATS BAND
|
|
|
|
The National Retreats carousel from the Retreats page, as-is:
|
|
same component, same filter, so an event edited in the admin
|
|
shows up identically in both places. This file only adds the
|
|
front page's heading and a way through to the full page.
|
|
═══════════════════════════════════════════════════════════════ */
|
|
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import EventListCards from '../EventList-Cards.tsx'
|
|
|
|
const TEAL = '#138ba0'
|
|
|
|
type RetreatsBandProps = { id: string; title: string; blurb?: string | null }
|
|
|
|
export default function RetreatsBand({ id, title, blurb }: RetreatsBandProps) {
|
|
return (
|
|
<section id={id} className="overflow-hidden py-24" style={{ background: '#eef9fb' }}>
|
|
<div className="mx-auto mb-12 flex max-w-6xl flex-wrap items-end gap-6 px-6">
|
|
<div>
|
|
<h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
|
|
{title}
|
|
</h2>
|
|
{blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
|
|
</div>
|
|
<Link
|
|
to="/retreats"
|
|
className="ml-auto rounded-full border px-5 py-2 text-sm font-semibold transition-colors hover:bg-white"
|
|
style={{ borderColor: TEAL, color: TEAL }}
|
|
>
|
|
All retreats →
|
|
</Link>
|
|
</div>
|
|
|
|
<EventListCards section="national" type="retreat" view="carousel" accent={TEAL} />
|
|
</section>
|
|
)
|
|
}
|