mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-10 18:36:15 -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>
87 lines
4.1 KiB
Plaintext
87 lines
4.1 KiB
Plaintext
---
|
|
const supportLinks = [
|
|
{
|
|
label: 'Give a Star',
|
|
href: 'https://github.com/4gray/iptvnator/stargazers',
|
|
description: 'The fastest way to help visibility',
|
|
icon: 'M12 2.5l2.94 5.96 6.58.96-4.76 4.64 1.12 6.56L12 17.53 6.12 20.62l1.12-6.56-4.76-4.64 6.58-.96L12 2.5z',
|
|
},
|
|
{
|
|
label: 'GitHub Sponsors',
|
|
href: 'https://github.com/sponsors/4gray',
|
|
description: 'Monthly support keeps development steady',
|
|
icon: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
|
|
},
|
|
{
|
|
label: 'Ko-fi',
|
|
href: 'https://ko-fi.com/4gray',
|
|
description: 'One-time donations are always appreciated',
|
|
icon: 'M3 6.5A2.5 2.5 0 0 1 5.5 4h10A2.5 2.5 0 0 1 18 6.5V8h1.5A2.5 2.5 0 0 1 22 10.5v1A2.5 2.5 0 0 1 19.5 14H18v1.5A4.5 4.5 0 0 1 13.5 20h-6A4.5 4.5 0 0 1 3 15.5v-9zm15 5.5h1.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H18V12z',
|
|
},
|
|
];
|
|
---
|
|
|
|
<section class="relative py-28">
|
|
<hr class="section-divider mb-24" />
|
|
|
|
<div class="pointer-events-none absolute inset-x-0 top-12 mx-auto h-56 w-[42rem] rounded-full bg-accent-500/[0.05] blur-3xl"></div>
|
|
|
|
<div class="relative mx-auto max-w-6xl px-6">
|
|
<div class="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
|
|
<div class="card-panel relative overflow-hidden rounded-2xl bg-surface-900/35">
|
|
<div class="pointer-events-none absolute -top-12 -right-14 hidden h-52 w-52 opacity-35 mix-blend-screen md:block">
|
|
<img
|
|
src="/iptvnator/illustrations/support-open-source-signal.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-full w-full object-contain"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Support</span>
|
|
<h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl">
|
|
IPTVnator stays open source
|
|
</h2>
|
|
<p class="mt-5 max-w-2xl text-base leading-relaxed text-surface-300 md:pr-24">
|
|
IPTVnator was built as an open-source project and will remain one. If it helps you, your support keeps the
|
|
project healthy and the motivation high for continued improvements, fixes, and long-term maintenance.
|
|
</p>
|
|
|
|
<div class="mt-8 grid gap-3 sm:grid-cols-3">
|
|
{supportLinks.map((item) => (
|
|
<a
|
|
href={item.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group flex h-full flex-col rounded-xl border border-surface-700/70 bg-surface-950/50 p-4 transition-all duration-300 hover:border-accent-500/40 hover:bg-accent-500/[0.06]"
|
|
>
|
|
<div class="flex min-h-[3rem] items-center gap-3 text-surface-200">
|
|
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-accent-500/25 bg-accent-500/10">
|
|
<svg class="h-5 w-5 text-accent-300 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d={item.icon} />
|
|
</svg>
|
|
</span>
|
|
<span class="text-sm font-semibold text-surface-100">{item.label}</span>
|
|
</div>
|
|
<p class="mt-3 text-sm leading-relaxed text-surface-400">{item.description}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="card-panel rounded-2xl bg-surface-900/25">
|
|
<span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Disclaimer</span>
|
|
<p class="mt-4 text-sm leading-relaxed text-surface-300">
|
|
IPTVnator is a media player application. It does not provide, host, or sell any digital media content,
|
|
playlists, channels, or EPG data.
|
|
</p>
|
|
<p class="mt-3 text-sm leading-relaxed text-surface-400">
|
|
Any channel names, logos, metadata, or playlists shown in screenshots are for demonstration purposes only.
|
|
You are responsible for the sources you use and for complying with local laws and rights.
|
|
</p>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|