One sermon.
A full week of content.

The Power of Grace: Why Forgiveness Starts With Letting Go

Pastor Michael opened Sunday's sermon with a story about a letter he never sent. For fifteen years, it sat in a drawer — addressed, stamped, never mailed. The letter was an apology. Not to someone who had wronged him, but to someone he had failed to forgive. That drawer, he said, is where most of us keep our grace: sealed, ready, but never delivered.

The sermon explored three dimensions of grace — receiving it, practicing it, and extending it to people who haven't asked for it. Each dimension mapped to a different part of the prodigal son parable, reframed for modern church life.

{/* Divider 01 — Radial Glow Band */}
{/* Sits between a light section (above) and dark section (below). */}
{/* Change the top-wave fill to match your light section bg.       */}
{/* Change the bottom-wave fill to match your dark section bg.     */}
<div className="relative bg-[#333232] overflow-hidden">
  {/* top wave — light section colour bites down */}
  <svg viewBox="0 0 1440 80" preserveAspectRatio="none" className="block w-full h-14 -mb-px">
    <path
      d="M0,0 L0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,0 Z"
      fill="#FFFFFF"
    />
  </svg>
  {/* glow body */}
  <div className="relative h-20">
    {/* purple radial bloom */}
    <div
      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
      style={{
        width: 600,
        height: 240,
        background:
          "radial-gradient(ellipse at center, rgba(81,61,229,0.44) 0%, transparent 70%)",
      }}
    />
    {/* lime spark */}
    <div
      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
      style={{
        width: 40,
        height: 2,
        borderRadius: 2,
        background: "#D5F610",
        boxShadow: "0 0 16px #D5F610, 0 0 40px rgba(213,246,16,0.27)",
      }}
    />
  </div>
  {/* bottom wave — dark section colour bites up */}
  <svg viewBox="0 0 1440 80" preserveAspectRatio="none" className="block w-full h-14 -mt-px">
    <path
      d="M0,80 L0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,80 Z"
      fill="#111111"
    />
  </svg>
</div>

{/* Divider 02 — SVG Wave Clip */}
{/* Place at the BOTTOM of the outgoing section.          */}
{/* Set fill="<outgoing-section-bg>" so it masks cleanly. */}
<div className="relative -mb-px">
  <svg
    viewBox="0 0 1440 80"
    preserveAspectRatio="none"
    className="block w-full h-14"
  >
    <path
      d="M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z"
      fill="#513DE5"  {/* ← match your section bg */}
    />
  </svg>
</div>

{/* Divider 03 — Marquee Ticker */}
{/* globals.css — add once */}
@keyframes ets-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ets-marquee-track {
  display: flex;
  width: max-content;
  animation: ets-marquee 18s linear infinite;
}

{/* component */}
const PHRASES = [
  "Upload. Process. Done.",
  "One sermon. A week of content.",
  "Extend the Sermon.",
  "5 posts. 1 blog. 1 email.",
];

<div className="overflow-hidden bg-[#333232] py-3.5 border-y border-white/5">
  <div className="ets-marquee-track">
    {[...Array(2)].map((_, set) => (
      <div key={set} className="flex items-center">
        {PHRASES.map((phrase, i) => (
          <span key={i} className="flex items-center whitespace-nowrap">
            <span className="px-7 text-[#D5F610] text-xs font-bold tracking-wide">
              {phrase}
            </span>
            <span className="text-[#513DE5] text-[10px]">◆</span>
          </span>
        ))}
      </div>
    ))}
  </div>
</div>