expo · Simek · May 26, 2022 · May 26, 2022 · May 26, 2022
@@ -4,6 +4,8 @@ sidebar_title: Introduction
 hideTOC: true
 ---
 
+import { BoxLink } from '~/ui/components/BoxLink';
+
 **EAS Build** is a hosted service for building app binaries for your Expo and React Native projects.
 
 It makes building your apps for distribution simple and easy to automate by providing defaults that work well for Expo and React Native projects out of the box, and by handling your app signing credentials for you (if you wish). It also makes sharing builds with your team easier than ever with [internal distribution](internal-distribution.md) (using ad hoc and/or enterprise "universal" provisioning), deeply integrates with EAS Submit for app store submissions, and has first-class support for the [`expo-updates`](updates.md) library.
@@ -12,5 +14,6 @@ It's the next generation of the [`expo build:[ios/android]`](/distribution/build
 
 ### Get started
 
-- [Creating your first build](setup.md): it should only take a few minutes in total to get up and running for iOS and/or Android.
-- [Learning about the limitations](/build-reference/limitations.md): EAS Build is a new and rapidly evolving service, so we recommend getting familiar with the current limitations.
+<BoxLink title="Creating your first build" description="It should only take a few minutes in total to get up and running for iOS and/or Android." href="/build/setup" />
+
+<BoxLink title="Learning about the limitations" description="EAS Build is a new and rapidly evolving service, so we recommend getting familiar with the current limitations." href="/build-reference/limitations" />
@@ -4,12 +4,14 @@ sidebar_title: Introduction
 hideTOC: true
 ---
 
+import { BoxLink } from '~/ui/components/BoxLink';
+
 Expo Application Services (EAS) are deeply integrated cloud services for Expo and React Native apps, from the team behind Expo.
 
 Read the full pitch at [expo.dev/eas](https://expo.dev/eas), or follow the links below to learn how to get started.
 
-- **EAS Build**: Compile and sign Android/iOS apps with custom native code in the cloud. [Learn more](/build/introduction.md).
+<BoxLink title="EAS Build" description="Compile and sign Android/iOS apps with custom native code in the cloud. Learn more." href="/build/introduction" />
 
-- **EAS Submit**: Upload your app to the Apple App Store or Google Play Store from the cloud with one CLI command. [Learn more](/submit/introduction.md).
+<BoxLink title="EAS Submit" description="Upload your app to the Apple App Store or Google Play Store from the cloud with one CLI command. Learn more." href="/submit/introduction" />
 
-- **EAS Update** (preview): Address small bugs and push quick fixes directly to end-users. [Learn more](/eas-update/introduction.md).
+<BoxLink title="EAS Update (In Preview)" description="Address small bugs and push quick fixes directly to end-users. Learn more." href="/eas-update/introduction" />
@@ -4,11 +4,25 @@ sidebar_title: Introduction
 hideTOC: true
 ---
 
+import { InlineCode } from '~/components/base/code';
+import { BoxLink } from '~/ui/components/BoxLink';
+
 **EAS Submit** is a hosted service for uploading and submitting your app binaries to the Apple App Store and Google Play Store. Since it's a hosted service, you can submit your app to both stores as long as you can run EAS CLI on your machine. This means you can easily submit your iOS and Android apps from your macOS, Windows, or Linux workstation or from CI.
 
 ### Get started
 
-- [Submitting to the Apple App Store](ios.md): Learn how to submit an iOS/iPadOS app to the Apple App Store from any operating system.
-- [Submitting to the Google Play Store](android.md): Learn how to submit an Android app to the Google Play Store.
-- [Learn how to use EAS Submit with "expo build"](classic-builds.md): EAS Submit works with EAS Build projects by default, but it's easy to use EAS Submit to submit apps built with `expo build:[ios|android]` too.
-- [Configuration with eas.json](eas-json.md): See how to configure your submissions with **eas.json**.
+<BoxLink title="Submitting to the Apple App Store" description="Learn how to submit an iOS/iPadOS app to the Apple App Store from any operating system." href="/submit/ios" />
+
+<BoxLink title="Submitting to the Google Play Store" description="Learn how to submit an Android app to the Google Play Store." href="/submit/android" />
+
+<BoxLink 
+  title={'Learn how to use EAS Submit with "expo build"'} 
+  description="EAS Submit works with EAS Build projects by default, but it's easy to use EAS Submit to submit apps built with Classic Builds too."
+  href="/submit/ios"
+/>
+
+<BoxLink 
+  title="Configuration with eas.json" 
+  description={<>See how to configure your submissions with <InlineCode>eas.json</InlineCode>.</>}
+  href="/submit/eas-json"
+/>
@@ -0,0 +1,45 @@
+import { css } from '@emotion/react';
+import { borderRadius, spacing, theme, ArrowRightIcon, iconSize, shadows } from '@expo/styleguide';
+import React, { PropsWithChildren, ReactNode } from 'react';
+
+import { A, HEADLINE, P } from '~/ui/components/Text';
+
+type BoxLinkProps = PropsWithChildren<{
+  title: string;
+  description: string | ReactNode;
+  href?: string;
+  testID?: string;
+}>;
+
+export function BoxLink({ title, description, href, testID }: BoxLinkProps) {
+  return (
+    <A href={href} css={tileContainerStyle} data-testid={testID}>
+      <div>
+        <HEADLINE tag="span">{title}</HEADLINE>
+        <P>{description}</P>
+      </div>
+      <ArrowRightIcon css={iconStyle} color={theme.icon.secondary} />
+    </A>
+  );
+}
+
+const tileContainerStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  border: `1px solid ${theme.border.default}`,
+  borderRadius: borderRadius.medium,
+  padding: `${spacing[3]}px ${spacing[4]}px`,
+  marginBottom: spacing[3],
+
+  ':hover': {
+    boxShadow: shadows.micro,
+  },
+});
+
+const iconStyle = css({
+  alignSelf: 'center',
+  alignContent: 'flex-end',
+  minWidth: iconSize.regular,
+  marginLeft: spacing[3],
+});