add buy klima view to dapp

app/components/BalancesCard/index.tsx

@@ -46,7 +46,7 @@ export const BalancesCard: FC<Props> = (props) => {
           <AccountBalanceOutlined />
           <Trans id="shared.balances">Balances</Trans>
         </Text>
-        <InfoButton content={props.tooltip} />
+        {props.tooltip && <InfoButton content={props.tooltip} />}
       </div>
       <div className="cardContent">
         {props.assets.map((asset) => (

app/components/NavMenu/index.tsx

@@ -16,7 +16,10 @@ import {
 import { urls } from "@klimadao/lib/constants";
 import { concatAddress } from "@klimadao/lib/utils";
 import { Trans } from "@lingui/macro";
-import { AccountBalanceWalletOutlined } from "@mui/icons-material";
+import {
+  AccountBalanceWalletOutlined,
+  CreditCardOutlined,
+} from "@mui/icons-material";
 import FlipOutlined from "@mui/icons-material/FlipOutlined";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import LibraryAddOutlined from "@mui/icons-material/LibraryAddOutlined";
@@ -156,6 +159,14 @@ export const NavMenu: FC<Props> = (props) => {
         <Address domains={domains} address={props.address} />
         <div className="hr" />
       </div>
+      <MenuButton
+        isActive={pathname === "/buy"}
+        href="/buy"
+        icon={<CreditCardOutlined />}
+        onClick={handleHide}
+      >
+        <Trans id="menu.buy_klima">Buy KLIMA</Trans>
+      </MenuButton>
       <MenuButton
         isActive={pathname === "/stake"}
         href="/stake"

app/components/views/Buy/index.tsx

@@ -1,87 +1,115 @@
-import { t, Trans } from "@lingui/macro";
-import Payment from "@mui/icons-material/Payment";
-import { providers } from "ethers";
-
 import { Anchor, ButtonPrimary, Text } from "@klimadao/lib/components";
 import { urls } from "@klimadao/lib/constants";
-import { useWeb3 } from "@klimadao/lib/utils";
-import LoginIcon from "@mui/icons-material/Login";
+import { Trans, t } from "@lingui/macro";
+import { CelebrationOutlined, TrendingUpOutlined } from "@mui/icons-material";
+import Payment from "@mui/icons-material/Payment";
 import { BalancesCard } from "components/BalancesCard";
 import { DisclaimerModal } from "components/DisclaimerModal";
 import { ImageCard } from "components/ImageCard";
-import * as styles from "../styles";
+import * as styles from "./styles";
 
-interface Props {
-  provider?: providers.JsonRpcProvider;
-  address?: string;
-  isConnected: boolean;
-}
+export const Buy = () => (
+  <>
+    <DisclaimerModal />
+    <BalancesCard assets={["klima", "sklima"]} tooltip={undefined} />
+    <ImageCard />
 
-export const Buy = (props: Props) => {
-  const { toggleModal } = useWeb3();
-  return (
-    <>
-      <DisclaimerModal />
-      <div className={styles.ctaCard}>
-        <div className={styles.ctaCard_header}>
-          {props.isConnected && props.address ? (
-            <div>
-              <Text t="h4" className={styles.ctaCard_header_title}>
-                <Payment />
-                <Trans id="buy.buy_klima">Buy KLIMA</Trans>
-              </Text>
-              <Text t="caption" className={styles.ctaCard_header_subtitle}>
-                <Trans id="buy.cta_1">
-                  If you are a beginner, we recommend following our step-by-step
-                  tutorial: <Anchor href={urls.buy}>How to Buy KLIMA</Anchor>.
-                </Trans>
-              </Text>
-              <Text t="caption" className={styles.ctaCard_header_subtitle}>
-                <Trans id="buy.cta_2">
-                  Otherwise, if you already have a wallet with MATIC on Polygon,
-                  the best way to get KLIMA is to swap on{" "}
-                  <Anchor href={urls.sushiSwap}>Sushi.com</Anchor>. If you
-                  prefer to pay with a credit card instead, you can use{" "}
-                  <Anchor href={urls.transakMatic}>Transak</Anchor> to buy KLIMA
-                  directly.
-                </Trans>
-              </Text>
-            </div>
-          ) : (
-            <>
-              <Text t="h4" className={styles.ctaCard_header_title}>
-                <LoginIcon />
-                <Trans id="buy.please_log_in">
-                  Please Log In Or Connect A Wallet
-                </Trans>
-              </Text>
-              <Text t="body2">
-                <Trans id="buy.connect_to_buy" comment="Long sentence">
-                  This feature is available only to users who are logged in. You
-                  can log in or create an account via the button below.
-                </Trans>
-              </Text>
-              <ButtonPrimary
-                label={t({
-                  id: "shared.login_connect",
-                  message: "Login / Connect",
-                })}
-                onClick={toggleModal}
-              />
-            </>
-          )}
+    <div className={styles.card}>
+      <div className={styles.cardCol}>
+        <Text t="h5" className={styles.cardTitle}>
+          <Payment />
+          <Trans>Buy KLIMA</Trans>
+        </Text>
+        <Text color="lightest" t="caption" className={styles.cardDescription}>
+          <Trans>
+            Easily buy or sell KLIMA with low slippage and deep liquidity on{" "}
+            <Anchor href={urls.aerodrome} target="_blank">
+              Aerodrome
+            </Anchor>
+            .
+          </Trans>
+        </Text>
+      </div>
+      <div className={styles.cardRow}>
+        <div className={styles.buttons}>
+          <ButtonPrimary
+            target="_blank"
+            href={urls.buyOnAerodrome}
+            label={t`Buy Klima on Aerodrome`}
+          />
+          <Anchor
+            target="_blank"
+            href={urls.learnMoreLPs}
+            className="learn-more"
+          >
+            <Trans>Learn more about liquidity pools</Trans>
+          </Anchor>
         </div>
       </div>
-      <BalancesCard
-        assets={["klima", "sklima"]}
-        tooltip={
-          <Trans id="stake.balancescard.tooltip" comment="Long sentence">
-            Stake your KLIMA tokens to receive sKLIMA. After every rebase, your
-            sKLIMA balance will increase by the given percentage.
-          </Trans>
-        }
-      />
-      <ImageCard />
-    </>
-  );
-};
+      <div className={styles.divider} />
+      <div className={styles.cardRow}>
+        <div className={styles.cardCol}>
+          <Text t="h5" className={styles.cardTitle}>
+            <TrendingUpOutlined />
+            <Trans>Put your KLIMA to work</Trans>
+          </Text>
+          <Text color="lightest" t="caption" className={styles.cardDescription}>
+            <Trans>
+              Head to{" "}
+              <Anchor href={urls.klimaBase} target="_blank">
+                base.klimadao.finance
+              </Anchor>{" "}
+              to programmatically grow your position.
+            </Trans>
+          </Text>
+        </div>
+      </div>
+      <div className={styles.cardRow}>
+        <div className={styles.buttons}>
+          <ButtonPrimary
+            target="_blank"
+            href={urls.klimaAutocompounder}
+            label={t`KlimaDAO Autocompounder`}
+            className="secondary-button"
+          />
+          <Anchor
+            target="_blank"
+            href={urls.learnMoreKlimaAutocompounder}
+            className="learn-more"
+          >
+            <Trans>Learn more about Autocompounder</Trans>
+          </Anchor>
+        </div>
+      </div>
+      <div className={styles.cardRow}>
+        <div className={styles.cardMessage}>
+          <div className="title">
+            <CelebrationOutlined
+              fontSize="large"
+              htmlColor="var(--klima-green)"
+            />
+            <Text t="body3">
+              <Trans>
+                Announcing KlimaDAO 2.0: A Decentralized Carbon Market!
+              </Trans>
+            </Text>
+          </div>
+          <Text t="caption" color="lightest" className="description">
+            <Trans>
+              KlimaDAO 2.0 represents a fundamental redesign of decentralized
+              market infrastructure for carbon monetization, retirement, and
+              offsets. While KlimaDAO has established a brand presence and
+              accumulated substantial carbon assets, the 2.0 model introduces
+              sophisticated mechanisms to become the dominant liquidity venue
+              for carbon on-chain by releasing the Klima X Automated Market
+              Maker (AMM).
+            </Trans>
+          </Text>
+          <Anchor href={urls.learnMoreKlima2_0} target="_blank">
+            <Trans>Read more about KlimaDAO 2.0</Trans>
+          </Anchor>
+        </div>
+      </div>
+    </div>
+  </>
+);

app/components/views/Buy/styles.ts

@@ -0,0 +1,137 @@
+import { css } from "@emotion/css";
+import breakpoints from "@klimadao/lib/theme/breakpoints";
+
+export const card = css`
+  position: relative;
+  display: grid;
+  background-color: var(--surface-02);
+  border-radius: 1.2rem;
+  padding: 2.4rem;
+  gap: 2.4rem;
+  align-content: start;
+  grid-column: 1 / 3;
+  grid-template-rows: unset !important;
+  height: fit-content;
+
+  & a {
+    text-decoration: underline;
+  }
+
+  ${breakpoints.desktop} {
+    grid-column: cardsleft;
+    grid-row: 2 / span 2;
+    grid-template-rows: 1fr 1fr 1fr;
+    align-items: start;
+  }
+
+  ${breakpoints.desktopLarge} {
+    padding: 3.2rem;
+  }
+`;
+
+export const cardMessage = css`
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  border-radius: 1.2rem;
+  border: 0.1rem solid var(--surface-03);
+
+  & .title {
+    gap: 1rem;
+    display: flex;
+    font-weight: 600;
+    flex-direction: row;
+    align-items: center;
+
+    & svg {
+      width: 2.4rem;
+      height: 2.4rem;
+    }
+  }
+
+  & .description {
+    font-weight: 500;
+    font-size: 1.4rem;
+    line-height: 2rem;
+  }
+
+  a {
+    font-weight: 500;
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+    text-decoration: underline;
+  }
+
+  ${breakpoints.desktopLarge} {
+    margin-top: 2.4rem;
+  }
+`;
+
+export const buttons = css`
+  gap: 1rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .secondary-button {
+    background-color: var(--white);
+  }
+
+  a {
+    flex: 1;
+    width: 100%;
+    padding: 0;
+    font-size: 1.4rem;
+    text-decoration: none;
+    letter-spacing: unset;
+
+    &.learn-more {
+      letter-spacing: unset;
+      text-transform: none;
+      text-decoration: underline;
+    }
+  }
+
+  ${breakpoints.desktopLarge} {
+    gap: 2rem;
+    flex-direction: row;
+  }
+`;
+
+export const cardCol = css`
+  gap: 0.8rem;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const cardRow = css`
+  gap: 0.8rem;
+  display: flex;
+  flex-direction: row;
+`;
+
+export const divider = css`
+  width: 100%;
+  height: 0.1rem;
+  margin: 2.4rem 0 0.6rem;
+  background: #393939;
+`;
+
+export const cardTitle = css`
+  gap: 1.2rem;
+  display: flex;
+  font-weight: 600;
+  align-items: center;
+  font-weight: 500;
+  line-height: 2.8rem;
+  font-size: 2.4rem !important;
+`;
+
+export const cardDescription = css`
+  font-weight: 500;
+  font-size: 1.4rem !important;
+  line-height: 1.8rem !important;
+`;

app/components/views/Home/index.tsx

@@ -70,7 +70,7 @@ export const Home: FC = () => {
 
   useEffect(() => {
     if (pathname === "/") {
-      window.location.replace(`/#/stake${window.location.search}`);
+      window.location.replace(`/#/buy${window.location.search}`);
     }
   }, [pathname]);
 
@@ -189,16 +189,7 @@ export const Home: FC = () => {
             })}
           </div>
           <IsomorphicRoutes>
-            <Route
-              path="/buy"
-              element={
-                <Buy
-                  address={address}
-                  provider={provider}
-                  isConnected={isConnected}
-                />
-              }
-            />
+            <Route path="/buy" element={<Buy />} />
             <Route
               path="/stake"
               element={