From 65d71740a56aa0aa66fa9fd47b3f865193b33b2a Mon Sep 17 00:00:00 2001
From: Scharfcsh <amanadhikari2003@gmail.com>
Date: Thu, 19 Dec 2024 22:16:46 +0530
Subject: [PATCH] fixed The horizontal overflow

---
 src/components/Business.jsx     |  88 +++++++++++------------
 src/components/Hero.jsx         | 124 ++++++++++++++++----------------
 src/components/Testimonials.jsx |  78 ++++++++++----------
 3 files changed, 145 insertions(+), 145 deletions(-)

diff --git a/src/components/Business.jsx b/src/components/Business.jsx
index 90234ef..ff48828 100644
--- a/src/components/Business.jsx
+++ b/src/components/Business.jsx
@@ -1,45 +1,45 @@
-import React from 'react'
-import { features } from '../constants'
-import styles, {layout} from '../styles'
-import Button from './Button.jsx'
-
-
-const FeatureCard=({icon, title,content, index})=>(
-  <div className={`flex flex-row p-6 rounded-[20px] ${index !== features.length-1? "mb-6":"mb-0"} feature-card`}>
-    <div className={`w-[64px] h-[64px] rounded-full ${styles.flexCenter} bg-dimBlue`}>
-      <img src={icon} alt='icon' className='w-[50%] h-[50%] object-contain'/>
-    </div>
-    <div className='flex-1 flex flex-col ml-3'>
-      <h4 className='font-poppins font-semibold text-white text-[18px] leading-[23px] mb-1'>
-        {title}
-      </h4>
-      <p className='font-poppins font-normal text-dimWhite text-[16px] leading-[24px] mb-1'>
-        {content}
-      </p>
-    </div>
-  </div>
-)
-
-
-
-function Business() {
-  return (
-   <section id='features' className={layout.section}>
-      <div className={layout.sectionInfo}>
-        <h2 className={`${styles.heading2} font-bold`}>You do the business, <br className='sm:block hidden'/>we’ll handle the money.</h2>
-
-        <p className={`${styles.paragraph} max-w-[480px] mt-5 font-normal text-[18px]`}>With the right credit card, you can improve your financial life by building credit, earning rewards and saving money. But with hundreds of credit cards on the market.</p>
-
-        <Button styles="mt-10"/>
-      </div>
-      <div className={`${layout.sectionImg} flex-col`}>
-        {features.map((feature,index )=>(
-            <FeatureCard key={feature.id} {...feature}/>
-        ))}
-
-      </div>
-   </section>
-  )
-}
-
+import React from 'react'
+import { features } from '../constants'
+import styles, {layout} from '../styles'
+import Button from './Button.jsx'
+
+
+const FeatureCard=({icon, title,content, index})=>(
+  <div className={`flex flex-row p-6 rounded-[20px] ${index !== features.length-1? "mb-6":"mb-0"} feature-card`}>
+    <div className={`w-[64px] h-[64px] rounded-full ${styles.flexCenter} bg-dimBlue`}>
+      <img src={icon} alt='icon' className='w-[50%] h-[50%] object-contain'/>
+    </div>
+    <div className='flex-1 flex flex-col ml-3'>
+      <h4 className='font-poppins font-semibold text-white text-[18px] leading-[23px] mb-1'>
+        {title}
+      </h4>
+      <p className='font-poppins font-normal text-dimWhite text-[16px] leading-[24px] mb-1'>
+        {content}
+      </p>
+    </div>
+  </div>
+)
+
+
+
+function Business() {
+  return (
+   <section id='features' className={layout.section}>
+      <div className={layout.sectionInfo}>
+        <h2 className={`${styles.heading2} font-bold`}>You do the business, <br className='sm:block hidden'/>we’ll handle the money.</h2>
+
+        <p className={`${styles.paragraph} max-w-[480px] mt-5 font-normal text-[18px]`}>With the right credit card, you can improve your financial life by building credit, earning rewards and saving money. But with hundreds of credit cards on the market.</p>
+
+        <Button styles="mt-10"/>
+      </div>
+      <div className={`${layout.sectionImg} flex-col`}>
+        {features.map((feature,index )=>(
+            <FeatureCard key={feature.id} {...feature}/>
+        ))}
+
+      </div>
+   </section>
+  )
+}
+
 export default Business
