​

GameCard Component

​

Props

​

Usage Example

​

Home Page Implementation

---
import Layout from "../layouts/Layout.astro";
import GameCard from "../components/GameCard.astro";
import data from "../data/games.json";

const game = data.games;
---

<Layout
  title="Gacha Countdown - Track Game Updates"
  description="Track upcoming maintenance and patch releases."
>
  <main class="max-w-7xl mx-auto w-full px-6 py-10">
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      {
        game.map((juego) => (
          <GameCard
            title={juego.nombre}
            current={juego.version_actual}
            upcoming={juego.proxima_version}
            imagen={juego.imagen}
            fecha_inicio={juego.fecha_inicio}
            duracion_dias={juego.duracion_dias}
            tema={juego.tema}
            href={juego.href}
          />
        ))
      }
    </section>
  </main>
</Layout>

​

Visual Structure

​

1. Container Link

<a
  href=`games${href}`
  class="group relative overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-900 h-95 flex flex-col justify-end p-8 transition-all hover:shadow-2xl hover:shadow-genshin/10"
>

• Full card is clickable link to game detail page
• group class enables hover effects on children
• Fixed height with flex layout pushing content to bottom

​

2. Background Layer

<div
  class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
  style=`background-image: linear-gradient(180deg, rgba(10, 10, 12, 0.2) 0%, rgba(10, 10, 12, 0.95) 100%), url(${imagen});`
>
</div>

• Covers entire card with background image
• Gradient overlay from transparent to dark for text readability
• Scale animation on hover (110% zoom)

​

3. Current Version Badge

<div class="absolute top-6 right-6 glass-panel px-3 py-1 rounded-full border-genshin/30">
  <span class="text-xs font-bold tracking-widest uppercase" style=`color: ${tema}`>
    Current: v{current}
  </span>
</div>

• Glass panel effect in top-right corner
• Dynamic theme color from props
• Shows current version

​

4. Content Section

<div class="relative z-10">
  <div class="flex items-center gap-2 mb-2">
    <h3 class="text-2xl font-bold">{title}</h3>
    <div class="size-2 rounded-full bg-green-500 animate-pulse"></div>
  </div>
  <p class="text-slate-400 text-sm mb-6">
    Upcoming: <span class="text-white font-medium">v{upcoming}</span>
  </p>
  <Counter
    client:load
    fecha_inicio={fecha_inicio}
    duracion_dias={duracion_dias}
  />
</div>

• Game title with pulsing live indicator
• Upcoming version information
• Counter component in “mini” variant (default)

​

5. Bottom Accent Bar

<div class="absolute bottom-0 left-0 h-1 bg-genshin transition-all w-0 group-hover:w-full">
</div>

• Animated bar that expands on hover
• Uses theme-specific color

​

Hover Effects

​

Integration with Counter

• client:load directive for hydration
• fecha_inicio and duracion_dias passed through
• Default “mini” variant (prop omitted)

<Counter
  client:load
  fecha_inicio={fecha_inicio}
  duracion_dias={duracion_dias}
/>

​

Styling Classes

​

Custom Classes

• glass-panel: Glassmorphism effect for badges
• border-genshin/30: Theme-specific border with opacity
• bg-background-dark: Dark background color from theme

​

Responsive Design

• Fixed height maintains consistent grid layout
• Text sizes optimize for mobile and desktop
• Grid container uses grid-cols-1 md:grid-cols-2 for responsive columns

​

Accessibility

• Semantic HTML with proper <a> tag for navigation
• Alt text via data-alt attribute on background div
• Sufficient color contrast with gradient overlay
• Clear visual indicators for interactive elements

​

Source Location