Minor UI Changes (#272)

* ✨ added github star counter

* ✨ updated styling of banner

* ✨ added Banner in footer of docs

Author: Ansub

src/app/providers.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { Button } from '@/components/mdx'
-import { ChevronRight } from 'lucide-react'
+import SyntaxUIProBanner from '@/components/SyntaxUIProBanner'
+import { useProBannerStore } from '@/store'
+import { X } from 'lucide-react'
 import { ThemeProvider } from 'next-themes'
-import { useRouter } from 'next/navigation'
 
 import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
@@ -17,26 +17,9 @@ function CSPostHogProvider({ children }: { children: React.ReactNode }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>
 }
 
-const SyntaxUIProBanner = () => {
-  const router = useRouter()
-  return (
-    <>
-      <div
-        onClick={() => router.push('/pro')}
-        className={`fixed bottom-0 left-0 right-0 z-50 cursor-pointer transition-all duration-300 ease-in-out`}
-      >
-        <div className="flex w-full items-center justify-center gap-x-6 bg-red-500 px-6 py-2 sm:px-3.5">
-          <div className="flex items-center gap-4 text-sm font-medium leading-6 text-white">
-            <p>{`Get Premium Blocks and Templates for your next project on SyntaxUI Pro`}</p>
-            <ChevronRight className="h-4 w-4" />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
 export function Providers({ children }: { children: React.ReactNode }) {
+  const { showProBanner } = useProBannerStore()
+
   return (
     <ThemeProvider
       attribute="class"
@@ -45,7 +28,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
     >
       <CSPostHogProvider>
         {children}
-        <SyntaxUIProBanner />
+        {showProBanner && <SyntaxUIProBanner />}
       </CSPostHogProvider>
     </ThemeProvider>
   )

src/components/Footer.tsx

@@ -84,7 +84,7 @@ function SocialLink({
   return (
     <Link href={href} target="_blank" rel="noreferrer" className="group">
       <span className="sr-only">{children}</span>
-      <Icon className="h-5 w-5 fill-zinc-700 dark:fill-gray-100 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500" />
+      <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:fill-gray-100 dark:group-hover:fill-zinc-500" />
     </Link>
   )
 }
@@ -117,10 +117,32 @@ 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="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
+      </div>
+      <div>
+        <a
+          href="https://pro.syntaxui.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-lg bg-red-500 px-4 py-3 text-sm font-medium text-white hover:bg-red-500/90"
+        >
+          Get SyntaxUI Pro
+        </a>
+      </div>
+    </div>
+  )
+}
+
 export function Footer() {
   return (
     <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
       <PageNavigation />
+      <FooterBanner />
       <SmallPrint />
     </footer>
   )

src/components/SyntaxUIProBanner.tsx

@@ -0,0 +1,32 @@
+import { useProBannerStore } from '@/store'
+import { X } from 'lucide-react'
+
+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">
+      <a
+        href="https://pro.syntaxui.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <div className="flex flex-col items-start gap-0.5">
+          <h1 className="text-md hidden font-semibold md:block">
+            Code Less, Create More!
+          </h1>
+          <div className="font-regular flex items-start justify-start  text-sm leading-6 text-white/80">
+            {`Get Premium Blocks and Templates for your next project on SyntaxUI Pro ↗`}
+          </div>
+        </div>
+      </a>
+      <button
+        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" />
+      </button>
+    </div>
+  )
+}
+
+export default SyntaxUIProBanner

src/store.ts

@@ -9,3 +9,13 @@ export const useStarStore = create<StarStore>((set) => ({
   stars: 100,
   setStars: (count) => set({ stars: count }),
 }))
+
+interface ProBannerStore {
+  showProBanner: boolean
+  setShowProBanner: (show: boolean) => void
+}
+
+export const useProBannerStore = create<ProBannerStore>((set) => ({
+  showProBanner: true,
+  setShowProBanner: (show) => set({ showProBanner: show }),
+}))