\ No newline at end of file
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 3be0e7f..d4ce42e 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,62 +1,62 @@
-import React from "react";
-import styles from "../styles.js";
-import { discount, robot } from "../assets";
-import GetStarted from "./GetStarted.jsx";
-
-function Hero() {
-  return (
-    <section
-      id="home"
-      className={`flex md:flex-row flex-col ${styles.paddingY}`}
-    >
-      <div
-        className={` flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}
-      >
-        <div className=" flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2">
-          <img src={discount} alt="discount" className="w-[32px] h-[32px]" />
-          <p className="text-gray-600 font-bold ">
-            <span className="text-white">20%</span> Discount For{" "}
-            <span className="text-white">1 Month</span> Account
-          </p>
-        </div>
-
-        <div className="flex flex-row justify-between items-center w-full">
-          <h1 className="text-white flex-1 font-bold ss:text-[72px] text-[52px] ss:leading-[100px] leading-[75px]">
-            The Next
-            <br className="" />
-            <span className="text-gradient"> Generation</span>{" "}
-            <br className="sm:block hidden" />
-          </h1>
-          <div className="ss:flex hidden md:mr-4 mr-0">
-            <GetStarted />
-          </div>
-        </div>
-
-        <h1 className="text-white font-bold ss:text-[68px] text-[52px] ss:leading-[100px] leading-[75px]">
-          {" "}
-          Payment Method
-        </h1>
-        <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
-          Our team of experts uses a methodology to identify the credit cards
-          most likely to fit your needs. We examine annual percentage rates,
-          annual fees.
-        </p>
-      </div>
-      <div>
-        <img src={robot} alt="billing"
-        className="w-[100%] h-[100%] relative z-[5]" />
-
-        <div className="absolute z-[1] w-[80%] h-[35%] top-0 pink__gradient" />
-        {/* <div className="absolute z-[1] w-[30%] h-[50%] bottom-0 white__gradient" /> */}
-        <div className="absolute z-[0] w-[20%] h-[80%] bottom-20 blue__gradient m" />
-
-      </div>
-
-      <div className={`ss:hidden ${styles.flexCenter}`}>
-          <GetStarted />
-      </div>
-    </section>
-  );
-}
-
-export default Hero;
+import React from "react";
+import styles from "../styles.js";
+import { discount, robot } from "../assets";
+import GetStarted from "./GetStarted.jsx";
+
+function Hero() {
+  return (
+    <section
+      id="home"
+      className={`flex md:flex-row flex-col ${styles.paddingY} overflow-x-hidden relative`}
+    >
+      <div
+        className={` flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}
+      >
+        <div className=" flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2">
+          <img src={discount} alt="discount" className="w-[32px] h-[32px]" />
+          <p className="text-gray-600 font-bold ">
+            <span className="text-white">20%</span> Discount For{" "}
+            <span className="text-white">1 Month</span> Account
+          </p>
+        </div>
+
+        <div className="flex flex-row justify-between items-center w-full">
+          <h1 className="text-white flex-1 font-bold ss:text-[72px] text-[52px] ss:leading-[100px] leading-[75px]">
+            The Next
+            <br className="" />
+            <span className="text-gradient"> Generation</span>{" "}
+            <br className="sm:block hidden" />
+          </h1>
+          <div className="ss:flex hidden md:mr-4 mr-0">
+            <GetStarted />
+          </div>
+        </div>
+
+        <h1 className="text-white font-bold ss:text-[68px] text-[52px] ss:leading-[100px] leading-[75px]">
+          {" "}
+          Payment Method
+        </h1>
+        <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+          Our team of experts uses a methodology to identify the credit cards
+          most likely to fit your needs. We examine annual percentage rates,
+          annual fees.
+        </p>
+      </div>
+      <div className="overflow-x-hidden  ">
+        <img src={robot} alt="billing"
+        className="w-[100%] h-[100%] relative z-[5]" />
+
+        <div className="absolute z-[1] w-[20%] h-[35%] top-0 pink__gradient" />
+        {/* <div className="absolute z-[1] w-[30%] h-[50%] bottom-0 white__gradient" />  */}
+        <div className="absolute z-[0] w-[20%] h-[40%] bottom-20 blue__gradient m" /> 
+
+      </div>
+
+      <div className={`ss:hidden ${styles.flexCenter}`}>
+          <GetStarted />
+      </div>
+    </section>
+  );
+}
+
+export default Hero;
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index 8c80474..70a0c28 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -1,39 +1,39 @@
-import React from "react";
-import { feedback } from "../constants";
-import styles, { layout } from "../styles";
-import FeedbackCard from "./FeedbackCard";
-
-function Testimonials() {
-  return (
-    <section
-      id="clients"
-      className={`${styles.paddingY} ${styles.flexCenter} flex-col relative`}
-    >
-      <div className="absolute z-[0] w-[40%] h-[80%] rounded-full blue__gradient -right-[50%]"/>
-      {/* <div className="absolute z-[0] w-[60%] h-[60%] rounded-full white__gradient -right-[50%] -top-[10%]"/> */}
-      <div
-        className={`flex md:flex-row flex-col w-full relative z-[1] sm:mb-16 mb-6  font-bold items-center justify-between`}
-      >
-        <h1 className={`${styles.heading2} font-poppins`}>
-          What people are
-          <br className="sm:block hidden" /> saying about us
-        </h1>
-
-        <div className=" w-full  items-center justify-center flex md:flex-row flex-col sm:mb-16 mb-6 md:mt-5 relative z-[1] ">
-          <p className={`${styles.paragraph} text-left items-center`}>
-            Everything you need to accept card payments and grow your business
-            anywhere on the planet.
-          </p>
-        </div>
-        
-      </div>
-      <div className="flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1]">
-          {feedback.map((card)=>(
-            <FeedbackCard key={card.id} {...card}/>
-          ))}
-        </div>
-    </section>
-  );
-}
-
-export default Testimonials;
+import React from "react";
+import { feedback } from "../constants";
+import styles, { layout } from "../styles";
+import FeedbackCard from "./FeedbackCard";
+
+function Testimonials() {
+  return (
+    <section
+      id="clients"
+      className={`${styles.paddingY} ${styles.flexCenter} flex-col relative overflow-x-hidden`}
+    >
+      <div className="absolute z-[0] w-[80%] h-[40%] rounded-full blue__gradient -right-[50%]"/>
+      {/* <div className="absolute z-[0] w-[60%] h-[60%] rounded-full white__gradient -right-[50%] -top-[10%]"/> */}
+      <div
+        className={`flex md:flex-row flex-col w-full relative z-[1] sm:mb-16 mb-6  font-bold items-center justify-between`}
+      >
+        <h1 className={`${styles.heading2} font-poppins`}>
+          What people are
+          <br className="sm:block hidden" /> saying about us
+        </h1>
+
+        <div className=" w-full  items-center justify-center flex md:flex-row flex-col sm:mb-16 mb-6 md:mt-5 relative z-[1] ">
+          <p className={`${styles.paragraph} text-left items-center`}>
+            Everything you need to accept card payments and grow your business
+            anywhere on the planet.
+          </p>
+        </div>
+        
+      </div>
+      <div className="flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1]">
+          {feedback.map((card)=>(
+            <FeedbackCard key={card.id} {...card}/>
+          ))}
+        </div>
+    </section>
+  );
+}
+
+export default Testimonials;