padding

src/app/components/Aesthetic.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 
 const Aesthetic = () => {
   return (
-    <div className="flex mb-28 overflow-hidden relative flex-col rounded-xl justify-center font-bold h-[600px] min-h-[534px] mb-28` mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 shadow-white/10 shadow-md">
+    <div className="flex mb-28 overflow-hidden relative flex-col rounded-xl justify-center font-bold h-[600px] min-h-[534px] mx-44 max-2xl:mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 shadow-white/10 shadow-md">
     <div className="absolute inset-0 size-full top-0">
       <Image
         src="/carou-two.webp"

src/app/components/Features.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 
 const Features = () => {
   return (
-    <div className="flex bg-transparent px-32 items-start justify-center gap-32 w-full flex-wrap my-20 max-sm:gap-20 max-sm:px-10">
+    <div className="flex bg-transparent px-32 items-start justify-center gap-32 w-full flex-wrap my-12 max-sm:gap-20 max-sm:px-10">
         <div className="flex flex-col justify-center items-center text-center">
           <Image
             src="/wire.svg"

src/app/components/LongLife.tsx

@@ -2,15 +2,16 @@ import Image from "next/image";
 
 const LongLife = () => {
   return (
-    <div className="mt-20">
-    <div className="flex justify-center mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 gap-10 max-lg:flex-col max-md:justify-center">
+    <div className="mt-12">
+    <div className="flex justify-center mx-44 max-2xl:mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 gap-10 max-lg:flex-col max-md:justify-center">
         <div className="flex overflow-hidden relative flex-col rounded-xl  justify-center font-bold h-3/5 min-h-full w-2/4 max-lg:w-full max-sm:w-full mb-12 max-md:mx-0 max-sm:mr-0 max-sm:ml-0 shadow-white/10 shadow-md ">
           <div className="absolute inset-0 top-0">
             <Image
               src="/img-two.webp"
               alt="long-life"
               layout="fill"
               objectFit="cover"
+              objectPosition="top"
               priority
             />
           </div>
@@ -38,6 +39,7 @@ const LongLife = () => {
               alt="long-life"
               layout="fill"
               objectFit="cover"
+              objectPosition="right"
               priority
             />
           </div>

src/app/components/Performance.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 const Performance = () => {
   return (
-    <div className="flex relative justify-center mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 max-lg:flex-col max-md:justify-center">
+    <div className="flex relative justify-center mx-44 max-2xl:mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 max-lg:flex-col max-md:justify-center">
       <div className="flex overflow-hidden relative flex-col rounded-xl  justify-center font-bold h-3/5 min-h-full w-full max-lg:w-full max-sm:w-full mb-12 max-md:mx-0 max-sm:mr-0 max-sm:ml-0 shadow-white/10 shadow-md ">
         <div className="absolute inset-0 top-0">
           <Image

src/app/components/Slider.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 
 const Slider = () => {
   return (
-    <div className="flex overflow-hidden relative flex-col rounded-xl  justify-center font-bold h-[600px] min-h-[534px] mb-12 mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16  shadow-white/10 shadow-md">
+    <div className="flex overflow-hidden relative flex-col rounded-xl  justify-center font-bold h-[600px] min-h-[534px] mb-12 mx-44 max-2xl:mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16  shadow-white/10 shadow-md">
         <div className="absolute inset-0 size-full top-0">
           <Image
             src="/carou-one.webp"