feat(header): add mail and map action buttons for mobile
Some checks failed
Build & Deploy / 🧪 QA (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🔍 Prepare (push) Has been cancelled

This commit is contained in:
2026-06-20 09:31:48 +02:00
parent 17736860d6
commit 8b6d2da821
2 changed files with 46 additions and 15 deletions

View File

@@ -138,20 +138,51 @@ export function Header({ navLinks }: HeaderProps) {
<div className="flex items-center gap-2 md:gap-4 lg:gap-6">
<div className={`hidden md:block h-5 w-px transition-colors duration-300 ${isSolidMode ? 'bg-neutral-200' : 'bg-white/20'}`} />
{/* Phone Button (Mobile Only) */}
<a
href="tel:+492572946760"
className={`md:hidden relative flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 ${
isSolidMode
? 'bg-primary/10 text-primary hover:bg-primary/20'
: 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
}`}
aria-label="Anrufen"
>
<svg className="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</a>
{/* Quick Actions (Mobile Only) */}
<div className="md:hidden flex items-center gap-2">
<a
href="tel:+492572946760"
className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
isSolidMode
? 'bg-primary text-white shadow-md shadow-primary/20 hover:-translate-y-0.5'
: 'bg-white text-primary shadow-md hover:-translate-y-0.5'
}`}
aria-label="Anrufen"
>
<svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</a>
<a
href="mailto:info@e-tib.com"
className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
isSolidMode
? 'bg-neutral-100 text-neutral-600 hover:text-primary hover:bg-neutral-200'
: 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
}`}
aria-label="E-Mail"
>
<svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</a>
<a
href="https://maps.google.com/?q=E-TIB+GmbH,+Greven"
target="_blank"
rel="noopener noreferrer"
className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
isSolidMode
? 'bg-neutral-100 text-neutral-600 hover:text-primary hover:bg-neutral-200'
: 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
}`}
aria-label="Route"
>
<svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</a>
</div>
{/* Language Switcher visible on desktop only */}
<div className="z-50 relative hidden md:flex items-center">

View File

@@ -138,7 +138,7 @@
"prepare": "husky",
"preinstall": "npx only-allow pnpm"
},
"version": "2.2.13-rc.61",
"version": "2.2.13-rc.62",
"pnpm": {
"onlyBuiltDependencies": [
"@parcel/watcher",