)} {/* Gradient overlay for legibility */} {(brand || line || label) && (

)} {/* Top labels */}

{hasVideo && reelStatus === 'live' && ( <> Reel )} {!hasVideo && reelStatus === 'coming' && Reel — In production} {houseTag && !hasVideo && The House} {label && {label}}

{/* Bottom content */}

{brand && (

{brand}

)} {line && (

{line}

)}

); } // ============================================================================= // HERO — rotating creator grid + huge headline // ============================================================================= function TypingShaping() { const word = 'shaping'; const [text, setText] = React.useState(word); const [phase, setPhase] = React.useState('hold'); // 'typing' | 'hold' | 'erasing' React.useEffect(() => { let timer; if (phase === 'hold') { timer = setTimeout(() => setPhase('erasing'), 7000); } else if (phase === 'erasing') { if (text.length === 0) { timer = setTimeout(() => setPhase('typing'), 400); } else { timer = setTimeout(() => setText(text.slice(0, -1)), 70); } } else if (phase === 'typing') { if (text.length === word.length) { setPhase('hold'); } else { timer = setTimeout(() => setText(word.slice(0, text.length + 1)), 110); } } return () => clearTimeout(timer); }, [text, phase]); return ( {text || '\u00A0'} ); } function Hero() { const [time, setTime] = React.useState(''); // Curated photos for the homepage hero (4 selected by the team) const photos = REAL_PHOTOS.homepageHero; React.useEffect(() => { const tick = () => { const d = new Date(); setTime(d.toLocaleTimeString('en-US', { timeZone: 'America/New_York', hour: '2-digit', minute: '2-digit' }) + ' EST'); }; tick(); const id = setInterval(tick, 60000); return () => clearInterval(id); }, []); return (

{/* Top meta row */}

Est. 2025 — Texas The talent house for the cultural present. {time} — New York

{/* Headline */}

The house for
the creators
what's next.

{/* Media grid — team video (left, spans 2 rows) + 4 talent photos (2×2). */}

{/* Bottom intro + CTAs */}

Collegare is a creator-first talent house and brand partnerships agency. We represent the voices defining wellness, beauty, food, and lifestyle — and we build the campaigns the rest of the industry studies later.

View the Work → Start a Project

In this issue

01. The house
02. The team
03. Selected campaigns
04. Get in touch

); } // ============================================================================= // PRESS BAND — "As featured in" // ============================================================================= function PressBand() { // For Creators, By Creators — a marquee of curated talent photos const photos = REAL_PHOTOS.marquee; return (

i. By Creators, For Creators

The faces of the house.

{/* Marquee row */}

{[...photos, ...photos].map((src, i) => ( Collegare creator

))}

Wellness · Beauty · Food · Lifestyle · Hospitality View the Work →

); } // ============================================================================= // MISSION — service explanation w/ inline stats // ============================================================================= function Mission() { const photos = React.useMemo(() => randomTalent(2), []); return (

i.The House

—
Collegare, from the Italian, means to connect.

Collegare connects creators with opportunity. We represent the voices defining wellness, beauty, food, and lifestyle — and we build the campaigns the rest of the industry studies later.

{/* Origin story */}

The Origin

W e build your creator business and connect you to the right brands that care. We develop and curate a personalized social and content strategy — because as partners, we treat you as such. Your wins are our wins.

We sit between talent and brands as manager, agency, producer, and second opinion. We think in seasons, not campaigns. We say no often. And we believe the next chapter of culture will be built by the creators working right now — the ones who know their audience by name, and the ones who haven't stopped caring yet.

{/* Pillars w/ talent photo insert */}

01 — Built On The Work

Flagship partnerships, not filler.

We pick our brands the way we pick our talent — for taste, ambition, and the willingness to make work people actually remember. Quality over volume.

02 — A Team You Trust

Senior operators, on the phone.

A small team with experience that compounds. Built to actually answer the phone, not pass you to a junior account manager.

03 — Community by design

A creator network we curate.

Our creator community is built deliberately, in person and online — through dinners, workshops, and the Collegare On Tour event series. Real rooms, real relationships, the work that doesn't show up in a follower count.

{/* House principles */}

House Principles

