blog home finished
This commit is contained in:
parsa aghaei
parent
68c89e21d3
commit
53c684a308
9
public/images/blog/icons/right-arrow.svg
Normal file
9
public/images/blog/icons/right-arrow.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="32" height="32" fill="url(#pattern0_0_2335)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0_0_2335" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_0_2335" transform="scale(0.03125)"/>
|
||||
</pattern>
|
||||
<image id="image0_0_2335" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAA0mlDQ1BJQ0MgUHJvZmlsZQAAGJVjYGCsSCwoyGESYGDIzSspcg9yjIyIjFJgv8rAzsDIAAaJycUFjgEBPgw4wbdrELWXdUFm4VaHFbCkpBYnA+ktQFyaXFBUwsDAqANkq5eXFIDYIUC2SHZIkDOQnQFk80HVg4C0c2JOZlJRYklqioJ7UWKlgnN+Tn5RcUFiciqJriAClKRWlIBo5/yCyqLM9IwSBUegb1OBduYWlJakFukoeOYl6zEwgMIPouNzIDhcGMXOJJcWlUGNYWQyZmAAABFdNMUdedORAAAAfElEQVRIDc2VMQ6AIBAEF5/ghyhsVPA9/sXCd2qlhR0kFMwW0hGyk+Vg7yT7GjUpEOqhR6eGfkTURRHzLxALd2FArNyFAZF000c1IDJ3YUBs3MWH2MuQgdSVqPYeXgEWEcrhR4JyGCYohw0FymFfhnI8WPBow8O1ncrq9AUer0zvbSvSzgAAAABJRU5ErkJggg=="/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1013 B |
BIN
public/images/blog/posts/1.jpg
Normal file
BIN
public/images/blog/posts/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
BIN
public/images/blog/posts/2.jpg
Normal file
BIN
public/images/blog/posts/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
BIN
public/images/blog/posts/3.jpg
Normal file
BIN
public/images/blog/posts/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
public/images/blog/posts/4.jpg
Normal file
BIN
public/images/blog/posts/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/images/blog/reading-list/readinglist-1.jpg
Normal file
BIN
public/images/blog/reading-list/readinglist-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
public/images/blog/reading-list/readinglist-2.jpg
Normal file
BIN
public/images/blog/reading-list/readinglist-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
public/images/blog/reading-list/readinglist-3.jpg
Normal file
BIN
public/images/blog/reading-list/readinglist-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/images/blog/reading-list/readinglist-4.jpg
Normal file
BIN
public/images/blog/reading-list/readinglist-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/images/blog/reading-list/readinglist-5.jpg
Normal file
BIN
public/images/blog/reading-list/readinglist-5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@ -3,7 +3,7 @@ import React from "react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div className="absolute bottom-10 flex w-full items-center justify-around">
|
||||
<div className="absolute bottom-0 py-5 flex w-full items-center justify-around bg-white">
|
||||
<Image
|
||||
src={"/images/blog/logo/logo-no-background.png"}
|
||||
width={200}
|
||||
|
||||
@ -4,28 +4,47 @@ import Button from "../button/button";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="fixed 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="#">Popular</a>
|
||||
<a className="active text-blog-text-hover">New</a>
|
||||
<a href="#">Reading list</a>
|
||||
<a href="#">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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function FilteredPosts() {
|
||||
return (
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h2 className="text-[36px] font-[700] text-blog-text-default">
|
||||
Popular
|
||||
</h2>
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
View all
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-passive">
|
||||
FREELANCING
|
||||
</h2>
|
||||
<h1 className="text-[18px] font-[600] text-blog-text-default">
|
||||
Affiliate Systems Suck, So We Rolled Our Own
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-passive">
|
||||
RESOURCE
|
||||
</h2>
|
||||
<h1 className="text-[18px] font-[600] text-blog-text-hover">
|
||||
How not to design web forms
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-passive">
|
||||
DESIGN PROCESS
|
||||
</h2>
|
||||
<h1 className="text-[18px] font-[600] text-blog-text-default">
|
||||
B2B Lead Generation – Tips and Strategies for 2018
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-passive">
|
||||
INSPIRATION
|
||||
</h2>
|
||||
<h1 className="text-[18px] font-[600] text-blog-text-default">
|
||||
8 Best WordPress Ecommerce Plugins
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex w-[55%] items-center overflow-hidden rounded-md">
|
||||
<Image
|
||||
src={"/images/blog/posts/2.jpg"}
|
||||
alt="parsaaghayi's blog logo"
|
||||
fill={true}
|
||||
/>
|
||||
<div className="absolute z-[1] h-full w-full bg-blog-purple opacity-80"></div>
|
||||
|
||||
<div className="absolute flex flex-wrap gap-5 p-10">
|
||||
<div className="z-10 flex w-full items-center justify-start gap-2">
|
||||
<p className="text-[16px] font-[400] text-white">BY</p>
|
||||
<h2 className="text-[16px] font-[400] text-white">AUTHOR NAME</h2>
|
||||
<p className="text-[16px] font-[400] text-white">IN</p>
|
||||
<h2 className="text-[16px] font-[400] text-white">CATEGORY</h2>
|
||||
</div>
|
||||
|
||||
<h1 className="z-10 w-full text-[28px] font-[600] text-white">
|
||||
How to accept rejection gracefully — and use it to grow
|
||||
</h1>
|
||||
|
||||
<p className="z-10 w-full text-[16px] font-[400] text-white">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,25 +1,79 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function New() {
|
||||
return (
|
||||
<div className="flex w-full flex-wrap justify-between gap-5">
|
||||
<div className="relative flex w-[55%] flex-col border">
|
||||
<img
|
||||
src={"/images/blog/logo/logo-no-background.png"}
|
||||
<div className="relative flex w-[60%] flex-col overflow-hidden rounded-md border">
|
||||
<Image
|
||||
src={"/images/blog/posts/1.jpg"}
|
||||
alt="parsaaghayi's blog logo"
|
||||
className="absolute z-0"
|
||||
fill={true}
|
||||
/>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<p className="text-[16px] font-[400] text-white">BY</p>
|
||||
<h2 className="text-[16px] font-[400] text-white">AUTHOR NAME</h2>
|
||||
<p className="text-[16px] font-[400] text-white">IN</p>
|
||||
<h2 className="text-[16px] font-[400] text-white">CATEGORY</h2>
|
||||
<div className="absolute z-[1] h-full w-full bg-blog-purple opacity-80"></div>
|
||||
|
||||
<div className="absolute flex flex-wrap gap-5 p-10">
|
||||
<div className="z-10 flex w-full items-center justify-start gap-2">
|
||||
<p className="text-[16px] font-[400] text-white">BY</p>
|
||||
<h2 className="text-[16px] font-[400] text-white">AUTHOR NAME</h2>
|
||||
<p className="text-[16px] font-[400] text-white">IN</p>
|
||||
<h2 className="text-[16px] font-[400] text-white">CATEGORY</h2>
|
||||
</div>
|
||||
|
||||
<h1 className="z-10 w-full text-[28px] font-[600] text-white">
|
||||
How to accept rejection gracefully — and use it to grow
|
||||
</h1>
|
||||
|
||||
<p className="z-10 w-full text-[16px] font-[400] text-white">
|
||||
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>
|
||||
|
||||
<div className="flex w-[35%] flex-col gap-10">
|
||||
<div className="flex w-full items-center justify-between border-b-2 pb-10">
|
||||
<h2 className="text-[24px] font-[700] text-blog-text-default">New</h2>
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
View all new
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col">
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
SEP 04 2018
|
||||
</p>
|
||||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||||
Our 15 favorite websites from August 2018
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col">
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
SEP 04 2018
|
||||
</p>
|
||||
<h3 className="text-[16px] font-[600] text-blog-text-hover">
|
||||
The beginners guide to user research
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col">
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
SEP 04 2018
|
||||
</p>
|
||||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||||
Web page layout 101: website anatomy every designer needs to learn
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col">
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
SEP 04 2018
|
||||
</p>
|
||||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||||
10 essential sections to a high-converting landing page
|
||||
</h3>
|
||||
</div>
|
||||
<h1>How to accept rejection gracefully — and use it to grow</h1>
|
||||
<p>
|
||||
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-[40%] border">list</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
67
src/app/(routes)/blog/components/home/random/random.tsx
Normal file
67
src/app/(routes)/blog/components/home/random/random.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Random() {
|
||||
return (
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h2 className="text-[36px] font-[700] text-blog-text-default">
|
||||
Random
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex w-full justify-between gap-5">
|
||||
<div className="flex w-[45%] flex-col gap-5">
|
||||
<Image
|
||||
src={"/images/blog/posts/2.jpg"}
|
||||
width={580}
|
||||
height={50}
|
||||
alt="post title 2"
|
||||
className="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">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</div>
|
||||
<h1 className="text-[28px] font-[600] text-blog-text-default">
|
||||
Website Downtime: Applicable Tips on How to Prevent It
|
||||
</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-[45%] flex-col gap-5">
|
||||
<Image
|
||||
src={"/images/blog/posts/3.jpg"}
|
||||
width={580}
|
||||
height={50}
|
||||
alt="post title 3"
|
||||
className="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">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</div>
|
||||
<h1 className="text-[28px] font-[600] text-blog-text-default">
|
||||
Website Downtime: Applicable Tips on How to Prevent It
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,94 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ReadingList() {
|
||||
return (
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h2 className="text-[36px] font-[700] text-blog-text-default">
|
||||
ReadingList
|
||||
</h2>
|
||||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||||
View all
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<div className="h-[200px] w-[200px] overflow-hidden">
|
||||
<Image
|
||||
src={"/images/blog/reading-list/readinglist-1.jpg"}
|
||||
width={300}
|
||||
height={200}
|
||||
alt="readinglist-1 title image"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI Design
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<div className="h-[200px] w-[200px] overflow-hidden">
|
||||
<Image
|
||||
src={"/images/blog/reading-list/readinglist-2.jpg"}
|
||||
width={300}
|
||||
height={200}
|
||||
alt="readinglist-2 title image"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UX design
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<div className="h-[200px] w-[200px] overflow-hidden">
|
||||
<Image
|
||||
src={"/images/blog/reading-list/readinglist-3.jpg"}
|
||||
width={300}
|
||||
height={200}
|
||||
alt="readinglist-3 title image"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<div className="h-[200px] w-[200px] overflow-hidden">
|
||||
<Image
|
||||
src={"/images/blog/reading-list/readinglist-4.jpg"}
|
||||
width={300}
|
||||
height={200}
|
||||
alt="readinglist-4 title image"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
Popular
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<div className="h-[200px] w-[200px] overflow-hidden">
|
||||
<Image
|
||||
src={"/images/blog/reading-list/readinglist-5.jpg"}
|
||||
width={300}
|
||||
height={200}
|
||||
alt="readinglist-5 title image"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
Essentials
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="center-center flex h-full w-[80px] rounded-md bg-white">
|
||||
<Image
|
||||
src={"/images/blog/icons/right-arrow.svg"}
|
||||
height={32}
|
||||
width={32}
|
||||
alt="right-arrow icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -13,7 +13,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<div className="flex w-full flex-wrap justify-center">
|
||||
<div className="flex w-full flex-wrap justify-center bg-blog-background">
|
||||
<link
|
||||
rel="icon"
|
||||
href="/images/favicons/blog-icon.png"
|
||||
@ -23,7 +23,7 @@ export default function RootLayout({
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="main blog relative my-[120px] flex w-full flex-wrap justify-center">
|
||||
<div className="main blog relative my-[200px] flex w-full flex-wrap justify-center">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
import FilteredPosts from "./components/home/filtered-posts/filteredPosts";
|
||||
import New from "./components/home/new/new";
|
||||
import Random from "./components/home/random/random";
|
||||
import ReadingList from "./components/home/reading-lists/readingList";
|
||||
|
||||
export default async function Blog() {
|
||||
return (
|
||||
<div className="w-[1280px]">
|
||||
<div className="flex w-[1280px] flex-col gap-[150px]">
|
||||
<New />
|
||||
<ReadingList />
|
||||
<FilteredPosts />
|
||||
<Random />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ export default function RootLayout({
|
||||
<html lang="en">
|
||||
<body
|
||||
suppressHydrationWarning={true}
|
||||
className={`${geistSans.variable} relative flex h-[100vh] w-full flex-col items-center justify-between antialiased`}
|
||||
className={`${geistSans.variable} relative flex h-full w-full flex-col items-center justify-between antialiased`}
|
||||
>
|
||||
<div className="main flex h-full w-full flex-wrap justify-center">
|
||||
{children}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user