codebase overhaul (#697)

1 files changed, 113 insertions, 121 deletions

diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index 176452cd..7c78fc57 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -1,130 +1,122 @@
-"use client";
-
-import { motion } from "motion/react";
 import Link from "next/link";
 import { RiDiscordFill, RiTwitterXLine } from "react-icons/ri";
 import { FaGithub } from "react-icons/fa6";
 import Image from "next/image";
+import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
+import { capitalizeFirstLetter } from "@/utils/string";
 
-export function Footer() {
-  return (
-    <motion.footer
-      className="bg-background border-t"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ delay: 0.8, duration: 0.8 }}
-    >
-      <div className="max-w-5xl mx-auto px-8 py-10">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-8">
-          {/* Brand Section */}
-          <div className="md:col-span-1 max-w-sm">
-            <div className="flex justify-start items-center gap-2 mb-4">
-              <Image 
-                src="/logo.svg" 
-                alt="OpenCut" 
-                width={24} 
-                height={24}
-                className="invert dark:invert-0"
-              />
-              <span className="font-bold text-lg">OpenCut</span>
-            </div>
-            <p className="text-sm md:text-left text-muted-foreground mb-5">
-              The open source video editor that gets the job done. Simple,
-              powerful, and works on any platform.
-            </p>
-            <div className="flex justify-start gap-3">
-              <Link
-                href="https://github.com/OpenCut-app/OpenCut"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <FaGithub className="h-5 w-5" />
-              </Link>
-              <Link
-                href="https://x.com/OpenCutApp"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <RiTwitterXLine className="h-5 w-5" />
-              </Link>
-              <Link
-                href="https://discord.com/invite/Mu3acKZvCp"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <RiDiscordFill className="h-5 w-5" />
-              </Link>
-            </div>
-          </div>
+type Category = "resources" | "company";
+
+interface FooterLink {
+	label: string;
+	href: string;
+}
 
-          <div className="flex gap-12 justify-start items-start py-2">
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Resources</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link
-                    href="/roadmap"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Roadmap
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="/privacy"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Privacy policy
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="/terms"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Terms of use
-                  </Link>
-                </li>
-              </ul>
-            </div>
+type CategoryLinks = Record<Category, FooterLink[]>;
+
+const links: CategoryLinks = {
+	resources: [
+		{ label: "Roadmap", href: "/roadmap" },
+		{ label: "Blog", href: "/blog" },
+		{ label: "Privacy", href: "/privacy" },
+		{ label: "Terms of use", href: "/terms" },
+	],
+	company: [
+		{ label: "Contributors", href: "/contributors" },
+		{ label: "Sponsors", href: "/sponsors" },
+		{ label: "Branding", href: "/branding" },
+		{ label: "About", href: `${SOCIAL_LINKS.github}/blob/main/README.md` },
+	],
+};
+
+export function Footer() {
+	return (
+		<footer className="bg-background border-t">
+			<div className="mx-auto max-w-5xl px-8 py-10">
+				<div className="mb-8 grid grid-cols-1 gap-12 md:grid-cols-2">
+					{/* Brand Section */}
+					<div className="max-w-sm md:col-span-1">
+						<div className="mb-4 flex items-center justify-start gap-2">
+							<Image
+								src={DEFAULT_LOGO_URL}
+								alt="OpenCut"
+								width={24}
+								height={24}
+								className="invert dark:invert-0"
+							/>
+							<span className="text-lg font-bold">OpenCut</span>
+						</div>
+						<p className="text-muted-foreground mb-5 text-sm md:text-left">
+							The privacy-first video editor that feels simple to use.
+						</p>
+						<div className="flex justify-start gap-3">
+							<Link
+								href={SOCIAL_LINKS.github}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<FaGithub className="size-5" />
+							</Link>
+							<Link
+								href={SOCIAL_LINKS.x}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<RiTwitterXLine className="size-5" />
+							</Link>
+							<Link
+								href={SOCIAL_LINKS.discord}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<RiDiscordFill className="size-5" />
+							</Link>
+						</div>
+					</div>
 
-            {/* Company Links */}
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Company</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link
-                    href="/contributors"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Contributors
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="https://github.com/OpenCut-app/OpenCut/blob/main/README.md"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    About
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+					<div className="flex items-start justify-start gap-12 py-2">
+						{(Object.keys(links) as Category[]).map((category) => (
+							<div key={category} className="flex flex-col gap-2">
+								<h3 className="text-foreground font-semibold">
+									{capitalizeFirstLetter({ string: category })}
+								</h3>
+								<ul className="space-y-2 text-sm">
+									{links[category].map((link) => (
+										<li key={link.href}>
+											<Link
+												href={link.href}
+												className="text-muted-foreground hover:text-foreground transition-colors"
+												target={
+													link.href.startsWith("http") ? "_blank" : undefined
+												}
+												rel={
+													link.href.startsWith("http")
+														? "noopener noreferrer"
+														: undefined
+												}
+											>
+												{link.label}
+											</Link>
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
+				</div>
 
-        {/* Bottom Section */}
-        <div className="pt-2 flex flex-col md:flex-row justify-between items-start gap-4">
-          <div className="flex items-center gap-4 text-sm text-muted-foreground">
-            <span>© 2025 OpenCut, All Rights Reserved</span>
-          </div>
-        </div>
-      </div>
-    </motion.footer>
-  );
+				{/* Bottom Section */}
+				<div className="flex flex-col items-start justify-between gap-4 pt-2 md:flex-row">
+					<div className="text-muted-foreground flex items-center gap-4 text-sm">
+						<span>
+							© {new Date().getFullYear()} OpenCut, All Rights Reserved
+						</span>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
 }