site: add demo video (#261)

Signed-off-by: Ignasi Barrera <ignasi@tetrate.io>

Author: nacx

website/src/components/VideoShowcase.astro

@@ -0,0 +1,18 @@
+---
+---
+
+<section class="video-showcase">
+	<div class="container">
+		<h2>See it in Action</h2>
+		<p class="section-subtitle">Watch how easy it is to discover, run, and build Envoy extensions</p>
+		<div class="video-wrapper">
+			<iframe
+				src="https://www.youtube.com/embed/wttcM9VvFB0"
+				title="Built on Envoy - Demo"
+				frameborder="0"
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+				allowfullscreen
+			></iframe>
+		</div>
+	</div>
+</section>

website/src/pages/index.astro

@@ -4,6 +4,7 @@ import Head from '../components/Head.astro';
 import Header from '../components/Header.astro';
 import Hero from '../components/Hero.astro';
 import Features from '../components/Features.astro';
+import VideoShowcase from '../components/VideoShowcase.astro';
 import Extensions from '../components/Extensions.astro';
 import CLIFeatures from '../components/CLIFeatures.astro';
 import Testimonials from '../components/Testimonials.astro';
@@ -25,6 +26,7 @@ import Footer from '../components/Footer.astro';
 			<Hero />
 			<Features />
 			<Extensions />
+			<VideoShowcase />
 			<CLIFeatures />
 			<Testimonials />
 			<CTA />

website/src/styles/main.css

@@ -437,6 +437,38 @@ header nav a:focus {
 	white-space: pre;
 }
 
+/* Video Showcase */
+.video-showcase {
+	padding: 80px 0;
+	background: var(--bg-subtle);
+}
+
+.video-showcase h2 {
+	font-size: 40px;
+	text-align: center;
+	margin-bottom: 12px;
+	color: var(--primary-dark);
+}
+
+.video-wrapper {
+	max-width: 800px;
+	margin: 0 auto;
+	position: relative;
+	padding-bottom: 56.25%; /* 16:9 aspect ratio */
+	height: 0;
+	border-radius: 16px;
+	overflow: hidden;
+	box-shadow: 0 8px 30px rgba(124, 58, 237, 0.15);
+}
+
+.video-wrapper iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
 /* Extensions */
 .extensions {
 	padding: 80px 0;
@@ -1139,6 +1171,15 @@ footer {
 		border-bottom: 2px solid var(--primary-light);
 	}
 
+	/* Video Showcase */
+	.video-showcase {
+		padding: 48px 0;
+	}
+
+	.video-showcase h2 {
+		font-size: 32px;
+	}
+
 	/* Extensions */
 	.extensions {
 		padding: 48px 0;