feat: added 5 blogs, refactored legals, fixed (side)menu behaviour, made pages uniform

src/routes/blog/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  export let data;
+</script>
+
+<svelte:head>
+  <title>FAQ | HexName - Free, uncomplicated DNS management</title>
+  <meta property="og:title" content="FAQ | HexName - Free, uncomplicated DNS management">
+  <meta name="twitter:title" content="FAQ | HexName - Free, uncomplicated DNS management">
+  <meta name="description" content="Get answers for the most commonly asked questions about DNS/DynDNS/our services - so you can focus on what truly matters.">
+  <meta property="og:description" content="Get answers for the most commonly asked questions about DNS/DynDNS/our services - so you can focus on what truly matters.">
+  <meta name="twitter:description" content="Get answers for the most commonly asked questions about DNS/DynDNS/our services - so you can focus on what truly matters.">
+  <meta name="robots" content="index, follow">
+</svelte:head>
+
+<div class="flex flex-col items-center">
+  <div class="max-w-4xl m-4">
+
+    <div class="hero bg-base-200">
+      <div class="hero-content flex-col sm:flex-row">
+        <div class="w-full">
+          <h1 class="text-3xl font-bold">List of blogs</h1>
+          <div class="flex flex-col sm:flex-row items-center justify-center">
+            <div class="py-6 leading-8">
+              Learn about DNS/DynDNS records, email, mailservers, the internet, security, our services, and more!
+            </div>
+            <div class="mockup-code max-w-60 min-w-60 mx-4 not-sm:mb-6">
+              <pre data-prefix="$"><code>Question?</code></pre>
+              <pre data-prefix=">" class="text-warning"><code>Answering...</code></pre>
+              <pre data-prefix=">" class="text-success"><code>Done!</code></pre>
+            </div>
+          </div>
+          <a href="/register" class="btn btn-primary w-full sm:w-40">Get started</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+    <h2 class="legend text-2xl font-bold p-4 m-4">Discover articles</h2>
+
+    <ul class="bg-base-200 rounded-box shadow-md">
+      {#each data.posts as post}
+        <li class="flex flex-col rounded-xl p-6 sm:p-8 border-b-5 border-primary">
+          <div class="mb-8 sm:mb-12">
+            <h3 class="text-xl mb-4">{post.title}</h3>
+            <div class="font-semibold opacity-60">{post.subtitle}</div>
+          </div>
+          <div class="flex flex-col items-center sm:flex-row w-full">
+            <p class="list-col-wrap sm:mr-4">{post.description}</p>
+            <button class="btn btn-primary not-sm:mt-4 w-full ml-auto sm:w-35"><a href="/blog/{post.slug}">Read more...</a></button>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>

src/routes/blog/+page.ts

@@ -0,0 +1,18 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+  const posts = Object.entries(
+    import.meta.glob('/src/lib/posts/*.md', { eager: true })
+  ).map(([path, post]: any) => {
+    const slug = path.split('/').pop().replace('.md', '');
+
+    return {
+      slug,
+      title: post.metadata.title,
+      subtitle: post.metadata.subtitle,
+      description: post.metadata.description
+    };
+  });
+
+  return { posts };
+};

src/routes/blog/[slug]/+page.svelte

@@ -0,0 +1,45 @@
+<script>
+    import Phone from '$lib/Phone.svelte';
+
+  export let data;
+</script>
+
+<svelte:head>
+  <title>{data.meta.title} | HexName</title>
+  <meta property="og:title" content="{data.meta.title} | HexName">
+  <meta name="twitter:title" content="{data.meta.title} | HexName">
+  <meta name="description" content="{data.meta.description}">
+  <meta property="og:description" content="{data.meta.description}">
+  <meta name="twitter:description" content="{data.meta.description}">
+  <meta name="robots" content="index, follow">
+</svelte:head>
+
+<div class="w-full">
+  <div class="flex flex-col justify-center items-center">
+    <article class="prose prose-blockquote:[&>p]:first-of-type:before:content-none prose-blockquote:[&>p]:last-of-type:after:content-none prose-a:text-accent prose-h1:bg-primary prose-h1:p-4 prose-h1:rounded-3xl prose-h1:text-center max-w-4xl m-4 p-4 sm:p-8 rounded bg-base-200">
+      <svelte:component this={data.content} />
+    </article>
+
+  <div class="max-w-4xl mt-12 mb-0 m-4">
+    <div class="hero bg-base-200">
+      <div class="hero-content flex-col sm:flex-row">
+        <div class="w-full">
+          <h2 class="text-3xl font-bold">Like what you see?</h2>
+          <div class="flex flex-col sm:flex-row items-center justify-center">
+            <div class="py-6 leading-8">
+              Sign up now, register our premium domains, and manage DNS records - all forever for $0.00/month.
+            </div>
+            <div class="flex flex-row items-center px-38 sm:ml-12 sm:pl-35 not-sm:-mt-8 not-sm:translate-x-3 my-4 sm:-my-16">
+              <div class="scale-48 -m-45">
+                <Phone isRotated={true}/>
+              </div>
+            </div>
+          </div>
+          <a href="/register" class="btn btn-primary w-full sm:w-40">Get started</a>
+        </div>
+      </div>
+    </div>
+    </div>
+
+  </div>
+</div>

src/routes/blog/[slug]/+page.ts

@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+
+export const load = async ({ params }) => {
+  const posts = import.meta.glob('/src/lib/posts/*.md');
+
+  const post = posts[`/src/lib/posts/${params.slug}.md`];
+
+  if (!post) {
+    throw error(404, 'Post not found');
+  }
+
+  const resolvedPost: any = await post();
+
+  return {
+    content: resolvedPost.default,
+    meta: resolvedPost.metadata
+  };
+};