blog home finished

public/images/blog/icons/right-arrow.svg

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

src/app/(routes)/blog/components/footer/footer.tsx

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

src/app/(routes)/blog/components/header/header.tsx

@@ -4,7 +4,8 @@ import Button from "../button/button";
 
 export default function Header() {
   return (
-    <div className="fixed top-10 flex w-[1280px] items-center justify-between">
+    <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}
@@ -13,10 +14,27 @@ export default function Header() {
         />
         <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>
+            <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
@@ -29,5 +47,6 @@ export default function Header() {
           </div>
         </div>
       </div>
+    </div>
   );
 }

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

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

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

@@ -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">
+        <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>How to accept rejection gracefully — and use it to grow</h1>
-        <p>
+
+          <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 className="flex w-[40%] border">list</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>
+      </div>
     </div>
   );
 }

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

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

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

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

src/app/(routes)/blog/layout.tsx

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

src/app/(routes)/blog/page.tsx

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

src/app/layout.tsx

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