Fix invisible session cards and add YouTube section to home page.

Cards were stuck at opacity 0 because slideUp keyframes were missing from the CSS bundle; also strengthened card backgrounds and surfaced all channel videos on the homepage.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 7oSkaaa

website/src/components/Hero.tsx

@@ -38,13 +38,16 @@ export default function Hero() {
               videos, problem sheets, articles, and everything you need to level up.
             </p>
             <div className="mt-8 flex flex-wrap gap-4">
-              <a href="#sessions" className="btn-primary">
+              <a href="#youtube-sessions" className="btn-primary">
+                <Play className="h-4 w-4" />
+                YouTube Sessions
+              </a>
+              <a href="#sessions" className="btn-ghost">
                 Browse Sessions
                 <ArrowRight className="h-4 w-4" />
               </a>
               <Link to="/youtube" className="btn-ghost">
-                <Play className="h-4 w-4 text-red-400" />
-                Watch on YouTube
+                All Videos
               </Link>
             </div>
           </div>

website/src/components/SessionCard.tsx

@@ -59,7 +59,7 @@ export default function SessionCard({ session }: SessionCardProps) {
         </span>
       </div>
 
-      <div className="mt-4 flex items-center gap-1 text-sm font-medium text-accent-light opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="mt-4 flex items-center gap-1 text-sm font-medium text-accent-light">
         View session
         <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
       </div>

website/src/components/YouTubeSection.tsx

@@ -0,0 +1,53 @@
+import { Link } from "react-router-dom";
+import { ArrowRight, ExternalLink } from "lucide-react";
+import YouTubeCard from "@/components/YouTubeCard";
+import siteData from "@/data/site-data.json";
+import type { SiteData } from "@/types";
+
+const data = siteData as SiteData;
+
+export default function YouTubeSection() {
+  const videos = data.youtubeVideos;
+
+  if (videos.length === 0) return null;
+
+  return (
+    <section
+      id="youtube-sessions"
+      className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+    >
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="text-sm font-medium uppercase tracking-wider text-red-400">
+            @7oSkaa on YouTube
+          </p>
+          <h2 className="section-heading mt-1">YouTube Sessions</h2>
+          <p className="mt-2 max-w-xl text-slate-400">
+            Watch CP Circus and session recordings on Ahmed Hossam&apos;s channel.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Link to="/youtube" className="btn-ghost">
+            View all {videos.length} videos
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+          <a
+            href={data.config.youtubeChannel}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-primary"
+          >
+            Open Channel
+            <ExternalLink className="h-4 w-4" />
+          </a>
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {videos.map((video) => (
+          <YouTubeCard key={video.id} video={video} />
+        ))}
+      </div>
+    </section>
+  );
+}

website/src/index.css

@@ -38,11 +38,11 @@
 
 @layer components {
   .glass {
-    @apply border border-white/10 bg-white/5 backdrop-blur-xl;
+    @apply border border-white/10 bg-surface-raised/90 backdrop-blur-xl;
   }
 
   .glass-hover {
-    @apply glass transition-all duration-300 hover:border-accent/30 hover:bg-white/[0.07] hover:shadow-lg hover:shadow-accent/5;
+    @apply border border-white/10 bg-surface-raised shadow-lg shadow-black/25 transition-all duration-300 hover:border-accent/40 hover:bg-surface-overlay hover:shadow-xl hover:shadow-accent/10;
   }
 
   .gradient-text {
@@ -67,15 +67,26 @@
 }
 
 @layer utilities {
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   .animate-stagger > * {
-    animation: slideUp 0.5s ease-out forwards;
-    opacity: 0;
+    animation: slideUp 0.45s ease-out forwards;
   }
 
-  .animate-stagger > *:nth-child(1) { animation-delay: 0.05s; }
-  .animate-stagger > *:nth-child(2) { animation-delay: 0.1s; }
-  .animate-stagger > *:nth-child(3) { animation-delay: 0.15s; }
-  .animate-stagger > *:nth-child(4) { animation-delay: 0.2s; }
-  .animate-stagger > *:nth-child(5) { animation-delay: 0.25s; }
-  .animate-stagger > *:nth-child(6) { animation-delay: 0.3s; }
+  .animate-stagger > *:nth-child(1) { animation-delay: 0.03s; }
+  .animate-stagger > *:nth-child(2) { animation-delay: 0.06s; }
+  .animate-stagger > *:nth-child(3) { animation-delay: 0.09s; }
+  .animate-stagger > *:nth-child(4) { animation-delay: 0.12s; }
+  .animate-stagger > *:nth-child(5) { animation-delay: 0.15s; }
+  .animate-stagger > *:nth-child(6) { animation-delay: 0.18s; }
+  .animate-stagger > *:nth-child(n + 7) { animation-delay: 0.21s; }
 }

website/src/lib/utils.ts

@@ -267,7 +267,10 @@ export function getPrimaryVideos(links: ResourceLink[]): ResourceLink[] {
 }
 
 export function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString("en-US", {
+  if (!iso) return "Session recording";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "Session recording";
+  return date.toLocaleDateString("en-US", {
     year: "numeric",
     month: "short",
     day: "numeric",

website/src/pages/HomePage.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import Hero from "@/components/Hero";
+import YouTubeSection from "@/components/YouTubeSection";
 import SearchBar from "@/components/SearchBar";
 import CategoryFilter from "@/components/CategoryFilter";
 import SessionCard from "@/components/SessionCard";
@@ -49,8 +50,9 @@ export default function HomePage() {
   return (
     <>
       <Hero />
+      <YouTubeSection />
 
-      <section id="sessions" className="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
+      <section id="sessions" className="mx-auto max-w-7xl border-t border-white/5 px-4 pb-24 pt-16 sm:px-6 lg:px-8">
         <div className="mb-8 space-y-6">
           <div>
             <h2 className="section-heading">All Sessions</h2>