fixed gradient value of the index bottom and grid

parchinski · Nov 5, 2024 · dfa59c8 · dfa59c8
1 parent 7df12a7
commit dfa59c8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/app/components/ui/grid-bg.tsx b/app/components/ui/grid-bg.tsx
@@ -26,21 +26,24 @@ const BackgroundGrid = ({
   const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 
   return (
-    <div
-      className={`pointer-events-none absolute inset-0 left-0 top-0 flex h-full w-full ${className}`}
-      style={{
-        backgroundImage: `url("${svgDataUrl}")`,
-        backgroundRepeat: 'repeat',
-        backgroundSize: cellSize,
-        maskImage: fade
-          ? 'radial-gradient(ellipse at top, white, transparent 70%)'
-          : undefined,
-        WebkitMaskImage: fade
-          ? 'radial-gradient(ellipse at top, white, transparent 70%)'
-          : undefined,
-      }}
-      {...props}
-    />
+    <>
+      <div
+        className={`pointer-events-none absolute inset-0 left-0 top-0 flex h-full w-full ${className}`}
+        style={{
+          backgroundImage: `url("${svgDataUrl}")`,
+          backgroundRepeat: 'repeat',
+          backgroundSize: cellSize,
+          maskImage: fade
+            ? 'radial-gradient(ellipse at top, white, transparent 70%)'
+            : undefined,
+          WebkitMaskImage: fade
+            ? 'radial-gradient(ellipse at top, white, transparent 70%)'
+            : undefined,
+        }}
+        {...props}
+      />
+      <div className="absolute top-0 left-0 right-0 h-8 bg-gradient-to-t from-transparent to-background z-20" />
+    </>
   );
 };
 

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -65,8 +65,7 @@ export default function Index() {
           </Link>
         </div>
         <ScrollArrow onClick={scrollToNextSection} />
-        {/* Add transition overlay */}
-        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent to-background z-20" />
+        <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-b from-transparent to-background z-20" />
       </section>
 
       {/* Meetings and Membership Section */}