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

some updates for styles

Browse Source
This commit is contained in:
parsa aghaei 2024-10-01 14:50:54 +03:30
parent 0e4d45813d
commit c22affe6e3
16 changed files with 254 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbo",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",

32
src/app/(routes)/(website)/[...notFound]/page.tsx Normal file
View File

@ -0,0 +1,32 @@
import Image from "next/image";
import Link from "next/link";
interface PropsType {
params: {
notFound: string[];
};
}
export default function NotFound({ params }: PropsType) {
const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
return (
<div className="mt-[80px] flex flex-col items-center justify-center gap-3">
<Image src={imageUrl} width={500} height={500} alt="404 illustration" />
<h2 className="text-[30px] font-[800]">Nothing Found!</h2>
<p className="select-none font-[600]">
Could not find{" "}
<span className="cursor-pointer font-[800] text-[#fd6f00] underline">
/blog/{params.notFound.join("/")}
</span>{" "}
!
</p>
<Link
href="/"
className="rounded-md border border-[#fd6f00] px-5 py-3 font-[500] text-[#fd6f00]"
>
Return Home
</Link>
</div>
);
}

19
src/app/(routes)/(website)/not-found.tsx
View File

@ -1,19 +0,0 @@
import Image from "next/image";
import Link from "next/link";
export default function NotFound() {
const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
return (
<div className="mt-[120px] flex flex-col items-center justify-center gap-3">
<Image src={imageUrl} width={500} height={500} alt="404 illustration" />
<h2 className="text-[30px] font-[800]">Not Found</h2>
<p className="font-[600]">Could not find requested resource</p>
<Link
href="/"
className="rounded-md border border-[#fd6f00] px-5 py-3 font-[500] text-[#fd6f00]"
>
Return Home
</Link>
</div>
);
}

38
src/app/(routes)/blog/[...notFound]/page.tsx Normal file
View File

@ -0,0 +1,38 @@
import Image from "next/image";
import Link from "next/link";
interface PropsType {
params: {
notFound: string[];
};
}
export default function NotFound({ params }: PropsType) {
const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
return (
<div className="flex flex-col items-center justify-center gap-3">
<Image
src={imageUrl}
width={500}
height={500}
alt="404 illustration"
className="teste"
/>
<h2 className="text-[30px] font-[800]">Nothing Found!</h2>
<p className="select-none font-[600]">
Could not find{" "}
<span className="cursor-pointer font-[800] text-blog-text-quote underline">
/blog/{params.notFound.join("/")}
</span>{" "}
!
</p>
<Link
href="/blog"
className="rounded-md border border-blog-purple px-5 py-3 font-[500] text-blog-text-quote"
>
Return Home
</Link>
</div>
);
}

32
src/app/(routes)/blog/components/button/button.tsx
View File

