Refactor site header, heroes, and design system

components/layout/locale-toggle.tsx

@@ -11,12 +11,15 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
+import { cn } from "@/lib/utils";
 
 type LocaleToggleProps = {
   locale: string;
+  className?: string;
+  showLabel?: boolean;
 };
 
-export function LocaleToggle({ locale }: LocaleToggleProps) {
+export function LocaleToggle({ locale, className, showLabel = false }: LocaleToggleProps) {
   const pathname = usePathname();
   const locales: AppLocale[] = ["de", "en", "ar"];
   const currentPath = stripLocalePrefix(pathname);
@@ -27,11 +30,17 @@ export function LocaleToggle({ locale }: LocaleToggleProps) {
       <DropdownMenuTrigger asChild>
         <Button
           type="button"
-          variant="outline"
-          size="icon"
+          variant="ghost"
+          size={showLabel ? "sm" : "icon"}
           aria-label={`Locale: ${currentLocale.toUpperCase()}`}
+          className={cn(
+            "rounded-pill border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
+            showLabel ? "gap-2 px-3" : undefined,
+            className,
+          )}
         >
           <Languages className="h-4 w-4" />
+          {showLabel ? <span className="text-xs font-semibold uppercase tracking-[0.22em]">{currentLocale}</span> : null}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="min-w-[8rem]">