@networkpro/web 0.13.2 → 1.0.0

package/src/lib/styles/css/style.css

@@ -0,0 +1,310 @@
+/*! ==========================================================================
+src/lib/styles/style.css
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+=========================================================================== */
+
+/*! Modified from HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
+
+/* https://github.com/h5bp/main.css#readme */
+
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+========================================================================== */
+
+html {
+  font-size: 1em;
+  line-height: 1.4;
+  color: #222;
+  scroll-behavior: smooth;
+}
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+  background: #191919;
+  text-shadow: none;
+}
+
+::selection {
+  background: #191919;
+  text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ * 1. Show the overflow in Edge and IE.
+ */
+
+hr {
+  display: block;
+  height: 1px;
+  padding: 0;
+  margin: 1em 0;
+  border: 0;
+  border-top: 1px solid #ccc;
+  overflow: visible; /* 1 */
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+  resize: vertical;
+}
+
+/* ==========================================================================
+   Author's custom styles
+========================================================================== */
+
+/*
+ * Additional line added to hr{} under 'Base Styles'
+ */
+
+body {
+  margin: 10px;
+  color: #fafafa;
+  background-color: #191919;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* parent link element */
+a {
+  text-decoration: none;
+}
+
+/* unvisited link */
+a:link {
+  color: #ffc627;
+}
+
+/* mouse over link */
+a:hover {
+  color: #ffc627;
+  text-decoration: underline;
+}
+
+/* selected link */
+a:active {
+  color: #ffc627;
+  text-decoration: underline;
+}
+
+/* focused link */
+a:focus {
+  color: #191919; /* Black text when focused */
+  background-color: #ffc627; /* Gold background when focused */
+}
+
+/* visited link */
+a:visited {
+  color: #7f6227;
+}
+
+/* visited and mouse over */
+a:visited:hover {
+  color: #7f6227;
+}
+
+/* ==========================================================================
+   Helper classes
+========================================================================== */
+
+/*
+ * Hide visually and from screen readers
+ */
+
+.hidden,
+[hidden] {
+  display: none !important;
+}
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  white-space: nowrap;
+
+  /* 1 */
+}
+
+/*
+ * Extends the .visually-hidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+.visually-hidden.focusable:active,
+.visually-hidden.focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  clip: auto;
+  overflow: visible;
+  white-space: inherit;
+}
+
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+.invisible {
+  visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * The use of `table` rather than `block` is only necessary if using
+ * `::before` to contain the top-margins of child elements.
+ */
+
+.clearfix::before,
+.clearfix::after {
+  display: table;
+  content: "";
+}
+
+.clearfix::after {
+  clear: both;
+}
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   These examples override the primary ('mobile first') styles.
+   Modify as content requires.
+========================================================================== */
+
+@media only screen and (width >= 35em) {
+  /* Style adjustments for viewports that meet the condition */
+}
+
+@media print,
+  (-webkit-min-device-pixel-ratio: 1.25),
+  (resolution >= 1.25dppx),
+  (resolution >= 120dpi) {
+  /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+========================================================================== */
+
+/* stylelint-disable order/properties-order -- Maintain spreadsheet consistency */
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  /* stylelint-enable order/properties-order */
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+   * Don't show links that are fragment identifiers,
+   * or use the `javascript:` pseudo protocol
+   */
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

package/src/lib/styles/fa-global.css

@@ -0,0 +1,10 @@
+/*! ==========================================================================
+src/lib/styles/fa-global.css
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+@import "./css/fontawesome.min.css";
+@import "./css/brands.min.css";
+@import "./css/solid.min.css";

package/src/lib/styles/global.min.css

@@ -0,0 +1,9 @@
+/*! ==========================================================================
+src/lib/styles/global.min.css
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+=========================================================================== */
+/*! Modified from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+/*! Modified from HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
+html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{color:inherit;box-sizing:border-box;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}template{display:none}html{color:#222;scroll-behavior:smooth;font-size:1em;line-height:1.4}::-moz-selection{text-shadow:none;background:#191919}::selection{text-shadow:none;background:#191919}hr{border:0;border-top:1px solid #ccc;height:1px;margin:1em 0;padding:0;display:block;overflow:visible}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}body{color:#fafafa;background-color:#191919;margin:10px;font-family:Arial,Helvetica,sans-serif}a{text-decoration:none}a:link{color:#ffc627}a:hover,a:active{color:#ffc627;text-decoration:underline}a:focus{color:#191919;background-color:#ffc627}a:visited,a:visited:hover{color:#7f6227}.hidden,[hidden]{display:none!important}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visually-hidden.focusable:active,.visually-hidden.focusable:focus{clip:auto;width:auto;height:auto;white-space:inherit;margin:0;position:static;overflow:visible}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:#fff!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^=\#]:after,a[href^=javascript\:]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{page-break-inside:avoid;border:1px solid #999}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.full-width-section{background-position:50%;background-size:cover;width:100%;max-width:1920px;margin:0 auto}.container{max-width:1200px;margin:0 auto;padding:0 12px}header,footer{width:100%}header .container,footer .container{max-width:1200px;margin:0 auto;padding:20px 12px}.gh{border-collapse:collapse;border-spacing:0;margin:0 auto}.gh td,.gh th{border-collapse:collapse;word-break:normal;padding:10px 5px;overflow:hidden}.gh .gh-tcell{text-align:center;vertical-align:middle}@media screen and (width<=767px){.gh,.gh col{width:auto!important}.gh-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.soc{border-collapse:collapse;border-spacing:0;margin:0 auto}.soc td,.soc th{border-collapse:collapse;word-break:normal;padding:8px;overflow:hidden}.soc .soc-fa{text-align:center;vertical-align:middle}@media screen and (width<=767px){.soc,.soc col{width:auto!important}.soc-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.foss{border-collapse:collapse;border-spacing:0}.foss td,.foss th{border-collapse:collapse;word-break:normal;padding:10px 5px;overflow:hidden}.foss .foss-cell{text-align:center;vertical-align:middle}@media screen and (width<=767px){.foss,.foss col{width:auto!important}.foss-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}}.bnav{border-collapse:collapse;border-spacing:0;margin:0 auto}.bnav td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;font-weight:700;line-height:1.125rem;overflow:hidden}.bnav th{word-break:normal;border-style:none;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.bnav .bnav-cell{text-align:center;vertical-align:middle;align-content:center}@media screen and (width<=767px){.bnav,.bnav col{width:auto!important}.bnav-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.bnav2{border-collapse:collapse;border-spacing:0;margin:0 auto}.bnav2 td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;font-weight:700;line-height:1.125rem;overflow:hidden}.bnav2 th{word-break:normal;border-style:none;padding:12px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.bnav2 .bnav2-cell{text-align:center;vertical-align:middle;align-content:center}@media screen and (width<=767px){.bnav2,.bnav2 col{width:auto!important}.bnav2-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.pgp{border-collapse:collapse;border-spacing:0;margin:0 auto}.pgp td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.pgp th{word-break:normal;border:1px solid #000;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.pgp .pgp-col1{text-align:right;vertical-align:middle;padding-right:1rem}.pgp .pgp-col2{text-align:left;vertical-align:middle;padding-left:1rem}@media screen and (width<=767px){.pgp,.pgp col{width:auto!important}.pgp-wrap{-webkit-overflow-scrolling:touch;margin:2rem 0 auto;overflow-x:auto}}.logo{margin-left:auto;margin-right:auto;display:block}.index-title1{text-align:center;font-style:italic;font-weight:700}.index-title2{letter-spacing:-.015em;text-align:center;font-variant:small-caps;font-size:1.25rem;line-height:1.625rem}.index1{letter-spacing:-.035em;text-align:center;font-style:italic;font-weight:700;line-height:2.125rem}.index2{letter-spacing:-.035em;text-align:center;font-variant:small-caps;font-size:1.5rem;line-height:1.75rem}.index3{letter-spacing:-.035em;text-align:center;font-size:1.5rem;line-height:1.75rem}.subhead{letter-spacing:-.035em;font-variant:small-caps;font-size:1.5rem;line-height:1.75rem}.bolditalic{font-style:italic;font-weight:700}.bquote{border-left:3px solid #9e9e9e;margin-left:30px;padding-left:10px;font-style:italic}.small-text{font-size:.75rem;line-height:1.125rem}.large-text-center{text-align:center;font-size:1.25rem;line-height:1.75rem}.prewrap{white-space:pre-wrap;display:block}.hr-styled{width:75%;margin:auto}.center-text{text-align:center}.copyright{text-align:center;font-size:.75rem;line-height:1.125rem}.visited{color:#7f6227}.center-nav{text-align:center;padding:5px;font-size:.875rem;line-height:1.125rem}.block{resize:none;background:0 0;border:none;border-radius:0;outline:none;width:100%;font-size:.75rem;line-height:1.125rem}.fingerprint{white-space:pre-line;font-weight:700;display:block}.pgp-image{width:125px;height:125px}.spacer{margin:2rem 0}.separator{margin:0 .5rem}

package/src/lib/styles/index.js

@@ -0,0 +1,11 @@
+/* ==========================================================================
+src/lib/styles/index.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+// Import transformed and minified stylsheets
+import "./global.min.css";
+import "./fa-global.css";
+

package/src/routes/+error.svelte

@@ -0,0 +1,43 @@
+<!-- ==========================================================================
+src/routes/+error.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  /**
+   * @typedef {Object} Error
+   * @property {string} [message] - The message explaining the error.
+   */
+
+  /**
+   * The HTTP status code of the error (e.g., 404, 500).
+   * @type {number}
+   */
+  export let status;
+
+  /**
+   * The error object, containing details about what went wrong.
+   * @type {Error}
+   */
+  export let error;
+
+  const centerText = "center-text";
+
+  // Get the pathname from the URL if available
+  const pathname =
+    typeof window !== "undefined" ? window.location.pathname : "/";
+</script>
+
+<main>
+  <h1 class={centerText}
+    >{status} - {status === 404 ? "Page Not Found" : "Error"}</h1>
+  <p class={centerText}>
+    {#if status === 404}
+      The page "{pathname}" does not exist.
+    {:else}
+      {error?.message || "An error occurred"}
+    {/if}
+  </p>
+</main>

package/src/routes/+layout.js

@@ -0,0 +1,94 @@
+/* ==========================================================================
+src/routes/+layout.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * @typedef {object} MetaData
+ * @property {string} title - The title of the page
+ * @property {string} description - The description of the page
+ */
+
+/**
+ * @type {Record<string, MetaData>}
+ * Defines metadata for specific routes. The key is the pathname (string),
+ * and the value is an object containing the title and description for the route.
+ */
+const meta = {
+  "/": {
+    title:
+      "Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro™",
+    description:
+      "Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro™",
+  },
+  "/about": {
+    title: "About Us — Network Pro™",
+    description: "About Us | Security, Networking, Privacy — Network Pro™",
+  },
+  "/privacy-policy": {
+    title: "Privacy Policy — Network Pro™",
+    description:
+      "Privacy Policy | Security, Networking, Privacy — Network Pro™",
+  },
+  "/terms-of-use": {
+    title: "Website Terms of Use — Network Pro™",
+    description:
+      "Website Terms of Use | Security, Networking, Privacy — Network Pro™",
+  },
+  "/license": {
+    title: "Legal, Copyright, and Licensing — Network Pro™",
+    description:
+      "Legal, Copyright, and Licensing | Security, Networking, Privacy — Network Pro™",
+  },
+  "/terms-conditions": {
+    title: "Consulting Terms and Conditions — Network Pro™",
+    description:
+      "Terms and Conditions | Security, Networking, Privacy — Network Pro™",
+  },
+  "/foss-spotlight": {
+    title: "FOSS Spotlight — Network Pro™",
+    description:
+      "FOSS Spotlight | Security, Networking, Privacy — Network Pro™",
+  },
+  "/contact": {
+    title: "Contact Form — Network Pro™",
+    description: "Contact Form | Security, Networking, Privacy — Network Pro™",
+  },
+  "/privacy-rights": {
+    title: "Privacy Rights Request Form — Network Pro™",
+    description:
+      "Privacy Rights Request Form | Security, Networking, Privacy — Network Pro™",
+  },
+};
+
+// Fallback metadata for all routes
+const defaultMeta = {
+  title: "Loading... | Network Pro™",
+  description:
+    "Please wait while the content loads... | Security, Networking, Privacy — Network Pro™",
+};
+
+export const prerender = "auto";
+export const trailingSlash = "never";
+
+/**
+ * @param {{ url: URL }} param0
+ * @returns {{ pathname: string, meta: MetaData }}
+ * The load function returns the current pathname and the appropriate metadata
+ * for the route, ensuring that default metadata is used if no specific route is defined.
+ */
+export function load({ url }) {
+  // Normalize the pathname to remove trailing slashes
+  const normalizedPathname = url.pathname.replace(/\/+$/, "") || "/";
+
+  // Determine metadata based on static routes, fallback to defaultMeta
+  const currentMeta = meta[normalizedPathname] || defaultMeta;
+
+  // Return the metadata and pathname to the layout
+  return {
+    pathname: normalizedPathname,
+    meta: currentMeta,
+  };
+}

package/src/routes/+layout.svelte

@@ -0,0 +1,110 @@
+<!-- ==========================================================================
+src/routes/+layout.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import ContainerSection from "$lib/components/ContainerSection.svelte";
+  import Footer from "$lib/components/layout/Footer.svelte";
+  import HeaderDefault from "$lib/components/layout/HeaderDefault.svelte";
+  import HeaderHome from "$lib/components/layout/HeaderHome.svelte";
+  import { browser } from "$app/environment";
+  // TODO: Testing in progress
+  import { registerServiceWorker } from "$lib/registerServiceWorker.js";
+
+  // Import logo images and favicons and format for preloading
+  import logoPng from "$lib/img/logo-web.png";
+  import logoWbp from "$lib/img/logo-web.webp";
+  import faviconSvg from "$lib/img/favicon.svg";
+  import appleTouchIcon from "$lib/img/icon-180x180.png";
+
+  /**
+   * @type {string}
+   * Style class for the mobile-web-app-capable meta tag.
+   */
+  const webApp = "mobile-web-app-capable";
+
+  if (browser) {
+    // Preload logo images
+    [logoPng, logoWbp].forEach((src) => {
+      const img = new Image();
+      img.src = src;
+    });
+
+    // Preload favicon SVG
+    fetch(faviconSvg).then((response) => response.text());
+
+    // Preload Apple Touch icon
+    const touchImg = new Image();
+    touchImg.src = appleTouchIcon;
+
+    // TODO: Testing in progress
+    // Register the service worker
+    registerServiceWorker();
+  }
+
+  // Import global and FontAwesome styles and web fonts
+  import "$lib/styles";
+
+  export let data;
+
+  // Pathname normalization takes place in +layout.js
+</script>
+
+<!-- Update the document's metadata dynamically -->
+<svelte:head>
+  <title>{data?.meta?.title || "Network Pro Strategies (Network Pro™)"}</title>
+  <meta
+    name="description"
+    content={data?.meta?.description ||
+      "Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro™"} />
+
+  <!-- Standard favicon and Apple Touch icon references -->
+  <link rel="icon" href={faviconSvg} type="image/svg+xml" />
+  <link rel="apple-touch-icon" href={appleTouchIcon} />
+
+  <!-- Preload links for all four critical assets -->
+  {#if browser}
+    <link rel="preload" href={logoWbp} as="image" type="image/webp" />
+    <link rel="preload" href={logoPng} as="image" type="image/png" />
+    <link rel="preload" href={faviconSvg} as="image" type="image/svg+xml" />
+    <link rel="preload" href={appleTouchIcon} as="image" type="image/png" />
+  {/if}
+
+  <!-- PWA-specific meta tags -->
+  <link rel="manifest" href="/manifest.json" />
+  <meta name={webApp} content="yes" />
+  <meta name={"apple-" + webApp} content="yes" />
+  <meta
+    name="apple-mobile-web-app-status-bar-style"
+    content="black-translucent" />
+  <meta name="theme-color" content="#ffc627" />
+</svelte:head>
+
+<!-- BEGIN HEADER -->
+<header id="header-nav">
+  <ContainerSection>
+    {#if data.pathname === "/"}
+      <!-- Render the Home Header for the root route -->
+      <HeaderHome />
+    {:else}
+      <!-- Render the Default Header for all other routes -->
+      <HeaderDefault />
+    {/if}
+  </ContainerSection>
+</header>
+<!-- END HEADER -->
+
+<main>
+  <slot />
+</main>
+
+<!-- BEGIN FOOTER -->
+<footer id="licensing">
+  <ContainerSection>
+    <Footer />
+  </ContainerSection>
+</footer>
+<!-- END FOOTER -->

package/src/routes/+page.svelte

@@ -0,0 +1,77 @@
+<!-- ==========================================================================
+src/routes/+page.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import Badges from "$lib/components/Badges.svelte";
+  import FullWidthSection from "$lib/components/FullWidthSection.svelte";
+  import HomeContent from "$lib/pages/HomeContent.svelte";
+  import LegalNav from "$lib/components/LegalNav.svelte";
+  import Logo from "$lib/components/Logo.svelte";
+  import SocialMedia from "$lib/components/SocialMedia.svelte";
+
+  /**
+   * @type {string}
+   * Style class for the horizontal rule element.
+   */
+  const hrStyle = "hr-styled";
+
+  /**
+   * @type {string}
+   * Style class for the div element.
+   */
+  const spaceStyle = "spacer";
+</script>
+
+<link rel="canonical" href="https://netwk.pro" />
+
+<section id="home-page" data-testid="home-page">
+  <FullWidthSection>
+    <!-- BEGIN TITLE -->
+    <section id="page-title">
+      <Logo />
+    </section>
+    <!-- END TITLE -->
+
+    <div class={spaceStyle}></div>
+
+    <hr class={hrStyle} />
+
+    <div class={spaceStyle}></div>
+
+    <!-- BEGIN MAIN CONTENT -->
+    <section id="main-content">
+      <HomeContent />
+    </section>
+    <!-- END MAIN CONTENT -->
+
+    <div class={spaceStyle}></div>
+
+    <!-- BEGIN SOCIAL MEDIA -->
+    <section id="social-media">
+      <SocialMedia />
+    </section>
+    <!-- END SOCIAL MEDIA -->
+
+    <hr class={hrStyle} />
+
+    <div class={spaceStyle}></div>
+
+    <!-- BEGIN LEGAL -->
+    <section id="legal-nav">
+      <LegalNav />
+    </section>
+    <!-- END LEGAL -->
+
+    <div class={spaceStyle}></div>
+
+    <!-- BEGIN BADGES -->
+    <section id="badges">
+      <Badges />
+    </section>
+    <!-- END BADGES -->
+  </FullWidthSection>
+</section>