From f9de8440182f75b23662f7892332a0131a73cd0a Mon Sep 17 00:00:00 2001
From: fwedwicc <moreno.frederick.capiral@gmail.com>
Date: Tue, 6 Aug 2024 13:35:45 +0800
Subject: [PATCH] A bit modification for hero section in home page

---
 src/components/Hero.jsx | 13 ++++++-------
 src/pages/Home.jsx      |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 11bc41c..1924d5b 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -37,21 +37,20 @@ const Hero = () => {
       </div>
       <div className='col-span-1 grid grid-cols-2 grid-rows-2'>
         <div className='col-span-1 row-span-1 bg-border-gradient-1 p-[0.5px]'>
-          <div className='bg-white w-full h-full flex flex-col justify-center items-center'>
-            <h1 className='text-[5rem] leading-none font-black'>{totalComponents}</h1>
+          <div className='bg-white w-full h-full flex flex-col justify-center items-center p-4'>
+            <h1 className='md:text-[5rem] text-[3rem] leading-none font-black'>{totalComponents}</h1>
             <span>Total Components</span>
           </div>
         </div>
-
         <div className='col-span-1 row-span-1 bg-border-gradient-2 p-[0.5px]'>
-          <div className='bg-white w-full h-full flex flex-col justify-center items-center'>
-            <h1 className='text-[5rem] leading-none font-black'>{totalTemplates}</h1>
+          <div className='bg-white w-full h-full flex flex-col justify-center items-center p-4'>
+            <h1 className='md:text-[5rem] text-[3rem] leading-none font-black'>{totalTemplates}</h1>
             <span>Page Templates</span>
           </div>
         </div>
-        <div className='col-span-2 row-span-1 bg-border-gradient-3 p-[0.5px]'>
+        <div className='col-span-2 row-span-1 bg-border-gradient-3 p-[0.5px] pt-4'>
           <div className='bg-white flex flex-col gap-4 justify-center items-center w-full h-full'>
-            <h1 className='md:text-[2.5rem] text-[2rem] leading-none font-black'>All are Freemium</h1>
+            <h1 className='md:text-[2.5rem] text-[1.5rem] leading-none font-black'>All are Freemium</h1>
             <div className='gap-3 flex'>
               <RiTailwindCssFill className='text-zinc-300 h-10 w-auto' />
               <FaHtml5 className='text-zinc-300 h-10 w-auto' />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 2441509..b23159a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -14,7 +14,7 @@ const Home = () => {
       <div className='pt-[4.5rem] px-[0.8rem]'>
         <div className='bg-white border border-neutral-300/40 py-12 rounded-[1rem] flex flex-col'>
           {/* Rendered Hero */}
-          <div className='lg:px-24 md:px-12'>
+          <div className='lg:px-24 md:px-12 px-4'>
             <Hero />
           </div>
           {/* Interface Overview */}