Refine site footer layout and copy

components/layout/site-footer.tsx

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