File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/..//brandCategories.php
<?php
$isEmbedded = basename($_SERVER['SCRIPT_FILENAME'] ?? '') !== basename(__FILE__);
?>
<?php if (!$isEmbedded): ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>thebrand.ai — Industry Playbooks</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cyan: #06b6d4;
--cyan-light: #ecfeff;
--cyan-mid: #cffafe;
--cyan-dark: #0891b2;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border: rgba(0,0,0,0.07);
--border-hover: rgba(6,182,212,0.35);
--bg-page: #f8fafc;
--bg-card: #ffffff;
--bg-muted: #f1f5f9;
--radius-card: 16px;
--radius-pill: 999px;
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-hover: 0 20px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(6,182,212,0.12);
--transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg-page);
color: var(--text-primary);
min-height: 100vh;
}
<?php else: ?>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet" />
<style>
.industry-section,
.industry-section *,
.industry-section *::before,
.industry-section *::after { box-sizing: border-box; margin: 0; padding: 0; }
.industry-section {
--cyan: #06b6d4;
--cyan-light: #ecfeff;
--cyan-mid: #cffafe;
--cyan-dark: #0891b2;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border: rgba(0,0,0,0.07);
--border-hover: rgba(6,182,212,0.35);
--bg-page: transparent;
--bg-card: #ffffff;
--bg-muted: #f1f5f9;
--radius-card: 16px;
--radius-pill: 999px;
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-hover: 0 20px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(6,182,212,0.12);
--transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
color: var(--text-primary);
}
<?php endif; ?>
/* ───── SECTION WRAPPER ───── */
.industry-section {
margin: 0 auto;
padding: 64px 24px 80px;
}
/* ───── HEADER ───── */
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--cyan-light);
color: var(--cyan-dark);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--cyan-mid);
margin-bottom: 20px;
}
.section-eyebrow svg { width: 12px; height: 12px; }
.section-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(32px, 5vw, 52px);
font-weight: 400;
color: var(--text-primary);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-title em { font-style: italic; color: var(--cyan-dark); }
.section-subtitle {
font-size: 17px;
color: var(--text-secondary);
line-height: 1.65;
max-width: 540px;
margin: 0 auto;
}
/* ───── SEARCH ───── */
.search-wrap {
position: relative;
max-width: 440px;
margin: 0 auto 32px;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.search-icon svg { width: 16px; height: 16px; display: block; }
#industry-search {
width: 100%;
padding: 13px 16px 13px 44px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: var(--text-primary);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
outline: none;
transition: var(--transition);
box-shadow: var(--shadow-card);
}
#industry-search::placeholder { color: var(--text-muted); }
#industry-search:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6,182,212,0.12); }
/* ───── CATEGORY FILTERS ───── */
.filters-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
}
.filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
box-shadow: var(--shadow-card);
user-select: none;
}
.filter-btn .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--text-muted);
transition: var(--transition);
flex-shrink: 0;
}
.filter-btn:hover {
color: var(--text-primary);
border-color: rgba(0,0,0,0.14);
}
.filter-btn.active {
background: var(--text-primary);
color: #fff;
border-color: var(--text-primary);
}
.filter-btn.active .dot { background: var(--cyan); }
.filter-count {
font-size: 11px;
font-weight: 600;
opacity: 0.6;
background: rgba(255,255,255,0.15);
padding: 1px 6px;
border-radius: 99px;
}
.filter-btn:not(.active) .filter-count {
background: var(--bg-muted);
color: var(--text-muted);
opacity: 1;
}
/* ───── RESULTS COUNT ───── */
.results-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
min-height: 28px;
}
.results-label {
font-size: 13px;
color: var(--text-muted);
}
.results-label strong { color: var(--text-secondary); font-weight: 600; }
/* ───── GRID ───── */
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
/* ───── CARD ───── */
.industry-card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 22px 24px 20px;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-card);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.industry-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cyan), var(--cyan-dark));
opacity: 0;
transition: var(--transition);
}
.industry-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-hover);
transform: translateY(-3px);
}
.industry-card:hover::before { opacity: 1; }
.card-top { margin-bottom: 12px; }
.card-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.card-badge {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--cyan-light);
color: var(--cyan-dark);
border: 1px solid var(--cyan-mid);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.card-label {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
margin-bottom: 8px;
transition: color 0.18s;
}
.industry-card:hover .card-title { color: var(--cyan-dark); }
.card-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.card-cta {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: var(--cyan-dark);
margin-top: 18px;
transition: gap 0.18s;
}
.industry-card:hover .card-cta { gap: 8px; }
.card-cta svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.18s; }
.industry-card:hover .card-cta svg { transform: translateX(2px); }
/* ───── EMPTY STATE ───── */
.empty-state {
display: none;
text-align: center;
padding: 60px 24px;
grid-column: 1 / -1;
}
.empty-state svg { width: 40px; height: 40px; color: var(--text-muted); margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
.empty-state p { font-size: 14px; color: var(--text-muted); }
/* ───── CATEGORY DOT COLORS ───── */
[data-cat="Creative"] { --dot-color: #a855f7; }
[data-cat="Content"] { --dot-color: #f59e0b; }
[data-cat="Design"] { --dot-color: #3b82f6; }
[data-cat="Sports"] { --dot-color: #22c55e; }
[data-cat="Business"] { --dot-color: #0891b2; }
[data-cat="Retail"] { --dot-color: #ec4899; }
[data-cat="Lifestyle"] { --dot-color: #f97316; }
/* hide filtered cards */
.industry-card[data-hidden="true"] { display: none; }
@media (max-width: 600px) {
.industry-section { padding: 40px 16px 60px; }
.industry-grid { grid-template-columns: 1fr; }
}
</style>
<?php if (!$isEmbedded): ?>
</head>
<body>
<?php endif; ?>
<section class="industry-section">
<!-- Header -->
<div class="section-header">
<div class="section-eyebrow">
<svg viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M6 4v4M4 6h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
50+ Industry Playbooks
</div>
<h2 class="section-title">Your industry.<br><em>Your brand strategy.</em></h2>
<p class="section-subtitle">AI-powered brand playbooks built for the way your industry actually works. Pick yours and hit the ground running.</p>
</div>
<!-- Search -->
<div class="search-wrap">
<div class="search-icon">
<svg viewBox="0 0 16 16" fill="none"><circle cx="6.5" cy="6.5" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<input type="text" id="industry-search" placeholder="Search industries…" autocomplete="off" />
</div>
<!-- Filters -->
<div class="filters-wrap" id="filters">
<button class="filter-btn active" data-cat="All">
<span class="dot"></span> All <span class="filter-count" id="count-all">50</span>
</button>
<button class="filter-btn" data-cat="Creative">
<span class="dot" style="background:#a855f7"></span> Creative & Entertainment <span class="filter-count" id="count-creative"></span>
</button>
<button class="filter-btn" data-cat="Content">
<span class="dot" style="background:#f59e0b"></span> Content & Media <span class="filter-count" id="count-content"></span>
</button>
<button class="filter-btn" data-cat="Design">
<span class="dot" style="background:#3b82f6"></span> Design & Visual <span class="filter-count" id="count-design"></span>
</button>
<button class="filter-btn" data-cat="Sports">
<span class="dot" style="background:#22c55e"></span> Sports & Fitness <span class="filter-count" id="count-sports"></span>
</button>
<button class="filter-btn" data-cat="Business">
<span class="dot" style="background:#0891b2"></span> Business & Professional <span class="filter-count" id="count-business"></span>
</button>
<button class="filter-btn" data-cat="Retail">
<span class="dot" style="background:#ec4899"></span> Retail & Commerce <span class="filter-count" id="count-retail"></span>
</button>
<button class="filter-btn" data-cat="Lifestyle">
<span class="dot" style="background:#f97316"></span> Lifestyle & Personal <span class="filter-count" id="count-lifestyle"></span>
</button>
</div>
<!-- Results bar -->
<div class="results-bar">
<p class="results-label" id="results-label"><strong>50</strong> playbooks available</p>
</div>
<!-- Grid -->
<div class="industry-grid" id="industry-grid">
<!-- Creative & Entertainment -->
<a href="https://www.thebrand.ai/industry/Actor" class="industry-card" data-cat="Creative" data-name="Actor">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Actor</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Actor</div>
<p class="card-desc">I need a professional acting brand that stands out to casting directors and fans.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Musician%2FBand" class="industry-card" data-cat="Creative" data-name="Musician Band">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Musician / Band</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Musician & Band</div>
<p class="card-desc">I want my music, shows, and releases to look as good as they sound.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Musician" class="industry-card" data-cat="Creative" data-name="Musician">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Musician</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Musician</div>
<p class="card-desc">I need a solo artist brand that connects my music, visuals, and story.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Comedian" class="industry-card" data-cat="Creative" data-name="Comedian">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Comedian</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Comedian</div>
<p class="card-desc">I need a comedy brand that makes my posters, clips, and specials instantly recognizable.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/DJ" class="industry-card" data-cat="Creative" data-name="DJ">
<div class="card-top">
<div class="card-meta"><span class="card-badge">DJ</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for DJ</div>
<p class="card-desc">I need nightlife-ready visuals for my DJ brand, events, and mixes.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Dancer" class="industry-card" data-cat="Creative" data-name="Dancer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Dancer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Dancer</div>
<p class="card-desc">I want a dynamic visual brand that matches my choreography and performances.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Film+Director" class="industry-card" data-cat="Creative" data-name="Film Director">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Film Director</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Film Director</div>
<p class="card-desc">I want my director brand and reels to feel cinematic and unmistakably mine.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Concert+Tour" class="industry-card" data-cat="Creative" data-name="Concert Tour">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Concert Tour</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Concert Tour</div>
<p class="card-desc">I need tour branding that ties together every show, city, and announcement.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Performance+Art+Theater" class="industry-card" data-cat="Creative" data-name="Performance Art Theater">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Performance Art Theater</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Performance Art Theater</div>
<p class="card-desc">I need theatre branding that sells tickets and showcases our performances.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Movie+Character" class="industry-card" data-cat="Creative" data-name="Movie Character">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Movie Character</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Movie Character</div>
<p class="card-desc">I want iconic character-driven branding for films, fan communities, or franchises.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Content & Media -->
<a href="https://www.thebrand.ai/industry/Blogger" class="industry-card" data-cat="Content" data-name="Blogger">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Blogger</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Blogger</div>
<p class="card-desc">I need my blog, email list, and socials to look like one cohesive brand.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Video+Creator" class="industry-card" data-cat="Content" data-name="Video Creator">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Video Creator</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Video Creator</div>
<p class="card-desc">I need my video channels and thumbnails to feel instantly on-brand.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Gaming+Video+Creator" class="industry-card" data-cat="Content" data-name="Gaming Video Creator">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Gaming Video Creator</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Gaming Video Creator</div>
<p class="card-desc">I want my gaming channel, overlays, and clips to stand out in a crowded feed.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Digital+Creator" class="industry-card" data-cat="Content" data-name="Digital Creator">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Digital Creator</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Digital Creator</div>
<p class="card-desc">I need a digital-first brand that works across every platform I publish on.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Journalist" class="industry-card" data-cat="Content" data-name="Journalist">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Journalist</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Journalist</div>
<p class="card-desc">I want a journalist brand that reinforces credibility and distinctive coverage.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/News+Personality" class="industry-card" data-cat="Content" data-name="News Personality">
<div class="card-top">
<div class="card-meta"><span class="card-badge">News Personality</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for News Personality</div>
<p class="card-desc">I need a news brand that reflects authority, clarity, and timeliness.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Author" class="industry-card" data-cat="Content" data-name="Author">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Author</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Author</div>
<p class="card-desc">I want a recognizable author brand that sells more books and builds a loyal readership.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Writer" class="industry-card" data-cat="Content" data-name="Writer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Writer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Writer</div>
<p class="card-desc">I need a writing brand that stays consistent across client work and personal projects.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Editor" class="industry-card" data-cat="Content" data-name="Editor">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Editor</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Editor</div>
<p class="card-desc">I need an editorial brand that signals clarity, trust, and sharp thinking.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Producer" class="industry-card" data-cat="Content" data-name="Producer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Producer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Producer</div>
<p class="card-desc">I want a producer brand that ties together my film, music, or media projects.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/TV+Channel" class="industry-card" data-cat="Content" data-name="TV Channel">
<div class="card-top">
<div class="card-meta"><span class="card-badge">TV Channel</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for TV Channel</div>
<p class="card-desc">I need a channel brand that holds together shows, promos, and schedules.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Design & Visual -->
<a href="https://www.thebrand.ai/industry/Designer" class="industry-card" data-cat="Design" data-name="Designer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Designer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Designer</div>
<p class="card-desc">I want my own design brand to look as good as the work I deliver.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Graphic+Designer" class="industry-card" data-cat="Design" data-name="Graphic Designer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Graphic Designer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Graphic Designer</div>
<p class="card-desc">I want a graphic design brand that attracts better clients and bigger projects.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Web+Designer" class="industry-card" data-cat="Design" data-name="Web Designer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Web Designer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Web Designer</div>
<p class="card-desc">I need a web design brand that signals modern, conversion-focused experiences.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Interior+Design+Studio" class="industry-card" data-cat="Design" data-name="Interior Design Studio">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Interior Design Studio</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Interior Design Studio</div>
<p class="card-desc">I need my interior design studio to look premium and consistent across every touchpoint.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Architectural+Designer" class="industry-card" data-cat="Design" data-name="Architectural Designer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Architectural Designer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Architectural Designer</div>
<p class="card-desc">I want my architecture and design work presented with the same care as my projects.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Fashion+Designer" class="industry-card" data-cat="Design" data-name="Fashion Designer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Fashion Designer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Fashion Designer</div>
<p class="card-desc">I need a fashion brand system that can scale from lookbooks to e-commerce.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Photographer" class="industry-card" data-cat="Design" data-name="Photographer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Photographer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Photographer</div>
<p class="card-desc">I want my photography brand to feel as curated as my portfolio.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Art" class="industry-card" data-cat="Design" data-name="Art Artist">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Art</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Art</div>
<p class="card-desc">I need an art brand that helps my work find the right audience.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Sports & Fitness -->
<a href="https://www.thebrand.ai/industry/Athlete" class="industry-card" data-cat="Sports" data-name="Athlete">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Athlete</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Athlete</div>
<p class="card-desc">I need a performance-driven personal brand that matches my sports and fitness identity.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Fitness+Trainer" class="industry-card" data-cat="Sports" data-name="Fitness Trainer">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Fitness Trainer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Fitness Trainer</div>
<p class="card-desc">I need a trainer brand that fills my classes, programs, and online offers.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Fitness+Model" class="industry-card" data-cat="Sports" data-name="Fitness Model">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Fitness Model</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Fitness Model</div>
<p class="card-desc">I need a fitness-focused personal brand that helps me win shoots and sponsorships.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Coach" class="industry-card" data-cat="Sports" data-name="Coach">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Coach</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Coach</div>
<p class="card-desc">I want a coaching brand that inspires trust and action from my clients.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Business & Professional -->
<a href="https://www.thebrand.ai/industry/Entrepreneur" class="industry-card" data-cat="Business" data-name="Entrepreneur">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Entrepreneur</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Entrepreneur</div>
<p class="card-desc">I want a brand that supports my startup, pitch, and personal reputation.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Lawyer+%26+Law+Firm" class="industry-card" data-cat="Business" data-name="Lawyer Law Firm">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Lawyer & Law Firm</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Lawyer & Law Firm</div>
<p class="card-desc">I want a law brand that feels authoritative, clear, and client-friendly.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Real+Estate" class="industry-card" data-cat="Business" data-name="Real Estate Property">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Real Estate</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Real Estate & Property Professionals</div>
<p class="card-desc">I need my real estate brand, listings, and campaigns to stand out and convert.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Government+Official" class="industry-card" data-cat="Business" data-name="Government Official">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Government Official</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Government Official</div>
<p class="card-desc">I need a professional, trustworthy public office brand for my communications.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Politician" class="industry-card" data-cat="Business" data-name="Politician">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Politician</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Politician</div>
<p class="card-desc">I need a campaign and office brand that communicates trust and a clear agenda.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Public+Figure" class="industry-card" data-cat="Business" data-name="Public Figure">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Public Figure</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Public Figure</div>
<p class="card-desc">I want a public-facing brand that feels polished, credible, and consistent.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Motivational+Speaker" class="industry-card" data-cat="Business" data-name="Motivational Speaker">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Motivational Speaker</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Motivational Speaker</div>
<p class="card-desc">I want a speaking brand that fills rooms and sells programs.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Scientist" class="industry-card" data-cat="Business" data-name="Scientist">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Scientist</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Scientist</div>
<p class="card-desc">I want a science communication brand that makes my research more accessible.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Medical+Lab" class="industry-card" data-cat="Business" data-name="Medical Lab">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Medical Lab</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Medical Lab</div>
<p class="card-desc">I need a clinical brand that communicates accuracy, innovation, and care.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Tax+Preparation+Service" class="industry-card" data-cat="Business" data-name="Tax Preparation Service">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Tax Preparation</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Tax Preparation Service</div>
<p class="card-desc">I want a financial services brand that looks precise, compliant, and approachable.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Retail & Commerce -->
<a href="https://www.thebrand.ai/industry/Clothing+Store" class="industry-card" data-cat="Retail" data-name="Clothing Store Fashion">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Clothing Store</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Clothing Store</div>
<p class="card-desc">I want my clothing store to look on-brand across in-store, online, and social.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/E-Commerce+Website" class="industry-card" data-cat="Retail" data-name="E-Commerce Website Online Store">
<div class="card-top">
<div class="card-meta"><span class="card-badge">E-Commerce Website</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for E-Commerce Website</div>
<p class="card-desc">I want my online store brand to convert better and feel more premium.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Toy+Store" class="industry-card" data-cat="Retail" data-name="Toy Store Kids">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Toy Store</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Toy Store</div>
<p class="card-desc">I want toy store branding that feels joyful to kids and trustworthy to parents.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Car+Dealership" class="industry-card" data-cat="Retail" data-name="Car Dealership Auto">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Car Dealership</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Car Dealership</div>
<p class="card-desc">I need dealership branding that builds trust and drives showroom and online leads.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Car+Rental" class="industry-card" data-cat="Retail" data-name="Car Rental Auto Transport">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Car Rental</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Car Rental</div>
<p class="card-desc">I want a car rental brand that feels seamless, convenient, and reliable.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/In-Home+Service" class="industry-card" data-cat="Retail" data-name="In-Home Service Local">
<div class="card-top">
<div class="card-meta"><span class="card-badge">In-Home Service</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for In-Home Service</div>
<p class="card-desc">I need a trustworthy local services brand that wins more bookings.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Bus+Line" class="industry-card" data-cat="Retail" data-name="Bus Line Transport Transit">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Bus Line</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Bus Line</div>
<p class="card-desc">I want transit branding that makes routes and services easy to recognize.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Lifestyle & Personal -->
<a href="https://www.thebrand.ai/industry/Chef" class="industry-card" data-cat="Lifestyle" data-name="Chef Food Restaurant">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Chef</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Chef</div>
<p class="card-desc">I need my food, restaurant, or personal chef brand to look as refined as my menu.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Bar" class="industry-card" data-cat="Lifestyle" data-name="Bar Nightlife Food Drink">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Bar</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Bar</div>
<p class="card-desc">I want bar branding that makes every night and event feel like an occasion.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Fashion+Model" class="industry-card" data-cat="Lifestyle" data-name="Fashion Model">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Fashion Model</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Fashion Model</div>
<p class="card-desc">I want a model portfolio and social presence that looks runway-ready.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Gamer" class="industry-card" data-cat="Lifestyle" data-name="Gamer Gaming">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Gamer</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Gamer</div>
<p class="card-desc">I need a gaming persona and brand that stands out across platforms.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Personal" class="industry-card" data-cat="Lifestyle" data-name="Personal">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Personal</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Personal</div>
<p class="card-desc">I want a simple, personal brand that pulls my life, work, and hobbies together.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<a href="https://www.thebrand.ai/industry/Just+For+Fun" class="industry-card" data-cat="Lifestyle" data-name="Just For Fun Hobby">
<div class="card-top">
<div class="card-meta"><span class="card-badge">Just For Fun</span><span class="card-label">Industry playbook</span></div>
<div class="card-title">Brand AI for Just For Fun</div>
<p class="card-desc">I want playful, low-pressure branding for content I create just because I enjoy it.</p>
</div>
<div class="card-cta">Explore playbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></div>
</a>
<!-- Empty state -->
<div class="empty-state" id="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8" stroke-width="1.5"/><path d="M21 21l-4.35-4.35" stroke-width="1.5" stroke-linecap="round"/></svg>
<h3>No playbooks found</h3>
<p>Try a different search term or browse all categories.</p>
</div>
</div><!-- /.industry-grid -->
</section>
<script>
const cards = Array.from(document.querySelectorAll('.industry-card'));
const filterBtns = document.querySelectorAll('.filter-btn');
const searchInput = document.getElementById('industry-search');
const resultsLabel = document.getElementById('results-label');
const emptyState = document.getElementById('empty-state');
// Category counts
const cats = ['Creative','Content','Design','Sports','Business','Retail','Lifestyle'];
cats.forEach(cat => {
const count = cards.filter(c => c.dataset.cat === cat).length;
const el = document.getElementById('count-' + cat.toLowerCase());
if (el) el.textContent = count;
});
document.getElementById('count-all').textContent = cards.length;
let activeCat = 'All';
let searchQuery = '';
function applyFilters() {
let visible = 0;
cards.forEach(card => {
const catMatch = activeCat === 'All' || card.dataset.cat === activeCat;
const name = (card.dataset.name + ' ' + card.querySelector('.card-title').textContent).toLowerCase();
const searchMatch = !searchQuery || name.includes(searchQuery);
const show = catMatch && searchMatch;
card.setAttribute('data-hidden', show ? 'false' : 'true');
if (show) visible++;
});
emptyState.style.display = visible === 0 ? 'block' : 'none';
resultsLabel.innerHTML = '<strong>' + visible + '</strong> playbook' + (visible !== 1 ? 's' : '') + ' available';
}
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
activeCat = btn.dataset.cat;
applyFilters();
});
});
searchInput.addEventListener('input', e => {
searchQuery = e.target.value.trim().toLowerCase();
applyFilters();
});
(function pickRandomCategoryOnLoad() {
const initialCat = cats[Math.floor(Math.random() * cats.length)];
const btn = Array.from(filterBtns).find(b => b.dataset && b.dataset.cat === initialCat);
if (btn) {
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
activeCat = initialCat;
}
applyFilters();
})();
</script>
<?php if (!$isEmbedded): ?>
</body>
</html>
<?php endif; ?>