update the app

next.config.js

@@ -1,11 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
+  assetPrefix: "/nextjs-tailwind-course-landing-page/",
+  basePath: "/nextjs-tailwind-course-landing-page",
   images: {
     unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
   },
-  assetPrefix: "/nextjs-tailwind-course-landing-page/",
-  basePath: "/nextjs-tailwind-course-landing-page",
 };
 
 module.exports = nextConfig;

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Roboto } from "next/font/google";
-import { Layout } from "@/components";
+import { Layout, FixedPlugin } from "@/components";
 
 const roboto = Roboto({
   subsets: ["latin"],
@@ -129,7 +129,10 @@ export default function RootLayout({
           ></iframe>
         </noscript>
         {/* End Google Tag Manager (noscript) */}
-        <Layout>{children}</Layout>
+        <Layout>
+          {children}
+          <FixedPlugin />
+        </Layout>
       </body>
     </html>
   );

src/components/fixed-plugin.tsx

@@ -0,0 +1,24 @@
+"use client";
+import Image from "next/image";
+import { Button } from "@material-tailwind/react";
+
+export function FixedPlugin() {
+  return (
+    <a href="https://www.material-tailwind.com" target="_blank">
+      <Button
+        color="white"
+        size="sm"
+        className="!fixed bottom-4 right-4 flex gap-1 pl-2 items-center border border-blue-gray-50"
+      >
+        <Image
+          width={128}
+          height={128}
+          className="w-5 h-5"
+          alt="Material Tailwind"
+          src="https://www.material-tailwind.com/favicon.png"
+        />{" "}
+        Made With Material Tailwind
+      </Button>
+    </a>
+  );
+}

src/components/index.ts

@@ -8,4 +8,5 @@ export * from "./feedback-card";
 export * from "./category-card";
 export * from "./course-card";
 export * from "./event-card";
-export * from "./footer";
+export * from "./footer";
+export * from "./fixed-plugin";

src/components/navbar.tsx

@@ -24,11 +24,6 @@ const NAV_MENU = [
     name: "Account",
     icon: UserCircleIcon,
   },
-  {
-    name: "Blocks",
-    icon: Squares2X2Icon,
-    href: "https://www.materila-tailwind.com/blocks",
-  },
   {
     name: "Docs",
     icon: CommandLineIcon,
@@ -94,7 +89,12 @@ export function Navbar() {
             </ul>
             <div className="hidden items-center gap-4 lg:flex">
               <Button variant="text">Log in</Button>
-              <Button color="gray">buy now</Button>
+              <a
+                href="https://www.materila-tailwind.com/blocks"
+                target="_blank"
+              >
+                <Button color="gray">Blocks</Button>
+              </a>
             </div>
             <IconButton
               variant="text"
@@ -121,7 +121,12 @@ export function Navbar() {
               </ul>
               <div className="mt-6 mb-4 flex items-center gap-4">
                 <Button variant="text">Log in</Button>
-                <Button color="gray">buy now</Button>
+                <a
+                  href="https://www.materila-tailwind.com/blocks"
+                  target="_blank"
+                >
+                  <Button color="gray">buy now</Button>
+                </a>
               </div>
             </div>
           </Collapse>