1306 lines
44 KiB
HTML
1306 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>That2ndGuy — Investor Pitch Deck</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');
|
||
|
||
:root {
|
||
--green: #1a5632;
|
||
--green-light: #2d8a4e;
|
||
--green-dark: #0e3a20;
|
||
--gold: #c9a84c;
|
||
--gold-light: #e0c777;
|
||
--cream: #f5f0e8;
|
||
--charcoal: #1a1a1a;
|
||
--white: #ffffff;
|
||
--gray: #6b7280;
|
||
--gray-light: #e5e7eb;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background: var(--charcoal);
|
||
color: var(--charcoal);
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
}
|
||
|
||
.slide {
|
||
display: none;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
padding: 60px 80px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slide.active { display: flex; }
|
||
|
||
/* Navigation */
|
||
.nav {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 40px;
|
||
z-index: 100;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav button {
|
||
background: rgba(26,86,50,0.9);
|
||
color: white;
|
||
border: none;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.nav button:hover { background: var(--green-light); transform: scale(1.1); }
|
||
.nav button:disabled { opacity: 0.3; cursor: default; transform: none; }
|
||
|
||
.slide-counter {
|
||
position: fixed;
|
||
bottom: 38px;
|
||
left: 40px;
|
||
z-index: 100;
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,0.5);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.slide-counter.dark { color: rgba(0,0,0,0.3); }
|
||
|
||
/* ========== SLIDE STYLES ========== */
|
||
|
||
/* Title Slide */
|
||
.slide-title {
|
||
background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 50%, var(--green-light) 100%);
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
.slide-title .brand-name {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 96px;
|
||
font-weight: 900;
|
||
letter-spacing: -2px;
|
||
margin-bottom: 16px;
|
||
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||
}
|
||
.slide-title .tagline {
|
||
font-size: 28px;
|
||
font-weight: 300;
|
||
color: var(--gold-light);
|
||
letter-spacing: 6px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 60px;
|
||
}
|
||
.slide-title .subtitle {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: rgba(255,255,255,0.6);
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
}
|
||
.slide-title .golf-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 40px;
|
||
opacity: 0.7;
|
||
}
|
||
.slide-title .decorative-line {
|
||
width: 80px;
|
||
height: 3px;
|
||
background: var(--gold);
|
||
margin: 24px auto;
|
||
}
|
||
|
||
/* White slides */
|
||
.slide-white {
|
||
background: var(--white);
|
||
flex-direction: column;
|
||
}
|
||
.slide-cream {
|
||
background: var(--cream);
|
||
flex-direction: column;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 4px;
|
||
color: var(--green);
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.slide-heading {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
color: var(--charcoal);
|
||
line-height: 1.15;
|
||
margin-bottom: 8px;
|
||
}
|
||
.slide-heading .accent { color: var(--green); }
|
||
.slide-subheading {
|
||
font-size: 20px;
|
||
color: var(--gray);
|
||
font-weight: 400;
|
||
margin-bottom: 40px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Two Column */
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
flex: 1;
|
||
align-items: center;
|
||
}
|
||
.three-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 30px;
|
||
flex: 1;
|
||
}
|
||
|
||
/* Stat Cards */
|
||
.stat-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.stat-card .stat-value {
|
||
font-size: 42px;
|
||
font-weight: 800;
|
||
color: var(--green);
|
||
margin-bottom: 4px;
|
||
}
|
||
.stat-card .stat-label {
|
||
font-size: 14px;
|
||
color: var(--gray);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
.stat-card .stat-detail {
|
||
font-size: 13px;
|
||
color: var(--gray);
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Chart container */
|
||
.chart-container {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
position: relative;
|
||
}
|
||
.chart-container canvas {
|
||
max-height: 300px;
|
||
}
|
||
.chart-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* Competitor table */
|
||
.comp-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.comp-table th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
color: var(--gray);
|
||
padding: 12px 16px;
|
||
border-bottom: 2px solid var(--gray-light);
|
||
font-weight: 600;
|
||
}
|
||
.comp-table td {
|
||
padding: 14px 16px;
|
||
font-size: 14px;
|
||
border-bottom: 1px solid var(--gray-light);
|
||
color: var(--charcoal);
|
||
}
|
||
.comp-table tr:last-child td {
|
||
background: rgba(26,86,50,0.05);
|
||
font-weight: 600;
|
||
color: var(--green);
|
||
border-bottom: 2px solid var(--green);
|
||
}
|
||
|
||
/* Feature list */
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
background: white;
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.feature-icon {
|
||
font-size: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
.feature-item h4 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
color: var(--charcoal);
|
||
}
|
||
.feature-item p {
|
||
font-size: 13px;
|
||
color: var(--gray);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
display: flex;
|
||
gap: 0;
|
||
flex: 1;
|
||
align-items: stretch;
|
||
}
|
||
.timeline-phase {
|
||
flex: 1;
|
||
padding: 30px;
|
||
position: relative;
|
||
border-radius: 16px;
|
||
margin: 0 8px;
|
||
}
|
||
.timeline-phase:nth-child(1) { background: var(--green-dark); color: white; }
|
||
.timeline-phase:nth-child(2) { background: var(--green); color: white; }
|
||
.timeline-phase:nth-child(3) { background: var(--green-light); color: white; }
|
||
.timeline-phase h3 {
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
opacity: 0.7;
|
||
margin-bottom: 8px;
|
||
}
|
||
.timeline-phase h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 26px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.timeline-phase ul {
|
||
list-style: none;
|
||
font-size: 13px;
|
||
line-height: 2;
|
||
}
|
||
.timeline-phase ul li::before {
|
||
content: "→ ";
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Quote */
|
||
.quote-block {
|
||
border-left: 4px solid var(--gold);
|
||
padding: 20px 30px;
|
||
background: rgba(201,168,76,0.08);
|
||
border-radius: 0 12px 12px 0;
|
||
margin: 20px 0;
|
||
}
|
||
.quote-block p {
|
||
font-size: 18px;
|
||
font-style: italic;
|
||
color: var(--charcoal);
|
||
line-height: 1.6;
|
||
}
|
||
.quote-block cite {
|
||
font-size: 13px;
|
||
color: var(--gray);
|
||
font-style: normal;
|
||
margin-top: 8px;
|
||
display: block;
|
||
}
|
||
|
||
/* Tailwind card */
|
||
.tailwind-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 16px;
|
||
flex: 1;
|
||
align-items: start;
|
||
}
|
||
.tailwind-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 28px 20px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.tailwind-card .tw-num {
|
||
font-size: 48px;
|
||
font-weight: 900;
|
||
color: var(--green);
|
||
margin-bottom: 4px;
|
||
}
|
||
.tailwind-card h4 {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--charcoal);
|
||
}
|
||
.tailwind-card p {
|
||
font-size: 12px;
|
||
color: var(--gray);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Funding table */
|
||
.funding-bar {
|
||
display: flex;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
margin: 20px 0;
|
||
}
|
||
.funding-bar div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: white;
|
||
white-space: nowrap;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
/* Valuetainment slide */
|
||
.slide-dark {
|
||
background: linear-gradient(135deg, var(--charcoal), #2a2a2a);
|
||
color: white;
|
||
flex-direction: column;
|
||
}
|
||
.slide-dark .section-label { color: var(--gold); }
|
||
.slide-dark .slide-heading { color: white; }
|
||
.slide-dark .slide-subheading { color: rgba(255,255,255,0.6); }
|
||
|
||
.vt-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
flex: 1;
|
||
}
|
||
.vt-card {
|
||
background: rgba(255,255,255,0.06);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 16px;
|
||
padding: 28px;
|
||
}
|
||
.vt-card h4 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--gold-light);
|
||
}
|
||
.vt-card p {
|
||
font-size: 13px;
|
||
color: rgba(255,255,255,0.6);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Summary slide */
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
flex: 1;
|
||
}
|
||
.summary-card {
|
||
background: rgba(255,255,255,0.08);
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
text-align: center;
|
||
}
|
||
.summary-card .icon { font-size: 36px; margin-bottom: 12px; }
|
||
.summary-card .val {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
color: var(--gold-light);
|
||
margin-bottom: 4px;
|
||
}
|
||
.summary-card .lbl {
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
color: rgba(255,255,255,0.5);
|
||
}
|
||
|
||
/* Print / PDF */
|
||
@media print {
|
||
.slide { display: flex !important; page-break-after: always; height: 100vh; }
|
||
.nav, .slide-counter { display: none; }
|
||
}
|
||
|
||
/* Persona card */
|
||
.persona-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 36px;
|
||
box-shadow: 0 4px 30px rgba(0,0,0,0.08);
|
||
text-align: center;
|
||
border: 2px solid var(--green);
|
||
}
|
||
.persona-emoji { font-size: 64px; margin-bottom: 12px; }
|
||
.persona-card h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
color: var(--green-dark);
|
||
}
|
||
.persona-card p {
|
||
font-size: 14px;
|
||
color: var(--gray);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.product-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 16px;
|
||
}
|
||
.product-item {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 24px 16px;
|
||
text-align: center;
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
||
}
|
||
.product-item .prod-icon { font-size: 40px; margin-bottom: 10px; }
|
||
.product-item h4 { font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 2px; }
|
||
.product-item .prod-price { font-size: 14px; font-weight: 700; color: var(--green); }
|
||
.product-item p { font-size: 11px; color: var(--gray); margin-top: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ===================== SLIDE 1: TITLE ===================== -->
|
||
<div class="slide slide-title active" id="s1">
|
||
<div class="golf-icon">⛳</div>
|
||
<div class="brand-name">That2ndGuy</div>
|
||
<div class="decorative-line"></div>
|
||
<div class="tagline">Play Different. Look Better.</div>
|
||
<div class="subtitle">Golf Lifestyle Apparel — Investor Pitch Deck</div>
|
||
<div style="position:absolute;bottom:40px;font-size:13px;color:rgba(255,255,255,0.35);letter-spacing:1px;">
|
||
Prepared for Patrick Bet-David / Valuetainment · January 2026
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 2: THE PROBLEM ===================== -->
|
||
<div class="slide slide-white" id="s2">
|
||
<div class="section-label">The Problem</div>
|
||
<div class="slide-heading">Golf's Image Problem Is a<br><span class="accent">$5 Billion Opportunity</span></div>
|
||
<div class="slide-subheading">47.2 million Americans play golf — the most ever recorded. But the brands haven't caught up.</div>
|
||
<div class="two-col">
|
||
<div>
|
||
<div class="feature-grid" style="grid-template-columns:1fr;">
|
||
<div class="feature-item">
|
||
<div class="feature-icon">👴</div>
|
||
<div>
|
||
<h4>Legacy Brands Design for 55+</h4>
|
||
<p>Nike, Adidas, Callaway, Greg Norman — all optimized for the country club demographic. Pleated khakis and plain polos.</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🔥</div>
|
||
<div>
|
||
<h4>Fastest-Growing Demo: 18–34</h4>
|
||
<p>6.3 million on-course players aged 18–34 — now the <strong>largest age group</strong>. Six straight years of growth.</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">😤</div>
|
||
<div>
|
||
<h4>They Can't Find Their Brand</h4>
|
||
<p>Young golfers want apparel that reflects who they are. They don't want to dress like their dads on the course.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quote-block" style="margin-top: 24px;">
|
||
<p>"The culture of golf is changing faster than the brands."</p>
|
||
<cite>— Lightspeed Golf Industry Report, 2025</cite>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="chart-container">
|
||
<div class="chart-title">US Golf Participation Surge (Millions)</div>
|
||
<canvas id="chartParticipation"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 3: MARKET ===================== -->
|
||
<div class="slide slide-cream" id="s3">
|
||
<div class="section-label">Market Opportunity</div>
|
||
<div class="slide-heading">A <span class="accent">$4.8 Billion</span> Market<br>Growing at 6%+ CAGR</div>
|
||
<div class="slide-subheading">The golf apparel market is projected to nearly double by 2032.</div>
|
||
<div class="two-col" style="flex:1;">
|
||
<div>
|
||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
|
||
<div class="stat-card">
|
||
<div class="stat-value">$4.8B</div>
|
||
<div class="stat-label">Market Size (2025)</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">$7.3B</div>
|
||
<div class="stat-label">Projected (2032)</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">6.2%</div>
|
||
<div class="stat-label">CAGR</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">47.2M</div>
|
||
<div class="stat-label">US Participants</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="border-left: 4px solid var(--gold);">
|
||
<div class="stat-label" style="margin-bottom:8px;">Key Insight</div>
|
||
<div class="stat-detail" style="font-size:15px; color: var(--charcoal);">
|
||
The lifestyle/streetwear segment is the <strong>fastest-growing sub-category</strong>, driven entirely by younger demographics. 43% rise in lifestyle-based golf wear. 33% increase in youth and women participation.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container">
|
||
<div class="chart-title">Golf Apparel Market Growth ($ Billions)</div>
|
||
<canvas id="chartMarketGrowth"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 4: DEMOGRAPHICS ===================== -->
|
||
<div class="slide slide-white" id="s4">
|
||
<div class="section-label">The Demographic Shift</div>
|
||
<div class="slide-heading">Golf's New Player Base Is<br><span class="accent">Young, Diverse & Style-Conscious</span></div>
|
||
<div class="slide-subheading">Gen Z and Millennials aren't just playing — they're redefining the sport.</div>
|
||
<div class="two-col" style="flex:1;">
|
||
<div>
|
||
<div class="chart-container" style="margin-bottom:20px;">
|
||
<div class="chart-title">What Motivates Young Golfers?</div>
|
||
<canvas id="chartMotivation"></canvas>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:grid; gap:16px;">
|
||
<div class="stat-card" style="display:flex; align-items:center; gap:20px;">
|
||
<div style="font-size:42px;">🧠</div>
|
||
<div>
|
||
<div class="stat-value" style="font-size:32px;">51%</div>
|
||
<div class="stat-label">of Gen Z play for mental health</div>
|
||
<div class="stat-detail">Self-care is the #1 reason Gen Z picks up a club</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; align-items:center; gap:20px;">
|
||
<div style="font-size:42px;">🏌️</div>
|
||
<div>
|
||
<div class="stat-value" style="font-size:32px;">84%</div>
|
||
<div class="stat-label">of Millennials play solo rounds</div>
|
||
<div class="stat-detail">Golf is becoming a personal ritual, not just a social activity</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; align-items:center; gap:20px;">
|
||
<div style="font-size:42px;">📈</div>
|
||
<div>
|
||
<div class="stat-value" style="font-size:32px;">6 Years</div>
|
||
<div class="stat-label">Consecutive growth, 18–34 demo</div>
|
||
<div class="stat-detail">Participation up 30% since 2016 per National Golf Foundation</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="border-left:4px solid var(--gold);">
|
||
<div class="stat-detail" style="font-size:14px; color:var(--charcoal);">
|
||
<strong>The gap:</strong> Legacy brands serve performance. Nobody is owning the <strong>culture + style</strong> space at scale. These golfers view apparel as part of their personal brand.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 5: COMPETITION ===================== -->
|
||
<div class="slide slide-white" id="s5">
|
||
<div class="section-label">Competitive Landscape</div>
|
||
<div class="slide-heading">The Market Is Validating the Thesis —<br><span class="accent">But No One Has Won Yet</span></div>
|
||
<div class="slide-subheading">Streetwear-golf brands prove demand exists. None have scaled to mainstream DTC.</div>
|
||
<div style="flex:1; display:flex; flex-direction:column; gap:24px;">
|
||
<div class="chart-container" style="flex:1;">
|
||
<table class="comp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Brand</th>
|
||
<th>Founded</th>
|
||
<th>Positioning</th>
|
||
<th>Price Point</th>
|
||
<th>Weakness</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Malbon Golf</strong></td>
|
||
<td>2017</td>
|
||
<td>Streetwear meets golf, LA lifestyle</td>
|
||
<td>$80+ polos</td>
|
||
<td>Premium pricing, limited drops</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Eastside Golf</strong></td>
|
||
<td>2020</td>
|
||
<td>Culture-forward, HBCU roots, Jordan collab</td>
|
||
<td>$60-100+</td>
|
||
<td>Niche audience, limited SKUs</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Bogey Boys</strong></td>
|
||
<td>2021</td>
|
||
<td>Celebrity-driven (Macklemore), bold prints</td>
|
||
<td>$70-120</td>
|
||
<td>Celebrity-dependent, inconsistent</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Metalwood Studio</strong></td>
|
||
<td>2020</td>
|
||
<td>Retro graphic streetwear aesthetic</td>
|
||
<td>$40-80</td>
|
||
<td>Small, more streetwear than golf</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🟢 That2ndGuy</strong></td>
|
||
<td>2026</td>
|
||
<td>Accessible lifestyle golf — always in stock</td>
|
||
<td>$35-65</td>
|
||
<td>First-mover in accessible DTC lifestyle golf</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;">
|
||
<div class="stat-card" style="text-align:center; border-top: 3px solid var(--green);">
|
||
<div style="font-size:24px; margin-bottom:8px;">🔓</div>
|
||
<div style="font-size:14px; font-weight:700; color:var(--charcoal);">No Mainstream DTC Player</div>
|
||
<div class="stat-detail">All competitors use limited-drop streetwear model</div>
|
||
</div>
|
||
<div class="stat-card" style="text-align:center; border-top: 3px solid var(--gold);">
|
||
<div style="font-size:24px; margin-bottom:8px;">💰</div>
|
||
<div style="font-size:14px; font-weight:700; color:var(--charcoal);">Price Gap at $35–65</div>
|
||
<div class="stat-detail">Accessible + stylish — no one owns this range</div>
|
||
</div>
|
||
<div class="stat-card" style="text-align:center; border-top: 3px solid var(--green-light);">
|
||
<div style="font-size:24px; margin-bottom:8px;">📦</div>
|
||
<div style="font-size:14px; font-weight:700; color:var(--charcoal);">Always Available Model</div>
|
||
<div class="stat-detail">Consistent supply beats hype-driven scarcity</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 6: THE BRAND ===================== -->
|
||
<div class="slide slide-cream" id="s6">
|
||
<div class="section-label">The Brand</div>
|
||
<div class="slide-heading">Why <span class="accent">"That2ndGuy"</span>?</div>
|
||
<div class="slide-subheading">Every foursome has one. He's not the best golfer — but he has the best time.</div>
|
||
<div class="two-col" style="flex:1;">
|
||
<div>
|
||
<div class="persona-card">
|
||
<div class="persona-emoji">🏌️♂️</div>
|
||
<h3>That2ndGuy</h3>
|
||
<p style="font-size:16px; margin-bottom:16px;">
|
||
Not the scratch golfer. The one everyone wants to play with.
|
||
</p>
|
||
<p>
|
||
Shows up looking <strong>clean</strong>. Brings the <strong>energy</strong>. Tells the best stories.
|
||
Doesn't need a single-digit handicap to own the course.
|
||
</p>
|
||
<div style="margin-top:20px; padding-top:20px; border-top: 1px solid var(--gray-light);">
|
||
<p style="font-weight:700; color:var(--green); font-size:15px;">
|
||
Relatable > Aspirational
|
||
</p>
|
||
<p style="font-size:13px;">
|
||
This is the golfer <strong>90% of players</strong> actually are.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:grid; gap:16px;">
|
||
<div class="feature-item" style="background:white;">
|
||
<div class="feature-icon">🏌️</div>
|
||
<div>
|
||
<h4>On-Course Performance</h4>
|
||
<p>Moisture-wicking, 4-way stretch fabrics. Course-appropriate styling that passes any dress code.</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item" style="background:white;">
|
||
<div class="feature-icon">🔥</div>
|
||
<div>
|
||
<h4>Off-Course Style</h4>
|
||
<p>Designs you'd wear to brunch, the bar, or the office. Golf apparel that doesn't look like golf apparel.</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item" style="background:white;">
|
||
<div class="feature-icon">💰</div>
|
||
<div>
|
||
<h4>Accessible Pricing</h4>
|
||
<p>$35–65 polos, $45–75 bottoms. Half the price of Malbon, twice the personality of Nike.</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item" style="background:white;">
|
||
<div class="feature-icon">🎯</div>
|
||
<div>
|
||
<h4>Target: 22–40 Recreational</h4>
|
||
<p>Style-conscious, golfs 2–8x/month. Wants to look good without trying too hard.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 7: PRODUCT LINE ===================== -->
|
||
<div class="slide slide-white" id="s7">
|
||
<div class="section-label">Product Line</div>
|
||
<div class="slide-heading">Phase 1 Launch <span class="accent">Collection</span></div>
|
||
<div class="slide-subheading">15–20 SKUs across 5 core categories. On-course performance, off-course style.</div>
|
||
<div style="flex:1; display:flex; flex-direction:column; gap:30px; justify-content:center;">
|
||
<div class="product-grid">
|
||
<div class="product-item">
|
||
<div class="prod-icon">👕</div>
|
||
<h4>Performance Polos</h4>
|
||
<div class="prod-price">$35–$65</div>
|
||
<p>Classic & bold prints. Moisture-wicking stretch fabric.</p>
|
||
</div>
|
||
<div class="product-item">
|
||
<div class="prod-icon">👖</div>
|
||
<h4>Golf Joggers & Pants</h4>
|
||
<div class="prod-price">$45–$75</div>
|
||
<p>Slim-fit comfort. Course to cocktails.</p>
|
||
</div>
|
||
<div class="product-item">
|
||
<div class="prod-icon">🧥</div>
|
||
<h4>Quarter-Zips</h4>
|
||
<div class="prod-price">$55–$80</div>
|
||
<p>Layering essentials. Clean lines, modern fit.</p>
|
||
</div>
|
||
<div class="product-item">
|
||
<div class="prod-icon">🧢</div>
|
||
<h4>Headwear</h4>
|
||
<div class="prod-price">$25–$40</div>
|
||
<p>Snapbacks, bucket hats. Statement pieces.</p>
|
||
</div>
|
||
<div class="product-item">
|
||
<div class="prod-icon">🧤</div>
|
||
<h4>Accessories</h4>
|
||
<div class="prod-price">$12–$30</div>
|
||
<p>Gloves, towels, ball markers. Brand touchpoints.</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
|
||
<div class="stat-card" style="text-align:center;">
|
||
<div class="stat-value" style="font-size:28px;">$85–$120</div>
|
||
<div class="stat-label">Avg Order Value</div>
|
||
</div>
|
||
<div class="stat-card" style="text-align:center;">
|
||
<div class="stat-value" style="font-size:28px;">60–65%</div>
|
||
<div class="stat-label">Gross Margin (DTC)</div>
|
||
</div>
|
||
<div class="stat-card" style="text-align:center;">
|
||
<div class="stat-value" style="font-size:28px;">3:1+</div>
|
||
<div class="stat-label">LTV:CAC by Year 2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 8: GTM ===================== -->
|
||
<div class="slide slide-cream" id="s8">
|
||
<div class="section-label">Go-to-Market Strategy</div>
|
||
<div class="slide-heading">DTC-First, <span class="accent">Community-Driven</span></div>
|
||
<div class="slide-subheading">Three phases to scale from launch to category leadership.</div>
|
||
<div class="timeline" style="flex:1;">
|
||
<div class="timeline-phase">
|
||
<h3>Phase 1</h3>
|
||
<h2>Launch</h2>
|
||
<div style="font-size:12px; opacity:0.7; margin-bottom:16px;">Months 1–6</div>
|
||
<ul>
|
||
<li>DTC Shopify store at that2ndguy.com</li>
|
||
<li>15–20 SKUs across 4 categories</li>
|
||
<li>Pre-launch email list + social</li>
|
||
<li>Influencer seeding: golf creators</li>
|
||
<li>Pop-up at Topgolf / public course</li>
|
||
</ul>
|
||
</div>
|
||
<div class="timeline-phase">
|
||
<h3>Phase 2</h3>
|
||
<h2>Growth</h2>
|
||
<div style="font-size:12px; opacity:0.7; margin-bottom:16px;">Months 6–18</div>
|
||
<ul>
|
||
<li>Content engine: course vlogs, branded series</li>
|
||
<li>"Second Guy Saturdays" community events</li>
|
||
<li>Wholesale: PGA Tour Superstore, pro shops</li>
|
||
<li>Brand collaborations & limited drops</li>
|
||
<li>Loyalty program launch</li>
|
||
</ul>
|
||
</div>
|
||
<div class="timeline-phase">
|
||
<h3>Phase 3</h3>
|
||
<h2>Scale</h2>
|
||
<div style="font-size:12px; opacity:0.7; margin-bottom:16px;">18+ Months</div>
|
||
<ul>
|
||
<li>Amazon storefront</li>
|
||
<li>International: UK, Canada, Australia</li>
|
||
<li>Women's line extension</li>
|
||
<li>Corporate / event custom apparel</li>
|
||
<li>Multi-channel retail presence</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 9: REVENUE ===================== -->
|
||
<div class="slide slide-white" id="s9">
|
||
<div class="section-label">Revenue Projections</div>
|
||
<div class="slide-heading">Conservative <span class="accent">Growth Model</span></div>
|
||
<div class="slide-subheading">Built on DTC fundamentals with multi-channel expansion.</div>
|
||
<div class="two-col" style="flex:1;">
|
||
<div class="chart-container">
|
||
<div class="chart-title">Projected Revenue ($ Millions)</div>
|
||
<canvas id="chartRevenue"></canvas>
|
||
</div>
|
||
<div>
|
||
<div style="display:grid; gap:16px;">
|
||
<div class="stat-card" style="display:flex; justify-content: space-between; align-items:center;">
|
||
<div>
|
||
<div class="stat-label">Year 1</div>
|
||
<div style="font-size:13px; color:var(--gray); margin-top:4px;">DTC launch, influencer push</div>
|
||
</div>
|
||
<div class="stat-value" style="font-size:28px;">$250–500K</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; justify-content: space-between; align-items:center;">
|
||
<div>
|
||
<div class="stat-label">Year 2</div>
|
||
<div style="font-size:13px; color:var(--gray); margin-top:4px;">Wholesale + repeat customers</div>
|
||
</div>
|
||
<div class="stat-value" style="font-size:28px;">$1–2M</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; justify-content: space-between; align-items:center;">
|
||
<div>
|
||
<div class="stat-label">Year 3</div>
|
||
<div style="font-size:13px; color:var(--gray); margin-top:4px;">Multi-channel, women's line</div>
|
||
</div>
|
||
<div class="stat-value" style="font-size:28px;">$3–5M</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; justify-content: space-between; align-items:center;">
|
||
<div>
|
||
<div class="stat-label">Year 5</div>
|
||
<div style="font-size:13px; color:var(--gray); margin-top:4px;">Category leader, international</div>
|
||
</div>
|
||
<div class="stat-value" style="font-size:28px;">$8–15M</div>
|
||
</div>
|
||
<div class="stat-card" style="border-left:4px solid var(--gold);">
|
||
<div class="stat-detail" style="font-size:14px; color:var(--charcoal);">
|
||
<strong>Comparable:</strong> Vuori (athleisure) reached $4B valuation. Malbon Golf reportedly valued at $50M+. Golf lifestyle is a category waiting for its breakout brand.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 10: WHY NOW ===================== -->
|
||
<div class="slide slide-cream" id="s10">
|
||
<div class="section-label">Timing</div>
|
||
<div class="slide-heading">Five Tailwinds <span class="accent">Converging</span></div>
|
||
<div class="slide-subheading">The window is open. The category leader hasn't been crowned yet.</div>
|
||
<div class="tailwind-grid" style="flex:1; align-items:center;">
|
||
<div class="tailwind-card">
|
||
<div class="tw-num">1</div>
|
||
<h4>Record Participation</h4>
|
||
<p>47.2M golfers. 6th consecutive year of growth in 18–34 demo. Reach up 30% since 2016.</p>
|
||
</div>
|
||
<div class="tailwind-card">
|
||
<div class="tw-num">2</div>
|
||
<h4>Cultural Shift</h4>
|
||
<p>Golf is cool. Travis Kelce, Steph Curry, Post Malone all play publicly. Gen Z embraces it as "old money" lifestyle.</p>
|
||
</div>
|
||
<div class="tailwind-card">
|
||
<div class="tw-num">3</div>
|
||
<h4>Athleisure Crossover</h4>
|
||
<p>Golf joggers and polos are now everyday wear. The line between course and casual is dissolving.</p>
|
||
</div>
|
||
<div class="tailwind-card">
|
||
<div class="tw-num">4</div>
|
||
<h4>Media Validation</h4>
|
||
<p>Hypebeast, GQ, Complex all covering golf fashion. The editorial establishment says golf is now fashion.</p>
|
||
</div>
|
||
<div class="tailwind-card">
|
||
<div class="tw-num">5</div>
|
||
<h4>DTC Infrastructure</h4>
|
||
<p>Shopify + social commerce + influencer marketing = lower launch costs than ever before.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 11: THE ASK ===================== -->
|
||
<div class="slide slide-white" id="s11">
|
||
<div class="section-label">The Ask</div>
|
||
<div class="slide-heading">Seeking <span class="accent">$250,000</span> Seed Investment</div>
|
||
<div class="slide-subheading">Capital to launch, build inventory, and capture market share in the fastest-growing golf demographic.</div>
|
||
<div class="two-col" style="flex:1;">
|
||
<div>
|
||
<div class="chart-container">
|
||
<div class="chart-title">Use of Funds ($250K)</div>
|
||
<canvas id="chartFunds"></canvas>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:grid; gap:16px;">
|
||
<div class="stat-card" style="display:flex; gap:16px; align-items:center;">
|
||
<div style="width:48px; height:48px; background:#1a5632; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
||
<span style="color:white; font-size:20px;">📦</span>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:15px; font-weight:700;">Inventory — 40% ($100K)</h4>
|
||
<p style="font-size:13px; color:var(--gray);">First production run across all categories</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; gap:16px; align-items:center;">
|
||
<div style="width:48px; height:48px; background:#c9a84c; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
||
<span style="color:white; font-size:20px;">📣</span>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:15px; font-weight:700;">Marketing & Launch — 25% ($62.5K)</h4>
|
||
<p style="font-size:13px; color:var(--gray);">Influencer seeding, social ads, launch events</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; gap:16px; align-items:center;">
|
||
<div style="width:48px; height:48px; background:#2d8a4e; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
||
<span style="color:white; font-size:20px;">🎨</span>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:15px; font-weight:700;">Brand & Website — 15% ($37.5K)</h4>
|
||
<p style="font-size:13px; color:var(--gray);">Brand identity, Shopify build, photography</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" style="display:flex; gap:16px; align-items:center;">
|
||
<div style="width:48px; height:48px; background:#0e3a20; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
||
<span style="color:white; font-size:20px;">⚙️</span>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:15px; font-weight:700;">Operations & Working Capital — 20% ($50K)</h4>
|
||
<p style="font-size:13px; color:var(--gray);">Fulfillment setup, 3PL, buffer capital</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 12: WHY VALUETAINMENT ===================== -->
|
||
<div class="slide slide-dark" id="s12">
|
||
<div class="section-label">Strategic Partnership</div>
|
||
<div class="slide-heading">Why <span style="color:var(--gold-light);">Valuetainment</span>?</div>
|
||
<div class="slide-subheading">This isn't just an investment — it's a launch pad.</div>
|
||
<div class="vt-grid" style="flex:1;">
|
||
<div class="vt-card">
|
||
<div style="font-size:32px; margin-bottom:12px;">📢</div>
|
||
<h4>Massive Audience Reach</h4>
|
||
<p>Millions of entrepreneurs and business-minded consumers across YouTube, podcasts, and social media. Built-in distribution.</p>
|
||
</div>
|
||
<div class="vt-card">
|
||
<div style="font-size:32px; margin-bottom:12px;">⭐</div>
|
||
<h4>Brand Credibility</h4>
|
||
<p>PBD's personal brand aligns perfectly — ambition, hustle, lifestyle, and looking sharp while doing it.</p>
|
||
</div>
|
||
<div class="vt-card">
|
||
<div style="font-size:32px; margin-bottom:12px;">🎬</div>
|
||
<h4>Content Amplification</h4>
|
||
<p>Valuetainment channels provide instant content distribution that money alone can't buy. Day-one awareness at scale.</p>
|
||
</div>
|
||
<div class="vt-card">
|
||
<div style="font-size:32px; margin-bottom:12px;">🧠</div>
|
||
<h4>Business Mentorship</h4>
|
||
<p>Proven track record of scaling ventures. Access to frameworks, strategy, and operator-level guidance.</p>
|
||
</div>
|
||
<div class="vt-card">
|
||
<div style="font-size:32px; margin-bottom:12px;">🤝</div>
|
||
<h4>Network Effects</h4>
|
||
<p>Introductions to retail partners, manufacturers, influencers, and other portfolio brands. Compounding advantage.</p>
|
||
</div>
|
||
<div class="vt-card">
|
||
<div style="font-size:32px; margin-bottom:12px;">⛳</div>
|
||
<h4>Golf Culture Fit</h4>
|
||
<p>PBD and the Valuetainment audience represent the exact aspirational-yet-relatable golfer That2ndGuy targets.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SLIDE 13: SUMMARY ===================== -->
|
||
<div class="slide slide-title" id="s13" style="justify-content:space-between; padding:60px 80px;">
|
||
<div style="text-align:center; width:100%;">
|
||
<div class="section-label" style="color:var(--gold-light);">Summary</div>
|
||
<div class="brand-name" style="font-size:64px; margin-bottom:8px;">That2ndGuy</div>
|
||
<div style="font-size:18px; color:rgba(255,255,255,0.6); margin-bottom:40px;">at a Glance</div>
|
||
</div>
|
||
<div class="summary-grid" style="width:100%;">
|
||
<div class="summary-card">
|
||
<div class="icon">🎯</div>
|
||
<div class="val">$4.8B</div>
|
||
<div class="lbl">Market, 6%+ CAGR</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="icon">👥</div>
|
||
<div class="val">6.3M+</div>
|
||
<div class="lbl">Target Demo & Growing</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="icon">🏷️</div>
|
||
<div class="val">$35–65</div>
|
||
<div class="lbl">Accessible Pricing</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="icon">💰</div>
|
||
<div class="val">$250K</div>
|
||
<div class="lbl">Seed Ask</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="icon">📈</div>
|
||
<div class="val">$3–5M</div>
|
||
<div class="lbl">Year 3 Revenue</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="icon">🔥</div>
|
||
<div class="val">NOW</div>
|
||
<div class="lbl">Once-in-a-Cycle Window</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center; width:100%;">
|
||
<div class="decorative-line" style="margin:0 auto 20px;"></div>
|
||
<div style="font-size:22px; font-weight:600; color:var(--gold-light);">
|
||
Golf's next generation needs a brand. That2ndGuy is it.
|
||
</div>
|
||
<div style="font-size:14px; color:rgba(255,255,255,0.4); margin-top:16px;">
|
||
that2ndguy.com · Prepared for Valuetainment · January 2026
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="slide-counter" id="slideCounter">1 / 13</div>
|
||
<div class="nav">
|
||
<button id="prevBtn" onclick="navigate(-1)" disabled>‹</button>
|
||
<button id="nextBtn" onclick="navigate(1)">›</button>
|
||
</div>
|
||
|
||
<script>
|
||
let current = 0;
|
||
const slides = document.querySelectorAll('.slide');
|
||
const total = slides.length;
|
||
const counter = document.getElementById('slideCounter');
|
||
|
||
function showSlide(n) {
|
||
slides[current].classList.remove('active');
|
||
current = n;
|
||
slides[current].classList.add('active');
|
||
counter.textContent = `${current + 1} / ${total}`;
|
||
document.getElementById('prevBtn').disabled = current === 0;
|
||
document.getElementById('nextBtn').disabled = current === total - 1;
|
||
|
||
// Dark counter for white/cream slides
|
||
const isDark = slides[current].classList.contains('slide-title') || slides[current].classList.contains('slide-dark');
|
||
counter.className = isDark ? 'slide-counter' : 'slide-counter dark';
|
||
}
|
||
|
||
function navigate(dir) {
|
||
const next = current + dir;
|
||
if (next >= 0 && next < total) showSlide(next);
|
||
}
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); navigate(1); }
|
||
if (e.key === 'ArrowLeft') { e.preventDefault(); navigate(-1); }
|
||
});
|
||
|
||
// ========== CHARTS ==========
|
||
|
||
// Chart 1: Golf Participation
|
||
new Chart(document.getElementById('chartParticipation'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['2016', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
|
||
datasets: [{
|
||
label: 'US Golf Participants (Millions)',
|
||
data: [31.5, 33.5, 34.2, 36.9, 41.1, 44.0, 46.0, 47.2],
|
||
backgroundColor: ['#1a5632','#1a5632','#1a5632','#2d8a4e','#2d8a4e','#2d8a4e','#c9a84c','#c9a84c'],
|
||
borderRadius: 6,
|
||
barThickness: 32,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: (c) => c.raw + 'M participants' }}
|
||
},
|
||
scales: {
|
||
y: { beginAtZero: false, min: 25, ticks: { callback: v => v + 'M' }, grid: { color: 'rgba(0,0,0,0.05)' }},
|
||
x: { grid: { display: false }}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Chart 2: Market Growth
|
||
new Chart(document.getElementById('chartMarketGrowth'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['2024', '2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032'],
|
||
datasets: [{
|
||
label: 'Golf Apparel Market',
|
||
data: [4.54, 4.83, 5.13, 5.45, 5.79, 6.15, 6.53, 6.94, 7.37],
|
||
borderColor: '#1a5632',
|
||
backgroundColor: 'rgba(26,86,50,0.1)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 5,
|
||
pointBackgroundColor: '#1a5632',
|
||
borderWidth: 3,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: (c) => '$' + c.raw + 'B' }}
|
||
},
|
||
scales: {
|
||
y: { ticks: { callback: v => '$' + v + 'B' }, grid: { color: 'rgba(0,0,0,0.05)' }},
|
||
x: { grid: { display: false }}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Chart 3: Motivation
|
||
new Chart(document.getElementById('chartMotivation'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Mental Health\n& Self-Care', 'Solo Play\nInterest', 'Social /\nNetworking', 'Fitness &\nExercise', 'Competition\n& Challenge'],
|
||
datasets: [
|
||
{
|
||
label: 'Gen Z',
|
||
data: [51, 76, 42, 38, 35],
|
||
backgroundColor: '#1a5632',
|
||
borderRadius: 6,
|
||
barThickness: 20,
|
||
},
|
||
{
|
||
label: 'Millennials',
|
||
data: [47, 84, 55, 44, 40],
|
||
backgroundColor: '#c9a84c',
|
||
borderRadius: 6,
|
||
barThickness: 20,
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
indexAxis: 'y',
|
||
plugins: {
|
||
legend: { position: 'bottom', labels: { font: { size: 12 } }},
|
||
tooltip: { callbacks: { label: (c) => c.dataset.label + ': ' + c.raw + '%' }}
|
||
},
|
||
scales: {
|
||
x: { ticks: { callback: v => v + '%' }, max: 100, grid: { color: 'rgba(0,0,0,0.05)' }},
|
||
y: { grid: { display: false }}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Chart 4: Revenue
|
||
new Chart(document.getElementById('chartRevenue'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
|
||
datasets: [{
|
||
label: 'Revenue',
|
||
data: [0.375, 1.5, 4.0, 7.0, 11.5],
|
||
backgroundColor: ['#1a5632', '#1a5632', '#2d8a4e', '#2d8a4e', '#c9a84c'],
|
||
borderRadius: 8,
|
||
barThickness: 40,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: (c) => '$' + c.raw + 'M' }}
|
||
},
|
||
scales: {
|
||
y: { ticks: { callback: v => '$' + v + 'M' }, grid: { color: 'rgba(0,0,0,0.05)' }},
|
||
x: { grid: { display: false }}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Chart 5: Funds Allocation
|
||
new Chart(document.getElementById('chartFunds'), {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Inventory (40%)', 'Marketing & Launch (25%)', 'Brand & Website (15%)', 'Operations (10%)', 'Working Capital (10%)'],
|
||
datasets: [{
|
||
data: [100, 62.5, 37.5, 25, 25],
|
||
backgroundColor: ['#1a5632', '#c9a84c', '#2d8a4e', '#0e3a20', '#e0c777'],
|
||
borderWidth: 0,
|
||
hoverOffset: 8,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
cutout: '55%',
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom',
|
||
labels: { font: { size: 11 }, padding: 12, usePointStyle: true, pointStyleWidth: 10 }
|
||
},
|
||
tooltip: { callbacks: { label: (c) => c.label + ' — $' + c.raw + 'K' }}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|