Aling icons

wiaio · Feb 1, 2024 · fa456eb · fa456eb
1 parent b93d2c1
commit fa456eb
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/src/components/approach.tsx b/src/components/approach.tsx
@@ -8,7 +8,7 @@ import {
 
 const Approach = () => {
   return (
-    <div id='#approach' className='approach-section'>
+    <div id='#approach' className='approach-section overflow-x-hidden sm:overflow-visible'>
       <div className='approach-background'></div>
       <div className='container mx-auto'>
         <div className='flex flex-col relative lg:py-24 pt-10 pb-5'>

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -6,7 +6,7 @@ const Hero = () => {
     <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-hidden sm:overflow-visible'>
+          <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'>
@@ -28,7 +28,7 @@ const Hero = () => {
                 />
               </div>
 
-              <div className='circle-background flex relative overflow-hidden sm:overflow-visible'>
+              <div className='circle-background flex relative overflow-x-hidden sm:overflow-visible'>
                 <img
                   src='./energy-page.png'
                   alt='energy-page'

diff --git a/src/components/powered-by.tsx b/src/components/powered-by.tsx
@@ -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'>
+              <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'>
                   <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'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 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'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 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'>
+                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pb-5 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/styles/styles.scss b/src/styles/styles.scss
@@ -73,7 +73,6 @@ body {
 
 .approach-section {
   position: relative;
-  overflow: hidden;
   .approach-background {
     width: 200%;
     height: 100%;
@@ -133,6 +132,7 @@ body {
 }
 
 .powered-by-section {
+  position: relative;
   img {
     display: flex;
     padding: 8px;
@@ -141,6 +141,10 @@ body {
     width: 48px;
     height: 48px;
   }
+  .icon {
+    position: absolute;
+    left: 0;
+  }
 }
 
 .talk-to-us-section {

diff --git a/static/energy-page.png b/static/energy-page.png