mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-10 10:06:15 -08:00
4grayandClaude Opus 4.6
3dc3794ac2
Create a new IPTVnator website using Astro 5 + Tailwind CSS within the Nx monorepo. Features include a landing page with hero section, feature grid with auto-scrolling carousel, screenshot showcase, download CTA, blog with MDX content collections, and a GitHub Pages deployment workflow. Design uses a cinematic broadcast aesthetic with TV-effect hover animations, Playfair Display serif typography, and warm dark surfaces. Also fixes .gitignore to cover nested node_modules directories. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Entire-Checkpoint: 8171359f42f3
72 lines
1.9 KiB
Plaintext
72 lines
1.9 KiB
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
pubDate: Date;
|
|
slug: string;
|
|
tags?: string[];
|
|
heroImage?: string;
|
|
}
|
|
|
|
const { title, description, pubDate, slug, tags = [], heroImage } = Astro.props;
|
|
|
|
const formattedDate = pubDate.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
---
|
|
|
|
<a
|
|
href={`/iptvnator/blog/${slug}/`}
|
|
class="card-dotted group block"
|
|
>
|
|
{heroImage && (
|
|
<div class="overflow-hidden rounded-t-lg -mx-6 -mt-6 mb-5">
|
|
<img
|
|
src={heroImage}
|
|
alt=""
|
|
class="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-[1.02]"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div class="flex items-center gap-2">
|
|
<time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
|
|
{formattedDate}
|
|
</time>
|
|
{
|
|
tags.length > 0 && (
|
|
<>
|
|
<span class="text-surface-700">·</span>
|
|
{tags.map((tag) => (
|
|
<span class="rounded-full border border-dashed border-accent-500/30 px-2 py-0.5 text-xs text-accent-400">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
</div>
|
|
<h3
|
|
class="mt-3 font-display text-lg font-semibold text-surface-100 transition-colors duration-200 group-hover:text-accent-400"
|
|
>
|
|
{title}
|
|
</h3>
|
|
<p class="mt-2 text-sm leading-relaxed text-surface-500">
|
|
{description}
|
|
</p>
|
|
<span class="mt-4 inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.1em] text-accent-500 transition-colors group-hover:text-accent-400">
|
|
Read more
|
|
<svg
|
|
class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</span>
|
|
</a>
|