// Variant C — Cinematic Premium · Full Homepage with Tweaks // Sections: Hero · Marquee · Mission · MAX Meaning · Areas (PS3, HOGC, United, YMC-D) // HOGC Iceberg · Founder · YouTube CTA · Final CTA · Footer const { useState, useEffect, useRef } = React; const FONT_OPTIONS = { bricolage: { display: "'Bricolage Grotesque', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" }, spaceGrotesk: { display: "'Space Grotesk', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" }, interTight: { display: "'Inter Tight', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" }, }; const HOMEPAGE_DEFAULTS = /*EDITMODE-BEGIN*/{ "orange": "#EA6A1F", "darkMode": true, "fontPreset": "bricolage", "density": "regular", "heroVariant": "cinematic" }/*EDITMODE-END*/; function adjustColor(hex, amount) { if (typeof hex !== 'string' || !/^#[0-9A-Fa-f]{6}$/.test(hex)) return '#EA6A1F'; const m = hex.replace('#', ''); const num = parseInt(m, 16); if (Number.isNaN(num)) return '#EA6A1F'; let r = (num >> 16) + amount; let g = ((num >> 8) & 0xff) + amount; let b = (num & 0xff) + amount; r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b)); return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0'); } function VariantCFull() { const [t, setTweak] = window.useTweaks(HOMEPAGE_DEFAULTS); const [mobileOpen, setMobileOpen] = useState(false); const [lang, setLang, tl] = window.useLang(); const orange = (typeof t.orange === 'string' && /^#[0-9A-Fa-f]{6}$/.test(t.orange)) ? t.orange : '#EA6A1F'; const orangeBright = adjustColor(orange, 20); const fonts = FONT_OPTIONS[t.fontPreset] || FONT_OPTIONS.bricolage; const dark = t.darkMode; const c = dark ? { bg: '#0A0908', bgAlt: '#13110F', fg: '#F5F2EC', muted: '#9A958A', line: '#26211C', glassBg: 'rgba(255,255,255,0.03)', glassBd: '#26211C', } : { bg: '#FAF8F3', bgAlt: '#F1ECE0', fg: '#171411', muted: '#6E6859', line: '#DDD5C4', glassBg: 'rgba(255,255,255,0.6)', glassBd: '#DDD5C4', }; const glow = `${orange}33`; const dens = t.density === 'compact' ? 0.75 : t.density === 'comfy' ? 1.2 : 1; const pad = (px) => Math.round(px * dens); const navLinks = [ { l: 'Home', href: '/' }, { l: 'PS3', href: 'PS3.html' }, { l: 'HOGC DNA', href: 'HOGC DNA.html' }, { l: 'United', href: 'United.html' }, { l: 'YMC-D', href: 'YMC-D.html' }, ]; // Cursor effect const cursorRef = useRef(null); useEffect(() => { const el = cursorRef.current; if (!el) return; const move = (e) => { el.style.transform = `translate(${e.clientX - 12}px, ${e.clientY - 12}px)`; }; window.addEventListener('mousemove', move); return () => window.removeEventListener('mousemove', move); }, []); const styles = ` .vc-root { background: ${c.bg}; color: ${c.fg}; font-family: ${fonts.body}; min-height: 100%; transition: background .4s, color .4s; } .vc-display { font-family: ${fonts.display}; letter-spacing: -0.03em; font-weight: 700; } .vc-serif { font-family: ${fonts.serif}; } .vc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .vc-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; } .vc-eyebrow-line { display: inline-flex; align-items: center; gap: 14px; } .vc-eyebrow-line::before { content: ''; width: 32px; height: 1px; background: ${orange}; } .vc-btn-p { background: ${orange}; color: #fff; padding: 16px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: none; cursor: none; transition: all .25s; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; font-family: ${fonts.body}; } .vc-btn-p:hover { background: ${orangeBright}; box-shadow: 0 12px 32px ${glow}; transform: translateY(-2px); } .vc-btn-g { background: ${c.glassBg}; color: ${c.fg}; padding: 16px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid ${c.line}; cursor: none; transition: all .25s; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; backdrop-filter: blur(12px); font-family: ${fonts.body}; } .vc-btn-g:hover { border-color: ${orange}; color: ${orange}; } .vc-glass { background: ${c.glassBg}; border: 1px solid ${c.line}; backdrop-filter: blur(20px); border-radius: 24px; transition: all .35s; } .vc-card-hover:hover { border-color: ${orange}; transform: translateY(-4px); box-shadow: 0 20px 40px ${glow}; } .vc-shimmer { background: linear-gradient(135deg, ${c.fg} 0%, ${c.fg} 40%, ${orange} 50%, ${c.fg} 60%, ${c.fg} 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: vc-sh 8s ease-in-out infinite; } @keyframes vc-sh { 0%,100% { background-position: 200% 0 } 50% { background-position: -200% 0 } } .vc-marquee { animation: vc-mq 30s linear infinite; } @keyframes vc-mq { from { transform: translateX(0) } to { transform: translateX(-50%) } } .vc-fade { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; } .vc-fade.in { opacity: 1; transform: translateY(0); } a, button { cursor: none; } body { cursor: none; } .vc-cursor { position: fixed; top:0; left:0; width: 24px; height: 24px; border: 1px solid ${orange}; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: width .2s, height .2s; } .vc-cursor::after { content:''; position:absolute; inset: 9px; background: ${orange}; border-radius: 50%; } .vc-nav-link { position: relative; transition: color .2s ease; } .vc-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: ${orange}; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .vc-nav-link:hover { color: ${orange} !important; } .vc-nav-link:hover::after { transform: scaleX(1); } .vc-nav-link.is-active::after { transform: scaleX(1); } .vc-footer-link { cursor: pointer !important; transition: color .2s ease, text-decoration-color .2s ease, transform .2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; } .vc-footer-link:hover { color: ${orange} !important; text-decoration-color: ${orange}; transform: translateX(3px); } /* RESPONSIVE */ @media (max-width: 1024px) { .vc-root section { padding-left: 32px !important; padding-right: 32px !important; } .vc-root h1, .vc-root h2 { font-size: clamp(40px, 8vw, 96px) !important; line-height: 0.95 !important; } .vc-root h3 { font-size: clamp(28px, 5vw, 56px) !important; } .vc-root [style*="grid-template-columns: 1fr 1fr"], .vc-root [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; } .vc-root [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; } .vc-root [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } .vc-root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } .vc-root header { padding: 0 16px !important; } .vc-root header > div { padding: 10px 16px !important; gap: 12px !important; } .vc-root nav { display: none !important; } .vc-root .vc-glass[style*="padding: 48"] { padding: 32px !important; } .vc-cursor { display: none !important; } a, button, body { cursor: auto !important; } .vc-hide-mobile { display: none !important; } .vc-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; } .vc-home-hero { min-height: auto !important; align-items: flex-start !important; } .vc-home-hero-inner { padding: 96px 32px 72px !important; } .vc-home-hero-title { font-size: clamp(96px, 18vw, 150px) !important; line-height: 0.82 !important; } .vc-home-hero-subtitle { display: block !important; font-size: clamp(56px, 10vw, 92px) !important; line-height: 0.95 !important; margin-top: 8px !important; } .vc-home-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 42px !important; } .vc-home-hero-copy { font-size: 22px !important; max-width: 720px !important; } .vc-home-hero-actions { flex-wrap: wrap !important; margin-bottom: 24px !important; } .vc-home-hero-stats { max-width: 520px !important; } .vc-founder-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .vc-founder-image-col { max-width: 420px !important; } .vc-founder-title { font-size: clamp(56px, 10vw, 88px) !important; } .vc-founder-quote { font-size: 24px !important; } } @media (max-width: 640px) { .vc-root section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; } .vc-root h1 { font-size: clamp(48px, 14vw, 80px) !important; } .vc-root h2 { font-size: clamp(36px, 9vw, 56px) !important; } .vc-root h3 { font-size: clamp(24px, 6vw, 36px) !important; } .vc-root [style*="grid-template-columns: repeat(3"], .vc-root [style*="grid-template-columns: repeat(4"], .vc-root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } .vc-root .vc-glass { padding: 20px !important; border-radius: 16px !important; } .vc-root .vc-btn-p, .vc-root .vc-btn-g { padding: 12px 20px !important; font-size: 11px !important; } .vc-root footer { padding: 32px 20px !important; } .vc-root footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 24px !important; } .vc-root footer [style*="justify-content: space-between"] { flex-direction: column; gap: 8px; align-items: flex-start; } .vc-home-hero { min-height: 100svh !important; } .vc-home-hero-bg { opacity: 0.38 !important; object-position: 58% center !important; } .vc-home-hero-inner { padding: 88px 20px 56px !important; } .vc-home-hero-kicker { margin-bottom: 20px !important; } .vc-home-hero-kicker::before { width: 24px !important; } .vc-home-hero-title { font-size: clamp(66px, 22vw, 92px) !important; line-height: 0.84 !important; letter-spacing: -0.04em !important; } .vc-home-hero-subtitle { font-size: clamp(38px, 12vw, 54px) !important; line-height: 0.98 !important; margin-top: 6px !important; } .vc-home-hero-grid { margin-top: 30px !important; gap: 24px !important; } .vc-home-hero-copy { font-size: 18px !important; line-height: 1.42 !important; } .vc-home-hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 20px !important; } .vc-home-hero-actions .vc-btn-p, .vc-home-hero-actions .vc-btn-g { justify-content: center !important; width: 100% !important; } .vc-home-hero-stats { padding: 16px 10px !important; } .vc-home-hero-stat { padding: 0 8px !important; } .vc-home-hero-stat-value { font-size: 26px !important; } .vc-home-hero-stat-label { font-size: 9px !important; letter-spacing: 0.08em !important; } .vc-founder-section { padding-top: 72px !important; padding-bottom: 72px !important; } .vc-founder-grid { gap: 32px !important; } .vc-founder-image-col { max-width: 100% !important; } .vc-founder-image { border-radius: 18px !important; box-shadow: 0 0 44px ${glow} !important; } .vc-founder-badge { position: static !important; margin-top: 12px !important; width: 100% !important; justify-content: center !important; border-radius: 14px !important; padding: 12px 14px !important; font-size: 10px !important; letter-spacing: 0.12em !important; } .vc-founder-kicker { margin-bottom: 18px !important; } .vc-founder-title { font-size: clamp(44px, 14vw, 64px) !important; line-height: 0.95 !important; margin-bottom: 22px !important; } .vc-founder-quote { font-size: 20px !important; line-height: 1.35 !important; margin-bottom: 22px !important; } .vc-founder-body { font-size: 15px !important; line-height: 1.65 !important; margin-bottom: 24px !important; } .vc-founder-path { flex-wrap: wrap !important; gap: 10px 14px !important; margin-bottom: 24px !important; font-size: 11px !important; } .vc-founder-link { width: 100% !important; justify-content: center !important; } } `; // Scroll reveal useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.12 }); document.querySelectorAll('.vc-fade').forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); const areas = [ { num: '01', title: 'PS3 Academy', tag: tl('Training & Curriculum', 'Training & Curriculum'), desc: tl('Booster für Bibelschüler — Principles, Skills, Strategies, Systems. 1-Wochen-Intensiv oder 2-Wochen-Deep-Dive.', 'Booster for Bible school students — Principles, Skills, Strategies, Systems. 1-week intensive or 2-week deep dive.'), meta: tl('4 Säulen · 1–2 Wochen', '4 Pillars · 1–2 Weeks'), href: 'PS3.html' }, { num: '02', title: 'HOGC DNA', tag: tl('Church Consulting', 'Church Consulting'), desc: tl('Inspiriert von Heart of God Church Singapur. Iceberg-Prinzip — gesündere und stärkere Gemeinden wachsen lassen.', 'Inspired by Heart of God Church Singapore. Iceberg principle — grow healthier, stronger churches.'), meta: tl('Singapur · 360°', 'Singapore · 360°'), href: 'HOGC DNA.html' }, { num: '03', title: 'United', tag: tl('Open Resources', 'Open Resources'), desc: tl('Offenes Tool für Gemeinden — Minis, Kids, Teens, Youth. Volle Autonomie, geteilte Erfahrung.', 'Open tool for churches — Minis, Kids, Teens, Youth. Full autonomy, shared experience.'), meta: tl('4 Altersgruppen · 4–21 J.', '4 Age Groups · Ages 4–21'), href: 'United.html' }, { num: '04', title: 'YMC-D', tag: tl('Mission Internship Asia', 'Mission Internship Asia'), desc: tl('Youth · Mission · Church Developer. Ein Praktikum über neun bis zwölf Monate in Asien — mit HOGC Singapur.', 'Youth · Mission · Church Developer. A nine- to twelve-month internship across Asia — with HOGC Singapore.'), meta: tl('9–12 Monate · Asien', '9–12 Months · Asia'), href: 'YMC-D.html' }, ]; const partnerLinks = [ { label: tl('Heart of God Church', 'Heart of God Church'), href: 'https://heartofgodchurch.org/' }, { label: tl('AVC Schweiz', 'AVC Switzerland'), href: 'https://www.avc-ch.org/' }, { label: tl('AVC Deutschland', 'AVC Germany'), href: 'https://www.avc-de.org/de/' }, { label: tl('Schule der Erweckung', 'Schule der Erweckung'), href: 'https://www.schuledererweckung.de/' }, { label: tl('BfP Deutschland', 'BfP Germany'), href: 'https://www.bfp.de/' }, ]; const icebergSections = [ { label: tl('Über der Oberfläche', 'Above the Surface'), sub: tl('Strategie & Ergebnisse', 'Strategy & Results'), items: [[tl('Harvest Circle', 'Harvest Circle'), tl('Workshop für effektive Jahresplanung', 'Workshop for effective annual planning')], [tl('Leadership Pipeline', 'Leadership Pipeline'), tl('Junge Leiter erkennen, trainieren, befähigen', 'Identify, train and empower young leaders')], [tl('School & Youth Revival', 'School & Youth Revival'), tl('Bewegung in Schulen und Nachbarschaft starten', 'Starting a movement in schools and neighborhoods')]], top: true }, { label: tl('Unter der Oberfläche', 'Below the Surface'), sub: tl('Mindset & Kultur', 'Mindset & Culture'), items: [[tl('DNA-Mindset', 'DNA Mindset'), tl('Denken auf wachsende Gemeinde ausrichten', 'Aligning thinking toward a growing church')], [tl('Gemeinde als Heimat', 'Church as Home'), tl('Kultur, in der Menschen wirklich ankommen', 'A culture where people truly belong')], [tl('Junge Stimmen', 'Young Voices'), tl('Echte Verantwortung von Anfang an', 'Real responsibility from the very beginning')]], top: false }, ]; const ageGroups = [ { name: 'Minis', range: '4–7', desc: tl('Erste Schritte im Glauben — spielerisch und altersgerecht.', 'First steps in faith — playful and age-appropriate.') }, { name: 'Kids', range: '8–11', desc: tl('Bibel entdecken, Charakter formen, Gemeinschaft erleben.', 'Discovering the Bible, shaping character, experiencing community.') }, { name: 'Teens', range: '12–14', desc: tl('Identität finden, Verantwortung übernehmen, leben lernen.', 'Finding identity, taking responsibility, learning to live.') }, { name: 'Youth', range: '15–21', desc: tl('Berufung leben, Multiplikation üben, Leiter werden.', 'Living your calling, practicing multiplication, becoming a leader.') }, ]; return (
{tl( 'Max Ministry vereint Academy-Ausbildung, Gemeindeberatung und Jugendarbeit zu einer ganzheitlichen Bewegung. Jeder Bereich steht für sich — gemeinsam entfalten sie ihre volle Kraft.', 'Max Ministry unites academy training, church consulting and youth ministry into one holistic movement. Each area stands on its own — together they unfold their full power.' )}
{tl( <>Viele Leiter und Gemeinden arbeiten bei 60 % ihres Potenzials. Unser Ziel: die Lücke zu schließen und euren Dienst auf 100 % seines wahren Potenzials zu bringen.>, <>Many leaders and churches operate at 60% of their potential. Our goal: close the gap and accelerate your ministry to 100% of its true potential.> )}
{card.body}
{tl(<>Wachse nicht einfach. Multipliziere.>, <>{`Don't just grow. `}Multiply.>)}
{card.desc}
{tl( 'Als Teil unseres Consultings bieten wir das UNITED-Programm — ein kompletter Blueprint, der die volle DNA der Heart of God Church trägt. Wir empfehlen dieses bewährte System, aber die Entscheidung liegt ganz bei euch. Ihr könnt wählen, ob ihr UNITED implementiert oder euer eigenes Jugendprogramm mit den von uns vermittelten Prinzipien weiterentwickelt. Weitere Details zu Lehrplan und Struktur findet ihr im Bereich UNITED.', 'As part of our consulting, we offer the UNITED program—a complete blueprint that already carries the full DNA of Heart of God Church. While we highly recommend this proven system, it is entirely up to you. You can choose to implement UNITED or continue developing your own youth program with the principles we provide. For more details on the curriculum and structure, please see the UNITED section.' )}
{tl('Zu UNITED', 'See UNITED section')} →{g.desc}
{tl( 'Max Ministry wurde 2025 mit einer klaren Berufung gegründet: Die nächste Generation in Asien nicht nur zu erreichen, sondern sie nachhaltig zu festigen. Wir sind keine Einzelkämpfer, sondern arbeiten konsequent als Team. Gemeinsam mit vielen Freiwilligen – von engagierten Bibelschülern bis hin zu befreundeten Gemeinden und Partnerorganisationen aus Deutschland, der Schweiz und Singapur – bauen wir die Arbeit vor Ort in Asien aktiv auf.', 'Max Ministry was founded in 2025 with a clear calling: not only to reach the next generation in Asia, but to establish them for the long term. We are not lone fighters—we work consistently as a team. Together with many volunteers—from committed Bible school students to partner churches and organisations in Germany, Switzerland, and Singapore—we actively build the work on the ground across Asia.' )}
{tl( 'Gegründet wurde Max Ministry von Basim Al-Safau. Unsere Arbeit vereint über 30 Jahre fundierte Erfahrung in der Jugendentwicklung und Leiterschaft mit der dynamischen Missionskraft Asiens. Nach 14 Jahren im Dienst als Jugendpastor in Deutschland zog Basim 2019 nach Singapur, um dort internationale Missionsprojekte zu leiten. Seit dieser Zeit ist er zudem fester Partner der Heart of God Church Singapore. Als Deutsch-Iraker versteht er die Bedeutung von Identität und kultureller Brückenbildung – Werte, die das Fundament unserer Arbeit bilden. Sein erklärtes Ziel ist es, durch Max Ministry eine ganzheitliche Gemeindeberatung anzubieten, die auf bewährten, internationalen Standards basiert.', 'Max Ministry was founded by Basim Al-Safau. Our work combines over 30 years of grounded experience in youth development and leadership with the dynamic mission force of Asia. After 14 years serving as a youth pastor in Germany, Basim moved to Singapore in 2019 to lead international mission projects. Since then he has also been a committed partner of Heart of God Church Singapore. As a German Iraqi, he understands the importance of identity and building cultural bridges—values that form the foundation of our work. His stated goal is to offer holistic church consulting through Max Ministry, built on proven international standards.' )}
{tl( 'Folge Max Ministry auf YouTube für Teachings, Updates und Einblicke in unsere Arbeit.', 'Follow Max Ministry on YouTube for teachings, updates and insights into our work.' )}
{tl('Demnächst', 'Coming soon')}
▶ YouTube{tl( 'Ob Academy, Gemeindeberatung oder Jugendarbeit — schreib uns und finde heraus, wie Max Ministry dich unterstützen kann.', 'Whether academy, church consulting or youth ministry — write us and find out how Max Ministry can support you.' )}
{tl( <>Wir helfen dabei, starke und relevante Gemeinden zu bauen, in denen junge Menschen ein Zuhause finden.>, <>We help build strong and relevant churches where young people find a home.> )}
{tl('Wir helfen dabei, starke und relevante Gemeinden zu bauen, in denen junge Menschen ein Zuhause finden.', 'We help build strong and relevant churches where young people find a home.')}
{tl( <>{`Wir helfen dabei, `}starke und relevante Gemeinden zu bauen{`, in denen junge Menschen ein Zuhause finden. Durch Beratung, Training und ein Konzept, das die nächste Generation zu Jüngern macht.`}>, <>{`We help build `}strong and relevant churches{` where young people feel at home—by consulting churches, training their leaders, and providing a concept to disciple the next generation.`}> )}