feat(ui): add dedicated certificates pages and block component

app/[locale]/[slug]/page.tsx

@@ -23,6 +23,8 @@ import { ServiceDetailGrid } from '@/components/blocks/ServiceDetailGrid';
 import { BenefitGrid } from '@/components/blocks/BenefitGrid';
 import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
 import { FaqBlock } from '@/components/blocks/FaqBlock';
+import { CertificatesBlock } from '@/components/blocks/CertificatesBlock';
+import { HeroSection } from '@/components/blocks/HeroSection';
 import JsonLd from '@/components/JsonLd';
 import { Button } from '@/components/ui/Button';
 
@@ -39,6 +41,8 @@ const mdxComponents = {
   BenefitGrid,
   InteractiveGermanyMap,
   FaqBlock,
+  CertificatesBlock,
+  HeroSection,
   JsonLd,
   Button,
   // Standard HTML element mapping for consistent E-TIB typography

app/[locale]/page.tsx

@@ -12,6 +12,8 @@ import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubC
 import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
 import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
 import { FaqBlock } from '@/components/blocks/FaqBlock';
+import { CertificatesBlock } from '@/components/blocks/CertificatesBlock';
+import { HeroSection } from '@/components/blocks/HeroSection';
 import JsonLd from '@/components/JsonLd';
 
 import { Button } from '@/components/ui/Button';
@@ -23,6 +25,8 @@ const mdxComponents = {
   HomeCompetenceBentoGrid,
   HomeReferencesSlider,
   FaqBlock,
+  CertificatesBlock,
+  HeroSection,
   JsonLd,
   Button,
   Heading,

components/blocks/CertificatesBlock.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Container } from '@/components/ui/Container';
+import { Button } from '@/components/ui/Button';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
+import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
+import { FileText, Award, Download, ShieldCheck } from 'lucide-react';
+import { LogoArcs } from '@/components/ui/LogoArcs';
+
+interface Certificate {
+  title: string;
+  description: string;
+  pdfUrl: string;
+  type: 'iso' | 'tax' | 'general';
+  date?: string;
+}
+
+interface CertificatesBlockProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  certificates?: Certificate[];
+  hideHeader?: boolean;
+}
+
+const defaultCertificates: Certificate[] = [
+  {
+    title: 'ISO 14001:2015',
+    description: 'Umweltmanagementsystem',
+    pdfUrl: '/assets/certificates/231214_Zertifikat ISO 14001 Umweltmanagement.pdf',
+    type: 'iso',
+    date: '14.12.2023',
+  },
+  {
+    title: 'ISO 9001:2015',
+    description: 'Qualitätsmanagementsystem',
+    pdfUrl: '/assets/certificates/231214_Zertifikat ISO 9001 Qualitätsmanagement.pdf',
+    type: 'iso',
+    date: '14.12.2023',
+  },
+  {
+    title: 'DIN EN ISO 45001:2018',
+    description: 'Arbeits- und Gesundheitsschutz',
+    pdfUrl: '/assets/certificates/Zertifizierung DIN EN ISO 45001 bis 05122028.pdf',
+    type: 'iso',
+    date: '05.12.2025', // Assuming valid till
+  },
+  {
+    title: 'Freistellungsbescheinigung',
+    description: 'Nach § 48 b EStG',
+    pdfUrl: '/assets/certificates/240209_Freistellungsbescheinigung § 48 b.pdf',
+    type: 'tax',
+    date: '09.02.2024',
+  },
+  {
+    title: 'Nachweis § 13b UStG',
+    description: 'Steuerschuldnerschaft des Leistungsempfängers',
+    pdfUrl: '/assets/certificates/240209_Nachweis § 13 b.pdf',
+    type: 'tax',
+    date: '09.02.2024',
+  },
+  {
+    title: 'Bescheinigung in Steuersachen',
+    description: 'Zertifikat des Finanzamtes',
+    pdfUrl: '/assets/certificates/250213_Bescheinigung in Steuersachen.pdf',
+    type: 'tax',
+    date: '13.02.2025',
+  },
+];
+
+export function CertificatesBlock({ badge, title, description, certificates = defaultCertificates, hideHeader = false }: CertificatesBlockProps) {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const badgeText = badge || 'Zertifizierungen & Nachweise';
+  const titleText = title || 'Geprüfte Qualität und Sicherheit';
+  const descriptionText = description || 'Transparenz und höchste Standards sind das Fundament unserer Arbeit. Hier finden Sie unsere aktuellen Zertifikate und Bescheinigungen als PDF-Download.';
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+  };
+
+  if (!isMounted) {
+    return (
+      <section className="py-24 bg-neutral-50 relative overflow-hidden">
+        <Container>
+          {!hideHeader && (
+            <div className="text-center max-w-3xl mx-auto mb-16">
+              <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
+              <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
+              <p className="text-lg text-neutral-600">{descriptionText}</p>
+            </div>
+          )}
+        </Container>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-24 bg-neutral-50 relative overflow-hidden">
+      {/* Background Accents */}
+      <div className="absolute top-0 right-0 w-1/3 h-full bg-primary/5 -skew-x-12 translate-x-1/2" />
+      <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-accent/5 skew-y-12 -translate-x-1/2 blur-3xl rounded-full" />
+
+      <Container className="relative z-10">
+        {!hideHeader && (
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
+              <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
+              <p className="text-lg text-neutral-600">{descriptionText}</p>
+            </motion.div>
+          </div>
+        )}
+
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: true, margin: "-50px" }}
+        >
+          {certificates.map((cert, index) => {
+            const isIso = cert.type === 'iso';
+            
+            return (
+              <motion.a
+                key={index}
+                href={cert.pdfUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                variants={itemVariants}
+                className={`group relative rounded-2xl p-8 flex flex-col justify-between overflow-hidden transition-all duration-500 hover:shadow-xl hover:-translate-y-1 border ${
+                  isIso 
+                    ? 'bg-neutral-dark text-white border-neutral-800 shadow-lg' 
+                    : 'bg-white text-neutral-dark border-neutral-200 shadow-md'
+                }`}
+              >
+                {/* Background Decorative Elements */}
+                <div className={`absolute top-0 right-0 w-32 h-32 blur-3xl rounded-full -mr-10 -mt-10 transition-colors duration-500 ${
+                  isIso ? 'bg-primary/20 group-hover:bg-primary/40' : 'bg-primary/10 group-hover:bg-primary/20'
+                }`} />
+
+                {isIso && (
+                  <div className="absolute -bottom-[20%] -right-[20%] w-[100%] h-[100%] z-0 opacity-10 group-hover:opacity-20 transition-opacity duration-1000 pointer-events-none mix-blend-overlay">
+                    <LogoArcs className="w-full h-full text-white animate-[spin_60s_linear_infinite]" />
+                  </div>
+                )}
+                
+                <HoverShineOverlay shineColor={isIso ? 'via-white/20' : 'via-black/5'} />
+                <AnimatedGlossyBorder color={isIso ? 'primary' : 'primary'} className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={2} />
+
+                <div className="relative z-10 flex flex-col h-full">
+                  <div className="flex justify-between items-start mb-8">
+                    <div className={`p-3 rounded-xl inline-flex ${
+                      isIso ? 'bg-primary/20 text-primary-light backdrop-blur-md' : 'bg-primary/10 text-primary'
+                    }`}>
+                      {isIso ? <Award size={28} /> : <ShieldCheck size={28} />}
+                    </div>
+                    {cert.date && (
+                      <span className={`text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full ${
+                        isIso ? 'bg-neutral-800 text-neutral-400 border border-neutral-700' : 'bg-neutral-100 text-neutral-500 border border-neutral-200'
+                      }`}>
+                        {cert.date}
+                      </span>
+                    )}
+                  </div>
+
+                  <div>
+                    <h4 className={`text-xl font-bold mb-2 ${isIso ? 'text-white' : 'text-neutral-dark'}`}>
+                      {cert.title}
+                    </h4>
+                    <p className={`text-sm mb-6 ${isIso ? 'text-neutral-400' : 'text-neutral-600'}`}>
+                      {cert.description}
+                    </p>
+                  </div>
+
+                  <div className={`mt-auto inline-flex items-center text-sm font-bold uppercase tracking-wider group-hover:gap-3 transition-all ${
+                    isIso ? 'text-primary-light' : 'text-primary'
+                  }`}>
+                    <span>Download PDF</span>
+                    <Download size={16} className="ml-2 group-hover:translate-y-0.5 transition-transform" />
+                  </div>
+                </div>
+              </motion.a>
+            );
+          })}
+        </motion.div>
+      </Container>
+    </section>
+  );
+}

