Add GSSoC Community Social Links to Footer

frontend/src/components/Footer.jsx

@@ -1,5 +1,13 @@
-import { Link, useLocation } from 'react-router-dom';
-import { Github, MessageSquare, BookOpen, Heart } from 'lucide-react';
+import { Link, useLocation } from "react-router-dom";
+import {
+  Github,
+  MessageSquare,
+  BookOpen,
+  Heart,
+  Instagram,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
 
 export default function Footer() {
   const location = useLocation();
@@ -8,6 +16,7 @@ export default function Footer() {
   }
 
   const githubBase = "https://github.com/aryandas2911/DailyForge";
+
   const navLinks = [
     { label: "Dashboard", path: "/dashboard" },
     { label: "Tasks", path: "/tasks" },
@@ -18,11 +27,8 @@ export default function Footer() {
   return (
     <footer className="bg-[#0f2926] text-white border-t border-[#4eb7b3]/30">
       <div className="max-w-7xl mx-auto px-6 pt-16 pb-8">
-
         {/* Main Grid */}
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">
-
-
           <div className="md:col-span-4 space-y-5">
             <div>
               <h2 className="text-3xl font-extrabold tracking-tight text-[#f8fafc]">
@@ -32,7 +38,8 @@ export default function Footer() {
             </div>
 
             <p className="text-sm leading-relaxed text-[#94a3b8] max-w-xs">
-              Empowering students and professionals to forge unbreakable habits through intelligent task management.
+              Empowering students and professionals to forge unbreakable habits
+              through intelligent task management.
             </p>
 
             {/* Social Icons */}
@@ -76,39 +83,91 @@ export default function Footer() {
             </h3>
             <ul className="space-y-4 text-sm">
               <li>
-                <a href={githubBase} target="_blank" rel="noreferrer" className="flex items-center gap-2 text-[#94a3b8] hover:text-[#f8fafc] transition-colors">
+                <a
+                  href={githubBase}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center gap-2 text-[#94a3b8] hover:text-[#f8fafc] transition-colors"
+                >
                   <Github size={14} /> GitHub Repo
                 </a>
               </li>
               <li>
-                <a href={`${githubBase}/issues`} target="_blank" rel="noreferrer" className="flex items-center gap-2 text-[#94a3b8] hover:text-[#f8fafc] transition-colors">
+                <a
+                  href={`${githubBase}/issues`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center gap-2 text-[#94a3b8] hover:text-[#f8fafc] transition-colors"
+                >
                   <MessageSquare size={14} /> Issues
                 </a>
               </li>
               <li>
-                <a href={`${githubBase}/blob/main/CONTRIBUTING.md`} target="_blank" rel="noreferrer" className="flex items-center gap-2 text-[#94a3b8] hover:text-[#f8fafc] transition-colors">
+                <a
+                  href={`${githubBase}/blob/main/CONTRIBUTING.md`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center gap-2 text-[#94a3b8] hover:text-[#f8fafc] transition-colors"
+                >
                   <BookOpen size={14} /> Contributing
                 </a>
               </li>
             </ul>
           </div>
+        </div>
 
-          {/* Tech Stack */}
-          <div className="md:col-span-3">
-            <h3 className="text-xs font-bold uppercase tracking-widest text-[#4eb7b3] mb-6">
-              Built With
-            </h3>
-            <div className="flex flex-wrap gap-2">
-              {['React', 'Tailwind', 'Node.js', 'MongoDB'].map((tech) => (
-                <span
-                  key={tech}
-                  className="bg-white/5 border border-white/10 px-3 py-1 rounded-md text-[11px] font-medium text-[#6dd5c7]"
-                >
-                  {tech}
-                </span>
-              ))}
-            </div>
+        {/* Follow GSSoC */}
+        <div className="md:col-span-3">
+          <h3 className="text-xs font-bold uppercase tracking-widest text-[#4eb7b3] mb-6">
+            Follow GSSoC
+          </h3>
+
+          <div className="flex flex-wrap gap-3 mb-4">
+            <a
+              href="https://www.instagram.com/girlscriptsummerofcode/?hl=en"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Instagram"
+              className="p-2 bg-white/5 rounded-lg text-[#4eb7b3] hover:bg-[#4eb7b3] hover:text-white transition-all border border-white/10"
+            >
+              <Instagram size={18} />
+            </a>
+
+            <a
+              href="https://www.linkedin.com/company/girlscript-foundation/"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="LinkedIn"
+              className="p-2 bg-white/5 rounded-lg text-[#4eb7b3] hover:bg-[#4eb7b3] hover:text-white transition-all border border-white/10"
+            >
+              <Linkedin size={18} />
+            </a>
+
+            <a
+              href="https://x.com/girlscriptsoc"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Twitter"
+              className="p-2 bg-white/5 rounded-lg text-[#4eb7b3] hover:bg-[#4eb7b3] hover:text-white transition-all border border-white/10"
+            >
+              <Twitter size={18} />
+            </a>
+
+            <a
+              href="https://github.com/GirlScriptSummerOfCode"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="GitHub"
+              className="p-2 bg-white/5 rounded-lg text-[#4eb7b3] hover:bg-[#4eb7b3] hover:text-white transition-all border border-white/10"
+            >
+              <Github size={18} />
+            </a>
           </div>
+
+          <p className="text-sm leading-relaxed text-[#94a3b8]">
+            Connect with the GSSoC community and stay updated with events,
+            announcements, and contribution opportunities.
+          </p>
         </div>
 
         {/* Bottom Bar */}
@@ -117,12 +176,20 @@ export default function Footer() {
 
           <div className="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-full border border-white/5">
             <span>Built with</span>
-            <Heart size={14} className="text-red-400 fill-red-400 animate-pulse" />
+            <Heart
+              size={14}
+              className="text-red-400 fill-red-400 animate-pulse"
+            />
             <span>for</span>
             <span className="text-[#4eb7b3] font-bold">GSSoC 2026</span>
           </div>
+
+          <p className="mt-4 text-xs leading-relaxed text-muted">
+            Crafted using modern web technologies for performance, scalability,
+            and an exceptional user experience.
+          </p>
         </div>
       </div>
     </footer>
   );
-}
+}

frontend/src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -8,7 +8,7 @@
 }
 
 * {
-  font-family: 'Outfit', sans-serif;
+  font-family: "Outfit", sans-serif;
 }
 
 :root {
@@ -54,7 +54,6 @@ html.dark[data-theme-custom="true"] {
 
 html.dark,
 html.dark body {
-
   background-color: var(--bg);
   color: var(--text-main);
   color-scheme: dark;
@@ -134,7 +133,9 @@ html.dark body {
   }
 
   .hover-lift {
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
   }
 
   .hover-lift:hover {
@@ -165,8 +166,8 @@ input::-webkit-credentials-type-password-toggle {
     background-color 0.25s ease,
     border-color 0.25s ease,
     color 0.25s ease;
-  }
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+}
+
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -176,7 +177,7 @@ input::-webkit-credentials-type-password-toggle {
 }
 
 * {
-  font-family: 'Outfit', sans-serif;
+  font-family: "Outfit", sans-serif;
 }
 
 :root {
@@ -222,7 +223,6 @@ html.dark[data-theme-custom="true"] {
 
 html.dark,
 html.dark body {
-
   background-color: var(--bg);
   color: var(--text-main);
   color-scheme: dark;
@@ -302,7 +302,8 @@ html.dark body {
   }
 
   .hover-lift {
-    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+    transition:
+      transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
       opacity 0.3s ease-in-out,
       background-color 0.3s ease-in-out;
     will-change: transform;
@@ -339,14 +340,14 @@ input::-webkit-credentials-type-password-toggle {
     background-color 0.25s ease,
     border-color 0.25s ease,
     color 0.25s ease;
-  }
+}
 
-  footer {
+footer {
   --text-main: #f8fafc;
   --text-muted: #94a3b8;
   --border: #334155;
 }
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -356,7 +357,7 @@ input::-webkit-credentials-type-password-toggle {
 }
 
 * {
-  font-family: 'Outfit', sans-serif;
+  font-family: "Outfit", sans-serif;
 }
 
 :root {
@@ -402,7 +403,6 @@ html.dark[data-theme-custom="true"] {
 
 html.dark,
 html.dark body {
-
   background-color: var(--bg);
   color: var(--text-main);
   color-scheme: dark;
@@ -487,7 +487,8 @@ html {
   }
 
   .hover-lift {
-    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+    transition:
+      transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
       opacity 0.3s ease-in-out,
       background-color 0.3s ease-in-out;
     will-change: transform;
@@ -524,9 +525,9 @@ input::-webkit-credentials-type-password-toggle {
     background-color 0.25s ease,
     border-color 0.25s ease,
     color 0.25s ease;
-  }
+}
 
-  footer {
+footer {
   --text-main: #f8fafc;
   --text-muted: #94a3b8;
   --border: #334155;

frontend/src/utils/firebase.js

@@ -1,6 +1,8 @@
 import { initializeApp } from "firebase/app";
 import { getAuth, GoogleAuthProvider } from "firebase/auth";
 
+console.log("Firebase API Key:", import.meta.env.VITE_FIREBASE_API_KEY);
+
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,