refactor: Update Articles component in Articles.jsx

Refactor the Articles component in Articles.jsx to improve the layout and styling. This includes adjusting the width of the ArticleCard components, updating the background colors, and making the text more readable. These changes enhance the visual presentation of the articles section on the home page.
yusufalperendumlu · May 6, 2024 · b828292 · b828292
1 parent 2057a3a
commit b828292
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/src/pages/home/container/Articles.jsx b/src/pages/home/container/Articles.jsx
@@ -4,29 +4,31 @@ import { images } from "@/constants";
 const Articles = () => {
   return (
     <section className="flex bg-gradient-to-t from-red-900 w-screen bg-blend-screen flex-col mx-auto px-5 py-10 mt-12 z-40">
-      <div className="flex flex-wrap md:gap-x-5 gap-y-5 pb-10 items-start justify-center">
-        <ArticleCard
-          image={images.CharacterHead}
-          text={
-            "A small river named Duden flows by their place and supplies it with the necessary regelialia. A small river named Duden flows by their place and supplies it with the necessary regelialia. A small river named Duden flows by their place and supplies it with the necessary regelialia."
-          }
-          textStyle="flex items-center justify-center"
-          className="w-full flex-nowrap  md:w-[calc(50%-20px)] lg:w-[calc(80%-50px)]  bg-black md:bg-white lg:bg-white"
-        />
-        <ArticleCard
-          image={images.RacePhoto}
-          text={
-            "It is a paradisematic country, in which roasted parts of sentences fly into your mouth. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
-          }
-          className="w-full flex-wrap p-4 md:w-[calc(50%-20px)] lg:w-[calc(30%-10px)] bg-black md:bg-white lg:bg-white"
-        />
-        <ArticleCard
-          image={images.PistonCup}
-          text={
-            "A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
-          }
-          className="w-full p-4 flex-nowrap md:w-[calc(50%-20px)] lg:w-[calc(49%-40px)]  bg-black md:bg-white lg:bg-white"
-        />
+      <div className="flex items-center">
+        <div className="flex flex-wrap md:gap-x-5 gap-y-5 pb-10 items-start justify-center">
+          <ArticleCard
+            image={images.CharacterHead}
+            text={
+              "A small river named Duden flows by their place and supplies it with the necessary regelialia. A small river named Duden flows by their place and supplies it with the necessary regelialia. A small river named Duden flows by their place and supplies it with the necessary regelialia."
+            }
+            textStyle="flex items-center justify-center"
+            className=" w-full flex-nowrap  md:w-[calc(50%-20px)] lg:w-[calc(85%-30px)]  bg-black md:bg-white lg:bg-white"
+          />
+          <ArticleCard
+            image={images.RacePhoto}
+            text={
+              "It is a paradisematic country, in which roasted parts of sentences fly into your mouth. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
+            }
+            className="w-full flex-wrap p-4 md:w-[calc(50%-20px)] lg:w-[calc(36%-10px)] bg-black md:bg-white lg:bg-white"
+          />
+          <ArticleCard
+            image={images.PistonCup}
+            text={
+              "A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
+            }
+            className="w-full p-4 flex-nowrap md:w-[calc(50%-20px)] lg:w-[calc(49%-40px)]  bg-black md:bg-white lg:bg-white"
+          />
+        </div>
       </div>
     </section>
   );

diff --git a/src/pages/home/container/Hero.jsx b/src/pages/home/container/Hero.jsx
@@ -15,7 +15,7 @@ const Hero = () => {
   const [coupon, setCoupon] = useState(false);
 
   return (
-    <section className="container mx-auto flex flex-col px-5 py-5 mt-60 lg:flex-row overflow-x-hidden">
+    <section className="container mx-auto flex flex-nowrap justify-between px-5 py-5 mt-60 lg:flex-row overflow-x-hidden">
       <div className="fixed inset-0 z-[-1]">
         <img
           src={images.HeroImage}
@@ -34,7 +34,7 @@ const Hero = () => {
           roasted parts of sentences fly into your mouth.
         </p>
       </div>
-      <div className="w-full lg:ml-2 lg:1/2 flex items-center justify-center flex-wrap flex-col lg:mt-0 z-40">
+      <div className="w-fit lg:ml-2 lg:1/2 flex items-center justify-end flex-wrap flex-col lg:mt-0 z-40">
         <div className="px-2 py-3 pr-8 bg-dark-light">
           <div className="text-nowrap text-white px-4">
             <h1>Make Your Trip</h1>