Improve the website in terms of SEO

Documentation/docfx.json

@@ -44,7 +44,7 @@
     "markdownEngineName": "markdig",
     "globalMetadata": {
       "_appDescription": "NetCord – the modern and fully customizable C# Discord library",
-      "_appTitle": "NetCord",
+      "_appTitle": "NetCord - Build Discord Bots in .NET",
       "_enableSearch": true,
       "_disableFooter": true,
       "_noindex": true,

Documentation/index.md

@@ -1,4 +1,5 @@
 ---
-title: Home
+title: NetCord - Modern C# Discord Bot Library for .NET Developers
+omitAppTitle: true
 _root: true
----
+---

Documentation/templates-src/NetCord/layout/_master.tmpl

@@ -10,10 +10,10 @@
       <meta http-equiv="refresh" content="0;URL='{{redirect_url}}'">
     {{/redirect_url}}
     {{^redirect_url}}
-      <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}</title>
+      <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{^omitAppTitle}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}{{/omitAppTitle}}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}">
-      <meta property="og:title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}">
+      <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{^omitAppTitle}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}{{/omitAppTitle}}">
+      <meta property="og:title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{^omitAppTitle}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}{{/omitAppTitle}}">
       <meta name="description" content="{{#description}}{{description}}{{/description}}{{^description}}{{#_appDescription}}{{_appDescription}}{{/_appDescription}}{{/description}}">
       <meta property="og:description" content="{{#description}}{{description}}{{/description}}{{^description}}{{#_appDescription}}{{_appDescription}}{{/_appDescription}}{{/description}}">
       <meta property="og:type" content="website">

Documentation/templates-src/NetCord/partials/root.tmpl.partial

@@ -6,4 +6,46 @@
     <a href="guides/getting-started/installation.html" class="button secondary-button">Guides</a>
     <a href="docs/" class="button secondary-button">Docs</a>
   </section>
-</div>
+</div>
+
+<div class="features-section">
+  <h3 class="section-title">Key Features of NetCord</h3>
+  <div class="features-container">
+    <div class="feature-item">
+      <h4>Fully Customizable</h4>
+      <p>NetCord is a highly customizable, open-source C# Discord library, enabling developers to create tailored bots with flexible and extensible features.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Easy to Use</h4>
+      <p>With an intuitive API design, NetCord streamlines bot development, allowing you to quickly and efficiently build Discord bots in .NET.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Lightweight & High Performance</h4>
+      <p>NetCord is designed for efficiency, ensuring high performance while keeping resource usage minimal, making it perfect for scalable bots.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Asynchronous & Concurrent</h4>
+      <p>Fully supporting async/await, NetCord allows for responsive, concurrent operations, enabling scalable and high-performing bot interactions.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Native AOT Support</h4>
+      <p>NetCord supports Native AOT, allowing for faster startup times, smaller memory footprints, and reduced deployment sizes, making your bot highly optimized for performance.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Immutable Caching</h4>
+      <p>NetCord's caching system is immutable by default, providing all the benefits of immutability, such as data consistency and preventing unintended changes during execution.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Voice Ready</h4>
+      <p>NetCord includes robust support for sending and receiving voice data, allowing you to integrate high-quality voice features into your bot.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Complete API Coverage</h4>
+      <p>NetCord covers the entire Discord API and more, ensuring you have access to all the latest features and capabilities Discord has to offer.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Open Source & Forever Free</h4>
+      <p>NetCord is open source and forever free to use under the permissive MIT license, making it an ideal choice for developers at any level.</p>
+    </div>
+  </div>
+</div>

Documentation/templates-src/NetCord/src/main.css

@@ -1,16 +1,12 @@
 @font-face {
   font-family: Cascadia Code;
-  src:
-    local(Cascadia Code Regular),
-    url(cascadia-code.woff2) format(woff2);
+  src: local(Cascadia Code Regular), url(cascadia-code.woff2) format(woff2);
   font-display: swap;
 }
 
 @font-face {
   font-family: Franklin Gothic Heavy;
-  src:
-    local(Franklin Gothic Heavy),
-    url(franklin-gothic-heavy.woff2) format(woff2);
+  src: local(Franklin Gothic Heavy), url(franklin-gothic-heavy.woff2) format(woff2);
   font-display: swap;
 }
 
