mirror of
https://github.com/superschnups/Emy.git
synced 2026-06-22 03:13:10 +00:00
269 lines
15 KiB
HTML
269 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html class="scroll-smooth" lang="de">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>{{ .Title }} | MiyaKarate</title>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-container": "#ffffff",
|
|
"surface-bright": "#f5f6f7",
|
|
"on-tertiary-container": "#636262",
|
|
"error-dim": "#a70138",
|
|
"on-surface-variant": "#595c5d",
|
|
"surface-tint": "#b30065",
|
|
"surface-container-highest": "#dadddf",
|
|
"on-secondary-fixed-variant": "#7d21a4",
|
|
"inverse-on-surface": "#9b9d9e",
|
|
"inverse-surface": "#0c0f10",
|
|
"surface-container": "#e6e8ea",
|
|
"surface": "#f5f6f7",
|
|
"primary-fixed": "#ff6ea9",
|
|
"surface-container-low": "#eff1f2",
|
|
"secondary": "#8930b0",
|
|
"tertiary": "#5c5b5b",
|
|
"on-secondary": "#ffedff",
|
|
"secondary-dim": "#7c20a3",
|
|
"secondary-container": "#f0c1ff",
|
|
"surface-dim": "#d1d5d7",
|
|
"primary": "#b30065",
|
|
"on-primary-fixed": "#000000",
|
|
"surface-container-high": "#e0e3e4",
|
|
"primary-fixed-dim": "#ff4e9e",
|
|
"primary-dim": "#9d0058",
|
|
"outline": "#757778",
|
|
"error": "#b41340",
|
|
"outline-variant": "#abadae",
|
|
"secondary-fixed": "#f0c1ff",
|
|
"secondary-fixed-dim": "#eaaeff",
|
|
"tertiary-fixed-dim": "#f3f0ef",
|
|
"on-surface": "#2c2f30",
|
|
"on-tertiary-fixed-variant": "#6e6d6d",
|
|
"on-tertiary": "#f5f2f1",
|
|
"tertiary-fixed": "#ffffff",
|
|
"background": "#f5f6f7",
|
|
"on-primary": "#ffeff2",
|
|
"surface-container-lowest": "#ffffff",
|
|
"inverse-primary": "#ff479c",
|
|
"primary-container": "#ff6ea9",
|
|
"on-primary-fixed-variant": "#5c0031",
|
|
"on-secondary-container": "#72129a",
|
|
"error-container": "#f74b6d",
|
|
"surface-variant": "#dadddf",
|
|
"on-background": "#2c2f30",
|
|
"on-error": "#ffefef",
|
|
"on-tertiary-fixed": "#515050",
|
|
"tertiary-dim": "#504f4f",
|
|
"on-primary-container": "#4b0027",
|
|
"on-secondary-fixed": "#580079",
|
|
"on-error-container": "#510017"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem",
|
|
"lg": "2rem",
|
|
"xl": "3rem",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Lexend"],
|
|
"body": ["Be Vietnam Pro"],
|
|
"label": ["Be Vietnam Pro"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.editorial-text-shadow {
|
|
text-shadow: 0 10px 30px rgba(179, 0, 101, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface overflow-x-hidden">
|
|
|
|
<!-- TopAppBar -->
|
|
<nav class="fixed top-0 left-0 w-full z-50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-lg shadow-xl shadow-pink-500/5">
|
|
<div class="flex justify-between items-center h-20 px-6 md:px-12 max-w-screen-2xl mx-auto">
|
|
<div class="text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase">
|
|
MiyaKarate
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a class="text-pink-600 dark:text-pink-400 border-b-2 border-pink-500 pb-1 font-headline tracking-tight uppercase font-bold transition-colors duration-300" href="/">Home</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/galerie/">Galerie</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/uebermich/">Über mich</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/erfolge/">Erfolge</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/gaestebuch/">Gästebuch</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-3 rounded-xl font-bold font-headline tracking-tight uppercase scale-95 active:scale-90 transition-transform">
|
|
Kontakt
|
|
</button>
|
|
<button class="md:hidden text-primary">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="pt-20">
|
|
<!-- Hero Section -->
|
|
<section class="relative min-h-[921px] flex items-center overflow-hidden bg-surface">
|
|
<div class="absolute -right-20 top-20 w-[600px] h-[600px] bg-secondary-container/20 rounded-full blur-[120px]"></div>
|
|
<div class="max-w-screen-2xl mx-auto px-6 md:px-12 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10">
|
|
<div class="lg:col-span-6 order-2 lg:order-1">
|
|
<span class="inline-block px-4 py-1 rounded-full bg-secondary-container text-on-secondary-container text-sm font-bold tracking-widest uppercase mb-6 font-label">{{ .Site.Data.homepage.hero.badge }}</span>
|
|
<h1 class="text-6xl md:text-8xl font-headline font-black text-on-surface leading-[0.9] editorial-text-shadow mb-8 italic">
|
|
{{ .Site.Title }}
|
|
</h1>
|
|
<p class="text-xl text-on-surface-variant max-w-lg mb-10 leading-relaxed font-body">
|
|
{{ .Site.Data.homepage.hero.description }}
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-10 py-5 rounded-xl font-bold font-headline text-lg shadow-xl shadow-primary/20 hover:scale-105 active:scale-95 transition-all">
|
|
Erfahre mehr
|
|
</button>
|
|
<button class="px-10 py-5 rounded-xl font-bold font-headline text-lg text-primary border-2 border-primary/20 hover:bg-primary/5 transition-all">
|
|
Galerie ansehen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-6 order-1 lg:order-2 relative">
|
|
<div class="relative w-full aspect-square rounded-xl overflow-hidden shadow-2xl shadow-primary/10 rotate-3 hover:rotate-0 transition-transform duration-700">
|
|
{{ if .Site.Data.homepage.hero.image }}
|
|
<img alt="Miya beim Karate-Tritt" class="w-full h-full object-cover" src="/hero/{{ .Site.Data.homepage.hero.image }}"/>
|
|
{{ else }}
|
|
<img alt="Miya beim Karate-Tritt" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAHCy-F1uHI1Lq8D0LuZVWXLZA4URfCtFVtXNvimgi_5HnX4ovI2C3Cl_nLp5awhMAL-cwWnK-fL-yQHgwYZ2SWg5JbnH7RkQtVdUqPCb9PcOAFIzdX9haBXQGoCYywwzqNXK4QqQoJ5XxnamSZghNPUK0pOLszlu2jowGPO8VWtQmD7PcJTOGfpOCUxw8tNzeeNTQsCDmPoGD3N8ZjTyTGD6Sk48MrYJrRUgiRvBi9tznnMXIgqMsN8G0v8JA3aQeF5jQlZmJ3kw"/>
|
|
{{ end }}
|
|
<div class="absolute bottom-8 -left-8 bg-white/40 backdrop-blur-xl p-6 rounded-lg shadow-xl border border-white/20 -rotate-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center text-white">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">stars</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-headline font-bold text-on-surface uppercase leading-none">Blaugurt</p>
|
|
<p class="text-xs text-on-surface-variant uppercase tracking-widest mt-1">Status 2024</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
{{ $colors := slice "text-primary" "text-secondary" "text-primary-dim" }}
|
|
<section class="bg-surface-container-low py-16">
|
|
<div class="max-w-7xl mx-auto px-6 flex flex-wrap justify-around gap-12 text-center">
|
|
{{ range $i, $s := .Site.Data.homepage.stats }}
|
|
<div>
|
|
<h3 class="text-5xl font-black font-headline {{ index $colors $i }}">{{ $s.value }}</h3>
|
|
<p class="text-sm font-label uppercase tracking-widest text-on-surface-variant mt-2">{{ $s.label }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Erfolge Section -->
|
|
<section class="py-24 max-w-7xl mx-auto px-6">
|
|
<div class="mb-16">
|
|
<span class="text-primary font-bold tracking-widest uppercase text-sm font-label">Die neuesten Erfolge</span>
|
|
<h2 class="text-5xl font-black font-headline mt-4">Meine Highlights</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
|
|
{{ range (where .Site.RegularPages "Section" "erfolge") }}
|
|
<div class="md:col-span-8 bg-surface-container-lowest rounded-xl p-8 shadow-sm group hover:shadow-xl transition-all duration-500 overflow-hidden relative">
|
|
<div class="relative z-10">
|
|
<span class="bg-secondary text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest">{{ .Params.rang | default "Highlight" }}</span>
|
|
<h3 class="text-3xl font-black font-headline mt-6 mb-4">{{ .Title }}</h3>
|
|
<p class="text-on-surface-variant mb-8 max-w-md">{{ .Summary }}</p>
|
|
<a class="flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all" href="{{ .RelPermalink }}">
|
|
Bericht lesen <span class="material-symbols-outlined">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 group-hover:opacity-20 group-hover:scale-110 transition-all duration-700">
|
|
<img alt="Highlight Thumbnail" class="w-full h-full object-cover grayscale brightness-50"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCt0zGFYDYcvBDPfNXlVvPqNdkvn4AvVSTlFysp0raGeWEmbAnpQkad18FIakDIrPbq4d93sRhkJnquI7QoXZrLf22SBA8nG_IjRg0JkMadeTHr_KOs0vgEVpV48jXsqKBSI2Rx4J02al6QxsLdWCA6XRBKslA9R0v-u_SrGGB7oNpfxjRV-6L6REjgsuzlGHPwdyY7bLrk_MBOvHUG9hfQ5bJiaiTiKfchBEBdNdtk3MPJow72blhWqMMflZL_bdxzAfX8TCyWKQ"/>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<!-- Karte: Prüfung bestanden -->
|
|
<div class="md:col-span-4 bg-primary text-on-primary rounded-xl p-8 flex flex-col justify-between hover:scale-[1.02] transition-transform shadow-xl shadow-primary/20">
|
|
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">military_tech</span>
|
|
<div>
|
|
<h3 class="text-2xl font-black font-headline mb-2">Prüfung bestanden</h3>
|
|
<p class="text-on-primary/80">Neuer Gürtelgrad erreicht! Jetzt stolze Trägerin des Blaugurts.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Karte: Dojo Champion -->
|
|
<div class="md:col-span-4 bg-surface-container-low rounded-xl p-8 hover:bg-surface-container-high transition-colors">
|
|
<div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center mb-6 shadow-sm">
|
|
<span class="material-symbols-outlined text-secondary">fitness_center</span>
|
|
</div>
|
|
<h3 class="text-xl font-black font-headline mb-2">Dojo Champion</h3>
|
|
<p class="text-sm text-on-surface-variant italic">Hausinterner Wettbewerb im Dojo "Kiai Berlin".</p>
|
|
</div>
|
|
|
|
<!-- Bild: Team Spirit -->
|
|
<div class="md:col-span-8 h-64 rounded-xl overflow-hidden relative group">
|
|
<img alt="Teamtraining" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxl_8pFN3p4UiOW5vHu3eUKrCj1VrD6wYTDuajtl3iHvjkNJEOLbqbWt2QL5xcC4jC8H4unZhLKoapi4aH8paj81HeIEcOZwkfBBDZyLz6vQpXOODIg4KyEBDvfGzCyJWGf_qTxRmpzgjNfLAOeKA1dCFuRq5MJGSi3gsuobQBv7cR1kGAkgMKXEMTjsKrR_ZvwVQYyb7tWPzAWfTqEt97ViRO1y05wIOMbBiqTx2qXcbzVfsdVvtyAjaMh9Wh7npl8UTJIlvMXA"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-8">
|
|
<div>
|
|
<h3 class="text-2xl font-bold font-headline text-white">Team Spirit</h3>
|
|
<p class="text-white/70">Gemeinsam trainieren macht am meisten Spaß.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Galerie Section -->
|
|
<section class="py-24 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-zinc-900 -z-10"></div>
|
|
<div class="max-w-7xl mx-auto px-6 text-center text-white">
|
|
<h2 class="text-5xl md:text-7xl font-black font-headline italic mb-8">Bereit für mehr <span class="text-primary-fixed">Action?</span></h2>
|
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto mb-12">Schau dir hunderte Fotos von Trainingseinheiten, Turnieren und Reisen in meiner großen Galerie an.</p>
|
|
<a class="inline-flex items-center gap-4 bg-primary text-white px-12 py-6 rounded-full font-black font-headline text-xl hover:bg-primary-dim transition-colors group" href="#">
|
|
ZUR GALERIE GEHEN
|
|
<span class="material-symbols-outlined group-hover:translate-x-2 transition-transform">auto_awesome_motion</span>
|
|
</a>
|
|
</div>
|
|
<div class="absolute top-1/2 left-0 -translate-y-1/2 opacity-5 pointer-events-none whitespace-nowrap">
|
|
<span class="text-[200px] font-black font-headline italic text-white uppercase tracking-tighter">GALLERY GALLERY GALLERY</span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="w-full rounded-t-[3rem] mt-20 bg-zinc-50 dark:bg-zinc-950">
|
|
<div class="flex flex-col md:flex-row justify-between items-center py-12 px-8 max-w-7xl mx-auto gap-6">
|
|
<div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">
|
|
MiyaKarate
|
|
</div>
|
|
<div class="flex gap-8 text-sm tracking-wide">
|
|
<a class="text-zinc-500 hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href="#">Instagram</a>
|
|
<a class="text-zinc-500 hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href="#">YouTube</a>
|
|
<a class="text-zinc-500 hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href="#">Email</a>
|
|
</div>
|
|
<div class="text-sm tracking-wide text-zinc-500">
|
|
© 2024 MiyaKarate. Alle Rechte vorbehalten.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|