From b2186ed3797e4863b0a3c80041877eaef6c74443 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sun, 29 Sep 2024 16:42:31 +0330
Subject: [PATCH] back to top and header menu updated

---
 src/app/_components/about-me/page.tsx     |  2 +-
 src/app/_components/contact/page.tsx      |  2 +-
 src/app/_components/header/page.tsx       | 16 ++++++++--------
 src/app/_components/my-projects/page.tsx  |  2 +-
 src/app/_components/services/page.tsx     |  2 +-
 src/app/_components/testimonials/page.tsx |  2 +-
 src/app/layout.tsx                        |  3 ++-
 src/app/page.tsx                          |  2 +-
 8 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/app/_components/about-me/page.tsx b/src/app/_components/about-me/page.tsx
index 2d348e4..2eb32c8 100644
--- a/src/app/_components/about-me/page.tsx
+++ b/src/app/_components/about-me/page.tsx
@@ -43,7 +43,7 @@ export default function AboutMe() {
 
   return (
     <div
-      className="my-10 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10"
+      className="my-10 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10 pt-[120px]"
       id="about-me"
     >
       <div className="flex flex-col w-full items-center md:w-[50%]">
diff --git a/src/app/_components/contact/page.tsx b/src/app/_components/contact/page.tsx
index ae0e74e..5ce52d0 100644
--- a/src/app/_components/contact/page.tsx
+++ b/src/app/_components/contact/page.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export default function Contact() {
   return (
     <div
-      className="mt-10 flex w-full max-w-[80%] flex-col gap-[30px]"
+      className="mt-10 flex w-full max-w-[80%] flex-col gap-[30px] pt-[120px]"
       id="contact"
     >
       <h2 className="text-center text-[35px] font-[800] text-[#000]">
diff --git a/src/app/_components/header/page.tsx b/src/app/_components/header/page.tsx
index 22d4ec6..55a9062 100644
--- a/src/app/_components/header/page.tsx
+++ b/src/app/_components/header/page.tsx
@@ -5,7 +5,7 @@ import BurgerButton from "../burger-button/page";
 export default function Header() {
   return (
     <div
-      className="relative z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
+      className="fixed 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">
@@ -16,40 +16,40 @@ export default function Header() {
           Parsa Aghayi
         </p>
       </div>
-      <ul className="fixed left-[50%] right-[45%] top-3 hidden items-center justify-center rounded p-2 lg:flex">
+      <ul className="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]"
+          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] 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]"
+          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] 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]"
+          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] 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]"
+          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] 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]"
+          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] 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]"
+          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
         >
           Contact
         </a>
diff --git a/src/app/_components/my-projects/page.tsx b/src/app/_components/my-projects/page.tsx
index 7d113c8..c88d7d8 100644
--- a/src/app/_components/my-projects/page.tsx
+++ b/src/app/_components/my-projects/page.tsx
@@ -74,7 +74,7 @@ export default function MyProjects() {
 
   return (
     <div
-      className="flex w-full max-w-[90%] flex-wrap items-center justify-center"
+      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] text-black">My Projects</h2>
diff --git a/src/app/_components/services/page.tsx b/src/app/_components/services/page.tsx
index faf7748..0970395 100644
--- a/src/app/_components/services/page.tsx
+++ b/src/app/_components/services/page.tsx
@@ -78,7 +78,7 @@ export default function Services() {
 
   return (
     <div
-      className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
+      className="flex w-full max-w-[90%] flex-col flex-wrap items-center pt-[100px]"
       id="services"
     >
       <h2 className="mb-10 text-[55px] font-[800] text-black">Services</h2>
diff --git a/src/app/_components/testimonials/page.tsx b/src/app/_components/testimonials/page.tsx
index 49f9d22..024ea2e 100644
--- a/src/app/_components/testimonials/page.tsx
+++ b/src/app/_components/testimonials/page.tsx
@@ -80,7 +80,7 @@ export default function Testimonials() {
 
   return (
     <div
-      className="flex w-full max-w-[90%] flex-wrap justify-center"
+      className="flex w-full max-w-[90%] flex-wrap justify-center pt-[100px]"
       id="testimonials"
     >
       <h2 className="text-[55px] font-[800] text-black">Testimonials</h2>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7d2433c..11ced66 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,8 +28,9 @@ export default function RootLayout({
         className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between antialiased`}
       >
         <div className="scroll-watcher" id="top"></div>
+        <div className="absolute top-0 left-0 opacity-0" id="here-is-top"></div>
         <a
-          href="/#header"
+          href="/#here-is-top"
           className="scroll-to-top fixed bottom-10 right-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:right-10"
           id="back-to-top"
         >
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3548b7d..3c5df12 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
     <div className="my-15 flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
       {/* Home */}
       <div
-        className="xl:gap-15 flex w-full flex-wrap justify-center gap-10 lg:flex-nowrap 2xl:gap-20"
+        className="xl:gap-15 flex w-full flex-wrap justify-center gap-10 lg:flex-nowrap 2xl:gap-20 pt-[120px]"
         id="home"
       >
         {/* start */}