Close two gaps against the contact form handoff spec
The redesign itself shipped earlier (78d3d4a,3079bd2); comparing the implementation against the README again surfaced two missing details: - The light-mode backdrop's subtle topo wave lines (five 1px curved paths in --kf-topo, top-left, ~360x280) were never implemented. - The Google Maps embed showed Google's own info overlay in the top-left corner behind our "In Maps öffnen" chip. The iframe is now rendered taller inside a clipped 210px container with a negative top margin, cropping that overlay away while keeping the marker and the required bottom attribution visible. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs
parent
fa862d936a
commit
999f7c471b
5 changed files with 33 additions and 13 deletions
|
|
@ -229,6 +229,21 @@ export default function ContactPage() {
|
|||
style={{ background: 'radial-gradient(circle, rgba(207,239,90,0.35), transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
{/* Light Mode: dezente Topo-Wellenlinien oben links (README "Hintergruende"). */}
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 360 280"
|
||||
className="pointer-events-none absolute left-0 top-0 block h-[280px] w-[360px] opacity-50 dark:hidden"
|
||||
fill="none"
|
||||
stroke="var(--kf-topo)"
|
||||
strokeWidth="1"
|
||||
>
|
||||
<path d="M -20 40 C 60 10, 140 70, 220 40 S 360 10, 400 50" />
|
||||
<path d="M -20 90 C 70 55, 150 115, 230 85 S 370 60, 400 100" />
|
||||
<path d="M -20 140 C 60 105, 150 165, 235 135 S 365 110, 400 150" />
|
||||
<path d="M -20 190 C 70 155, 145 215, 230 185 S 370 160, 400 200" />
|
||||
<path d="M -20 240 C 60 205, 150 265, 235 235 S 365 210, 400 250" />
|
||||
</svg>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-[1280px] pt-10 sm:pt-14">
|
||||
{/* Hero */}
|
||||
|
|
@ -553,15 +568,20 @@ export default function ContactPage() {
|
|||
</a>
|
||||
)}
|
||||
<ExternalEmbed name={t('contactPage.mapEmbedName')} className="h-[210px] w-full">
|
||||
{/* iframe hoeher als der sichtbare Ausschnitt + negativer margin-top:
|
||||
schneidet Googles eigenes Overlay (oben links) weg, damit nur unser
|
||||
"In Maps oeffnen"-Chip zu sehen ist - wie im Prototyp. */}
|
||||
<div className="h-[210px] overflow-hidden">
|
||||
<iframe
|
||||
title="HifiPlanet Amorbach – Standort"
|
||||
src={`https://www.google.com/maps?q=${SHOP_ADDRESS_ENCODED}&output=embed`}
|
||||
width="100%"
|
||||
height="210"
|
||||
style={{ border: 0, display: 'block' }}
|
||||
height="280"
|
||||
style={{ border: 0, display: 'block', marginTop: '-70px' }}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</div>
|
||||
</ExternalEmbed>
|
||||
<a
|
||||
href={DIRECTIONS_URL}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
1
hifi/assets/index-CTVFMvNc.css
Normal file
1
hifi/assets/index-CTVFMvNc.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -43,9 +43,9 @@
|
|||
"sameAs": ["https://www.youtube.com/@hifiplanet2812"]
|
||||
}
|
||||
</script>
|
||||
<script type="module" crossorigin src="/assets/index-DCz9ru6D.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-CVbBNBDp.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/lucide-icons-CnpfS6R8.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CHiguyP-.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CTVFMvNc.css">
|
||||
</head>
|
||||
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue