Merge branch 'master' into reenabling-edit-gate

OffchainLabs · Sep 1, 2023 · f9d1d6c · f9d1d6c
2 parents dcce24c + 0535df6
commit f9d1d6c
Show file tree

Hide file tree

Showing 12 changed files with 378 additions and 245 deletions.
diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
@@ -1,112 +1,79 @@
 import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
 import Link from '@docusaurus/Link';
-import { useColorMode } from '@docusaurus/theme-common';
+
+import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
+  description: string;
   href?: string;
-  addBackground?: boolean;
-  animate?: boolean;
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Quickstart: Stylus',
     Svg: require('@site/static/img/stylus-logo.svg').default,
     href: '/stylus/stylus-quickstart',
-    description: <>Use Stylus to write an EVM-compatible smart contract in Rust.</>,
+    description: 'Use Stylus to write an EVM-compatible smart contract in Rust.',
   },
   {
     title: 'Quickstart: Build a dApp (Solidity)',
-    Svg: require('@site/static/img/cupcake.svg').default,
+    Svg: require('@site/static/img/cupcake_icon.svg').default,
     href: '/for-devs/quickstart-solidity-hardhat',
-    description: (
-      <>
-        Deploy a cupcake vending machine contract locally, then to Arbitrum Goerli, then to Arbitrum
-        Mainnet.
-      </>
-    ),
+    description:
+      'Deploy a cupcake vending machine contract locally, then to Arbitrum Goerli, then to Arbitrum Mainnet.',
   },
   {
     title: 'Quickstart: Run a node',
     Svg: require('@site/static/img/node.svg').default,
     href: '/node-running/quickstart-running-a-node',
-    description: <>Learn how to run a node to interact with any Arbitrum network.</>,
+    description: 'Learn how to run a node to interact with any Arbitrum network.',
   },
   {
     title: 'Quickstart: Bridge tokens',
-    Svg: require('@site/static/img/layer-up.svg').default,
+    Svg: require('@site/static/img/bridge_token.svg').default,
     href: '/getting-started-users',
-    description: (
-      <>
-        Learn how to transfer tokens between Ethereum's L1 chain and Arbitrum's L2 chains using
-        Arbitrum Bridge.
-      </>
-    ),
+    description:
+      "Learn how to transfer tokens between Ethereum's L1 chain and Arbitrum's L2 chains using Arbitrum Bridge.",
   },
   {
     title: 'The Arbitrum DAO',
-    Svg: require('@site/static/img/logo.svg').default,
+    Svg: require('@site/static/img/logo_black.svg').default,
     href: 'https://docs.arbitrum.foundation/',
-    description: (
-      <>Learn about the decentralized organization that governs the One and Nova chains.</>
-    ),
+    description: 'Learn about the decentralized organization that governs the One and Nova chains.',
   },
   {
     title: 'Quickstart: Launch an Orbit chain',
-    Svg: require('@site/static/img/orbit-galaxy.svg').default,
+    Svg: require('@site/static/img/quickstart.svg').default,
     href: '/launch-orbit-chain/orbit-quickstart',
-    description: (
-      <>
-        Learn how to launch a local Orbit chain that settles to the public Arbitrum Goerli testnet.
-      </>
-    ),
+    description:
+      'Learn how to launch a local Orbit chain that settles to the public Arbitrum Goerli testnet.',
   },
 ];
 
-function Feature({ title, Svg, description, href, addBackground, animate }: FeatureItem) {
-  const { colorMode } = useColorMode();
-  const isDarkTheme = colorMode === 'dark';
-  const textStyle = { color: isDarkTheme ? 'white' : 'black' };
+function Feature({ title, Svg, description, href }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')} id={animate && styles.animate}>
-      <Link className={styles.landingPageLink} href={href}>
-        <div className="text--center">
-          <Svg
-            style={
-              isDarkTheme && addBackground
-                ? {
-                    backgroundColor: 'lightblue',
-                    borderRadius: '25%',
-                  }
-                : {}
-            }
-            className={styles.featureSvg}
-            role="img"
-          />
+    <Link href={href}>
+      <div className={styles.featureCard}>
+        <div className={styles.svgWrapper}>
+          <Svg className={styles.featureSvg} role="img" />
         </div>
-        <div className="text--center padding-horiz--md info-box">
-          <h3 style={textStyle}> {title}</h3>
-          <p style={textStyle}>{description}</p>
-        </div>
-      </Link>
-    </div>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </Link>
   );
 }
 
 export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
+      <h3>Resources</h3>
+      <div className={styles.featureCardsWrapper}>
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
       </div>
     </section>
   );

diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
@@ -1,38 +1,86 @@
 .features {
   display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  flex-direction: column;
+  gap: 20px;
+  font-family: var(--arbitrum-font-family);
+  padding: 20px 20px 150px;
+  margin-top: 80px;
 }
 
-.featureSvg {
-  height: 150px;
-  width: 150px;
+.featureCardsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.featureCard {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100%;
+  color: var(--arbitrum-text);
+  background: var(--arbitrum-background-opacity);
+  padding: 20px 70px 20px 20px;
+  border-radius: var(--arbitrum-border-radius);
+}
+
+@media screen and (min-width: 1024px) {
+  .features {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr 3fr;
+    gap: 20px;
+  }
+  .featureCardsWrapper {
+    display: grid;
+    grid-template-columns: repeat(3, calc(33.33% - 20px * 2 / 3));
+  }
+  .featureCard {
+    padding: 20px 50px 20px 20px;
+  }
+}
+
+.features h3,
+.features p {
+  line-height: normal;
+  margin: 0;
 }
 
-.landingPageLink {
-  background-color: black;
-  color: black;
+.features h3 {
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.features p {
+  font-size: var(--arbitrum-font-size);
+  font-weight: 500;
+  opacity: 50%;
+}
+
+.features a:hover {
   text-decoration: none;
+  opacity: 80%;
 }
 
-#animate {
-  opacity: 0;
-  animation-duration: 1.2s;
-  animation-name: animate-pop;
-  animation-timing-function: cubic-bezier(0.23, 0.53, 0.74, 2.2);
-  animation-delay: 0.8s;
-  animation-fill-mode: forwards;
+.features a:nth-child(1) .featureCard {
+  background: var(--arbitrum-color-primary);
 }
 
-@keyframes animate-pop {
-  0% {
-    opacity: 0;
-    transform: scale(0.1, 0.1);
-  }
+.svgWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  background: var(--arbitrum-background-opacity);
+  border-radius: var(--arbitrum-border-radius-sm);
+}
 
-  100% {
-    opacity: 1;
-    transform: scale(1, 1);
-  }
+.featureSvg {
+  height: 24px;
+  width: 24px;
+}
+
+:global([data-theme='dark']) .featureSvg {
+  filter: invert(1);
 }