Match footer bottom bar to Meshkee credit pattern used on Safeteb.

Replace the plain rights line with site name plus the animated Meshkee credit link.

Co-authored-by: Cursor <cursoragent@cursor.com>

context.md

@@ -54,7 +54,13 @@ npm run build
 npm run i18n:check
 ```
 
-## Out of scope (still)
+## Footer
+
+Bottom bar matches the Safeteb / Clinic Samen Meshkee credit pattern:
+site short name on one side, animated Meshkee credit link on the other
+(`Designed And Developed By · Meshkee E-Commerce Team`). Logo:
+`public/images/footer/MeshkeeLogo-White.png`.
+
 
 - Per-good detail pages / CMS product API
 - Contact form backend

src/app/globals.css

@@ -258,3 +258,165 @@ body {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Footer bottom — Meshkee credit (Safeteb / Clinic Samen pattern) */
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 0.85rem 0 1rem;
+}
+
+.footer-bottom-bar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+
+.footer-bottom-site {
+  color: #9c9c9c;
+  font-size: 12px;
+}
+
+.meshkee-credit {
+  align-items: center;
+  color: #9c9c9c;
+  display: inline-flex;
+  gap: 10px;
+  padding: 6px 10px;
+  position: relative;
+  text-decoration: none;
+  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.meshkee-credit:hover {
+  color: #e0e0e0;
+  text-decoration: none;
+}
+
+.meshkee-credit__frame {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.meshkee-credit__line {
+  background: #777;
+  position: absolute;
+  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.meshkee-credit__line--l {
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition-delay: 0s;
+  width: 1px;
+}
+
+.meshkee-credit__line--b {
+  bottom: 0;
+  height: 1px;
+  left: 0;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition-delay: 0.14s;
+  width: 100%;
+}
+
+.meshkee-credit__line--r {
+  height: 100%;
+  right: 0;
+  top: 0;
+  transform: scaleY(0);
+  transform-origin: bottom;
+  transition-delay: 0.28s;
+  width: 1px;
+}
+
+.meshkee-credit__line--t {
+  height: 1px;
+  left: 0;
+  top: 0;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition-delay: 0.42s;
+  width: 100%;
+}
+
+.meshkee-credit:hover .meshkee-credit__line--l,
+.meshkee-credit:hover .meshkee-credit__line--r {
+  transform: scaleY(1);
+}
+
+.meshkee-credit:hover .meshkee-credit__line--t,
+.meshkee-credit:hover .meshkee-credit__line--b {
+  transform: scaleX(1);
+}
+
+.meshkee-credit:not(:hover) .meshkee-credit__line--l {
+  transition-delay: 0.42s;
+}
+
+.meshkee-credit:not(:hover) .meshkee-credit__line--b {
+  transition-delay: 0.28s;
+}
+
+.meshkee-credit:not(:hover) .meshkee-credit__line--r {
+  transition-delay: 0.14s;
+}
+
+.meshkee-credit:not(:hover) .meshkee-credit__line--t {
+  transition-delay: 0s;
+}
+
+.meshkee-credit__logo {
+  display: block;
+  flex-shrink: 0;
+  height: 42px;
+  width: auto;
+  aspect-ratio: 1 / 1;
+  object-fit: contain;
+  opacity: 0.7;
+  position: relative;
+  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.meshkee-credit:hover .meshkee-credit__logo {
+  opacity: 1;
+}
+
+.meshkee-credit__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.25;
+  min-height: 42px;
+  position: relative;
+}
+
+.meshkee-credit__label {
+  font-size: 11px;
+}
+
+.meshkee-credit__name {
+  color: #cfcfcf;
+  font-size: 13px;
+  font-weight: 600;
+  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.meshkee-credit:hover .meshkee-credit__name {
+  color: #fff;
+}
+
+@media only screen and (max-width: 575px) {
+  .footer-bottom-bar {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}

src/components/Footer.tsx

@@ -84,9 +84,36 @@ export default function Footer({ locale, t }: { locale: Locale; t: Dictionary })
         </div>
       </div>
 
-      <div className="border-t border-white/10">
-        <div className="mx-auto max-w-7xl px-4 py-5 text-center text-xs text-white/50 sm:px-6 lg:px-8">
-          {t.footer.rights}
+      <div className="footer-bottom">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="footer-bottom-bar">
+            <div className="footer-bottom-site">{t.meta.companyShort}</div>
+            <a
+              href="https://meshkee.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              dir="ltr"
+              className="meshkee-credit"
+            >
+              <span className="meshkee-credit__frame" aria-hidden>
+                <span className="meshkee-credit__line meshkee-credit__line--l" />
+                <span className="meshkee-credit__line meshkee-credit__line--t" />
+                <span className="meshkee-credit__line meshkee-credit__line--r" />
+                <span className="meshkee-credit__line meshkee-credit__line--b" />
+              </span>
+              <Image
+                src="/images/footer/MeshkeeLogo-White.png"
+                alt="Meshkee"
+                className="meshkee-credit__logo"
+                width={42}
+                height={42}
+              />
+              <span className="meshkee-credit__text">
+                <span className="meshkee-credit__label">Designed And Developed By</span>
+                <span className="meshkee-credit__name">Meshkee E-Commerce Team</span>
+              </span>
+            </a>
+          </div>
         </div>
       </div>
     </footer>