knso/preview-jacques-najjar-karosserie-lack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anreicherung: Bilder, Logo, Text-Feinarbeit (Cloud-Routine)

Browse Source
This commit is contained in:
webklar-automation
2026-07-22 09:21:57 +00:00
parent 5302bacf64
commit 538f1f452d
3 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.image-slots.state.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

34
index.html
View File

@@ -78,9 +78,9 @@
<a href="#services" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Services</a> <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> <a href="#referenzen" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Referenzen</a>
</div> </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;"> <a href="#top" style="display: flex; align-items: center; justify-self: center;">
<img src="assets/logo-placeholder.svg" alt="Najjar" style="height: 26px; width: auto; display: block;"> <img src="assets/logo.png" alt="Najjar" style="height: 26px; width: auto; display: block;">
</a> </a>
<!-- right links --> <!-- right links -->
<div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center; justify-content: flex-end;"> <div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center; justify-content: flex-end;">
@@ -187,9 +187,9 @@
</div> </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);"> <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 &amp; Klassiker</h3> <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Unfallinstandsetzung</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> <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Nach dem Unfall zurück in Bestform: fachgerechte Karosserie-Instandsetzung – inklusive Abwicklung mit Ihrer Versicherung.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Restauration · Karosserie</span> <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Unfall · Karosseriebau</span>
</div> </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);"> <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);">
@@ -199,9 +199,9 @@
</div> </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);"> <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 &amp; Motorrad</h3> <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Achsvermessung &amp; Fahrwerk</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> <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Computergestützte Achsvermessung und Fahrwerkskontrolle – damit nach der Reparatur wieder alles exakt in der Spur läuft.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Felgen · Zweirad</span> <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Achsvermessung · Fahrwerk</span>
</div> </div>
<!-- LEISTUNGS-VIDEO — bewusst beibehalten (assets/leistungen-video.mp4) --> <!-- LEISTUNGS-VIDEO — bewusst beibehalten (assets/leistungen-video.mp4) -->
@@ -229,7 +229,7 @@
<div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);"> <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;">Referenzen</span> <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Referenzen</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;">Echte Arbeiten aus unserer Werkstatt</h2> <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;">Echte Arbeiten aus unserer Werkstatt</h2>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ein Auszug aus unseren Projekten. Ziehen Sie eigene Fotos (z.&nbsp;B. Vorher/Nachher) einfach per Drag &amp; Drop in die Platzhalter.</p> <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ein Auszug aus unseren Projekten – von der Unfallinstandsetzung über die Komplettlackierung bis zur Achsvermessung.</p>
</div> </div>
<!-- Foto-Galerie — jeder Platzhalter ist per Drag & Drop mit einem eigenen Foto befüllbar --> <!-- Foto-Galerie — jeder Platzhalter ist per Drag & Drop mit einem eigenen Foto befüllbar -->
@@ -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 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;"> <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>Jacques Najjar,</h3> <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>Jacques Najjar,</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 Jacques Najjar GmbH in München.</p> <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 Jacques Najjar GmbH – einem Innungs-Lackiermeisterbetrieb, den ich 1995 in München gegründet habe.</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;">Mit meinem 14-köpfigen Werkstatt-Team – darunter vier Auszubildende – erfülle ich Ihre individuellen Wünsche zum bestmöglichen Preis: von der Smart-Repair bis zur kompletten Unfallinstandsetzung.</p>
</div> </div>
<div style="justify-self: center; width: min(340px, 100%);"> <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);"> <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);">
@@ -339,7 +339,7 @@
</div> </div>
<div style="display: flex; flex-direction: column; gap: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;">
<span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Öffnungszeiten</span> <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Öffnungszeiten</span>
<p style="font-size: 16px; line-height: 1.6; color: #e7ecf1; font-weight: 600;">Mo–Fr<br><span style="font-weight: 500; color: #b8c4d0;">07:30–18:00 Uhr</span><br>Sa<br><span style="font-weight: 500; color: #b8c4d0;">09:00–12:00 Uhr</span></p> <p style="font-size: 16px; line-height: 1.6; color: #e7ecf1; font-weight: 600;">Mo–Do<br><span style="font-weight: 500; color: #b8c4d0;">07:30–12:00 &amp; 13:00–17:00 Uhr</span><br>Fr<br><span style="font-weight: 500; color: #b8c4d0;">07:30–12:00 &amp; 13:00–14:30 Uhr · Sa geschlossen</span></p>
</div> </div>
<div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;"> <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;">
<a href="tel:+49893516581" style="display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #0d0f12; background: var(--accent, #2FA4F0); padding: 13px 22px; border-radius: 44px; transition: transform .2s ease, box-shadow .2s ease;" style-hover="transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,164,240,.4);">Jetzt anrufen</a> <a href="tel:+49893516581" style="display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #0d0f12; background: var(--accent, #2FA4F0); padding: 13px 22px; border-radius: 44px; transition: transform .2s ease, box-shadow .2s ease;" style-hover="transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,164,240,.4);">Jetzt anrufen</a>
@@ -378,8 +378,8 @@
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Leistungen</h3> <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Leistungen</h3>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Lackierungen aller Art</a> <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Lackierungen aller Art</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Smart Repair</a> <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Smart Repair</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Oldtimer &amp; Klassiker</a> <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Unfallinstandsetzung</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Felgen &amp; Motorrad</a> <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Achsvermessung &amp; Fahrwerk</a>
</div> </div>
<div style="display: flex; flex-direction: column; gap: 9px;"> <div style="display: flex; flex-direction: column; gap: 9px;">
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Kontakt</h3> <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Kontakt</h3>
@@ -389,15 +389,15 @@
</div> </div>
<div style="display: flex; flex-direction: column; gap: 9px;"> <div style="display: flex; flex-direction: column; gap: 9px;">
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Öffnungszeiten</h3> <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Öffnungszeiten</h3>
<span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Mo–Fr<br>07:30–18:00 Uhr</span> <span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Mo–Do<br>07:30–12:00 &amp; 13:00–17:00 Uhr</span>
<span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Sa · 09:00–12:00 Uhr</span> <span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Fr · 07:30–14:30 Uhr · Sa geschlossen</span>
</div> </div>
</div> </div>
<!-- Untere Zeile --> <!-- 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 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;"> <div style="min-width: 0;">
<img src="assets/logo-placeholder.svg" alt="Najjar" style="width: min(46vw, 360px); height: auto; display: block; opacity: .95;"> <img src="assets/logo.png" alt="Najjar" style="width: min(46vw, 360px); height: auto; display: block; opacity: .95;">
<div style="display: flex; align-items: center; gap: 14px; margin-top: 16px;"> <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="width: 44px; height: 2px; background: linear-gradient(90deg, #2FA4F0, transparent);"></span>
<span style="font-size: 13.5px; color: #8fa4b8; font-weight: 500;">Autolackiererei &amp; Karosserie · München</span> <span style="font-size: 13.5px; color: #8fa4b8; font-weight: 500;">Autolackiererei &amp; Karosserie · München</span>