worked on the button and links

app/auth/login/page.tsx

@@ -1,5 +1,9 @@
 import SignIn from '@/components/page/Authentication/Login';
 
+export const metadata = {
+  title: 'Login',
+};
+
 const index = () => {
   return <SignIn />;
 };

app/auth/register/page.tsx

@@ -1,6 +1,9 @@
 import SignUp from '@/components/page/Authentication/Register';
 import React from 'react';
 
+export const metadata = {
+  title: 'Register',
+};
 const register = () => {
   return <SignUp />;
 };

app/dashboard/billings/page.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import Layout from '@/components/Shared/DashboardLayout';
 import Billing from '@/components/page/AdminDashboard/billings';
 
+export const metadata = {
+  title: 'Billing',
+};
+
 const Billings = () => {
   return <Billing />;
 };

app/dashboard/help/page.tsx

@@ -1,6 +1,10 @@
 import ContactSupport from '@/components/page/AdminDashboard/help';
 import React from 'react';
 
+export const metadata = {
+  title: 'Help',
+};
+
 const Help = () => {
   return <ContactSupport />;
 };

app/dashboard/invoices/page.tsx

@@ -2,6 +2,10 @@ import Layout from '@/components/Shared/DashboardLayout';
 import Invoice from '@/components/page/AdminDashboard/invoices';
 import React from 'react';
 
+export const metadata = {
+  title: 'Invoices',
+};
+
 const Invoices = () => {
   return <Invoice />;
 };

app/dashboard/loading.tsx

