feat: Add Discord link to footer

1 files changed, 140 insertions, 132 deletions

diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index 43a9db0e..81505d4a 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -1,132 +1,140 @@
-"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/fetch-github-stars";

-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 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 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="/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>

-

-            {/* 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>

-  );

-}

+"use client";
+
+import { motion } from "motion/react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { RiDiscordFill, RiGithubLine, RiTwitterXLine } from "react-icons/ri";
+import { getStars } from "@/lib/fetch-github-stars";
+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 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 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>
+              <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>
+
+          <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="/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>
+
+            {/* 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>
+  );
+}