{[ ['Taste over tonnage', 'One creator done right beats ten done fast.'], ['Careers over campaigns', 'We think in decades.'], ['Proximity is the job', 'If you can\u2019t reach us Saturday, we\u2019re doing it wrong.'], ['Small by design', 'We\u2019ll stay small. That\u2019s a feature.'], ].map(([t, d]) => (

— {t}

{d}

))}

); } // ============================================================================= // CASE STUDIES — video tile grid w/ brand overlays // ============================================================================= function CaseStudies() { const scrollerRef = React.useRef(null); const [activeIdx, setActiveIdx] = React.useState(0); // Per-tile hover state so videos play on hover const videoRefs = React.useRef([]); const scrollBy = (dir) => { const sc = scrollerRef.current; if (!sc) return; const tile = sc.children[0]; if (!tile) return; const w = tile.getBoundingClientRect().width + 12; sc.scrollBy({ left: dir * w, behavior: 'smooth' }); }; React.useEffect(() => { const sc = scrollerRef.current; if (!sc) return; const onScroll = () => { const tile = sc.children[0]; if (!tile) return; const w = tile.getBoundingClientRect().width + 12; const idx = Math.round(sc.scrollLeft / w); setActiveIdx(Math.max(0, Math.min(CASE_STUDIES.length - 1, idx))); }; sc.addEventListener('scroll', onScroll, { passive: true }); return () => sc.removeEventListener('scroll', onScroll); }, []); return (

iii. Selected Work

Campaigns in motion.

Five campaigns this season. Drag, scroll, or use the arrows to explore — hover any tile to play the reel.

{String(activeIdx + 1).padStart(2, '0')} / {String(CASE_STUDIES.length).padStart(2, '0')}

{/* Carousel */}

{CASE_STUDIES.map(cs => (

))}

); } function Moments() { return (

ii.A Moment

From the house —
{new Date().toLocaleString('en-US', { month: 'long' })} {new Date().getFullYear()}.

); } // ============================================================================= // TEAM PREVIEW — small grid w/ link to About // ============================================================================= function Team() { return (

iii.The Team

A small house, on purpose.

Collegare is founded and led by Skylar and Maya — operators with deep relationships across talent, brands, and platforms. The team is intentionally small, and built to stay that way.

{[ { name: 'Maya', role: 'Co-founder, COO', imgKey: 'maya' }, { name: 'Skylar', role: 'Co-founder, CMO', imgKey: 'skylar' }, ].map(t => (

{t.name}

{t.role}

))}

); } // ============================================================================= // IN NUMBERS — big stats // ============================================================================= function InNumbers() { const stats = [ { v: '10+', k: 'Flagship brand partnerships', d: 'Across wellness, beauty, food, hospitality, and lifestyle.' }, { v: '3', k: 'Creator community events, produced', d: 'Dinners, immersions, and rooms our talent actually want to be in.' }, { v: '2025', k: 'The year we started', d: "Built to think in decades, not quarters." }, ]; return (

iv. In Numbers

The work, quantified.

Numbers don't make the work — but they tell the truth about the shape of it. This is where Collegare is, this season.

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

0 ? 32 : 0, display: 'flex', flexDirection: 'column', }}>

{s.v}

{s.k}

{s.d}

))}

); } // ============================================================================= // CONNECT — abbreviated form CTA // ============================================================================= function Connect() { const [type, setType] = React.useState('Brand'); return (

vi.Get in Touch

Let's talk.

Whether you're a creator searching for management, a brand planning their next campaign, or a manager looking to join the team — we'd like to hear from you.

Direct

contact@collegaretalentmanagement.com

{ e.preventDefault(); const data = new FormData(e.currentTarget); const subject = `Collegare inquiry — ${type}`; const body = [ `Type: ${type}`, `Name: ${data.get('name') || ''}`, `Organization: ${data.get('org') || ''}`, `Email: ${data.get('email') || ''}`, `Role: ${data.get('role') || ''}`, '', 'Brief:', data.get('brief') || '', ].join('\n'); window.location.href = `mailto:contact@collegaretalentmanagement.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; }}>

Application Type

{['Creator', 'Brand', 'Manager', 'Press', 'Other'].map(t => ( ))}

{[ { label: 'Name', name: 'name' }, { label: type === 'Creator' ? 'Handle' : type === 'Brand' ? 'Company' : type === 'Press' ? 'Publication' : 'Organization', name: 'org' }, { label: 'Email', name: 'email', type: 'email' }, { label: type === 'Creator' ? 'Platform' : 'Role', name: 'role' }, ].map(f => (

{f.label}

))}

The Brief

</div>

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid var(--line)' }}>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)' }}>We read every submission.</div>
            <button type="submit" className="btn btn--primary">Submit <span className="arrow">→</span></button>
          </div>
        </form>
      </div>
    </section>
  );
}

// =============================================================================
// PAGE
// =============================================================================

function HomePage() {
  return (
    <div>
      <Nav current="" />
      <main>
        <Hero />
        <Mission />
        <Moments />
        <Team />
        <InNumbers />
        <SelectedWorkCarousel eyebrowNum="v" headline="Campaigns in motion." />
        <Connect />
        <ByCreatorsMarquee />
      </main>
      <Footer />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HomePage />);

// Inject pulse keyframe for the Reel indicator
const style = document.createElement('style');
style.textContent = `
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
`;
document.head.appendChild(style);

The house for the creators what's next.