Fix padings

wiaio · Feb 2, 2024 · 37f8bf5 · 37f8bf5
1 parent dc826b7
commit 37f8bf5
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 63 deletions.
diff --git a/src/components/benefits.tsx b/src/components/benefits.tsx
@@ -11,14 +11,14 @@ const Benefits = () => {
   return (
     <div id='#benefits' className='benefits-section container-border-bottom'>
       <div className='container mx-auto'>
-        <div className='flex flex-col relative lg:py-24 pt-10 pb-5'>
-          <div className='lg:col-span-12 flex flex-col pb-10'>
-            <h2 className='lg:text-display-lg text-display-md font-semibold pb-4 text-left'>
+        <div className='flex flex-col relative lg:py-24 py-20'>
+          <div className='lg:col-span-12 flex flex-col'>
+            <h2 className='lg:text-display-lg text-display-md font-semibold pb-14 text-left'>
               Benefits of working with us
             </h2>
           </div>
-          <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-6 md:gap-6 gap-6 items-center relative'>
-            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-12'>
+          <div className='grid lg:grid-cols-12 grid-cols-1 gap-8 items-center relative'>
+            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row'>
               <div className='image-circle mr-10'>
                 <FontAwesomeIcon icon={faAtomSimple} className='icon' />
               </div>
@@ -31,7 +31,7 @@ const Benefits = () => {
                 </p>
               </div>
             </div>
-            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-12'>
+            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row'>
               <div className='image-circle mr-10'>
                 <FontAwesomeIcon icon={faGaugeCircleBolt} className='icon' />
               </div>
@@ -46,7 +46,7 @@ const Benefits = () => {
               </div>
             </div>
 
-            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-12'>
+            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row'>
               <div className='image-circle mr-10'>
                 <FontAwesomeIcon icon={faArrowUpRightDots} className='icon' />
               </div>
@@ -61,7 +61,7 @@ const Benefits = () => {
               </div>
             </div>
 
-            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-12'>
+            <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row'>
               <div className='image-circle mr-10'>
                 <FontAwesomeIcon
                   icon={faHandHoldingSeedling}

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -12,23 +12,23 @@ const Footer = () => {
   return (
     <footer className='bg-black text-white'>
       <div className='container mx-auto'>
-        <div className='flex flex-col md:py-20 pt-12 pb-16 md:gap-24 gap-16 relative'>
+        <div className='flex flex-col md:py-20 pt-12 pb-24 md:gap-24 gap-16 relative'>
           <div className='grid lg:grid-cols-12 md:grid-cols-12 sm:grid-cols-12 xl:gap-8 gap-4 items-center relative'>
-            <div className=' sm:col-span-4 h-full flex flex-col items-center mb-5'>
+            <div className=' sm:col-span-4 h-full flex flex-col items-center'>
               <p className='text-body-lg font-medium'>Company</p>
               <p className='text-body-sm text-neutral-300'>About</p>
               <p className='text-body-sm text-neutral-300'>Jobs</p>
               <p className='text-body-sm text-neutral-300'>Contact</p>
             </div>
 
-            <div className=' sm:col-span-4 h-full flex flex-col items-center mb-5'>
+            <div className=' sm:col-span-4 h-full flex flex-col items-center'>
               <p className='text-body-lg font-medium'>Legal</p>
               <p className='text-body-sm text-neutral-300'>Cookies Policy</p>
               <p className='text-body-sm text-neutral-300'>
                 Terms & Conditions
               </p>
             </div>
-            <div className=' sm:col-span-4 h-full flex flex-col items-center mb-5'>
+            <div className=' sm:col-span-4 h-full flex flex-col items-center'>
               <p className='text-body-lg font-medium'>Follow us</p>
               <p className='text-body-sm text-neutral-300'>LinkedIn</p>
               <p className='text-body-sm text-neutral-300'>Twitter</p>

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -5,36 +5,32 @@ const Hero = () => {
   return (
     <div id='#hero' className='container-border-bottom'>
       <div className='container mx-auto'>
-        <div className='lg:py-20 md:py-14 pt-5 pb-5'>
-          <div className='flex flex-col relative lg:py-0 pb-10 overflow-x-hidden sm:overflow-visible'>
-            <div className='absolute lg:block hidden h-16 bg-white bottom-0 left-0 right-0'></div>
-            <div className='absolute lg:block hidden h-16 bg-white top-0 left-0 right-0'></div>
-            <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-8 items-center  relative'>
-              <div className='hero-text lg:col-span-6 flex flex-col items-start xl:pr-18 lg:pr-16 '>
-                <h2 className='lg:text-display-lg text-display-md font-semibold pb-4'>
-                  Empowering Sustainable Energy <br></br>Through Real-Time
-                  Monitoring
-                </h2>
-                <p className='text-body-md font-normal text-neutral-600 pb-8'>
-                  At Wia, we're redefining the future of energy. Our innovative
-                  solutions transform how businesses monitor, analyse, and
-                  optimise their energy usage, paving the way for a smarter,
-                  more efficient operational landscape.
-                </p>
-                <Button
-                  label='Speak to an Expert'
-                  link='mailto:sales@wia.io'
-                  size='lg'
-                />
-              </div>
+        <div className='flex flex-col relative md:py-24 py-16 overflow-x-hidden sm:overflow-visible'>
+          <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-8 items-center  relative'>
+            <div className='hero-text lg:col-span-6 flex flex-col items-start xl:pr-18 lg:pr-16 '>
+              <h2 className='lg:text-display-lg text-display-md font-semibold pb-4'>
+                Empowering Sustainable Energy <br></br>Through Real-Time
+                Monitoring
+              </h2>
+              <p className='text-body-md font-normal text-neutral-600 pb-8'>
+                At Wia, we're redefining the future of energy. Our innovative
+                solutions transform how businesses monitor, analyse, and
+                optimise their energy usage, paving the way for a smarter, more
+                efficient operational landscape.
+              </p>
+              <Button
+                label='Speak to an Expert'
+                link='mailto:sales@wia.io'
+                size='lg'
+              />
+            </div>
 
-              <div className='circle-background flex relative overflow-x-hidden sm:overflow-visible'>
-                <img
-                  src='./energy-page.png'
-                  alt='energy-page'
-                  className='static-image rounded-lg'
-                />
-              </div>
+            <div className='circle-background flex relative overflow-x-hidden sm:overflow-visible'>
+              <img
+                src='./energy-page.png'
+                alt='energy-page'
+                className='static-image rounded-lg'
+              />
             </div>
           </div>
         </div>

diff --git a/src/components/metrics.tsx b/src/components/metrics.tsx
@@ -4,29 +4,29 @@ const Metrics = () => {
   return (
     <div id='#metrics' className='metrics-container container-border-bottom'>
       <div className='container mx-auto'>
-        <div className='flex flex-col relative lg:pt-20 pt-10 pb-5'>
-          <div className='grid lg:grid-cols-12 md:grid-cols-6 grid-cols-1 xl:gap-8 gap-4 items-center relative'>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600 mb-5'>
+        <div className='flex flex-col relative md:py-20 py-16'>
+          <div className='grid lg:grid-cols-12 md:grid-cols-6 grid-cols-1 xl:gap-8 gap-8 items-center relative'>
+            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>
                 €200 billion
               </h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Lost annually due to energy inefficiencies
               </p>
             </div>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600 mb-5'>
+            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>36%</h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Amount of global energy used by commercial buildings
               </p>
             </div>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600 mb-5'>
+            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>97</h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Dedicated Members
               </p>
             </div>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600 mb-5'>
+            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>30%</h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Of energy consumed by enterprises that is wasted

diff --git a/src/components/powered-by.tsx b/src/components/powered-by.tsx
@@ -12,7 +12,7 @@ const PoweredBy = () => {
   return (
     <div id='#powered0by' className='powered-by-section'>
       <div className='container mx-auto'>
-        <div className='flex flex-col relative lg:py-24 pt-10 pb-5'>
+        <div className='flex flex-col relative lg:py-24 py-20'>
           <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-6 md:gap-6 gap-6 items-center relative'>
             <div className='lg:col-span-5 flex flex-col pb-5 xl:pr-12 lg:pr-12'>
               <h2 className='lg:text-display-lg text-display-md font-semibold pb-2 text-left '>
@@ -23,8 +23,8 @@ const PoweredBy = () => {
               </p>
             </div>
             <div className='lg:col-span-7 flex flex-col'>
-              <div className='grid lg:grid-cols-12 md:grid-cols-12 grid-cols-1 xl:gap-6 md:gap-6 gap-6 items-center relative'>
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 pl-14'>
+              <div className='grid lg:grid-cols-12 md:grid-cols-12 grid-cols-1 gap-10 items-center relative'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faSensorCloud} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>
@@ -35,7 +35,7 @@ const PoweredBy = () => {
                     </p>
                   </div>
                 </div>
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faChartMixed} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>
@@ -47,7 +47,7 @@ const PoweredBy = () => {
                   </div>
                 </div>
 
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faPlug} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>
@@ -59,7 +59,7 @@ const PoweredBy = () => {
                   </div>
                 </div>
 
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faEarthEurope} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>

diff --git a/src/components/solutions.tsx b/src/components/solutions.tsx
@@ -11,16 +11,16 @@ const Solutions = () => {
   return (
     <div id='#solutions' className=''>
       <div className='container mx-auto'>
-        <div className='flex flex-col relative lg:pt-24 pt-10 pb-5'>
-          <div className='lg:col-span-12 flex flex-col items-center pb-10'>
-            <h2 className='lg:text-display-lg text-display-md font-semibold pb-4 text-center lg:px-24'>
+        <div className='flex flex-col relative md:py-24 py-16'>
+          <div className='lg:col-span-12 flex flex-col items-center'>
+            <h2 className='lg:text-display-lg text-display-md font-semibold pb-14 text-center lg:px-24'>
               Innovative Energy Solutions Tailored for Your Business
             </h2>
           </div>
-          <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-8 gap-4 items-center relative'>
-            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center mb-5'>
+          <div className='grid lg:grid-cols-12 grid-cols-1 gap-8 items-center relative'>
+            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center'>
               <FontAwesomeIcon icon={faMeterBolt} className='icon mb-6' />
-              <h2 className='lg:text-4xl text-display-xs font-semibold text-center mb-2'>
+              <h2 className='lg:text-4xl text-display-xs font-semibold text-center pb-2'>
                 Connect Any Meter
               </h2>
               <p className='text-body-md font-normal text-neutral-600 text-center'>
@@ -30,9 +30,9 @@ const Solutions = () => {
                 monitoring.
               </p>
             </div>
-            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center mb-5'>
+            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center'>
               <FontAwesomeIcon icon={faRouter} className='icon mb-6' />
-              <h2 className='lg:text-4xl text-display-xs font-semibold text-center mb-2'>
+              <h2 className='lg:text-4xl text-display-xs font-semibold text-center pb-2'>
                 Advanced Wireless Networks
               </h2>
               <p className='text-body-md font-normal text-neutral-600 text-center'>
@@ -42,9 +42,9 @@ const Solutions = () => {
                 operational environments.
               </p>
             </div>
-            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center mb-5'>
+            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center'>
               <FontAwesomeIcon icon={faBrainCircuit} className='icon mb-6' />
-              <h2 className='lg:text-4xl text-display-xs font-semibold text-center mb-2'>
+              <h2 className='lg:text-4xl text-display-xs font-semibold text-center pb-2'>
                 State-of-the-Art Cloud Analytics
               </h2>
               <p className='text-body-md font-normal text-neutral-600 text-center'>