Marc Mintel
1919d8bc2a
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Successful in 1m41s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
- Resized and compressed oversized logo (204KB -> 21KB) - Optimized large media images (hs-kabel.png, contact-hero.jpg) - Implemented dynamic lazy-loading for home page sections - Tuned Sentry traces sample rate (1.0 -> 0.1) - Refined font loading and fixed redundant analytics tracking
65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { CheckCircle2 } from "lucide-react";
|
|
import { Reveal } from "../Reveal";
|
|
import { Counter } from "../Counter";
|
|
import { TechBackground } from "../TechBackground";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export const ExpertiseSection = () => {
|
|
const t = useTranslations("Index");
|
|
|
|
return (
|
|
<section className="bg-white relative overflow-hidden">
|
|
<TechBackground />
|
|
<div className="container-custom relative z-10">
|
|
<Counter value={3} className="section-number" />
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
|
|
<Reveal direction="right">
|
|
<div className="relative overflow-hidden rounded-2xl shadow-lg group">
|
|
<div className="absolute inset-0 bg-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10 pointer-events-none" />
|
|
<Image
|
|
src="/media/cables/hs-kabel.png"
|
|
alt="Technische Beratung"
|
|
width={800}
|
|
height={600}
|
|
className="w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
<div className="tech-corner top-4 left-4 border-t-2 border-l-2 z-20" />
|
|
<div className="tech-corner bottom-4 right-4 border-b-2 border-r-2 z-20" />
|
|
</div>
|
|
</Reveal>
|
|
<div>
|
|
<Reveal>
|
|
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
|
|
{t("expertise.tag")}
|
|
</span>
|
|
<h2 className="text-3xl md:text-5xl font-bold text-primary mb-6 md:mb-8">
|
|
{t("expertise.title")}
|
|
</h2>
|
|
<p className="text-slate-600 text-base md:text-xl mb-8 md:mb-12">
|
|
{t("expertise.description")}
|
|
</p>
|
|
</Reveal>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{t.raw("expertise.groups").map((item: string, i: number) => (
|
|
<Reveal key={i} delay={i * 0.05}>
|
|
<div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-1 h-full bg-accent/0 group-hover:bg-accent/100 transition-all duration-300" />
|
|
<div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
|
|
<CheckCircle2 size={16} />
|
|
</div>
|
|
<span className="text-primary font-semibold">{item}</span>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|