init

components/ArticleListItem.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link"
+import type { ArticleItem} from "@/types";
+
+interface Props {
+    category: string,
+    articles: ArticleItem[]
+}
+
+const ArticleItemList = ({ category, articles }: Props) => {
+    return (
+        <>
+            <div className={"flex flex-col gap-5"}>
+                <h2 className={"font-cormorantGaramond text-4xl"}>{category}</h2>
+                <div className={"flex flex-col gap-2.5 font-poppins text-lg"}>
+                    {articles.map((article, id) => (
+                        <Link href={`/blog/${article.id}`} key={id} className={"hover:text-nord-12 transition duration-250"}>
+                            {article.title}
+                        </Link>
+                    ))}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ArticleItemList

components/layout/layout-header.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React, { useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link';
+import Logo from "../../public/borb.png"
+
+const Header = () => {
+    const [navbar, setNavbar] = useState(false);
+
+    return (
+        <>
+            <header className="font-poppins bg-polar-night-light z-10">
+                <div className="justify-between px-2 lg:px-0 mx-auto lg:max-w-7xl md:items-center md:flex md:px-4">
+                    <div>
+                        <div className="flex items-center justify-between md:block">
+                            <div className='flex items-center justify-between md:py-3 gap-10'>
+                                <Link href={"/"} className="flex flex-col items-center gap-0 leading-none">
+                                    <Image src={Logo} width={100} alt='Logo'/>
+                                </Link>
+                            </div>
+                            <div className="md:hidden">
+                                <button
+                                    className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
+                                    onClick={() => setNavbar(!navbar)}>
+                                    {navbar ? (
+                                        <div className="bar text-white"></div>
+                                    ) : (
+                                        <div className="close text-white"></div>
+                                    )}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <hr className='md:opacity-0 md:pt-3'></hr>
+                    <div>
+                        <div
+                            className={`flex-1 justify-self-center md:block md:pb-0 md:mt-0 ${navbar ? 'p-12 md:p-0 block' : 'hidden'}`}>
+                            <ul className=" md:h-auto items-center justify-center md:flex">
+                                <li className="text-xl text-white py-2 my-2 md:my-0 md:px-6 text-center md:border-b-0  border-white  hover:text-nord-12 transition duration-250">
+                                    <Link href="/" onClick={() => setNavbar(!navbar)}
+                                          className='sm:px-52 md:px-0'>Home</Link>
+                                </li>
+
+                                <li className="text-xl text-white py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-white  hover:text-nord-12 transition duration-250">
+                                    <Link href="/blog" onClick={() => setNavbar(!navbar)}
+                                          className='sm:px-52 md:px-0'>Blog</Link>
+                                </li>
+
+                                <li className="text-xl text-white py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-white  hover:text-nord-12 transition duration-250">
+                                    <Link href="/contact" onClick={() => setNavbar(!navbar)}
+                                          className='sm:px-48 md:px-0'>Contact</Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </>
+    )
+}
+export default Header