Add knowledge section

Moonshine-IDE · Aug 6, 2024 · 88f9181 · 88f9181
1 parent cc27874
commit 88f9181
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -35,9 +35,9 @@
     </script>
   </head>
   <body>
-    <header class="header__title container">Moonshine.dev</header>
-    <section class="hero">
-      <div class="container">
+    <div class="container">
+      <header class="header__title">Moonshine.dev</header>
+      <section class="hero">
         <div class="row">
           <div class="hero__text-wrapper">
             <h1 class="hero__title">
@@ -57,10 +57,8 @@ <h1 class="hero__title">
             />
           </div>
         </div>
-      </div>
-    </section>
-    <section>
-      <div class="container">
+      </section>
+      <section>
         <div class="row">
           <!-- Card 1 -->
           <a
@@ -132,7 +130,27 @@ <h2 class="feature__title">AI Tooling</h2>
             <span class="feature__button">Try Now!</span>
           </a>
         </div>
-      </div>
-    </section>
+      </section>
+      <div class="spacer"></div>
+
+      <!-- Knowledge Section -->
+      <section class="knowledge">
+        <div class="container">
+          <h2 class="knowledge__title">Knowledge Center</h2>
+          <p class="knowledge__description">
+            Explore our comprehensive resources to learn more about
+            <em>Moonshine.dev</em> and enhance your app development skills.
+          </p>
+          <div class="knowledge__link-wrapper">
+            <a
+              href="https://moonshine-ide.com/docs/moonshine.dev/ui-development-series"
+              class="knowledge__link"
+            >
+              Master Moonshine.dev
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -6,18 +6,23 @@
 }
 
 body {
+  min-height: 100vh;
   font-family: Arial, sans-serif;
   line-height: 1.6;
   background: rgb(8, 47, 73);
   background: linear-gradient(135deg, #25263c 0%, #13131d 100%);
   color: #fff;
 }
 
+em {
+  color: #f2e5a9;
+  font-style: normal;
+}
+
 /* Container */
 .container {
   width: 100%;
   margin: 0 auto;
-  padding: 0 10px; /* Default padding for the smallest breakpoint */
 }
 
 /* Breakpoints for container */
@@ -95,6 +100,7 @@ body {
 }
 
 .header__title {
+  padding: 16px;
   display: flex;
   align-items: center;
   height: 60px;
@@ -274,3 +280,94 @@ body {
   background: #f2e5a9;
   color: #111;
 }
+
+/* Knowledge */
+
+.spacer {
+  height: 50px;
+}
+
+.knowledge {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 20px;
+  padding-bottom: 100px;
+  color: #fff; /* Matches the text color */
+  border-top: 1px solid #555; /* A subtle separator line at the top */
+}
+
+.knowledge__content {
+  display: flex;
+  flex-direction: column; /* Default to column layout for small screens */
+  align-items: center; /* Center align items for smaller screens */
+  justify-content: space-between; /* Space between for flex children */
+  gap: 20px;
+}
+
+@media (min-width: 992px) {
+  .knowledge__content {
+    flex-direction: row; /* Row layout for larger screens */
+    align-items: flex-start; /* Align items to the top */
+  }
+}
+
+.knowledge__text {
+  text-align: center;
+  max-width: 800px; /* Limits width for better readability */
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 992px) {
+  .knowledge__text {
+    text-align: left;
+    max-width: none; /* Remove max width restriction on larger screens */
+  }
+}
+
+.knowledge__title {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #a5b4fc;
+  padding-top: 2rem;
+}
+
+.knowledge__description {
+  font-size: 1.25rem;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  color: #e0e7ff;
+}
+
+.knowledge__link-wrapper {
+  margin: 0 auto;
+  text-align: center; /* Center align link on smaller screens */
+}
+
+@media (min-width: 992px) {
+  .knowledge__link-wrapper {
+    text-align: center; /* Align link to the right on larger screens */
+  }
+}
+
+.knowledge__link {
+  font-size: 0.8em;
+  align-self: center;
+  border: none;
+  border-radius: 3em;
+  padding: 0.8em 2em;
+  text-transform: uppercase;
+  text-decoration: none; /* Remove underline from links */
+  display: inline-block; /* Allow padding and dimensions to apply */
+  color: inherit; /* Inherit the text color to match the button text */
+  background-color: #343440;
+}
+
+.knowledge__link:hover {
+  text-decoration: none; /* Ensure no underline on interaction states */
+  outline: none; /* Text color on hover */
+  font-weight: 700;
+  background-color: #f2e5a9;
+  color: #13131d;
+}