Engineering (agent-engineering)
d69df39931
- Change homepage hero CTA from 'Watch the Reel' to 'Explore Speaking' - Update speaking page reel placeholder to acknowledge missing video - Add direction to signature talks below the reel placeholder - Hero images exist in public/images/ - Favicon exists (favicon.ico and favicon.svg) - Manifest.json exists
620 lines
15 KiB
Text
620 lines
15 KiB
Text
---
|
||
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."
|
||
pageType="home"
|
||
>
|
||
<!-- 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" data-umami-event="hero-cta-book">Book Scott for Your Event</a>
|
||
<a href="/speaking" class="btn btn-outline" data-umami-event="hero-cta-reel">Explore Speaking</a>
|
||
<a href="/downloads/Scott-Scoble-Human-Cultivation-Expert-Speaker-Profile.pdf" class="btn btn-outline" download data-umami-event="hero-cta-profile">📄 Speaker Profile</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;
|
||
isolation: isolate;
|
||
}
|
||
|
||
.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:
|
||
radial-gradient(
|
||
circle at center,
|
||
rgba(35, 30, 25, 0.35) 0%,
|
||
rgba(35, 30, 25, 0.6) 100%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(20, 18, 15, 0.25) 0%,
|
||
rgba(20, 18, 15, 0.45) 100%
|
||
);
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
max-width: 900px;
|
||
z-index: 1;
|
||
padding: clamp(2rem, 4vw, 4rem) 1.5rem;
|
||
}
|
||
|
||
.hero-kicker {
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.22em;
|
||
color: #d6e2c8;
|
||
margin: 0 0 1.5rem;
|
||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: var(--font-heading);
|
||
font-size: clamp(2.5rem, 6vw, 5rem);
|
||
font-weight: 600;
|
||
line-height: 1.05;
|
||
color: #f5efe5;
|
||
margin: 0 0 1.5rem;
|
||
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.hero h1 .line {
|
||
display: block;
|
||
}
|
||
|
||
.hero h1 .accent {
|
||
color: #d9a12b;
|
||
font-style: italic;
|
||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 24px rgba(217, 161, 43, 0.2);
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: clamp(1.125rem, 2vw, 1.375rem);
|
||
color: #eee4d5;
|
||
font-weight: 500;
|
||
margin: 0 0 2.5rem;
|
||
line-height: 1.6;
|
||
max-width: 900px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 1.25rem;
|
||
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);
|
||
box-shadow: 0 2px 8px rgba(200, 149, 46, 0.3);
|
||
}
|
||
|
||
.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.4);
|
||
}
|
||
|
||
.hero .btn-outline {
|
||
background: rgba(255, 248, 235, 0.72);
|
||
color: #27221d;
|
||
border-color: #27221d;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.hero .btn-outline:hover {
|
||
background: rgba(255, 248, 235, 0.9);
|
||
color: #27221d;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.hero-overlay {
|
||
background:
|
||
radial-gradient(
|
||
circle at center,
|
||
rgba(35, 30, 25, 0.5) 0%,
|
||
rgba(35, 30, 25, 0.72) 100%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(20, 18, 15, 0.35) 0%,
|
||
rgba(20, 18, 15, 0.6) 100%
|
||
);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.25rem, 10vw, 3.5rem);
|
||
line-height: 1.05;
|
||
}
|
||
|
||
.hero h1 .accent {
|
||
font-size: 0.88em;
|
||
}
|
||
|
||
.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>
|