Merge pull request #12 from yusufalperendumlu/V1.0.0/fixed/alignment-…

…page refactor: Update Articles component in Articles.jsx
yusufalperendumlu · May 6, 2024 · 58e6c8c · 58e6c8c
2 parents a9af9d0 + b828292
commit 58e6c8c
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>