font sizes

samalsubrat · Feb 24, 2024 · 628b444 · 628b444
1 parent 2aa21d3
commit 628b444
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/src/app/components/Aesthetic.tsx b/src/app/components/Aesthetic.tsx
@@ -2,7 +2,7 @@ import Image from "next/image"
 
 const Aesthetic = () => {
   return (
-    <div className="flex overflow-hidden relative flex-col rounded-xl  justify-center font-bold h-[600px] min-h-[534px] ml-32 mr-32 mb-12 max-md:ml-16 max-md:mr-16 max-sm:mr-16 max-sm:ml-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] 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.jpg"
@@ -14,11 +14,11 @@ const Aesthetic = () => {
     </div>
     <div className="flex flex-col relative justify-center items-start  max-w-full rounded-xl w-[950px] max-md:px-5 max-sm:px-10 z-100">
       <div className="flex flex-col my-auto ml-8 max-w-full px-16 py-12 w-[600px] max-lg:px-4 max-lg:ml-4 max-md:mt-10 max-md:px-4 max-md:ml-2 absolute z-10 max-sm:left-[-15px] max-sm:px-10">
-        <div className="text-5xl font-medium max-md:max-w-full z-100 max-md:text-3xl max-sm:text-3xl max-lg:text-3xl max-sm:text-center max-md:text-center">
+        <div className="text-5xl font-medium max-md:max-w-full z-100 max-md:text-3xl  max-sm:text-center max-md:text-center">
           Made for the
           <br />
         </div>
-        <div className="mt-3.5 text-5xl font-xl  max-md:max-w-full max-md:text-4xl max-sm:text-4xl max-sm:text-center max-md:text-center">
+        <div className="mt-3.5 text-5xl font-xl  max-md:max-w-full max-md:text-4xl  max-md:text-center">
         Aesthetic Eye
         </div>
         <div className="text-2xl font-medium mt-3.5 text-left max-md:text-center">Available with a host of color options that complement any keyboard.</div>

diff --git a/src/app/components/LongLife.tsx b/src/app/components/LongLife.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 const LongLife = () => {
   return (
     <div className="mt-20">
-    <div className="flex justify-center mx-32 gap-10 max-lg:flex-col max-md:justify-center max-md:mx-16">
+    <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="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
@@ -16,11 +16,11 @@ const LongLife = () => {
           </div>
           <div className="relative z-10 flex flex-col justify-center items-center text-center max-w-full rounded-xl min-h-[600px]">
             <div className="z-10 px-44 max-md:px-10 max-2xl:px-10 max-sm:px-10">
-              <div className="text-5xl font-bold text-yellow-300">
+              <div className="text-5xl font-bold text-yellow-300 max-md:text-4xl">
                 Long Life
               </div>
-              <div className="text-5xl font-bold text-green-300 mt-8">5X</div>
-              <div className="text-2xl font-normal mt-8">
+              <div className="text-5xl font-bold text-green-300 mt-8 max-md:mt-4 max-md:text-4xl">5X</div>
+              <div className="text-2xl font-normal mt-8 max-md:mt-4 max-md:text-lg">
                 The <strong>PET outer sleeve</strong> also ensures long cable
                 life, with the coiled wire <strong>preventing damage</strong> to
                 the cable due to overstretching without{" "}
@@ -43,9 +43,9 @@ const LongLife = () => {
           </div>
           <div className="relative z-10 flex flex-col justify-center items-center text-center max-w-full rounded-xl min-h-[600px] ">
             <div className="z-10 px-44 max-md:px-10 max-2xl:px-10 max-sm:px-10">
-              <div className="text-5xl font-bold text-blue-300">Durability</div>
-              <div className="text-5xl font-bold text-blue-300 mt-8">Tough</div>
-              <div className="text-2xl font-normal mt-8">
+              <div className="text-5xl font-bold text-blue-300 max-md:text-4xl">Durability</div>
+              <div className="text-5xl font-bold text-blue-300 mt-8 max-md:text-4xl max-md:mt-4">Tough</div>
+              <div className="text-2xl font-normal mt-8 max-md:text-lg max-md:mt-4">
                 The detachable metal aviator connectors allow you to quickly
                 detach your keyboard when required without disturbing the USB
                 port, hence reducing wear and tear & enhancing durability.

diff --git a/src/app/components/Performance.tsx b/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-lg:flex-col max-md:justify-center max-md:mx-16">
+    <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 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
@@ -15,12 +15,12 @@ const Performance = () => {
         </div>
         <div className="relative z-10 flex flex-col justify-center items-between max-w-full rounded-xl min-h-[600px] max-xl:items-center max-xl:justify-center max-2xl:items-center max-2xl:justify-center">
           <div className=" flex items-center justify-between z-10 px-20 flex-wrap max-2xl:items-center max-2xl:justify-center">
-            <div className="text-5xl font-bold leading-tight text-left max-2xl:text-center ">
+            <div className="text-5xl font-bold leading-tight text-left max-2xl:text-center max-md:text-3xl">
               High Performance
               <br />
               Ultra-Fast Connectivity
             </div>
-            <div className="text-2xl font-normal mt-8 max-w-[600px] text-center">
+            <div className="text-2xl font-normal mt-8 max-w-[600px] text-center max-md:text-lg">
               Arion cables are built for <b>high performance gaming</b>,
               providing seamless <b>connectivity at high-speeds</b>. A long
               cable length of <b>1.5 Meters</b> ensures{" "}

diff --git a/src/app/components/Slider.tsx b/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] ml-32 mr-32 mb-12 max-md:ml-16 max-md:mr-16 max-sm:mr-16 max-sm:ml-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-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"