blog header and footer created

public/images/blog/icons/search.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="24" height="24" fill="url(#pattern0_303_1344)"/>
+<defs>
+<pattern id="pattern0_303_1344" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_303_1344" transform="scale(0.0416667)"/>
+</pattern>
+<image id="image0_303_1344" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAA0mlDQ1BJQ0MgUHJvZmlsZQAAGJVjYGCsSCwoyGESYGDIzSspcg9yjIyIjFJgv8rAzsDIAAaJycUFjgEBPgw4wbdrELWXdUFm4VaHFbCkpBYnA+ktQFyaXFBUwsDAqANkq5eXFIDYIUC2SHZIkDOQnQFk80HVg4C0c2JOZlJRYklqioJ7UWKlgnN+Tn5RcUFiciqJriAClKRWlIBo5/yCyqLM9IwSBUegb1OBduYWlJakFukoeOYl6zEwgMIPouNzIDhcGMXOJJcWlUGNYWQyZmAAABFdNMUdedORAAABhUlEQVQ4EY2SzStEYRTGfzOjSLPQxN1o8hdI8pGvxr9AaqZsrZSSrYXIFSs7/wKl0GQtlmKkUWIlysJHo9hoMmY8d3jd9zLMnFv3Pc85z3M673lPCNv66aNbn8MpGY7Z48lOB32HbUq8csga86S5FXpgLEjyUZJHpVPU+SHa2JVonZgV+3KTSmzS8jvBBC8cEQlmHFXfDIYsNEyRWQvL3VYzlaob1ip52g2AfrWT8mEFr4FLDeHbZjQZ+6rfCctxuTcorKlnKRj4x5nRy8Q/c2F6OPmD5oc9Ro8RNGtG1SynezpGcEpnNT4dhDg3ggxdVQUe48wXtGoJ/rdBbng2lJiebceAimeCd6btzJiuNG4HAn6UKw3+xzatk6M3QDMgypbKDRlozpg2ssAK9SbwdSZUvaRv+UdcMKKNzHOBy4jetFEbNsWGes+q+rIkS78laCPT3JUrFsv/a131s/clYbeSxIvFGWWSBE0BgivJYiBSFSxKsuD1XqvtE2aOt9oFcKAhDHwADJNfRD9OM8wAAAAASUVORK5CYII="/>
+</defs>
+</svg>

