Feat: New landing page (#6)

* Feat: New landing page

Signed-off-by: thisisobate <[email protected]>

* chore: fix theme to be readable

Signed-off-by: thisisobate <[email protected]>

* chore: revert title to be capitalized

Signed-off-by: thisisobate <[email protected]>

---------

Signed-off-by: thisisobate <[email protected]>

assets/scss/_styles_project.scss

@@ -0,0 +1,338 @@
+.td-footer {
+  background-color: #0d0e11;
+  border-top: 2px solid #2c2e34;
+}
+
+.td-navbar {
+  background: #0d0e11;
+  border-bottom: 2px solid #2c2e34;
+}
+
+.td-sidebar-nav .td-sidebar-link__page {
+  color: #d6d4d4;
+}
+
+.td-sidebar-nav__section-title a {
+  color: #ffffff;
+}
+
+.td-toc #TableOfContents a {
+  color: #8e9ead;
+
+  &:hover {
+    color: #2380f2;
+  }
+}
+
+.td-content pre {
+  background-color: #1f2327;
+}
+
+.alert {
+  background: #000000;
+}
+
+.list-style-none {
+  list-style: none;
+}
+
+.padding-left-right-20 {
+  padding: 0 20px;
+}
+
+h4 > i {
+  padding-right: 10px;
+}
+
+p i {
+  padding-left: 6px;
+}
+
+a {
+  text-decoration: none;
+}
+
+.button {
+  border: none;
+  width: 120px;
+  height: 50px;
+  border-radius: 7px;
+  font-weight: 500;
+  font-size: 0.95rem;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+// .background-gradient-color {
+//   background: linear-gradient(
+//       270deg,
+//       rgba(35, 128, 242, 0.5) 15.55%,
+//       rgba(35, 128, 242, 0) 99.31%
+//     ),
+//     rgba(49, 227, 222, 0.7);
+// }
+
+.main-content {
+  max-width: Max(70%, 1080px);
+  padding-bottom: 50px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.vertical-align-center {
+  margin: 0 auto;
+}
+
+.justify-content-space-around {
+  justify-content: space-around;
+}
+
+.justify-content-space-between {
+  justify-content: space-between;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.gap-sm {
+  gap: 20px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-bold {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.text-underline {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 10px;
+}
+
+.text-white {
+  color: white;
+}
+
+.text-black {
+  color: black;
+}
+
+.padding-bottom-20 {
+  padding-bottom: 20px;
+}
+
+.padding-bottom-10 {
+  padding-bottom: 10px;
+}
+
+.btn-container {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.btn-primary {
+  background-color: #2380f2;
+  color: white;
+}
+
+.btn-secondary {
+  background-color: #f1f1f1;
+  color: #476581;
+}
+
+.breaking-word-all {
+  word-break: break-all;
+}
+
+.font-weight-300 {
+  font-weight: 300;
+}
+
+.hero-container {
+  padding: 100px 3% 100px;
+}
+
+.hero-text {
+  font-size: 3rem;
+  color: #f8f8f8;
+}
+
+.hero-tags {
+  padding: 7px 20px;
+  color: #9ca3af;
+  background-color: #14151a;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  // overflow-wrap: break-word;
+  // word-wrap: break-word;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+.hero-text-secondary {
+  width: 65%;
+  margin-top: 10px;
+  color: white;
+  font-weight: 300;
+  font-size: larger;
+}
+
+.feature-section {
+  padding: 100px 3% 25px;
+  font-size: larger;
+}
+
+.feature-section > .main-content {
+  margin: 0 auto;
+}
+
+.feature-item {
+  width: 45%;
+}
+
+.feature-item > p {
+  font-weight: 300;
+}
+
+.feature-item-sm > h4 {
+  display: inline-block;
+  height: 1rem;
+}
+
+.feature-item-sm > p {
+  font-weight: 100;
+}
+
+.feature-item-sm > span {
+  margin: auto 1em 1em 0;
+  text-align: right;
+}
+
+.feature-item-sm {
+  width: 18em;
+  height: 15em;
+  background-color: #ffffff;
+  padding: 0 0.5em 0 0.5em;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0 1.25em 0 1.25em;
+}
+
+.use-case-section {
+  background-color: ghostwhite;
+}
+
+.banner {
+  padding: 120px 0px 70px;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin: 0 auto;
+}
+
+.banner-link {
+  text-decoration: underline;
+  color: #2380f2;
+}
+
+// .footer {
+//   padding: 50px 20%;
+//   color: white;
+//   background-color: black;
+//   font-weight: 300;
+// }
+
+// .footer-info-text {
+//   font-size: 0.85rem;
+//   padding-top: 10px;
+// }
+
+// .footer-link-text {
+//   color: white;
+//   text-decoration: underline;
+// }
+
+.img-container {
+  width: 300px;
+  height: 100px;
+  object-fit: cover;
+  margin: 0 auto;
+}
+
+.media-section {
+  display: flex;
+}
+
+.text-wrapping {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+@media only screen and (max-width: 786px) {
+  .media-section {
+    display: none;
+  }
+
+  .hero-container {
+    width: 90%;
+  }
+
+  .hero-text-secondary {
+    width: 70%;
+  }
+
+  .feature-container {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    padding-bottom: 1em;
+  }
+
+  .feature-section-mobile {
+    padding: 100px 3% 0px;
+  }
+
+  .feature-section {
+    padding: 100px 3% 0px;
+    font-size: initial;
+  }
+
+  .feature-item {
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .feature-item-sm {
+    margin: 0 auto;
+    width: 80%;
+    height: auto;
+  }
+}
+
+// @media (min-width: 768px) {
+//     .td-navbar-cover {
+//         background: #0d0e11 !important;
+//     }
+// }

assets/scss/_variables_project.scss

@@ -4,3 +4,6 @@ Add styles or override variables from the theme here.
 
 */
 
+// Theme colors
+$body-bg: #0d0e11;
+$body-color: #ffffff

content/en/about/index.md

@@ -1,7 +1,6 @@
 ---
 title: About Goldydocs
 linkTitle: About
-menu: {main: {weight: 10}}
 ---
 
 {{% blocks/cover title="About Goldydocs" image_anchor="bottom" height="auto" %}}