// Brauwerk Herzog — variant-b-v2
// Stack: React + Babel (in-browser, no build step)
// Fonts: Jaini Purva (display) · Inter (body)
// Responsive: isMobile = useWindowWidth() < 980
const COLORS = {
bg: '#F7F7F5',
ink: '#1A1714',
ink70: 'rgba(26,23,20,0.7)',
line: 'rgba(26,23,20,0.12)',
peach: '#F4977C',
peachSoft: '#B9CEAE',
};
// Two fonts only
const FONT = {
display: '"Jaini Purva", Georgia, serif',
body: '"Inter", system-ui, sans-serif',
};
const I18N = {
de: {
nav: { story: 'Willkommen', biere: 'Biere', kurse: 'Braukurse', timeline: 'Bau', kontakt: 'Kontakt' },
heroEyebrow: 'Eröffnung Sommer 2027',
heroTitle: 'Eine neue Brauerei\nentsteht in Thüringen.',
heroLead: 'In Georgenthal entsteht eine Brauerei, in der Tradition und Handwerk im Mittelpunkt stehen. Erste Fassware gibt es schon — der Bau beginnt diesen Sommer.',
heroPrimary: 'Braukurs buchen',
heroSecondary: 'Mehr erfahren',
facts: [
{ k: 'Eröffnung', v: 'Sommer 2027' },
{ k: 'Standort', v: 'Georgenthal, Thüringen' },
{ k: 'Sudhaus', v: '5 hl' },
{ k: 'Aktuell', v: 'Fünf Sorten als Fassware' },
],
storyEyebrow: 'Am Thüringer Wald',
storyTitle: 'Bier mit Zeit, Leidenschaft und Charakter.',
storyP1: 'Das Brauwerk Herzog ist eine kleine, handwerkliche Brauerei am Thüringer Wald — hier entstehen Biere in unterschiedlichsten Stilen, von modernen Interpretationen bis hin zu alten Traditionsbieren. Hauptsache, sie schmecken und bringen Menschen zusammen.',
storyP2: 'In den kommenden Jahren laden wir zu Brauwochenenden ein: Kommt vorbei, schaut zu wie neue Kreationen entstehen, kommt ins Gespräch — oder genießt einfach ein Bier im Biergarten.',
storyQuote: 'Gutes Bier braucht Zeit. Unsere Brauerei auch. Eröffnung 2027 – Fassware gibt\'s schon heute.',
storyAuthor: 'Max Herzog · Braumeister',
bierEyebrow: 'Aktuelle Fassware',
bierTitle: 'Fünf Biere. Handwerklich gebraut.',
bierLead: 'Unfiltriert abgefüllt, naturbelassen und voller Geschmack — so kommen unsere Biere ins Glas. Ob vertrauter Klassiker oder moderne Kreation: am Ende sollen sie Menschen zusammenbringen und schöne Momente begleiten.',
biereList: [
{ nr: '01', name: 'Helles', sub: 'Leicht · 4,6 % vol.', desc: 'Leicht golden, schlank und unkompliziert. Eine fruchtig-blumige Whirlpoolgabe macht es zum idealen Feierabendbier.' },
{ nr: '02', name: 'Pils', sub: 'Klassisch · 5,0 % vol. · 38 IBU', desc: 'Hellgelb, trocken, klar. Klassisch hopfig-würziges Aroma trifft auf eine markante Bittere — für alle, die ein ehrliches Pils schätzen.' },
{ nr: '03', name: 'Bernstein', sub: 'Halbdunkel · 5,2 % vol.', desc: 'Kupferfarben und malzbetont, mit zarten Karamellnoten. Ein gemütliches Bier für ruhige Momente.' },
{ nr: '04', name: 'Pale Ale', sub: 'Modern · 5,2 % vol. · 20 IBU', desc: 'Zitrus, Maracuja, feines Karamallmalz. Fruchtig-aromatisch mit trockenem Abgang — zugänglich, aber mit Charakter.' },
{ nr: '05', name: 'India Pale Ale', sub: 'Hopfig · 6,5 % vol. · 60 IBU', desc: 'Intensives Hopfenaroma durch Dry Hopping: Citrus, reife Früchte, würzige Tiefe. Vollmundig und charakterstark.' },
],
biereSoon: 'Mehr in Planung — Weizen, Dunkel, saisonale Spezialitäten.',
fassOrder: 'Fass anfragen',
fassClose: 'Schließen',
fassSize: 'Fassgröße',
fassQty: 'Anzahl',
fassDate: 'Wunschtermin',
fassDateOpt: 'optional',
fassNote: 'Notiz',
fassNotePh: 'Anlass, Lieferort, Rückfragen …',
fassPrivat: 'Privat',
fassGastro: 'Gastronomie',
fassSendBtn: 'Anfrage senden',
fassSummary: 'Anfrage',
kurseEyebrow: 'Braukurse',
kurseTitle: 'Einen Tag brauen.',
kurseLead: 'Ab 2027 öffnen wir die Brauerei für alle, die Bier nicht nur trinken, sondern wirklich verstehen wollen. Gemeinsam brauen wir einen Sud von Anfang bis Ende — direkt an der Anlage, Schritt für Schritt, mit Zeit für alle Fragen.',
kurseDetails: [
'Geführter Braukurs mit Braumeister Max',
'Alle Schritte am echten Sud — Maischen, Läutern, Kochen, Kühlen',
'Bierverkostung aus dem Brauwerk Herzog',
'Kleine Verpflegung während des Kurses',
'Kursheft mit allen Inhalten zum Mitnehmen',
],
kurseFacts: [
{ k: 'Uhrzeit', v: '10:30–15:00 Uhr' },
{ k: 'Gruppe', v: '4–15 Personen' },
{ k: 'Ort', v: 'Georgenthal, Thüringen' },
],
kursePreis: '95 €',
personenLabel: 'Wie viele Personen?',
personenSingle: 'Person',
personenPlural: 'Personen',
summeLabel: 'Gesamt',
kurseHinweis: 'Kein fixer Termin nötig — schick uns einfach eine Anfrage mit eurer Personenzahl. Wir melden uns mit verfügbaren Terminen.',
kurseBook: 'Kursplatz anfragen',
timelineEyebrow: 'Baufortschritt',
timelineTitle: 'So entsteht das Brauwerk.',
timeline: [
{ date: 'Frühjahr 2020', title: 'Idee & Gründung', text: 'Die Familie beschließt: Aus dem Hobby wird ein Betrieb. Brauwerk Herzog wird offiziell gegründet.', done: true },
{ date: 'Herbst 2024', title: 'Erste Fassware', text: 'Verschiedene Sorten entstehen durch die Unterstützung von Hops and Barley (Berlin) für regionale Gastronomie.', done: true },
{ date: 'Sommer 2026', title: 'Baubeginn', text: 'Spatenstich für das Sudhaus und den Biergarten in Georgenthal.', current: true },
{ date: 'Frühjahr 2027', title: 'Erster Sud', text: 'Die neue Anlage steht. Der erste hauseigene Sud läuft.' },
{ date: 'Sommer 2027', title: 'Eröffnung', text: 'Schankraum und Braukurse öffnen für alle.' },
],
kontaktEyebrow: 'Kontakt',
kontaktTitle: 'Schreibt uns.',
kontaktLead: 'Fragen, Bestellungen oder einfach Hallo sagen — wir freuen uns über jede Nachricht.',
kontaktAdresseLabel: 'Adresse',
kontaktAdresse: 'Brauwerk Herzog\nAm Bahnhof 8\n99887 Georgenthal',
kontaktMail: 'hallo@brauwerk-herzog.de',
mailButton: 'E-Mail schreiben',
footer: '© 2026 Brauwerk Herzog · Inhaber Maximilian Herzog',
},
en: {
nav: { story: 'Welcome', biere: 'Beers', kurse: 'Courses', timeline: 'Build', kontakt: 'Contact' },
heroEyebrow: 'Opening Summer 2027',
heroTitle: 'A new brewery is\ntaking shape in Thuringia.',
heroLead: 'In Georgenthal, a brewery is taking shape where tradition and craft come first. Our first kegs are already out — and construction begins this summer.',
heroPrimary: 'Book a course',
heroSecondary: 'Learn more',
facts: [
{ k: 'Opening', v: 'Summer 2027' },
{ k: 'Location', v: 'Georgenthal, Thuringia' },
{ k: 'Brewhouse', v: '5 hl' },
{ k: 'Currently', v: 'Five beers on tap' },
],
storyEyebrow: 'Thuringian Forest',
storyTitle: 'Beer brewed with time, passion and character.',
storyP1: 'Brauwerk Herzog is a small, craft brewery at the edge of the Thuringian Forest — a place where beers of all kinds take shape, from modern interpretations to old traditional styles. What matters most: they taste good and bring people together.',
storyP2: 'In the years ahead we will be opening our doors for brewing weekends — come and watch new creations take shape, have a conversation, or simply enjoy a beer in the beer garden.',
storyQuote: 'Good beer takes time. So does our brewery. Opening 2027 – kegs available today.',
storyAuthor: 'Max Herzog · Brewmaster',
bierEyebrow: 'On Tap Now',
bierTitle: 'Five beers. Brewed by hand.',
bierLead: 'Unfiltered and full of flavour — that is how our beers reach the glass. Whether a trusted classic or a modern creation: in the end, they should bring people together and make moments worth remembering.',
biereList: [
{ nr: '01', name: 'Helles', sub: 'Light · 4.6% ABV', desc: 'Pale golden, lean and uncomplicated. A fruity, floral dry-hop addition makes it the perfect end-of-day beer.' },
{ nr: '02', name: 'Pils', sub: 'Classic · 5.0% ABV · 38 IBU', desc: 'Pale yellow, dry and clear. A classically hoppy, spicy aroma meets a pronounced bitterness — for those who appreciate an honest pilsner.' },
{ nr: '03', name: 'Bernstein', sub: 'Amber · 5.2% ABV', desc: 'Copper-coloured and malt-forward, with delicate caramel notes. An easy-going beer for quieter moments.' },
{ nr: '04', name: 'Pale Ale', sub: 'Modern · 5.2% ABV · 20 IBU', desc: 'Citrus, passion fruit, a touch of caramel malt. Fruity and aromatic with a dry finish — approachable, but with real character.' },
{ nr: '05', name: 'India Pale Ale', sub: 'Hoppy · 6.5% ABV · 60 IBU', desc: 'Intense hop aroma from dry hopping during fermentation and conditioning: citrus, ripe fruit, spicy depth. Full-bodied and bold.' },
],
biereSoon: 'More in the works — Wheat, Dunkel, seasonal specials.',
fassOrder: 'Request a keg',
fassClose: 'Close',
fassSize: 'Keg size',
fassQty: 'Quantity',
fassDate: 'Preferred date',
fassDateOpt: 'optional',
fassNote: 'Note',
fassNotePh: 'Occasion, delivery, questions …',
fassPrivat: 'Private',
fassGastro: 'Hospitality',
fassSendBtn: 'Send request',
fassSummary: 'Request',
kurseEyebrow: 'Brewing Courses',
kurseTitle: 'A day of brewing.',
kurseLead: 'From 2027 we\'ll open the brewery to everyone who wants to understand beer — not just drink it. Together we brew a full batch from start to finish, right at the equipment, step by step.',
kurseDetails: [
'Guided brew day with Brewmaster Max',
'All steps on a real brew — mashing, lautering, boiling, cooling',
'Beer tasting from the Brauwerk Herzog range',
'Light refreshments throughout the day',
'Course booklet with all content to take home',
],
kurseFacts: [
{ k: 'Time', v: '10:30–15:00' },
{ k: 'Group', v: '4–15 people' },
{ k: 'Location', v: 'Georgenthal, Thuringia' },
],
kursePreis: '€95',
personenLabel: 'How many people?',
personenSingle: 'person',
personenPlural: 'people',
summeLabel: 'Total',
kurseHinweis: 'No fixed date needed — just send us an enquiry with your group size and we\'ll get back to you with available dates.',
kurseBook: 'Request a spot',
timelineEyebrow: 'Progress',
timelineTitle: 'How the brewery is coming together.',
timeline: [
{ date: 'Spring 2020', title: 'Idea & founding', text: 'The family decides: the hobby becomes a business. Brauwerk Herzog is officially founded.', done: true },
{ date: 'Autumn 2024', title: 'First kegs', text: 'Various beers brewed with the support of Hops and Barley (Berlin) for regional gastronomy.', done: true },
{ date: 'Summer 2026', title: 'Construction starts', text: 'Groundbreaking for the brewhouse and beer garden in Georgenthal.', current: true },
{ date: 'Spring 2027', title: 'First in-house brew', text: 'The new system is up. The first house brew runs.' },
{ date: 'Summer 2027', title: 'Opening', text: 'Taproom and brewing courses open to everyone.' },
],
kontaktEyebrow: 'Contact',
kontaktTitle: 'Get in touch.',
kontaktLead: 'Questions, orders or just to say hi — we love hearing from you.',
kontaktAdresseLabel: 'Address',
kontaktAdresse: 'Brauwerk Herzog\nAm Bahnhof 8\n99887 Georgenthal · Germany',
kontaktMail: 'hallo@brauwerk-herzog.de',
mailButton: 'Send email',
footer: '© 2026 Brauwerk Herzog · Proprietor Maximilian Herzog',
},
};
// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, y = 32, as: As = 'div', style = {}, ...rest }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setShown(true);
io.disconnect();
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{children}
);
}
function useWindowWidth() {
const [w, setW] = React.useState(window.innerWidth);
React.useEffect(() => {
const onResize = () => setW(window.innerWidth);
window.addEventListener('resize', onResize, { passive: true });
return () => window.removeEventListener('resize', onResize);
}, []);
return w;
}
// Reusable button/anchor with hover state
function NavLink({ href, children }) {
const [hover, setHover] = React.useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
color: COLORS.ink,
textDecoration: 'none',
cursor: 'pointer',
position: 'relative',
paddingBottom: 4,
borderBottom: hover ? `1px solid ${COLORS.ink}` : '1px solid transparent',
transition: 'border-color 180ms ease, opacity 180ms ease',
opacity: hover ? 1 : 0.85,
}}
>{children}
);
}
function Btn({ href, variant = 'primary', children, fullWidth = false, style = {}, ...rest }) {
const [hover, setHover] = React.useState(false);
const base = {
padding: '14px 28px',
borderRadius: 999,
fontSize: 13,
letterSpacing: '0.06em',
textTransform: 'uppercase',
fontWeight: 600,
cursor: 'pointer',
fontFamily: "'Inter', system-ui, sans-serif",
textDecoration: 'none',
display: fullWidth ? 'flex' : 'inline-flex',
alignItems: 'center',
justifyContent: fullWidth ? 'center' : 'flex-start',
gap: 8,
width: fullWidth ? '100%' : undefined,
boxSizing: 'border-box',
transition: 'transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease',
transform: hover ? 'translateY(-2px)' : 'translateY(0)',
boxShadow: hover ? '0 8px 22px rgba(26,23,20,0.18)' : '0 0 0 rgba(0,0,0,0)',
border: 'none',
};
const variants = {
primary: {
background: hover ? 'rgba(26,23,20,0.85)' : COLORS.ink,
color: COLORS.bg,
},
secondary: {
background: hover ? 'rgba(26,23,20,0.85)' : 'transparent',
color: hover ? COLORS.bg : COLORS.ink,
border: hover ? '1px solid transparent' : `1px solid ${COLORS.ink}`,
},
light: {
background: hover ? COLORS.bg : 'transparent',
color: hover ? COLORS.ink : COLORS.bg,
border: `1px solid ${COLORS.bg}`,
},
};
const css = { ...base, ...variants[variant], ...style };
if (href) {
return (
setHover(true)} onMouseLeave={() => setHover(false)} style={css} {...rest}>{children}
);
}
return (
);
}
function LangPill({ lang, setLang }) {
const [hovered, setHovered] = React.useState(null);
return (
{['de', 'en'].map((k) => {
const active = lang === k;
const hover = hovered === k && !active;
return (
);
})}
);
}
// Beer colour tones — one per beer, used in both cards and the drawer
const BEER_TONES = [
{ bg: '#F2ECC4', label: '#1A1714' }, // Helles
{ bg: '#F5E3DB', label: '#1A1714' }, // Pils
{ bg: '#C46F59', label: '#F7F7F5' }, // Bernstein
{ bg: '#E8A96A', label: '#1A1714' }, // Pale Ale
{ bg: '#7A3E28', label: '#F7F7F5' }, // IPA
];
function BeerDrawer({ b, tone, t, fassSize, setFassSize, fassQty, setFassQty, fassKind, setFassKind, fassDate, setFassDate, fassNote, setFassNote, mailHref, onClose, isMobile }) {
const [mounted, setMounted] = React.useState(false);
const [dateError, setDateError] = React.useState(false);
React.useEffect(() => {
const id = requestAnimationFrame(() => setMounted(true));
document.body.style.overflow = 'hidden';
return () => {
cancelAnimationFrame(id);
document.body.style.overflow = '';
};
}, []);
const minDate = (() => { const d = new Date(); d.setDate(d.getDate() + 14); return d.toISOString().split('T')[0]; })();
const handleDateChange = (e) => {
const val = e.target.value;
if (val && val < minDate) {
setFassDate('');
setDateError(true);
setTimeout(() => setDateError(false), 3000);
} else {
setFassDate(val);
setDateError(false);
}
};
const sizes = [30, 50];
const labelStyle = { fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS.ink70, fontWeight: 600, marginBottom: 10 };
const groupStyle = { display: 'flex', flexDirection: 'column' };
const pillRow = { display: 'flex', gap: 8, flexWrap: 'wrap' };
const revealStyle = (i) => ({
opacity: mounted ? 1 : 0,
transform: mounted ? 'translateY(0)' : 'translateY(8px)',
transition: `opacity 450ms cubic-bezier(0.22, 1, 0.36, 1) ${100 + i * 60}ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1) ${100 + i * 60}ms`,
});
const pillBase = (active) => ({
padding: '10px 16px',
borderRadius: 999,
border: `1px solid ${COLORS.ink}`,
background: active ? COLORS.ink : 'transparent',
color: active ? COLORS.bg : COLORS.ink,
cursor: 'pointer',
fontSize: 13,
fontWeight: 500,
fontFamily: "'Inter', system-ui, sans-serif",
transition: 'all 180ms ease',
});
const stepperBtn = {
width: 36, height: 36, borderRadius: 999,
border: `1px solid ${COLORS.ink}`,
background: 'transparent', color: COLORS.ink,
cursor: 'pointer', fontSize: 18, lineHeight: 1,
fontFamily: 'inherit',
};
const inputStyle = {
background: 'transparent',
border: 'none',
borderBottom: `1px solid ${COLORS.line}`,
padding: '8px 0',
fontSize: 14,
color: COLORS.ink,
fontFamily: "'Inter', system-ui, sans-serif",
width: '100%',
outline: 'none',
};
return (
<>
{/* Backdrop */}
{/* Modal panel */}
{/* Top/Left: beer colour panel */}
{/* Close button — lives here on mobile so it's always visible on the colour block */}
{isMobile && (
)}
№ {b.nr} · {b.sub}
{/* Bottom/Right: white form panel */}
{/* Close — desktop only, mobile close is in the colour panel */}
{!isMobile && (
)}
Typ
{[['privat', t.fassPrivat], ['gastro', t.fassGastro]].map(([k, label]) => (
))}
{t.fassSize}
{sizes.map((s) => (
))}
{t.fassQty}
{fassQty}
{t.fassDate} · {t.fassDateOpt}
{dateError &&
Bitte mindestens 2 Wochen im Voraus wählen.
}