@ -7,46 +7,46 @@ type buttonPropsType = {
export default function Button({ type, color, text }: buttonPropsType) {
return (
<button
className={`flex items-center justify-center rounded-[10px] px-[24px] py-[12px] text-[18px] font-[600] ${
className={`flex items-center justify-center rounded-[10px] px-[24px] py-[12px] text-[18px] font-[600] shadow-md ${
color === "red"
? type === "outline"
? "border-blog-red text-blog-red rounded-[10px] border-[2px]"
? "rounded-[10px] border-[2px] border-blog-red text-blog-red"
: type === "curve"
? "bg-blog-red rounded-[40px] text-white"
? "rounded-[40px] bg-blog-red text-white"
: type === "curveOutline"
? "border-blog-red text-blog-red border-2px rounded-[40px]"
? "border-2px rounded-[40px] border-blog-red text-blog-red"
: "bg-blog-red text-white"
: color === "purple"
? type === "outline"
? "border-blog-purple text-blog-purple rounded-[10px] border-[2px]"
? "rounded-[10px] border-[2px] border-blog-purple text-blog-purple"
: type === "curve"
? "bg-blog-purple rounded-[40px] text-white"
? "rounded-[40px] bg-blog-purple text-white"
: type === "curveOutline"
? "border-blog-purple text-blog-purple border-2px rounded-[40px]"
? "border-2px rounded-[40px] border-blog-purple text-blog-purple"
: "bg-blog-purple text-white"
: color === "yellow"
? type === "outline"
? "border-blog-yellow text-blog-yellow rounded-[10px] border-[2px]"
? "rounded-[10px] border-[2px] border-blog-yellow text-blog-yellow"
: type === "curve"
? "bg-blog-yellow rounded-[40px] text-white"
? "rounded-[40px] bg-blog-yellow text-white"
: type === "curveOutline"
? "border-blog-yellow text-blog-yellow border-2px rounded-[40px]"
? "border-2px rounded-[40px] border-blog-yellow text-blog-yellow"
: "bg-blog-yellow text-white"
: color === "green"
? type === "outline"
? "border-blog-green text-blog-green rounded-[10px] border-[2px]"
? "rounded-[10px] border-[2px] border-blog-green text-blog-green"
: type === "curve"
? "bg-blog-green rounded-[40px] text-white"
? "rounded-[40px] bg-blog-green text-white"
: type === "curveOutline"
? "border-blog-green text-blog-green border-2px rounded-[40px]"
? "border-2px rounded-[40px] border-blog-green text-blog-green"
: "bg-blog-green text-white"
: color === "background"
? type === "outline"
? "border-blog-background text-blog-background rounded-[10px] border-[2px]"
? "rounded-[10px] border-[2px] border-blog-background text-blog-background"
: type === "curve"
? "bg-blog-background text-blog-text-default rounded-[40px]"
? "rounded-[40px] bg-blog-background text-blog-text-default"
: type === "curveOutline"
? "border-blog-background text-blog-background border-2px rounded-[40px]"
? "border-2px rounded-[40px] border-blog-background text-blog-background"
: "bg-blog-background text-blog-text-default"
: ""
} `}

6
src/app/(routes)/blog/components/footer/footer.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
export default function Footer() {
return (
<div className="absolute bottom-0 py-5 flex w-full items-center justify-around bg-white">
<div className="absolute bottom-0 flex w-full items-center justify-around bg-white py-5">
<Image
src={"/images/blog/logo/logo-no-background.png"}
width={200}
@ -16,8 +16,8 @@ export default function Footer() {
height={50}
alt="parsaaghayi's blog logo"
/>
<p className="text-blog-text-passive text-[14px] font-[400]">
All Rights Reserved 2018 BehindMars
<p className="text-[14px] font-[400] text-blog-text-passive">
All Rights Reserved 2024 Parsa Aghayi
</p>
</div>
);

59
src/app/(routes)/blog/components/header/header.tsx
View File

@ -1,50 +1,31 @@
import Image from "next/image";
import React from "react";
import Button from "../button/button";
import { NavLinks } from "./navLinks";
import Link from "next/link";
export default function Header() {
return (
<div className="fixed z-50 flex w-full items-center justify-center bg-blog-background py-10">
<div className="top-10 flex w-[1280px] items-center justify-between">
<Image
src={"/images/blog/logo/logo-no-background.png"}
width={200}
height={50}
alt="parsaaghayi's blog logo"
/>
<div className="flex w-[50%] items-center justify-between">
<div className="menu flex flex-nowrap gap-5">
<a
href="#"
className="text-[16px] font-[600] text-blog-text-default"
>
Popular
</a>
<a className="active text-[16px] font-[600] text-blog-text-hover">
New
</a>
<a
href="#"
className="text-[16px] font-[600] text-blog-text-default"
>
Reading list
</a>
<a
href="#"
className="text-[16px] font-[600] text-blog-text-default"
>
Topics
</a>
</div>
<div className="flex items-center justify-center gap-5">
<Image
src={"/images/blog/icons/search.svg"}
width={24}
height={24}
alt="search icon"
/>
<Button color={"purple"} text={"Subscribe"} />
</div>
<Link href={"/blog"}>
<Image
src={"/images/blog/logo/logo-no-background.png"}
width={200}
height={50}
alt="parsaaghayi's blog logo"
/>
</Link>
<NavLinks />
<div className="flex items-center justify-center gap-5">
<Image
src={"/images/blog/icons/search.svg"}
width={24}
height={24}
alt="search icon"
className="hover:cursor-pointer"
/>
<Button color={"purple"} text={"Subscribe"} />
</div>
</div>
</div>

43
src/app/(routes)/blog/components/header/navLinks.tsx Normal file
View File

@ -0,0 +1,43 @@
"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
export function NavLinks() {
const pathname = usePathname();
return (
<nav className="menu flex flex-nowrap gap-5">
<Link
className={`text-[16px] font-[600] ${pathname === "/blog" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
href="/blog"
>
Home
</Link>
<Link
className={`text-[16px] font-[600] ${pathname === "/blog/new" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
href="/blog/new"
>
New
</Link>
<Link
className={`text-[16px] font-[600] ${pathname === "/blog/popular" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
href="/blog/popular"
>
Popular
</Link>
<Link
className={`text-[16px] font-[600] ${pathname === "/blog/reading-list" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
href="/blog/reading-list"
>
Reading list
</Link>
<Link
className={`text-[16px] font-[600] ${pathname === "/blog/topics" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
href="/blog/topics"
>
Topics
</Link>
</nav>
);
}

8
src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
View File

@ -14,7 +14,7 @@ export default function FilteredPosts() {
<div className="flex w-full justify-between gap-10">
<div className="flex w-[45%] flex-wrap justify-between gap-5">
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<h2 className="text-[16px] font-[400] text-blog-text-passive">
FREELANCING
</h2>
@ -23,7 +23,7 @@ export default function FilteredPosts() {
</h1>
</div>
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<h2 className="text-[16px] font-[400] text-blog-text-passive">
RESOURCE
</h2>
@ -32,7 +32,7 @@ export default function FilteredPosts() {
</h1>
</div>
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<h2 className="text-[16px] font-[400] text-blog-text-passive">
DESIGN PROCESS
</h2>
@ -41,7 +41,7 @@ export default function FilteredPosts() {
</h1>
</div>
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<h2 className="text-[16px] font-[400] text-blog-text-passive">
INSPIRATION
</h2>

8
src/app/(routes)/blog/components/home/new/new.tsx
View File

@ -38,7 +38,7 @@ export default function New() {
</p>
</div>
<div className="flex w-full flex-col">
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
<p className="text-[16px] font-[400] text-blog-text-passive">
SEP 04 2018
</p>
@ -47,7 +47,7 @@ export default function New() {
</h3>
</div>
<div className="flex w-full flex-col">
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
<p className="text-[16px] font-[400] text-blog-text-passive">
SEP 04 2018
</p>
@ -56,7 +56,7 @@ export default function New() {
</h3>
</div>
<div className="flex w-full flex-col">
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
<p className="text-[16px] font-[400] text-blog-text-passive">
SEP 04 2018
</p>
@ -65,7 +65,7 @@ export default function New() {
</h3>
</div>
<div className="flex w-full flex-col">
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
<p className="text-[16px] font-[400] text-blog-text-passive">
SEP 04 2018
</p>

58
src/app/(routes)/blog/components/home/random/random.tsx
View File

@ -9,7 +9,7 @@ export default function Random() {
</h2>
</div>
<div className="flex w-full flex-wrap justify-center gap-10">
<div className="flex w-full max-w-[80%] sm:max-w-[45%] flex-col gap-5">
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/2.jpg"}
width={580}
@ -21,7 +21,7 @@ export default function Random() {
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
RESOURCE
@ -35,7 +35,59 @@ export default function Random() {
guide to why you should be doing it — and how to get started.
</p>
</div>
<div className="flex w-full max-w-[80%] sm:max-w-[45%] flex-col gap-5">
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/3.jpg"}
width={580}
height={50}
alt="post title 3"
className="w-full rounded-lg"
/>
<div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
</div>
<h1 className="text-[28px] font-[600] text-blog-text-default">
How to Fix Error 404 Not Found on Your WordPress Site
</h1>
<p className="text-[16px] font-[400] text-blog-text-passive">
User research is the reality check every project needs. Here’s our
guide to why you should be doing it — and how to get started.
</p>
</div>
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/3.jpg"}
width={580}
height={50}
alt="post title 3"
className="w-full rounded-lg"
/>
<div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
</div>
<h1 className="text-[28px] font-[600] text-blog-text-default">
How to Fix Error 404 Not Found on Your WordPress Site
</h1>
<p className="text-[16px] font-[400] text-blog-text-passive">
User research is the reality check every project needs. Here’s our
guide to why you should be doing it — and how to get started.
</p>
</div>
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/3.jpg"}
width={580}

10
src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
View File

@ -12,7 +12,7 @@ export default function ReadingList() {
</p>
</div>
<div className="flex items-center justify-between">
<div className="flex flex-col items-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-1.jpg"}
@ -26,7 +26,7 @@ export default function ReadingList() {
</h3>
</div>
<div className="flex flex-col items-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-2.jpg"}
@ -40,7 +40,7 @@ export default function ReadingList() {
</h3>
</div>
<div className="flex flex-col items-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-3.jpg"}
@ -52,7 +52,7 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
</div>
<div className="flex flex-col items-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-4.jpg"}
@ -66,7 +66,7 @@ export default function ReadingList() {
</h3>
</div>
<div className="flex flex-col items-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-5.jpg"}

2
src/app/(routes)/blog/layout.tsx
View File

@ -4,7 +4,7 @@ import Footer from "./components/footer/footer";
export const metadata: Metadata = {
title: "parsa aghayi",
description: "parsa aghayi personal website",
description: "parsa aghayi personal blog",
};
export default function RootLayout({

7
src/app/(routes)/blog/new/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react'
export default function New() {
return (
<div>New</div>
)
}

19
src/app/(routes)/blog/not-found.tsx
View File

@ -1,19 +0,0 @@
import Image from "next/image";
import Link from "next/link";
export default function NotFound() {
const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
return (
<div className="mt-[120px] flex flex-col items-center justify-center gap-3">
<Image src={imageUrl} width={500} height={500} alt="404 illustration" />
<h2 className="text-[30px] font-[800]">Not Found</h2>
<p className="font-[600]">Could not find requested resource</p>
<Link
href="/"
className="rounded-md border border-[#fd6f00] px-5 py-3 font-[500] text-[#fd6f00]"
>
Return Home
</Link>
</div>
);
}

25
src/app/globals.css
View File

@ -286,3 +286,28 @@ html {
.center-center {
@apply items-center justify-center;
}
.teste {
-webkit-mask-image: linear-gradient(
to top,
transparent,
white 20%,
white 80%,
transparent
),
linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
linear-gradient(to left, transparent, white 10%, white 90%, transparent),
linear-gradient(to right, transparent, white 10%, white 90%, transparent);
mask-image: linear-gradient(
to top,
transparent,
white 20%,
white 90%,
transparent
),
linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
linear-gradient(to left, transparent, white 10%, white 90%, transparent),
linear-gradient(to right, transparent, white 10%, white 90%, transparent);
mask-composite: intersect;
-webkit-mask-composite: destination-in;
}