refactor: enforce global Button component usage across all files (Header, Forms, Grids, MDX)

Former-commit-id: aa55620667a28e5c00ab2603da6ea6dc1e1c5ecf

components/blocks/CompetenceBentoGrid.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { motion } from 'framer-motion';
 import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/Button';
 
 interface CompetenceBentoGridProps {
   badge?: string;
@@ -79,10 +80,10 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
             <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
           </div>
-          <Link href={ctaHref} className="inline-flex items-center font-bold text-primary hover:text-primary-dark transition-colors group mt-6 md:mt-0 bg-primary/5 hover:bg-primary/10 px-6 py-3 rounded-xl">
+          <Button href={ctaHref} variant="ghost" className="mt-6 md:mt-0 bg-primary/5 hover:bg-primary/10">
             {ctaLabel}
             <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-          </Link>
+          </Button>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px]">

components/blocks/JobListingBlock.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+import { Button } from '@/components/ui/Button';
 
 export interface JobListingBlockProps {
   title?: string;
@@ -89,7 +90,9 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
             ) : (
               <div className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center">
                 <p className="text-text-secondary text-lg">{emptyStateMessage}</p>
-                <Link href={emptyStateLinkHref} className="inline-block mt-6 text-primary font-bold hover:underline">{emptyStateLinkText}</Link>
+                <Button href={emptyStateLinkHref} variant="primary" className="mt-6">
+                  {emptyStateLinkText}
+                </Button>
               </div>
             )}
           </div>

components/forms/ContactForm.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/Button';
 
 export function ContactForm() {
   const [status, setStatus] = React.useState<'idle' | 'loading' | 'success' | 'error'>('idle');
@@ -99,10 +100,12 @@ export function ContactForm() {
             />
           </div>
 
-          <button 
+          <Button 
             type="submit" 
             disabled={status === 'loading'}
-            className="w-full bg-primary hover:bg-primary-dark text-white font-bold text-lg py-4 rounded-xl transition-all shadow-md hover:shadow-lg disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            variant="primary"
+            size="lg"
+            className="w-full"
           >
             {status === 'loading' ? (
               <>
@@ -112,7 +115,7 @@ export function ContactForm() {
             ) : (
               'Nachricht absenden'
             )}
-          </button>
+          </Button>
           
           <p className="text-xs text-text-light text-center">
             Mit dem Absenden erkläre ich mich mit der Datenschutzerklärung einverstanden.

components/layout/Header.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import { LanguageSwitcher } from './LanguageSwitcher';
+import { Button } from '@/components/ui/Button';
 
 export interface NavLink {
   label: string;
@@ -108,12 +109,13 @@ export function Header({ navLinks }: HeaderProps) {
             })}
             <div className={`h-4 w-px mx-2 transition-colors duration-300 ${isSolidMode ? 'bg-neutral-300' : 'bg-white/20'}`} />
             <LanguageSwitcher isSolidMode={isSolidMode} />
-            <Link
+            <Button
               href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
-              className="rounded-xl bg-primary hover:bg-primary-dark text-neutral-light px-8 py-3 font-bold text-sm uppercase tracking-wider transition-all shadow-xl hover:shadow-primary/20 hover:-translate-y-0.5 active:translate-y-0"
+              variant="primary"
+              className="px-8"
             >
               {currentLocale === 'de' ? 'Kontakt' : 'Contact'}
-            </Link>
+            </Button>
           </nav>
 
           {/* Mobile Nav Button */}