190600

2024-06-19 22:58:55 +03:00
parent fcf89a9cc5
commit 54344f1497
152 changed files with 18665 additions and 5 deletions
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -0,0 +1,88 @@
+---
+import faviconSvgSrc from '@images/icon.svg'
+import { getImage } from 'astro:assets'
+import faviconSrc from '@images/icon.png'
+import brandSrc from '@images/brand-logo.jpeg'
+import { SEO, SITE } from '../config'
+
+interface Props {
+    title: string
+    description: string
+    ogImage?: any
+    ogTitle?: string
+    ogDescription?: string
+    structuredData?: object
+}
+
+const canonicalURL = Astro.url.href
+let {
+    title,
+    description,
+    ogImage,
+    ogTitle = title,
+    ogDescription = description,
+    structuredData = SEO.structuredData,
+} = Astro.props
+
+let card = 'summary_large_image'
+if (!ogImage) {
+    ogImage = brandSrc
+    card = 'summary'
+}
+
+const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' })
+const appleTouchIcon = await getImage({ src: faviconSrc, width: 180, height: 180, format: 'png' })
+const socialImageRes = await getImage({ src: ogImage, width: 1200, height: 600 })
+const socialImage = Astro.url.origin + socialImageRes.src
+---
+
+<!-- Inject structured data https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data -->
+{
+    structuredData && (
+        <script
+            type="application/ld+json"
+            set:html={JSON.stringify(structuredData)}
+        />
+    )
+}
+
+<!-- Global Metadata -->
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+<meta charset="utf-8" />
+<meta name="web_author" content={SITE.author} />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
+<meta name="generator" content={Astro.generator} />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="theme-color" content="#facc15" />
+
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:type" content="website" />
+<meta property="og:title" content={ogTitle} />
+<meta property="og:site_name" content={SITE.title} />
+<meta property="og:description" content={ogDescription} />
+<meta property="og:image" content={socialImage} />
+<meta content="1200" property="og:image:width" />
+<meta content="600" property="og:image:height" />
+<meta content="image/png" property="og:image:type" />
+
+<!-- Twitter -->
+<meta property="twitter:card" content={card} />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:domain" content={Astro.url} />
+<meta property="twitter:title" content={ogTitle} />
+<meta property="twitter:description" content={ogDescription} />
+<meta property="twitter:image" content={socialImage} />
+
+<!-- Links -->
+<link href={canonicalURL} rel="canonical" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<!--<link href="/manifest.json" rel="manifest" />-->
+<link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon" />
+<link href={faviconSvg.src} rel="icon" type="image/svg+xml" sizes="any" />
+<link href={appleTouchIcon.src} rel="apple-touch-icon" />
+<link href={appleTouchIcon.src} rel="shortcut icon" />
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -0,0 +1,54 @@
+---
+import BrandLogo from '@components/logos/BrandLogo.astro'
+import { FooterLinks, SITE } from '../config'
+---
+
+<footer class="w-full bg-neutral-300 dark:bg-neutral-900">
+    <div class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-screen-2xl">
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-6 md:grid-cols-5">
+            <div class="col-span-full flex justify-center sm:grid sm:col-span-1">
+                <BrandLogo class="h-auto w-28 rounded-full" />
+            </div>
+            {
+                FooterLinks.map(section => (
+                    <div class="col-span-1 text-center">
+                        <h3 class="font-bold text-neutral-800 dark:text-neutral-200">
+                            {section.section}
+                        </h3>
+                        <ul class="mt-3 grid space-y-3">
+                                {section.links.map((link, _index) => (
+                                        <li>
+                                            <a
+                                                href={link.url}
+                                                class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none"
+                                            >
+                                                {link.name}
+                                            </a>
+                                        </li>
+                                ))}
+                            </ul>
+                    </div>
+                ))
+            }
+
+            <div class="col-span-2 flex justify-center mt-10 md:mt-0">
+                <div class="max-w-[320px] max-h-[320px] -mt-16 scale-75 hidden md:block">
+                    <!--Image
+                        src={ponyo}
+                        alt={SITE.title}
+                        class="h-full w-full object-cover object-center"
+                        draggable="false"
+                        loading="eager"
+                    /-->
+                </div>
+            </div>
+        </div>
+
+
+        <div class="flex items-center text-center justify-center">
+            <p class="text-sm text-neutral-600 dark:text-neutral-400">
+                © <span id="current-year">2024</span> {SITE.title}
+            </p>
+        </div>
+    </div>
+</footer>
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -0,0 +1,17 @@
+---
+interface Props {
+    date: Date
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+    {
+        date.toLocaleDateString('ru-ru', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        })
+    }
+</time>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -0,0 +1,184 @@
+---
+import { NavigationLinks } from '../config'
+import NavLink from './ui/NavLink.astro'
+import BrandLogo from './logos/BrandLogo.astro'
+import Theme from './logos/Theme.astro';
+---
+
+<header class="sticky inset-x-0 top-4 z-50 flex w-full flex-wrap text-sm md:flex-nowrap md:justify-start">
+    <nav
+        class="relative mx-2 w-full rounded-[36px] border border-neutral-100 bg-neutral-100 px-4 py-3 backdrop-blur-md dark:border-neutral-700/40 dark:bg-neutral-800/80 dark:backdrop-blur-md md:flex md:items-center md:justify-between md:px-6 lg:px-8 xl:mx-auto"
+        aria-label="Global"
+    >
+        <div class="flex items-center justify-between ">
+            <a
+                class="h-[42px] flex-none rounded-lg text-xl font-bold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
+                href="/"
+                aria-label="Brand"
+            >
+                <BrandLogo class="h-full w-auto object-cover rounded-full" />
+            </a>
+
+            <div class="ml-auto md:hidden">
+                <button
+                    type="button"
+                    class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
+                    data-hs-collapse="#navbar-collapse-with-animation"
+                    aria-controls="navbar-collapse-with-animation"
+                    aria-label="Toggle navigation"
+                >
+                    <svg
+                        class="h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:hidden"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <line x1="3" x2="21" y1="6" y2="6"></line>
+                        <line x1="3" x2="21" y1="12" y2="12"></line>
+                        <line x1="3" x2="21" y1="18" y2="18"></line>
+                    </svg>
+                    <svg
+                        class="hidden h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:block"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M18 6 6 18"></path>
+                        <path d="m6 6 12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            <span class="inline-block md:hidden">
+                <Theme />
+            </span>
+        </div>
+
+        <div
+            id="navbar-collapse-with-animation"
+            class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block"
+        >
+            <div
+                class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-4 lg:gap-x-7 md:gap-y-0 md:ps-7"
+            >
+                {NavigationLinks.map(link => (
+                    <NavLink url={link.url} name={link.name} />
+                ))}
+                <span class="hidden md:inline-block">
+                    <Theme />
+                </span>
+            </div>
+        </div>
+    </nav>
+</header>
+<script is:inline>
+    const HSThemeAppearance = {
+        init() {
+            const defaultTheme = "default";
+            let theme = localStorage.getItem("hs_theme") || defaultTheme;
+
+            if (document.querySelector("html").classList.contains("dark")) {
+                return;
+            }
+
+            this.setAppearance(theme);
+        },
+
+        _resetStylesOnLoad() {
+            const $resetStyles = document.createElement("style");
+            $resetStyles.innerText = `*{transition: unset !important;}`;
+            $resetStyles.setAttribute("data-hs-appearance-onload-styles", "");
+            document.head.appendChild($resetStyles);
+            return $resetStyles;
+        },
+
+        setAppearance(theme, saveInStore = true, dispatchEvent = true) {
+            const $resetStylesEl = this._resetStylesOnLoad();
+
+            if (saveInStore) {
+                localStorage.setItem("hs_theme", theme);
+            }
+
+            if (theme === "auto") {
+                theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
+            }
+
+            document.querySelector("html").classList.remove("dark");
+            document.querySelector("html").classList.remove("default");
+            document.querySelector("html").classList.remove("auto");
+
+            document.querySelector("html").classList.add(this.getOriginalAppearance());
+
+            setTimeout(() => $resetStylesEl.remove());
+
+            if (dispatchEvent) {
+                window.dispatchEvent(new CustomEvent("on-hs-appearance-change", { detail: theme }));
+            }
+        },
+
+        getAppearance() {
+            let theme = this.getOriginalAppearance();
+            if (theme === "auto") {
+                theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
+            }
+
+            return theme;
+        },
+
+        getOriginalAppearance() {
+            const defaultTheme = "default";
+            return localStorage.getItem("hs_theme") || defaultTheme;
+        },
+    };
+
+    HSThemeAppearance.init();
+
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+        if (HSThemeAppearance.getOriginalAppearance() === "auto") {
+            HSThemeAppearance.setAppearance("auto", false);
+        }
+    });
+
+    window.addEventListener("load", () => {
+        const $clickableThemes = document.querySelectorAll(
+            "[data-hs-theme-click-value]",
+        );
+        const $switchableThemes = document.querySelectorAll(
+            "[data-hs-theme-switch]",
+        );
+
+        $clickableThemes.forEach(($item) => {
+            $item.addEventListener("click", () =>
+                HSThemeAppearance.setAppearance(
+                    $item.getAttribute("data-hs-theme-click-value"),
+                    true,
+                    $item,
+                ),
+            );
+        });
+
+        $switchableThemes.forEach(($item) => {
+            $item.addEventListener("change", (e) => {
+                HSThemeAppearance.setAppearance(e.target.checked ? "dark" : "default");
+            });
+
+            $item.checked = HSThemeAppearance.getAppearance() === "dark";
+        });
+
+        window.addEventListener("on-hs-appearance-change", (e) => {
+            $switchableThemes.forEach(($item) => {
+                $item.checked = e.detail === "dark";
+            });
+        });
+  });
+</script>
+<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'a'>
+
+const { href, class: className, ...props } = Astro.props
+
+const { pathname } = Astro.url
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+---
+
+<a href={href} class:list={[className, { active: isActive }]} {...props}>
+    <slot />
+</a>
+<style>
+    a {
+        display: inline-block;
+        text-decoration: none;
+    }
+    a.active {
+        font-weight: bolder;
+        text-decoration: underline;
+    }
+</style>
--- a/src/components/blocks/FeaturesSection.astro
+++ b/src/components/blocks/FeaturesSection.astro
@@ -0,0 +1,65 @@
+---
+---
+
+<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
+    <div class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24">
+        <div class="max-w-5xl px-4 sm:px-6 lg:px-8 mx-auto">
+            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6">
+                <a class="group flex flex-col bg-neutral-100 dark:bg-neutral-900/30 rounded-xl hover:group" href="#">
+                    <div class="p-4 md:p-5">
+                        <div class="flex">
+                            <svg class="mt-1 flex-shrink-0 size-5 text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.8 11.3 2 22l10.7-3.79" /><path d="M4 3h.01" /><path d="M22 8h.01" /><path d="M15 2h.01" /><path d="M22 20h.01" /><path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10" /><path d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17" /><path d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7" /><path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z" /></svg>
+                            <div class="grow ms-5">
+                                <span class="block text-lg font-bold text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300">Разработка и внедрение системы ХАССП</span>
+                                <span class="mt-1 block text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+                                    для одного пищевого объекта (столовой) – 80 000 рублей (без НДС)
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+
+                <a class="group flex flex-col bg-neutral-100 dark:bg-neutral-900/30 rounded-xl hover:group" href="#">
+                    <div class="p-4 md:p-5">
+                        <div class="flex">
+                            <svg class="mt-1 flex-shrink-0 size-5 text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -.11376601 49.74245785 51.31690859" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m49.626 11.564a.809.809 0 0 1 .028.209v10.972a.8.8 0 0 1 -.402.694l-9.209 5.302v10.509c0 .286-.152.55-.4.694l-19.223 11.066c-.044.025-.092.041-.14.058-.018.006-.035.017-.054.022a.805.805 0 0 1 -.41 0c-.022-.006-.042-.018-.063-.026-.044-.016-.09-.03-.132-.054l-19.219-11.066a.801.801 0 0 1 -.402-.694v-32.916c0-.072.01-.142.028-.21.006-.023.02-.044.028-.067.015-.042.029-.085.051-.124.015-.026.037-.047.055-.071.023-.032.044-.065.071-.093.023-.023.053-.04.079-.06.029-.024.055-.05.088-.069h.001l9.61-5.533a.802.802 0 0 1 .8 0l9.61 5.533h.002c.032.02.059.045.088.068.026.02.055.038.078.06.028.029.048.062.072.094.017.024.04.045.054.071.023.04.036.082.052.124.008.023.022.044.028.068a.809.809 0 0 1 .028.209v20.559l8.008-4.611v-10.51c0-.07.01-.141.028-.208.007-.024.02-.045.028-.068.016-.042.03-.085.052-.124.015-.026.037-.047.054-.071.024-.032.044-.065.072-.093.023-.023.052-.04.078-.06.03-.024.056-.05.088-.069h.001l9.611-5.533a.801.801 0 0 1 .8 0l9.61 5.533c.034.02.06.045.09.068.025.02.054.038.077.06.028.029.048.062.072.094.018.024.04.045.054.071.023.039.036.082.052.124.009.023.022.044.028.068zm-1.574 10.718v-9.124l-3.363 1.936-4.646 2.675v9.124l8.01-4.611zm-9.61 16.505v-9.13l-4.57 2.61-13.05 7.448v9.216zm-36.84-31.068v31.068l17.618 10.143v-9.214l-9.204-5.209-.003-.002-.004-.002c-.031-.018-.057-.044-.086-.066-.025-.02-.054-.036-.076-.058l-.002-.003c-.026-.025-.044-.056-.066-.084-.02-.027-.044-.05-.06-.078l-.001-.003c-.018-.03-.029-.066-.042-.1-.013-.03-.03-.058-.038-.09v-.001c-.01-.038-.012-.078-.016-.117-.004-.03-.012-.06-.012-.09v-21.483l-4.645-2.676-3.363-1.934zm8.81-5.994-8.007 4.609 8.005 4.609 8.006-4.61-8.006-4.608zm4.164 28.764 4.645-2.674v-20.096l-3.363 1.936-4.646 2.675v20.096zm24.667-23.325-8.006 4.609 8.006 4.609 8.005-4.61zm-.801 10.605-4.646-2.675-3.363-1.936v9.124l4.645 2.674 3.364 1.937zm-18.422 20.561 11.743-6.704 5.87-3.35-8-4.606-9.211 5.303-8.395 4.833z" /></svg>
+                            <div class="grow ms-5">
+                                <span class="block text-lg font-bold text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300">Срок выполнения работы</span>
+                                <span class="mt-1 block text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+                                    2 месяца
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+
+                <a class="group flex flex-col bg-neutral-100 dark:bg-neutral-900/30 rounded-xl hover:group" href="#">
+                    <div class="p-4 md:p-5">
+                        <div class="flex">
+                            <div class="grow ms-5">
+                                <span class="block text-lg font-bold text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300">Обучение сотрудников по работе с документацией системы ХАССП </span>
+                                <span class="mt-1 block text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+                                    (индивидуально или групповые занятия, с выездом или онлайн). Стоимость рассчитывается индивидуально, от 15 000 рублей за одного сотрудника.
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+
+                <a class="group flex flex-col bg-neutral-100 dark:bg-neutral-900/30 rounded-xl hover:group" href="#">
+                    <div class="p-4 md:p-5">
+                        <div class="flex">
+                            <div class="grow ms-5">
+                                <span class="block text-lg font-bold text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300">Документальное подтверждение прохождения обучения</span>
+                                <span class="mt-1 block text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+                                    на внутренних аудиторов системы ХАССП.
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+
+            </div>
+        </div>
+    </div>
+</section>
--- a/src/components/blocks/HeroSection.astro
+++ b/src/components/blocks/HeroSection.astro
@@ -0,0 +1,60 @@
+---
+import { Image } from 'astro:assets'
+import PrimaryCTA from '@components/buttons/PrimaryCTA.astro'
+import SecondaryCTA from '@components/buttons/SecondaryCTA.astro'
+
+const {
+    title,
+    subTitle,
+    primaryBtn,
+    primaryBtnURL,
+    secondaryBtn,
+    secondaryBtnURL,
+    src,
+    alt,
+} = Astro.props
+
+interface Props {
+    title: string
+    subTitle?: string
+    primaryBtn?: string
+    primaryBtnURL?: string
+    secondaryBtn?: string
+    secondaryBtnURL?: string
+    src?: any
+    alt?: string
+}
+---
+
+<section class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
+    <div>
+        <h1 class="block text-balance text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-4xl lg:text-6xl lg:leading-tight">
+            <Fragment set:html={title} />
+        </h1>
+        {subTitle && (
+            <p class="mt-6 text-pretty text-lg leading-relaxed text-neutral-700 dark:text-neutral-400 lg:w-4/5">
+                {subTitle}
+            </p>
+        )}
+
+        <div class="mt-7 grid w-full gap-3 sm:inline-flex">
+            {primaryBtn && <PrimaryCTA title={primaryBtn} url={primaryBtnURL} />}
+            {secondaryBtn && <SecondaryCTA title={secondaryBtn} url={secondaryBtnURL} />}
+        </div>
+    </div>
+
+    <div class="w-full hidden md:block">
+        <div class="top-12 overflow-hidden w-full md:ml-4 flex justify-center">
+            {src && alt && (
+                <Image
+                    src={src}
+                    alt={alt}
+                    class="h-full w-[320px] scale-100 object-cover object-center"
+                    draggable="false"
+                    loading="eager"
+                    format="avif"
+                />
+            )}
+        </div>
+    </div>
+</section>
--- a/src/components/blocks/HeroSectionAlt.astro
+++ b/src/components/blocks/HeroSectionAlt.astro
@@ -0,0 +1,140 @@
+---
+import GithubBtn from '@components/buttons/GithubBtn.astro'
+
+const { title, subTitle, url } = Astro.props
+
+const btnTitle = 'Телефон'
+
+interface Props {
+    title: string
+    subTitle?: string
+    url?: string
+}
+---
+
+<section class="relative mx-auto max-w-[85rem] px-4 pb-24 pt-10 sm:px-6 lg:px-8">
+  <div class="absolute left-0 top-[55%] scale-90 md:top-[20%] xl:left-[10%] xl:top-[25%]">
+    <svg
+        width="64"
+        height="64"
+        fill="none"
+        stroke-width="1.5"
+        color="#ea580c"
+        viewBox="0 0 24 24"
+    >
+      <path
+          fill="#ea580c"
+          stroke="#ea580c"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      ></path>
+      <path
+          stroke="#ea580c"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21 7.353v9.294a.6.6 0 0 1-.309.525l-8.4 4.666a.6.6 0 0 1-.582 0l-8.4-4.666A.6.6 0 0 1 3 16.647V7.353a.6.6 0 0 1 .309-.524l8.4-4.667a.6.6 0 0 1 .582 0l8.4 4.667a.6.6 0 0 1 .309.524Z"
+      ></path>
+      <path
+          stroke="#ea580c"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m3.528 7.294 8.18 4.544a.6.6 0 0 0 .583 0l8.209-4.56M12 21v-9"
+      ></path>
+    </svg>
+  </div>
+  <div class="absolute left-[85%] top-0 scale-75">
+    <svg
+        width="64"
+        height="64"
+        fill="none"
+        stroke-width="1.5"
+        color="#fbbf24"
+        viewBox="0 0 24 24"
+    >
+      <path
+          stroke="#fbbf24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
+      ></path>
+      <path
+          fill="#fbbf24"
+          stroke="#fbbf24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      ></path>
+      <path
+          stroke="#fbbf24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M5 10.5V9M5 15v-1.5"
+      ></path>
+      <path
+          fill="#fbbf24"
+          stroke="#fbbf24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M5 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      ></path>
+      <path
+          stroke="#fbbf24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M10.5 19H9M15 19h-1.5"
+      ></path>
+    </svg>
+  </div>
+  <div
+      class="absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
+  >
+    <svg
+        width="64"
+        height="64"
+        fill="none"
+        stroke-width="1.5"
+        color="#a3a3a3"
+        viewBox="0 0 24 24"
+    >
+      <path
+          stroke="#a3a3a3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M5.164 17c.29-1.049.67-2.052 1.132-3M11.5 7.794A16.838 16.838 0 0 1 14 6.296M4.5 22a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+      ></path>
+      <path
+          stroke="#a3a3a3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M9.5 12a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM19.5 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+      ></path>
+    </svg>
+  </div>
+  <!-- Hero Section Heading -->
+  <div class="mx-auto mt-5 max-w-xl text-center">
+    <h2
+        class="block text-balance text-4xl font-bold leading-tight tracking-tight text-neutral-800 dark:text-neutral-200 md:text-5xl lg:text-6xl"
+    >
+      {title}
+    </h2>
+  </div>
+  <!-- Hero Section Sub-heading -->
+  <div class="mx-auto mt-5 max-w-3xl text-center">
+    {
+      subTitle && (
+        <p class="text-pretty text-lg text-neutral-600 dark:text-neutral-400">
+          {subTitle}
+        </p>
+      )
+    }
+  </div>
+  <!-- Github Button -->
+  {
+    url && (
+      <div class="mt-8 flex justify-center gap-3">
+        <GithubBtn url={url} title={btnTitle} />
+      </div>
+    )
+  }
+</section>
--- a/src/components/blocks/MainSection.astro
+++ b/src/components/blocks/MainSection.astro
@@ -0,0 +1,34 @@
+---
+import PrimaryCTA from '@components/buttons/PrimaryCTA.astro'
+
+const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props
+
+interface Props {
+    title: string
+    subTitle: string
+    btnExists?: boolean
+    btnTitle?: string
+    btnURL?: string
+}
+---
+<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
+    <div class="md:flex md:justify-between md:items-center flex-wrap">
+        <div class="w-full md:w-auto">
+            <h1 class="block text-balance text-4xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-5xl lg:text-6xl">
+                {title}
+            </h1>
+            <p class="mt-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400">
+                {subTitle}
+            </p>
+        </div>
+    {
+        btnExists
+        ? (
+        <div class="md:w-auto mt-4 md:mt-0">
+            <PrimaryCTA title={btnTitle} url={btnURL} />
+        </div>
+        )
+        : null
+    }
+    </div>
+</section>
--- a/src/components/blog/BlogCard.astro
+++ b/src/components/blog/BlogCard.astro
@@ -0,0 +1,34 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { Image } from 'astro:assets'
+import { formatDate } from '../../support/time'
+
+const { blog } = Astro.props
+
+interface Props {
+    blog: CollectionEntry<'posts'>
+}
+---
+
+<a
+    class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
+    href={`/posts/${blog.slug}/`}
+    data-astro-prefetch
+>
+    <div class="relative w-full flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7]">
+        <Image
+            class="w-full h-full sm:h-[220px] md:h-[240px] start-0 top-0 size-full object-cover transition duration-500 group-hover:scale-110"
+            src={blog.data.banner}
+            alt={blog.data.title}
+            draggable="false"
+            loading="eager"
+            format="avif"
+        />
+    </div>
+    <h3 class="mt-2 text-xl font-bold text-neutral-800 group-hover:text-orange-400 dark:text-neutral-200 dark:group-hover:text-orange-300">
+        {blog.data.title}
+    </h3>
+    <p class="mt-2 text-sm text-gray-600 dark:text-neutral-400 dark:group-hover:text-neutral-500">
+        {formatDate(blog.data.pubDate)}
+    </p>
+</a>
--- a/src/components/blog/BlogCategory.astro
+++ b/src/components/blog/BlogCategory.astro
@@ -0,0 +1,66 @@
+---
+
+const { slug, title, description, count, publishDate } = Astro.props
+
+interface Props {
+    slug: string
+    title: string
+    description: string
+    count: number
+    publishDate: string
+}
+---
+
+<a href=`/categories/${slug}` class="flex flex-col justify-between size-full bg-neutral-100 shadow-lg rounded-lg p-5 dark:bg-neutral-900/30 group">
+    <div class="flex justify-between items-center mb-3">
+        <div class="flex justify-center gap-x-4 items-center">
+            <div class="flex-shrink-0">
+                <h3 class="text-lg font-semibold tracking-tight text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300">
+                    {title}
+                </h3>
+            </div>
+        </div>
+    </div>
+
+    <p class="block text-neutral-500 min-h-[60px] group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+        {description}
+    </p>
+
+    <div class="flex mt-2 mb-0 gap-x-5">
+        <span class="text-xs inline-flex items-center rounded me-2 text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+            <svg
+                class="w-3 h-3 me-1.5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <rect width="8" height="4" x="8" y="2" rx="1" />
+                <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5" />
+                <path d="M16 4h2a2 2 0 0 1 1.73 1" />
+                <path d="M8 18h1" />
+                <path d="M18.4 9.6a2 2 0 0 1 3 3L17 17l-4 1 1-4Z" />
+            </svg>
+            {count} posts
+        </span>
+        <span class="text-xs inline-flex items-center rounded me-2 text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+            <svg
+                class="w-3 h-3 me-1.5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+            </svg>
+            update {publishDate}
+        </span>
+    </div>
+</a>
--- a/src/components/blog/BlogComments.tsx
+++ b/src/components/blog/BlogComments.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react'
+import Giscus from '@giscus/react'
+
+const id = 'inject-comments'
+
+function getCurrentTheme(): string {
+    if (window.localStorage.getItem('hs_theme')) {
+        return window.localStorage.getItem('hs_theme') ?? 'default'
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+}
+
+function BlogComments() {
+    const [mounted, setMounted] = React.useState(false)
+    const [theme, setTheme] = React.useState('dark')
+
+    const handleThemeChange = (event: any) => {
+        const theme = event?.detail ?? 'light'
+        setTheme(theme)
+    }
+
+    React.useEffect(() => {
+        const theme = getCurrentTheme()
+        setTheme(theme)
+
+        window.addEventListener('on-hs-appearance-change', handleThemeChange)
+
+        return () => {
+            window.removeEventListener('on-hs-appearance-change', handleThemeChange)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    return (
+        <div id={id} className="w-full">
+            {mounted
+                ? (
+                    <Giscus
+                        id={id}
+                        repo="godruoyi/gblog"
+                        repoId="MDEwOlJlcG9zaXRvcnkxMjcyODI0NzA"
+                        category="Announcements"
+                        categoryId="DIC_kwDOB5YtJs4CfZnX"
+                        mapping="title"
+                        reactionsEnabled="1"
+                        emitMetadata="0"
+                        inputPosition="top"
+                        lang="zh-CN"
+                        loading="lazy"
+                        theme={theme}
+                    />
+                    )
+                : null}
+        </div>
+    )
+}
+
+export default BlogComments
--- a/src/components/blog/BlogInsight.astro
+++ b/src/components/blog/BlogInsight.astro
@@ -0,0 +1,44 @@
+---
+import Icon from '@components/icons/icon.astro'
+import { Image } from 'astro:assets'
+import type { CollectionEntry } from 'astro:content'
+
+const { blog } = Astro.props
+
+interface Props {
+    blog: CollectionEntry<'posts'>
+}
+---
+
+<a
+    class="group outline-none rounded-xl ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
+    href={`/posts/${blog.slug}/`}
+>
+    <div class="aspect-w-16 aspect-h-10 relative overflow-hidden rounded-xl ">
+        <Image
+            class="w-full h-full sm:h-[220px] md:h-[240px] object-cover rounded-xl transition duration-500 ease-in-out group-hover:scale-105"
+            src={blog.data.banner}
+            alt={blog.data.title}
+            format="avif"
+            loading="lazy"
+        />
+    </div>
+
+    <div class="mt-7">
+        <h3
+            class="text-xl font-bold text-neutral-800 group-hover:text-neutral-600 dark:text-neutral-200 dark:group-hover:text-neutral-400"
+        >
+            {blog.data.title}
+         </h3>
+
+        <p class="mt-3 text-neutral-600 dark:text-neutral-400">
+          {blog.data.description}
+        </p>
+
+        <p
+            class="mt-5 inline-flex items-center gap-x-1 font-medium text-orange-400 decoration-2 group-hover:underline dark:text-orange-300"
+        >
+            Подробнее <Icon name="arrowRightStatic" />
+        </p>
+    </div>
+</a>
--- a/src/components/blog/BlogRecentCard.astro
+++ b/src/components/blog/BlogRecentCard.astro
@@ -0,0 +1,44 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import LeftSection from './blocks/LeftSection.astro'
+import RightSection from './blocks/RightSection.astro'
+
+const { blogs } = Astro.props
+
+interface Props {
+    blogs: CollectionEntry<'posts'>[]
+}
+
+const posts = blogs.slice(0, 5)
+---
+
+{
+    posts.map((b, index) => index % 2 === 0
+        ? (
+            <LeftSection
+                title={b.data.title}
+                subTitle={b.data.description}
+                btnExists={true}
+                btnTitle="Подробнее"
+                btnURL=`/posts/${b.slug}`
+                img={b.data.banner}
+                imgAlt={b.data.title}
+            />
+        )
+        : (
+            <RightSection
+                title={b.data.title}
+                subTitle={b.data.description}
+                btnExists={true}
+                btnTitle="Подробнее"
+                btnURL=`/posts/${b.slug}`
+                img={b.data.banner}
+                imgAlt={b.data.title}
+                single={!b.data.banner2}
+                imgOne={b.data.banner}
+                imgOneAlt={b.data.title}
+                imgTwo={b.data?.banner2}
+                imgTwoAlt={b.data.title}
+            />
+        ))
+}
--- a/src/components/blog/BlogSelectedArticle.astro
+++ b/src/components/blog/BlogSelectedArticle.astro
@@ -0,0 +1,38 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Icon from '../icons/icon.astro'
+import BlogCard from './BlogCard.astro'
+
+const { posts } = Astro.props
+
+interface Props {
+    posts: CollectionEntry<'posts'>[]
+}
+---
+
+<section class="mx-auto max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 mb-10 2xl:max-w-full">
+    <div class="text-left">
+        <h2 id="selected-articel" class="mb-4 text-balance text-5xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200">
+            Выбрать статью
+        </h2>
+        <p class="mb-8 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-xl">
+            У нас полно историй от начала комарческой деятельности до сегодняшних дней.
+        </p>
+    </div>
+
+    <div class="grid gap-6 grid-cols-1 lg:grid-cols-3 sm:grid-cols-2">
+        {posts.map(b => <BlogCard blog={b} />)}
+    </div>
+
+    <div class="text-center mt-6">
+        <a
+            href="/timeline"
+            class="group inline-flex items-center justify-center gap-x-2 rounded-full px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none border border-transparent bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none disabled:pointer-events-none disabled:opacity-50 2xl:text-base dark:ring-zinc-200"
+        >
+            <div class="flex items-center gap-x-2">
+                <p>Посмотреть хронологию событий</p>
+                <Icon name="arrowRight" class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1" />
+            </div>
+        </a>
+    </div>
+</section>
--- a/src/components/blog/BlogTimeline.astro
+++ b/src/components/blog/BlogTimeline.astro
@@ -0,0 +1,30 @@
+---
+import type { CollectionEntry } from 'astro:content'
+
+const { blog } = Astro.props
+
+interface Props {
+    blog: CollectionEntry<'posts'>
+}
+---
+
+<div class="max-w-3xl mx-auto">
+    <div class="flex gap-x-2">
+        <div class="relative -ml-2 last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700 after:bg-neutral-400">
+            <div class="relative z-10 size-7 flex justify-center items-center">
+                <div class="size-2 rounded-full bg-neutral-400 dark:bg-neutral-600"></div>
+            </div>
+        </div>
+        <div class="grow pt-0.5 pb-8 group">
+            <a
+                href=`/posts/${blog.slug}`
+                data-astro-prefetch
+                class="flex justify-between text-base font-bold text-neutral-700 outline-none ring-zinc-500 focus:outline-none focus-visible:ring focus-visible:ring-zinc-500 dark:ring-zinc-200"
+            >
+                <h3 class="flex gap-x-1.5 text-xl font-bold text-neutral-800 group-hover:text-orange-600 dark:text-neutral-200 dark:group-hover:text-orange-300">{blog.data.title}</h3>
+                <!--<span class="tracking-wide text-xs font-medium text-neutral-600 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-400">{formatDate(blog.data.pubDate)}</span>-->
+            </a>
+            <p class="mt-1.5 text-base text-neutral-600 group-hover:text-neutral-500 dark:text-neutral-500 dark:group-hover:text-neutral-400">{blog.data.description}</p>
+        </div>
+    </div>
+</div>
--- a/src/components/blog/blocks/LeftSection.astro
+++ b/src/components/blog/blocks/LeftSection.astro
@@ -0,0 +1,40 @@
+---
+import PrimaryCTA from '@components/buttons/PrimaryCTA.astro'
+import { Image } from 'astro:assets'
+
+const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } = Astro.props
+
+interface Props {
+    title: string
+    subTitle: string
+    btnExists?: boolean
+    btnTitle?: string
+    btnURL?: string
+    img: any
+    imgAlt: any
+}
+---
+
+<section
+    class="mx-auto max-w-[85rem] items-center gap-8 px-4 py-10 sm:px-6 sm:py-16 md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 xl:gap-16 2xl:max-w-full"
+>
+    <Image
+        class="w-full rounded-xl h-full sm:max-h-[320px] md:max-h-[360px] object-cover"
+        src={img}
+        alt={imgAlt}
+        draggable="false"
+        loading="lazy"
+    />
+
+    <div class="mt-4 md:mt-0">
+        <h2 class="mb-4 text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200">
+            {title}
+        </h2>
+        <p class="mb-4 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-lg">
+            {subTitle}
+        </p>
+        {
+            btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null
+        }
+    </div>
+</section>
--- a/src/components/blog/blocks/RightSection.astro
+++ b/src/components/blog/blocks/RightSection.astro
@@ -0,0 +1,79 @@
+---
+import PrimaryCTA from '@components/buttons/PrimaryCTA.astro'
+import { Image } from 'astro:assets'
+
+const {
+    title,
+    subTitle,
+    btnExists,
+    btnTitle,
+    btnURL,
+    single,
+    imgOne,
+    imgOneAlt,
+    imgTwo,
+    imgTwoAlt,
+} = Astro.props
+
+interface Props {
+    title: string
+    subTitle: string
+    btnExists?: boolean
+    btnTitle?: string
+    btnURL?: string
+    single?: boolean
+    imgOne?: any
+    imgOneAlt?: any
+    imgTwo?: any
+    imgTwoAlt?: any
+}
+---
+
+<section class="mx-auto max-w-[85rem] items-center gap-16 px-4 py-10 sm:px-6 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 2xl:max-w-full">
+    <div>
+        <h2 class="mb-4 text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200">
+            {title}
+        </h2>
+        <p class="mb-4 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-lg">
+            {subTitle}
+        </p>
+        {
+            btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null
+        }
+    </div>
+
+    {
+        single
+            ? (
+                <div class="mt-8">
+                    <Image
+                        class="w-full rounded-lg"
+                        src={imgOne}
+                        alt={imgOneAlt}
+                        format="avif"
+                        loading="lazy"
+                    />
+                </div>
+            )
+            : (
+                <div class="mt-8 grid grid-cols-2 gap-4">
+                    <Image
+                        class="w-full rounded-xl"
+                        src={imgOne}
+                        alt={imgOneAlt}
+                        draggable="false"
+                        format="avif"
+                        loading="lazy"
+                    />
+                    <Image
+                        class="mt-4 w-full rounded-xl lg:mt-10"
+                        src={imgTwo}
+                        alt={imgTwoAlt}
+                        draggable="false"
+                        format="avif"
+                        loading="lazy"
+                    />
+                </div>
+            )
+    }
+</section>
--- a/src/components/buttons/Bookmark.astro
+++ b/src/components/buttons/Bookmark.astro
@@ -0,0 +1,98 @@
+---
+import Icon from '@components/icons/icon.astro';
+---
+
+<button
+    type="button"
+    class="focus-visible:ring-secondary group inline-flex items-center rounded-lg p-2.5 text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 focus:outline-none focus-visible:outline-none focus-visible:ring-1 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700"
+    data-bookmark-button="bookmark-button"
+>
+    <Icon name="bookmark" />
+</button>
+
+<script>
+    class Bookmark {
+        private static readonly BOOKMARKS_KEY = "bookmarks";
+        private bookmarkButton: Element | null;
+
+        constructor(private dataAttrValue: string) {
+            this.bookmarkButton = document.querySelector(
+                `[data-bookmark-button="${dataAttrValue}"]`
+            );
+        }
+
+        private getStoredBookmarks(): string[] {
+            const item = localStorage.getItem(Bookmark.BOOKMARKS_KEY);
+            return item ? JSON.parse(item) : [];
+        }
+
+        init(): void {
+            if (this.bookmarkButton && this.isStored()) {
+                this.markAsStored();
+            }
+
+            this.bookmarkButton?.addEventListener("click", () =>
+                this.toggleBookmark()
+            );
+        }
+
+        isStored(): boolean {
+            return this.getStoredBookmarks().includes(window.location.pathname);
+        }
+
+        markAsStored(): void {
+            if (this.bookmarkButton) {
+                this.bookmarkButton.classList.add("bookmarked");
+                let svgElement = this.bookmarkButton.querySelector("svg");
+                if (svgElement) {
+                    svgElement.setAttribute(
+                        "class",
+                        "h-6 w-6 fill-red-500 dark:fill-red-500"
+                    );
+                }
+                let pathElement = svgElement?.querySelector("path");
+                if (pathElement) {
+                    pathElement.setAttribute(
+                        "class",
+                        "fill-current text-red-500 dark:text-red-500"
+                    );
+                }
+            }
+        }
+
+        unmarkAsStored(): void {
+            if (this.bookmarkButton) {
+                this.bookmarkButton.classList.remove("bookmarked");
+                let svgElement = this.bookmarkButton.querySelector("svg");
+                if (svgElement) {
+                    svgElement.setAttribute("class", "h-6 w-6 fill-none");
+                }
+                let pathElement = svgElement?.querySelector("path");
+                if (pathElement) {
+                    pathElement.setAttribute(
+                        "class",
+                        "fill-current text-neutral-500 group-hover:text-red-400 dark:text-neutral-500 group-hover:dark:text-red-400"
+                    );
+                }
+            }
+        }
+
+        toggleBookmark(): void {
+            let storedBookmarks = this.getStoredBookmarks();
+            const index = storedBookmarks.indexOf(window.location.pathname);
+            if (index !== -1) {
+                storedBookmarks.splice(index, 1);
+                this.unmarkAsStored();
+            } else {
+                storedBookmarks.push(window.location.pathname);
+                this.markAsStored();
+            }
+            localStorage.setItem(
+                Bookmark.BOOKMARKS_KEY,
+                JSON.stringify(storedBookmarks)
+            );
+        }
+    }
+
+    new Bookmark("bookmark-button").init();
+</script>
--- a/src/components/buttons/GithubBtn.astro
+++ b/src/components/buttons/GithubBtn.astro
@@ -0,0 +1,27 @@
+---
+import Icon from '@components/icons/icon.astro'
+
+const { title, url } = Astro.props
+
+interface Props {
+  title?: string
+  url?: string
+}
+
+const baseClasses = 'group inline-flex items-center justify-center gap-x-3 rounded-full px-4 py-3 text-center text-sm font-medium text-neutral-700 ring-zinc-500 focus-visible:ring transition duration-300 outline-none'
+const borderClasses = 'border border-transparent'
+const bgColorClasses = 'bg-yellow-400 dark:focus:outline-none'
+const hoverClasses = 'hover:shadow-2xl hover:shadow-yellow-500'
+const fontSizeClasses = '2xl:text-base'
+const ringClasses = 'dark:ring-zinc-200';
+---
+
+<a
+    class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${ringClasses}`}
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+>
+    <Icon name="github" />
+    {title}
+</a>
--- a/src/components/buttons/NotFoundButton.astro
+++ b/src/components/buttons/NotFoundButton.astro
@@ -0,0 +1,23 @@
+---
+import Icon from '@components/icons/icon.astro'
+
+const { title, id, noArrow } = Astro.props
+
+interface Props {
+  title?: string
+  id?: string
+  noArrow?: boolean
+}
+
+const baseClasses = 'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none'
+const borderClasses = 'border border-transparent'
+const bgColorClasses = 'bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none'
+const disableClasses = 'disabled:pointer-events-none disabled:opacity-50'
+const fontSizeClasses = '2xl:text-base'
+const ringClasses = 'dark:ring-zinc-200';
+---
+
+<button class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses}`} id={id}>
+    {title}
+    {noArrow ? null : <Icon name="arrowRight" />}
+</button>
--- a/src/components/buttons/PrimaryCTA.astro
+++ b/src/components/buttons/PrimaryCTA.astro
@@ -0,0 +1,26 @@
+---
+import Icon from '@components/icons/icon.astro'
+
+const { title, url, noArrow } = Astro.props
+
+interface Props {
+  title?: string
+  url?: string
+  noArrow?: boolean
+}
+
+const baseClasses = 'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none'
+const borderClasses = 'border border-transparent'
+const bgColorClasses = 'bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none'
+const disableClasses = 'disabled:pointer-events-none disabled:opacity-50'
+const fontSizeClasses = '2xl:text-base'
+const ringClasses = 'dark:ring-zinc-200';
+---
+
+<a
+    class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses}`}
+    href={url}
+>
+  {title}
+  {noArrow ? null : <Icon name="arrowRight" />}
+</a>
--- a/src/components/buttons/SecondaryCTA.astro
+++ b/src/components/buttons/SecondaryCTA.astro
@@ -0,0 +1,24 @@
+---
+const { title, url } = Astro.props
+
+interface Props {
+  title?: string
+  url?: string
+}
+
+const baseClasses = 'inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-zinc-500 focus-visible:ring transition duration-300'
+const borderClasses = 'border border-neutral-200'
+const bgColorClasses = 'bg-neutral-300'
+const hoverClasses = 'hover:bg-neutral-400/50 hover:text-neutral-600 active:text-neutral-700'
+const disableClasses = 'disabled:pointer-events-none disabled:opacity-50'
+const fontSizeClasses = '2xl:text-base'
+const ringClasses = 'ring-zinc-500'
+const darkClasses = 'dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none';
+---
+
+<a
+    class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses} ${darkClasses}`}
+    href={url}
+>
+    {title}
+</a>
--- a/src/components/buttons/SocialShare.astro
+++ b/src/components/buttons/SocialShare.astro
@@ -0,0 +1,151 @@
+---
+import Icon from '@components/icons/icon.astro'
+
+const { pageTitle, title = 'Share' } = Astro.props
+
+interface Props {
+    pageTitle: string
+    title?: string
+}
+
+type SocialPlatform = {
+    name: string
+    url: string
+    svg: string
+}
+
+const socialPlatforms: SocialPlatform[] = [
+    {
+        name: 'Facebook',
+        url: `https://www.facebook.com/share.php?u=${Astro.url}&title=${pageTitle}`,
+        svg: 'facebook',
+    },
+    {
+        name: 'X',
+        url: `https://twitter.com/home/?status=${pageTitle}${Astro.url}`,
+        svg: 'x',
+    },
+    {
+        name: 'LinkedIn',
+        url: `https://www.linkedin.com/shareArticle?mini=true&url=${Astro.url}&title=${pageTitle}`,
+        svg: 'linkedIn',
+    },
+];
+---
+
+<div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-left]">
+    <button
+        id="hs-dropup"
+        type="button"
+        class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:outline-none"
+    >
+        <Icon name="share" />
+
+        {title}
+    </button>
+
+    <div
+        class="hs-dropdown-menu duration z-10 hidden w-72 divide-y divide-neutral-200 rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
+        aria-labelledby="hs-dropup"
+    >
+        <div class="py-2 first:pt-0 last:pb-0">
+            {
+                socialPlatforms.map(platform => (
+                    <a
+                        class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100  focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 "
+                        href={platform.url}
+                    >
+                        <Icon name={platform.svg} />
+                        Share on {platform.name}
+                    </a>
+                ))
+            }
+        </div>
+        <div class="py-2 first:pt-0 last:pb-0">
+            <button
+                type="button"
+                class="js-clipboard hover:text-dark focus-visible:ring-secondary group inline-flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none focus-visible:outline-none focus-visible:ring-1 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
+                data-clipboard-success-text="Copied"
+            >
+                <svg
+                    class="js-clipboard-default h-4 w-4 transition group-hover:rotate-6"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
+                    <path
+                        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+                    ></path>
+                </svg>
+
+                <svg
+                    class="js-clipboard-success text-neutral-700 dark:text-neutral-300 hidden h-4 w-4"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+                <span class="js-clipboard-success-text">Copy link</span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<!--Import the necessary Dropdown and Clipboard plugins-->
+<!--https://preline.co/plugins/html/dropdown.html-->
+<!--<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>-->
+
+<!-- https://clipboardjs.com/ -->
+<!--<script is:inline src="/scripts/vendor/clipboard.min.js"></script>-->
+
+<script is:inline>
+    (function () {
+        window.addEventListener("load", () => {
+            const $clipboards = document.querySelectorAll(".js-clipboard");
+            $clipboards.forEach((el) => {
+                const clipboard = new ClipboardJS(el, {
+                    text: () => {
+                        return window.location.href;
+                    },
+                });
+                clipboard.on("success", () => {
+                    const $default = el.querySelector(".js-clipboard-default");
+                    const $success = el.querySelector(".js-clipboard-success");
+                    const $successText = el.querySelector(".js-clipboard-success-text");
+                    const successText = el.dataset.clipboardSuccessText || "";
+                    let oldSuccessText;
+
+                    if ($successText) {
+                        oldSuccessText = $successText.textContent;
+                        $successText.textContent = successText;
+                    }
+                    if ($default && $success) {
+                        $default.style.display = "none";
+                        $success.style.display = "block";
+                    }
+
+                    setTimeout(function () {
+                        if ($successText && oldSuccessText)
+                            $successText.textContent = oldSuccessText;
+                        if ($default && $success) {
+                            $success.style.display = "";
+                            $default.style.display = "";
+                        }
+                    }, 800);
+                });
+            });
+        });
+    })();
+</script>
--- a/src/components/icons/icon.astro
+++ b/src/components/icons/icon.astro
@@ -0,0 +1,40 @@
+---
+import { Icons } from './icons.ts'
+
+interface Path {
+  d: string
+  class?: string
+}
+
+const { name } = Astro.props
+
+const icon = (Icons as any)[name] || {}
+
+const paths: Path[] = icon.paths || [];
+---
+
+{
+  icon
+? (
+    <svg
+        class={icon.class}
+        height={icon.height}
+        viewBox={icon.viewBox}
+        width={icon.width}
+        fill={icon.fill}
+        clip-rule={icon.clipRule}
+        fill-rule={icon.fillRule}
+        stroke={icon.stroke}
+        stroke-width={icon.strokeWidth}
+        stroke-linecap={icon.strokeLinecap}
+        stroke-linejoin={icon.strokeLinejoin}
+    ><title>{icon.title}</title>
+        {paths.map(path => (
+            <path d={path.d} class={path.class || ''} />
+        ))}
+    </svg>
+)
+: (
+      'Icon not found'
+  )
+}
--- a/src/components/icons/icons.ts
+++ b/src/components/icons/icons.ts
@@ -0,0 +1,414 @@
+export const Icons = {
+    groups: {
+        paths: [
+            {
+                d: 'm150-400 82-80-82-82-80 82 80 80Zm573-10 87-140 88 140H723Zm-243-70q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm.351-180Q455-660 437.5-642.851t-17.5 42.5Q420-575 437.351-557.5t43 17.5Q506-540 523-557.351t17-43Q540-626 522.851-643t-42.5-17ZM480-600ZM0-240v-53q0-39.464 42-63.232T150.398-380q12.158 0 23.38.5T196-377.273q-8 17.273-12 34.842-4 17.57-4 37.431v65H0Zm240 0v-65q0-65 66.5-105T480-450q108 0 174 40t66 105v65H240Zm570-140q67.5 0 108.75 23.768T960-293v53H780v-65q0-19.861-3.5-37.431Q773-360 765-377.273q11-1.727 22.171-2.227 11.172-.5 22.829-.5Zm-330.2-10Q400-390 350-366q-50 24-50 61v5h360v-6q0-36-49.5-60t-130.7-24Zm.2 90Z',
+            },
+        ],
+        class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+        width: 48,
+        height: 48,
+        viewBox: '0 -960 960 960',
+    },
+    books: {
+        paths: [
+            {
+                d: 'M343-420h225v-60H343v60Zm0-90h395v-60H343v60Zm0-90h395v-60H343v60Zm-83 400q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z',
+            },
+        ],
+        class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+        width: 48,
+        height: 48,
+        viewBox: '0 -960 960 960',
+    },
+    verified: {
+        paths: [
+            {
+                d: 'm346-60-76-130-151-31 17-147-96-112 96-111-17-147 151-31 76-131 134 62 134-62 77 131 150 31-17 147 96 111-96 112 17 147-150 31-77 130-134-62-134 62Zm27-79 107-45 110 45 67-100 117-30-12-119 81-92-81-94 12-119-117-28-69-100-108 45-110-45-67 100-117 28 12 119-81 94 81 92-12 121 117 28 70 100Zm107-341Zm-43 133 227-225-45-41-182 180-95-99-46 45 141 140Z',
+            },
+        ],
+        class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+        width: 48,
+        height: 48,
+        viewBox: '0 -960 960 960',
+    },
+    frame: {
+        paths: [
+            {
+                d: 'M480-480q-51 0-85.5-34.5T360-600q0-50 34.5-85t85.5-35q50 0 85 35t35 85q0 51-35 85.5T480-480Zm-.351-60Q505-540 522.5-557.149t17.5-42.5Q540-625 522.649-642.5t-43-17.5Q454-660 437-642.649t-17 43Q420-574 437.149-557t42.5 17ZM240-240v-76q0-27 17.5-47.5T300-397q42-22 86.943-32.5 44.942-10.5 93-10.5Q528-440 573-429.5t87 32.5q25 13 42.5 33.5T720-316v76H240Zm240-140q-47.546 0-92.773 13T300-328v28h360v-28q-42-26-87.227-39-45.227-13-92.773-13Zm0-220Zm0 300h180-360 180ZM140-80q-24 0-42-18t-18-42v-172h60v172h172v60H140ZM80-648v-172q0-24 18-42t42-18h172v60H140v172H80ZM648-80v-60h172v-172h60v172q0 24-18 42t-42 18H648Zm172-568v-172H648v-60h172q24 0 42 18t18 42v172h-60Z',
+            },
+        ],
+        class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+        width: 48,
+        height: 48,
+        viewBox: '0 -960 960 960',
+    },
+    tools: {
+        paths: [
+            {
+                d: 'M764-80q-6 0-11-2t-10-7L501-331q-5-5-7-10t-2-11q0-6 2-11t7-10l85-85q5-5 10-7t11-2q6 0 11 2t10 7l242 242q5 5 7 10t2 11q0 6-2 11t-7 10l-85 85q-5 5-10 7t-11 2Zm0-72 43-43-200-200-43 43 200 200ZM195-80q-6 0-11.5-2T173-89l-84-84q-5-5-7-10.5T80-195q0-6 2-11t7-10l225-225h85l38-38-175-175h-57L80-779l99-99 125 125v57l175 175 130-130-67-67 56-56H485l-18-18 128-128 18 18v113l56-56 169 169q15 15 23.5 34.5T870-600q0 20-6.5 38.5T845-528l-85-85-56 56-52-52-211 211v84L216-89q-5 5-10 7t-11 2Zm0-72 200-200v-43h-43L152-195l43 43Zm0 0-43-43 22 21 21 22Zm569 0 43-43-43 43Z',
+            },
+        ],
+        class:
+      'mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7',
+        width: 48,
+        height: 48,
+        viewBox: '0 -960 960 960',
+    },
+    dashboard: {
+        paths: [
+            {
+                d: 'M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z',
+            },
+        ],
+        class:
+      'mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7',
+        width: 48,
+        height: 48,
+        viewBox: '0 -960 960 960',
+    },
+    house: {
+        paths: [
+            {
+                d: 'M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819',
+            },
+        ],
+        class:
+      'h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-orange-400 dark:text-neutral-300 dark:hs-tab-active:text-orange-300 md:h-7 md:w-7',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    arrowUp: {
+        paths: [
+            {
+                d: 'm5 12 7-7 7 7',
+            },
+            {
+                d: 'M12 19V5',
+            },
+        ],
+        class: 'h-5 w-5 flex-shrink-0 text-orange-400 dark:text-orange-300',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    checkCircle: {
+        paths: [
+            {
+                d: 'M10 18a8 8 0 100-16 8 8 0 000 16zM13.707 8.293a1 1 0 00-1.414-1.414L9 10.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z',
+            },
+        ],
+        class: 'h-5 w-5 shrink-0',
+        viewBox: '0 0 20 20',
+        fill: 'currentColor',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+    },
+    bookmark: {
+        paths: [
+            {
+                d: 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z',
+                class:
+          'fill-current text-neutral-500 transition duration-300 group-hover:text-red-400 group-hover:dark:text-red-400',
+            },
+        ],
+        class: 'h-6 w-6 fill-none transition duration-300',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    arrowRight: {
+        paths: [
+            {
+                d: 'm9 18 6-6-6-6',
+            },
+        ],
+        class: 'h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    facebook: {
+        paths: [
+            {
+                d: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z',
+            },
+        ],
+        class: 'size-4 flex-shrink-0 fill-current',
+        viewBox: '0 0 24 24',
+        stroke: 'currentColor',
+    },
+    x: {
+        paths: [
+            {
+                d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+            },
+        ],
+        class: 'size-4 flex-shrink-0 fill-current',
+        viewBox: '0 0 24 24',
+        stroke: 'currentColor',
+    },
+    linkedIn: {
+        paths: [
+            {
+                d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+            },
+        ],
+        class: 'size-4 flex-shrink-0 fill-current',
+        viewBox: '0 0 24 24',
+        stroke: 'currentColor',
+    },
+    share: {
+        paths: [
+            {
+                d: 'M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z',
+            },
+        ],
+        class: 'h-4 w-4 group-hover:text-neutral-700',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    github: {
+        paths: [
+            {
+                d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z',
+            },
+        ],
+        class: 'w-4.5 h-4.5 transition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1',
+        width: 16,
+        height: 16,
+        viewBox: '0 0 16 16',
+        fill: 'currentColor',
+    },
+    arrowRightStatic: {
+        paths: [
+            {
+                d: 'm9 18 6-6-6-6',
+            },
+        ],
+        class: 'size-4 flex-shrink-0',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    openInNew: {
+        paths: [
+            {
+                d: 'm4.5 19.5 15-15m0 0H8.25m11.25 0v11.25',
+            },
+        ],
+        class: 'ml-0.5 w-3 h-3 md:w-4 md:h-4 inline pb-0.5',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '3',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    accordionNotActive: {
+        paths: [
+            {
+                d: 'm6 9 6 6 6-6',
+            },
+        ],
+        class: 'block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    accordionActive: {
+        paths: [
+            {
+                d: 'm18 15-6-6-6 6',
+            },
+        ],
+        class: 'hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    xFooter: {
+        paths: [
+            {
+                d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+            },
+        ],
+        class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'currentColor',
+        title: 'Twitter',
+    },
+    facebookFooter: {
+        paths: [
+            {
+                d: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z',
+            },
+        ],
+        class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'currentColor',
+        title: 'Facebook',
+    },
+    githubFooter: {
+        paths: [
+            {
+                d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
+            },
+        ],
+        class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'currentColor',
+        title: 'GitHub',
+    },
+    googleFooter: {
+        paths: [
+            {
+                d: 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z',
+            },
+        ],
+        class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'currentColor',
+        title: 'Google',
+    },
+    slackFooter: {
+        paths: [
+            {
+                d: 'M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z',
+            },
+        ],
+        class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'currentColor',
+        title: 'Slack',
+    },
+    quotation: {
+        paths: [
+            {
+                d: 'M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z',
+            },
+        ],
+        class: 'absolute start-0 top-0 h-16 w-16 -translate-x-6 -translate-y-8 transform text-neutral-300 dark:text-neutral-700',
+        width: 16,
+        height: 16,
+        viewBox: '0 0 16 16',
+        fill: 'currentColor',
+    },
+    question: {
+        paths: [
+            {
+                d: 'M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z',
+            },
+        ],
+        class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    chatBubble: {
+        paths: [
+            {
+                d: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
+            },
+        ],
+        class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    mapPin: {
+        paths: [
+            {
+                d: 'M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
+            },
+            {
+                d: 'M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z',
+            },
+        ],
+        class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    envelopeOpen: {
+        paths: [
+            {
+                d: 'M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z',
+            },
+        ],
+        class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+    earth: {
+        paths: [
+            {
+                d: 'm20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525',
+            },
+        ],
+        class: 'w-4 h-4 flex-shrink-0',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        strokeWidth: '1.5',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: 'currentColor',
+    },
+}
--- a/src/components/logos/BrandLogo.astro
+++ b/src/components/logos/BrandLogo.astro
@@ -0,0 +1,14 @@
+---
+import { Image } from 'astro:assets'
+import logo from '@images/brand-logo.jpeg'
+import { SITE } from '../../config';
+---
+
+<Image
+    src={logo}
+    alt={SITE.title}
+    {...Astro.props}
+    draggable="false"
+    loading="eager"
+/>
+
--- a/src/components/logos/Theme.astro
+++ b/src/components/logos/Theme.astro
@@ -0,0 +1,48 @@
+<button
+    type="button"
+    aria-label="Dark Theme Toggle"
+    class="hs-dark-mode group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-orange-400 hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-orange-300 dark:focus:outline-none"
+    data-hs-theme-click-value="dark"
+>
+    <svg
+        class="h-4 w-4 flex-shrink-0"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+    </svg>
+</button>
+<button
+    type="button"
+    aria-label="Light Theme Toggle"
+    class="hs-dark-mode group hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 hs-dark-mode-active:flex dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-none"
+    data-hs-theme-click-value="light"
+>
+    <svg
+        class="h-4 w-4 flex-shrink-0"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <circle cx="12" cy="12" r="4"></circle>
+        <path d="M12 8a2 2 0 1 0 4 4"></path>
+        <path d="M12 2v2"></path>
+        <path d="M12 20v2"></path>
+        <path d="m4.93 4.93 1.41 1.41"></path>
+        <path d="m17.66 17.66 1.41 1.41"></path>
+        <path d="M2 12h2"></path>
+        <path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path>
+        <path d="m19.07 4.93-1.41 1.41"></path>
+    </svg>
+</button>
--- a/src/components/support/GoogleAnalytics.astro
+++ b/src/components/support/GoogleAnalytics.astro
@@ -0,0 +1,18 @@
+---
+import { GoogleAnalytics } from '../../config'
+
+const ID = GoogleAnalytics.id
+---
+
+{
+    GoogleAnalytics.enable && (
+        <script is:inline type="text/partytown" src=`https://www.googletagmanager.com/gtag/js?id=${ID}`></script>
+        <script is:inline define:vars={{ ID }}>
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function gtag(){dataLayer.push(arguments);}
+            window.gtag('js', new Date());
+            window.gtag('config', ID);
+        </script>
+    )
+}
+
--- a/src/components/support/RSSRender.astro
+++ b/src/components/support/RSSRender.astro
@@ -0,0 +1,9 @@
+---
+import { type CollectionKey, getEntry } from 'astro:content'
+
+const { collection, slug } = Astro.params
+const entry = await getEntry(collection as CollectionKey, slug)
+const { Content } = await entry.render();
+---
+
+<Content />
--- a/src/components/ui/FooterSocialLink.astro
+++ b/src/components/ui/FooterSocialLink.astro
@@ -0,0 +1,15 @@
+---
+const { url } = Astro.props
+interface Props {
+  url: string
+}
+---
+
+<a
+    class="inline-flex h-14 w-14 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-bold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus-visible:ring focus-visible:ring-zinc-500 dark:ring-zinc-200 dark:hover:bg-neutral-50/10"
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+>
+    <slot />
+</a>
--- a/src/components/ui/NavLink.astro
+++ b/src/components/ui/NavLink.astro
@@ -0,0 +1,44 @@
+---
+const { url, name } = Astro.props
+
+interface Props {
+  url: string
+  name: string
+}
+---
+
+<a
+    id={url === '/' ? 'home' : url.replace('/', '')}
+    href={url}
+    data-astro-prefetch
+    class="rounded-lg text-base font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 md:text-sm 2xl:text-base"
+>
+  {name}
+</a>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    let url = window.location.pathname;
+    let urlSegments = url.split("/");
+    let navId;
+
+    if (url === "/") {
+      navId = "home";
+    } else {
+      navId = url.replace("/", "");
+    }
+
+    let nav = document.getElementById(navId);
+
+    if (nav) {
+      nav.classList.remove(
+        "text-neutral-600",
+        "dark:text-neutral-400",
+        "hover:text-neutral-500",
+        "dark:hover:text-neutral-500"
+      );
+      nav.classList.add("text-orange-400", "dark:text-orange-300");
+      nav.setAttribute("aria-current", "page");
+    }
+  });
+</script>