feat: announcement

src/components/Common/Announcement.tsx

@@ -0,0 +1,33 @@
+import { BOT_GITHUB_REPO_URL } from "@/utils/links";
+import { FC } from "react";
+import { MdTipsAndUpdates } from "react-icons/md";
+
+interface AnnouncementProps {
+    show?: boolean;
+}
+
+const Announcement: FC<AnnouncementProps> = ({ show = false }) => {
+    if (!show) {
+        return <></>;
+    }
+
+    return (
+        <div className="z-[100000] block bg-[#000]">
+            <div className="bg-[linear-gradient(to_right,#000,rgba(0,123,255,0.3))] py-2">
+                <p className="text-center gradient-text font-bold">
+                    <MdTipsAndUpdates
+                        className="inline mr-2 text-[#007bff]"
+                        size={20}
+                    />{" "}
+                    We&rsquo;re celebrating 2,000 commits in{" "}
+                    <a className="link" href={BOT_GITHUB_REPO_URL}>
+                        SudoBot&rsquo;s GitHub Repository
+                    </a>
+                    !
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default Announcement;

src/components/Common/Navbar.tsx

@@ -1,21 +1,21 @@
 /*
-* This file is part of SudoBot Dashboard.
-*
-* Copyright (C) 2021-2023 OSN Developers.
-*
-* SudoBot Dashboard is free software; you can redistribute it and/or modify it
-* under the terms of the GNU Affero General Public License as published by
-* the Free Software Foundation, either version 3 of the License, or
-* (at your option) any later version.
-*
-* SudoBot Dashboard is distributed in the hope that it will be useful, but
-* WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-* GNU Affero General Public License for more details.
-*
-* You should have received a copy of the GNU Affero General Public License
-* along with SudoBot Dashboard. If not, see <https://www.gnu.org/licenses/>.
-*/
+ * This file is part of SudoBot Dashboard.
+ *
+ * Copyright (C) 2021-2023 OSN Developers.
+ *
+ * SudoBot Dashboard is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * SudoBot Dashboard is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with SudoBot Dashboard. If not, see <https://www.gnu.org/licenses/>.
+ */
 
 "use client";
 
@@ -38,6 +38,7 @@ import { MdMenu } from "react-icons/md";
 import logo from "../../images/logo.png";
 import GuildSwitcher from "../Dashboard/GuildSwitcher";
 import Link from "../Router/Link";
+import Announcement from "./Announcement";
 import MobileNavbar from "./MobileNavbar";
 import Profile from "./Profile";
 
@@ -56,6 +57,8 @@ const Navbar: FC = () => {
 
     return (
         <div>
+            {pathname === "/" && <Announcement show={true} />}
+
             <NextUINavbar
                 shouldHideOnScroll
                 isBordered
@@ -155,7 +158,6 @@ const Navbar: FC = () => {
                 )}
             </NavbarMenu> */}
             </NextUINavbar>
-
             <MobileNavbar isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
         </div>
     );

src/components/Home/Top.tsx

@@ -18,7 +18,6 @@
  */
 
 import { FC } from "react";
-import styles from "../../styles/Top.module.css";
 import Shield from "../Images/Shield";
 import HomeButtons from "./HomeButtons";
 
@@ -30,13 +29,12 @@ const Top: FC = () => {
                 <div className="z-[10]">
                     <h1 className="block z-10 [line-height:2rem] md:[line-height:3.2rem] [font-size:2rem] md:text-5xl lg:text-6xl xl:text-7xl font-light md:font-bold text-center md:text-left">
                         The ultimate{" "}
-                        <span className={styles.gradientText}>Discord Bot</span>
-                        .
+                        <span className="gradient-text">Discord Bot</span>.
                         <span className="hidden md:inline">
                             <br />
                             <span className="block pt-8"></span>
                             With every{" "}
-                            <span className={styles.gradientText}>
+                            <span className="gradient-text">
                                 moderation tool
                             </span>{" "}
                             you&rsquo;ll ever need.
@@ -46,7 +44,7 @@ const Top: FC = () => {
                     <div className="h-[5px] w-[50%] md:w-[20%] bg-[linear-gradient(45deg,#007bff,#19dafa)] rounded-lg mt-8 mx-auto md:mx-0"></div>
 
                     <h1 className="block z-10 pt-8 [line-height:2rem] md:[line-height:3.2rem] [font-size:3rem] md:text-5xl lg:text-6xl xl:text-7xl font-light md:font-bold text-center md:text-left">
-                        <span className={styles.gradientText}>SudoBot.</span>
+                        <span className="gradient-text">SudoBot.</span>
                     </h1>
 
                     <br />

src/styles/globals.css

@@ -39,3 +39,10 @@ body {
     color: #036bd9;
     text-decoration: underline;
 }
+
+.gradient-text {
+    background: linear-gradient(45deg, #19dafa, #007bff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}