Adds reel

Author: waldekmastykarz

src/components/YouTubeEmbed.astro

@@ -0,0 +1,98 @@
+---
+/**
+ * Click-to-play YouTube embed. Renders a lightweight thumbnail and only loads
+ * the (privacy-enhanced) YouTube player after the visitor clicks, which keeps
+ * the page fast and avoids setting third-party cookies before consent.
+ */
+interface Props {
+  videoId: string;
+  title: string;
+  duration?: string;
+  playLabel?: string;
+  loading?: 'lazy' | 'eager';
+  class?: string;
+}
+
+const {
+  videoId,
+  title,
+  duration,
+  playLabel = 'Play video',
+  loading = 'lazy',
+  class: className = '',
+} = Astro.props;
+
+const thumbnail = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
+const thumbnailSmall = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+---
+
+<div
+  class={`yt-embed group relative rounded-2xl border overflow-hidden aspect-video ${className}`}
+  style="background: var(--bg-secondary); border-color: var(--border-primary);"
+  data-yt-embed
+  data-video-id={videoId}
+  data-title={title}
+>
+  <button
+    type="button"
+    class="yt-embed-trigger absolute inset-0 w-full h-full cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-purple-500/60"
+    aria-label={`${playLabel}: ${title}${duration ? ` (${duration})` : ''}`}
+  >
+    <img
+      src={thumbnail}
+      srcset={`${thumbnailSmall} 480w, ${thumbnail} 1280w`}
+      sizes="(min-width: 1024px) 896px, 100vw"
+      alt=""
+      width="1280"
+      height="720"
+      loading={loading}
+      decoding="async"
+      class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
+    />
+    <span class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors duration-300" aria-hidden="true"></span>
+    <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
+      <span class="flex items-center gap-3 pl-5 pr-6 py-3 sm:pl-6 sm:pr-7 sm:py-4 rounded-full bg-purple-600 group-hover:bg-purple-500 text-white font-semibold shadow-[0_0_40px_rgba(168,85,247,0.45)] transition-all duration-300 group-hover:scale-105">
+        <svg class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v13.72a1 1 0 0 0 1.52.85l11.01-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14Z" /></svg>
+        <span class="text-sm sm:text-base">{playLabel}</span>
+      </span>
+    </span>
+    {duration && (
+      <span class="absolute bottom-3 right-3 px-2 py-1 rounded-md bg-black/75 text-white text-xs font-mono" aria-hidden="true">{duration}</span>
+    )}
+  </button>
+</div>
+
+<script>
+  type ClarityWindow = Window & { clarity?: (...args: unknown[]) => void };
+
+  function play(container: HTMLElement) {
+    if (container.dataset.loaded) return;
+    container.dataset.loaded = 'true';
+
+    const { videoId, title } = container.dataset;
+    const iframe = document.createElement('iframe');
+    iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`;
+    iframe.title = title ?? 'YouTube video';
+    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
+    iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+    iframe.allowFullscreen = true;
+    iframe.className = 'absolute inset-0 w-full h-full border-0';
+    container.replaceChildren(iframe);
+    iframe.focus();
+
+    // Only fires if the visitor consented to analytics (Clarity is loaded).
+    (window as ClarityWindow).clarity?.('event', `video_play_${videoId}`);
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-yt-embed]').forEach((container) => {
+    container.querySelector('.yt-embed-trigger')?.addEventListener('click', () => play(container), { once: true });
+  });
+
+  // Links like <a href="#intro-video" data-yt-play="VIDEO_ID"> scroll to and start the video.
+  document.querySelectorAll<HTMLAnchorElement>('[data-yt-play]').forEach((link) => {
+    link.addEventListener('click', () => {
+      const container = document.querySelector<HTMLElement>(`[data-yt-embed][data-video-id="${link.dataset.ytPlay}"]`);
+      if (container) play(container);
+    });
+  });
+</script>

src/pages/index.astro

@@ -1,8 +1,32 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import YouTubeEmbed from '../components/YouTubeEmbed.astro';
+
+const introVideo = {
+  id: 'kbTK0A4Psv0',
+  title: 'Dev Proxy: Test API Errors, Rate Limits & AI Without Code',
+  description: 'Your app works on the happy path. What happens when the API returns 500s, throttles you with 429s, or times out? Dev Proxy lets you find out in minutes, without changing a single line of code.',
+  uploadDate: '2026-09-28T02:29:23-07:00',
+  duration: 'PT40S',
+};
+
+const structuredData = {
+  '@context': 'https://schema.org',
+  '@type': 'VideoObject',
+  name: introVideo.title,
+  description: introVideo.description,
+  thumbnailUrl: [
+    `https://i.ytimg.com/vi/${introVideo.id}/maxresdefault.jpg`,
+    `https://i.ytimg.com/vi/${introVideo.id}/hqdefault.jpg`,
+  ],
+  uploadDate: introVideo.uploadDate,
+  duration: introVideo.duration,
+  embedUrl: `https://www.youtube-nocookie.com/embed/${introVideo.id}`,
+  contentUrl: `https://www.youtube.com/watch?v=${introVideo.id}`,
+};
 ---
 
