chore: add basic layout

src/components/Footer/Footer.tsx

@@ -0,0 +1,9 @@
+import styles from "Footer.module.css";
+
+export function Footer() {
+  return (
+    <div className={styles.footer}>
+      <div className={styles.branding}></div>
+    </div>
+  );
+}

src/components/Layout/Layout.module.css

@@ -0,0 +1,23 @@
+.layout {
+  min-height: 100vh;
+}
+
+.container {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.layout.default {
+  .content {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: 20px;
+  }
+}

src/components/Layout/Layout.tsx

@@ -0,0 +1,35 @@
+import { Roboto } from "next/font/google";
+import type { FC, ReactNode } from "react";
+
+import styles from "./Layout.module.css";
+
+import { Logo } from "@/components/Logo/Logo";
+import { Navigation } from "@/components/Navigation/Navigation";
+import { cn } from "@/lib/utils";
+
+const font = Roboto({ weight: ["400", "700"], subsets: ["latin"] });
+
+export type LayoutClass = "default" | "full";
+
+interface LayoutProps {
+  children: ReactNode;
+  layoutClass?: LayoutClass;
+}
+
+export const Layout: FC<LayoutProps> = ({
+  children,
+  layoutClass = "default",
+}) => {
+  return (
+    <div className={cn(styles.layout, font.className, styles[layoutClass])}>
+      <header className={cn(styles.container, styles.header)}>
+        <Logo />
+        <Navigation />
+      </header>
+      <main className={cn(styles.content)}>{children}</main>
+      <footer className={cn(styles.container, styles.header)}>
+        <h2>Footer</h2>
+      </footer>
+    </div>
+  );
+};

src/components/Logo/Logo.module.css

@@ -0,0 +1,50 @@
+.logo {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 60px;
+  gap: 16px;
+  transition: padding-left 200ms ease-in-out;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    background: url("../../icons/back.svg") no-repeat 50% 50%;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
+  }
+}
+
+.src {
+  width: 150px;
+  transition: width 200ms ease-in-out;
+}
+
+.subline {
+  position: relative;
+  top: -2px;
+  font-size: 18px;
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.logo.small {
+  .subline {
+    opacity: 0.8;
+  }
+  .src {
+    width: 75px;
+  }
+
+  &:hover {
+    padding-left: 30px;
+    &:before {
+      opacity: 1;
+    }
+  }
+}

src/components/Logo/Logo.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import logo from "../../../public/logo.svg";
+import styles from "./Logo.module.css";
+
+import { getAppName } from "@/lib/config";
+import { cn } from "@/lib/utils";
+
+export function Logo() {
+  const pathname = usePathname();
+  const appName = getAppName();
+  return (
+    <Link href="/" className={cn(styles.logo, pathname != "/" && styles.small)}>
+      <img src={logo.src} className={cn(styles.src)} alt={appName} />
+      <span className={styles.subline}>{appName}</span>
+    </Link>
+  );
+}

src/components/Navigation/Navigation.module.css

@@ -0,0 +1,6 @@
+.list {
+  list-style: none;
+  display: flex;
+  gap: 16px;
+  font-size: 14px;
+}

src/components/Navigation/Navigation.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+import styles from "./Navigation.module.css";
+
+import { getAppName } from "@/lib/config";
+
+export function Navigation() {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.list}>
+        <li className={styles.item}>
+          <Link href="/help-and-about-tech-radar">
+            How to use {getAppName()}?
+          </Link>
+        </li>
+        <li className={styles.item}>Filter</li>
+        <li className={styles.item}>
+          <Link href="/overview">Technologies Overview</Link>
+        </li>
+        <li className={styles.item}>Search</li>
+      </ul>
+    </nav>
+  );
+}