190 lines
9.6 KiB
Plaintext
190 lines
9.6 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import heroImg from '../assets/screenshots/hero-dark.png';
|
|
import mascotImg from '../assets/illustrations/iptvnator-1-mascot.png';
|
|
|
|
const heroSocialLinks = [
|
|
{
|
|
label: 'GitHub',
|
|
href: 'https://github.com/4gray/iptvnator',
|
|
icon: 'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
|
|
},
|
|
{
|
|
label: 'Telegram',
|
|
href: 'https://t.me/iptvnator',
|
|
icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.03-1.99 1.27-5.62 3.72-.53.36-1.01.54-1.44.53-.47-.01-1.38-.27-2.06-.49-.83-.27-1.49-.42-1.43-.88.03-.24.37-.49 1.02-.74 3.99-1.74 6.65-2.89 7.99-3.44 3.81-1.58 4.6-1.86 5.12-1.87.11 0 .37.03.54.17.14.12.18.28.2.45-.01.06.01.24 0 .38z',
|
|
},
|
|
{
|
|
label: 'GitHub Sponsors',
|
|
href: 'https://github.com/sponsors/4gray',
|
|
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',
|
|
icon: 'M4 5h12a4 4 0 0 1 0 8h-1v2.5A4.5 4.5 0 0 1 10.5 20h-1A4.5 4.5 0 0 1 5 15.5V13H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm11 6h1a2 2 0 0 0 0-4h-1v4Z',
|
|
},
|
|
];
|
|
---
|
|
|
|
<section class="relative overflow-hidden pt-36 pb-24 sm:pt-44 sm:pb-32">
|
|
<!-- Ambient glow -->
|
|
<div class="pointer-events-none absolute top-0 left-1/2 h-[600px] w-[900px] -translate-x-1/2 -translate-y-1/3 rounded-full bg-accent-500/[0.06] blur-[120px]"></div>
|
|
<div class="pointer-events-none absolute inset-x-0 top-8 z-0 overflow-hidden opacity-35 mix-blend-screen">
|
|
<img
|
|
src="/iptvnator/illustrations/hero-ambient-broadcast-waves.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="mx-auto h-[18rem] w-[140%] max-w-none object-cover md:h-[22rem] md:w-full lg:h-[26rem]"
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
|
|
<div class="relative mx-auto max-w-6xl px-6">
|
|
<div class="pointer-events-none absolute -top-4 -right-12 z-0 hidden w-[18rem] opacity-75 blur-[0.2px] md:block lg:w-[22rem] xl:w-[25rem]">
|
|
<div class="absolute inset-0 rounded-full bg-accent-500/[0.16] blur-3xl"></div>
|
|
<Image
|
|
src={mascotImg}
|
|
alt=""
|
|
aria-hidden="true"
|
|
width={520}
|
|
class="relative w-full object-contain saturate-110 animate-glow-pulse"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Top section: editorial intro -->
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Mono label -->
|
|
<div class="mb-8 inline-flex items-center gap-3">
|
|
<span class="h-px w-8 bg-accent-500/50"></span>
|
|
<span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Open source IPTV player</span>
|
|
<span class="h-px w-8 bg-accent-500/50"></span>
|
|
</div>
|
|
|
|
<!-- Headline with serif italic -->
|
|
<h1 class="font-display text-5xl font-bold tracking-tight text-surface-50 sm:text-7xl lg:text-8xl">
|
|
Watch, <em class="font-medium not-italic text-accent-400" style="font-style: italic;">your way.</em>
|
|
</h1>
|
|
|
|
<p class="mx-auto mt-8 max-w-xl text-lg leading-relaxed text-surface-400">
|
|
A cross-platform player for M3U/M3U8 playlists, Xtream Codes API, and
|
|
Stalker portals. Desktop app and Progressive Web App.
|
|
</p>
|
|
|
|
<!-- CTA: Big TV-effect download button -->
|
|
<div class="mt-12 flex flex-col items-center gap-6">
|
|
<a
|
|
href="https://github.com/4gray/iptvnator/releases/latest"
|
|
class="btn-tv group rounded-2xl px-10 py-6 sm:px-14 sm:py-7"
|
|
>
|
|
<!-- TV effect layers -->
|
|
<span class="tv-scanline"></span>
|
|
<span class="tv-noise"></span>
|
|
<span class="tv-vignette"></span>
|
|
|
|
<!-- Button content -->
|
|
<span class="relative z-10 flex items-center gap-4">
|
|
<svg class="h-6 w-6 text-accent-400 transition-transform duration-300 group-hover:translate-y-0.5 sm:h-7 sm:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
<span class="flex flex-col items-start">
|
|
<span class="btn-tv-text font-display text-2xl font-bold tracking-tight text-surface-50 sm:text-3xl">
|
|
Download <em class="font-medium text-accent-400" style="font-style: italic;">for Desktop</em>
|
|
</span>
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.2em] text-surface-500">
|
|
macOS · Windows · Linux
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Secondary: Web app link -->
|
|
<a
|
|
href="https://iptvnator.vercel.app"
|
|
class="group inline-flex items-center gap-2.5 rounded-lg border border-dashed border-surface-600/60 px-7 py-3.5 text-sm font-medium text-surface-400 transition-all duration-300 hover:border-accent-500/30 hover:text-accent-400"
|
|
>
|
|
<svg class="h-4 w-4 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
|
</svg>
|
|
Or try the Web App
|
|
<svg class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5" 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>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Shields badges -->
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<img
|
|
src="https://img.shields.io/github/stars/4gray/iptvnator?style=flat&color=20a8a8&labelColor=1a1a17"
|
|
alt="GitHub stars"
|
|
class="h-5"
|
|
loading="lazy"
|
|
/>
|
|
<img
|
|
src="https://img.shields.io/github/v/release/4gray/iptvnator?style=flat&color=20a8a8&labelColor=1a1a17"
|
|
alt="Latest release"
|
|
class="h-5"
|
|
loading="lazy"
|
|
/>
|
|
<img
|
|
src="https://img.shields.io/github/downloads/4gray/iptvnator/total?style=flat&color=20a8a8&labelColor=1a1a17"
|
|
alt="Total downloads"
|
|
class="h-5"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap items-center justify-center gap-2.5">
|
|
{heroSocialLinks.map((link) => (
|
|
<a
|
|
href={link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group inline-flex items-center gap-2 rounded-full border border-dashed border-surface-700/70 bg-surface-900/40 px-3 py-1.5 text-[11px] font-mono uppercase tracking-[0.08em] text-surface-400 transition-all duration-300 hover:border-accent-500/40 hover:bg-accent-500/[0.06] hover:text-accent-300"
|
|
aria-label={link.label}
|
|
title={link.label}
|
|
>
|
|
<svg class="h-3.5 w-3.5 text-surface-500 transition-colors duration-300 group-hover:text-accent-300" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d={link.icon} />
|
|
</svg>
|
|
<span>{link.label}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero screenshot with window chrome frame -->
|
|
<div class="relative mx-auto mt-20 max-w-5xl">
|
|
<!-- Ambient glow behind image -->
|
|
<div class="absolute -inset-8 rounded-2xl bg-accent-500/[0.04] blur-3xl"></div>
|
|
|
|
<!-- Window chrome -->
|
|
<div class="relative overflow-hidden rounded-xl border border-surface-700/60 bg-surface-900 shadow-2xl shadow-black/40">
|
|
<!-- Title bar -->
|
|
<div class="flex items-center gap-2 border-b border-dashed border-surface-700/60 px-4 py-2.5">
|
|
<div class="flex gap-1.5">
|
|
<span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span>
|
|
<span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70"></span>
|
|
<span class="h-2.5 w-2.5 rounded-full bg-green-500/70"></span>
|
|
</div>
|
|
<span class="ml-2 font-mono text-[11px] text-surface-500">IPTVnator</span>
|
|
</div>
|
|
|
|
<!-- Scanline overlay -->
|
|
<div class="relative">
|
|
<div class="pointer-events-none absolute inset-0 z-10 overflow-hidden opacity-[0.03]">
|
|
<div class="h-full w-full animate-scan" style="background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.5) 2px, rgba(255,255,255,0.5) 4px);"></div>
|
|
</div>
|
|
<Image
|
|
src={heroImg}
|
|
alt="IPTVnator application interface showing dark theme with channel list and video player"
|
|
width={1200}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|