itshover · Abhijit-Jha · Dec 29, 2025 · Dec 29, 2025 · Dec 29, 2025
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,6 +7,7 @@ import Footer from "@/components/footer";
 import { CommandMenu } from "@/components/cmdk";
 import { CommandMenuProvider } from "@/components/command-menu-context";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { LINKS } from "@/constants";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -19,16 +20,16 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  metadataBase: new URL("https://itshover.com"),
+  metadataBase: new URL(LINKS.SITE_URL),
   title: {
     default: "Its Hover",
-    template: "%s | Its Hover",
+    template: "%s",
   },
   description: "Animated icons that move with intent.",
   openGraph: {
     title: "Its Hover",
     description: "Animated icons that move with intent.",
-    url: "https://itshover.com",
+    url: LINKS.SITE_URL,
     siteName: "Its Hover",
     type: "website",
     images: ["/og.png"],

diff --git a/app/robots.ts b/app/robots.ts
@@ -1,11 +1,12 @@
 import { type MetadataRoute } from "next";
+import { LINKS } from "@/constants";
 
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
       userAgent: "*",
       allow: "/",
     },
-    sitemap: "https://itshover.com/sitemap.xml",
+    sitemap: `${LINKS.SITE_URL}/sitemap.xml`,
   };
 }
diff --git a/app/sitemap.ts b/app/sitemap.ts
@@ -1,8 +1,9 @@
 import { MetadataRoute } from "next";
 import { ICON_NAMES } from "@/lib/icon-names";
