brand-site/src/pages/index.astro
Scott Scoble 97e79f53ca
All checks were successful
Build and Deploy to Storj / build-and-deploy (push) Successful in 9s
fix: boost hero accent contrast — brighter gold + text shadow for readability over photo
2026-04-29 16:36:11 -07:00

571 lines
14 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import PillarCard from '../components/PillarCard.astro';
---
<BaseLayout
title="Scott Scoble — Human Cultivation Expert for the AI Age"
description="Keynote speaker and consultant helping leaders build AI systems that cultivate humans instead of strip-mining them. Author of The Soil Beneath the Code."
>
<!-- Hero Section -->
<section class="hero">
<div class="hero-bg">
<picture>
<source type="image/webp" srcset="/images/hero-speaker-new-800.webp 800w, /images/hero-speaker-new-1200.webp 1200w, /images/hero-speaker-new.webp 1920w" sizes="100vw" />
<source type="image/png" srcset="/images/hero-speaker-new-1920.png 1920w" sizes="100vw" />
<img src="/images/hero-speaker-new.webp" alt="Scott Scoble speaking on stage" class="hero-image" width="1920" height="1072" loading="eager" decoding="async" />
</picture>
<div class="hero-overlay"></div>
</div>
<div class="hero-content">
<p class="hero-kicker">Keynote Speaker · Consultant · Author</p>
<h1>
<span class="line">The human</span>
<span class="line accent">cultivation</span>
<span class="line">expert for the AI age.</span>
</h1>
<p class="hero-description">
Keynotes and workshops for leaders building AI systems that don't strip-mine their humans.
</p>
<div class="hero-actions">
<a href="/speaking#book" class="btn btn-primary">Book Scott for Your Event</a>
<a href="/speaking" class="btn btn-outline">Watch the Reel</a>
</div>
</div>
</section>
<!-- Three Pillars -->
<section class="pillars">
<div class="section-header">
<p class="section-kicker">Three Pillars</p>
<h2>How I Help Teams Thrive</h2>
</div>
<div class="pillar-grid">
<PillarCard
number={1}
title="Cultivation Over Strip Mining"
description="Build AI systems that cultivate human capability, not extract it. Assessment, diagnosis, and cultivation practices for engineering teams."
/>
<PillarCard
number={2}
title="Simple Mentoring"
description="Three questions that change how people learn. The mentoring framework that actually gets used. Workshop delivery and team training."
/>
<PillarCard
number={3}
title="Human Side of AI"
description="Maximize the people dimension in AI-augmented work. Keynotes and workshops on the human infrastructure for agentic systems."
/>
</div>
</section>
<!-- Featured Talks -->
<section class="featured-talks">
<div class="section-header">
<p class="section-kicker">Signature Talks</p>
<h2>What I Speak About</h2>
</div>
<div class="talks-list">
<article class="talk-card">
<div class="talk-meta">
<span class="talk-type">Keynote</span>
<span class="talk-duration">45–60 min</span>
</div>
<h3>50 First Dates with AI</h3>
<p class="talk-hook">Every morning, your AI wakes up and doesn't remember yesterday. Here's how to fix that.</p>
<p class="talk-desc">Current AI memory architecture is anterograde amnesia — and we're all Henry Roth, recording VHS tapes every night so our agent can wake up functional tomorrow.</p>
<a href="/speaking" class="talk-link">Learn more →</a>
</article>
<article class="talk-card featured">
<div class="talk-meta">
<span class="talk-type">Keynote</span>
<span class="talk-duration">45–60 min</span>
</div>
<h3>From Strip-Mining to Cultivation</h3>
<p class="talk-hook">The shift from extraction to cultivation in AI-era teams. Why throughput optimization is killing your soil health.</p>
<p class="talk-desc">The most successful AI teams aren't the ones with the best models. They're the ones who stopped strip-mining their humans and started cultivating them.</p>
<a href="/speaking" class="talk-link">Learn more →</a>
</article>
<article class="talk-card">
<div class="talk-meta">
<span class="talk-type">Workshop</span>
<span class="talk-duration">Half-day</span>
</div>
<h3>The Soil Under Your Team</h3>
<p class="talk-hook">Diagnose what's actually depleted before you fertilize. A diagnostic framework for team health.</p>
<p class="talk-desc">Most team interventions fail because they prescribe before diagnosing. This workshop gives you a cultivation assessment framework that finds what's actually depleted.</p>
<a href="/speaking" class="talk-link">Learn more →</a>
</article>
</div>
</section>
<!-- Trust Bar -->
<section class="trust-bar">
<p class="trust-label">Trusted by leaders at</p>
<div class="trust-logos">
<span class="logo-placeholder">[Client logos coming soon]</span>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="section-header">
<p class="section-kicker">Testimonials</p>
<h2>What People Say</h2>
</div>
<div class="testimonial-grid">
<!-- Testimonials will be added here -->
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="cta-visual"></div>
<div class="cta-content">
<p class="cta-kicker">Ready to get started?</p>
<h2>Let's cultivate your team.</h2>
<p class="cta-desc">Book a keynote, workshop, or discovery call. Let's talk about your event or your team's soil health.</p>
<a href="/speaking#book" class="btn btn-primary btn-large">Book Scott</a>
</div>
</section>
</BaseLayout>
<style>
/* ===== HERO ===== */
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 2rem;
background: var(--color-cream);
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(250, 248, 245, 0.7) 0%,
rgba(250, 248, 245, 0.5) 40%,
rgba(250, 248, 245, 0.8) 100%
);
}
.hero-content {
position: relative;
max-width: 800px;
z-index: 1;
}
.hero-kicker {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-green);
margin: 0 0 1.5rem;
}
.hero h1 {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 600;
line-height: 1.1;
color: var(--color-brown-dark);
margin: 0 0 1.5rem;
}
.hero h1 .line {
display: block;
}
.hero h1 .accent {
color: #e6a817;
font-style: italic;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 20px rgba(230, 168, 23, 0.3);
}
.hero-description {
font-size: clamp(1.125rem, 2vw, 1.375rem);
color: var(--color-text-muted);
margin: 0 0 2.5rem;
line-height: 1.7;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 6px;
transition: all 0.2s ease;
cursor: pointer;
border: 2px solid transparent;
}
.btn-primary {
background: var(--color-amber);
color: white;
border-color: var(--color-amber);
}
.btn-primary:hover {
background: var(--color-amber-light);
border-color: var(--color-amber-light);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(200, 149, 46, 0.3);
}
.btn-outline {
background: transparent;
color: var(--color-brown-dark);
border-color: var(--color-brown-dark);
}
.btn-outline:hover {
background: var(--color-brown-dark);
color: white;
}
.btn-large {
padding: 1rem 2.5rem;
font-size: 1.125rem;
}
/* ===== SECTIONS ===== */
.section-header {
text-align: center;
margin-bottom: 4rem;
padding: 0 2rem;
}
.section-kicker {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-amber);
margin: 0 0 0.75rem;
}
.section-header h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--color-brown-dark);
margin: 0;
}
/* ===== PILLARS ===== */
.pillars {
padding: 6rem 2rem;
background: white;
}
.pillar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* ===== TALKS ===== */
.featured-talks {
padding: 6rem 2rem;
background: linear-gradient(180deg, #f5f0e8 0%, #faf8f5 100%);
}
.talks-list {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.talk-card {
background: white;
padding: 2.5rem;
border-radius: 12px;
border: 1px solid var(--color-border-light);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.talk-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.talk-card.featured {
border-left: 4px solid var(--color-amber);
}
.talk-meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.talk-type,
.talk-duration {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.25rem 0.75rem;
border-radius: 20px;
background: var(--color-cream-warm);
color: var(--color-brown);
}
.talk-card h3 {
font-family: var(--font-heading);
font-size: 1.75rem;
color: var(--color-brown-dark);
margin: 0 0 0.75rem;
}
.talk-hook {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-green);
margin: 0 0 1rem;
line-height: 1.5;
}
.talk-desc {
color: var(--color-text-muted);
margin: 0 0 1.5rem;
line-height: 1.7;
}
.talk-link {
color: var(--color-amber);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.talk-link:hover {
color: var(--color-brown-dark);
}
/* ===== TRUST BAR ===== */
.trust-bar {
padding: 3rem 2rem;
background: var(--color-brown-dark);
text-align: center;
}
.trust-label {
font-size: 0.875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 1.5rem;
}
.trust-logos {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.logo-placeholder {
color: rgba(255, 255, 255, 0.4);
font-style: italic;
}
/* ===== TESTIMONIALS ===== */
.testimonials {
padding: 6rem 2rem;
background: white;
}
.testimonial-grid {
max-width: 800px;
margin: 0 auto;
}
.testimonial-card {
background: linear-gradient(135deg, #faf8f5 0%, #f5f0e8 100%);
padding: 3rem;
border-radius: 16px;
border: none;
position: relative;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 1rem;
left: 1.5rem;
font-family: var(--font-heading);
font-size: 6rem;
color: var(--color-amber);
opacity: 0.3;
line-height: 1;
}
.testimonial-quote {
font-size: 1.25rem;
font-style: italic;
color: var(--color-brown-dark);
margin: 0 0 1.5rem;
line-height: 1.7;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.testimonial-author strong {
color: var(--color-brown-dark);
font-weight: 600;
}
.testimonial-author span {
color: var(--color-text-muted);
font-size: 0.9375rem;
}
/* ===== CTA SECTION ===== */
.cta-section {
position: relative;
padding: 6rem 2rem;
background: var(--color-green);
text-align: center;
overflow: hidden;
}
.cta-visual {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(61, 90, 62, 0.95) 0%, rgba(45, 90, 62, 0.98) 100%);
}
.cta-visual::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(200, 149, 46, 0.2) 0%, transparent 60%);
border-radius: 50%;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.cta-kicker {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 1rem;
}
.cta-content h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: white;
margin: 0 0 1rem;
}
.cta-desc {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 2rem;
line-height: 1.7;
}
.cta-section .btn-primary {
background: var(--color-amber);
border-color: var(--color-amber);
}
.cta-section .btn-primary:hover {
background: var(--color-amber-light);
border-color: var(--color-amber-light);
}
@media (max-width: 640px) {
.hero {
min-height: auto;
padding: 4rem 1.5rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.pillars,
.featured-talks,
.testimonials,
.cta-section {
padding: 4rem 1.5rem;
}
.talk-card {
padding: 1.5rem;
}
.testimonial-card {
padding: 2rem 1.5rem;
}
}
</style>