Refine site footer layout and copy

components/layout/site-footer.tsx

@@ -1,44 +1,44 @@
-import Link from "next/link";
+"use client";
-import { useLocale, useTranslations } from "next-intl";
+
+import { motion } from "framer-motion";
+import { Heart } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { Container } from "@/components/layout/container";
-import { AppLocale, getLocalizedPath } from "@/lib/locale";
+import { AppCard } from "@/components/ui/app-card";
-
+import { AppLocale } from "@/lib/locale";
-const navItems = [
-  { key: "home", path: "" },
-  { key: "portfolio", path: "/portfolio" },
-  { key: "about", path: "/about" },
-  { key: "contact", path: "/contact" },
-];
 
 type SiteFooterProps = {
   defaultLocale: AppLocale;
 };
 
 export function SiteFooter({ defaultLocale }: SiteFooterProps) {
-  const locale = useLocale();
+  void defaultLocale;
-  const tNav = useTranslations("navigation");
   const tFooter = useTranslations("footer");
 
   return (
-    <footer className="border-t border-border bg-background">
+    <footer className="border-t border-border/70 bg-background/95">
-      <Container className="flex flex-col gap-4 py-8">
+      <Container className="py-8 sm:py-10">
-        <nav className="flex flex-wrap gap-x-5 gap-y-3 text-sm">
+        <AppCard className="transition-transform duration-300 hover:-translate-y-0.5" level={1}>
-          {navItems.map((item) => (
+          <div className="flex items-center justify-center text-center">
-            <Link
+            <p className="flex flex-wrap items-center justify-center gap-2 text-sm text-muted-foreground">
-              key={item.key}
+              <span>{tFooter("line.rights", { year: new Date().getFullYear() })}</span>
-              href={getLocalizedPath(locale, item.path || "/", defaultLocale)}
+              <span className="text-border-strong">•</span>
-              className="text-muted-foreground hover:text-foreground"
+              <span>{tFooter("line.madeBefore")}</span>
+              <motion.span
+                animate={{ scale: [1, 1.12, 1, 1.2, 1] }}
+                transition={{ duration: 1.25, ease: "easeInOut", repeat: Number.POSITIVE_INFINITY }}
+                className="inline-flex"
               >
-              {tNav(item.key)}
+                <Heart
-            </Link>
+                  className="h-4 w-4 fill-red-500 text-red-500"
-          ))}
+                  aria-hidden="true"
-        </nav>
+                />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              </motion.span>
-          <p className="text-xs text-muted-foreground/80">
+              <span>{tFooter("line.madeAfter")}</span>
-            {tFooter("copyright", { year: new Date().getFullYear() })}
             </p>
           </div>
+        </AppCard>
       </Container>
     </footer>
   );

messages/ar.json

@@ -22,7 +22,11 @@
     "logoTripleClick": "هدي اللعب... اللوغو مو زر طوارئ."
   },
   "footer": {
-    "copyright": "© {year} moh-sass. جميع الحقوق محفوظة."
+    "line": {
+      "rights": "كل الحقوق محفوظة © {year} موه ساس",
+      "madeBefore": "صنّع بكل",
+      "madeAfter": "في بريمن - من قبل محمدفرواتي"
+    }
   },
   "comingSoon": {
     "badge": "قريباً",

messages/de.json

@@ -22,7 +22,11 @@
     "logoTripleClick": "Ganz ruhig. Das Logo ist kein Panikknopf."
   },
   "footer": {
-    "copyright": "© {year} moh-sass. Alle Rechte vorbehalten."
+    "line": {
+      "rights": "Alle Rechte vorbehalten © {year} moh-sass",
+      "madeBefore": "Gemacht mit",
+      "madeAfter": "in Bremen - von MohFarawati"
+    }
   },
   "comingSoon": {
     "badge": "Coming Soon",

messages/en.json

@@ -22,7 +22,11 @@
     "logoTripleClick": "Easy there. The logo is not a panic button."
   },
   "footer": {
-    "copyright": "© {year} moh-sass. All rights reserved."
+    "line": {
+      "rights": "All rights reserved © {year} moh-sass",
+      "madeBefore": "Made with",
+      "madeAfter": "in Bremen - by MohFarawati"
+    }
   },
   "comingSoon": {
     "badge": "Coming Soon",