-<Layout title="Home">
+<Layout title="Home" structuredData={structuredData}>
 
   <!-- Hero — full viewport, cinematic intro -->
   <section class="hero-section relative flex items-center justify-center overflow-hidden" style="min-height: calc(100vh - 4rem);">
@@ -39,6 +63,19 @@ import Layout from '../layouts/Layout.astro';
           Browse Samples
         </a>
       </div>
+      <div class="hero-fade hero-fade-4 mt-6">
+        <a
+          href="#intro-video"
+          data-yt-play={introVideo.id}
+          class="group inline-flex items-center gap-2 text-sm font-medium transition-colors hover:text-purple-400"
+          style="color: var(--text-muted);"
+        >
+          <span class="flex items-center justify-center w-7 h-7 rounded-full border transition-colors group-hover:border-purple-500" style="border-color: var(--border-secondary);" aria-hidden="true">
+            <svg class="w-3 h-3 ml-0.5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v13.72a1 1 0 0 0 1.52.85l11.01-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14Z" /></svg>
+          </span>
+          Watch the 40-second intro
+        </a>
+      </div>
 
       <!-- Terminal teaser -->
       <div class="hero-fade hero-fade-5 mt-16 max-w-xl mx-auto min-w-0">
@@ -66,6 +103,33 @@ import Layout from '../layouts/Layout.astro';
     </div>
   </section>
 
+  <!-- Intro video — 40s explainer, placed high with a CTA right after -->
+  <section id="intro-video" class="pt-16 pb-8 px-6 sm:px-8 scroll-mt-20">
+    <div class="max-w-4xl mx-auto text-center">
+      <p class="section-reveal text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Dev Proxy in 40 seconds</p>
+      <h2 class="section-reveal text-3xl md:text-5xl font-bold mb-12">See what Dev Proxy can do for&nbsp;you.</h2>
+      <div class="section-reveal">
+        <YouTubeEmbed
+          videoId={introVideo.id}
+          title={introVideo.title}
+          duration="0:40"
+          playLabel="Watch the intro"
+        />
+      </div>
+      <div class="section-reveal mt-10 flex flex-col items-center gap-3">
+        <a
+          href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/get-started"
+          target="_blank"
+          rel="noopener"
+          class="group px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-semibold rounded-full transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.4)]"
+        >
+          Try Dev Proxy now <span class="inline-block transition-transform duration-300 group-hover:translate-x-1">&rarr;</span>
+        </a>
+        <p class="text-sm" style="color: var(--text-faint);">Free &amp; open source &middot; Windows, macOS &amp; Linux</p>
+      </div>
+    </div>
+  </section>
+
   <!-- Problem statement — emotional hook -->
   <section class="py-32 px-6 sm:px-8">
     <div class="max-w-3xl mx-auto text-center">
@@ -275,21 +339,18 @@ import Layout from '../layouts/Layout.astro';
   <!-- Getting started video -->
   <section class="py-32 px-6 sm:px-8">
     <div class="max-w-4xl mx-auto text-center">
-      <p class="section-reveal text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">See It In Action</p>
+      <p class="section-reveal text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Step-by-Step Walkthrough</p>
       <h2 class="section-reveal text-3xl md:text-5xl font-bold mb-8">Get started with Dev Proxy.</h2>
       <p class="section-reveal text-lg md:text-xl mb-12" style="color: var(--text-muted);">
         Watch how to set up Dev Proxy and start testing your app in minutes.
       </p>
-      <div class="section-reveal rounded-2xl border overflow-hidden" style="border-color: var(--border-primary);">
-        <div style="position: relative; padding-bottom: 56.25%; height: 0;">
-          <iframe
-            src="https://www.youtube-nocookie.com/embed/HVTJlGSxhcw"
-            title="Get started with Dev Proxy"
-            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-          ></iframe>
-        </div>
+      <div class="section-reveal">
+        <YouTubeEmbed
+          videoId="HVTJlGSxhcw"
+          title="Get started with Dev Proxy"
+          duration="8:49"
+          playLabel="Watch the walkthrough"
+        />
       </div>
     </div>
   </section>