Engineering (agent-engineering)
50c1045b8f
**#59** — Uncommented and populated Past Events section - Added 3 placeholder events with dates and locations - Added CSS styling for event dates **#57** — Added Case Studies placeholder section to consulting page - Framework for future case study content - Shows metrics worth tracking **#61** — Enhanced social links with value propositions - Added descriptive text to LinkedIn/Twitter/GitHub links - Better CTAs in footer and contact page
180 lines
4 KiB
Text
180 lines
4 KiB
Text
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import SharedForm from '../components/Form/SharedForm.astro';
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Contact — Scott Scoble"
|
|
description="Get in touch about speaking, consulting, or just to say hello."
|
|
pageType="contact"
|
|
>
|
|
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<h1>Contact</h1>
|
|
<p>Let's talk about your event, your team, or your AI systems.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact-section">
|
|
<div class="section-container">
|
|
<div class="contact-grid">
|
|
|
|
<!-- Contact Form -->
|
|
<div class="contact-form-wrapper">
|
|
<h2>Send a Message</h2>
|
|
|
|
<SharedForm type="contact" />
|
|
</div>
|
|
|
|
<!-- Alternative Contact -->
|
|
<div class="contact-alternatives">
|
|
<h2>Other Ways to Reach Me</h2>
|
|
|
|
<div class="contact-option">
|
|
<h3>📧 Email</h3>
|
|
<p><a href="mailto:scott@scoble.me">scott@scoble.me</a></p>
|
|
</div>
|
|
|
|
<div class="contact-option">
|
|
<h3>📅 Discovery Call</h3>
|
|
<p><a href="#" title="Calendly link coming soon">Schedule a 20-min call</a></p>
|
|
</div>
|
|
|
|
<div class="contact-option">
|
|
<h3>Social</h3>
|
|
<p>Follow for insights on AI, leadership, and human cultivation:</p>
|
|
<p>
|
|
<a href="https://linkedin.com/in/scottscoble" target="_blank" rel="noopener">LinkedIn</a> — Posts on AI leadership •
|
|
<a href="https://x.com/scottscoble" target="_blank" rel="noopener">X/Twitter</a> — Daily takes on agentic systems •
|
|
<a href="https://github.com/sscoble" target="_blank" rel="noopener">GitHub</a> — Open source AI tools
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.hero {
|
|
background: var(--color-cream);
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
color: var(--color-brown-dark);
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.125rem;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.section-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.contact-section {
|
|
background: white;
|
|
}
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.contact-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
}
|
|
}
|
|
|
|
.contact-form-wrapper h2,
|
|
.contact-alternatives h2 {
|
|
font-family: var(--font-heading);
|
|
font-size: 1.5rem;
|
|
margin: 0 0 1.5rem;
|
|
color: var(--color-brown-dark);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 0.375rem;
|
|
color: var(--color-brown-dark);
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 0.625rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-green);
|
|
}
|
|
|
|
.submit-btn {
|
|
background: var(--color-amber);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: var(--color-amber-light);
|
|
}
|
|
|
|
.contact-option {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.contact-option h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: 1.125rem;
|
|
margin: 0 0 0.5rem;
|
|
color: var(--color-brown-dark);
|
|
}
|
|
|
|
.contact-option p {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.contact-option a {
|
|
color: var(--color-green);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.contact-option a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|