docs: fix sponsored by breaking mobile view on home page and add carbon ads on home page

Author: danielbarion

docs/src/components/HomepageSponsored/styles.module.css

@@ -1,8 +1,6 @@
 .features {
   display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  flex-direction: column;
 }
 
 .featureSvg {
@@ -15,3 +13,13 @@
   display: flex;
   justify-content: center;
 }
+
+@media screen and (min-width: 1024px) {
+  .features {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding: 2rem 0;
+    width: 100%;
+  }
+}

docs/src/pages/index.module.css

@@ -10,6 +10,62 @@
   overflow: hidden;
 }
 
+.heroAds {
+  position: absolute;
+  left: 0;
+  top: 12px;
+}
+
+@media screen and (min-width: 375px) {
+  .heroAds {
+    top: 4rem;
+  }
+}
+
+@media screen and (min-width: 425px) {
+  .heroAds {
+    left: unset;
+    top: 8px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .heroAds {
+    transform: translateX(calc(50% - 30px));
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .heroAds {
+    top: 10rem;
+    transform: unset;
+  }
+}
+
+@media screen and (min-width: 1256px) {
+  .heroAds {
+    left: 4rem;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .heroAds {
+    left: 8rem;
+  }
+}
+
+@media screen and (min-width: 2000px) {
+  .heroAds {
+    left: 16rem;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .heroAds {
+    left: 32rem;
+  }
+}
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;

docs/src/pages/index.tsx

@@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
 import HomepageSponsored from '@site/src/components/HomepageSponsored'
+import AdsContainerElement from '@site/src/components/AdsContainerElement'
 
 import styles from './index.module.css'
 
@@ -28,6 +29,9 @@ function HomepageHeader() {
           </Link>
         </div>
       </div>
+      <div className={styles.heroAds}>
+        <AdsContainerElement />
+      </div>
     </header>
   )
 }