mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-10 10:06:15 -08:00
4gray
d19ae82e72
- Introduced a new SVG illustration for supporting open-source software. - Added a footer watermark image to enhance the visual design of the footer. - Created a new SupportSection component to encourage user contributions with links to GitHub Stars, GitHub Sponsors, and Ko-fi. - Updated the Hero component to include a mascot image and social links for GitHub, Telegram, and Ko-fi. - Enhanced the FeatureGrid and Footer components with improved styling and layout adjustments. - Updated blog post metadata for better formatting and added a disclaimer in the SupportSection. - Improved global CSS styles for buttons and animations to create a more engaging user experience. Entire-Checkpoint: b7a1c2f08179
87 lines
4.2 KiB
Plaintext
87 lines
4.2 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-dotted 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 <em class="font-medium text-accent-400" style="font-style: italic;">open source</em>
|
|
</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-dashed 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-dotted 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>
|