Design System Skill

Guidance for implementing Billboard-inspired UI patterns in the Fireside Tribe project.

Episodes/Video Grid Layout

Model after Billboard Video Page:

Featured Video Hero

tsx
1<section className="relative w-full aspect-video max-h-[70vh]">
2  <Image src={episode.thumbnail} fill className="object-cover" />
3  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
4  <div className="absolute bottom-0 p-8 space-y-4">
5    <Badge>Featured</Badge>
6    <h1 className="text-4xl font-bold">{episode.title}</h1>
7    <p className="text-gray-300 max-w-2xl">{episode.description}</p>
8  </div>
9</section>

Video Card Grid

tsx
1<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
2  {episodes.map((ep) => (
3    <VideoCard key={ep._id} episode={ep} />
4  ))}
5</div>

Video Card Component

tsx
1<article className="group cursor-pointer">
2  <div className="relative aspect-video rounded-lg overflow-hidden">
3    <Image src={ep.thumbnail} fill className="object-cover transition-transform group-hover:scale-105" />
4    <div className="absolute bottom-2 right-2 bg-black/80 px-2 py-1 text-sm rounded">
5      {ep.duration}
6    </div>
7  </div>
8  <div className="mt-3 space-y-1">
9    <h3 className="font-semibold line-clamp-2 group-hover:text-red-500 transition-colors">
10      {ep.title}
11    </h3>
12    <p className="text-sm text-gray-400">{ep.publishedAt}</p>
13  </div>
14</article>

Chart-Style Rankings

For featuring top episodes or artists:

tsx
1<ol className="space-y-4">
2  {items.map((item, index) => (
3    <li key={item._id} className="flex items-center gap-4 p-4 bg-zinc-900 rounded-lg">
4      <span className="text-3xl font-bold text-gray-500 w-12 text-center">
5        {index + 1}
6      </span>
7      <Image src={item.image} width={64} height={64} className="rounded" />
8      <div className="flex-1">
9        <h4 className="font-semibold">{item.title}</h4>
10        <p className="text-sm text-gray-400">{item.subtitle}</p>
11      </div>
12      <div className="flex gap-2">
13        <Badge variant="outline">Peak: #{item.peak}</Badge>
14        <Badge variant="outline">Weeks: {item.weeks}</Badge>
15      </div>
16    </li>
17  ))}
18</ol>

Section Headers

Billboard-style section headers with "See All" links:

tsx
1<div className="flex items-center justify-between mb-6">
2  <h2 className="text-2xl font-bold uppercase tracking-wide">{title}</h2>
3  <Link href={seeAllHref} className="text-red-500 hover:underline text-sm font-medium">
4    See All →
5  </Link>
6</div>

Color Tokens

css
1:root {
2  --background: #0a0a0a;
3  --surface: #171717;
4  --surface-elevated: #262626;
5  --accent: #ef4444;
6  --text-primary: #ffffff;
7  --text-secondary: #a3a3a3;
8  --text-muted: #525252;
9}

Responsive Breakpoints

Follow TailwindCSS defaults:

• sm: 640px (mobile landscape)
• md: 768px (tablet)
• lg: 1024px (desktop)
• xl: 1280px (wide desktop)

Motion Guidelines

Use Framer Motion with subtle, performant animations:

tsx
1const cardVariants = {
2  hidden: { opacity: 0, y: 20 },
3  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
4};
5
6<motion.div variants={cardVariants} initial="hidden" animate="visible">
7  {/* content */}
8</motion.div>