feat: Add Supabase configuration and migrations for MC Cars application

- Create Kong declarative configuration for routing and authentication.
- Implement initialization script to set up the database.
- Add SQL migration for initializing roles, schemas, and seeding vehicle data.
- Create leads and customers tables with appropriate policies and functions for CRM.
- Seed admin user and configure storage bucket with RLS policies.
This commit is contained in:
Lago
2026-04-17 17:50:57 +02:00
commit 61517879e1
23 changed files with 3673 additions and 0 deletions
+236
View File
@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MC Cars · Sportwagenvermietung Steiermark</title>
<meta name="description" content="MC Cars · Premium Sportwagen- und Luxusvermietung in der Steiermark. Kautionsfrei, transparent, sofort startklar." />
<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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="config.js"></script>
</head>
<body>
<header class="site-header">
<div class="shell">
<a class="logo" href="/" aria-label="MC Cars Startseite">
<span class="logo-mark">MC</span>
<span>MC Cars</span>
</a>
<button class="menu-toggle" aria-label="Menue"></button>
<nav class="main-nav" aria-label="Hauptnavigation">
<a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
<a href="#warum" data-i18n="navWhy">Warum wir</a>
<a href="#stimmen" data-i18n="navReviews">Stimmen</a>
<a href="#buchen" data-i18n="navBook">Buchen</a>
<a class="btn small" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
<button class="lang-toggle" type="button" aria-label="Sprache wechseln">EN</button>
</nav>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero" id="home">
<div class="shell">
<p class="eyebrow" data-i18n="heroEyebrow">MC Cars · Sportwagenvermietung</p>
<h1 data-i18n="heroTitle">Fahren auf hoechstem Niveau.</h1>
<p class="lead" data-i18n="heroLead">Premium-Sportwagen und Luxusklasse in der Steiermark. Kautionsfrei, transparent, sofort startklar.</p>
<div class="hero-cta">
<a class="btn" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
<a class="btn ghost" href="#fahrzeuge" data-i18n="viewFleet">Flotte ansehen</a>
</div>
<div class="hero-stats">
<div><strong>0 €</strong><span data-i18n="statDeposit">Kaution</span></div>
<div><strong id="statCarsCount"></strong><span data-i18n="statCars">Fahrzeuge</span></div>
<div><strong>24/7</strong><span data-i18n="statSupport">Support</span></div>
</div>
</div>
</section>
<!-- Fleet -->
<section id="fahrzeuge">
<div class="shell">
<div class="section-head">
<div>
<p class="eyebrow" data-i18n="fleetEyebrow">Unsere Flotte</p>
<h2 data-i18n="fleetTitle">Handverlesen. Gepflegt. Startklar.</h2>
<p class="sub" data-i18n="fleetSub">Filtern Sie nach Marke und Preis. Klicken Sie fuer Details oder buchen Sie direkt.</p>
</div>
</div>
<form class="filters" id="filters" onsubmit="return false;">
<label>
<span data-i18n="filterBrand">Marke</span>
<select id="brandFilter"><option value="all" data-i18n="all">Alle</option></select>
</label>
<label>
<span data-i18n="filterSort">Sortierung</span>
<select id="sortFilter">
<option value="sort_order">Empfehlung</option>
<option value="priceAsc" data-i18n="sortPriceAsc">Preis aufsteigend</option>
<option value="priceDesc" data-i18n="sortPriceDesc">Preis absteigend</option>
<option value="powerDesc" data-i18n="sortPowerDesc">Leistung absteigend</option>
</select>
</label>
<label>
<span data-i18n="filterPrice">Max. Preis / Tag</span>
<input type="number" id="priceFilter" min="0" step="50" placeholder="1000" />
</label>
</form>
<div class="vehicle-grid" id="vehicleGrid"></div>
<p id="emptyState" style="display:none;color:var(--muted);text-align:center;padding:2rem 0;" data-i18n="noMatches">Keine Fahrzeuge gefunden.</p>
</div>
</section>
<!-- Why -->
<section id="warum" style="background:var(--bg-elev);">
<div class="shell">
<div class="section-head">
<div>
<p class="eyebrow" data-i18n="whyEyebrow">Warum MC Cars</p>
<h2 data-i18n="whyTitle">Keine Kompromisse zwischen Sicherheit und Fahrspass.</h2>
</div>
</div>
<div class="why-grid">
<article class="why-card">
<div class="icon">🛡</div>
<h3 data-i18n="whyInsurance">Versicherungsschutz</h3>
<p data-i18n="whyInsuranceText">Vollkasko mit klarem Selbstbehalt.</p>
</article>
<article class="why-card">
<div class="icon"></div>
<h3 data-i18n="whyFleet">Premium Flotte</h3>
<p data-i18n="whyFleetText">Handverlesene Performance-Modelle.</p>
</article>
<article class="why-card">
<div class="icon"></div>
<h3 data-i18n="whyDeposit">Kautionsfrei</h3>
<p data-i18n="whyDepositText">Sie zahlen nur die Miete.</p>
</article>
</div>
</div>
</section>
<!-- Reviews -->
<section id="stimmen">
<div class="shell">
<div class="section-head">
<div>
<p class="eyebrow" data-i18n="reviewsEyebrow">Kundenmeinungen</p>
<h2 data-i18n="reviewsTitle">Erlebnisse, die bleiben.</h2>
</div>
</div>
<div class="reviews-strip" id="reviewStrip" aria-live="polite"></div>
<div class="review-dots" id="reviewDots"></div>
</div>
</section>
<!-- Booking -->
<section id="buchen" style="background:var(--bg-elev);">
<div class="shell">
<div class="section-head">
<div>
<p class="eyebrow" data-i18n="bookingEyebrow">Jetzt buchen</p>
<h2 data-i18n="bookingTitle">Traumwagen unverbindlich anfragen.</h2>
</div>
</div>
<form class="booking-form" id="bookingForm" novalidate>
<label>
<span data-i18n="fieldName">Name</span>
<input type="text" name="name" required />
</label>
<label>
<span data-i18n="fieldEmail">E-Mail</span>
<input type="email" name="email" required />
</label>
<label>
<span data-i18n="fieldPhone">Telefon</span>
<input type="tel" name="phone" />
</label>
<label>
<span data-i18n="fieldCar">Fahrzeug</span>
<select name="vehicle" id="bookingCar"></select>
</label>
<label>
<span data-i18n="fieldFrom">Von</span>
<input type="date" name="from" required />
</label>
<label>
<span data-i18n="fieldTo">Bis</span>
<input type="date" name="to" required />
</label>
<label class="full">
<span data-i18n="fieldMessage">Nachricht</span>
<textarea name="message" rows="4" data-i18n-placeholder="messagePlaceholder" placeholder="Wuensche, Uhrzeit, Anlass..."></textarea>
</label>
<div class="full" style="display:flex;justify-content:flex-end;">
<button type="submit" class="btn" data-i18n="sendRequest">Anfrage senden</button>
</div>
</form>
<p id="bookingFeedback" class="form-feedback" role="status"></p>
</div>
</section>
</main>
<footer class="site-footer" id="kontakt">
<div class="shell">
<div class="footer-grid">
<div>
<div class="logo" style="margin-bottom:0.8rem;">
<span class="logo-mark">MC</span>
<span>MC Cars</span>
</div>
<p style="color:var(--muted);font-size:0.9rem;max-width:40ch;" data-i18n="footerTagline">Sportwagenvermietung in Oesterreich. Standort: Steiermark (TBD).</p>
</div>
<div>
<h4 data-i18n="footerNav">Navigation</h4>
<a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
<a href="#warum" data-i18n="navWhy">Warum wir</a>
<a href="#buchen" data-i18n="navBook">Buchen</a>
</div>
<div>
<h4 data-i18n="footerLegal">Rechtliches</h4>
<a href="impressum.html" data-i18n="imprint">Impressum</a>
<a href="datenschutz.html" data-i18n="privacy">Datenschutz</a>
<a href="#" data-i18n="terms">Mietbedingungen</a>
</div>
<div>
<h4 data-i18n="footerContact">Kontakt</h4>
<a href="mailto:hello@mccars.at">hello@mccars.at</a>
<a href="tel:+43316880000">+43 316 880000</a>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year"></span> MC Cars. <span data-i18n="copyright">Alle Rechte vorbehalten.</span></span>
<span>Made in Steiermark</span>
</div>
</div>
</footer>
<!-- Vehicle details dialog -->
<dialog id="carDialog">
<div class="dialog-head">
<h3 id="dialogTitle" style="margin:0;"></h3>
<button class="dialog-close" id="dialogClose" aria-label="Close">×</button>
</div>
<div class="dialog-body" id="dialogBody"></div>
</dialog>
<script type="module" src="app.js"></script>
</body>
</html>