mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-12 12:06:16 -08:00
4grayandClaude Fable 5.1
1cf17f7301
* style(website): solid hairlines, Bricolage Grotesque display face, drop TV effects First of three landing redesign PRs. This one only touches tokens and surface treatment so every page (home, blog, /features, /compare, /download) benefits without any structural change: - Replace every dashed border with a solid hairline; `.card-dotted` becomes `.card-panel` (bg step + hairline, lighter hairline on hover) and the section divider is solid `surface-800`. - Swap the display face from Playfair Display to Bricolage Grotesque (DM Sans body and IBM Plex Mono unchanged). The italic accent word that every heading repeated is gone; only page-level h1s keep the accent, and as colour rather than italic. - Remove the CRT/TV effects: the `.btn-tv` block and its nine keyframes, the scanline overlay on the hero screenshot, the CRT hover overlay and teal glow shadows on feature cards, the pulsing mascot, and the unused scan/tv-* Tailwind animations. - The hero download button and the header Download link are now solid accent buttons; the self-host link is a plain text link. - Blog tag chips use neutral surface borders so teal stays reserved for actions. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * style(website): finish the dashed sweep in prose and package rows The blanket `border-dashed ` removal ate the utility but not the variant prefix in the blog prose classes, leaving `prose-pre:prose-pre:...` and `prose-hr:prose-hr:...`; and the Linux package rows still used `divide-dashed`. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
43 lines
1.8 KiB
Plaintext
43 lines
1.8 KiB
Plaintext
---
|
|
import { FEATURES, FEATURES_HUB_HREF } from '../../lib/features';
|
|
import type { FeatureSlug } from '../../lib/features';
|
|
|
|
interface Props {
|
|
current: FeatureSlug;
|
|
}
|
|
|
|
const { current } = Astro.props;
|
|
const others = FEATURES.filter((feature) => feature.slug !== current);
|
|
---
|
|
|
|
<section class="relative py-20">
|
|
<hr class="section-divider mb-20" />
|
|
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">More features</span>
|
|
<h2 class="mt-3 font-display text-2xl font-bold tracking-tight text-surface-50 sm:text-3xl">
|
|
The rest of{' '}
|
|
IPTVnator
|
|
</h2>
|
|
</div>
|
|
<a href={FEATURES_HUB_HREF} class="font-mono text-xs uppercase tracking-[0.1em] text-accent-500 transition-colors hover:text-accent-400">All features</a>
|
|
</div>
|
|
|
|
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{others.map((feature) => (
|
|
<a href={feature.href} class="card-panel group flex flex-col gap-3 p-5">
|
|
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent-500/[0.08] ring-1 ring-accent-500/20 transition-all duration-300 group-hover:bg-accent-500/[0.14] group-hover:ring-accent-500/35">
|
|
<svg class="h-4.5 w-4.5 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d={feature.icon} />
|
|
</svg>
|
|
</span>
|
|
<span class="font-display text-base font-semibold text-surface-100">{feature.label}</span>
|
|
<span class="text-xs leading-relaxed text-surface-500">{feature.summary}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|