feat: Integrate Directus CMS, add i18n with next-intl, and configure project tooling with pnpm, husky, and commitlint.**
This commit is contained in:
@@ -1,18 +1,38 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
|
||||
import { Reveal } from './Reveal';
|
||||
import { TechBackground } from './TechBackground';
|
||||
import { Counter } from './Counter';
|
||||
import { Button } from './Button';
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
Award,
|
||||
Clock,
|
||||
Lightbulb,
|
||||
Linkedin,
|
||||
MessageSquare,
|
||||
ShieldCheck,
|
||||
Truck,
|
||||
} from "lucide-react";
|
||||
import { Reveal } from "./Reveal";
|
||||
import { TechBackground } from "./TechBackground";
|
||||
import { Counter } from "./Counter";
|
||||
import { Button } from "./Button";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function About() {
|
||||
const t = useTranslations("About");
|
||||
|
||||
const manifestIcons = [
|
||||
Award,
|
||||
Clock,
|
||||
Lightbulb,
|
||||
Truck,
|
||||
MessageSquare,
|
||||
ShieldCheck,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden relative">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[60vh] flex items-center pt-32 pb-20 overflow-hidden">
|
||||
<section className="relative min-h-[60vh] flex items-center pt-44 pb-20 overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/media/drums/about-hero.jpg"
|
||||
@@ -30,17 +50,21 @@ export default function About() {
|
||||
<Counter value={1} className="section-number" />
|
||||
<Reveal delay={0.1}>
|
||||
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
|
||||
Über uns
|
||||
{t("hero.tagline")}
|
||||
</span>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
|
||||
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
|
||||
{t.rich("hero.title", {
|
||||
accent: (chunks) => (
|
||||
<span className="text-accent">{chunks}</span>
|
||||
),
|
||||
})}
|
||||
</h1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8">
|
||||
MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
|
||||
{t("hero.subtitle")}
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
@@ -56,28 +80,43 @@ export default function About() {
|
||||
<Reveal direction="right">
|
||||
<div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
|
||||
<div className="absolute -left-4 top-0 w-1 h-full bg-accent/10" />
|
||||
<p>
|
||||
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
|
||||
</p>
|
||||
<p>
|
||||
Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
|
||||
</p>
|
||||
<p>{t("intro.p1")}</p>
|
||||
<p>{t("intro.p2")}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{[
|
||||
{ name: 'Michael Bodemer', role: 'Geschäftsführung & Inhaber', linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/' },
|
||||
{ name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
|
||||
{
|
||||
name: "Michael Bodemer",
|
||||
role: t("team.bodemer"),
|
||||
linkedin:
|
||||
"https://www.linkedin.com/in/michael-bodemer-33b493122/",
|
||||
},
|
||||
{
|
||||
name: "Klaus Mintel",
|
||||
role: t("team.mintel"),
|
||||
linkedin:
|
||||
"https://www.linkedin.com/in/klaus-mintel-b80a8b193/",
|
||||
},
|
||||
].map((person, i) => (
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
|
||||
<div className="flex justify-between items-start mb-4 relative z-10">
|
||||
<h3 className="text-xl font-bold text-primary">{person.name}</h3>
|
||||
<a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
|
||||
<h3 className="text-xl font-bold text-primary">
|
||||
{person.name}
|
||||
</h3>
|
||||
<a
|
||||
href={person.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#0077b5] hover:scale-110 transition-transform"
|
||||
>
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-accent text-sm font-bold uppercase tracking-wider relative z-10">{person.role}</p>
|
||||
<p className="text-accent text-sm font-bold uppercase tracking-wider relative z-10">
|
||||
{person.role}
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -92,31 +131,37 @@ export default function About() {
|
||||
<div className="container-custom relative z-10">
|
||||
<Counter value={3} className="section-number !text-white/5" />
|
||||
<Reveal className="mb-20">
|
||||
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Unser Manifest</h2>
|
||||
<p className="text-slate-400 text-base md:text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
|
||||
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
|
||||
{t("manifest.tagline")}
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
|
||||
{t("manifest.title")}
|
||||
</h2>
|
||||
<p className="text-slate-400 text-base md:text-lg">
|
||||
{t("manifest.subtitle")}
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: Award, title: 'Kompetenz', desc: 'Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how in modernsten Anlagen.' },
|
||||
{ icon: Clock, title: 'Verfügbarkeit', desc: 'Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen.' },
|
||||
{ icon: Lightbulb, title: 'Lösungen', desc: 'Wir stellen die richtigen Fragen, um die technisch und wirtschaftlich beste Lösung zu finden.' },
|
||||
{ icon: Truck, title: 'Logistik', desc: 'Von der Fertigungsüberwachung bis zum termingerechten Fracht-Tracking.' },
|
||||
{ icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
|
||||
{ icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
|
||||
].map((item, i) => (
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
|
||||
<div className="text-accent mb-6">
|
||||
<item.icon size={32} />
|
||||
{t.raw("manifest.items").map((item: any, i: number) => {
|
||||
const Icon = manifestIcons[i];
|
||||
return (
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
|
||||
<div className="text-accent mb-6">
|
||||
<Icon size={32} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-white mb-4">
|
||||
{i + 1}. {item.title}
|
||||
</h4>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-white mb-4">{i + 1}. {item.title}</h4>
|
||||
<p className="text-slate-400 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -132,13 +177,18 @@ export default function About() {
|
||||
<div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
|
||||
<div className="relative z-10 max-w-2xl">
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white mb-6 md:mb-8">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
{t("cta.title")}
|
||||
</h2>
|
||||
<p className="text-slate-400 text-lg md:text-xl mb-8 md:mb-12">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
||||
{t("cta.subtitle")}
|
||||
</p>
|
||||
<Button href="/kontakt" variant="accent" showArrow className="w-full sm:w-auto !px-10 !py-5 text-lg">
|
||||
Jetzt Kontakt aufnehmen
|
||||
<Button
|
||||
href="/kontakt"
|
||||
variant="accent"
|
||||
showArrow
|
||||
className="w-full sm:w-auto !px-10 !py-5 text-lg"
|
||||
>
|
||||
{t("cta.button")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user