From 805acf9a2be37f1a8ac0aade630e8448f7e15086 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sun, 29 Sep 2024 16:19:29 +0330
Subject: [PATCH] layout updated

---
 src/app/_components/footer/page.tsx       |  96 ++++++++++++++
 src/app/_components/header/page.tsx       | 153 ++++++++-------------
 src/app/_components/testimonials/page.tsx |   6 +-
 src/app/layout.tsx                        | 155 +---------------------
 4 files changed, 159 insertions(+), 251 deletions(-)
 create mode 100644 src/app/_components/footer/page.tsx

diff --git a/src/app/_components/footer/page.tsx b/src/app/_components/footer/page.tsx
new file mode 100644
index 0000000..49a9b1c
--- /dev/null
+++ b/src/app/_components/footer/page.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import BurgerButton from "../burger-button/page";
+import Image from "next/image";
+
+export default function Footer() {
+  return (
+    <div className="flex w-full flex-col">
+      <div className="flex flex-col items-center gap-[50px] bg-[#F8F8F8] py-[50px]">
+        <div className="flex items-center">
+          <Image src={"/images/logo.svg"} width={47} height={47} alt="logo" />
+          <p className="ms-2 text-[30px] font-[800] text-[#fd6f00]">
+            Parsa Aghayi
+          </p>
+        </div>
+        <ul className="flex w-full flex-wrap items-center justify-center">
+          <a
+            className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
+            href="/#home"
+          >
+            Home
+          </a>
+          <a
+            className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
+            href="/#about-me"
+          >
+            About Me
+          </a>
+          <a
+            className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
+            href="/#services"
+          >
+            Services
+          </a>
+          <a
+            className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
+            href="/#projects"
+          >
+            Projects
+          </a>
+          <a
+            className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
+            href="/#testimonials"
+          >
+            Testimonials
+          </a>
+          <a
+            className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
+            href="/#contact"
+          >
+            Contact
+          </a>
+        </ul>
+        {/* socials */}
+        <div className="flex w-full justify-center">
+          <div className="flex items-center gap-[25px]">
+            <Image
+              src={"/images/icons/facebook.svg"}
+              width={32}
+              height={32}
+              alt="facebook"
+              className="svg-hover hover:cursor-pointer"
+            />
+            <Image
+              src={"/images/icons/twitter.svg"}
+              width={32}
+              height={32}
+              alt="twitter"
+              className="svg-hover hover:cursor-pointer"
+            />
+            <Image
+              src={"/images/icons/instagram.svg"}
+              width={32}
+              height={32}
+              alt="instagram"
+              className="svg-hover hover:cursor-pointer"
+            />
+            <Image
+              src={"/images/icons/linkedin.svg"}
+              width={32}
+              height={32}
+              alt="linkedin"
+              className="svg-hover hover:cursor-pointer"
+            />
+          </div>
+        </div>
+      </div>
+      <p className="flex items-center justify-center whitespace-nowrap bg-[#545454] text-[15px] font-[400] text-white">
+        © 2023
+        <span className="mx-[5px] whitespace-nowrap text-[18px] font-[700] text-[#FD6F00]">
+          Parsa Aghayi
+        </span>{" "}
+        All Rights Reserved , Inc.
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/_components/header/page.tsx b/src/app/_components/header/page.tsx
index 51315aa..22d4ec6 100644
--- a/src/app/_components/header/page.tsx
+++ b/src/app/_components/header/page.tsx
@@ -1,107 +1,64 @@
 import Image from "next/image";
 import React from "react";
+import BurgerButton from "../burger-button/page";
 
 export default function Header() {
   return (
-    <div className="flex flex-col items-center">
-      <h2 className="my-10 text-[65px] font-[600] text-black">My Projects</h2>
-      <p className="w-[930px] text-center text-[21px] font-[400] text-black">
-        Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
-        est risus lectus. Phasellus consequat urna tellus
-      </p>
-      <ul className="mb-10 mt-20 flex items-center justify-center gap-5">
-        <li className="rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[24px] font-[400] text-[#000] hover:cursor-pointer hover:border-[#FD6F00]">
-          All
-        </li>
-        <li className="rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[24px] font-[400] text-[#000] hover:cursor-pointer hover:border-[#FD6F00]">
-          UI/UX
-        </li>
-        <li className="rounded-md border border-[#545454] bg-[#FD6F00] px-[20px] py-[10px] text-[24px] font-[400] text-[#FFFFFF] hover:cursor-pointer hover:border-[#FD6F00]">
-          Web Design
-        </li>
-        <li className="rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[24px] font-[400] text-[#000] hover:cursor-pointer hover:border-[#FD6F00]">
-          App Design
-        </li>
-        <li className="rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[24px] font-[400] text-[#000] hover:cursor-pointer hover:border-[#FD6F00]">
-          Graphic Design
-        </li>
+    <div
+      className="relative z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
+      id="header"
+    >
+      <div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
+        <div className="flex w-[50px]">
+          <img src={"/images/logo.svg"} className="w-full" alt="logo" />
+        </div>
+        <p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
+          Parsa Aghayi
+        </p>
+      </div>
+      <ul className="fixed left-[50%] right-[45%] top-3 hidden items-center justify-center rounded p-2 lg:flex">
+        <a
+          href="/#home"
+          className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
+        >
+          Home
+        </a>
+        <a
+          href="/#about-me"
+          className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
+        >
+          About Me
+        </a>
+        <a
+          href="/#services"
+          className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
+        >
+          Services
+        </a>
+        <a
+          href="/#projects"
+          className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
+        >
+          Projects
+        </a>
+        <a
+          href="/#testimonials"
+          className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
+        >
+          Testimonials
+        </a>
+        <a
+          href="/#contact"
+          className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
+        >
+          Contact
+        </a>
       </ul>
-      <div className="flex w-[1420px] items-center justify-between gap-[30px]">
-        <div className="flex w-[445px] flex-wrap">
-          <div className="relative my-5 h-[490px] w-full overflow-hidden bg-[#FFEBDB]">
-            <Image
-              src={"/images/web-design-11.png"}
-              width={270}
-              height={70}
-              alt="UI/UX Vector"
-              className="absolute bottom-[-5px] left-[-5px] z-20"
-            />
-            <Image
-              src={"/images/web-design-12.png"}
-              width={270}
-              height={70}
-              alt="UI/UX Vector"
-              className="absolute right-[-5px] top-[-5px] z-10"
-            />
-          </div>
-
-          <h5 className="w-full text-[19px] font-[400] text-[#FD6F00]">
-            Web Design
-          </h5>
-          <p className="text-[24px] font-[700] text-black hover:cursor-pointer">
-            AirCalling Landing Page Design
-          </p>
-        </div>
-        <div className="flex w-[445px] flex-wrap">
-          <div className="relative my-5 h-[490px] w-full overflow-hidden bg-[#FFEBDB]">
-            <Image
-              src={"/images/web-design-21.png"}
-              width={270}
-              height={70}
-              alt="UI/UX Vector"
-              className="absolute bottom-[-5px] left-[-5px] z-20"
-            />
-            <Image
-              src={"/images/web-design-22.png"}
-              width={270}
-              height={70}
-              alt="UI/UX Vector"
-              className="absolute right-[-5px] top-[-5px] z-10"
-            />
-          </div>
-
-          <h5 className="w-full text-[19px] font-[400] text-[#FD6F00]">
-            Web Design
-          </h5>
-          <p className="text-[24px] font-[700] text-black hover:cursor-pointer">
-            Business Landing Page Design
-          </p>
-        </div>
-        <div className="flex w-[445px] flex-wrap">
-          <div className="relative my-5 h-[490px] w-full overflow-hidden bg-[#FFEBDB]">
-            <Image
-              src={"/images/web-design-31.png"}
-              width={270}
-              height={70}
-              alt="UI/UX Vector"
-              className="absolute bottom-[-5px] left-[-5px] z-20"
-            />
-            <Image
-              src={"/images/web-design-32.png"}
-              width={270}
-              height={70}
-              alt="UI/UX Vector"
-              className="absolute right-[-5px] top-[-5px] z-10"
-            />
-          </div>
-
-          <h5 className="w-full text-[19px] font-[400] text-[#FD6F00]">
-            Web Design
-          </h5>
-          <p className="text-[24px] font-[700] text-black hover:cursor-pointer">
-            Ecom Web Page Design
-          </p>
-        </div>
+      <div className="flex gap-1">
+        <button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] xl:text-[20px]">
+          Download CV
+        </button>
+        <BurgerButton />
       </div>
     </div>
   );
diff --git a/src/app/_components/testimonials/page.tsx b/src/app/_components/testimonials/page.tsx
index 4b17d3c..49f9d22 100644
--- a/src/app/_components/testimonials/page.tsx
+++ b/src/app/_components/testimonials/page.tsx
@@ -89,7 +89,7 @@ export default function Testimonials() {
         est risus lectus. Phasellus consequat urna tellus
       </p>
       <div
-        className="relative flex w-full select-none no-scrollbar flex-nowrap items-start py-4 gap-8 overflow-x-scroll min-h-[780px] sm:min-h-[560px] lg:min-h-[450px] xl:min-h-[370px] 2xl:min-h-[370px]" // Hide scrollbar using CSS
+        className="no-scrollbar relative flex min-h-[780px] w-full select-none flex-nowrap items-start gap-8 overflow-x-scroll py-4 sm:min-h-[560px] lg:min-h-[450px] xl:min-h-[370px] 2xl:min-h-[370px]" // Hide scrollbar using CSS
         ref={sliderRef}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => {
@@ -99,7 +99,7 @@ export default function Testimonials() {
       >
         {testimonials.map((testimonial, index) => (
           <div
-            className={`testimonial absolute flex flex-wrap w-[80%] md:w-[70%] items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 hover:cursor-grab ${currentIndex === index ? "left-[15%] sm:left-[15%] md:left-[25%] z-20 scale-105 drop-shadow-lg" : "left-0 z-10 scale-90 grayscale"} ${
+            className={`testimonial absolute flex w-[80%] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 hover:cursor-grab md:w-[70%] ${currentIndex === index ? "left-[15%] z-20 scale-105 drop-shadow-lg sm:left-[15%] md:left-[25%]" : "left-0 z-10 scale-90 grayscale"} ${
               currentIndex === index ? "" : "blur-[2px]"
             }`}
             key={index}
@@ -113,7 +113,7 @@ export default function Testimonials() {
             </div>
             <div className="flex flex-wrap items-center lg:w-[60%]">
               <p className="mb-3 w-full text-justify text-[15px] font-[400] text-black">
-                <span className="me-2 text-[12px] sm:text-[21px] font-[700] text-[#FD6F00]">
+                <span className="me-2 text-[12px] font-[700] text-[#FD6F00] sm:text-[21px]">
                   “
                 </span>
                 {testimonial.quote}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 13d937d..7d2433c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import localFont from "next/font/local";
 import "./globals.css";
 import Image from "next/image";
 import BurgerButton from "./_components/burger-button/page";
+import Header from "./_components/header/page";
+import Footer from "./_components/footer/page";
 
 const geistSans = localFont({
   src: "./../../public/fonts/Mikhak-v3.2/Variable/Mikhak[DSTY,KSHD,wght].woff2",
@@ -33,159 +35,12 @@ export default function RootLayout({
         >
           ^
         </a>
-        <div
-          className="relative z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
-          id="header"
-        >
-          <div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
-            <div className="flex w-[50px]">
-              <img src={"/images/logo.svg"} className="w-full" alt="logo" />
-            </div>
-            <p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
-              Parsa Aghayi
-            </p>
-          </div>
-          <ul className="fixed left-[50%] right-[45%] top-3 hidden items-center justify-center rounded p-2 lg:flex">
-            <a
-              href="/#home"
-              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
-            >
-              Home
-            </a>
-            <a
-              href="/#about-me"
-              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
-            >
-              About Me
-            </a>
-            <a
-              href="/#services"
-              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
-            >
-              Services
-            </a>
-            <a
-              href="/#projects"
-              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
-            >
-              Projects
-            </a>
-            <a
-              href="/#testimonials"
-              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
-            >
-              Testimonials
-            </a>
-            <a
-              href="/#contact"
-              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
-            >
-              Contact
-            </a>
-          </ul>
-          <div className="flex gap-1">
-            <button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] xl:text-[20px]">
-              Download CV
-            </button>
-            <BurgerButton />
-          </div>
-        </div>
+
+        <Header />
 
         <div className="main my-10 flex w-full justify-center">{children}</div>
 
-        <div className="flex w-full flex-col">
-          <div className="flex flex-col items-center gap-[50px] bg-[#F8F8F8] py-[50px]">
-            <div className="flex items-center">
-              <Image
-                src={"/images/logo.svg"}
-                width={47}
-                height={47}
-                alt="logo"
-              />
-              <p className="ms-2 text-[30px] font-[800] text-[#fd6f00]">
-                Parsa Aghayi
-              </p>
-            </div>
-            <ul className="flex w-full flex-wrap items-center justify-center">
-              <a
-                className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
-                href="/#home"
-              >
-                Home
-              </a>
-              <a
-                className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
-                href="/#about-me"
-              >
-                About Me
-              </a>
-              <a
-                className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
-                href="/#services"
-              >
-                Services
-              </a>
-              <a
-                className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
-                href="/#projects"
-              >
-                Projects
-              </a>
-              <a
-                className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
-                href="/#testimonials"
-              >
-                Testimonials
-              </a>
-              <a
-                className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
-                href="/#contact"
-              >
-                Contact
-              </a>
-            </ul>
-            {/* socials */}
-            <div className="flex w-full justify-center">
-              <div className="flex items-center gap-[25px]">
-                <Image
-                  src={"/images/icons/facebook.svg"}
-                  width={32}
-                  height={32}
-                  alt="facebook"
-                  className="svg-hover hover:cursor-pointer"
-                />
-                <Image
-                  src={"/images/icons/twitter.svg"}
-                  width={32}
-                  height={32}
-                  alt="twitter"
-                  className="svg-hover hover:cursor-pointer"
-                />
-                <Image
-                  src={"/images/icons/instagram.svg"}
-                  width={32}
-                  height={32}
-                  alt="instagram"
-                  className="svg-hover hover:cursor-pointer"
-                />
-                <Image
-                  src={"/images/icons/linkedin.svg"}
-                  width={32}
-                  height={32}
-                  alt="linkedin"
-                  className="svg-hover hover:cursor-pointer"
-                />
-              </div>
-            </div>
-          </div>
-          <p className="flex items-center justify-center whitespace-nowrap bg-[#545454] text-[15px] font-[400] text-white">
-            © 2023
-            <span className="mx-[5px] whitespace-nowrap text-[18px] font-[700] text-[#FD6F00]">
-              Parsa Aghayi
-            </span>{" "}
-            All Rights Reserved , Inc.
-          </p>
-        </div>
+        <Footer />
       </body>
     </html>
   );