Files
kuehlfinder/src/pages/index.astro
T

89 lines
5.3 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
import Base from '../layouts/Base.astro';
import ProductCard from '../components/ProductCard.astro';
import { allProducts, priceIntel, euro, getProduct, dataUpdatedAt } from '../lib/pricing';
const top = allProducts.filter(p => p.tier === 'A');
const ps = getProduct('midea-portasplit-12000')!;
const psi = priceIntel(ps);
const updated = new Date(dataUpdatedAt).toLocaleString('de-DE',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'});
const jsonld = {
'@context':'https://schema.org','@type':'WebSite',name:'Kühlfinder',url:'https://kuehlfinder.de',
description:'Portable Klimageräte finden und Live-Verfügbarkeit in Baumärkten sehen.'
};
---
<Base title="Kühlfinder gutes portables Klimagerät finden & Verfügbarkeit sehen" jsonld={jsonld}>
<section class="hero"><div class="wrap">
<p class="kicker"><span class="u"></span>Ehrlicher Klima-Finder für Mietwohnungen</p>
<h1>Finde ein gutes portables Klimagerät und sieh, wo es heute verfügbar ist.</h1>
<p class="lead">Nur echte Kompressorgeräte, keine Fake-Kühler. Mit Live-Verfügbarkeit in Baumärkten, Preis-Check gegen Wucher und Alarm, sobald dein Gerät wieder da ist.</p>
<div class="modes">
<a class="mode" href="/finder"><strong>Ich filtere</strong><span>Welches Gerät passt zu meinem Raum?</span></a>
<a class="mode" href="/karte"><strong>Ich sehe die Karte</strong><span>Alle Märkte mit aktuellem Bestand</span></a>
<a class="mode" href="/alarm"><strong>Ich lasse mich benachrichtigen</strong><span>Alarm bei Verfügbarkeit in der Nähe</span></a>
</div>
</div></section>
<section class="wrap"><div class="status card">
<div class="status-head">
<h2 style="margin:0">Midea PortaSplit aktueller Status</h2>
<span class="note">Stand: {updated}</span>
</div>
<div class="status-grid">
<div><span class="note">Üblicher Preis (UVP)</span><br /><strong>{euro(psi.fairPrice)}</strong></div>
<div><span class="note">Seriös aktuell ab</span><br /><strong>{euro(psi.lowestLegit)}</strong></div>
<div><span class="note">Märkte mit Bestand</span><br /><strong>{psi.storesAvailable}</strong></div>
</div>
{psi.wucher && (
<p class="wucher">⚠ <strong>Wucher-Warnung:</strong> Einzelne Drittanbieter verlangen aktuell bis {euro(psi.wucher.price)} das ist deutlich über dem üblichen Preis von {euro(psi.fairPrice)}. Nicht in Panik überteuert kaufen. Besser: Alarm setzen oder eine gute Alternative wählen.</p>
)}
<div class="status-cta">
<a class="btn sm" href="/karte?produkt=midea-portasplit-12000">PortaSplit auf der Karte</a>
<a class="btn sm ghost" href="/alarm?produkt=midea-portasplit-12000">Verfügbarkeits-Alarm</a>
<a class="btn sm ghost" href="/portasplit">Alternativen ansehen</a>
</div>
</div></section>
<section class="wrap">
<h2><span class="u"></span>Top-Empfehlungen</h2>
<p class="muted">Kuratiert nach Bauart, Kühlleistung, Effizienz, Nutzungsfall und glaubwürdigen Quellen.</p>
<div class="grid cards3">
{top.map(p => <ProductCard product={p} />)}
</div>
<p style="margin-top:1rem"><a class="btn ghost" href="/geraete">Alle Geräte &amp; Vergleich</a></p>
</section>
<section class="wrap"><div class="split">
<div class="card">
<h2>PortaSplit ausverkauft?</h2>
<p>Die Midea PortaSplit ist bei Hitze regelmäßig vergriffen. Wir zeigen dir wohnungstaugliche Alternativen, die wirklich kühlen statt dich teuer hängen zu lassen.</p>
<a class="btn ghost" href="/portasplit">Sinnvolle Alternativen</a>
</div>
<div class="card warm">
<h2>Warum Kühlung wichtiger wird</h2>
<p>Hitzewellen treten in Deutschland früher und intensiver auf. Gute, effiziente Kühlung kann Hitzeschutz sein mit Quellen statt Panik.</p>
<a class="btn ghost" href="/hitzeschutz">Hitzeschutz &amp; Klima</a>
</div>
</div></section>
</Base>
<style>
.hero{background:linear-gradient(180deg,var(--petrol-soft),var(--light));padding:3rem 0 2.5rem}
.kicker{font-weight:600;color:var(--petrol-deep);margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}
.lead{font-size:1.15rem;max-width:46rem;color:var(--slate)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.mode{display:flex;flex-direction:column;gap:.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .08s}
.mode:hover{border-color:var(--petrol);transform:translateY(-2px)}
.mode strong{font-size:1.05rem;color:var(--petrol-deep)}
.mode span{font-size:.9rem;color:var(--slate)}
section.wrap{margin-top:2.5rem}
.status{border-left:4px solid var(--warm)}
.status-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem}
.status-grid{display:flex;gap:2rem;margin:.8rem 0;flex-wrap:wrap}
.status-grid strong{font-size:1.3rem}
.wucher{background:var(--danger-bg);color:var(--danger);padding:.8rem 1rem;border-radius:var(--radius);font-size:.95rem}
.status-cta{display:flex;gap:.5rem;flex-wrap:wrap}
.cards3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card.warm{background:var(--warm-bg)}
@media(max-width:820px){.modes,.cards3,.split{grid-template-columns:1fr}}
</style>