HifiPlanet-Website/hifi-src/index.html
Maaxxs 78d3d4a8e3 Replace the contact form with the new high-fidelity redesign
Rebuilds /kontakt from the design handoff (src/referenz/Kontaktformular
Redesign/) using the site's own stack instead of copying the prototype's
inline-styled HTML: React + Tailwind arbitrary values bound to a small set
of CSS custom properties (.kf-page, index.css) that swap automatically
with the site's existing dark-mode class toggle - no separate theme
control was added, per the brief.

The "Deine Anfrage bezieht sich auf" package box wires into the existing
query-param handoff from the package picker (ModelPage's contactUrl:
brand/model/package/packageId/total) and only renders when all three are
present; the optional-upgrades picker that already existed on this page
is preserved and restyled to match. Submission still posts to the real
/api/contact endpoint (same payload shape as before), so requests keep
landing in the admin inbox.

Adds Michroma (heading/price font) alongside the already-loaded Barlow.
Michroma has no Euro-sign glyph (renders as tofu), so price displays
split the € into a plain-font span rather than showing a broken glyph.
Dark-mode background assets (grunge/splatter) come from the handoff;
the light-mode car photo reuses an existing site asset (hero-trunk) since
none was supplied, masked per the handoff's recipe.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-18 20:00:06 +02:00

51 lines
2.6 KiB
HTML
Raw Permalink 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.

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Nur fuer die Paket-Kacheln auf der Modell-Seite (Name/Preis-Typografie im
Kunden-Referenzdesign) - der Rest der Seite bleibt beim Standard-Font. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600&family=Michroma&display=swap" rel="stylesheet" />
<title>HifiPlanet | Car-Hifi Umbauten nach Maß</title>
<meta name="description" content="HifiPlanet dein Car-Hifi Spezialist. Marke und Modell wählen, passende Sound-Pakete entdecken und unverbindlich anfragen." />
<link rel="canonical" href="https://hifi-planet.de/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="HifiPlanet" />
<meta property="og:title" content="HifiPlanet | Car-Hifi Umbauten nach Maß" />
<meta property="og:description" content="Dein Car-Hifi Spezialist: Marke und Modell wählen, passende Sound-Pakete entdecken und unverbindlich anfragen." />
<meta property="og:locale" content="de_DE" />
<meta name="twitter:card" content="summary" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AutoRepair",
"name": "HifiPlanet",
"description": "Car-Hifi Spezialist für individuelle Sound-Umbauten vom unauffälligen Upgrade bis zum Komplettumbau.",
"url": "https://hifi-planet.de/",
"telephone": "+4993732062390",
"email": "info@hifi-planet-amorbach.de",
"address": {
"@type": "PostalAddress",
"streetAddress": "Boxbrunner Str. 20a",
"postalCode": "63916",
"addressLocality": "Amorbach",
"addressCountry": "DE"
},
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], "opens": "09:00", "closes": "18:00" },
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Saturday"], "opens": "10:00", "closes": "13:00" }
],
"sameAs": ["https://www.youtube.com/@hifiplanet2812"]
}
</script>
</head>
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>