// ═════════════════════════════════════════════════════════════════════════════ // MARCELIS.IT COMPONENTS // ═════════════════════════════════════════════════════════════════════════════ // ─────────────────────────────────────────────────────────────────────────── // 1. IMPORTS & CONSTANTS // ─────────────────────────────────────────────────────────────────────────── const { useEffect, useRef, useState, useMemo } = React; // ─────────────────────────────────────────────────────────────────────────── // 2. HERO VISUAL - Animated Energy Flow Canvas // ─────────────────────────────────────────────────────────────────────────── // Interactive animated visualization showing energy flow from solar to home function HeroVisual() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let raf, t = 0; const dpr = window.devicePixelRatio || 1; function resize() { const r = canvas.getBoundingClientRect(); canvas.width = r.width * dpr; canvas.height = r.height * dpr; ctx.scale(dpr, dpr); } resize(); window.addEventListener('resize', resize); // particle paths — flowing from top-right to center (solar to home) const nodes = [ { x: 0.88, y: 0.12, label: '☀' }, // sun { x: 0.5, y: 0.52, label: 'hub' }, // smart hub { x: 0.12, y: 0.82, label: '⌂' }, // home { x: 0.82, y: 0.82, label: '⚡' }, // device { x: 0.18, y: 0.22, label: '◉' }, // battery ]; const edges = [ [0, 1], [1, 2], [1, 3], [1, 4], ]; const particles = edges.flatMap(([a, b]) => Array.from({ length: 5 }, (_, i) => ({ a, b, p: i / 5 })) ); function draw() { const w = canvas.width / dpr; const h = canvas.height / dpr; ctx.clearRect(0, 0, w, h); // soft glow bg const g = ctx.createRadialGradient(w * 0.5, h * 0.52, 10, w * 0.5, h * 0.52, Math.max(w, h) * 0.6); g.addColorStop(0, 'rgba(0,127,255,0.12)'); g.addColorStop(1, 'rgba(0,0,255,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, w, h); // edges ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(140,180,255,0.2)'; edges.forEach(([ai, bi]) => { const a = nodes[ai], b = nodes[bi]; ctx.beginPath(); ctx.moveTo(a.x * w, a.y * h); ctx.lineTo(b.x * w, b.y * h); ctx.stroke(); }); // particles particles.forEach(pt => { pt.p += 0.0035; if (pt.p > 1) pt.p = 0; const a = nodes[pt.a], b = nodes[pt.b]; const x = (a.x + (b.x - a.x) * pt.p) * w; const y = (a.y + (b.y - a.y) * pt.p) * h; const alpha = Math.sin(pt.p * Math.PI); ctx.fillStyle = `rgba(58,160,255,${0.9 * alpha})`; ctx.beginPath(); ctx.arc(x, y, 2.2, 0, Math.PI * 2); ctx.fill(); // glow ctx.fillStyle = `rgba(58,160,255,${0.2 * alpha})`; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.fill(); }); // nodes nodes.forEach((n, i) => { const x = n.x * w, y = n.y * h; // outer ring ctx.strokeStyle = 'rgba(140,180,255,0.35)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(x, y, 22 + Math.sin(t * 0.03 + i) * 1.5, 0, Math.PI * 2); ctx.stroke(); // inner fill const grad = ctx.createRadialGradient(x, y, 0, x, y, 18); grad.addColorStop(0, 'rgba(0,127,255,0.7)'); grad.addColorStop(1, 'rgba(0,0,255,0.05)'); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(x, y, 16, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#e8eeff'; ctx.font = '600 13px "Space Grotesk"'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(n.label, x, y + 1); }); t++; raf = requestAnimationFrame(draw); } draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return (
{/* corner overlays */}
live · energy graph
sync
lat: 52.37° N lon: 04.90° E NL-AMSTERDAM
); } // ─────────────────────────────────────────────────────────────────────────── // 3. IT SERVICES SECTION - Cards and Layout // ─────────────────────────────────────────────────────────────────────────── // Service offerings: Support, Networks, Custom Dev, Consulting, Maintenance const SERVICES = [ { n: '01', title: 'Support & Troubleshooting', body: 'Een vastgelopen PC, een wifi dat het niet doet, een printer die zich verzet. We komen langs, bellen mee of loggen veilig in.', accent: 'wide', chip: 'Particulier · MKB', }, { n: '02', title: 'Netwerken', body: 'Van een sterk thuisnetwerk tot een zakelijk VLAN met glasvezel. Stabiel, snel, veilig.', accent: '', chip: 'Wi-Fi 7 · Mesh · VPN', }, { n: '03', title: 'Maatwerk', body: 'Custom software, automatisering of hardware — als een bestaande oplossing niet past, bouwen we een die wél past.', accent: '', chip: 'Dev · IoT · Scripts', }, { n: '04', title: 'Advies bij aankoop', body: 'Onafhankelijk advies over wat je écht nodig hebt — geen dure specs waar je niks mee doet.', accent: '', chip: 'Laptops · Servers', }, { n: '05', title: 'Onderhoud', body: 'Updates, back-ups, monitoring. We zorgen dat het werkt — voordat het stuk gaat.', accent: 'wide', chip: 'Proactief · Continu', }, ]; function Services({ variant }) { const cls = variant === 'rows' ? 'service-grid variant-b' : 'service-grid'; return (
{SERVICES.map((s, i) => (
{s.n} / 05 {s.chip}
{s.title}
{s.body}
{s.accent === 'wide' && variant !== 'rows' && (
meer →
)}
))}
); } // ─────────────────────────────────────────────────────────────────────────── // 4. SMART ENERGY DASHBOARD - Flow Visualization & Statistics // ─────────────────────────────────────────────────────────────────────────── // Real-time energy flow diagram with live power generation, consumption, and battery data function EnergyFlow() { const [t, setT] = useState(0); useEffect(() => { const id = setInterval(() => setT(x => x + 1), 50); return () => clearInterval(id); }, []); // live-ish values const solar = 3.42 + Math.sin(t / 30) * 0.25; const home = 1.18 + Math.sin(t / 25 + 1) * 0.15; const battery = 0.8 + Math.sin(t / 40 + 2) * 0.2; const grid = solar - home - battery; return (
{/* wires */} {/* flowing particles */} {[0, 0.25, 0.5, 0.75].map(p => { const phase = (t / 80 + p) % 1; return ( ); })} {/* center hub */} SMART HUB {/* nodes */} {[ { cx: 60, cy: 60, icon: '☀' }, { cx: 340, cy: 60, icon: '▲' }, { cx: 60, cy: 220, icon: '⌂' }, { cx: 340, cy: 220, icon: '⚡' }, ].map((n, i) => ( {n.icon} ))}
Zonnepanelen
{solar.toFixed(2)} kW
Batterij
{(battery * 100).toFixed(0)} %
Huis
{home.toFixed(2)} kW
{grid > 0 ? 'Teruglevering' : 'Verbruik net'}
0 ? 'var(--good)' : 'var(--accent-soft)' }}> {Math.abs(grid).toFixed(2)} kW
); } function EnergySection({ variant }) { const [tab, setTab] = useState('vandaag'); const [t, setT] = useState(0); useEffect(() => { const id = setInterval(() => setT(x => x + 1), 1000); return () => clearInterval(id); }, []); const bars = useMemo(() => { return Array.from({ length: 24 }, (_, i) => { const peak = 12; // noon const d = Math.max(0, 1 - Math.abs(i - peak) / 7); return d * (0.7 + Math.random() * 0.3); }); }, [tab]); const now = new Date(); const clock = now.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); return (

Minder teruggeven. Méér zelf gebruiken.

Smart Energy meet realtime wat je zonnepanelen opwekken en wat je verbruikt. Zodra er overschot is, schakelt het automatisch apparaten aan — boiler, laadpaal, warmtepomp, vaatwasser. Zo verdwijnt gratis stroom niet meer onderbetaald naar het net.

    {[ 'Plug & play installatie in meterkast', 'Werkt met elke omvormer via P1-poort', 'Dynamische energieprijzen (Tibber, Easy Energy)', 'Lokale verwerking — geen cloud-afhankelijkheid', ].map(f => (
  • {f}
    • ))}
Vraag offerte
Smart Energy · live
{clock} · NL
{['vandaag', 'week', 'maand', 'jaar'].map(tk => ( setTab(tk)}>{tk} ))}
Opbrengst {tab}
{(tab === 'vandaag' ? 18.4 : tab === 'week' ? 142 : tab === 'maand' ? 612 : 7340).toFixed(1)} kWh
▲ {(tab === 'vandaag' ? 12 : 8)}% vs gem.
Zelfverbruik
{tab === 'vandaag' ? 64 : tab === 'week' ? 58 : tab === 'maand' ? 54 : 52} %
▲ +38% met SE
Besparing
€ {(tab === 'vandaag' ? 4.82 : tab === 'week' ? 32.1 : tab === 'maand' ? 128 : 1520).toFixed(tab === 'vandaag' ? 2 : 0)}
t.o.v. terugleveren
Opbrengst per uur · 00 → 23 kWh
{bars.map((b, i) => (
))}
); } // ─────────────────────────────────────────────────────────────────────────── // 5. CRYPTO TEASER - Price Ticker & Market Scanner // ─────────────────────────────────────────────────────────────────────────── // Live crypto ticker with market data: BTC, ETH, SOL, ARB with price charts function CryptoCard() { const [t, setT] = useState(0); useEffect(() => { const id = setInterval(() => setT(x => x + 1), 1200); return () => clearInterval(id); }, []); const coins = [ { s: 'BTC', price: 112400, chg: 2.14, seed: 3 }, { s: 'ETH', price: 6280, chg: -0.82, seed: 7 }, { s: 'SOL', price: 312, chg: 4.02, seed: 2 }, { s: 'ARB', price: 1.74, chg: -1.24, seed: 5 }, ]; const spark = (seed) => { const pts = Array.from({ length: 20 }, (_, i) => { const y = 11 + Math.sin((i + seed + t * 0.2) * 0.7) * 6 + (Math.sin(i * 1.3) * 3); return `${i * 4},${y}`; }).join(' '); return pts; }; return (
crypto.marcelis.it

Scanners en bots die de markt niet laten liggen.

We ontwikkelen eigen tooling die 24/7 patronen en kansen signaleert en — als je dat wil — automatisch handelt. Minder schermen staren, meer tijd voor leven.

Bezoek crypto.marcelis.it
SYM24HPRICECHG
{coins.map(c => (
{c.s} = 0 ? 'var(--good)' : 'var(--accent-soft)'} strokeWidth="1.2" points={spark(c.seed)} /> ${c.price.toLocaleString('en-US')} {c.chg >= 0 ? '+' : ''}{c.chg}%
))}
feed: marcelis-scanner/v3.2 ● live
); } // ─────────────────────────────────────────────────────────────────────────── // 6. CONTACT FORM - Message submission // ─────────────────────────────────────────────────────────────────────────── // Form to send inquiries with name, email, subject, and message function Contact() { const [sent, setSent] = useState(false); return (
{ e.preventDefault(); setSent(true); }}>
Stuur een bericht