diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx index 35ca92c1d..97a180876 100644 --- a/app/[locale]/[slug]/page.tsx +++ b/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 diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 0ad4e9a71..7eae8f8b9 100644 --- a/app/[locale]/page.tsx +++ b/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, diff --git a/components/blocks/CertificatesBlock.tsx b/components/blocks/CertificatesBlock.tsx new file mode 100644 index 000000000..43fd85710 --- /dev/null +++ b/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 ( +
+ + {!hideHeader && ( +
+

{badgeText}

+

{titleText}

+

{descriptionText}

+
+ )} + +
+ ); + } + + return ( +
+ {/* Background Accents */} +
+
+ + + {!hideHeader && ( +
+ +

{badgeText}

+

{titleText}

+

{descriptionText}

+ +
+ )} + + + {certificates.map((cert, index) => { + const isIso = cert.type === 'iso'; + + return ( + + {/* Background Decorative Elements */} +
+ + {isIso && ( +
+ +
+ )} + + + + +
+
+
+ {isIso ? : } +
+ {cert.date && ( + + {cert.date} + + )} +
+ +
+

+ {cert.title} +

+

+ {cert.description} +

+
+ +
+ Download PDF + +
+
+ + ); + })} + + +
+ ); +} diff --git a/components/blocks/HeroSection.tsx b/components/blocks/HeroSection.tsx index 2aba842c4..76e0ae3e2 100644 --- a/components/blocks/HeroSection.tsx +++ b/components/blocks/HeroSection.tsx @@ -80,7 +80,7 @@ export const HeroSection: React.FC = (props) => { )} - + {title} diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx index 757559deb..0810e8fca 100644 --- a/components/layout/Footer.tsx +++ b/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'}` }, diff --git a/content/de/zertifikate.mdx b/content/de/zertifikate.mdx new file mode 100644 index 000000000..429098af2 --- /dev/null +++ b/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" +--- + + + + diff --git a/content/en/zertifikate.mdx b/content/en/zertifikate.mdx new file mode 100644 index 000000000..bb0b1b5a1 --- /dev/null +++ b/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" +--- + + + + diff --git a/danny_mail_draft.txt b/danny_mail_draft.txt index 6501fc617..95ca33b91 100644 --- a/danny_mail_draft.txt +++ b/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?