From a8fb7b772ffdafd3f4b7535df4376cc2bd8f8671 Mon Sep 17 00:00:00 2001
From: Shoaib1M <shoaibmunavary@gmail.com>
Date: Mon, 19 Jan 2026 01:47:06 +0530
Subject: [PATCH] updating the footer with the map

---
 src/app/components/Footer.jsx | 72 ++++++++++++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx
index ae11cba..32f5e63 100644
--- a/src/app/components/Footer.jsx
+++ b/src/app/components/Footer.jsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Linkedin, Instagram, Mail, Phone } from "lucide-react";
+import { Linkedin, Instagram, Mail, Phone, MapPin } from "lucide-react";
 
 const Glow = ({ className = "" }) => (
   <div
@@ -13,7 +13,10 @@ export default function Footer() {
   const year = new Date().getFullYear();
 
   return (
-    <footer id="contact" className="relative z-30 w-full overflow-hidden bg-[#0b1117] text-slate-200 border-t border-cyan-500/20 font-sans">
+    <footer
+      id="contact"
+      className="relative z-30 w-full overflow-hidden bg-[#0b1117] text-slate-200 border-t border-cyan-500/20 font-sans"
+    >
       <Glow />
 
       <div className="relative w-full max-w-7xl mx-auto px-4 py-16 sm:px-8 flex flex-col items-center">
@@ -85,6 +88,71 @@ export default function Footer() {
           </div>
         </div>
 
+        {/* MAP SECTION */}
+        <div className="w-full max-w-5xl mb-16">
+          <div className="group relative w-full p-1 rounded-2xl bg-gradient-to-b from-white/10 to-white/5 hover:from-cyan-500/50 hover:to-purple-600/50 transition-all duration-500">
+            <div className="relative rounded-xl bg-[#0b1117]/90 backdrop-blur-xl border border-white/10 group-hover:border-cyan-500/30 transition-all duration-300 overflow-hidden">
+              <div className="absolute inset-0 bg-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+              <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 p-6 md:p-10 items-center">
+                {/* Left Text */}
+                <div className="text-left">
+                  <div className="flex items-center gap-2 mb-4">
+                    <div className="p-2 rounded-lg bg-white/5 border border-white/10 group-hover:border-cyan-400/40 transition-all duration-300">
+                      <MapPin className="w-5 h-5 text-cyan-300 group-hover:text-cyan-200 transition-colors" />
+                    </div>
+                    <h3 className="text-2xl md:text-3xl font-extrabold font-[Orbitron] tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 via-blue-300 to-purple-300 drop-shadow-[0_0_12px_rgba(34,211,238,0.25)]">
+                      Our Location
+                    </h3>
+                  </div>
+
+                  <p className="text-sm md:text-base text-slate-300 leading-relaxed">
+                    We are based at{" "}
+                    <span className="text-cyan-200 font-semibold">
+                      National Institute of Technology, Rourkela
+                    </span>
+                    . Visit us anytime for workshops, events, and ML sessions.
+                  </p>
+
+                  <div className="mt-6 flex flex-wrap gap-3">
+                    <a
+                      href="https://www.google.com/maps/place/National+Institute+of+Technology,+Rourkela"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="inline-flex items-center justify-center rounded-lg bg-cyan-950/50 border border-cyan-500/20 px-4 py-3 text-sm text-cyan-300 hover:bg-cyan-500/20 hover:border-cyan-400/50 hover:text-white hover:shadow-[0_0_15px_rgba(34,211,238,0.2)] transition-all duration-300"
+                    >
+                      Open in Google Maps
+                    </a>
+
+                    <div className="inline-flex items-center justify-center rounded-lg bg-white/5 border border-white/10 px-4 py-3 text-sm text-slate-400 group-hover:text-slate-300 transition-colors">
+                      NIT Rourkela, Odisha
+                    </div>
+                  </div>
+                </div>
+
+                {/* Right Map */}
+                <div className="w-full">
+                  <div className="relative rounded-2xl overflow-hidden border border-white/10 group-hover:border-cyan-400/30 transition-all duration-300 shadow-[0_0_25px_rgba(34,211,238,0.08)]">
+                    <iframe
+                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3692.6580075931847!2d84.89836787529116!3d22.253050979720562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a201f72bbd561c3%3A0xab5c70e76a7b5a!2sNational%20Institute%20of%20Technology%2C%20Rourkela!5e0!3m2!1sen!2sin!4v1768758104936!5m2!1sen!2sin"
+                      className="w-full h-[260px] md:h-[320px] rounded-2xl"
+                      style={{ border: 0 }}
+                      allowFullScreen=""
+                      loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
+                      title="NIT Rourkela Location"
+                    ></iframe>
+                  </div>
+
+                  <p className="mt-3 text-xs text-slate-500 text-center font-[Orbitron] tracking-wider">
+                    ML4E • NIT Rourkela Campus Map
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div className="w-full max-w-4xl flex items-center gap-4 mb-8">
           <div className="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent"></div>
           <span className="text-xs font-[Orbitron] tracking-[0.2em] text-cyan-500/60 uppercase">