From ea99354cdc9fd63eec7bbac5aca550f2dbae8d0f Mon Sep 17 00:00:00 2001
From: saksham <sakshamchauhan79@gmail.com>
Date: Fri, 14 Oct 2022 17:18:35 +0530
Subject: [PATCH] texhnologies component added

---
 src/assets/index.ts                           |  12 +-
 src/components/Button.tsx                     |  14 ++-
 src/components/CombCell.tsx                   |  78 +++++-------
 src/components/Footer.tsx                     |   7 +-
 src/components/Navbar.tsx                     |   8 +-
 .../blog-page-components/MainCard.tsx         |   2 +-
 .../section-comonents/why-koders/Info.tsx     |   4 +-
 src/helper/index.ts                           |   6 +
 src/pages/ReadMoreBlog.tsx                    |   1 +
 src/sections/Hero.tsx                         |   4 +-
 src/sections/Pricing.tsx                      |   5 +-
 src/sections/Technologies.tsx                 | 114 +++++++-----------
 src/sections/WhyKoders.tsx                    |   7 +-
 tailwind.config.js                            |  15 ++-
 14 files changed, 128 insertions(+), 149 deletions(-)

diff --git a/src/assets/index.ts b/src/assets/index.ts
index 77c93cf..7ff0005 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -98,7 +98,7 @@ export const toolsAndtechLogo = [
   { src: tailwind, x: "left-[45%]", y: "top-[0]" },
   { src: chakra, x: "left-[45%]", y: "top-[0]" },
   { src: next, x: "left-[45%]", y: "top-[0]" },
-  { src: express, x: "left-[45%]", y: "top-[0]" },
+  // { src: express, x: "left-[45%]", y: "top-[0]" },
   { src: react, x: "left-[45%]", y: "top-[0]" },
   { src: html, x: "left-[45%]", y: "top-[0]" },
   { src: css, x: "left-[45%]", y: "top-[0]" },
@@ -112,23 +112,23 @@ export const toolsAndtechLogo = [
   { src: keras, x: "left-[45%]", y: "top-[0]" },
   { src: flutter, x: "left-[45%]", y: "top-[0]" },
   { src: dart, x: "left-[45%]", y: "top-[0]" },
-  { src: ios, x: "left-[45%]", y: "top-[0]" },
-  { src: android, x: "left-[45%]", y: "top-[0]" },
+  // { src: ios, x: "left-[45%]", y: "top-[0]" },
+  // { src: android, x: "left-[45%]", y: "top-[0]" },
   { src: firebase, x: "left-[45%]", y: "top-[0]" },
-  { src: go, x: "left-[45%]", y: "top-[0]" },
+  // { src: go, x: "left-[45%]", y: "top-[0]" },
   { src: rust, x: "left-[45%]", y: "top-[0]" },
   { src: ruby, x: "left-[45%]", y: "top-[0]" },
   { src: tensorflow, x: "left-[45%]", y: "top-[0]" },
   { src: pytorch, x: "left-[45%]", y: "top-[0]" },
   { src: docker, x: "left-[45%]", y: "top-[0]" },
-  { src: rails, x: "left-[45%]", y: "top-[0]" },
+  // { src: rails, x: "left-[45%]", y: "top-[0]" },
   { src: portainer, x: "left-[45%]", y: "top-[0]" },
   { src: grafana, x: "left-[45%]", y: "top-[0]" },
   { src: teamCity, x: "left-[45%]", y: "top-[0]" },
   { src: redmine, x: "left-[45%]", y: "top-[0]" },
   { src: hasura, x: "left-[45%]", y: "top-[0]" },
   { src: cloud, x: "left-[45%]", y: "top-[0]" },
-  { src: stripe, x: "left-[45%]", y: "top-[0]" },
+  // { src: stripe, x: "left-[45%]", y: "top-[0]" },
   { src: twilio, x: "left-[45%]", y: "top-[0]" },
 ];
 
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 2ea8968..20386f7 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -6,8 +6,16 @@ interface Props {
   logo?: string;
   hoverLogo?: string;
   OnClick: () => void;
+  logoStyle?: string;
 }
-const Button = ({ className, text, logo, OnClick, hoverLogo }: Props) => {
+const Button = ({
+  className,
+  text,
+  logo,
+  OnClick,
+  hoverLogo,
+  logoStyle,
+}: Props) => {
   const [iconStyle, setIconStyle] = useState("");
   return (
     <button
@@ -18,12 +26,12 @@ const Button = ({ className, text, logo, OnClick, hoverLogo }: Props) => {
     >
       {logo ? (
         iconStyle && hoverLogo ? (
-          <img src={hoverLogo} className={`h-5 mr-2`} alt="icon" />
+          <img src={hoverLogo} className={`h-5 mr-2 ${logoStyle}`} alt="icon" />
         ) : (
           <img
             src={logo}
             alt="icon"
-            className={`h-5 mr-2 hover:brightness-75 ${iconStyle}`}
+            className={`h-5 mr-2 hover:brightness-75 ${iconStyle} ${logoStyle}`}
           />
         )
       ) : null}
diff --git a/src/components/CombCell.tsx b/src/components/CombCell.tsx
index 3f11ec8..e2dc319 100644
--- a/src/components/CombCell.tsx
+++ b/src/components/CombCell.tsx
@@ -1,25 +1,31 @@
-import React, { useState } from "react";
+import React from "react";
 
 interface Props {
-  logo: string;
+  logo?: string;
   x?: string;
   y?: string;
+  className?: string;
 }
 
-const CombCell = ({ logo, x, y }: Props) => {
-  const [iconStyle, setIconStyle] = useState(false);
+const CombCell = ({ logo, className, x, y }: Props) => {
+  const [iconStyle, setIconStyle] = React.useState("");
   return (
-    <div className="relative bg-main-teal w-[3.5rem] h-[2rem]">
-      <div className="h-[2rem] w-[2rem] bg-main-teal rotate-[139deg] translate-x-[11px] translate-y-[-16px] skew-x-[19deg] skew-y-[10deg]"></div>
-      <div className="h-[2rem] w-[2rem] bg-main-teal rotate-[139deg] translate-x-[11px] translate-y-[-16px] skew-x-[19deg] skew-y-[10deg]"></div>
-      <div className="absolute left-[0.2rem] top-[0.12rem] bg-gray-500 w-[3.08rem] h-[1.7rem]">
-        <div className="h-[1.71rem] w-[1.71rem] bg-gray-500 rotate-[139deg] translate-x-[10px] translate-y-[-13px] skew-x-[19deg] skew-y-[10deg]"></div>
-        <div className="h-[1.71rem] w-[1.71rem] bg-gray-500 rotate-[139deg] translate-x-[10px] translate-y-[-12.9px] skew-x-[19deg] skew-y-[10deg]"></div>
-        <img
-          src={logo}
-          alt=""
-          className="w-full h-full left-0 top-0 absolute"
-        />
+    <div
+      className={`absolute ${className}`}
+      style={{ top: `${x}px`, left: `${y}px` }}
+    >
+      <div
+        className="block my-0 mx-auto relative w-[90px] h-[80px] bg-main-teal box-border rotate-90"
+        style={{ ...hex }}
+      >
+        <div
+          className="absolute bg-main-secondary top-[4px] left-[4px] w-[82px] h-[72px] hover:bg-white flex justify-center items-center"
+          style={{ ...hexBg }}
+          onMouseEnter={() => setIconStyle("invert")}
+          onMouseLeave={() => setIconStyle("")}
+        >
+          <img src={logo} className={"-rotate-90 h-8" + " " + iconStyle} />
+        </div>
       </div>
     </div>
   );
@@ -27,36 +33,12 @@ const CombCell = ({ logo, x, y }: Props) => {
 
 export default CombCell;
 
-// <div
-//   // className="absolute left-[70%] top-[10%]"
-//   className={`absolute ${x} ${y}`}
-// >
-//   <div className="relative h-[49px] w-[100px] bg-main-teal flex justify-center items-center">
-//     <div className="absolute bottom-[-123%] border-b-transparent border-r-transparent border-l-transparent border-t-[30px] border-b-[30px] border-r-[49.5px] border-l-[49.5px] border-t-main-teal"></div>
-//     <div className="absolute top-[-122%] border-t-transparent border-r-transparent border-l-transparent border-t-[30px] border-b-[30px] border-r-[49.5px] border-l-[49.5px] border-b-main-teal"></div>
-//     {/* Inner shape */}
-//     <div
-//       onMouseEnter={() => setIconStyle(true)}
-//       onMouseLeave={() => setIconStyle(false)}
-//       className={`h-[45px] w-[94px] relative z-10 flex items-center justify-center cursor-pointer ${
-//         iconStyle ? "bg-white" : "bg-main-secondary"
-//       }`}
-//     >
-//       <div
-//         className={`absolute bottom-[-116%] border-b-transparent border-r-transparent border-l-transparent border-t-[28px] border-b-[24px] border-r-[47px] border-l-[47px] ${
-//           iconStyle ? "border-t-white" : "border-t-main-secondary"
-//         }`}
-//       ></div>
-//       <div
-//         className={`absolute top-[-115%] left-[1px] border-t-transparent border-r-transparent border-l-transparent border-t-[24px] border-b-[28px] border-r-[46px] border-l-[46px]
-//     ${iconStyle ? "border-b-white" : "border-b-main-secondary "}
-//     `}
-//       ></div>
-//       <img
-//         src={logo}
-//         alt="tech"
-//         className={`z-10 h-10 ${iconStyle ? "invert" : ""}`}
-//       />
-//     </div>
-//   </div>
-// </div>
+const hex: any = {
+  WebkitClipPath: "polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%)",
+};
+
+const hexBg: any = {
+  WebkitClipPath: "polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%)",
+};
+// -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
+// -moz-clip-path: "polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%)",
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 244a335..8bf53e8 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -20,7 +20,12 @@ const Footer = () => {
     <>
       <div className="sm:flex justify-center pl-4 xsm:px-6 sm:px-20 py-10 bg-main-secondary">
         <div className="w-full sm:w-1/4 sm:font-miligramMedium font-miligramLight">
-          <img src={logo} alt="logo" className="h-10" onClick={navToHome} />
+          <img
+            src={logo}
+            alt="logo"
+            className="h-10 cursor-pointer"
+            onClick={navToHome}
+          />
           <div className="flex items-center my-3">
             {[linkedin, github, twitter, discord].map((item, i) => (
               <img
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3bf1d9e..0ef4a88 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,7 +10,7 @@ const Navbar = () => {
     navigate("/");
   }
   return (
-    <div className="z-50 flex w-full bg-main-black-700 px-8 justify-between align-middle md:px-10 text-white py-6 fixed top-0 backdrop-blur-md">
+    <div className="z-50 flex h-[10vh] w-full bg-main-black-700 px-8 justify-between items-center md:px-10 text-white py-6 fixed top-0 backdrop-blur-md">
       <div className="w-fit">
         <img
           src={logo}
@@ -40,20 +40,20 @@ const Navbar = () => {
           />
         </div>
       )}
-      <div className="flex justify-end align-middle w-fit">
+      <div className="flex justify-end items-center w-fit">
         <Button
           OnClick={() => {}}
           logo={discordSvg}
           hoverLogo={discordWhite}
           text="Join Discord"
-          className="hidden sm:flex font-miligramMedium mr-6 border-2 bg-main-blueOpt-200 border-main-blueOpt-1000 text-main-blueOpt-1000 px-5  rounded-lg hover:bg-main-blueOpt-1000 hover:text-white"
+          className="hidden sm:flex font-miligramMedium mr-6 border-2 bg-main-blueOpt-200 border-main-blueOpt-1000 text-main-blueOpt-1000 px-5 py-2  rounded-lg hover:bg-main-blueOpt-1000 hover:text-white"
         />
         <Button
           OnClick={() => {
             navigate("start-project");
           }}
           text="Get Started"
-          className="font-miligramMedium bg-main-greenOpt-200 border-2 border-main-greenOpt-1000 text-main-greenOpt-1000 px-3 sm:px-10 rounded-lg hover:bg-main-greenOpt-1000 hover:text-white"
+          className="font-miligramMedium bg-main-greenOpt-200 border-2 border-main-greenOpt-1000 text-main-greenOpt-1000 px-3 py-2 sm:px-10 rounded-lg hover:bg-main-greenOpt-1000 hover:text-white"
         />
       </div>
     </div>
diff --git a/src/components/pages-components/blog-page-components/MainCard.tsx b/src/components/pages-components/blog-page-components/MainCard.tsx
index 783cfd6..52fbdd9 100644
--- a/src/components/pages-components/blog-page-components/MainCard.tsx
+++ b/src/components/pages-components/blog-page-components/MainCard.tsx
@@ -12,7 +12,7 @@ const MainCard = () => {
       <div className="w-full lg:w-[60%] py-2">
         <img src={blogMain} alt="blogMain" className="w-full h-full" />
       </div>
-      <div className="w-full lg:w-[40%]">
+      <div className="w-full lg:w-[40%] mt-2 sm:mt-0">
         <h1
           className="text-white text-[20px] cursor-pointer font-miligrambold"
           onClick={() => navigate(`${currentPath}/read-more`)}
diff --git a/src/components/section-comonents/why-koders/Info.tsx b/src/components/section-comonents/why-koders/Info.tsx
index 53f6170..2d02f91 100644
--- a/src/components/section-comonents/why-koders/Info.tsx
+++ b/src/components/section-comonents/why-koders/Info.tsx
@@ -35,10 +35,10 @@ const Info = ({
         className="text-[10rem] text-center leading-[135px] bg-gradient-to-r from-white via-main-lightTeal to-main-teal font-battambangMedium"
         text={stat}
       />
-      <p className="text-center text-white text-[15px] lg:text-[22px] my-1 font-battambangMedium">
+      <p className="text-center text-white text-[15px] lg:text-[22px] my-1 lg:mt-8  font-battambangMedium">
         {title}
       </p>
-      <div dangerouslySetInnerHTML={{ __html: html }}></div>
+      <div className="mt-2" dangerouslySetInnerHTML={{ __html: html }}></div>
     </div>
   );
 };
diff --git a/src/helper/index.ts b/src/helper/index.ts
index 4e1062c..fad7df1 100644
--- a/src/helper/index.ts
+++ b/src/helper/index.ts
@@ -53,3 +53,9 @@ export const handleSlider = (
     yDown = null;
   }
 };
+
+export function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
diff --git a/src/pages/ReadMoreBlog.tsx b/src/pages/ReadMoreBlog.tsx
index 23276fb..a536bd2 100644
--- a/src/pages/ReadMoreBlog.tsx
+++ b/src/pages/ReadMoreBlog.tsx
@@ -10,6 +10,7 @@ const ReadMoreBlog = () => {
         OnClick={() => {}}
         logo={backAero}
         text="Back"
+        logoStyle="h-3"
         className="text-white"
       />
       <Divider className="mt-6" />
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
index 73868d9..68de588 100644
--- a/src/sections/Hero.tsx
+++ b/src/sections/Hero.tsx
@@ -12,11 +12,11 @@ const Hero = () => {
         alt=""
         className="absolute -bottom-10 right-0 h-96"
       />
-      <h1 className="leading-[38px] sm:leading-[30px] text-[1.5rem] xsm:text-[2.5rem] sm:text-[4rem] text-white text-center m-0 p-0 font-medium font-miligrambold">
+      <h1 className="leading-[38px] sm:leading-[60px] text-[1.5rem] xsm:text-[2.5rem] sm:text-[4rem] text-white text-center m-0 p-0 font-medium font-miligrambold">
         Infrastructure for
       </h1>
       <GradientText
-        className="leading-[28px] xsm:leading-[38px] sm:leading-[70px] sm:mt-3 w-[95%] mx-auto text-[1.5rem] xsm:text-[2.5rem] sm:text-[4rem] text-center bg-gradient-to-r from-white via-main-lightTeal to-main-teal font-miligrambold"
+        className="leading-[28px] w-fit xsm:leading-[38px] sm:leading-[70px] sm:mt-3 mx-auto text-[1.5rem] xsm:text-[2.5rem] sm:text-[4rem] text-center bg-gradient-to-r from-white via-main-lightTeal to-main-teal font-miligrambold"
         text="High Quality Applications"
       />
       <p className="w-[90%] sm:w-fit mx-auto text-center text-[0.8rem] sm:text-[1.5rem] text-main-light_white pt-6 pb-28 font-miligramLight">
diff --git a/src/sections/Pricing.tsx b/src/sections/Pricing.tsx
index a18bb94..7fb3245 100644
--- a/src/sections/Pricing.tsx
+++ b/src/sections/Pricing.tsx
@@ -81,7 +81,7 @@ const Pricing = () => {
         </span>
       </div>
       <Divider className="h-16" />
-      <div className="hidden md:flex gap-3 lg:gap-8 w-[96%] lg:w-[90%] mx-auto">
+      <div className="hidden justify-center items-center md:flex gap-3 lg:gap-8 w-[96%] lg:w-[90%] mx-auto">
         {pricingCardData.map((item, i) => (
           <PricingCard key={i} {...item} />
         ))}
@@ -110,9 +110,10 @@ const Pricing = () => {
           />
         ))}
         <div className="flex justify-center items-center absolute bottom-0 gap-2">
-          {translatePosition.map((item) => {
+          {translatePosition.map((item, i) => {
             return (
               <div
+                key={i}
                 className={`rounded-full w-2 h-2 ${
                   item === 0 ? "bg-white" : "bg-main-light_white"
                 }`}
diff --git a/src/sections/Technologies.tsx b/src/sections/Technologies.tsx
index 06363aa..20f8ed3 100644
--- a/src/sections/Technologies.tsx
+++ b/src/sections/Technologies.tsx
@@ -1,82 +1,50 @@
-import React, { useEffect } from "react";
-import { github, go, tech, toolsAndtechLogo } from "../assets";
+import React from "react";
+import { toolsAndtechLogo } from "../assets";
 import { CombCell, GradientText } from "../components";
+import { getRandomInt } from "../helper";
 const Technologies = () => {
+  const combInLine = Math.floor(window.screen.width / 70) + 2;
+  const rowsOfComb = Math.floor(window.screen.height / 80) + 2;
+  let tempArr: Array<any> = [];
+  for (let i = 0; i < rowsOfComb; i++) {
+    for (let j = 0; j <= combInLine; j++) {
+      if (tempArr[i]?.length)
+        tempArr[i] = [toolsAndtechLogo[getRandomInt(0, 40)]].concat(tempArr[i]);
+      else tempArr[i] = [toolsAndtechLogo[getRandomInt(0, 40)]];
+    }
+  }
   return (
-    <div className="bg-main-secondary overflow-hidden h-[235px] sm:h-[300px] md:h-[350px] lg:h-[400px] xl:h-[500px]  relative flex justify-center items-center">
-      <img src={tech} alt="" className="absolute left-0 -top-3  w-fit" />
-      <div className="w-full p-5 bg-main-secondary z-10">
-        <GradientText
-          className="w-[90%] mx-auto sm:w-fit text-[1.2rem] sm:text-[2rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
-          text="Technologies that make sense"
-        />
-        <p className="text-[0.8rem] sm:text-[1rem] w-full mx-auto text-center text-main-light_white font-miligramMedium">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
-          dolor sit amet, consectetur adipiscing elit.
-        </p>
+    <div className="bg-main-secondary overflow-hidden h-[235px] sm:h-[300px] md:h-[350px] lg:h-[90vh] xl:h-[90vh]  relative flex justify-center items-center">
+      <div className="absolute w-full h-full flex justify-center items-center">
+        <div className="p-4 z-10 bg-main-secondary w-full">
+          <GradientText
+            className="w-[90%] mt-4 mx-auto sm:w-fit text-[1.2rem] sm:text-[2rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
+            text="Technologies that make sense"
+          />
+          <p className="text-[0.8rem] sm:text-[1rem] mx-auto text-center text-main-light_white font-miligramMedium">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit.
+          </p>
+        </div>
       </div>
+      {tempArr.map((item, i) => {
+        const top = 65 * i;
+        return item.map((item2: any, j: any) => {
+          let left = 0;
+          if (i % 2 === 0) left = 76 * j - 30;
+          else left = 76 * j - 68;
+          return (
+            <CombCell
+              key={i + j}
+              logo={item2.src}
+              x={top.toString()}
+              y={left.toString()}
+            />
+          );
+        });
+      })}
     </div>
   );
 };
 
 export default Technologies;
-
-// import { polygonStyle } from "../helper/style";
-// import { defineHex, Grid, Hex, rectangle } from "honeycomb-grid";
-// import { SVG } from "@svgdotjs/svg.js";
-// let ROW_COUNT = 0;
-// let SPACE_COUNT = 0;
-// const Technologies = () => {
-//   // const WideHex = defineHex({
-//   //   dimensions: 30, // wide hexes
-//   // });
-//   // const grid = new Grid(WideHex, rectangle({ width: 5, height: 5 }));
-
-//   // useEffect(() => {
-//   //   const elm = document.getElementById("mm");
-//   //   const draw = SVG().addTo(elm).size("100%", "100%");
-//   //   grid.forEach(renderSVG);
-//   //   function renderSVG(hex: Hex) {
-//   //     const arg: any = hex.corners.map(({ x, y }) => `${x},${y}`);
-//   //     const polygon = draw
-//   //       // create a polygon from a hex's corner points
-//   //       .polygon(arg)
-//   //       .fill("none")
-//   //       .stroke({ width: 2, color: "#999" });
-
-//   //     return draw.group().add(polygon);
-//   //   }
-//   // }, []);
-//   return (
-//     <div className="bg-main-secondary overflow-hidden">
-//       {/* <GradientText
-//         className="text-[35px] w-fit mx-auto text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
-//         text="Technologies that make sense"
-//       /> */}
-//       <div className="relative h-[50vh]" id="mm">
-//         {toolsAndtechLogo.map((item, i) => {
-//           if (i % 24 === 0) {
-//             console.log(i, ROW_COUNT);
-//             if (i > 0) ROW_COUNT++;
-//             SPACE_COUNT = 0;
-//           }
-//           // const top = "top-" + `[${ROW_COUNT * 4}%]`;
-//           // const left = "left-" + `[${SPACE_COUNT * 4}%]`;
-//           const top = ROW_COUNT * 4 - 4;
-//           const left = SPACE_COUNT * 4.2;
-//           SPACE_COUNT += 1;
-//           // if (i > 2) return;
-//           return (
-//             <div
-//               key={i}
-//               className={`absolute`}
-//               style={{ left: `${left}%`, top: `${top}%` }}
-//             >
-//               <CombCell key={i} x={item.x} y={item.y} logo={item.src} />
-//             </div>
-//           );
-//         })}
-//       </div>
-//     </div>
-//   );
-// };
diff --git a/src/sections/WhyKoders.tsx b/src/sections/WhyKoders.tsx
index 9b84bac..d828851 100644
--- a/src/sections/WhyKoders.tsx
+++ b/src/sections/WhyKoders.tsx
@@ -60,7 +60,7 @@ const WhyKoders = () => {
     handleSlider("whyKoders", handleLeftSlide, handleRightSlide);
   });
   return (
-    <div className="py-16 bg-main-secondary">
+    <div className="py-16 bg-main-secondary h-[90vh] xxl:h-auto">
       <h1 className="w-[90%] mx-auto sm:w-full text-[1.2rem] sm:text-[2rem] text-center font-medium text-white font-miligrambold">
         Why trust&nbsp;
         <span
@@ -80,7 +80,7 @@ const WhyKoders = () => {
         your business?
       </h1>
 
-      <div className="hidden md:flex gap-2 mt-10 w-[95%] lg:w-[85%] mx-auto">
+      <div className="hidden md:flex gap-2 mt-16 w-[95%] lg:w-[85%] mx-auto">
         {whyWe.map((item, i) => (
           <Info
             className={item.class}
@@ -128,9 +128,10 @@ const WhyKoders = () => {
         ))}
       </div>
       <div className="flex md:hidden justify-center items-center gap-2 mt-2">
-        {translatePosition.map((item) => {
+        {translatePosition.map((item, i) => {
           return (
             <div
+              key={i}
               className={`rounded-full w-2 h-2 ${
                 item === 0 ? "bg-white" : "bg-main-light_white"
               }`}
diff --git a/tailwind.config.js b/tailwind.config.js
index 55f04c9..e9a7c8e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+const { screens } = require("tailwindcss/defaultTheme");
+
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
@@ -93,10 +95,15 @@ module.exports = {
         battambangMedium: ["BATTAMBANG MEDIUM"],
         battambangBold: ["BATTAMBANG BOLD"],
       },
-      screens: {
-        xsm: "300px",
-        msm: "340px",
-      },
+    },
+    screens: {
+      xsm: "300px",
+      msm: "340px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      xxl: "1536px",
     },
   },
   plugins: [],