From b4ef87c17460354940c60291b60c5047360bcaf0 Mon Sep 17 00:00:00 2001
From: Deepak Prajapati <deepakprajapatiproplus@gmail.com>
Date: Fri, 9 Jan 2026 23:02:58 +0530
Subject: [PATCH] Add global footer component with navigation links and social
 media

---
 frontend/src/components/App.js            |  2 +
 frontend/src/components/common/Footer.js  | 95 ++++++++++++++++++++++
 frontend/src/styles/main.scss             |  1 +
 frontend/src/styles/partials/_footer.scss | 96 +++++++++++++++++++++++
 frontend/src/styles/partials/_theme.scss  |  8 +-
 5 files changed, 201 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/common/Footer.js
 create mode 100644 frontend/src/styles/partials/_footer.scss

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index c3186be8..869b02d2 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -7,6 +7,7 @@ import ProjectPageComponent from "./projects";
 import AnalyticsComponent from "./analytics";
 import PageNotFoundHandler from "./PageNotFoundHandler";
 import Navbar from "./navbar";
+import Footer from "./common/Footer";
 
 const App = props => {
   return (
@@ -23,6 +24,7 @@ const App = props => {
           <Route component={PageNotFoundHandler} />
         </Switch>
       </main>
+      <Footer />
     </div>
   );
 };
diff --git a/frontend/src/components/common/Footer.js b/frontend/src/components/common/Footer.js
new file mode 100644
index 00000000..98378761
--- /dev/null
+++ b/frontend/src/components/common/Footer.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Footer = () => {
+  return (
+    <footer className="cv-footer">
+      <div className="cv-footer-content cv-container">
+        <div className="cv-footer-section">
+          <h3 className="cv-footer-title">About Us</h3>
+          <p className="cv-footer-desc">
+            CloudCV is an open-source platform for building and deploying 
+            computer vision applications.
+          </p>
+        </div>
+
+        <div className="cv-footer-section">
+          <h3 className="cv-footer-title">Quick Links</h3>
+          <ul className="cv-footer-list">
+            <li><Link to="/">Home</Link></li>
+            <li><Link to="/team">Team</Link></li>
+            <li><Link to="/projects">Projects</Link></li>
+            <li><Link to="/contribute">Contribute</Link></li>
+            <li><Link to="/contact-us">Contact Us</Link></li>
+          </ul>
+        </div>
+
+        <div className="cv-footer-section">
+          <h3 className="cv-footer-title">Support</h3>
+          <ul className="cv-footer-list">
+            <li>
+              <a href="http://gsoc.cloudcv.org" target="_blank" rel="noopener noreferrer">
+                GSoC
+              </a>
+            </li>
+            <li>
+              <a href="http://gci.cloudcv.org" target="_blank" rel="noopener noreferrer">
+                GCI
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/Cloud-CV" target="_blank" rel="noopener noreferrer">
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a href="https://gitter.im/Cloud-CV" target="_blank" rel="noopener noreferrer">
+                Gitter
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="cv-footer-section">
+          <h3 className="cv-footer-title">Legal</h3>
+          <ul className="cv-footer-list">
+            <li><Link to="/privacy-policy">Privacy Policy</Link></li>
+            <li><Link to="/terms-of-service">Terms of Service</Link></li>
+            <li>
+              <a href="/LICENSE" target="_blank" rel="noopener noreferrer">
+                License
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="cv-footer-bottom">
+        <div className="cv-footer-social cv-container">
+          <a 
+            href="https://github.com/Cloud-CV" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="cv-footer-social-item"
+          >
+            <img src={require("../../images/github_logo.png")} alt="GitHub" />
+          </a>
+          <a 
+            href="https://gitter.im/Cloud-CV" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="cv-footer-social-item"
+          >
+            <img src={require("../../images/gitter_logo.png")} alt="Gitter" />
+          </a>
+        </div>
+        <div className="cv-footer-copyright cv-container">
+          <p>&copy; {new Date().getFullYear()} CloudCV. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
+
diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
index a851e51f..b0911cce 100644
--- a/frontend/src/styles/main.scss
+++ b/frontend/src/styles/main.scss
@@ -13,3 +13,4 @@
 @import 'partials/team';
 @import 'partials/tabs';
 @import 'partials/projects';
+@import 'partials/footer';
diff --git a/frontend/src/styles/partials/_footer.scss b/frontend/src/styles/partials/_footer.scss
new file mode 100644
index 00000000..e652841a
--- /dev/null
+++ b/frontend/src/styles/partials/_footer.scss
@@ -0,0 +1,96 @@
+/*****FOOTER STYLES*****/
+
+.cv-footer {
+  background-color: $secondary-bg-color;
+  color: $white;
+  margin-top: auto;
+  width: 100%;
+
+  .cv-footer-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 4 * $gutter-width;
+    padding: 6 * $gutter-width $gutter-width;
+
+    @media #{$bp-sm} {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media #{$bp-md} {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  .cv-footer-section {
+    @include font-size(1.4, 1.6);
+
+    .cv-footer-title {
+      @include font-size(1.8, 2.2);
+      color: $white;
+      font-family: $heading-font-family;
+      margin-bottom: 2 * $gutter-width;
+      font-weight: 500;
+    }
+
+    .cv-footer-desc {
+      color: rgba($white, 0.8);
+      margin: 0;
+    }
+
+    .cv-footer-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        margin-bottom: $gutter-width;
+
+        a {
+          color: rgba($white, 0.8);
+          text-decoration: none;
+          transition: color 0.3s ease;
+
+          &:hover {
+            color: $secondary-color;
+          }
+        }
+      }
+    }
+  }
+
+  .cv-footer-bottom {
+    border-top: 1px solid rgba($white, 0.1);
+    padding: 3 * $gutter-width 0;
+
+    .cv-footer-social {
+      display: flex;
+      justify-content: center;
+      gap: 3 * $gutter-width;
+      margin-bottom: 2 * $gutter-width;
+
+      .cv-footer-social-item {
+        img {
+          width: 3 * $gutter-width;
+          height: 3 * $gutter-width;
+          filter: brightness(0) invert(1);
+          transition: opacity 0.3s ease;
+        }
+
+        &:hover img {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    .cv-footer-copyright {
+      text-align: center;
+      @include font-size(1.2, 1.6);
+      color: rgba($white, 0.6);
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
+
diff --git a/frontend/src/styles/partials/_theme.scss b/frontend/src/styles/partials/_theme.scss
index d870c2df..0a0427d5 100644
--- a/frontend/src/styles/partials/_theme.scss
+++ b/frontend/src/styles/partials/_theme.scss
@@ -24,7 +24,13 @@ body {
 }
 
 #app,.cv-root-container {
-  height: 100%
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cv-main {
+  flex: 1;
 }
 
 h1, h2, h3, h4, h5, h6 {