Anreicherung: Bilder, Logo, Text-Feinarbeit (Cloud-Routine)
This commit is contained in:
1
.image-slots.state.json
Normal file
1
.image-slots.state.json
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
56
index.html
56
index.html
@@ -78,9 +78,9 @@
|
||||
<a href="#services" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Services</a>
|
||||
<a href="#referenzen" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Referenzen</a>
|
||||
</div>
|
||||
<!-- logo — PLATZHALTER: assets/logo-placeholder.svg durch Ihr Logo ersetzen -->
|
||||
<!-- logo — PLATZHALTER: assets/logo.png durch Ihr Logo ersetzen -->
|
||||
<a href="#top" style="display: flex; align-items: center; justify-self: center;">
|
||||
<img src="assets/logo-placeholder.svg" alt="Joe's Garage" style="height: 26px; width: auto; display: block;">
|
||||
<img src="assets/logo.png" alt="Joe's Garage" style="height: 26px; width: auto; display: block;">
|
||||
</a>
|
||||
<!-- right links -->
|
||||
<div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center; justify-content: flex-end;">
|
||||
@@ -113,7 +113,7 @@
|
||||
</h1>
|
||||
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: #c5c9ce; max-width: 560px; margin: 0 auto; font-weight: 500;">
|
||||
Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.
|
||||
Dellen und Beulen fachgerecht entfernt – ohne Neulackierung, ohne Spachteln und Schleifen. Ihr Originallack bleibt vollständig erhalten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -124,17 +124,17 @@
|
||||
<div class="lw-benefits" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px); padding: 28px 0 46px;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
|
||||
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Fahrzeug-Reparatur wie in der Vertragswerkstatt — nur günstiger</p>
|
||||
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Bis zu 70 % günstiger als die konventionelle Reparatur</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
|
||||
<img src="assets/benefit01.svg" alt="" width="22" height="27" style="opacity: .95;">
|
||||
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir nutzen Premium-Lacke</p>
|
||||
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Ihr Originallack bleibt erhalten – kein Farbunterschied</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
|
||||
<img src="assets/benefit02.svg" alt="" width="30" height="24" style="opacity: .95;">
|
||||
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir verbauen nur Originalteile</p>
|
||||
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Kein Spachteln, Schleifen oder Lackieren</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||||
@@ -168,40 +168,40 @@
|
||||
<div style="position: relative; max-width: 1320px; margin: 0 auto;">
|
||||
<div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
|
||||
<span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Leistungen</span>
|
||||
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Alles rund um den Lack – aus einer Hand</h2>
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ob Neuwagen, Alltagsauto oder Klassiker: Wir bringen jede Oberfläche zurück in Bestform. Präzise vorbereitet, sauber lackiert, perfekt finiert.</p>
|
||||
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Dellenentfernung ohne Neulackierung – aus einer Hand</h2>
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ob Hagelschaden, Parkrempler oder Steinschlag: Mit der Smart-Repair-Technik massieren und drücken wir Dellen von innen heraus – schonend, präzise und ohne den Originallack anzutasten.</p>
|
||||
</div>
|
||||
|
||||
<div class="lw-services" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px);">
|
||||
|
||||
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Lackierungen aller Art</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Vom Kotflügel bis zur Komplettlackierung – markenunabhängig, farbtongenau und in dauerhafter Qualität.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Uni · Metallic · Perleffekt</span>
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Hagelschäden</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Von Hagel, Sturm und Kastanien verursachte Dellen entfernen wir flächig und zuverlässig – eine von Versicherungen anerkannte Reparatur.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Hagel · Sturm · Kastanien</span>
|
||||
</div>
|
||||
|
||||
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Smart Repair</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Kleine Kratzer, Steinschläge und Parkdellen punktgenau beseitigt – schnell, günstig und ohne sichtbaren Übergang.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Spot-Repair · Same Day</span>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Spot-Repair · Ohne Lackieren</span>
|
||||
</div>
|
||||
|
||||
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Oldtimer & Klassiker</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Restaurierung mit Fingerspitzengefühl: originalgetreue Farbtöne und ein Finish, das dem Wert Ihres Fahrzeugs gerecht wird.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Restauration · Karosserie</span>
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Parkrempler & Türkanten</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Türkantenschläge und Parkrempler drücken wir sauber heraus – für den Werterhalt Ihres Fahrzeugs und ganz ohne Farbunterschied.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Parkdellen · Werterhalt</span>
|
||||
</div>
|
||||
|
||||
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Lackaufbereitung & Politur</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Professionelles Polieren, Versiegeln und Aufbereiten für tiefen Glanz und langanhaltenden Schutz Ihres Lacks.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Politur · Versiegelung</span>
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Leasing-Rückläufer</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Vor der Leasingrückgabe prüfen wir Ihr Fahrzeug mit geschultem Blick und entfernen Dellen – so vermeiden Sie teure Nachforderungen.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Leasing · Rückgabe</span>
|
||||
</div>
|
||||
|
||||
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Felgen & Motorrad</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Felgenaufbereitung und Motorradlackierung im gleichen hohen Standard – für den perfekten Auftritt bis ins Detail.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Felgen · Zweirad</span>
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Steinschlag & Autoglas</h3>
|
||||
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Steinschlagdellen entfernen wir zuverlässig; auch bei Autoglas-Schäden sind wir Ihr Ansprechpartner rund um Kaiserslautern.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Steinschlag · Autoglas</span>
|
||||
</div>
|
||||
|
||||
<!-- LEISTUNGS-VIDEO — bewusst beibehalten (assets/leistungen-video.mp4) -->
|
||||
@@ -209,9 +209,9 @@
|
||||
<video ref="{{ videoRef }}" src="assets/leistungen-video.mp4" autoplay muted loop playsinline style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"></video>
|
||||
<div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,34,0) 45%, rgba(8,20,34,.78) 100%); pointer-events: none;"></div>
|
||||
<div style="position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #f5f4f0;">Design- & Sonderlackierung</h3>
|
||||
<p style="font-size: 14.5px; line-height: 1.5; color: #d8e2ec; font-weight: 500;">Individuelle Farbwünsche, Sondereffekte und Akzente – wir setzen Ihre Ideen sauber und hochwertig um.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9FD1F5;">Custom · Effektlack</span>
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #f5f4f0;">Unfallschäden</h3>
|
||||
<p style="font-size: 14.5px; line-height: 1.5; color: #d8e2ec; font-weight: 500;">Auch verformtes Blech nach kleineren Unfällen bringen wir mit der Klebe-Ziehtechnik zurück in seine ursprüngliche Form.</p>
|
||||
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9FD1F5;">Unfall · Klebetechnik</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -276,8 +276,8 @@
|
||||
<div class="lw-about" style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(50px, 8vh, 90px);">
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #f5f4f0;">Hallo, ich bin<br>Andreas Becker,</h3>
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Lack- und Karosserie-Experte und Inhaber der Joe's Garage Inh. Andreas Becker in Weilerbach.</p>
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mit meinem Werkstatt-Team aus professionellen Fachkräften erfülle ich Ihre individuellen Wünsche zum bestmöglichen Preis — von der Smart-Repair bis zur kompletten Restauration.</p>
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Karosseriebaumeister und Spezialist für Dellenentfernung im Smart-Repair-Verfahren – Inhaber von Joe's Garage in Weilerbach.</p>
|
||||
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mit rund 30 Jahren Berufserfahrung entferne ich Dellen und Beulen fachgerecht – von der einzelnen Parkdelle bis zur kompletten Hagelschaden-Sanierung.</p>
|
||||
</div>
|
||||
<div style="justify-self: center; width: min(340px, 100%);">
|
||||
<div style="position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.4); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
|
||||
@@ -397,10 +397,10 @@
|
||||
<!-- Untere Zeile -->
|
||||
<div class="lw-footer-bottom" style="position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: 1320px; width: 100%; margin: 0 auto;">
|
||||
<div style="min-width: 0;">
|
||||
<img src="assets/logo-placeholder.svg" alt="Joe's Garage" style="width: min(46vw, 360px); height: auto; display: block; opacity: .95;">
|
||||
<img src="assets/logo.png" alt="Joe's Garage" style="width: min(46vw, 360px); height: auto; display: block; opacity: .95;">
|
||||
<div style="display: flex; align-items: center; gap: 14px; margin-top: 16px;">
|
||||
<span style="width: 44px; height: 2px; background: linear-gradient(90deg, #2FA4F0, transparent);"></span>
|
||||
<span style="font-size: 13.5px; color: #8fa4b8; font-weight: 500;">Autolackiererei & Karosserie · Weilerbach</span>
|
||||
<span style="font-size: 13.5px; color: #8fa4b8; font-weight: 500;">Dellenentfernung & Smart Repair · Weilerbach</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right; flex-shrink: 0;">
|
||||
|
||||
Reference in New Issue
Block a user