/* VÉRTICE landing — sections */ const { Reveal, Icon, goTo, useParallax, MARK, VIDEOS } = window; const { WorldMap } = window; const { motion, useInView, useScroll, useTransform, animate } = (window.Motion || {}); const PRESENCE_EASE = [0.22, 1, 0.36, 1]; const LINKEDIN = "https://www.linkedin.com/in/sebastian-bruno-673ab2252/"; /* ============================ NAV ============================ */ function Nav() { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onS = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onS, { passive: true }); return () => window.removeEventListener("scroll", onS); }, []); const links = [["About", "about"], ["Services", "services"], ["Presence", "presence"], ["Contact", "contact"]]; return (
); } /* ============================ HERO =========================== */ function Hero() { const [pref, y] = useParallax(0.12); return (
{/* parallax video */}
{/* texture + scrims */}
); } /* ======================== APPROACH (video band) ======================== */ function Approach() { const [pref, y] = useParallax(0.1); return (
Our Approach

Conceived, directed and delivered
— with our team at every step.

); } /* =========================== ABOUT ========================== */ function About() { return (
The Studio

We are Vértice, an executive event production company rooted in Bogotá. We turn board-level ambition into an experience people remember, with proven execution, not projection.

A new studio. A six-year track record.

{[ ["Director-led delivery", "Every project is directed by our core team. We curate and manage a trusted network of specialized vendors combining local expertise with consistent executive oversight."], ["International standards", "Colombian roots, delivered to a global executive standard."], ["Proven, not promised", "Every engagement executed in person across four continents."]]. map(([t, d], i) =>
{t}

{d}

 )}
); } /* ========================= SERVICES ========================= */ const SERVICES = [ { n: "01", icon: "gem", t: "Executive Galas", d: "Black-tie dinners, award ceremonies and milestone celebrations staged to board-level standards.", vid: VIDEOS.galas }, { n: "02", icon: "presentation", t: "Conferences & Summits", d: "Multi-day corporate programs, stage design and delegate experience, managed end to end.", vids: [VIDEOS.conf, VIDEOS.studio] }, { n: "03", icon: "globe", t: "Brand Experiences", d: "Launches and activations that translate brand strategy into an experience people remember.", vid: VIDEOS.brand }, { n: "04", icon: "radio", t: "Virtual & Hybrid Production", d: "Live streaming, virtual conferences, panel recordings and hybrid broadcast experiences, delivered with broadcast-grade quality.", vid: VIDEOS.hybrid }]; function Services() { return (
What We Produce

Four service lines,
one standard of execution.

{SERVICES.map((s, i) => )}
); } function ServiceRow({ n, icon, t, d, vid, vids }) { const list = vids && vids.length ? vids : [vid]; const [hover, setHover] = React.useState(false); const refs = React.useRef([]); React.useEffect(() => { refs.current.forEach((v) => { if (!v) return; if (hover) {v.play().catch(() => {});} else {v.pause();} }); }, [hover]); return (
setHover(true)} onMouseLeave={() => setHover(false)} className="group relative overflow-hidden grid grid-cols-[auto_1fr] md:grid-cols-[90px_1fr_auto] gap-x-6 md:gap-x-10 gap-y-3 items-center py-8 md:py-10 border-b border-line transition-colors"> {/* hover-reveal background video — a two-clip dissolve loop when `vids` is given */}
{list.map((src, i) => )}
{n}

{t}

{d}

); } /* ========================= PRESENCE ========================= */ const CITIES = ["Bogotá", "Bridgetown", "Port of Spain", "Lima", "Santiago", "Ciudad de Panamá", "Istanbul", "Barcelona", "Berlin"]; const STATS = [ { kind: "count", value: 4, label: "Continents" }, { kind: "count", value: 9, label: "Cities" }, { kind: "count", value: 6, label: "Years of Execution" }, { kind: "flip", display: "+$1M", label: "USD Executed" }, { kind: "count", value: 30, prefix: "+", label: "Projects Delivered" }, ]; /* metric value — counts up (ease-out, 2s) via framer's imperative animate (no JSX motion) */ function StatNumber({ stat }) { const ref = React.useRef(null); const inView = useInView(ref, { once: true, margin: "-100px" }); const [val, setVal] = React.useState(0); React.useEffect(() => { if (!inView || stat.kind !== "count") return; const controls = animate(0, stat.value, { duration: 2, ease: "easeOut", onUpdate: (v) => setVal(v) }); return () => controls.stop(); }, [inView]); if (stat.kind === "flip") return {stat.display}; return {(stat.prefix || "") + Math.round(val)}; } function Presence() { return (
{/* faded backdrop video */}
International Presence

Nine cities. Four continents.

We operate globally through a curated network of trusted local partners — delivering consistent executive standards wherever our clients convene.

{/* interactive world map — projected city nodes with hover cards */}
{STATS.map((stat, i) => { const isLast = i === STATS.length - 1; return (
{stat.label}
); })}
); } /* ========================== CONTACT ========================= */ function Contact() { const [email, setEmail] = React.useState(""); const [sent, setSent] = React.useState(false); const [err, setErr] = React.useState(""); function submit(e) { e.preventDefault(); if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {setErr("Please enter a valid corporate email");return;} setErr("");setSent(true); } return (
Begin a Conversation

Let's connect the
extraordinary.

Sebastián Bruno Saavedra
Founder & Executive Producer
+57 312 521 4592 · Bogotá D.C., Colombia
{sent ?
Thank you

Our team responds to every executive enquiry within one business day.

:
{setEmail(e.target.value);setErr("");}} error={err} placeholder="name@company.com" />

By sending you agree to be contacted by Vértice Collective S.A.S.

}
); } function Field({ label, type = "text", value, onChange, placeholder, error }) { const [foc, setFoc] = React.useState(false); return ( ); } /* ========================== FOOTER ========================== */ function Footer() { return ( ); } function FooterCol({ title, items }) { return (
{title}
{items.map(([l, id]) => )}
); } Object.assign(window, { Nav, Hero, About, Approach, Services, Presence, Contact, Footer });