added footer

Author: smanzler

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.15",

package.json

@@ -8,6 +8,7 @@ import ProjectDetails from "./components/pages/project-details";
 import { useEffect } from "react";
 import Apps from "./components/pages/apps";
 import AppDetails from "./components/pages/app-details";
+import { Footer } from "./components/footer";
 
 function Root() {
   const { state } = useLocation();
@@ -27,23 +28,30 @@ function Root() {
   );
 }
 
+function RootLayout() {
+  return (
+    <div className="min-h-screen bg-background container mx-auto px-4">
+      <div className="mx-auto max-w-5xl">
+        <Header />
+        <main className="py-20">
+          <Routes>
+            <Route path="/" element={<Root />} />
+            <Route path="/projects/:id" element={<ProjectDetails />} />
+            <Route path="/apps" element={<Apps />} />
+            <Route path="/apps/:id" element={<AppDetails />} />
+          </Routes>
+        </main>
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
 function App() {
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <BrowserRouter>
-        <div className="min-h-screen bg-background">
-          <Header />
-          <main className="container mx-auto px-4">
-            <div className="mx-auto max-w-5xl">
-              <Routes>
-                <Route path="/" element={<Root />} />
-                <Route path="/projects/:id" element={<ProjectDetails />} />
-                <Route path="/apps" element={<Apps />} />
-                <Route path="/apps/:id" element={<AppDetails />} />
-              </Routes>
-            </div>
-          </main>
-        </div>
+        <RootLayout />
       </BrowserRouter>
     </ThemeProvider>
   );

src/App.tsx

@@ -0,0 +1,137 @@
+import logoImage from "@/assets/simon-icon.png";
+import { useApps } from "@/hooks/useApps";
+import { useProjects } from "@/hooks/useProjects";
+import { useLocation } from "react-router";
+import { Button } from "./ui/button";
+
+interface MenuItem {
+  title: string;
+  links: {
+    text: string;
+    url: string;
+  }[];
+}
+
+interface FooterProps {
+  tagline?: string;
+  menuItems?: MenuItem[];
+  copyright?: string;
+}
+
+const Footer = ({
+  tagline = "Full-stack developer.",
+  menuItems = [
+    {
+      title: "Portfolio",
+      links: [
+        { text: "Overview", url: "/" },
+        { text: "Projects", url: "/" },
+        { text: "About", url: "/about" },
+      ],
+    },
+    {
+      title: "Social",
+      links: [
+        { text: "GitHub", url: "https://github.com/smanzler" },
+        { text: "LinkedIn", url: "https://www.linkedin.com/in/smanzler/" },
+        { text: "Email", url: "mailto:simanzler@gmail.com" },
+      ],
+    },
+  ],
+  copyright = `© ${new Date().getFullYear()} Simon Manzler. All rights reserved.`,
+}: FooterProps) => {
+  const location = useLocation();
+  const { apps } = useApps();
+  const { projects } = useProjects();
+
+  const getBottomLinks = () => {
+    if (location.pathname.startsWith("/apps/")) {
+      const appTitle = location.pathname.split("/")[2];
+      return [
+        {
+          text: "Privacy Policy",
+          url: `/apps/${appTitle}/privacy`,
+        },
+        {
+          text: "Terms of Service",
+          url: `/apps/${appTitle}/terms`,
+        },
+      ];
+    } else if (location.pathname === "/apps") {
+      return [{ text: "Back to Home", url: "/" }];
+    }
+    return [];
+  };
+
+  const bottomLinks = getBottomLinks();
+
+  const footerMenuItems = [
+    ...menuItems,
+    {
+      title: "Projects",
+      links: projects.map((project) => ({
+        text: project.title,
+        url: `/projects/${project.title}`,
+      })),
+    },
+    {
+      title: "Apps",
+      links: apps.map((app) => ({
+        text: app.title,
+        url: `/apps/${app.title}`,
+      })),
+    },
+  ];
+
+  return (
+    <section className="py-32 px-6">
+      <div className="container">
+        <footer>
+          <div className="grid grid-cols-2 gap-8 lg:grid-cols-6">
+            <div className="col-span-2 mb-8 lg:mb-0">
+              <div className="flex items-center gap-2 lg:justify-start">
+                <img
+                  src={logoImage}
+                  alt="Simon Manzler"
+                  title="Simon Manzler"
+                  className="h-10"
+                />
+              </div>
+              <p className="mt-4 font-bold">{tagline}</p>
+            </div>
+            {footerMenuItems.map((section, sectionIdx) => (
+              <div key={sectionIdx} className="lg:text-right">
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4">
+                  {section.links.map((link, linkIdx) => (
+                    <li key={linkIdx}>
+                      <Button
+                        className="p-0 h-auto text-muted-foreground hover:text-primary font-medium"
+                        variant="link"
+                        asChild
+                      >
+                        <a href={link.url}>{link.text}</a>
+                      </Button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="text-muted-foreground mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium md:flex-row md:items-center">
+            <p>{copyright}</p>
+            <ul className="flex gap-4">
+              {bottomLinks.map((link, linkIdx) => (
+                <li key={linkIdx} className="hover:text-primary underline">
+                  <a href={link.url}>{link.text}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer };