From b828292f1538aa0a32d01f12e0b0c96b1560989e Mon Sep 17 00:00:00 2001
From: yusufalperendumlu <yusufalperendumlu@gmail.com>
Date: Tue, 7 May 2024 01:13:51 +0300
Subject: [PATCH] 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.
---
 src/pages/home/container/Articles.jsx | 48 ++++++++++++++-------------
 src/pages/home/container/Hero.jsx     |  4 +--
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/pages/home/container/Articles.jsx b/src/pages/home/container/Articles.jsx
index 8173679..81d1994 100644
--- 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
index beef618..68e6b63 100644
--- 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>