Update and add background in layout

iotaledger · Jun 27, 2024 · d9a487c · d9a487c
1 parent ce72c72
commit d9a487c
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 46 deletions.
diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css
@@ -31,7 +31,7 @@
   --ifm-menu-color-background-active: rgba(247, 247, 248, 1);
 
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --iota-black: rgba(11, 11, 11, 0.607);
+  --iota-black: #222324;
   --iota-blue: #6fbcf0;
   --iota-blue-bright: #00f9fb;
   --iota-blue-light: #e1f3ff;
@@ -128,7 +128,7 @@
   color: var(--iota-gray-100);
 }
 html[data-theme="dark"] {
-  background-color: rgba(11, 11, 11, 0.607);
+  background-color: var(--iota-black);
 }
 /** setup global style overrides */
 body {
@@ -316,25 +316,38 @@ h4 {
 
 /** Globals **/
 .button-cta {
-  background-color: var(--iota-blue-primary);
   color: var(--iota-white);
   letter-spacing: -0.3px;
   cursor: pointer;
   border-style: none;
-  border-radius: 2.25rem;
   padding: 0.75rem 1.125rem;
   font-family: var(--primaryFont);
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.125rem;
   transition: background-color 0.3s;
-  display: inline-block;
+  display: flex;
+  width: 170px;
+  height: 56px;
+  padding: 16px 12px 16px 18px;
+  border-radius: 2px 0px 0px 0px;
+  justify-content: space-between;
+  opacity: 0px;
+  background: #0101ff;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
 }
 .button-cta:hover {
   background-color: var(--iota-button-hover);
   color: var(--iota-white);
   text-decoration: none;
 }
+.button-cta:after {
+  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5.5H14V14.5' stroke='%23ABBDCC' stroke-width='2'/%3E%3Cpath d='M14 5.5L3 16.5' stroke='%23ABBDCC' stroke-width='2'/%3E%3C/svg%3E");
+  width: 18px;
+  height: 18px;
+}
 @media (max-width: 1050px) {
   .navbar .button-cta {
     display: none;

diff --git a/docs/site/src/pages/index.js b/docs/site/src/pages/index.js
@@ -7,7 +7,6 @@ import React from "react";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import styles from "./index.module.css";
-
 export default function Home() {
   const HomeCard = (props) => {
     const { title, children } = props;
@@ -38,14 +37,29 @@ export default function Home() {
       }}
     >
       <div className="bg-iota-black overflow-hidden">
-        <div className="w-full mt-24 mb-12 mx-auto bg-iota-black">
-          <div className={styles.heroText}>
-            <h1 className="h1 center-text text-white">IOTA Documentation</h1>
-            <h2 className="h2 text-gray center-text h3">
-              Discover the power of IOTA through examples, guides, and concepts
-            </h2>
+        <div className={styles.backgroundImage}>
+          <div className="w-full mt-24 mb-12 mx-auto">
+            <div className={styles.heroText}>
+              <h1 className="text-5xl center-text text-white">
+                The complete reference for IOTA and Shimmer
+              </h1>
+              <h2
+                className="h2 text-gray center-text h3"
+                style={{ fontSize: "16px" }}
+              >
+                Build apps capable of taking millions of users on journeys
+                they’ve never been on before. Simple. Scalable. Secure.
+              </h2>
+              <Link
+                to="/guides#get-started-developing-on-iota"
+                className="button-cta"
+              >
+                Get started
+              </Link>
+            </div>
           </div>
         </div>
+
         <div className="flex flex-row flex-wrap justify-center gap-2 max-w-[1066px] mx-auto">
           <HomeCard title="About IOTA">
             <Link className={styles.cardLink} to="./concepts/tokenomics">

diff --git a/docs/site/src/pages/index.module.css b/docs/site/src/pages/index.module.css
@@ -13,15 +13,24 @@
   display: flex;
   flex-direction: column;
   row-gap: 2.5rem;
-  margin: 0 auto;
-  text-align: center;
-  width: 43.375rem;
-  max-width: 95%;
-  margin: 10rem auto;
+  margin-top: 10rem;
+  margin-left: 16rem;
+  padding-top: 2rem;
+  width: 400px;
+}
+.backgroundImage {
+  background: black url(../../static/img/heroTextBg.svg);
+  height: 27rem;
+  margin-top: -10rem;
+  background-position: right;
+  background-repeat: no-repeat;
+  background-size: 50% 100%;
+  margin-bottom: 2rem;
+  /* background-size: 50% 100%; */
 }
-
 .card,
 .cardCTA {
+  height: 480px;
   background-color: black;
   border: 1px solid;
   border-color: var(--iota-line);
@@ -30,7 +39,10 @@
   padding: 1.875rem;
   justify-content: space-between;
   border-radius: 30px;
-  height: 20.3125rem;
+  background: black url(../../static/img/heroCardg.svg);
+  background-position: top;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 .cardCTA {
   height: 100%;

diff --git a/docs/site/src/theme/Footer/Layout/index.js b/docs/site/src/theme/Footer/Layout/index.js
@@ -20,7 +20,10 @@ export default function FooterLayout({ style, links, logo, copyright }) {
   return (
     <footer className={styles.footer}>
       <div className={styles.footerWrap}>
-        <div className={styles.footerLogo}>{logo}</div>
+        <div className={styles.footerLogoWrap}>
+          <div className={styles.footerLogo}>{logo}</div>
+          <div className={styles.footerCopy}>{copyright}</div>
+        </div>
         <div className={styles.footerContent}>
           <div className={styles.footerLinks}>
             <Link to="https://discord.gg/IOTA">
@@ -86,7 +89,6 @@ export default function FooterLayout({ style, links, logo, copyright }) {
               </svg>
             </Link>
           </div>
-          <div className={styles.footerCopy}>{copyright}</div>
         </div>
       </div>
     </footer>

diff --git a/docs/site/src/theme/Footer/Layout/index.module.css b/docs/site/src/theme/Footer/Layout/index.module.css
@@ -1,15 +1,23 @@
 .footer {
-  background-color: var(--iota-dark-blue-bkg);
-  padding: 7.5rem 1rem;
+  background-color: black;
+  padding: 1rem;
 }
 
 .footerWrap {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   max-width: var(--iota-max-width-desktop);
   margin: 0 auto;
+  gap: 10rem;
 }
+.footerLogoWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+}
+
 .footerLogo a {
   opacity: 1;
 }
@@ -21,13 +29,13 @@
 .footerLinks {
   justify-content: flex-end;
   display: flex;
-  column-gap: .5rem;
+  column-gap: 0.5rem;
 }
 .footerCopy {
-  font-family: var(--monoFont);
-  font-size: .75rem;
+  /* font-family: var(--monoFont); */
+  font-size: 0.75rem;
   font-weight: 400;
-  line-height: .9375rem;
+  line-height: 0.9375rem;
   letter-spacing: -0.02em;
   text-align: left;
   color: var(--iota-gray);
@@ -51,6 +59,6 @@
   .footerLinks {
     justify-content: flex-start;
     display: flex;
-    column-gap: .5rem;
+    column-gap: 0.5rem;
   }
-}
+}
diff --git a/docs/site/src/theme/Navbar/Content/index.js b/docs/site/src/theme/Navbar/Content/index.js
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import React from "react";
-import Link from "@docusaurus/Link";
 import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
 import {
   splitNavbarItems,
@@ -79,14 +78,6 @@ export default function NavbarContent() {
           {!searchBarItem && (
             <NavbarSearch>
               <SearchBar />
-              {isHomePage && (
-                <Link
-                  to="/guides#get-started-developing-on-iota"
-                  className="button-cta"
-                >
-                  Get started
-                </Link>
-              )}
             </NavbarSearch>
           )}
         </>

diff --git a/docs/site/src/theme/Navbar/Content/styles.module.css b/docs/site/src/theme/Navbar/Content/styles.module.css
@@ -1,13 +1,6 @@
 /*
 Hide color mode toggle in small viewports
  */
-.navbar__items_wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex: 8;
-  column-gap: 4rem;
-}
 @media (max-width: 1100px) {
   .navbar__items_wrapper {
     column-gap: 2rem;

diff --git a/docs/site/static/img/heroCardg.svg b/docs/site/static/img/heroCardg.svg