// hero-v2.jsx — Hero for v2 (no EST. 1998 line), light/neutral palette // Overrides global Hero so v2 page-home picks it up automatically. function HeroV2Canvas() { const canvasRef = React.useRef(null); React.useEffect(() => { const c = canvasRef.current;if (!c) return; const ctx = c.getContext("2d"); let w = c.width = c.offsetWidth; let h = c.height = c.offsetHeight; const dpr = Math.min(window.devicePixelRatio || 1, 2); function resize() { w = c.offsetWidth;h = c.offsetHeight; c.width = w * dpr;c.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } resize(); window.addEventListener("resize", resize); // Particles const N = 70; const dust = Array.from({ length: N }, () => ({ x: Math.random() * w, y: Math.random() * h, vx: (Math.random() - 0.5) * 0.18, vy: (Math.random() - 0.5) * 0.08 - 0.04, r: Math.random() * 1.2 + 0.2, a: Math.random() * 0.4 + 0.05 })); let raf,t = 0; function frame() { t += 0.005; ctx.clearRect(0, 0, w, h); // Soft cream gradient const g = ctx.createLinearGradient(0, 0, 0, h); g.addColorStop(0, "#e9e4d4"); g.addColorStop(0.55, "#d6d2c4"); g.addColorStop(1, "#bdb8a6"); ctx.fillStyle = g;ctx.fillRect(0, 0, w, h); // Slate weight at bottom-left const slate = ctx.createRadialGradient(w * 0.18, h * 1.0, 0, w * 0.18, h * 1.0, Math.max(w, h) * 0.75); slate.addColorStop(0, "rgba(77,85,92,0.55)"); slate.addColorStop(0.45, "rgba(77,85,92,0.18)"); slate.addColorStop(1, "rgba(77,85,92,0)"); ctx.fillStyle = slate;ctx.fillRect(0, 0, w, h); // Accent warmth top-right const ac = ctx.createRadialGradient(w * 0.88, h * 0.0, 0, w * 0.88, h * 0.0, Math.max(w, h) * 0.6); ac.addColorStop(0, "rgba(161,71,34,0.30)"); ac.addColorStop(0.5, "rgba(161,71,34,0.06)"); ac.addColorStop(1, "rgba(161,71,34,0)"); ctx.fillStyle = ac;ctx.fillRect(0, 0, w, h); // Distant skyline (Main 2 silhouette) ctx.fillStyle = "rgba(53,59,65,0.92)"; const baseY = h * 0.84; const bldgs = [ [0.02, 0.66, 0.07, 0.18], [0.10, 0.58, 0.06, 0.26], [0.17, 0.52, 0.10, 0.32], [0.28, 0.60, 0.07, 0.24], [0.36, 0.55, 0.09, 0.29], [0.46, 0.48, 0.11, 0.36], [0.59, 0.53, 0.09, 0.31], [0.69, 0.60, 0.07, 0.24], [0.77, 0.50, 0.08, 0.34], [0.86, 0.65, 0.10, 0.19]]; ctx.beginPath(); ctx.moveTo(0, baseY); bldgs.forEach(([x, y, bw, bh]) => { const x0 = x * w,y0 = y * h,x1 = (x + bw) * w; ctx.lineTo(x0, baseY);ctx.lineTo(x0, y0); ctx.lineTo(x1, y0);ctx.lineTo(x1, baseY); }); ctx.lineTo(w, baseY);ctx.lineTo(w, h);ctx.lineTo(0, h);ctx.closePath(); ctx.fill(); // Cranes (Dark Neutral) function crane(cx, cy, scale, rot) { ctx.save();ctx.translate(cx, cy); ctx.strokeStyle = "rgba(28,23,20,0.96)"; ctx.lineWidth = 2; // Mast ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(0, -160 * scale);ctx.stroke(); // Lattice for (let i = 0; i < 8; i++) { ctx.beginPath(); ctx.moveTo(-5, -i * 20 * scale); ctx.lineTo(5, -(i + 1) * 20 * scale); ctx.stroke(); } // Jib ctx.save(); ctx.translate(0, -160 * scale);ctx.rotate(rot); ctx.beginPath(); ctx.moveTo(-30 * scale, 0);ctx.lineTo(120 * scale, 0); ctx.lineTo(110 * scale, -8 * scale); ctx.moveTo(-30 * scale, 0);ctx.lineTo(-20 * scale, -10 * scale); ctx.stroke(); for (let i = 0; i < 12; i++) { ctx.beginPath(); ctx.moveTo(i * 10 * scale, 0); ctx.lineTo((i + 1) * 10 * scale, -6 * scale); ctx.stroke(); } // Cable + hook ctx.beginPath(); ctx.moveTo(80 * scale, 0); ctx.lineTo(80 * scale, 60 * scale + Math.sin(t * 0.8) * 6 * scale); ctx.stroke(); ctx.fillStyle = "rgba(28,23,20,0.96)"; ctx.fillRect(76 * scale, 60 * scale + Math.sin(t * 0.8) * 6 * scale, 8 * scale, 6 * scale); ctx.restore(); ctx.restore(); } crane(w * 0.22, baseY, 1.0, Math.sin(t * 0.18) * 0.04); crane(w * 0.68, baseY, 1.3, -0.05 + Math.sin(t * 0.12 + 1) * 0.03); // Dust particles dust.forEach((p) => { p.x += p.vx;p.y += p.vy; if (p.x < 0) p.x = w;if (p.x > w) p.x = 0;if (p.y < 0) p.y = h; ctx.fillStyle = `rgba(28,23,20,${p.a * 0.6})`; ctx.beginPath();ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);ctx.fill(); }); raf = requestAnimationFrame(frame); } frame(); return () => {cancelAnimationFrame(raf);window.removeEventListener("resize", resize);}; }, []); return ; } function HeroV2({ variant = "video", setRoute }) { const goForm = () => { setRoute("kontakt"); setTimeout(() => { const el = document.getElementById("kontaktform"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100 }); }, 60); }; const meta =
Hovedentreprise Anlæg · Infrastruktur Kolding · Aarhus · Hovedstaden
; if (variant === "split") { return (
{/* Brand video background — drop your file at assets/hero-bg.mp4. Muted + loop + playsInline = autoplays silently on all browsers. Until the file exists, the neutral hero background shows as fallback. */}

Vi løfter stærkt
fra start — med løsninger på alle planer

DM Entreprenør udfører anlægsopgaver fra fundering og infrastruktur til erhvervsbyggeri og naturgenopretning – over, på og under jorden i hele Danmark.

Lej maskiner
); } if (variant === "typo") { return (
{meta}

JORD
·beton· FREMTID

En entreprenør for projekter, der skal stå i hundrede år.

Lej maskiner
); } // Default: "video" canvas return (
{meta}

Vi bygger fundamentet for fremtiden.

Fra første spadestik til ibrugtagning — DM Entreprenør leverer infrastruktur, erhvervsbyggeri og anlæg med håndværk og målbar præcision.

Lej maskiner
); } function HeroV2Stats() { return (
40+
Kommuner betjent
120+
Lokale samarbejdspartnere
100%
Lokalkendskab
); } // Expose + override v1 Hero so page-home.jsx (v1) would pick it up if used Object.assign(window, { HeroV2, HeroV2Canvas, HeroV2Stats, Hero: HeroV2 });