From 9ed56c1e309cf2c69c4039ac2d5be3e2c7e0951f Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sun, 20 Oct 2024 19:02:03 +0330
Subject: [PATCH] website homePage design updated

---
 src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx | 6 +++---
 src/app/(routes)/(website)/components/header/header.tsx   | 2 +-
 .../(routes)/(website)/components/projects/projects.tsx   | 8 ++++----
 .../(routes)/(website)/components/services/services.tsx   | 8 ++++----
 src/app/(routes)/(website)/layout.tsx                     | 4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx b/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx
index 4cb40a2..7e1e4ec 100644
--- a/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx
+++ b/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx
@@ -14,13 +14,13 @@ export default async function AboutMe() {
       id="about-me"
     >
       <div className="flex w-full flex-col items-center md:w-[50%]">
-        <h2 className="mb-10 text-[55px] font-[800] text-black">
+        <h2 className="text-start w-full text-[55px] font-[800] text-black">
           {aboutMeData?.title || <Skeleton width={300} height={100} />}
         </h2>
-        <p className="my-5 text-center text-[21px] font-[400] text-black">
+        <p className="my-5 text-start text-[21px] font-[400] text-black">
           {aboutMeData?.description || <Skeleton width={350} height={30} />}
         </p>
-        <ul className="mt-10 flex w-full flex-col gap-10">
+        <ul className="mt-20 flex w-full flex-col gap-10">
           {aboutMeData.skills.map((skill, index) => (
             <li key={index}>
               <h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
diff --git a/src/app/(routes)/(website)/components/header/header.tsx b/src/app/(routes)/(website)/components/header/header.tsx
index 9d68452..819992f 100644
--- a/src/app/(routes)/(website)/components/header/header.tsx
+++ b/src/app/(routes)/(website)/components/header/header.tsx
@@ -71,7 +71,7 @@ export default async function Header() {
         />
       </ul>
       <div className="flex gap-1">
-        <button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[15px] font-[600] text-[#fff] xl:text-[20px]">
+        <button className="flex items-center justify-center whitespace-nowrap rounded-lg bg-[#FD6F00] px-4 py-2 text-[15px] font-[600] text-[#fff] xl:text-[20px]">
           {dict.header.Button}
         </button>
         <BurgerButton dict={dict} />
diff --git a/src/app/(routes)/(website)/components/projects/projects.tsx b/src/app/(routes)/(website)/components/projects/projects.tsx
index 3b0d786..8ecf4c0 100644
--- a/src/app/(routes)/(website)/components/projects/projects.tsx
+++ b/src/app/(routes)/(website)/components/projects/projects.tsx
@@ -89,7 +89,7 @@ export default function Projects({ dict }: MyProjectsProps) {
 
   return (
     <div className="flex w-full max-w-[90%] flex-wrap items-center justify-center pt-[50px]" id="projects">
-      <h2 className="my-10 text-[55px] font-[800] capitalize text-black">{dict.homePage.projects.title}</h2>
+      <h2 className="my-10 mt-20 text-[55px] font-[800] capitalize text-black">{dict.homePage.projects.title}</h2>
       <p className="text-center text-[21px] font-[400] text-black">{dict.homePage.projects.description}</p>
       <ul className="mb-10 mt-20 flex w-full flex-wrap items-center justify-center gap-2">
         {categories.length > 0 ? (
@@ -97,7 +97,7 @@ export default function Projects({ dict }: MyProjectsProps) {
             <li
               key={index}
               onClick={() => setSelectedCategory(category.label)}
-              className={`select-none whitespace-nowrap rounded-md border border-[#545454] bg-[#F8F8F8] p-2 text-[14px] font-[600] capitalize hover:cursor-pointer hover:border-[#FD6F00] md:text-[18px] ${
+              className={`select-none whitespace-nowrap rounded-md bg-[#F8F8F8] p-2 text-[14px] font-[600] capitalize hover:cursor-pointer hover:border-[#FD6F00] md:text-[18px] ${
                 selectedCategory === category.label ? "bg-[#FD6F00] text-[#FFFFFF]" : "text-[#000]"
               }`}
             >
@@ -108,10 +108,10 @@ export default function Projects({ dict }: MyProjectsProps) {
           renderSkeletons(4) // Adjust the count as needed
         )}
       </ul>
-      <div className="flex w-full flex-wrap items-start justify-center gap-8">
+      <div className="flex w-full flex-wrap items-start justify-center gap-20">
         {filteredProjects.length > 0 ? (
           filteredProjects.map((project, index) => (
-            <div key={index} className="project flex w-[45%] flex-wrap md:w-[30%]">
+            <div key={index} className="project flex w-[45%] flex-wrap">
               <div className="relative my-5 h-[200px] w-full overflow-hidden bg-[#FFEBDB] md:h-[250px] lg:h-[300px]">
                 {project.images.map((image, idx) => (
                   <img
diff --git a/src/app/(routes)/(website)/components/services/services.tsx b/src/app/(routes)/(website)/components/services/services.tsx
index 3b7c55c..b44567d 100644
--- a/src/app/(routes)/(website)/components/services/services.tsx
+++ b/src/app/(routes)/(website)/components/services/services.tsx
@@ -49,23 +49,23 @@ export default function Services({ dict }: ServicesProps) {
   const renderServiceCard = (service?: Service, index?: number) => (
     <div
       key={service?.id || index}
-      className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
+      className="flex mb-20 w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
     >
-      <div className="my-5 flex w-full justify-center">
+      <div className="my-5 flex w-full justify-start">
         {loading ? (
           <Skeleton containerClassName="w-[100px]" height={120} />
         ) : (
           <img src={service!.imageSrc} alt={service!.altText} />
         )}
       </div>
-      <h3 className="w-full text-[18px] font-[700] text-black xl:text-[32px]">
+      <h3 className="w-full text-[18px] mb-5 font-[700] text-black xl:text-[23px]">
         {loading ? (
           <Skeleton containerClassName="w-full" height={32} />
         ) : (
           service!.title
         )}
       </h3>
-      <p className="w-full text-justify text-[14px] font-[400] text-black xl:text-[20px]">
+      <p className="w-full text-start text-[14px] font-[400] text-black xl:text-[20px]">
         {loading ? (
           <Skeleton containerClassName="w-full" height={60} />
         ) : (
diff --git a/src/app/(routes)/(website)/layout.tsx b/src/app/(routes)/(website)/layout.tsx
index 5a1fd2d..4beec59 100644
--- a/src/app/(routes)/(website)/layout.tsx
+++ b/src/app/(routes)/(website)/layout.tsx
@@ -35,10 +35,10 @@ export default function RootLayout({
       <div className="absolute start-0 top-0 opacity-0" id="here-is-top"></div>
       <a
         href="/#here-is-top"
-        className="scroll-to-top fixed end-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 pt-10 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:end-10"
+        className="rotate-90 scroll-to-top fixed end-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 p-5 pt-10 text-center text-[25px] font-bold text-gray hover:border-[#f3a66b] sm:bottom-[100px] sm:end-10"
         id="back-to-top"
       >
-        ^
+        {"<"}
       </a>
 
       <Header />