Skip to content

Commit 4b5f30f

Browse files
eddndeveddndev
committed
feat: add Footer component and integrate into Layout
Added a new Footer component with site navigation, contact info, and social links (TikTok, Instagram, Facebook). Integrated the Footer into the main Layout.
1 parent 7aa49fa commit 4b5f30f

2 files changed

Lines changed: 109 additions & 0 deletions

File tree

‎src/components/Footer.astro‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
import DangoLogo from './DangoLogo.astro';
3+
4+
const currentYear = new Date().getFullYear();
5+
6+
const socialLinks = [
7+
{ label: 'TikTok', url: 'https://www.tiktok.com/@festivaldango', icon: 'tiktok' },
8+
{ label: 'Instagram', url: 'https://www.instagram.com/festivaldango/', icon: 'instagram' },
9+
{ label: 'Facebook', url: 'https://www.facebook.com/p/Festival-D%C3%A4ngo-Bani-Quetzalc%C3%B3atl-Teotihuac%C3%A1n-61566488706289/', icon: 'facebook' }
10+
];
11+
12+
const footerLinks = [
13+
{ label: "BOLETOS", href: "#boletos" },
14+
{ label: "LINE UP", href: "#lineup" },
15+
{ label: "UBICACIÓN", href: "#ubicacion" },
16+
{ label: "INFORMACIÓN", href: "#informacion" },
17+
{ label: "PLAYLIST", href: "#playlist" },
18+
{ label: "GALERÍA", href: "#galeria-dango" },
19+
];
20+
---
21+
22+
<footer class="bg-black text-white/80 border-t border-white/10" role="contentinfo">
23+
<div class="container mx-auto px-4 py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
24+
25+
<!-- 1. Logo + Misión -->
26+
<div class="space-y-6">
27+
<div class="flex items-center gap-2">
28+
<a href="/" class="hover:opacity-80 transition-opacity">
29+
<DangoLogo class="h-8 md:h-10 w-auto text-dango-pink" />
30+
</a>
31+
</div>
32+
<p class="text-sm leading-relaxed max-w-xs text-gray-400 font-inter">
33+
Festival de música, arte y cultura en Teotihuacán.<br>
34+
Donde el sonido ancestral encuentra el ritmo del futuro.
35+
</p>
36+
</div>
37+
38+
<!-- 2. Sitemap -->
39+
<nav aria-label="Navegación pie de página">
40+
<h3 class="font-kismis text-lg mb-6 text-white tracking-wider">EXPLORA</h3>
41+
<ul class="space-y-3">
42+
{footerLinks.map(link => (
43+
<li>
44+
<a
45+
href={link.href}
46+
class="text-sm hover:text-dango-pink transition-colors duration-300 font-outfit uppercase tracking-wide"
47+
>
48+
{link.label}
49+
</a>
50+
</li>
51+
))}
52+
</ul>
53+
</nav>
54+
55+
<!-- 3. Contacto & RRSS -->
56+
<div class="space-y-6">
57+
<h3 class="font-kismis text-lg mb-6 text-white tracking-wider">CONTACTO</h3>
58+
59+
<ul class="text-sm space-y-3 text-gray-400 font-inter">
60+
<li>
61+
<span class="block text-xs uppercase tracking-wider text-gray-500 mb-1">Email</span>
62+
<a href="mailto:contacto@festivaldango.com" class="hover:text-dango-pink transition-colors">contacto@festivaldango.com</a>
63+
</li>
64+
</ul>
65+
66+
<div class="flex gap-4 pt-2">
67+
{socialLinks.map(s => (
68+
<a
69+
href={s.url}
70+
class="group p-2 bg-white/5 rounded-full hover:bg-dango-pink/20 transition-all duration-300"
71+
aria-label={s.label}
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
>
75+
{s.icon === 'tiktok' && (
76+
<svg class="h-5 w-5 fill-current text-gray-400 group-hover:text-dango-pink transition-colors" viewBox="0 0 24 24">
77+
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
78+
</svg>
79+
)}
80+
{s.icon === 'instagram' && (
81+
<svg class="h-5 w-5 fill-current text-gray-400 group-hover:text-dango-pink transition-colors" viewBox="0 0 24 24">
82+
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.069-4.85.069-3.204 0-3.584-.011-4.849-.069-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
83+
</svg>
84+
)}
85+
{s.icon === 'facebook' && (
86+
<svg class="h-5 w-5 fill-current text-gray-400 group-hover:text-dango-pink transition-colors" viewBox="0 0 24 24">
87+
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
88+
</svg>
89+
)}
90+
<span class="sr-only">{s.label}</span>
91+
</a>
92+
))}
93+
</div>
94+
</div>
95+
</div>
96+
97+
<!-- Línea inferior -->
98+
<div class="border-t border-white/10 py-8">
99+
<div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400 font-inter tracking-wide">
100+
<p>© {currentYear} Festival Dängo. Todos los derechos reservados.</p>
101+
<div class="flex gap-6">
102+
<a href="#" class="hover:text-dango-pink transition-colors">Aviso de Privacidad</a>
103+
<a href="#" class="hover:text-dango-pink transition-colors">Términos y Condiciones</a>
104+
</div>
105+
</div>
106+
</div>
107+
</footer>

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { ViewTransitions } from 'astro:transitions';
33
import '../styles/global.css';
4+
import Footer from '../components/Footer.astro';
45
56
interface Props {
67
title: string;
@@ -53,6 +54,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
5354
</head>
5455
<body class="min-h-screen">
5556
<slot />
57+
<Footer />
5658
<script>
5759
import { initLenis } from '../utils/lenis';
5860
initLenis();

0 commit comments

Comments
 (0)