improved positioning and added animation

nitkkr-dev · Apr 26, 2024 · cac2be2 · cac2be2
1 parent 8e09f92
commit cac2be2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/app/[locale]/notifications.tsx b/app/[locale]/notifications.tsx
@@ -34,18 +34,17 @@ export default async function Notifications({
 
   return (
     <article
-      className="bg-notifications bg-cover bg-no-repeat pb-32 pt-[72px] md:pb-40"
+      className="container bg-notifications bg-cover bg-no-repeat pb-32 pt-[72px] md:pb-40"
       id="notifications"
     >
       <Heading
-        className="container"
         glyphDirection="rtl"
         heading="h2"
         href="#notifications"
         text={text.title}
       />
 
-      <article className="container h-[384px] rounded-xl md:h-[512px] lg:flex lg:justify-between">
+      <article className="h-[384px] rounded-xl md:h-[512px] lg:flex lg:justify-between">
         <ol
           className={cn(
             'flex rounded-t-xl bg-primary-700 p-1 sm:p-2',

diff --git a/components/heading.tsx b/components/heading.tsx
@@ -80,27 +80,28 @@ export default function Heading({
   return (
     <header
       className={cn(
+        'group relative',
         'my-4 sm:my-6 md:my-8 lg:my-10 xl:my-12',
-        'flex flex-nowrap gap-2 sm:gap-3 md:gap-4',
+        'flex flex-nowrap items-center gap-2 sm:gap-3 md:gap-4',
         className
       )}
       {...props}
     >
       {glyphDirection === 'dual' && <Elephants direction="rtl" />}
       {glyphDirection === 'rtl' && <Horses direction={glyphDirection} />}
-      <Comp className="group my-auto min-w-fit">
-        {text}
+      <Comp className="my-auto min-w-fit">{text}</Comp>
+      {glyphDirection === 'ltr' && <Horses direction={glyphDirection} />}
+      {glyphDirection === 'dual' && <Elephants direction="ltr" />}
+      <Comp className="absolute left-full my-auto md:pl-2">
         {href && (
           <Link
             href={href}
-            className="absolute hidden hover:font-medium hover:text-neutral-800 group-hover:inline-block"
+            className="hidden animate-in fade-in zoom-in hover:font-medium hover:text-neutral-800 group-hover:inline-block"
           >
             #
           </Link>
         )}
       </Comp>
-      {glyphDirection === 'ltr' && <Horses direction={glyphDirection} />}
-      {glyphDirection === 'dual' && <Elephants direction="ltr" />}
     </header>
   );
 }