@@ -1,15 +1,5 @@
 export default function Loading() {
   return (
-    // <div className="w-full h-full space-y-4">
-    //   <div className="w-[200px] h-10 flex flex-col gap-2">
-    //     <Skeleton className="h-4 w-3/5 rounded-lg" />
-    //     <Skeleton className="h-4 w-4/5 rounded-lg  bg-slate-200 animate-in" />
-    //   </div>
-
-    //   <div className="w-full h-full">
-    //     <Skeleton className="flex rounded-lg w-full h-full bg-slate-200" />
-    //   </div>
-    // </div>
     <div className="w-full h-full flex items-center justify-center">
       <p>Loading...</p>
     </div>

app/dashboard/page.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Home from '@/components/page/AdminDashboard/dashboard';
 
+export const metadata = {
+  title: 'Profile',
+};
 const index = () => {
   return <Home />;
 };

app/dashboard/settings/page.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Setting from '@/components/page/AdminDashboard/settings';
 
+export const metadata = {
+  title: 'Settings',
+};
 const Settings = () => {
   return <Setting />;
 };

app/layout.tsx

@@ -9,7 +9,10 @@ const font = Averta({
 });
 
 export const metadata: Metadata = {
-  title: 'Nucleus - Home',
+  title: {
+    template: 'Nucleus - %s',
+    default: 'Home',
+  },
   description: 'Nucleus is all in one app for your public api',
 };
 

app/page.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Landingpage from '@/components/page/LandingPage';
 
+export const metadata = {
+  title: 'Home',
+};
 const Index = () => {
   return <Landingpage />;
 };

components/Shared/Button.tsx

@@ -20,9 +20,14 @@ const Button = ({
   return (
     <button
       type={type ? type : 'button'}
-      disabled={isLoading || pending}
       onClick={handleClick}
-      className={`bg-[#551FFF] text-white text-center text-xl font-semibold rounded-lg w-full p-2 ${className} cursor-pointer`}
+      className={`bg-[#551FFF] text-white text-center text-base font-semibold rounded-lg p-2 cursor-pointer ${
+        isLoading || pending ? 'cursor-not-allowed' : ''
+      } ${className}`}
+      style={{
+        pointerEvents: isLoading || pending ? 'none' : 'auto',
+        opacity: isLoading || pending ? 0.7 : 1,
+      }}
     >
       {isLoading || pending ? <h1>Loading...</h1> : <div>{children}</div>}
     </button>

components/Shared/PricingCard.tsx

@@ -19,7 +19,7 @@ const PricingCard = (props: Props) => {
     <section className="bg-white shadow-md rounded-md p-4 w-full h-fit">
       <div className="flex flex-col justify-between pb-4 space-y-10 border-b">
         <div className="space-y-4">
-          <Button className="bg-purple-500 w-fit text-sm px-4 py-1">
+          <Button className="bg-purple-500 text-sm px-4 py-1 capitalize">
             {title}
           </Button>
           <p className="text-xs font-medium text-gray-500">{desc}</p>
@@ -50,7 +50,7 @@ const PricingCard = (props: Props) => {
       </div>
       <div className="pt-4">
         <Button
-          className={`py-2 bg-transparent text-sm font-semibold border ${
+          className={`py-2 bg-transparent text-sm w-full font-semibold border ${
             title === PRICING_CLASS.CUSTOM
               ? 'bg-violet-700 text-white'
               : 'text-zinc-800 '

components/Shared/SideBar.tsx

@@ -107,6 +107,7 @@ const SideBar = () => {
       <div className="w-full h-fit pb-4 border-b gap-1 flex flex-col justify-between">
         {links.map((item, idx) => (
           <Link
+            prefetch={true}
             href={item.links}
             key={idx}
             className={`flex w-full items-center   ${

components/page/AdminDashboard/billings/index.tsx

@@ -7,10 +7,6 @@ import BillCalendar from './BillCalendar';
 import UserLocation from './UserLocation';
 import Chart from './Chart';
 
-export const metadata = {
-  title: 'Modern dashboard - Billing',
-};
-
 const Billing = () => {
   const bills = [
     { title: 'Recent Bills', amount: '$25,000', chart: <Chart /> },

components/page/Authentication/Login.tsx

@@ -73,7 +73,9 @@ const SignIn = () => {
                 forget password?
               </Link>
               <div className="flex items-center justify-center w-full py-2">
-                <Button type="submit">Login</Button>
+                <Button type="submit" className="w-full">
+                  Login
+                </Button>
               </div>
             </div>
           </form>
@@ -85,19 +87,19 @@ const SignIn = () => {
             </div>
             <div className="flex items-center gap-2">
               <Button
-                className="!bg-transparent shadow-md text-black !text-sm mb-2"
+                className="!bg-transparent shadow-md mb-2"
                 handleClick={() => handleSignInWithGithub()}
               >
-                <div className="w-fit flex-nowrap flex items-center justify-center gap-2">
+                <div className="w-fit flex-nowrap flex items-center text-black text-sm justify-center gap-2">
                   <FaGithub />
                   Sign in with Github
                 </div>
               </Button>
               <Button
-                className="!bg-transparent shadow-md text-black !text-sm mb-2"
+                className="!bg-transparent shadow-md  mb-2"
                 handleClick={() => handleSignInWithGoogle()}
               >
-                <div className="w-fit flex flex-nowrap items-center justify-center gap-2">
+                <div className="w-fit flex flex-nowrap items-center text-black text-sm justify-center gap-2">
                   <FcGoogle />
                   Sign in with Google
                 </div>

components/page/Authentication/Register.tsx

@@ -90,7 +90,9 @@ const SignUp = () => {
           </div>
           <div>
             <div className="flex items-center justify-center w-full py-2">
-              <Button type="submit">Create Account</Button>
+              <Button type="submit" className="w-full">
+                Create Account
+              </Button>
             </div>
 
             <div className="text-center py-4">

components/page/LandingPage/Hero.tsx

@@ -53,7 +53,7 @@ const Hero = () => {
             >
               Get started 🚀
             </Button>
-            <Button className="relative w-fit text-base font-medium px-4 md:px-8  bg-transparent border border-[#551FFF] hover:text-white text-[#551FFF] overflow-hidden swipe">
+            <Button className="relative w-fit text-base font-medium px-4 md:px-8  bg-transparent border border-[#551FFF] !text-[#551FFF] hover:!text-white  overflow-hidden swipe">
               Book a demo 📖
             </Button>
           </div>

tailwind.config.js

@@ -1,77 +1,77 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
+  darkMode: ['class'],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
   ],
-  prefix: "",
+  prefix: '',
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-}
+  plugins: [require('tailwindcss-animate')],
+};