Changes

src/components/FooterSection.tsx

@@ -0,0 +1,61 @@
+import { ABOUT_ORG, FOOTER } from "@/data/event-data";
+import { Instagram, Facebook, Youtube, Mail } from "lucide-react";
+
+const FooterSection = () => (
+  <footer className="bg-foreground text-primary-foreground">
+    <div className="container mx-auto px-4 py-12">
+      <div className="grid md:grid-cols-3 gap-8 mb-8">
+        {/* Brand */}
+        <div>
+          <h3 className="font-display text-2xl font-bold mb-3">ZoukLambadaBCN</h3>
+          <p className="text-primary-foreground/70 text-sm">
+            Comunidad de baile en Barcelona.
+          </p>
+        </div>
+
+        {/* Contacto */}
+        <div>
+          <h4 className="font-display text-lg font-semibold mb-3">Contacto</h4>
+          <a
+            href={`mailto:${FOOTER.email}`}
+            className="flex items-center gap-2 text-sm text-primary-foreground/70 hover:text-primary transition-colors"
+          >
+            <Mail className="w-4 h-4" />
+            {FOOTER.email}
+          </a>
+        </div>
+
+        {/* Redes */}
+        <div>
+          <h4 className="font-display text-lg font-semibold mb-3">Síguenos</h4>
+          <div className="flex gap-3">
+            {ABOUT_ORG.socials.instagram && (
+              <a href={ABOUT_ORG.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"
+                className="bg-primary-foreground/10 p-2.5 rounded-full hover:bg-primary-foreground/20 transition-colors">
+                <Instagram className="w-5 h-5" />
+              </a>
+            )}
+            {ABOUT_ORG.socials.facebook && (
+              <a href={ABOUT_ORG.socials.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook"
+                className="bg-primary-foreground/10 p-2.5 rounded-full hover:bg-primary-foreground/20 transition-colors">
+                <Facebook className="w-5 h-5" />
+              </a>
+            )}
+            {ABOUT_ORG.socials.youtube && (
+              <a href={ABOUT_ORG.socials.youtube} target="_blank" rel="noopener noreferrer" aria-label="YouTube"
+                className="bg-primary-foreground/10 p-2.5 rounded-full hover:bg-primary-foreground/20 transition-colors">
+                <Youtube className="w-5 h-5" />
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-primary-foreground/10 pt-6 text-center">
+        <p className="text-sm text-primary-foreground/50">{FOOTER.copyright}</p>
+      </div>
+    </div>
+  </footer>
+);
+
+export default FooterSection;