From e3b60a10e8b8b543e8751dc017ad7e9acff8ae3d Mon Sep 17 00:00:00 2001
From: Bohdan Chornokondratenko <bogdan.chornocondratenko@gmail.com>
Date: Thu, 15 Aug 2024 15:52:36 +0200
Subject: [PATCH] feat(landing): hero block blurred keymap background

---
 src/features/landing/sections/HeroSection.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/features/landing/sections/HeroSection.tsx b/src/features/landing/sections/HeroSection.tsx
index 8421b37..7715084 100644
--- a/src/features/landing/sections/HeroSection.tsx
+++ b/src/features/landing/sections/HeroSection.tsx
@@ -28,8 +28,17 @@ export function HeroSection() {
         <div className='flex h-[21rem] w-[21rem] shrink-0 flex-col items-center justify-center rounded-3xl bg-black-100 pb-4'>
           <TwistySection />
         </div>
-        <div className='-ml-[22rem] flex items-center justify-center overflow-clip rounded-3xl bg-secondary-20'>
-          <ul className='grid -rotate-[18deg] grid-cols-[repeat(10,auto)] gap-1'>
+        <div className='relative -ml-[22rem] flex items-center justify-center overflow-clip rounded-3xl'>
+          <div className='absolute left-[1%] top-[30%] h-[40%] w-[30%] rounded-[100%] bg-secondary-20 blur-xl'></div>
+          <div className='absolute left-[25%] top-[-5%] h-[55%] w-[30%] rounded-[100%] bg-secondary-60 blur-xl'></div>
+          <div className='absolute left-0 top-0 h-[40%] w-[35%] bg-primary-60 blur-xl'></div>
+          <div className='absolute bottom-0 left-[-5%] h-[40%] w-[40%] bg-primary-60 blur-xl'></div>
+          <div className='absolute bottom-[-15%] left-[50%] h-[60%] w-[30%] rounded-[100%] bg-secondary-20 blur-xl'></div>
+          <div className='absolute right-0 top-0 h-[35%] w-[30%] rounded-[100%] bg-secondary-60 blur-xl'></div>
+          <div className='absolute bottom-0 right-[-5%] h-[70%] w-[30%] rounded-[100%] bg-primary-100 blur-xl'></div>
+          <div className='absolute left-[52%] top-[5%] h-[40%] w-[30%] rounded-[100%] bg-primary-60 blur-xl'></div>
+          <div className='absolute bottom-[5%] left-[30%] h-[40%] w-[30%] rounded-[100%] bg-primary-100 blur-xl'></div>
+          <ul className='relative grid -rotate-[18deg] grid-cols-[repeat(10,auto)] gap-1'>
             {KEY_MAP.map(({ keyName, cubeMovement }) => (
               <KeyMapTile
                 key={keyName}