From 05c88a8b8089932d3e24a265bc1dd0213beafe49 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 23 Sep 2024 17:48:34 +0330
Subject: [PATCH] home is responsive now!

---
 src/app/layout.tsx |  4 ++--
 src/app/page.tsx   | 47 ++++++++++++++++++++++++----------------------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c8b81af..3418b1f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
         >
           <div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
             <Image src={"/images/logo.svg"} width={67} height={67} alt="logo" />
-            <p className="ms-[5px] whitespace-nowrap text-[38px] font-[400] xl:ms-[20px] xl:text-[48px]">
+            <p className="ms-5 whitespace-nowrap text-[38px] font-[400] xl:ms-[20px] xl:text-[48px]">
               Parsa Aghayi
             </p>
           </div>
@@ -85,7 +85,7 @@ export default function RootLayout({
           </button>
         </div>
 
-        <div className="main my-[67px]">{children}</div>
+        <div className="main w-full my-[67px]">{children}</div>
 
         <div className="flex w-full flex-col">
           <div className="flex flex-col items-center gap-[50px] bg-[#F8F8F8] py-[50px]">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2c87bd9..5438976 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,30 +7,14 @@ import MyProjects from "./_components/my-projects/page";
 
 export default function Home() {
   return (
-    <div className="my-[100px] flex w-[1420px] flex-col items-center gap-[50px]">
+    <div className="my-[100px] flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
       {/* Home */}
-      <div className="flex flex-nowrap" id="home">
+      <div
+        className="flex flex-wrap w-full justify-center gap-10 xl:gap-15 2xl:gap-20 lg:flex-nowrap"
+        id="home"
+      >
         {/* start */}
-        <div className="flex flex-col">
-          <p className="text-[24px] font-[400] text-black">Hi I am </p>
-          <p className="text-[32px] font-[600] text-[#FD6F00]">Parsa Aghayi</p>
-          <p className="text-[80px] font-[700] text-black">
-            Frontend & Backend
-          </p>
-          <p className="ms-[350px] mt-[-40px] text-[100px] font-[700] text-black">
-            Developer{" "}
-          </p>
-          <p className="my-[40px] pe-[50px] text-[21px] font-[400] text-black">
-            Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa
-            nibh lectus netus in. Aliquet donec morbi convallis pretium. Turpis
-            tempus pharetra
-          </p>
-          <button className="flex h-[52px] w-[188px] items-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] px-[52px] text-[21px] font-[400] text-[#fff]">
-            Hire Me
-          </button>
-        </div>
-        {/* end */}
-        <div className="flex flex-wrap">
+        <div className="flex flex-wrap justify-center w-full lg:w-[45%] xl:w-[50%] max-w-[500px]">
           <div className="aboutme-image">
             <Image
               src={"/images/profile.png"}
@@ -70,6 +54,25 @@ export default function Home() {
             </div>
           </div>
         </div>
+        {/* end */}
+        <div className="flex flex-col w-full items max-w-[80%] md:max-w-[70%] lg:w-[45%] xl:w-[50%]">
+          <p className="text-[20px] 2xl:text-[24px] font-[400] text-black">Hi I am </p>
+          <p className="text-[30px] 2xl:text-[32px] font-[600] text-[#FD6F00]">Parsa Aghayi</p>
+          <p className="text-[40px] lg:text-[45px] xl:text-[60px] 2xl:text-[80px] font-[700] text-black text-start whitespace-nowrap">
+            Frontend & Backend
+          </p>
+          <p className="text-end mt-[-20px] text-[50px] lg:text-[50px] lg:mt-[-30px] xl:text-[70px] 2xl:text-[100px] font-[700] text-black">
+            Developer
+          </p>
+          <p className="my-[40px] pe-[50px] lg:pe-0 text-[21px] font-[400] text-black">
+            Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa
+            nibh lectus netus in. Aliquet donec morbi convallis pretium. Turpis
+            tempus pharetra
+          </p>
+          <button className="flex h-[52px] w-[188px] items-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] px-[52px] text-[21px] font-[400] text-[#fff]">
+            Hire Me
+          </button>
+        </div>
       </div>
 
       <AboutMe />