Added footer component #57

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

frontend/src/App.tsx

@@ -1,7 +1,9 @@
+import Footer from "./components/Footer";
+
 function App() {
   return (
     <>
-      <h1 className="text-3xl font-bold underline">Hello from new OWASP Nest frontend!</h1>
+      <Footer/>
     </>
   );
 }

frontend/src/components/Footer.tsx

@@ -0,0 +1,41 @@
+import { footerSections } from '../utils/constants';
+import { Section } from '../utils/constants';
+
+export default function Footer() {
+  return (
+    <footer className="border-t bg-slate-200 dark:bg-slate-800">
+      <div className="container px-4 py-4 md:py-8 text-slate-800 dark:text-slate-200">
+        <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
+          {footerSections.map((section: Section) => (
+            <div key={section.title} className="space-y-4">
+              <h3 className="text-lg font-semibold">{section.title}</h3>
+              <ul className="space-y-2 text-sm">
+                {section.links.map((link, index) => (
+                  <li key={index}>
+                    {link.isSpan ? (
+                      <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
+                    ) : (
+                      <a
+                        className="text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+                        href={link.href}
+                      >
+                        {link.text}
+                      </a>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="border-t pt-8">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:ml-[52%]">
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              © 2024 OWASP Nest. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

frontend/src/utils/constants.ts

@@ -0,0 +1,45 @@
+export interface Link {
+    text: string;
+    href: string;
+    isSpan?: boolean;
+  }
+
+  export interface Section {
+    title: string;
+    links: Link[];
+  }
+
+  export const footerSections: Section[] = [
+    {
+      title: 'About OWASP',
+      links: [
+        { text: 'Our Mission', href: '#' },
+        { text: 'Team', href: '#' },
+        { text: 'Careers', href: '#' },
+      ],
+    },
+    {
+      title: 'Resources',
+      links: [
+        { text: 'Contribute', href: 'https://nest.owasp.dev/projects/contribute/' },
+        { text: 'Projects', href: 'https://nest.owasp.dev/projects/' },
+        { text: 'Chapters', href: 'https://nest.owasp.dev/chapters/' },
+      ],
+    },
+    {
+      title: 'Community',
+      links: [
+        { text: 'Committees', href: 'https://nest.owasp.dev/committees/' },
+        { text: 'Events', href: '#' },
+        { text: 'Forum', href: '#' },
+      ],
+    },
+    {
+      title: 'Contact',
+      links: [
+        { text: 'Locations', href: '#', isSpan: true },
+        { text: 'Support', href: '#' },
+        { text: 'Contact Us', href: 'https://owasp.org/contact/' },
+      ],
+    },
+  ];