From 26bcdc2e0748f75d77d02f5a44309a065cf341d1 Mon Sep 17 00:00:00 2001
From: Brendan Forster <brendan.forster@coinbase.com>
Date: Fri, 19 Jul 2024 15:31:52 -0700
Subject: [PATCH] simplified Hero component

---
 apps/base-docs/src/components/Hero/index.tsx  | 67 +------------
 .../src/components/Hero/styles.module.css     | 94 -------------------
 2 files changed, 4 insertions(+), 157 deletions(-)
 delete mode 100644 apps/base-docs/src/components/Hero/styles.module.css

diff --git a/apps/base-docs/src/components/Hero/index.tsx b/apps/base-docs/src/components/Hero/index.tsx
index 5bc0e3bd8b..8f503cc385 100644
--- a/apps/base-docs/src/components/Hero/index.tsx
+++ b/apps/base-docs/src/components/Hero/index.tsx
@@ -1,68 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
-import styles from './styles.module.css';
-import BarChart from './BarChart/BarChart';
+import ControlHero from './ControlHero';
+import TreatmentHero from './TreatmentHero';
 
 export default function Hero() {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleWindowResize = () => setWindowWidth(window.innerWidth);
-    window.addEventListener('resize', handleWindowResize);
-    return () => window.removeEventListener('resize', handleWindowResize);
-  }, []);
-
-  if (windowWidth <= 500) {
-    return <MobileHero />;
-  }
-  return <DesktopHero />;
-}
-
-function DesktopHero() {
-  return (
-    <header className={styles.heroContainer}>
-      <div>
-        <h1 className={styles.heroTitle}>Build onchain</h1>
-      </div>
-      <div className={styles.chartContainer}>
-        <BarChart />
-      </div>
-      <div className={styles.secondaryContentContainer}>
-        <div>
-          <div className={styles.ctaText}>
-            Keep your costs low and save on gas with every transaction when you build on Base.
-          </div>
-          <button className={styles.ctaButton}>
-            <a href="/docs">LEARN MORE</a>
-          </button>
-        </div>
-        <div className={styles.secondaryTitleContainer}>
-          <h1 className={styles.heroTitle}>for less</h1>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-function MobileHero() {
-  return (
-    <header className={styles.heroContainer}>
-      <div className={styles.titleContainer}>
-        <h1 className={styles.heroTitle}>Build onchain for less</h1>
-      </div>
-      <div className={styles.chartContainerMobile}>
-        <BarChart />
-      </div>
-      <div className={styles.secondaryContentContainerMobile}>
-        <div className={styles.ctaContainer}>
-          <div className={styles.ctaText}>
-            Keep your costs low and save on gas with every transaction when you build on Base.
-          </div>
-          <button className={styles.ctaButton}>
-            <a href="/docs">LEARN MORE</a>
-          </button>
-        </div>
-      </div>
-    </header>
-  );
+  return <ControlHero />;
+  //   return <TreatmentHero />;
 }
diff --git a/apps/base-docs/src/components/Hero/styles.module.css b/apps/base-docs/src/components/Hero/styles.module.css
deleted file mode 100644
index 4542c32bce..0000000000
--- a/apps/base-docs/src/components/Hero/styles.module.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.heroContainer {
-    background-color: #0052FF;
-    width: 100%;
-    margin: 0 auto;
-    padding: 30px 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: 30px;
-}
-
-.heroTitle {
-    font-family: CoinbaseDisplay;
-    color: white;
-    font-size: 125px;
-    line-height: 1.1;
-    font-weight: 400;
-}
-
-.chartContainer, .secondaryContentContainer {
-    margin: 0 20px 0 10px;
-    width: 100%;
-}
-
-.chartContainerMobile {
-    margin-right: 20px;
-    width: 100%
-}
-
-.secondaryContentContainer {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-}
-
-.secondaryContentContainerMobile {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.ctaText {
-    max-width: 425px;
-    font-size: 17px;
-    font-family: CoinbaseSans;
-    margin-bottom: 20px;
-}
-
-.ctaButton {
-    height: 44px;
-    width: 164px;
-    background-color: white;
-    color: #1D1818;
-    font-size: 16px;
-    font-family: CoinbaseMono;
-    font-weight: 500;
-    text-align: center;
-}
-
-.secondaryTitleContainer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-}
-
-@media screen and (max-width: 1200px) {
-    .heroTitle {
-        font-size: 100px;
-    }
-    .heroContainer {
-        padding: 20px 30px;
-    }
-}
-@media screen and (max-width: 850px) {
-    .heroTitle {
-        font-size: 80px;
-    }
-    .heroContainer {
-        padding: 15px 20px;
-        gap: 10px;
-    }
-}
-@media screen and (max-width: 610px) {
-    .heroTitle {
-        font-size: 60px;
-    }
-    .heroContainer {
-        padding: 10px 15px;
-    }
-}
-@media screen and (max-width: 400px) {
-    .heroTitle {
-        font-size: 50px;
-    }
-}