Add a code example to the landing page (#89)

* Add an example to the landing page * Improve mobile support * Move the example to the top * Fix margins * Improve font sizes and padding * Shorten a header * Adjust title size
NetCordDev · Jan 26, 2025 · 4ef9664 · 4ef9664
1 parent 548caf6
commit 4ef9664
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/Documentation/templates-src/NetCord/partials/example.tmpl.partial b/Documentation/templates-src/NetCord/partials/example.tmpl.partial
@@ -0,0 +1,9 @@
+var builder = Host.CreateDefaultBuilder(args)
+    .UseDiscordGateway()
+    .UseApplicationCommands();
+
+var host = builder.Build()
+    .AddSlashCommand("square", "Square!", (int a) => $"{a}² = {a * a}")
+    .UseGatewayEventHandlers();
+
+await host.RunAsync();
diff --git a/Documentation/templates-src/NetCord/partials/root.tmpl.partial b/Documentation/templates-src/NetCord/partials/root.tmpl.partial
@@ -8,6 +8,17 @@
   </section>
 </div>
 
+<div class="code-example-section">
+  <h3 class="section-title">Build a Discord Bot in Minutes!</h3>
+  <h4 class="section-text">
+    Quickly add a <code>/square</code> command to calculate squares with just a few lines of C#.
+  </h4>
+  <div class="code-example">
+    <pre><code class="lang-cs" name="Program.cs">{{>partials/example}}</code></pre>
+  </div>
+  <h4 class="section-text">Start building now with NetCord!</h4>
+</div>
+
 <div class="features-section">
   <h3 class="section-title">Key Features of NetCord</h3>
   <div class="features-container">

diff --git a/Documentation/templates-src/NetCord/src/main.css b/Documentation/templates-src/NetCord/src/main.css
@@ -335,14 +335,40 @@ code,
 }
 
 .features-section {
-  padding: 100px 0;
-  text-align: center;
+  padding-bottom: 100px;
+  color: var(--bs-emphasis-color);
+}
+
+.code-example {
+  width: fit-content;
+  max-width: 100%;
+  font-size: 1em;
+}
+
+  .code-example pre code.hljs {
+    padding: 1.5em !important;
+  }
+
+.code-example-section {
+  margin-top: 100px;
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   color: var(--bs-emphasis-color);
 }
 
 .section-title {
   font-size: 30px;
   margin-bottom: 30px;
+  text-align: center;
+}
+
+.section-text {
+  font-size: 18px;
+  text-align: center;
+  margin-bottom: 30px;
+  padding: 0 10px;
 }
 
 .features-container {
@@ -404,11 +430,7 @@ body {
   }
 
   .section-title {
-    font-size: 7vw;
-  }
-
-  .features-section {
-    padding: 50px 0;
+    font-size: 6.5vw;
   }
 
   .feature-item {
@@ -427,6 +449,10 @@ body {
     padding-left: 40px;
     padding-right: 40px;
   }
+
+  .code-example {
+    font-size: 1.2em;
+  }
 }
 
 @view-transition {