chore: Replaced Upgrade warning inside navigation bar

ful1e5 · Jan 17, 2024 · d68a26c · d68a26c
1 parent e04528e
commit d68a26c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 39 deletions.
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -4,7 +4,6 @@ import '@app/(home)/styles.css';
 
 import Link from 'next/link';
 
-import { Message } from '@components/Message';
 import { AnimatedCounter as Counter } from '@components/AnimatedCount';
 import { Marquee } from '@components/Marquee';
 import { HeroesElements } from '@components/HeroesElements';
@@ -23,11 +22,6 @@ export default function HomePage() {
     <main>
       <div className='container m-auto px-3 pt-6 pb-24'>
         <div className='h-[350px] sm:h-[600px] bg-gradient-radial from-10% from-orange-300/[.07] via-40% via-fushcia-300/[.07] to-60% flex flex-col justify-center items-center'>
-          <Message
-            tag='Alert'
-            message='Bibata servers need an upgrade! Click to help with the upgrade.'
-            href='https://www.github.com/sponsors/ful1e5'
-          />
           <section className='flex flex-col gap-6 justify-center items-center'>
             <h1 className='inline-flex flex-col'>
               <span className='main-heading-0'>
@@ -184,7 +178,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className='mt-8'>
+      <section className='mt-8 py-12'>
         <Marquee count={3}>
           <span className='mx-4 text-5xl sm:text-8xl font-black opacity-50 italic'>
             <span className='text-blue-200'>BEEEEEE</span>
@@ -251,9 +245,12 @@ export default function HomePage() {
           The proficient team spearheading the Bibata.
         </p>
 
-        <Marquee count={5}>
-          <HeroesElements />
-        </Marquee>
+        <div className='py-12'>
+          <Marquee count={5}>
+            <HeroesElements />
+          </Marquee>
+        </div>
+
         <div className='flex justify-center my-3 mt-10'>
           <p className='section-subheading w-5/6 sm:w-2/3'>
             Bibata stands as a fully open-source platform, boasting actively

diff --git a/src/app/(home)/studio/page.tsx b/src/app/(home)/studio/page.tsx
@@ -7,7 +7,6 @@ import tinycolor from 'tinycolor2';
 import { TYPES, COLORS, SIZES } from '@root/configs';
 import { LIB_VERSION } from '@root/version';
 
-import { Message } from '@components/Message';
 import { TypePicker } from '@components/TypePicker';
 import { SizePicker } from '@components/SizePicker';
 import { ColorPicker } from '@components/ColorPicker';
@@ -65,11 +64,6 @@ export default function StudioPage() {
         background: `radial-gradient(circle at center, ${tint1} 0%, ${tint2} 50%, ${tint1} 75%, ${bg} 100%)`
       }}>
       <div className='container m-auto px-3 py-6'>
-        <Message
-          tag='Alert'
-          message='Bibata servers need an upgrade! Click to help with the upgrade.'
-          href='https://www.github.com/sponsors/ful1e5'
-        />
         <div className='mt-5'>
           <TypePicker
             list={TYPES.filter((a) => !a.match('Right'))}

diff --git a/src/components/Marquee.tsx b/src/components/Marquee.tsx
@@ -21,11 +21,11 @@ export const Marquee: React.FC<Props> = (props) => {
 
   return (
     <div className='relative flex overflow-x-hidden'>
-      <div className='py-12 animate-marquee whitespace-nowrap'>
+      <div className='animate-marquee whitespace-nowrap'>
         <List />
       </div>
 
-      <div className='absolute top-0 py-12 animate-marquee2 whitespace-nowrap'>
+      <div className='absolute top-0 animate-marquee2 whitespace-nowrap'>
         <List />
       </div>
     </div>

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -8,6 +8,7 @@ import { useSession } from 'next-auth/react';
 
 import { Profile } from './profile';
 import { BibataTypoLogo } from '@components/svgs';
+import { Marquee } from '@components/Marquee';
 
 type Props = {};
 
@@ -23,28 +24,39 @@ export const NavBar: React.FC<Props> = (_props) => {
           ? 'bg-[--bg-dark]'
           : 'bg-[#151515] backdrop-filter backdrop-blur-xl border-b border-white/[.1] firefox:bg-opacity-95 bg-opacity-95'
       } `}>
-      <nav className='container mx-auto p-3 md:p-4 flex items-center justify-between'>
-        <Link href='/'>
-          <div className='overflow-hidden flex items-center justify-center gap-2'>
-            <span className='inline-flex items-center gap-1'>
-              <span
-                className={`hover:text-white/[.8] transition active:scale-95 ${
-                  session?.user?.role === 'PRO' || pathname === '/'
-                    ? 'text-[--accent]'
-                    : 'text-white'
-                }`}>
-                <BibataTypoLogo />
-              </span>
+      <nav>
+        <div className='bg-red-400 text-black text-xs md:text-base font-semibold py-1 md:py-3'>
+          <Marquee count={2}>
+            <span className='pr-40 lg:pr-80 tracking-wide'>
+              Bibata servers need an upgrade! Click here to support my open
+              source projects on GitHub Sponsors, helping reach goals, covering
+              bills, and fueling my commitment to open source full-time.
             </span>
-          </div>
-        </Link>
-        {status === 'loading' ? (
-          <div className='m-1 sm:m-1 w-16 sm:w-24 mr-1 sm:mr-4'>
-            <div className='rounded-full h-6 sm:h-8 ring-white/[.2] ring-1 p-1 animate-pulse bg-white/[.1]' />
-          </div>
-        ) : (
-          <Profile session={session} />
-        )}
+          </Marquee>
+        </div>
+        <div className='container mx-auto p-3 md:p-4 flex items-center justify-between'>
+          <Link href='/'>
+            <div className='overflow-hidden flex items-center justify-center gap-2'>
+              <span className='inline-flex items-center gap-1'>
+                <span
+                  className={`hover:text-white/[.8] transition active:scale-95 ${
+                    session?.user?.role === 'PRO' || pathname === '/'
+                      ? 'text-[--accent]'
+                      : 'text-white'
+                  }`}>
+                  <BibataTypoLogo />
+                </span>
+              </span>
+            </div>
+          </Link>
+          {status === 'loading' ? (
+            <div className='m-1 sm:m-1 w-16 sm:w-24 mr-1 sm:mr-4'>
+              <div className='rounded-full h-6 sm:h-8 ring-white/[.2] ring-1 p-1 animate-pulse bg-white/[.1]' />
+            </div>
+          ) : (
+            <Profile session={session} />
+          )}
+        </div>
       </nav>
     </header>
   );