parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout updated

Browse Source
This commit is contained in:
parsa aghaei 2024-09-29 16:19:29 +03:30
parent 7b752c015a
commit 805acf9a2b
4 changed files with 159 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/_components/footer/page.tsx Normal file
View File

@ -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>
);
}

153
src/app/_components/header/page.tsx
View File

@ -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>
);

6
src/app/_components/testimonials/page.tsx
View File

@ -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}

155
src/app/layout.tsx
View File

@ -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>
);