Add background gradient

JJozef · Mar 30, 2024 · 40c72fd · 40c72fd
1 parent a1ab135
commit 40c72fd
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -6,8 +6,13 @@ import Link from 'next/link'
 
 export default function Home() {
   return (
-    <section className='container mx-auto flex max-w-[980px] flex-col items-center grow gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20'>
-      <Badge className='text-sm hover:scale-105 transition select-none' variant='secondary'>
+    <section className='container mx-auto flex max-w-[980px] flex-col items-center grow gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20 relative'>
+      <div className='absolute -z-[1] bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_45%_50%_at_50%_0%,#000_70%,transparent_110%)]' />
+
+      <Badge
+        className='text-sm hover:scale-105 transition select-none'
+        variant='secondary'
+      >
         🎉 v1.0.0
       </Badge>
       <h1 className='text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]'>