d9961a76ad
Fixes duplicate placeholder cover image on the 3 newest blog posts, broken aspect-ratio classes on the albums listing page, and a non-responsive fixed sidebar on the chat page.
86 lines
4.8 KiB
HTML
86 lines
4.8 KiB
HTML
{{ define "main" }}
|
|
<div class="bg-gray-900 min-h-screen py-16 px-4 sm:px-6 lg:px-8" x-data="{ category: 'All' }" x-init="window.MembershipAPI.checkDownloadLimit()">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl font-extrabold text-gray-100 tracking-tight sm:text-5xl">Resource Library</h1>
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
|
|
Download guides, checklists, and protocols to upgrade your hydroponic game.
|
|
<br>
|
|
<span class="text-sm text-gray-400 italic">For educational purposes only.</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Paywall Message -->
|
|
<div class="paywall-message mt-8 bg-gray-800 rounded-lg p-8 border border-gray-700 text-center" style="display: none;">
|
|
<h2 class="text-2xl font-bold text-gray-100 mb-4">Download Limit Reached</h2>
|
|
<p class="text-gray-300 mb-6">
|
|
You've used your free download. Become a member for unlimited access to all resources.
|
|
</p>
|
|
<a href="/membership/" class="inline-flex items-center px-6 py-3 bg-primary hover:bg-emerald-700 text-white font-semibold rounded-lg transition-colors">
|
|
Become a Member
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Download Limit Info -->
|
|
<div class="guest-only mt-6 bg-blue-900/30 border border-blue-700 rounded-lg p-4 text-center" style="display: block;">
|
|
<p class="text-blue-200">
|
|
<span class="font-semibold">Free users:</span> 1 download allowed.
|
|
<a href="/membership/" class="underline hover:text-blue-100">Sign up for membership</a> for unlimited downloads.
|
|
</p>
|
|
</div>
|
|
<div class="membership-only mt-6 bg-green-900/30 border border-green-700 rounded-lg p-4 text-center" style="display: none;">
|
|
<p class="text-green-200">
|
|
<span class="font-semibold">Member:</span> Unlimited downloads available.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="mt-10 flex justify-center flex-wrap gap-2">
|
|
{{ $categories := slice "All" }}
|
|
{{ range .Site.Data.library }}
|
|
{{ $categories = $categories | append .category }}
|
|
{{ end }}
|
|
{{ range ($categories | uniq) }}
|
|
<button
|
|
@click="category = '{{ . }}'"
|
|
:class="{ 'bg-primary text-white': category === '{{ . }}', 'bg-gray-800 text-gray-300 hover:bg-gray-700': category !== '{{ . }}' }"
|
|
class="px-4 py-2 rounded-full text-sm font-medium shadow-sm transition-colors border border-gray-700">
|
|
{{ . }}
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="paywall-content mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{{ range .Site.Data.library }}
|
|
<div x-show="category === 'All' || category === '{{ .category }}'"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform scale-95"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
class="bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex flex-col border border-gray-700">
|
|
<div class="p-6 flex-1">
|
|
<div class="flex justify-between items-start">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/20 text-primary">
|
|
{{ .category }}
|
|
</span>
|
|
<span class="text-xs text-gray-500">{{ .date }}</span>
|
|
</div>
|
|
<div class="mt-4 flex items-center gap-3">
|
|
<svg class="h-8 w-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-100">{{ .title }}</h3>
|
|
</div>
|
|
<p class="mt-3 text-sm text-gray-300">{{ .description }}</p>
|
|
</div>
|
|
<div class="bg-gray-900 px-6 py-4 border-t border-gray-700">
|
|
<a href="{{ .file }}" download data-file-path="{{ .file }}" class="download-link flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-primary bg-white hover:bg-gray-50 border-primary transition-colors">
|
|
Download {{ .filename }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }} |