@@ -113,39 +109,17 @@ article,
 .main {
   color: var(--bs-emphasis-color);
   display: flex;
-  justify-content: center;
+  justify-content: end;
   flex-direction: column;
-  height: 80vh;
+  height: 55vh;
   text-align: center;
 }
 
 .bg-body {
   z-index: 1;
-}
-
-@media (max-height: 600px) {
-  .main {
-    height: auto;
-  }
-}
-
-@media (max-width: 767px) {
-  .title {
-    font-size: 23vw;
-  }
-
-  .subtitle {
-    font-size: 3.5vw;
-  }
-
-  .buttons {
-    flex-direction: column;
-  }
-}
-
-.bg-body {
   --bs-bg-opacity: 0;
   backdrop-filter: blur(10px) brightness(80%);
+  -webkit-backdrop-filter: blur(10px) brightness(80%);
 }
 
 .border-bottom {
@@ -167,26 +141,26 @@ article,
   background-color: var(--blurple);
 }
 
-.primary-button:hover,
-.primary-button:active {
-  background-color: var(--dark-blurple);
-  border-color: var(--dark-blurple);
-}
+  .primary-button:hover,
+  .primary-button:active {
+    background-color: var(--dark-blurple);
+    border-color: var(--dark-blurple);
+  }
 
 .secondary-button {
   color: var(--bs-emphasis-color);
 }
 
-.secondary-button:hover {
-  background-color: var(--blurple);
-  color: var(--bs-white);
-}
+  .secondary-button:hover {
+    background-color: var(--blurple);
+    color: var(--bs-white);
+  }
 
-.secondary-button:active {
-  background-color: var(--dark-blurple);
-  border-color: var(--dark-blurple);
-  color: var(--bs-white);
-}
+  .secondary-button:active {
+    background-color: var(--dark-blurple);
+    border-color: var(--dark-blurple);
+    color: var(--bs-white);
+  }
 
 .icon:before {
   display: inline-grid;
@@ -213,12 +187,12 @@ code,
   font-variant-ligatures: var(--ligatures);
 }
 
+.icon-content {
+  pointer-events: none;
+}
+
 * {
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 .form-control {
@@ -274,11 +248,7 @@ code,
   }
 }
 
-.icon-tooltip {
-  animation: iconShow 0.3s forwards;
-}
-
-.icon-tooltip::after {
+.icon-tooltip-active.icon-tooltip::after {
   pointer-events: none;
   content: attr(tooltip);
   position: absolute;
@@ -287,45 +257,21 @@ code,
   color: var(--tooltip-color);
   font-size: 0.8em;
   animation: tooltipFadeOutUp 0.15s ease both;
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   border-width: 3px 0 0 0;
   border-top-style: solid;
   border-top-color: var(--tooltip-color);
   font-weight: 600;
-  bottom: calc(-100% - 3px);
+  bottom: calc(-100% + 6px);
 }
 
-@media (min-width: 768px) {
-  .icon-tooltip::after {
-    bottom: calc(-100% + 6px);
-  }
-
-  .navbar > .container-xxl {
-    padding-left: 40px;
-    padding-right: 40px;
-  }
-}
-
-.icon-tooltip:hover::after {
+.icon-tooltip-active.icon-tooltip:hover::after,
+.icon-tooltip-active.icon-tooltip:focus-visible::after {
   animation: tooltipFadeInUp 0.15s ease both;
 }
 
-@keyframes iconShow {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+.navbar-collapse.collapsing .icon-tooltip-active.icon-tooltip::after {
+  scale: 0;
 }
 
 @keyframes tooltipFadeInUp {
@@ -351,3 +297,94 @@ code,
     transform: translate(calc(-50% - 8.4px), 0) translateY(10px);
   }
 }
+
+.features-section {
+  padding: 100px 0;
+  text-align: center;
+  color: var(--bs-emphasis-color);
+}
+
+.section-title {
+  font-size: 30px;
+  margin-bottom: 30px;
+}
+
+.features-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 40px;
+}
+
+.feature-item {
+  flex-basis: 30%;
+  padding: 20px;
+  background-color: #f8f8f8;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+[data-bs-theme="dark"]
+.feature-item {
+  background-color: rgba(0, 0, 0, 0.11);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.feature-item h4 {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.feature-item p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  .title {
+    font-size: 23vw;
+  }
+
+  .subtitle {
+    font-size: 3.5vw;
+  }
+
+  .buttons {
+    flex-direction: column;
+  }
+
+  .icon-tooltip-active.icon-tooltip::after {
+    bottom: calc(-100% - 3px);
+  }
+
+  .section-title {
+    font-size: 7vw;
+  }
+
+  .features-section {
+    padding: 50px 0;
+  }
+
+  .feature-item {
+    flex-basis: 100%;
+  }
+}
+
+@media (max-width: 767px), (max-height: 750px) {
+  .main {
+    height: auto;
+  }
+}
+
+@media not all and (max-width: 767px) {
+  .navbar > .container-xxl {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}