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>