components/blocks/HeroSection.tsx

@@ -80,7 +80,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             </motion.div>
           )}
           <motion.div variants={itemVariants}>
-            <Heading level={1} className="text-white mb-4 md:mb-8">
+            <Heading level={1} variant="white" className="mb-4 md:mb-8">
               {title}
             </Heading>
           </motion.div>

components/layout/Footer.tsx

@@ -86,6 +86,7 @@ export function Footer({ companyInfo }: FooterProps) {
               {[
                 { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/kompetenzen` },
                 { label: locale === 'de' ? 'Über uns' : 'About us', href: `/${locale}/ueber-uns` },
+                { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
                 { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/karriere` },
                 { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/messen` },
                 { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },

content/de/zertifikate.mdx

@@ -0,0 +1,15 @@
+---
+title: "Zertifikate & Nachweise"
+date: "2024-03-20"
+excerpt: "Geprüfte Qualität, Arbeitssicherheit und Umweltschutz sind das Fundament unserer täglichen Arbeit."
+layout: "fullBleed"
+---
+
+<HeroSection
+  badge="Die E-TIB Gruppe"
+  title="Zertifikate & Nachweise"
+  subtitle="Geprüfte Qualität, Arbeitssicherheit und Umweltschutz sind das Fundament unserer täglichen Arbeit."
+  backgroundImage={{ url: "/assets/photos/DSC08653.JPG" }}
+/>
+
+<CertificatesBlock hideHeader={true} />

content/en/zertifikate.mdx

@@ -0,0 +1,64 @@
+---
+title: "Certificates & Credentials"
+date: "2024-03-20"
+excerpt: "Certified quality, occupational safety, and environmental protection are the foundation of our daily work."
+layout: "fullBleed"
+---
+
+<HeroSection
+  badge="The E-TIB Group"
+  title="Certificates & Credentials"
+  subtitle="Certified quality, occupational safety, and environmental protection are the foundation of our daily work."
+  backgroundImage={{ url: "/assets/photos/DSC08653.JPG" }}
+/>
+
+<CertificatesBlock
+  hideHeader={true}
+  badge="Certifications & Credentials"
+  title="Certified Quality and Safety"
+  description="Transparency and the highest standards are the foundation of our work. Here you can find our current certificates available for download."
+  certificates={[
+    {
+      title: 'ISO 14001:2015',
+      description: 'Environmental Management System',
+      pdfUrl: '/assets/certificates/231214_Zertifikat ISO 14001 Umweltmanagement.pdf',
+      type: 'iso',
+      date: '14.12.2023',
+    },
+    {
+      title: 'ISO 9001:2015',
+      description: 'Quality Management System',
+      pdfUrl: '/assets/certificates/231214_Zertifikat ISO 9001 Qualitätsmanagement.pdf',
+      type: 'iso',
+      date: '14.12.2023',
+    },
+    {
+      title: 'DIN EN ISO 45001:2018',
+      description: 'Occupational Health and Safety',
+      pdfUrl: '/assets/certificates/Zertifizierung DIN EN ISO 45001 bis 05122028.pdf',
+      type: 'iso',
+      date: '05.12.2025',
+    },
+    {
+      title: 'Exemption Certificate',
+      description: 'According to § 48 b EStG',
+      pdfUrl: '/assets/certificates/240209_Freistellungsbescheinigung § 48 b.pdf',
+      type: 'tax',
+      date: '09.02.2024',
+    },
+    {
+      title: 'Proof § 13b UStG',
+      description: 'Tax liability of the service recipient',
+      pdfUrl: '/assets/certificates/240209_Nachweis § 13 b.pdf',
+      type: 'tax',
+      date: '09.02.2024',
+    },
+    {
+      title: 'Certificate in Tax Matters',
+      description: 'Tax Office Certificate',
+      pdfUrl: '/assets/certificates/250213_Bescheinigung in Steuersachen.pdf',
+      type: 'tax',
+      date: '13.02.2025',
+    }
+  ]}
+/>

danny_mail_draft.txt

@@ -6,7 +6,7 @@ kurzes Update von meiner Seite: Der Testserver mit dem ersten Entwurf der neuen
 
 Mein Ziel beim Design war es, eure Arbeit so direkt und professionell wie möglich in den Fokus zu rücken. Ich habe mich deshalb ganz bewusst für eine reduzierte Gestaltung entschieden, bei der das Bild- und Videomaterial im Vordergrund steht.
 
-Das war jetzt quasi mein erster Schuss – und ab hier ist dein Feedback extrem wichtig für die nächsten Schritte. Bitte schau dir die Seite im Detail an und achte besonders auf folgende Punkte:
+Das ist jetzt der erste Schuss – und ab hier ist dein Feedback extrem wichtig für die nächsten Schritte. Bitte schau dir die Seite im Detail an und achte besonders auf folgende Punkte:
 
 - Design & Optik: Passt die generelle Richtung für euch? Seid ihr mit den Farben und dem aufgeräumten Stil happy?
 - Content: Fehlen noch wichtige Themen oder Leistungen? Ist inhaltlich irgendwas falsch dargestellt?