Add Safeteb-style Meshkee credit bar to the footer.

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

app/globals.css

@@ -107,3 +107,162 @@ button {
   height: auto;
   border-radius: 0.75rem;
 }
+
+/* Footer bottom — Meshkee credit (safeteb-style) */
+.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 {
+  aspect-ratio: 1 / 1;
+  display: block;
+  flex-shrink: 0;
+  height: 42px;
+  object-fit: contain;
+  opacity: 0.7;
+  position: relative;
+  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  width: auto;
+}
+
+.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-family: var(--font-latin);
+  font-size: 11px;
+}
+
+.meshkee-credit__name {
+  color: #cfcfcf;
+  font-family: var(--font-latin);
+  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 (max-width: 575px) {
+  .footer-bottom-bar {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}

components/layout/Footer.tsx

@@ -63,10 +63,37 @@ export function Footer() {
         </div>
       </Container>
 
-      <div className="border-t border-white/10 bg-black/30">
-        <Container className="flex flex-col gap-2 py-4 text-[12px] text-white/45 sm:flex-row sm:items-center sm:justify-between">
-          <p>© {new Date().getFullYear()} {site.name}. تمامی حقوق محفوظ است.</p>
-          <p className="font-latin tracking-[0.18em] uppercase">{site.nameEn}</p>
+      <div className="border-t border-white/10 bg-black/40">
+        <Container className="py-3">
+          <div className="footer-bottom-bar">
+            <div className="footer-bottom-site">{site.name}</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>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src="/images/meshkee-logo-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>
         </Container>
       </div>
     </footer>