Просмотр исходного кода

Rework mobile footer: centered compact layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
AusPrinzip 2 недель назад
Родитель
Сommit
005296a0e4
1 измененных файлов с 30 добавлено и 12 удалено
  1. 30 12
      src/routes/+page.svelte

+ 30 - 12
src/routes/+page.svelte

@@ -404,16 +404,39 @@
 </section>
 
 <!-- ════════════════ FOOTER ════════════════ -->
-<footer class="bg-[#060606] py-12 sm:py-16 border-t border-white/[0.04]">
+<footer class="bg-[#060606] py-10 sm:py-16 border-t border-white/[0.04]">
   <div class="max-w-7xl mx-auto px-5 sm:px-10">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-start">
-      <!-- Logo + tagline -->
+
+    <!-- Mobile footer: centered, compact -->
+    <div class="md:hidden flex flex-col items-center text-center">
+      <img src="/logo.png" alt="Inkdigena" class="h-12 w-auto mb-2">
+      <p class="font-cinzel text-white text-sm tracking-wide mb-1">INKDIGENA</p>
+      <p class="font-mont italic text-white/25 text-xs mb-5">Donde el arte ancestral cobra vida en tu piel</p>
+
+      <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mb-5">
+        <a href="#inicio" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Inicio</a>
+        <a href="#servicios" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Servicios</a>
+        <a href="#galeria" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Galería</a>
+        <a href="#contacto" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Contacto</a>
+        <a href="/about" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Nosotros</a>
+      </div>
+
+      <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-gold text-sm mb-1 hover:text-white transition-colors">+506 6269-2083</a>
+      <span class="font-mont text-white/25 text-xs mb-6">Costa Rica</span>
+
+      <div class="w-full border-t border-white/[0.04] pt-5 flex flex-col items-center gap-2">
+        <p class="font-mont text-white/20 text-[10px]">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
+        <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-[10px] text-white/20 hover:text-white/40 transition-colors">Hecho por digitalmar.dev</a>
+      </div>
+    </div>
+
+    <!-- Desktop footer: 3-column grid -->
+    <div class="hidden md:grid grid-cols-3 gap-12 items-start">
       <div>
         <img src="/logo.png" alt="Inkdigena" class="h-14 w-auto mb-3">
         <p class="font-mont italic text-white/25 text-sm">Donde el arte ancestral cobra vida en tu piel</p>
       </div>
 
-      <!-- Links -->
       <div class="flex flex-col gap-2">
         <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Explorar</span>
         <a href="#inicio" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Inicio</a>
@@ -423,7 +446,6 @@
         <a href="/about" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Nosotros</a>
       </div>
 
-      <!-- Contact -->
       <div class="flex flex-col gap-2">
         <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Contacto</span>
         <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">WhatsApp: +506 6269-2083</a>
@@ -432,13 +454,9 @@
       </div>
     </div>
 
-    <div class="mt-10 pt-8 border-t border-white/[0.04] flex flex-col sm:flex-row items-center justify-between gap-4">
-      <p class="font-mont text-white/20 text-xs">
-        &copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop
-      </p>
-      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/20 hover:text-white/40 transition-colors">
-        Hecho por digitalmar.dev
-      </a>
+    <div class="hidden md:flex mt-10 pt-8 border-t border-white/[0.04] items-center justify-between">
+      <p class="font-mont text-white/20 text-xs">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
+      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/20 hover:text-white/40 transition-colors">Hecho por digitalmar.dev</a>
     </div>
   </div>
 </footer>