Merge pull request #31 from ixartz/demo-banner

fix: add demo banner at the top of the landing page

.github/workflows/CI.yml

@@ -10,7 +10,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [20.x, 22.6]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     name: Build with ${{ matrix.node-version }}

src/app/[locale]/(unauth)/page.tsx

@@ -1,6 +1,7 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { CTA } from '@/templates/CTA';
+import { DemoBanner } from '@/templates/DemoBanner';
 import { FAQ } from '@/templates/FAQ';
 import { Features } from '@/templates/Features';
 import { Footer } from '@/templates/Footer';
@@ -26,6 +27,7 @@ export default function IndexPage(props: { params: { locale: string } }) {
 
   return (
     <>
+      <DemoBanner />
       <Navbar />
       <Hero />
       <Sponsors />

src/components/DemoBadge.tsx

@@ -1,10 +1,6 @@
 const DemoBadge = () => (
   <div className="fixed bottom-0 right-20 z-10">
-    <a
-      href="https://github.com/ixartz/SaaS-Boilerplate"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <a href="https://react-saas.com" target="_blank" rel="noopener noreferrer">
       <div className="rounded-md bg-gray-900 px-3 py-2 font-semibold text-gray-100">
         <span className="text-gray-500">Demo of</span> SaaS Boilerplate
       </div>

src/features/landing/StickyBanner.tsx

@@ -0,0 +1,5 @@
+export const StickyBanner = (props: { children: React.ReactNode }) => (
+  <div className="sticky top-0 z-50 bg-primary p-4 text-center text-lg font-semibold text-primary-foreground [&_a:hover]:text-indigo-500 [&_a]:text-fuchsia-500">
+    {props.children}
+  </div>
+);

src/templates/DemoBanner.tsx

@@ -0,0 +1,10 @@
+import Link from 'next/link';
+
+import { StickyBanner } from '@/features/landing/StickyBanner';
+
+export const DemoBanner = () => (
+  <StickyBanner>
+    Live Demo of SaaS Boilerplate -{' '}
+    <Link href="/sign-up">Explore the User Dashboard</Link>
+  </StickyBanner>
+);