188 lines
11 KiB
Plaintext
188 lines
11 KiB
Plaintext
---
|
|
export const prerender = false;
|
|
import Layout from '../layouts/Main.astro';
|
|
import Search from '../components/Search.astro';
|
|
import NavBar from '../components/NavBar.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import { Show, SignInButton } from '@clerk/astro/components'
|
|
import Hero from '../components/Hero.astro';
|
|
import BackToTop from '../components/BackToTop.astro';
|
|
import NavItems from '../components/NavItems.astro';
|
|
---
|
|
<Layout title="RAT - Realtime, Accurate and Transparent TCG Pricing Data" >
|
|
<Hero slot="page" />
|
|
<div slot="page">
|
|
<!-- ═══════════════════════════════════════════
|
|
SOCIAL PROOF / STATS BAR
|
|
═══════════════════════════════════════════ -->
|
|
<section class="stats-bar py-4 border-top border-bottom border-subtle" aria-label="Platform statistics">
|
|
<div class="container">
|
|
<ul class="list-unstyled d-flex flex-wrap justify-content-center justify-content-md-between gap-4 mb-0 text-center">
|
|
<li>
|
|
<strong class="d-block fs-4 fw-bold text-aqua">Pokémon TCG</strong>
|
|
<span class="text-body-secondary small">EN · JP Languages</span>
|
|
</li>
|
|
<li>
|
|
<strong class="d-block fs-4 fw-bold text-aqua">All Conditions</strong>
|
|
<span class="text-body-secondary small">NM · LP · MP · HP · DMG</span>
|
|
</li>
|
|
<li>
|
|
<strong class="d-block fs-4 fw-bold text-aqua">Real-Time</strong>
|
|
<span class="text-body-secondary small">Accurate Market Prices</span>
|
|
</li>
|
|
<li>
|
|
<strong class="d-block fs-4 fw-bold text-aqua">100% Free</strong>
|
|
<span class="text-body-secondary small">Pricing Features Always Free</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<!-- ═══════════════════════════════════════════
|
|
CORE FEATURES
|
|
═══════════════════════════════════════════ -->
|
|
<section class="py-6" aria-labelledby="features-heading">
|
|
<div class="container">
|
|
<header class="text-center mb-5">
|
|
<h2 id="features-heading" class="h1 fw-bold">Everything you need to collect smarter</h2>
|
|
<p class="text-body-secondary lead mt-2">Built by collectors, for collectors. No fluff.</p>
|
|
</header>
|
|
|
|
<div class="row g-4">
|
|
|
|
<article class="col-md-5 offset-md-1">
|
|
<div class="feature-card h-100 p-4 rounded-3">
|
|
<div class="feature-icon mb-3" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/></svg>
|
|
</div>
|
|
<h3 class="h5 fw-semibold mb-2">Complete Card Database</h3>
|
|
<p class="text-body-secondary mb-0">Search across every English and Japanese set. Find any card instantly with the condition-by-condition pricing you need to buy, sell, or trade with confidence.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="col-md-5">
|
|
<div class="feature-card h-100 p-4 rounded-3">
|
|
<div class="feature-icon mb-3" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07"/></svg>
|
|
</div>
|
|
<h3 class="h5 fw-semibold mb-2">Condition-Graded Pricing</h3>
|
|
<p class="text-body-secondary mb-0">NM, LP, MP, HP, and DMG prices displayed side by side. Stop guessing what a played card is worth — see every tier at once so you never undersell or overpay.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="col-md-5 offset-md-1">
|
|
<div class="feature-card h-100 p-4 rounded-3">
|
|
<div class="feature-icon mb-3" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg>
|
|
</div>
|
|
<h3 class="h5 fw-semibold mb-2">All Variants</h3>
|
|
<p class="text-body-secondary mb-0">We display every card variant separately—no stacking—so you can see true edition-level prices, trends, and rarity at a glance..</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="col-md-5">
|
|
<div class="feature-card h-100 p-4 rounded-3">
|
|
<div class="feature-icon mb-3" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/></svg>
|
|
</div>
|
|
<h3 class="h5 fw-semibold mb-2">Fast Search, Instant Results</h3>
|
|
<p class="text-body-secondary mb-0">Type a card name + number or search by eras like "e-reader" or "SWSH". Powerful filters let you drill into exactly the set, variant, rarity or card type you care about.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
UPCOMING PREMIUM / CTA TEASER
|
|
═══════════════════════════════════════════ -->
|
|
<section class="premium-section py-6" aria-labelledby="premium-heading">
|
|
<div class="container">
|
|
<div class="row align-items-center g-5">
|
|
|
|
<div class="col-lg-5">
|
|
<p class="eyebrow text-purple-light mb-3">Coming Soon · Premium</p>
|
|
<h2 id="premium-heading" class="h1 fw-bold mb-3">
|
|
<span class="text-gradient">Your collection,<br/>fully managed.</span>
|
|
</h2>
|
|
<p class="text-body-secondary lead mb-4">
|
|
We're building a suite of inventory and curation tools for serious collectors. Sign up free today and be first in line when they launch.
|
|
</p>
|
|
<Show when="signed-out">
|
|
<SignInButton asChild mode="modal">
|
|
<button class="btn btn-purple btn-lg px-4">
|
|
Join Now! — It's Free
|
|
</button>
|
|
</SignInButton>
|
|
</Show>
|
|
</div>
|
|
|
|
<div class="col-lg-7">
|
|
<div class="premium-list">
|
|
|
|
<div class="premium-item p-4 rounded-3 mb-3">
|
|
<div class="d-flex align-items-start gap-3">
|
|
<span class="badge-coming">Coming Soon</span>
|
|
<div>
|
|
<h3 class="h6 fw-semibold mb-1">Collection Portfolio Tracker</h3>
|
|
<p class="text-body-secondary small mb-0">Add cards you own with their condition and purchase price. Watch your total collection value update in real time as market prices shift — so you always know your net position.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="premium-item p-4 rounded-3 mb-3">
|
|
<div class="d-flex align-items-start gap-3">
|
|
<span class="badge-coming">Coming Soon</span>
|
|
<div>
|
|
<h3 class="h6 fw-semibold mb-1">Latest Sales Aggregation</h3>
|
|
<p class="text-body-secondary small mb-0">See recent sale prices across different trusted marketplaces, including TCGPlayer and eBay. Make informed purchases based on real-time market activity, not just Market Price.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="premium-item p-4 rounded-3">
|
|
<div class="d-flex align-items-start gap-3">
|
|
<span class="badge-coming">Coming Soon</span>
|
|
<div>
|
|
<h3 class="h6 fw-semibold mb-1">Graded Card Inventory</h3>
|
|
<p class="text-body-secondary small mb-0">Log PSA, BGS, and CGC slabs with their cert numbers, grades, and current values. Track your graded portfolio separately from your raw collection.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
FINAL CTA
|
|
═══════════════════════════════════════════ -->
|
|
<section class="cta-section py-6" aria-labelledby="cta-heading">
|
|
<div class="hero-bg" aria-hidden="true"></div>
|
|
<div class="container text-center">
|
|
<h2 id="cta-heading" class="display-5 fw-bold mb-3">Ready to join the RAT Pack?</h2>
|
|
<p class="lead text-body-secondary mb-4 mx-auto" style="max-width: 520px;">
|
|
Join free today. Browse every card, track prices across conditions, and get early access to premium collection tools as we build them.
|
|
</p>
|
|
<div class="d-flex flex-wrap justify-content-center gap-3">
|
|
<Show when="signed-out">
|
|
<SignInButton asChild mode="modal">
|
|
<button class="btn btn-purple btn-lg px-5">
|
|
Create Free Account
|
|
</button>
|
|
</SignInButton>
|
|
</Show>
|
|
<a href="/pokemon" class="btn btn-outline-light btn-lg px-5">Browse Cards First</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<BackToTop />
|
|
</div>
|
|
|
|
<Footer slot="footer" />
|
|
</Layout>
|