Merge pull request #138 from afsar-dev/dev

Dev

Author: afsar-dev

public/r/rocket-footer.json

@@ -17,7 +17,7 @@
     },
     {
       "path": "./src/components/nurui/rocket-footer.tsx",
-      "content": "\"use client\";\nimport NuruiLogo from \"@/components/nurui/nurui-logo\";\nimport RocketScrollToTop from \"@/components/nurui/rocket-scroll-to-top\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { IoLocationOutline } from \"react-icons/io5\";\nimport { MdOutlineMail } from \"react-icons/md\";\nimport \"./styles/footer.css\";\n\nconst navigationActive = (href: string = \"/\", pathName: string) => {\n  return pathName === href;\n};\n\nconst RocketFooter = () => {\n  const pathName = usePathname();\n\n  return (\n    <div className=\"bg-[#fff] dark:bg-transparent border-t border-[#393a3d] w-full text-[#fff] mt-auto rounded-tl-[50px] lg:rounded-tl-[80px] xl:rounded-tl-[110px] rocket-animation\">\n      <RocketScrollToTop className=\"bg-[#010313] max-w-24 mx-auto rounded-full -mt-16 hidden md:block\" />\n\n      <div className=\"container\">\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-4 xl:flex flex-col md:flex-row 2xl:justify-between gap-10 xl:gap-14 2xl:gap-24 py-7 xl:py-16 pl-1 xl:pl-0\">\n          <div className=\"space-y-3 lg:space-y-4 xl:space-y-6 max-w-80 col-span-full\">\n            <Link\n              href=\"/\"\n              className={`text-[#3ca2fa] font-black text-3xl flex items-center gap-1`}\n            >\n              <NuruiLogo />\n              <span>Nur/ui</span>\n            </Link>\n            <p className=\"text-[#fff]\">\n              Beautifully crafted, accessible components built with Tailwind CSS\n              perfect for modern developers and creative teams.\n            </p>\n          </div>\n\n          <nav className=\"space-y-4 max-w-80 flex flex-col text-[#fff]\">\n            <h6 className=\"font-semibold text-lg\">Products</h6>\n            <a\n              href=\"https://nurui.vercel.app\"\n              target=\"_blank\"\n              className=\"cursor-pointer\"\n            >\n              Nurui\n            </a>\n          </nav>\n\n          <nav className=\"space-y-4 max-w-80 flex flex-col text-[#fff]\">\n            <h6 className=\"font-semibold text-lg\">Company</h6>\n            <a\n              href=\"https://nurui.vercel.app/about-us\"\n              className=\"cursor-pointer\"\n            >\n              About\n            </a>\n            <a\n              href=\"https://nurui.vercel.app/playground\"\n              className=\"cursor-pointer\"\n            >\n              Playground\n            </a>\n          </nav>\n\n          <nav className=\"space-y-4 max-w-80 flex flex-col text-[#fff]\">\n            <h6 className=\"font-semibold text-lg\">Explore</h6>\n            <a\n              href=\"https://nurui.vercel.app/docs/introduction\"\n              className=\"cursor-pointer\"\n            >\n              Introduction\n            </a>\n            <a\n              href=\"https://nurui.vercel.app/docs/installation\"\n              className=\"cursor-pointer\"\n            >\n              Documentation\n            </a>\n            <a\n              href=\"https://nurui.vercel.app/docs/components\"\n              className=\"cursor-pointer\"\n            >\n              Components\n            </a>\n          </nav>\n\n          <nav className=\"space-y-4 max-w-80 flex flex-col text-[#fff]\">\n            <h6 className=\"font-semibold text-lg\">Contact</h6>\n            <a className=\"flex items-start gap-2.5 max-w-48\">\n              <IoLocationOutline className=\"flex-shrink-0\" />\n              Sylhet, Bangladesh\n            </a>\n            <a className=\"flex gap-2.5 items-center cursor-pointer\">\n              <MdOutlineMail className=\"flex-shrink-0\" /> [email protected]\n            </a>\n          </nav>\n        </div>\n\n        <div className=\"border-t border-[#393a3d] border-opacity-20 p-5 flex items-center justify-center lg:justify-between\">\n          <div className=\"hidden lg:flex flex-wrap items-center justify-between gap-4\">\n            {navigation.map((data, i) => (\n              <Link\n                key={data?.id}\n                href={data?.url}\n                className={`${\n                  navigation?.length === i + 1\n                    ? \"\"\n                    : \"border-r border-[#736f7f]\"\n                } pr-4 font-semibold ${\n                  navigationActive(data?.url, pathName)\n                    ? \"text-[#3ca2fa] font-bold\"\n                    : \"text-[#6a5f77]\"\n                }`}\n              >\n                {data?.name}\n              </Link>\n            ))}\n          </div>\n\n          <p className=\"text-[#6a5f77]\">\n            Created by{\" \"}\n            <a\n              href=\"https://github.com/afsar-dev\"\n              target=\"_blank\"\n              className=\"text-[#3ca2fa] border-b border-[#3ca2fa] font-semibold\"\n            >\n              Md Afsar Mahmud\n            </a>{\" \"}\n            © {new Date().getFullYear()}. All rights reserved.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default RocketFooter;\n\nconst navigation = [\n  { id: 1, name: \"Home\", url: \"/\" },\n  { id: 2, name: \"Docs\", url: \"/docs/installation\" },\n  { id: 3, name: \"Components\", url: \"/docs/components\" },\n  { id: 4, name: \"About\", url: \"/about-us\" },\n  { id: 5, name: \"Playground\", url: \"/playground\" },\n];\n",
+      "content": "\"use client\";\n\nimport NuruiLogo from \"@/components/nurui/nurui-logo\";\nimport RocketScrollToTop from \"@/components/nurui/rocket-scroll-to-top\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { IoLocationOutline } from \"react-icons/io5\";\nimport { MdOutlineMail } from \"react-icons/md\";\nimport \"./styles/footer.css\";\n\nconst FOOTER_SECTIONS = [\n  {\n    title: \"Products\",\n    items: [\n      { label: \"Nurui\", url: \"https://nurui.vercel.app\", external: true },\n    ],\n  },\n  {\n    title: \"Company\",\n    items: [\n      { label: \"About\", url: \"https://nurui.vercel.app/about-us\" },\n      { label: \"Playground\", url: \"https://nurui.vercel.app/playground\" },\n    ],\n  },\n  {\n    title: \"Explore\",\n    items: [\n      {\n        label: \"Introduction\",\n        url: \"https://nurui.vercel.app/docs/introduction\",\n      },\n      {\n        label: \"Documentation\",\n        url: \"https://nurui.vercel.app/docs/installation\",\n      },\n      { label: \"Components\", url: \"https://nurui.vercel.app/docs/components\" },\n    ],\n  },\n];\n\nconst navigation = [\n  { id: 1, name: \"Home\", url: \"/\" },\n  { id: 2, name: \"Docs\", url: \"/docs/installation\" },\n  { id: 3, name: \"Components\", url: \"/docs/components\" },\n  { id: 4, name: \"About\", url: \"/about-us\" },\n  { id: 5, name: \"Playground\", url: \"/playground\" },\n];\n\nconst RocketFooter = () => {\n  const pathName = usePathname();\n\n  return (\n    <div className=\"bg-[#fff] dark:bg-transparent border-t border-[#393a3d] w-full text-[#fff] mt-auto rounded-tl-[50px] lg:rounded-tl-[80px] xl:rounded-tl-[110px] rocket-animation\">\n      <RocketScrollToTop className=\"bg-[#f7f7f7] dark:bg-[#010313] max-w-24 mx-auto rounded-full -mt-16 hidden md:block\" />\n\n      <div className=\"container\">\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-4 xl:flex flex-col md:flex-row 2xl:justify-between gap-10 xl:gap-14 2xl:gap-24 py-7 xl:py-16 pl-1 xl:pl-0\">\n          {/* Logo & description */}\n          <div className=\"space-y-3 max-w-80 col-span-full\">\n            <Link\n              href=\"/\"\n              className=\"text-[#3ca2fa] font-black text-3xl flex items-center gap-1\"\n            >\n              <NuruiLogo />\n              <span>Nur/ui</span>\n            </Link>\n            <p className=\"text-black dark:text-[#fff]\">\n              Beautifully crafted, accessible components built with Tailwind CSS\n              perfect for modern developers and creative teams.\n            </p>\n          </div>\n\n          {/* Dynamic Footer Nav Sections */}\n          {FOOTER_SECTIONS.map((section) => (\n            <nav\n              key={section.title}\n              className=\"space-y-4 max-w-80 flex flex-col text-black dark:text-[#fff]\"\n            >\n              <h6 className=\"font-semibold text-lg text-[#3ca2fa]\">\n                {section.title}\n              </h6>\n\n              {section.items.map((item) => (\n                <a\n                  key={item.label}\n                  href={item.url}\n                  target={\"_blank\"}\n                  className=\"cursor-pointer hover:text-[#3ca2fa]\"\n                >\n                  {item.label}\n                </a>\n              ))}\n            </nav>\n          ))}\n\n          {/* Contact */}\n          <nav className=\"space-y-4 max-w-80 flex flex-col text-black dark:text-[#fff]\">\n            <h6 className=\"font-semibold text-lg\">Contact</h6>\n            <a className=\"flex items-start gap-2.5 max-w-48\">\n              <IoLocationOutline className=\"flex-shrink-0\" />\n              Sylhet, Bangladesh\n            </a>\n            <a className=\"flex gap-2.5 items-center cursor-pointer\">\n              <MdOutlineMail className=\"flex-shrink-0\" /> [email protected]\n            </a>\n          </nav>\n        </div>\n\n        {/* Bottom Navigation */}\n        <div className=\"border-t border-[#393a3d] border-opacity-20 p-5 flex items-center justify-center lg:justify-between\">\n          <div className=\"hidden lg:flex flex-wrap items-center gap-4\">\n            {navigation.map((item, i) => (\n              <Link\n                key={item.id}\n                href={item.url}\n                className={`\n                  pr-4 font-semibold\n                  ${i !== navigation.length - 1 ? \"border-r border-[#736f7f]\" : \"\"}\n                  ${pathName === item.url ? \"text-[#3ca2fa] font-bold\" : \"text-[#6a5f77]\"}\n                `}\n              >\n                {item.name}\n              </Link>\n            ))}\n          </div>\n\n          <p className=\"text-[#6a5f77]\">\n            Created by{\" \"}\n            <a\n              href=\"https://github.com/afsar-dev\"\n              target=\"_blank\"\n              className=\"text-[#3ca2fa] border-b border-[#3ca2fa] font-semibold\"\n            >\n              Md Afsar Mahmud\n            </a>{\" \"}\n            © {new Date().getFullYear()}. All rights reserved.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default RocketFooter;\n",
       "type": "registry:component"
     },
     {

src/components/common/FullScreenPreview.tsx

@@ -1,10 +1,9 @@
 "use client";
-import { Fullscreen } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import React from "react";
 import { siteLink } from "@/config/site";
 import { cn } from "@/lib/utils";
 import IClassName from "@/types/common.type";
+import { Fullscreen } from "lucide-react";
 import { usePathname } from "next/navigation";
 
 const FullScreenPreview = ({
@@ -20,7 +19,7 @@ const FullScreenPreview = ({
       aria-label="Full Screen Preview"
       asChild
       className={cn(
-        "z-40 text-[var(--primary-colo)] bg-[var(--primary-color)] rounded-lg shadow-none px-2.5",
+        "z-40 text-white bg-[var(--primary-color)] rounded-lg shadow-none px-2.5",
         className,
       )}
     >

src/components/layout/Footer.tsx

@@ -4,17 +4,23 @@ import Nurui from "@/components/common/Nurui";
 import RocketScrollToTop from "@/components/nurui/rocket-scroll-to-top";
 import { navigationActive } from "@/utils/navigationActive";
 import { usePathname } from "next/navigation";
-import { IoLocationOutline } from "react-icons/io5";
-import { MdOutlineMail } from "react-icons/md";
+import { IconType } from "react-icons/lib";
 import "../../styles/footer.css";
 
+type FooterLink = {
+  text: string;
+  url: string;
+  external?: boolean;
+  icon?: IconType;
+};
+
 const Footer = () => {
   const pathName = usePathname();
   if (pathName.includes("docs") || pathName.includes("preview")) return null;
 
   return (
     <div className="bg-[var(--white-color)] dark:bg-transparent border-t border-[var(--border-color)] w-full text-[var(--text-primary-color)] mt-auto rounded-tl-[50px] lg:rounded-tl-[80px] xl:rounded-tl-[110px] rocket-animation">
-      <RocketScrollToTop className=" bg-[var(--background-color)] max-w-24 mx-auto  rounded-full -mt-16 hidden md:block" />
+      <RocketScrollToTop className="bg-[var(--background-color)] max-w-24 mx-auto  rounded-full -mt-16 hidden md:block" />
       <div className="container">
         <div className=" grid md:grid-cols-2 lg:grid-cols-4 xl:flex flex-col md:flex-row 2xl:justify-between gap-10 xl:gap-14 2xl:gap-24 py-7 xl:py-16 pl-1 xl:pl-0">
           <div className="space-y-3 lg:space-y-4 xl:space-y-6 max-w-80 col-span-full">
@@ -25,65 +31,27 @@ const Footer = () => {
             </p>
           </div>
 
-          <nav className="space-y-4 max-w-80 flex flex-col">
-            <h6 className="font-semibold text-lg">Products</h6>
-            <a
-              href="https://nurui.vercel.app"
-              target="_blank"
-              className="cursor-pointer"
-            >
-              Nurui
-            </a>
-          </nav>
-
-          <nav className="space-y-4 max-w-80 flex flex-col">
-            <h6 className="font-semibold text-lg">Company</h6>
-            <a
-              href="https://nurui.vercel.app/about-us"
-              className="cursor-pointer"
-            >
-              About
-            </a>
-            <a
-              href="https://nurui.vercel.app/playground"
-              className="cursor-pointer"
-            >
-              Playground
-            </a>
-          </nav>
-
-          <nav className="space-y-4 max-w-80 flex flex-col">
-            <h6 className="font-semibold text-lg">Explore</h6>
-            <a
-              href="https://nurui.vercel.app/docs/introduction"
-              className="cursor-pointer"
-            >
-              Introduction
-            </a>
-            <a
-              href="https://nurui.vercel.app/docs/installation"
-              className="cursor-pointer"
+          {footerSections.map((section) => (
+            <nav
+              key={section.title}
+              className="space-y-4 max-w-80 flex flex-col"
             >
-              Documentation
-            </a>
-            <a
-              href="https://nurui.vercel.app/docs/components"
-              className="cursor-pointer"
-            >
-              Components
-            </a>
-          </nav>
-
-          <nav className="space-y-4 max-w-80 flex flex-col">
-            <h6 className="font-semibold text-lg">Contact</h6>
-            <a className="flex items-start gap-2.5 max-w-48">
-              <IoLocationOutline className="flex-shrink-0" />
-              Sylhet, Bangladesh
-            </a>
-            <a className="flex gap-2.5 items-center cursor-pointer">
-              <MdOutlineMail className="flex-shrink-0" /> [email protected]
-            </a>
-          </nav>
+              <h6 className="font-semibold text-lg text-[var(--primary-color)]">
+                {section.title}
+              </h6>
+              {section.links.map((link, i) => (
+                <a
+                  key={i}
+                  href={link.url}
+                  target={link?.external ? "_blank" : "_self"}
+                  className="cursor-pointer flex items-start gap-2.5 hover:text-[var(--primary-color)] hover:transition-colors"
+                >
+                  {link?.icon && <link.icon className="flex-shrink-0" />}
+                  {link.text}
+                </a>
+              ))}
+            </nav>
+          ))}
         </div>
 
         <div className="border-t border-[var(--border-color)] border-opacity-20 p-5 flex items-center justify-center lg:justify-between">
@@ -125,6 +93,55 @@ const Footer = () => {
 
 export default Footer;
 
+const footerSections: { title: string; links: FooterLink[] }[] = [
+  {
+    title: "Products",
+    links: [
+      { text: "Nur/ui", url: "https://nurui.vercel.app", external: true },
+    ],
+  },
+  {
+    title: "Documentation",
+    links: [
+      {
+        text: "Introduction",
+        url: "https://nurui.vercel.app/docs/introduction",
+      },
+      {
+        text: "Documentation",
+        url: "https://nurui.vercel.app/docs/installation",
+      },
+    ],
+  },
+  {
+    title: "Components",
+    links: [
+      {
+        text: "Gradient Hero",
+        url: "https://nurui.vercel.app/docs/gradient-hero",
+      },
+      {
+        text: "Tech Cursor",
+        url: "https://nurui.vercel.app/docs/tech-cursor",
+      },
+      { text: "Banner", url: "https://nurui.vercel.app/docs/banner" },
+    ],
+  },
+
+  {
+    title: "Community",
+    links: [
+      {
+        text: "Linkedin",
+        url: "https://www.linkedin.com/in/md-afsar-mahmud",
+        external: true,
+      },
+      { text: "GitHub", url: "https://github.com/afsar-dev", external: true },
+      { text: "Twitter", url: "https://x.com/md_afsar_mahmud", external: true },
+    ],
+  },
+];
+
 const navigation = [
   {
     id: 1,

src/components/layout/Navbar.tsx

@@ -6,7 +6,8 @@ import VaulDrawer from "@/components/ui/drawer/VaulDrawer";
 import { navigationActive } from "@/utils/navigationActive";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
-import { FaDiscord, FaGithub } from "react-icons/fa";
+import { FaGithub } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
 import ThemeSwitcher from "../common/ThemeSwitcher";
 
 const Navbar = () => {
@@ -57,9 +58,9 @@ const Navbar = () => {
 
         <div className="hidden xl:flex items-center gap-3.5">
           <RoundedButton
-            href="https://discord.gg/XzAh8V3S"
+            href="https://x.com/md_afsar_mahmud"
             icon={
-              <FaDiscord className="text-2xl text-[var(--white-color)] dark:text-[var(--primary-color)]" />
+              <FaXTwitter className="text-2xl text-[var(--white-color)] dark:text-[var(--primary-color)]" />
             }
           />
           <RoundedButton

src/components/layout/components-layout/ComponentsNavbar.tsx

@@ -3,8 +3,8 @@ import RoundedButton from "@/components/common/RoundedButton";
 import ThemeSwitcher from "@/components/common/ThemeSwitcher";
 import VaulDrawer from "@/components/ui/drawer/VaulDrawer";
 import { useAppContext } from "@/context/AppContext";
-import React, { useEffect, useState } from "react";
-import { FaDiscord, FaGithub } from "react-icons/fa6";
+import { useEffect, useState } from "react";
+import { FaGithub, FaXTwitter } from "react-icons/fa6";
 import { GoSidebarCollapse, GoSidebarExpand } from "react-icons/go";
 
 const ComponentsNavbar = () => {
@@ -47,9 +47,9 @@ const ComponentsNavbar = () => {
         <VaulDrawer />
         <div className="flex items-center md:gap-3.5">
           <RoundedButton
-            href="https://discord.gg/XzAh8V3S"
+            href="https://x.com/md_afsar_mahmud"
             icon={
-              <FaDiscord className="text-2xl text-[var(--white-color)] dark:text-[var(--primary-color)]" />
+              <FaXTwitter className="text-2xl text-[var(--white-color)] dark:text-[var(--primary-color)]" />
             }
           />
           <RoundedButton