fix(nextjs): hero section image overflow

saeidex · Sep 21, 2024 · 59781b7 · 59781b7
1 parent 33216c6
commit 59781b7
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/apps/nextjs/src/app/_components/hero.tsx b/apps/nextjs/src/app/_components/hero.tsx
@@ -16,7 +16,7 @@ export const Hero = ({ className }: { className?: string }) => {
       )}
     >
       <div className="flex flex-col gap-12 md:flex-row md:items-center md:justify-between md:py-4">
-        <div className="flex flex-col justify-center gap-6 md:h-fit md:w-4/6 md:justify-between lg:h-full lg:max-w-[660px] lg:justify-center lg:gap-8">
+        <div className="flex flex-col items-start justify-center gap-6 md:h-fit md:w-4/6 md:justify-between lg:h-full lg:max-w-[660px] lg:justify-center lg:gap-8">
           <h1 className="text-display-small sm:text-display-medium md:max-w-full md:text-display-large lg:max-w-fit">
             Track. Notify. Simplify.
           </h1>
@@ -31,9 +31,9 @@ export const Hero = ({ className }: { className?: string }) => {
             </Button>
           </Link>
         </div>
-        <div className="relative flex items-end before:absolute before:inset-0 before:hidden before:h-full before:w-full before:bg-gradient-to-br before:from-background before:via-background/80 before:to-transparent sm:-z-50 sm:-mt-40 before:sm:block md:z-auto md:mt-0 before:md:hidden">
+        <div className="relative before:absolute before:inset-0 before:hidden before:h-full before:w-full before:bg-gradient-to-br before:from-background before:via-background/80 before:to-transparent sm:-z-50 sm:-mt-40 before:sm:block md:z-auto md:mt-0 before:md:hidden">
           <Image
-            className="min-w-[90dvw] md:min-w-[100%] xl:min-w-[509px]"
+            className="min-w-full"
             src={"hero-map.svg"}
             height={377}
             width={509}