+import { LINKS } from "@/constants";
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  const baseUrl = "https://itshover.com";
+  const baseUrl = LINKS.SITE_URL;
 
   // Static pages
   const staticPages: MetadataRoute.Sitemap = [

diff --git a/components/cmdk.tsx b/components/cmdk.tsx
@@ -14,6 +14,7 @@ import { ICONS } from "@/lib/icons";
 import { useRouter } from "next/navigation";
 import { MoveRight } from "lucide-react";
 import { useCommandMenu } from "./command-menu-context";
+import { LINKS } from "@/constants";
 
 export const CommandMenu = () => {
   const { isOpen, setIsOpen } = useCommandMenu();
@@ -68,17 +69,25 @@ export const CommandMenu = () => {
             <CommandEmpty>No results found.</CommandEmpty>
 
             <CommandGroup heading="Socials">
-              <CommandItem className="gap-4">
+              <CommandItem
+                className="gap-4"
+                onSelect={() => {
+                  window.open(LINKS.GITHUB, "_blank");
+                  setIsOpen(false);
+                }}
+              >
                 <MoveRight className="h-4 w-4" />
                 GitHub
               </CommandItem>
-              <CommandItem className="gap-4">
+              <CommandItem
+                className="gap-4"
+                onSelect={() => {
+                  window.open(LINKS.TWITTER, "_blank");
+                  setIsOpen(false);
+                }}
+              >
                 <MoveRight className="h-4 w-4" />X formerly Twitter
               </CommandItem>
-              <CommandItem className="gap-4">
-                <MoveRight className="h-4 w-4" />
-                LinkedIn
-              </CommandItem>
             </CommandGroup>
 
             <CommandGroup heading="Icons">

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,6 +1,7 @@
 "use client";
 import Link from "next/link";
 import { motion } from "motion/react";
+import { LINKS } from "@/constants";
 
 const Footer = () => {
   return (
@@ -16,7 +17,7 @@ const Footer = () => {
           <p className="text-muted-foreground text-center text-sm leading-loose md:text-left">
             Built by{" "}
             <Link
-              href=""
+              href={LINKS.CREATOR}
               target="_blank"
               rel="noreferrer"
               className="font-medium underline underline-offset-4"
@@ -25,7 +26,7 @@ const Footer = () => {
             </Link>
             . The source code is available on{" "}
             <Link
-              href=""
+              href={LINKS.GITHUB}
               target="_blank"
               rel="noreferrer"
               className="font-medium underline underline-offset-4"

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -9,6 +9,8 @@ import GithubIcon from "@/icons/github-icon";
 import TwitterXIcon from "@/icons/twitter-x-icon";
 import MagnifierIcon from "@/icons/magnifier-icon";
 import { useCommandMenu } from "./command-menu-context";
+import { LINKS } from "@/constants";
+import LayersIcon from "@/icons/layers-icon";
 
 const Navbar = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -26,12 +28,8 @@ const Navbar = () => {
             className="mr-10 flex items-center justify-center space-x-2 py-6 text-center text-2xl font-bold text-neutral-600 selection:bg-emerald-500 dark:text-gray-100"
             href="/"
           >
-            <div className="relative flex h-8 w-8 items-center justify-center rounded-md border border-slate-800 bg-black text-sm text-white antialiased md:h-6 md:w-6">
-              <div className="absolute inset-x-0 -top-10 h-10 w-full rounded-full bg-white/20 blur-xl"></div>
-              <div className="text-primary relative z-20 text-sm">
-                <div className="bg-primary h-4 w-4 rounded-full" />
-              </div>
-            </div>
+            {/* <Image src="/logo.png" alt="Logo" width={24} height={24} className=""/> */}
+            <LayersIcon className="text-primary" />
             <div className="flex flex-col">
               <h1 className="text-foreground font-sans">
                 <span className="text-primary">its</span>hover
@@ -60,14 +58,14 @@ const Navbar = () => {
           <Link
             target="__blank"
             className="hover:text-foreground/80 text-foreground/60 mr-3 flex items-center justify-center text-sm font-medium transition-colors"
-            href=""
+            href={LINKS.TWITTER}
           >
             <TwitterXIcon className="h-4 w-4" />
           </Link>
           <Link
             target="__blank"
             className="hover:text-foreground/80 text-foreground/60 flex items-center justify-center text-sm font-medium transition-colors"
-            href=""
+            href={LINKS.GITHUB}
           >
             <GithubIcon size={18} />
           </Link>
@@ -149,15 +147,15 @@ const Navbar = () => {
                 <Link
                   target="_blank"
                   className="hover:text-foreground/80 text-foreground/60 text-sm font-medium transition-colors"
-                  href=""
+                  href={LINKS.GITHUB}
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
                   <GithubIcon size={20} />
                 </Link>
                 <Link
                   target="_blank"
                   className="hover:text-foreground/80 text-foreground/60 text-sm font-medium transition-colors"
-                  href=""
+                  href={LINKS.TWITTER}
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
                   <TwitterXIcon size={20} />

diff --git a/constants.ts b/constants.ts
@@ -0,0 +1,6 @@
+export const LINKS = {
+  TWITTER: "https://x.com/itshoverr",
+  GITHUB: "https://github.com/itshover/itshover",
+  SITE_URL: "https://itshover.com",
+  CREATOR: "https://x.com/abhijitwt",
+} as const;
diff --git a/icons/index.ts b/icons/index.ts
@@ -96,6 +96,7 @@ import WashingMachineIcon from "./washing-machine-icon";
 import GlobeIcon from "./globe-icon";
 import HashtagIcon from "./hashtag-icon";
 import KeyframesIcon from "./keyframes-icon";
+import LayersIcon from "./layers-icon";
 import LayoutBottombarCollapseIcon from "./layout-bottombar-collapse-icon";
 import LayoutSidebarRightIcon from "./layout-sidebar-right-icon";
 import PaintIcon from "./paint-icon";
@@ -709,6 +710,11 @@ const ICON_LIST: IconType[] = [
       "trending",
     ],
   },
+  {
+    name: "layers-icon",
+    icon: LayersIcon,
+    keywords: ["layers", "stack", "blocks", "overlap", "organize", "group"],
+  },
   {
     name: "layout-bottombar-collapse-icon",
     icon: LayoutBottombarCollapseIcon,

diff --git a/icons/layers-icon.tsx b/icons/layers-icon.tsx
@@ -0,0 +1,57 @@
+import { AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LayersIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  className = "",
+}: AnimatedIconProps) => {
+  const [scope, animate] = useAnimate();
+
+  const hoverAnimation = async () => {
+    await animate(
+      ".top-block",
+      { x: -20 },
+      { duration: 0.4, ease: [0.4, 0, 0.2, 1] },
+    );
+  };
+
+  const hoverEndAnimation = async () => {
+    await animate(
+      ".top-block",
+      { x: 0 },
+      { duration: 0.4, ease: [0.4, 0, 0.2, 1] },
+    );
+  };
+
+  return (
+    <motion.svg
+      ref={scope}
+      onHoverStart={hoverAnimation}
+      onHoverEnd={hoverEndAnimation}
+      width={size}
+      height={size}
+      viewBox="0 0 120 120"
+      fill="none"
+      strokeWidth={strokeWidth}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <motion.rect
+        className="top-block"
+        x="44"
+        y="22"
+        width="56"
+        height="36"
+        rx="10"
+        fill={color}
+      />
+
+      {/* Bottom block */}
+      <rect x="20" y="62" width="64" height="40" rx="12" fill={color} />
+    </motion.svg>
+  );
+};
+
+export default LayersIcon;
diff --git a/public/logo-inverted.png b/public/logo-inverted.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/registry.json b/registry.json
@@ -955,6 +955,23 @@
         }
       ]
     },
+    {
+      "name": "layers-icon",
+      "type": "registry:ui",
+      "registryDependencies": [],
+      "dependencies": ["motion"],
+      "devDependencies": [],
+      "files": [
+        {
+          "path": "icons/layers-icon.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "icons/types.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "moon-icon",
       "type": "registry:ui",