import React, { useState, useMemo, useEffect, useRef } from 'react'; /* ═══════════════════════════════════════════════════════════════ LUKKAP VENTURES — editorial venture site Aesthetic: Sequoia editorial × Apple restraint. Warm paper, one accent, serif display, radical whitespace, deliberate motion. ═══════════════════════════════════════════════════════════════ */ const PAPER = '#f5f2ec'; const RAISED = '#fbf9f5'; const INK = '#16130f'; const MUTED = '#7c736a'; const FAINT = '#a59c91'; const LINE = 'rgba(22,19,15,0.10)'; const LINE2 = 'rgba(22,19,15,0.18)'; const ACCENT = '#c2402d'; const ICON = '#6a615a'; const navLinks = [ { label: 'Companies', id: 'companies' }, { label: 'Approach', id: 'approach' }, { label: 'Team', id: 'team' }, { label: 'Notes', id: 'notes' }, ]; /* ── shared in-view hook (robust, framer-free) ───────────────── */ function useInView(opts: any = {}) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; let fired = false; const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting && !fired) { fired = true; setInView(true); io.disconnect(); } }), { threshold: opts.threshold ?? 0.14, rootMargin: opts.rootMargin ?? '0px 0px -6% 0px' } ); io.observe(el); const t = setTimeout(() => { if (!fired) { fired = true; setInView(true); io.disconnect(); } }, 1800); return () => { io.disconnect(); clearTimeout(t); }; }, []); return [ref, inView] as const; } function Reveal({ children, delay = 0, y = 26, style = {}, className = '' }: any) { const [ref, inView] = useInView(); return (

{children}

); } function CountUp({ to, prefix = '', suffix = '', decimals = 0, dur = 1500 }: any) { const [ref, inView] = useInView({ threshold: 0.4 }); const [val, setVal] = useState(0); useEffect(() => { if (!inView) return; let raf = 0; const start = performance.now(); const tick = (now: number) => { const p = Math.min(1, (now - start) / dur); const e = 1 - Math.pow(1 - p, 3); setVal(to * e); if (p < 1) raf = requestAnimationFrame(tick); else setVal(to); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, to, dur]); const fmt = val.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); return {prefix}{fmt}{suffix}; } function SpeedLine() { const [ref, inView] = useInView({ threshold: 0.5 }); return (

); } const Arrow = ({ size = 16 }: any) => ( ); /* ── company line-marks (cohesive monoline set) ──────────────── */ const CompanyIcon = ({ name }: { name: string }) => { const n = (name || '').toLowerCase(); const s = { width: 38, height: 38, stroke: ICON, strokeWidth: 1.4, fill: 'none' } as any; if (n.includes('tendios')) return (); if (n.includes('clivi')) return (); if (n.includes('extrable')) return (); if (n.includes('medizin') || n.includes('médizin') || n.includes('médizin')) return (); if (n.includes('cuimo') || n.includes('cüimo')) return (); if (n.includes('gourmeats')) return (); if (n.includes('cubro')) return (); if (n.includes('runner')) return (); if (n.includes('foodie')) return (); if (n.includes('zertify')) return (); if (n.includes('echo')) return (); return (); }; const Avatar = ({ name, size = 84 }: { name: string; size?: number }) => { const initials = (name || '').split(' ').map((w) => w[0]).join('').substring(0, 2).toUpperCase(); return (

{initials}

); }; /* ── per-company animated motifs (the showpiece) ── */ const Motif = ({ name }: { name: string }) => { const n = (name || '').toLowerCase(); const base: any = { fill: 'none', stroke: INK, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (n.includes('cuimo') || n.includes('cüimo')) return ( ); if (n.includes('tendios')) return ( ); if (n.includes('extrable')) return ( ); if (n.includes('medizin') || n.includes('médizin')) return ( ); if (n.includes('gourmeats')) return ( ); if (n.includes('runner')) return ( ); if (n.includes('foodie')) return ( ); if (n.includes('clivi')) return ( ); if (n.includes('cubro')) return ( ); if (n.includes('zertify')) return ( ); if (n.includes('echo')) return ( ); return ( ); }; const EMBERS = [ { l: 8, d: 9, delay: 0, s: 3 }, { l: 20, d: 12, delay: 2.4, s: 2 }, { l: 33, d: 10, delay: 4.2, s: 4 }, { l: 46, d: 14, delay: 1.1, s: 2 }, { l: 58, d: 11, delay: 5.3, s: 3 }, { l: 70, d: 13, delay: 3.1, s: 2 }, { l: 82, d: 10, delay: 6.4, s: 4 }, { l: 92, d: 12, delay: 2.7, s: 2 }, { l: 14, d: 15, delay: 7.5, s: 3 }, { l: 64, d: 9, delay: 8.2, s: 2 }, { l: 38, d: 13, delay: 6.8, s: 2 }, { l: 76, d: 11, delay: 4.9, s: 3 }, ]; const STATS = [ { to: 1497, label: 'Opportunities analysed every year' }, { to: 0.2, suffix: '%', decimals: 1, label: 'Of which we choose to back' }, { to: 11, label: 'Companies in the portfolio' }, { to: 1, label: 'Exit — Cubro to Schmidt Groupe' }, { prefix: '€', to: 3, suffix: 'M', label: 'Capital ready to deploy' }, { to: 20, suffix: ' yrs', label: 'Building and transforming companies' }, ]; const PILLARS = [ { n: '01', h: 'Capital', p: 'Up to €150k at the idea and pre-seed stage, alongside our network of co-investors and business angels.' }, { n: '02', h: 'Consulting', p: 'Sector expertise and business-model rigour, drawn directly from two decades of Lukkap consulting DNA.' }, { n: '03', h: 'Impulse', p: 'Operational relief — recruiting, CRM, payroll — so founders spend their energy building, not administering.' }, { n: '04', h: 'Involvement', p: 'Introductions to our corporate client base and a standing mentor network of C-level executives.' }, ]; const DEFAULT_NOTES = [ { title: 'Why operator-investors win', excerpt: 'Twenty years inside enterprises taught us what founders actually need at the start: not just capital, but go-to-market rigour, customer introductions, and a ready-made talent network.', date: 'Jun 2026' }, { title: 'The art of saying no', excerpt: 'We analyse roughly 1,500 opportunities a year and invest in three or four. Conviction at the idea stage is a discipline of subtraction, not addition.', date: 'May 2026' }, { title: 'From consulting to venture', excerpt: 'Lukkap was built to transform large corporations. Lukkap Ventures exists because the most daring startups deserve that same strategic firepower from day zero.', date: 'Apr 2026' }, ]; const ini = (name: string) => (name || '').split(' ').filter(Boolean).map((w) => w[0]).join('').substring(0, 2).toUpperCase(); const photoOf = (name: string): string | null => { const n = (name || '').toLowerCase(); const S = '/api/files/serve?path=company_724/'; if (n.includes('vara')) return S + '7d666f61-a9aa-4152-87db-65cc86670b3e_rafa-vara.jpg'; if (n.includes('alberto') || n.includes('córdoba') || n.includes('cordoba')) return S + '02d5d511-ca86-406a-8a42-744c3bc8f165_alberto-cordoba.jpg'; if (n.includes('ignacio')) return S + '693f29f0-c3f5-464f-ba96-b7838bac4e29_ignacio-fdz.jpg'; if (n.includes('segurado')) return S + '5a16fba3-d9df-42c4-864b-0d7c173bc2e0_ana-segurado.jpg'; if (n.includes('alves')) return S + '7a485f61-63e3-4e0a-b499-ec502a761a7b_marcos-alves.png'; if (n.includes('garabal') || n.includes('javier')) return S + 'abf7d0f8-1807-4a56-80fc-288136df7255_javier-garabal.jpg'; if (n.includes('renovales') || n.includes('david')) return S + '3c7112be-5484-437f-9513-59e5f1f7b7b6_david-perez.jpg'; if (n.includes('corzo') || n.includes('teresa')) return S + 'e11c6c87-5231-4326-81b6-9255dcb9987a_teresa-corzo.jpg'; if (n.includes('salazar') || n.includes('iñaki') || n.includes('inaki')) return S + '2f02c951-e74e-4313-b37c-621431014b67_inaki-salazar.jpg'; return null; }; function DeckModal({ open, onClose }: any) { const [file, setFile] = useState(null); const [email, setEmail] = useState(''); const [startup, setStartup] = useState(''); const [status, setStatus] = useState<'idle' | 'uploading' | 'done' | 'error'>('idle'); const [drag, setDrag] = useState(false); const inputRef = useRef(null); useEffect(() => { if (open) setStatus('idle'); }, [open]); if (!open) return null; const slug = (s: string) => ((s || '').replace(/[^a-z0-9]+/gi, '-').toLowerCase().slice(0, 40) || 'x'); const submit = async () => { if (!file || !email) { setStatus('error'); return; } setStatus('uploading'); try { const fd = new FormData(); fd.append('file', new File([file], `pitch_${slug(startup)}_${slug(email)}_${file.name}`, { type: file.type || 'application/octet-stream' })); const res = await fetch('/api/files/upload-direct', { method: 'POST', headers: { 'X-Company-Id': '724' }, body: fd }); if (!res.ok) throw new Error(String(res.status)); setStatus('done'); } catch { setStatus('error'); } }; return (

e.stopPropagation()}> {status === 'done' ? (

Deck received.

Thank you. We read every deck personally, and we'll reply within five days.

) : ( <>

Submit your deck

PDF or slides, up to 50MB. Founder to founder.

inputRef.current && inputRef.current.click()} onDragOver={(e) => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={(e) => { e.preventDefault(); setDrag(false); const f = e.dataTransfer.files && e.dataTransfer.files[0]; if (f) setFile(f); }}> { const f = e.target.files && e.target.files[0]; if (f) setFile(f); }} /> {file ? (

{file.name}

) : (

Drop your deck or browse

)}

setEmail(e.target.value)} /> setStartup(e.target.value)} /> {status === 'error' &&

Add your deck and email to continue.

} )}

); } export default function Page({ gufi }: any) { const { data: rawPortfolio } = gufi.useData('ventures__portfolio'); const { data: rawTeam } = gufi.useData('ventures__team'); const { data: rawStories } = gufi.useData('ventures__stories'); const portfolio = useMemo(() => Array.isArray(rawPortfolio) ? [...rawPortfolio].sort((a: any, b: any) => (+a.sort_order || 0) - (+b.sort_order || 0)) : [], [rawPortfolio]); const team = useMemo(() => Array.isArray(rawTeam) ? rawTeam : [], [rawTeam]); const notes = useMemo(() => (Array.isArray(rawStories) && rawStories.length) ? rawStories.map((s: any) => ({ title: s.title, excerpt: s.excerpt || s.description, date: s.date || '' })) : DEFAULT_NOTES, [rawStories]); const byCat = (c: string) => team.filter((t: any) => t.category === c).sort((a: any, b: any) => (+a.sort_order || 0) - (+b.sort_order || 0)); const partners = useMemo(() => byCat('Partner'), [team]); const management = useMemo(() => byCat('Management'), [team]); const advisors = useMemo(() => byCat('Advisor'), [team]); const allTeam = useMemo(() => [...partners, ...management, ...advisors], [partners, management, advisors]); const [activeId, setActiveId] = useState(null); const active = allTeam.find((t: any) => t.id === activeId) || allTeam[0]; const teamGroups = [ { label: 'Partners', items: partners }, { label: 'Management', items: management }, { label: 'Advisory board', items: advisors }, ].filter((g) => g.items.length); const [scrolled, setScrolled] = useState(false); const [progress, setProgress] = useState(0); const [mobileOpen, setMobileOpen] = useState(false); const [deckOpen, setDeckOpen] = useState(false); useEffect(() => { const fn = () => { const y = window.scrollY || 0; setScrolled(y > 24); const max = document.documentElement.scrollHeight - window.innerHeight; setProgress(max > 0 ? Math.min(1, Math.max(0, y / max)) : 0); }; window.addEventListener('scroll', fn, true); window.addEventListener('resize', fn); fn(); return () => { window.removeEventListener('scroll', fn, true); window.removeEventListener('resize', fn); }; }, []); const scrollTo = (id: string) => { setMobileOpen(false); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return (

{/* NAV */}

{navLinks.map((l) => )}

{/* HERO */}

Pre-seed · Seed · Iberia

We back the daring.

Operator investors, born from twenty years of transforming enterprises. We turn bold ideas — at the idea and pre-seed stage — into the companies that define their category.

{/* MANIFESTO — the F1 belief */}

Our belief

A startup is a Formula 1 car. The founder, its driver. Our work is to make them the fastest on the grid.

Capital Consulting Impulse Involvement

{/* NUMBERS */}

{STATS.map((s, i) => (

{s.label}

))}

{/* PORTFOLIO */}

Portfolio

Our companies

{portfolio.map((p: any, i: number) => (

{p.name}

{p.tagline}

{p.status === 'Exit' && Exit}

{p.description}

{p.sector} {p.year_invested} Visit

))}

{/* APPROACH */}

How we partner

Capital is the easy part.

We bring the operating muscle of a consultancy that has transformed more than 300 companies over two decades — and put it entirely behind our founders.

{PILLARS.map((p, i) => (

{p.n}

{p.h}

{p.p}

))}

Sector-agnostic. A €150k initial ticket, with up to €2M in follow-on. We lead pre-seed, co-lead seed, and follow into Series A — choosing three or four companies a year.

{/* TEAM */}

The people

Behind the fund

{active && (

{photoOf(active.name) ? {active.name}

{ini(active.name)}

}

{active.name}

{active.role}

{active.bio}

{teamGroups.map((g) => (

{g.label}

{g.items.map((t: any) => { const ph = photoOf(t.name); return (

setActiveId(t.id)} onClick={() => setActiveId(t.id)} > {ph ?

: {ini(t.name)}}

{t.name} {t.role}

); })}

))}

)}

{/* NOTES */}

Perspective

Notes

{notes.map((n: any, i: number) => (

{n.date}

{n.title}

{n.excerpt}

Read ))}

{/* PITCH / CTA */}

Submit your deck

Building something daring?

We read every deck — personally. If you're at the idea or pre-seed stage and based in Iberia, send it over and we'll reply within five days.

or write to rafael.vara@lukkap.com

Reply in 5 days

Idea & pre-seed

Iberia & beyond

{/* FOOTER */} setDeckOpen(false)} />

); }