public/images/blog/icons/socials.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="20" viewBox="0 0 140 20" fill="none">
+  <circle cx="129.929" cy="9.92885" r="9.92885" fill="#9B9B9B"/>
+  <path d="M132.425 10.3175H130.653V16.8081H127.969V10.3175H126.692V8.03641H127.969V6.5603C127.969 5.50473 128.47 3.85181 130.677 3.85181L132.665 3.86013V6.07428H131.223C130.986 6.07428 130.653 6.19251 130.653 6.69605V8.03853H132.659L132.425 10.3175Z" fill="white"/>
+  <circle cx="99.9288" cy="9.92885" r="9.92885" fill="#9B9B9B"/>
+  <path d="M106.568 7.11292C106.142 7.30159 105.685 7.4292 105.205 7.48619C105.695 7.19257 106.071 6.72796 106.248 6.17345C105.79 6.44549 105.282 6.64283 104.741 6.7492C104.308 6.28814 103.692 6 103.008 6C101.698 6 100.635 7.06283 100.635 8.37327C100.635 8.55929 100.656 8.74035 100.697 8.91416C98.7246 8.81522 96.9758 7.87044 95.8051 6.43416C95.6009 6.7846 95.4837 7.19257 95.4837 7.62743C95.4837 8.45062 95.903 9.17735 96.5395 9.60283C96.1506 9.59062 95.7844 9.48389 95.4646 9.30566C95.4644 9.31575 95.4644 9.32584 95.4644 9.33575C95.4644 10.4857 96.2828 11.4448 97.3683 11.6627C97.1694 11.7172 96.9593 11.746 96.7432 11.746C96.5899 11.746 96.4414 11.7313 96.2966 11.7037C96.5986 12.6464 97.4749 13.3326 98.5136 13.3519C97.7012 13.9885 96.6781 14.3678 95.5658 14.3678C95.3747 14.3678 95.1853 14.3566 95 14.3345C96.0497 15.0081 97.2975 15.4009 98.6377 15.4009C103.003 15.4009 105.39 11.7846 105.39 8.64814C105.39 8.54531 105.388 8.44283 105.383 8.34124C105.847 8.00673 106.25 7.58885 106.568 7.11292Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M72.9456 5.30664H67.0007C66.0518 5.30664 65.2798 6.07864 65.2798 7.02753V12.9724C65.2798 13.9213 66.0518 14.6935 67.0007 14.6935H72.9456C73.8945 14.6935 74.6667 13.9215 74.6667 12.9724V7.02753C74.6667 6.07864 73.8947 5.30664 72.9456 5.30664ZM69.9731 13.0902C68.2693 13.0902 66.8831 11.704 66.8831 9.99997C66.8831 8.2962 68.2693 6.90997 69.9731 6.90997C71.6771 6.90997 73.0633 8.2962 73.0633 9.99997C73.0633 11.7038 71.6769 13.0902 69.9731 13.0902ZM72.4313 6.81775C72.4313 7.22086 72.7593 7.54886 73.1627 7.54886C73.5658 7.54886 73.8938 7.22086 73.8938 6.81775C73.8938 6.41464 73.5658 6.08664 73.1627 6.08664C72.7593 6.08664 72.4313 6.41464 72.4313 6.81775Z" fill="#9B9B9B"/>
+  <path d="M69.9731 8.21582C68.9895 8.21582 68.1887 9.01626 68.1887 9.99982C68.1887 10.9838 68.9895 11.7845 69.9731 11.7845C70.9571 11.7845 71.7573 10.9838 71.7573 9.99982C71.7573 9.01649 70.9569 8.21582 69.9731 8.21582Z" fill="#9B9B9B"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M60 9.97311C60 4.46533 64.4653 0 69.9731 0C75.4809 0 79.9462 4.46533 79.9462 9.97311C79.9462 15.4809 75.4809 19.9462 69.9731 19.9462C64.4653 19.9462 60 15.4809 60 9.97311ZM72.9456 15.9991C74.6147 15.9991 75.9722 14.6416 75.9722 12.9724V7.02756C75.9722 5.35867 74.6147 4.00089 72.9456 4.00089H67.0007C65.3318 4.00089 63.974 5.35867 63.974 7.02756V12.9724C63.974 14.6416 65.3318 15.9991 67.0007 15.9991H72.9456Z" fill="#9B9B9B"/>
+  <circle cx="39.929" cy="9.92922" r="9.92885" fill="#9B9B9B"/>
+  <path d="M40.7304 13.2959C39.9798 13.2378 39.6644 12.8656 39.0758 12.5083C38.7522 14.2058 38.3568 15.8331 37.1857 16.6832C36.8237 14.1175 37.7163 12.1904 38.1308 10.1449C37.4242 8.95554 38.2158 6.56156 39.706 7.15147C41.5402 7.87678 38.1181 11.5739 40.4154 12.0357C42.8138 12.5178 43.7929 7.87412 42.3055 6.36368C40.1565 4.18297 36.0501 6.31412 36.555 9.43589C36.6781 10.1991 37.4667 10.4308 36.8701 11.4839C35.4947 11.1793 35.0844 10.0945 35.1372 8.64828C35.2223 6.28103 37.2642 4.62351 39.3124 4.39412C41.9027 4.10421 44.3338 5.34527 44.6694 7.78174C45.0469 10.5316 43.5 13.5097 40.7304 13.2959Z" fill="white"/>
+  <circle cx="9.92885" cy="9.92885" r="9.92885" fill="#9B9B9B"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.55381 14.2835H10.3331C10.3331 14.2835 10.5685 14.2577 10.6887 14.1281C10.7993 14.0092 10.7958 13.7858 10.7958 13.7858C10.7958 13.7858 10.7805 12.7402 11.2658 12.5862C11.7442 12.4345 12.3586 13.5968 13.0097 14.0437C13.5021 14.382 13.8763 14.3078 13.8763 14.3078L15.6173 14.2835C15.6173 14.2835 16.5281 14.2274 16.0963 13.5113C16.0609 13.4527 15.8448 12.9816 14.8018 12.0135C13.7101 11.0002 13.8563 11.1641 15.1713 9.41133C15.9722 8.3439 16.2924 7.69222 16.1924 7.4131C16.097 7.14726 15.508 7.21753 15.508 7.21753L13.5476 7.22974C13.5476 7.22974 13.4023 7.20992 13.2945 7.27434C13.1892 7.33753 13.1214 7.48478 13.1214 7.48478C13.1214 7.48478 12.8112 8.3108 12.3973 9.01328C11.5244 10.4956 11.1754 10.5738 11.0327 10.4818C10.7009 10.2673 10.7837 9.62 10.7837 9.16018C10.7837 7.72372 11.0016 7.12478 10.3595 6.96974C10.1464 6.91823 9.98956 6.88425 9.4446 6.87877C8.74513 6.87151 8.1531 6.88089 7.81788 7.04514C7.59487 7.15434 7.42283 7.3977 7.52761 7.41169C7.65717 7.42903 7.95062 7.4908 8.1062 7.70266C8.30708 7.97593 8.3 8.58974 8.3 8.58974C8.3 8.58974 8.4154 10.2807 8.03044 10.4908C7.7662 10.6349 7.40372 10.3407 6.62549 8.99593C6.22673 8.30708 5.92567 7.54567 5.92567 7.54567C5.92567 7.54567 5.86761 7.40337 5.76407 7.32726C5.63841 7.23505 5.46283 7.20567 5.46283 7.20567L3.6 7.21788C3.6 7.21788 3.32036 7.22567 3.2177 7.34726C3.12637 7.4554 3.21044 7.67912 3.21044 7.67912C3.21044 7.67912 4.66885 11.0912 6.32018 12.8106C7.83434 14.3871 9.55381 14.2835 9.55381 14.2835Z" fill="white"/>
+</svg>

