✨ improved ui of banner

Author: Ansub

src/components/Footer.tsx

@@ -119,7 +119,7 @@ function SmallPrint() {
 
 const FooterBanner = () => {
   return (
-    <div className="flex flex-col items-center justify-center rounded-xl border  bg-gray-100 py-8 text-black">
+    <div className="flex w-full flex-col items-center justify-center rounded-xl border bg-gray-100 py-8 text-black">
       <div className="mb-4 max-w-xl text-center text-xl font-semibold  tracking-tight">
         Say goodbye to the grind of coding everything from scratch. So you can
         focus on what matters most
@@ -139,10 +139,12 @@ const FooterBanner = () => {
 }
 
 export function Footer() {
+  const pathname = usePathname()
+
   return (
     <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
       <PageNavigation />
-      <FooterBanner />
+      {pathname !== '/' && <FooterBanner />}
       <SmallPrint />
     </footer>
   )

src/components/SyntaxUIProBanner.tsx

@@ -1,20 +1,34 @@
 import { useProBannerStore } from '@/store'
 import { X } from 'lucide-react'
+import Image from 'next/image'
 
 const SyntaxUIProBanner = () => {
   const { setShowProBanner } = useProBannerStore()
   return (
-    <div className="border-border group fixed bottom-2 right-2 z-50 h-auto w-[calc(100vw-16px)] max-w-[350px] overflow-hidden rounded-lg border border-red-700 bg-red-500 p-4 text-white transition-all animate-in slide-in-from-bottom-full md:bottom-4 md:right-4">
+    <div className="border-border group fixed bottom-2 right-2 z-50 h-auto w-[calc(100vw-16px)] max-w-[350px] overflow-hidden rounded-lg border bg-white  p-4 text-gray-900 transition-all animate-in slide-in-from-bottom-full md:bottom-4 md:right-4 ">
       <a
         href="https://pro.syntaxui.com/"
         target="_blank"
         rel="noopener noreferrer"
+        className="flex flex-row"
       >
+        <div className="relative mr-6  md:block">
+          <Image
+            src="/images/syntaxUI.svg"
+            alt="SyntaxUI"
+            className="h-16 w-16 rounded-xl"
+            width={120}
+            height={120}
+          />
+          <div className="absolute -right-4 bottom-4 rotate-[-18deg] rounded-full bg-black px-1 text-[10px] text-white">
+            PRO
+          </div>
+        </div>
         <div className="flex flex-col items-start gap-0.5">
-          <h1 className="text-md hidden font-semibold md:block">
+          <h1 className="text-md font-medium tracking-tight md:block">
             Code Less, Create More!
           </h1>
-          <div className="font-regular flex items-start justify-start  text-sm leading-6 text-white/80">
+          <div className="font-regular flex items-start justify-start font-mono text-xs leading-[17px] tracking-tighter text-gray-900/80">
             {`Get Premium Blocks and Templates for your next project on SyntaxUI Pro ↗`}
           </div>
         </div>
@@ -23,7 +37,7 @@ const SyntaxUIProBanner = () => {
         className="p-1s absolute right-2 top-2 transition-all duration-300 ease-in-out group-hover:block md:hidden"
         onClick={() => setShowProBanner(false)}
       >
-        <X className="h-5 w-5" />
+        <X className="h-4 w-4" />
       </button>
     </div>
   )