Add heroCard bg svg and fixes

docs/site/docusaurus.config.js

@@ -201,8 +201,8 @@ const config = {
       footer: {
         logo: {
           alt: "IOTA Wiki Logo",
-          src: "img/IOTA-logo.svg",
-          srcDark: "img/IOTA-logo.svg",
+          src: "img/iota-logo.svg",
+          srcDark: "img/iota-logo.svg",
           width: 138,
           height: 48,
         },

docs/site/src/pages/index.js

@@ -7,12 +7,21 @@ import React from "react";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import styles from "./index.module.css";
+import heroCardBg from "@site/static/img/heroCardBg.png";
+import heroCardBg1 from "@site/static/img/heroCardBg1.png";
+import heroCardBg2 from "@site/static/img/heroCardBg2.png";
 export default function Home() {
   const HomeCard = (props) => {
-    const { title, children } = props;
+    const { title, children, heroCardBg } = props;
+
     return (
       <div className={`p-px col-span-3 w-[350px]`}>
-        <div className={styles.card}>
+        <div
+          className={styles.card}
+          style={{
+            background: `black url(${heroCardBg}) no-repeat top`,
+          }}
+        >
           {title && <h4 className="h4 text-white">{title}</h4>}
           <div className={styles.cardLinksContainer}>{children}</div>
         </div>
@@ -23,7 +32,12 @@ export default function Home() {
     const { children } = props;
     return (
       <div className={`p-px col-span-3 w-[350px]`}>
-        <div className={styles.cardCTA}>
+        <div
+          className={styles.cardCTA}
+          style={{
+            background: `black url(${heroCardBg}) no-repeat top`,
+          }}
+        >
           <div className={styles.cardLinksContainer}>{children}</div>
         </div>
       </div>
@@ -36,6 +50,7 @@ export default function Home() {
         background: "var(--iota-black)",
       }}
     >
+      {" "}
       <div className="bg-iota-black overflow-hidden">
         <div className={styles.backgroundImage}>
           <div className="w-full mt-24 mb-12 mx-auto">
@@ -61,7 +76,7 @@ export default function Home() {
         </div>
 
         <div className="flex flex-row flex-wrap justify-center gap-2 max-w-[1066px] mx-auto">
-          <HomeCard title="About IOTA">
+          <HomeCard title="About IOTA" heroCardBg={heroCardBg}>
             <Link className={styles.cardLink} to="./concepts/tokenomics">
               Tokenomics
             </Link>
@@ -72,7 +87,7 @@ export default function Home() {
               Standards
             </Link>
           </HomeCard>
-          <HomeCard title="Developers">
+          <HomeCard title="Developers" heroCardBg={heroCardBg1}>
             <Link
               className={styles.cardLink}
               to="./guides/developer/getting-started"
@@ -89,7 +104,10 @@ export default function Home() {
               Move
             </Link>
           </HomeCard>
-          <HomeCard title="Validators and Node operators">
+          <HomeCard
+            title="Validators and Node operators"
+            heroCardBg={heroCardBg2}
+          >
             <Link
               className={styles.cardLink}
               to="./guides/operator/validator-config"
@@ -104,7 +122,7 @@ export default function Home() {
               <span className="block bg-auto bg-[url(../static/img/index/right-arrow.svg)]"></span>
             </Link>
           </HomeCard>
-          <HomeCard title="References" aux>
+          <HomeCard title="References" aux heroCardBg={heroCardBg1}>
             <Link
               className={styles.cardLink}
               to="https://sdk.mystenlabs.com/dapp-kit?ref=blog.iota.io"
@@ -127,7 +145,7 @@ export default function Home() {
               Rust SDK (GitHub)
             </Link>
           </HomeCard>
-          <HomeCard title="Resources" aux>
+          <HomeCard title="Resources" aux heroCardBg={heroCardBg2}>
             <Link
               className={styles.cardLink}
               to="https://iota.directory/?_project_type=api%2Cdeveloper-tools%2Cinfrastructure%2Csdk"

docs/site/src/pages/index.module.css

@@ -26,23 +26,71 @@
   background-repeat: no-repeat;
   background-size: 50% 100%;
   margin-bottom: 2rem;
-  /* background-size: 50% 100%; */
+}
+
+@media (max-width: 1000px) {
+  .backgroundImage {
+    background-size: 77% 99%;
+  }
+}
+@media (max-width: 1100px) {
+  .backgroundImage {
+    background-size: 75% 100%;
+  }
+}
+@media (max-width: 2000px) {
+  .backgroundImage {
+    background-size: 40% 100%;
+  }
+}
+@media (max-width: 1700px) {
+  .backgroundImage {
+    background-size: 50% 100%;
+  }
+}
+@media (max-width: 800px) {
+  .backgroundImage {
+    background-size: 77% 99%;
+  }
+  .heroText {
+    padding-top: 5rem;
+    padding-left: 4rem;
+  }
+}
+@media (max-width: 1200px) and (min-width: 900px) {
+  .backgroundImage {
+    background-size: 83% 100%;
+  }
+}
+@media (max-width: 1000px) and (min-width: 900px) {
+  .backgroundImage {
+    background-size: 77% 99%;
+  }
+}
+@media (max-width: 899px) and (min-width: 799px) {
+  .backgroundImage {
+    background-size: 94% 107%;
+  }
+}
+
+@media (max-width: 1100px) and (min-width: 1200px) {
+  .backgroundImage {
+    background-size: 75% 100%;
+  }
 }
 .card,
 .cardCTA {
   height: 480px;
-  background-color: black;
   border: 1px solid;
   border-color: var(--iota-line);
   display: flex;
   flex-direction: column;
   padding: 1.875rem;
   justify-content: space-between;
   border-radius: 30px;
-  background: black url(../../static/img/heroCardg.svg);
   background-position: top;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 101% 60%;
 }
 .cardCTA {
   height: 100%;

docs/site/src/theme/SearchBar/styles.css

@@ -3,6 +3,13 @@
   --docsearch-text-color: var(--ifm-font-color-base);
 }
 
+html[data-theme="light"] .DocSearch-Button:hover {
+  margin: 0;
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  background-color: var(--iota-black);
+}
+
 .DocSearch-Button {
   margin: 0;
   transition: all var(--ifm-transition-fast)