src/app/(routes)/(website)/components/burger-button/burgerButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import React, { useState } from "react";
-import MobileMenu from "../mobile-menu/page";
+import MobileMenu from "../mobile-menu/mobileMenu";
 
 export default function BurgerButton() {
   const [clicked, setClicked] = useState(false);

src/app/(routes)/(website)/components/header/footer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import BurgerButton from "../burger-button/page";
+import BurgerButton from "../burger-button/burgerButton";
 
 export default function Header() {
   return (

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

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
-import Header from "./components/header/page";
-import Footer from "./components/footer/page";
+import Header from "./components/header/footer";
+import Footer from "./components/footer/footer";
 
 export const metadata: Metadata = {
   title: "parsa aghayi",

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

@@ -1,9 +1,9 @@
 import Image from "next/image";
-import Testimonials from "./components/testimonials/page";
-import Contact from "./components/contact/page";
-import AboutMe from "./components/about-me/page";
-import Services from "./components/services/page";
-import MyProjects from "./components/my-projects/page";
+import Testimonials from "./components/testimonials/testimonials";
+import Contact from "./components/contact/contact";
+import AboutMe from "./components/about-me/aboutMe";
+import Services from "./components/services/projects";
+import MyProjects from "./components/projects/projects";
 
 export default async function Home() {
 

src/app/(routes)/blog/components/burger-button/burgerButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import React, { useState } from "react";
-import MobileMenu from "../mobile-menu/page";
+import MobileMenu from "../mobile-menu/mobileMenu";
 
 export default function BurgerButton() {
   const [clicked, setClicked] = useState(false);

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

@@ -0,0 +1,57 @@
+type buttonPropsType = {
+  type?: "outline" | "curve" | "curveOutline";
+  color: "red" | "purple" | "yellow" | "green" | "background";
+  text: string;
+};
+
+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] ${
+        color === "red"
+          ? type === "outline"
+            ? "border-blog-red text-blog-red rounded-[10px] border-[2px]"
+            : type === "curve"
+              ? "bg-blog-red rounded-[40px] text-white"
+              : type === "curveOutline"
+                ? "border-blog-red text-blog-red border-2px rounded-[40px]"
+                : "bg-blog-red text-white"
+          : color === "purple"
+            ? type === "outline"
+              ? "border-blog-purple text-blog-purple rounded-[10px] border-[2px]"
+              : type === "curve"
+                ? "bg-blog-purple rounded-[40px] text-white"
+                : type === "curveOutline"
+                  ? "border-blog-purple text-blog-purple border-2px rounded-[40px]"
+                  : "bg-blog-purple text-white"
+            : color === "yellow"
+              ? type === "outline"
+                ? "border-blog-yellow text-blog-yellow rounded-[10px] border-[2px]"
+                : type === "curve"
+                  ? "bg-blog-yellow rounded-[40px] text-white"
+                  : type === "curveOutline"
+                    ? "border-blog-yellow text-blog-yellow border-2px rounded-[40px]"
+                    : "bg-blog-yellow text-white"
+              : color === "green"
+                ? type === "outline"
+                  ? "border-blog-green text-blog-green rounded-[10px] border-[2px]"
+                  : type === "curve"
+                    ? "bg-blog-green rounded-[40px] text-white"
+                    : type === "curveOutline"
+                      ? "border-blog-green text-blog-green border-2px rounded-[40px]"
+                      : "bg-blog-green text-white"
+                : color === "background"
+                  ? type === "outline"
+                    ? "border-blog-background text-blog-background rounded-[10px] border-[2px]"
+                    : type === "curve"
+                      ? "bg-blog-background text-blog-text-default rounded-[40px]"
+                      : type === "curveOutline"
+                        ? "border-blog-background text-blog-background border-2px rounded-[40px]"
+                        : "bg-blog-background text-blog-text-default"
+                  : ""
+      } `}
+    >
+      {text}
+    </button>
+  );
+}

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

@@ -0,0 +1,24 @@
+import Image from "next/image";
+import React from "react";
+
+export default function Footer() {
+  return (
+    <div className="absolute bottom-10 flex w-full items-center justify-around">
+      <Image
+        src={"/images/blog/logo/logo-no-background.png"}
+        width={200}
+        height={50}
+        alt="parsaaghayi's blog logo"
+      />
+      <Image
+        src={"/images/blog/icons/socials.svg"}
+        width={140}
+        height={50}
+        alt="parsaaghayi's blog logo"
+      />
+      <p className="text-blog-text-passive text-[14px] font-[400]">
+        All Rights Reserved 2018 BehindMars
+      </p>
+    </div>
+  );
+}

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

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function Footer() {
-  return <div className="flex w-full flex-col">Footer</div>;
-}

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

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import React from "react";
+import Button from "../button/button";
+
+export default function Header() {
+  return (
+    <div className="fixed top-10 flex w-full items-center justify-around">
+      <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>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function Header() {
-  return <div className="flex h-[70px] w-full bg-red-400">header</div>;
-}

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

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
-import Header from "./components/header/page";
-import Footer from "./components/footer/page";
+import Header from "./components/header/header";
+import Footer from "./components/footer/footer";
 
 export const metadata: Metadata = {
   title: "parsa aghayi",
@@ -13,17 +13,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex w-full flex-wrap">
+    <div className="flex w-full flex-wrap pt-5">
       <link
         rel="icon"
-        href="/images/favicons/website-icon.ico"
-        type="image/ico"
+        href="/images/favicons/blog-icon.png"
+        type="image/png"
         sizes="32x32"
       />
 
       <Header />
 
-      <div className="main flex w-full flex-wrap justify-center">
+      <div className="main blog relative my-[120px] flex w-full flex-wrap justify-center">
         {children}
       </div>
 

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

@@ -1,13 +1,7 @@
 export default async function Blog() {
   return (
-    <div className="flex">
-      <link
-        rel="icon"
-        href="/images/favicons/blog-icon.png"
-        type="image/png"
-        sizes="32x32"
-      />
-      salam
+    <div className="">
+      Blog
     </div>
   );
 }

src/app/globals.css

@@ -279,6 +279,10 @@ html {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
-.testimonial{
+.testimonial {
   transition: all ease-in-out 0.5s;
-}
+}
+
+.center-center {
+  @apply items-center justify-center;
+}

src/app/layout.tsx

@@ -16,9 +16,9 @@ export default function RootLayout({
     <html lang="en">
       <body
         suppressHydrationWarning={true}
-        className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between antialiased`}
+        className={`${geistSans.variable} relative flex h-[100vh] w-full flex-col items-center justify-between antialiased`}
       >
-        <div className="main flex w-full flex-wrap justify-center">
+        <div className="main flex h-full w-full flex-wrap justify-center">
           {children}
         </div>
       </body>

tailwind.config.ts

@@ -11,6 +11,22 @@ const config: Config = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        blog: {
+          red: "#FF5480",
+          purple: "#9283E0",
+          orange: "#FFA599",
+          yellow: "#FFD581",
+          violet: "#FE90EC",
+          blue: "#27AEFF",
+          green: "#00DC90",
+          background: "#F9F9Fb",
+          text: {
+            default: "#000000",
+            passive: "#9B9B9B",
+            quote: "#9283E0",
+            hover: "#FF5480",
+          },
+        },
       },
     },
   },