feat: dedicated footer

apps/web/src/app/page.tsx

@@ -1,5 +1,6 @@
 import { Hero } from "@/components/landing/hero";
 import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
 import { getWaitlistCount } from "@/lib/waitlist";
 import Image from "next/image";
 
@@ -20,6 +21,7 @@ export default async function Home() {
       />
       <Header />
       <Hero signupCount={signupCount} />
+      <Footer />
     </div>
   );
 }

apps/web/src/components/footer.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { motion } from "motion/react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { RiGithubLine, RiTwitterXLine } from "react-icons/ri";
+import { getStars } from "@/lib/fetchGhStars";
+import Image from "next/image";
+
+export function Footer() {
+  const [star, setStar] = useState<string>();
+
+  useEffect(() => {
+    const fetchStars = async () => {
+      try {
+        const data = await getStars();
+        setStar(data);
+      } catch (err) {
+        console.error("Failed to fetch GitHub stars", err);
+      }
+    };
+
+    fetchStars();
+  }, []);
+
+  return (
+    <motion.footer
+      className="bg-background/80 backdrop-blur-sm border mt-16 m-6 rounded-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.8, duration: 0.8 }}
+    >
+      <div className="max-w-5xl mx-auto px-4 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 items-center gap-2 mb-4">
+              <Image src="/logo.svg" alt="OpenCut" width={24} height={24} />
+              <span className="font-bold text-lg">OpenCut</span>
+            </div>
+            <p className="text-sm 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 gap-3">
+              <Link
+                href="https://github.com/OpenCut-app/OpenCut"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <RiGithubLine 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>
+            </div>
+          </div>
+
+          <div className="flex gap-12 justify-end 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="/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>
+
+            {/* 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>
+
+        {/* Bottom Section */}
+        <div className="pt-2 flex flex-col md:flex-row justify-between items-center 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>
+  );
+}

apps/web/src/components/landing/hero.tsx

@@ -5,35 +5,20 @@ import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { ArrowRight } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
-import { getStars } from "@/lib/fetchGhStars";
+
 import Image from "next/image";
-import { RiGithubLine, RiTwitterXLine } from "react-icons/ri";
 
 interface HeroProps {
   signupCount: number;
 }
 
 export function Hero({ signupCount }: HeroProps) {
-  const [star, setStar] = useState<string>();
   const [email, setEmail] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { toast } = useToast();
 
-  useEffect(() => {
-    const fetchStars = async () => {
-      try {
-        const data = await getStars();
-        setStar(data);
-      } catch (err) {
-        console.error("Failed to fetch GitHub stars", err);
-      }
-    };
-
-    fetchStars();
-  }, []);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -163,35 +148,6 @@ export function Hero({ signupCount }: HeroProps) {
           </motion.div>
         )}
       </motion.div>
-
-      <motion.div
-        className="mb-8 text-center text-sm text-muted-foreground/60 flex flex-row gap-2 items-center justify-center"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.8, duration: 0.8 }}
-      >
-        Currently in beta • Open source on{" "}
-        <Link
-          href="https://github.com/OpenCut-app/OpenCut"
-          className="text-foreground flex items-center gap-1"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Github
-          <RiGithubLine className="h-5 w-5 " />
-          {star}+
-        </Link>
-        • Follow us on
-        <Link
-          href="https://x.com/OpenCutApp"
-          className="text-foreground flex items-center gap-1"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Twitter
-          <RiTwitterXLine className="h-5 w-5 " />
-        </Link>
-      </motion.div>
     </div>
   );
 }

apps/web/tailwind.config.ts

@@ -69,7 +69,7 @@ export default {
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        sm: "calc(var(--radius) - 6px)",
       },
       keyframes: {
         "accordion-down": {