Add progressive blur

ripgrim · Sep 21, 2024 · 9fbe2ea · 9fbe2ea
1 parent 03b52ed
commit 9fbe2ea
Showing 1 changed file with 57 additions and 6 deletions.
diff --git a/src/app/Home.tsx b/src/app/Home.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation'
 import { Button } from "@/components/ui/button"
 import Link from 'next/link'
 import Image from 'next/image'
+import { LinearBlur } from "progressive-blur"
 
 export default function Home() {
   const router = useRouter()
@@ -33,7 +34,7 @@ export default function Home() {
       </header>
 
       <main>
-        <section className="container mx-auto px-4 py-20 text-center">
+        <section className="container mx-auto px-4 pt-20 pb-0 text-center">
           <h1 className="text-6xl font-bold mb-4">
             Your shopping,<br />Made easy
           </h1>
@@ -44,8 +45,33 @@ export default function Home() {
           <p className="text-sm text-gray-400 mt-4">No registration required</p>
         </section>
 
-        <section className="container mx-auto px-4 py-5">
-          <div className="bg-black rounded-3xl p-8 relative overflow-hidden">
+        <section className="container mx-auto px-4 py-0">
+          <div className="bg-black rounded-3xl px-8 relative overflow-hidden">
+            <LinearBlur
+              side="bottom"
+              steps={32}
+              strength={4}
+              tint="rgba(0, 0, 0, 1)"
+              style={{
+                position: "absolute",
+                inset: 0,
+                height: "30%",
+                transform: "translateY(200%)",
+                pointerEvents: "none",
+              }}
+            />
+            <LinearBlur
+              side="top"
+              steps={32}
+              strength={4}
+              tint="rgba(0, 0, 0, 1)"
+              style={{
+                position: "absolute",
+                inset: 0,
+                height: "30%",
+                pointerEvents: "none",
+              }}
+            />
             <Image
               src="/image/landing/landing.png"
               alt="EZ Cart Screenshot"
@@ -58,7 +84,7 @@ export default function Home() {
 
         <div className="h-[1px] bg-neutral-900 w-[90%] mx-auto" />
 
-        <section className="container mx-auto px-4 py-10 text-center">
+        <section className="container mx-auto px-4 pt-10 pb-0 text-center">
           <h2 className="text-4xl font-bold mb-4">
             Precise totals with<br />your state&apos;s local sales tax
           </h2>
@@ -71,8 +97,33 @@ export default function Home() {
           <p className="text-sm text-gray-400 mt-4">Supports all 50 states</p>
         </section>
 
-        <section className="container mx-auto px-4 py-5">
+        <section className="container mx-auto px-4 pt-5 pb-0">
           <div className="bg-black rounded-3xl p-8 relative overflow-hidden">
+            <LinearBlur
+              side="bottom"
+              steps={16}
+              strength={2}
+              tint="rgba(0, 0, 0, 1)"
+              style={{
+                position: "absolute",
+                inset: 0,
+                height: "30%",
+                transform: "translateY(220%)",
+                pointerEvents: "none",
+              }}
+            />
+            <LinearBlur
+              side="top"
+              steps={32}
+              strength={2}
+              tint="rgba(0, 0, 0, 1)"
+              style={{
+                position: "absolute",
+                inset: 0,
+                height: "30%",
+                pointerEvents: "none",
+              }}
+            />
             <Image
               src="/image/landing/split.png"
               alt="EZ Cart Screenshot"
@@ -81,7 +132,7 @@ export default function Home() {
               className="rounded-2xl shadow-2xl mx-auto"
             />
           </div>
-        </section> 
+        </section>
       </main>
 
       <div className="h-[1px] bg-neutral-900 w-[90%] mx-auto" />