refactoring choos section => tailwindcss

src/components/BlogPage/Blog/Blog.jsx → src/components/Blog/Blog.jsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
-import Label from '../../../components/Label/Label';
-import calendar from '../../../img/HomePage/Blog/calendar.svg';
+import Label from '../../components/Label/Label';
+import calendar from '../../img/HomePage/Blog/calendar.svg';
 
 export default function Blog({ events }) {
   const elements = events.map(

src/components/BlogPage/index.jsx

@@ -1,4 +1,4 @@
 import Banner from './Banner/Banner';
-import Blog from './Blog/Blog';
+import Blog from '../Blog/Blog';
 
 export { Banner, Blog };

src/components/HomePage/Choos/Choos.jsx

@@ -1,91 +1,63 @@
-import {
-  StyledContainer,
-  StyledImageSide,
-  StyledImageContainer,
-  StyledLabel,
-  StyledLabelIcon,
-  StyledLabelText,
-  StyledContentSide,
-  StyledContentContainer,
-  StyledContentTitile,
-  StyledContentText,
-  StyledIconsContainer,
-  StyledIconsColumn,
-  StyledIconsItem,
-  StyledIcon,
-  StyledIconText,
-} from './Choos.styled';
 import Label from '../../../components/Label/Label';
 
-// import icons
-import box from '../../../img/icons/box_round.png';
-import world from '../../../img/icons/world_round.png';
-import clock from '../../../img/icons/clock_round.png';
-import ship from '../../../img/icons/ship_round.png';
-import handfree from '../../../img/icons/handfree_round.png';
-import money from '../../../img/icons/money_round.png';
+import bg from '../../../img/HomePage/Choose/banner.jpg';
+import icon from '../../../img/HomePage/Choose/icon.svg';
+
+export default function Choos({ chooses }) {
+  const elements = chooses.map(({ id, label, img }) => (
+    <li className="min-w-[223px] flex items-center gap-3" key={id}>
+      <div
+        className="w-[63px] h-[63px]"
+        style={{ backgroundImage: `url(${img})` }}
+      />
+      <p className=" font-rubik font-normal text-xl text-heading-color">
+        {label}
+      </p>
+    </li>
+  ));
 
-export default function Choos() {
   return (
-    <StyledContainer>
-      <StyledImageSide>
-        <StyledImageContainer>
-          <StyledLabel>
-            <StyledLabelIcon />
-            <StyledLabelText>
+    <section className=" w-full h-[897px] bg-section-bg flex justify-center">
+      <div className=" h-full w-1/2 bg-primary-blue relative">
+        <div
+          className="max-w-[929px] h-[610px] relative right-[-109px] bottom-[-142px] flex justify-center"
+          style={{ backgroundImage: ` url(${bg})`, backgroundSize: 'cover' }}
+        >
+          <div
+            className=" w-[417px] absolute bottom-0 flex items-center gap-5 py-[30px] px-[33px]"
+            style={{
+              background:
+                'linear-gradient(94deg,#ffb629 -1.21%,#ffda56 58.66%,#ffd7a6 116.84%)',
+            }}
+          >
+            <div
+              className=" w-[65px] h-[88px] "
+              style={{
+                backgroundImage: `url(${icon})`,
+                backgroundRepeat: 'no-repeat',
+              }}
+            />
+            <p className=" font-rubik font-normal text-2xl w-[259px]">
               Moving your products across borders
-            </StyledLabelText>
-          </StyledLabel>
-        </StyledImageContainer>
-      </StyledImageSide>
-      <StyledContentSide>
-        <StyledContentContainer>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className=" w-1/2 h-full flex flex-col justify-center pl-[192px]">
+        <>
           <Label text="Why Choose" />
-          <StyledContentTitile>
+          <h3 className=" font-rubik font-semibold text-4xl text-heading-color w-[438px] mt-3 mb-4">
             We create opportunity to reach potential
-          </StyledContentTitile>
-          <StyledContentText>
+          </h3>
+          <p className=" font-krab font-medium text-base text-paragraph-color w-[486px] mb-[61px]">
             Leverage agile frameworks to provide a robust synopsis for strategy
             foster collaborative thinking to further the overall value
             proposition.{' '}
-          </StyledContentText>
-          <StyledIconsContainer>
-            <StyledIconsColumn>
-              <StyledIconsItem>
-                <StyledIcon bg={box} />
-                <StyledIconText>Safe Package</StyledIconText>
-              </StyledIconsItem>
-
-              <StyledIconsItem>
-                <StyledIcon bg={world} />
-                <StyledIconText>Global Tracking</StyledIconText>
-              </StyledIconsItem>
-
-              <StyledIconsItem>
-                <StyledIcon bg={clock} />
-                <StyledIconText>In Time Delivery</StyledIconText>
-              </StyledIconsItem>
-            </StyledIconsColumn>
-
-            <StyledIconsColumn>
-              <StyledIconsItem>
-                <StyledIcon bg={ship} />
-                <StyledIconText>Ship Everyware</StyledIconText>
-              </StyledIconsItem>
-
-              <StyledIconsItem>
-                <StyledIcon bg={handfree} />
-                <StyledIconText>24/7 Support</StyledIconText>
-              </StyledIconsItem>
+          </p>
 
-              <StyledIconsItem>
-                <StyledIcon bg={money} />
-                <StyledIconText>Transparant Pricing</StyledIconText>
-              </StyledIconsItem>
-            </StyledIconsColumn>
-          </StyledIconsContainer>
-        </StyledContentContainer>
-      </StyledContentSide>
-    </StyledContainer>
+          <ul className=" flex flex-wrap gap-[72px] gap-y-5">{elements}</ul>
+        </>
+      </div>
+    </section>
   );
 }