// ============================================================ // OBPC — Shared components // ============================================================ const { useState, useEffect, useRef } = React; // ---------- Placeholder imagery ---------- const Placeholder = ({ label, aspect = "4/5", tone = "warm", className = "" }) => { const tones = { warm: { bg: "#1a0f0a", stripe: "rgba(255,255,255,0.04)", fg: "rgba(255,220,180,0.55)" }, deep: { bg: "#0a0f1a", stripe: "rgba(255,255,255,0.04)", fg: "rgba(200,220,255,0.5)" }, fire: { bg: "#2a0a00", stripe: "rgba(255,100,0,0.06)", fg: "rgba(255,180,120,0.6)" }, ivory: { bg: "#f2ede3", stripe: "rgba(0,0,0,0.03)", fg: "rgba(60,40,20,0.55)" }, }; const t = tones[tone] || tones.warm; return (
▢ {label}
); }; // ---------- Reveal on scroll ---------- const Reveal = ({ children, delay = 0, y = 30, className = "" }) => { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.15 } ); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); return (
{children}
); }; // ---------- Marquee ---------- const Marquee = ({ items, accent }) => (
{[...items, ...items, ...items].map((it, i) => ( {it} ))}
); // ---------- Nav ---------- const Nav = ({ accent, onJump }) => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); }; // ---------- Hero variant 1: Massive typography ---------- const HeroMassive = ({ palette }) => { const [time, setTime] = useState(0); useEffect(() => { let raf, start = performance.now(); const loop = (t) => { setTime((t - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const y = Math.sin(time * 0.6) * 6; return (
Movimento desde 1955 Jundiaí · SP / 23°11′S 46°53′W

O Brasil para Cristo.

Não somos um prédio. Somos o agir de Deus na vida das pessoas — anúncio, libertação e restauração há mais de sete décadas.

70+anos
5ministérios
∞vidas
); }; // ---------- Hero variant 2: Split editorial ---------- const HeroSplit = ({ palette }) => { return (
Est. 1955 · Obra Pentecostal

A Obra não
é um lugar —
é uma vida
transformada.

Fundada por Manoel de Mello, a OBPC é um movimento espiritual com uma missão clara: levar a Palavra de Deus a todos, sem distinção.

Conheça a Obra Ministérios
Fig. 01 — Culto de adoração. Imagem a ser substituída por foto institucional.
); }; // ---------- Hero variant 4: Unção (image) ---------- const HeroUncao = ({ palette }) => { const [scroll, setScroll] = useState(0); useEffect(() => { const onScroll = () => setScroll(window.scrollY); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
2026 — O Ano da Unção
OBPC · 2026
2026 — O ANO DA

Unção.

Um novo tempo na Obra. Consagração, serviço e a presença do Espírito Santo movendo vidas, famílias e comunidades por todo o Brasil.

A Obra em 2026 Ver agenda
); }; // ---------- Hero variant 3: Manifesto ---------- const HeroManifesto = ({ palette }) => { return (
Manifesto · OBPC 1955 — hoje § 01

A Obra acontece quando alguém é restaurado. Quando alguém encontra esperança. Quando alguém conhece Jesus de verdade. Mais do que participar, somos chamados a fazer parte dela. Porque a Obra não é sobre um prédio, uma organização ou um sistema — é sobre vidas sendo transformadas pelo poder de Deus, todos os dias, em cada culto, cada oração, cada encontro.

— assinado Igreja do Evangelho Quadrangular Pentecostal
Continue lendo
); }; Object.assign(window, { Placeholder, Reveal, Marquee, Nav, HeroMassive, HeroSplit, HeroManifesto, HeroUncao });