Sponsor page redesign, option 2: The Cover Story

.gitignore

@@ -33,3 +33,4 @@ AGENTS.md
 
 # generated collections
 src/data/collections.generated.ts
+src/img/events/originals/

src/components/sponsor/CaseStudyVideo.astro

@@ -0,0 +1,39 @@
+---
+export interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<figure class:list={['overflow-hidden', className]}>
+  <video
+    class="block aspect-video w-full"
+    controls
+    loop
+    muted
+    playsinline
+    preload="metadata"
+    poster="/video/warp-sponsor-example.jpg"
+    data-sponsor-autoplay
+  >
+    <source src="/video/warp-sponsor-example.mp4" type="video/mp4" />
+  </video>
+</figure>
+
+<script>
+  const init = () => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    document
+      .querySelectorAll<HTMLVideoElement>('[data-sponsor-autoplay]')
+      .forEach((video) => {
+        video.play().catch(() => {
+          /* Autoplay refused; the controls are still there. */
+        });
+      });
+  };
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>

src/components/sponsor/PartnerCard.astro

@@ -0,0 +1,62 @@
+---
+import type { Partner } from 'src/data/sponsor';
+
+export interface Props {
+  partner: Partner;
+  class?: string;
+}
+
+const { partner, class: className } = Astro.props;
+
+const svgs = import.meta.glob('/src/img/sponsors/*.svg', {
+  query: '?raw',
+  import: 'default'
+});
+---
+
+<div
+  class:list={[
+    'dark:border-dark-border dark:bg-dark-background group relative flex flex-col rounded-xl border border-gray-200 bg-white p-6 transition-all duration-300 hover:-translate-y-0.5 hover:border-[#8A63FF]/40 hover:shadow-lg hover:shadow-[#8A63FF]/10 dark:hover:border-[#42C8F3]/40 dark:hover:shadow-[#42C8F3]/10',
+    className
+  ]}
+>
+  <div class="flex items-center gap-4">
+    <div
+      class="h-11 w-11 shrink-0 rounded-lg [&>svg]:h-full [&>svg]:w-full"
+    >
+      <Fragment set:html={svgs[`/src/img/sponsors/${partner.img}`]()} />
+    </div>
+    <p class="text-light-text-heading text-lg font-bold dark:text-white">
+      <a href={partner.url} target="_blank" rel="noopener" class="after:absolute after:inset-0">
+        {partner.name}
+      </a>
+    </p>
+  </div>
+
+  <p class="mt-4 flex-1 text-[15px] leading-relaxed text-pretty">
+    {partner.blurb}
+  </p>
+
+  {
+    partner.caseStudy && (
+      <a
+        href={partner.caseStudy}
+        class="text-light-text-heading relative z-10 mt-4 inline-flex items-center gap-2 text-sm font-semibold dark:text-white"
+      >
+        See the 90-day results
+        <svg
+          class="h-3.5 w-3.5 transition-transform duration-300 group-hover:translate-x-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M5 12h14m-7-7l7 7-7 7" />
+        </svg>
+      </a>
+    )
+  }
+</div>

src/components/sponsor/XPostCard.astro

@@ -0,0 +1,162 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+
+import type { XPost } from 'src/data/sponsor';
+import { getShowInfo } from 'src/lib/rss';
+
+export interface Props {
+  post: XPost;
+  class?: string;
+}
+
+const { post, class: className } = Astro.props;
+
+const avatars = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/img/people/*.{jpeg,jpg,png}'
+);
+
+const show = await getShowInfo();
+---
+
+<a
+  href={post.url}
+  target="_blank"
+  rel="noopener"
+  class:list={[
+    'x-post-card dark:border-dark-border dark:bg-dark-background group flex flex-col rounded-xl border border-gray-200 bg-white p-5 transition-all duration-300 hover:-translate-y-0.5 hover:border-[#8A63FF]/40 hover:shadow-lg hover:shadow-[#8A63FF]/10 dark:hover:border-[#42C8F3]/40 dark:hover:shadow-[#42C8F3]/10',
+    className
+  ]}
+>
+  <div class="flex items-start gap-3">
+    {
+      post.avatar ? (
+        <Image
+          class="h-10 w-10 shrink-0 rounded-full object-cover"
+          src={avatars[`/src/img/people/${post.avatar}`]()}
+          alt=""
+          width={80}
+          height={80}
+        />
+      ) : (
+        <img
+          class="h-10 w-10 shrink-0 rounded-full object-cover"
+          src={show.image}
+          alt=""
+          width="40"
+          height="40"
+          loading="lazy"
+        />
+      )
+    }
+
+    <div class="min-w-0 flex-1">
+      <p class="leading-tight">
+        <span class="text-light-text-heading font-bold dark:text-white">
+          {post.author}
+        </span>
+      </p>
+      <p class="truncate text-sm leading-tight">
+        @{post.handle} · {post.date}
+      </p>
+    </div>
+
+    <svg
+      class="text-light-text-heading h-4 w-4 shrink-0 opacity-40 transition-opacity group-hover:opacity-100 dark:text-white"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+      ></path>
+    </svg>
+  </div>
+
+  <p
+    class="text-light-text-heading mt-3 text-[15px] leading-relaxed text-pretty dark:text-gray-200"
+  >
+    {post.text}
+  </p>
+
+  <div class="mt-auto flex items-center gap-5 pt-4 text-sm tabular-nums">
+    {
+      post.replies && (
+        <span class="flex items-center gap-1.5">
+          <svg
+            class="h-3.5 w-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M21 11.5a8.38 8.38 0 0 1-8.4 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 8.6-8.4 8.38 8.38 0 0 1 8.4 8.4z" />
+          </svg>
+          {post.replies}
+        </span>
+      )
+    }
+    {
+      post.reposts && (
+        <span class="flex items-center gap-1.5">
+          <svg
+            class="h-3.5 w-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M17 1l4 4-4 4" />
+            <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+            <path d="M7 23l-4-4 4-4" />
+            <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+          </svg>
+          {post.reposts}
+        </span>
+      )
+    }
+    {
+      post.likes && (
+        <span class="flex items-center gap-1.5">
+          <svg
+            class="h-3.5 w-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+          </svg>
+          {post.likes}
+        </span>
+      )
+    }
+    <span
+      class="text-light-text-heading ml-auto flex items-center gap-1.5 font-semibold dark:text-white"
+    >
+      <svg
+        class="h-3.5 w-3.5"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M4 20V10" />
+        <path d="M12 20V4" />
+        <path d="M20 20v-7" />
+      </svg>
+      {post.views} views
+    </span>
+  </div>
+</a>