feat: improve wallets overview page with responsive hero images and b…

docs/pages/index.mdx

@@ -4,137 +4,115 @@ description: Build zero-friction user onboarding and transactions end-to-end wit
 slug: wallets
 ---
 
-<img src="/images/wallets/overviewHeader.png" alt="smart wallets overview" />
+<style>{`
+.fern-card {
+  font-size: 14px;
+}
 
-<div
-  style={{
-    display: "flex",
-    justifyContent: "center",
-    marginBottom: "2rem",
-    gap: "1.5rem",
-  }}
->
-  <Button
-    icon="bolt"
-    href="/wallets/react/quickstart"
-    style={{
-      backgroundColor: "var(--accent-2, #ECF3FF)",
-      padding: "2rem",
-      fontSize: "1rem",
-    }}
-  >
-    React Quickstart
-  </Button>
-  <Button
-    icon="fa-regular fa-play"
+/* Responsive hero images */
+.hero-image-desktop {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 1010px;
+  margin: 0 auto;
+}
+`}</style>
+
+<img
+  src="/images/wallets/overviewHeader.png"
+  alt="smart wallets overview"
+  className="hero-image-desktop"
+/>
+
+<CardGroup cols={2}>
+  <Card title="React Quickstart" icon="bolt" href="/wallets/react/quickstart">
+    Build an onchain app from scratch with wallets and transactions.
+  </Card>
+  <Card
+    title="Try demo"
+    icon="fa-solid fa-play"
     href="https://demo.alchemy.com/"
-    style={{
-      backgroundColor: "#363FF9",
-      color: "white",
-      padding: "2rem 2rem",
-      fontSize: "1rem",
-    }}
-  >
-    Try our demo
-  </Button>
-</div>
+  >
+    See Smart Wallets in action with an interactive demo.
+  </Card>
+</CardGroup>
 
 ## Everything you need for onchain applications
 
 <CardGroup cols={2}>
   <Card
     small
-    title="Seamless user onboarding"
+    title="User onboarding"
     icon="user-plus"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/authentication/login-methods/email-otp"
   >
     Email, social, biometric, or EOA login.
   </Card>
   <Card
     title="Gasless transactions"
     icon="gas-pump"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/transactions/sponsor-gas/sponsor-gas"
   >
     Remove gas fees for users to drive transaction growth.
   </Card>
+  <Card
+    title="Batching"
+    icon="bolt"
+    href="/wallets/transactions/send/batch-user-operations"
+  >
+    Multiple transactions in one click on EVM and Solana.
+  </Card>
   <Card
     title="Whitelabel UI"
     icon="fa-solid fa-pencil"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/react/customization/theme"
   >
     Pre-built UI components and fully whitelabel solutions.
   </Card>
   <Card
-    title="Security at scale"
+    title="Funding flows"
     icon="shield"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
+    href="/wallets/pages/funding/signup"
   >
-    Non-custodial security and built-in compliance.
+    Instant fiat onramping for payments.
   </Card>
   <Card
-    title="Powerful wallet policies"
+    title="Secure policy engine"
     icon="sliders"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/signer/policies/overview"
   >
     Set permissions and automations across chains.
   </Card>
-  <Card
-    title="Batching"
-    icon="bolt"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
-    href="/wallets/transactions/send/batch-user-operations"
-  >
-    Multiple transactions in one click on EVM and Solana.
-  </Card>
 </CardGroup>
 
 ## Frameworks
 
-Use the SDK for everything or pick and choose the pieces you want for ultimate control over your stack.
-
 <CardGroup cols={2}>
   <Card
     title="React"
     icon="fa-brands fa-react"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/react/quickstart"
   >
     Pre-built React components and hooks.
   </Card>
   <Card
     title="React Native"
     icon="fa-brands fa-react"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/react-native/overview"
   >
     Native mobile wallet experiences.
   </Card>
   <Card
     title="Other Javascript Frameworks"
     icon="fa-brands fa-js"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/core/overview"
   >
     Framework-agnostic implementation.
   </Card>
   <Card
     title="APIs"
     icon="fa-solid fa-code"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/reference/smart-wallet-quickstart"
   >
     Server-side wallet management.
@@ -144,38 +122,26 @@ Use the SDK for everything or pick and choose the pieces you want for ultimate c
 ## Common starting places
 
 <CardGroup cols={2}>
-  <Card
-    title="Build a new app"
-    icon="wrench"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
-    href="/wallets/react/quickstart"
-  >
+  <Card title="Build a new app" icon="wrench" href="/wallets/react/quickstart">
     Build an onchain app from scratch with wallets and transactions.
   </Card>
   <Card
     title="Upgrade existing wallets"
     icon="fa-solid fa-chevrons-up"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/react/using-7702"
   >
     Upgrade to smart wallets using EIP-7702 or direct wagmi integration.
   </Card>
   <Card
     title="Bring your app onchain"
     icon="fa-regular fa-globe-pointer"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/authentication/login-methods/bring-your-own-auth"
   >
     Add wallet and transaction functionality to existing web2 applications.
   </Card>
   <Card
     title="Manage wallets in backend"
     icon="fa-solid fa-server"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/reference/smart-wallet-quickstart"
   >
     Server-side applications with signing and sending on your backend.
@@ -188,26 +154,20 @@ Use the SDK for everything or pick and choose the pieces you want for ultimate c
   <Card
     title="Support"
     icon="fa-solid fa-question"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/resources/faqs"
   >
     Troubleshoot issues or get in touch.
   </Card>
   <Card
     title="Recipes"
     icon="fa-solid fa-book"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="/wallets/recipes/overview"
   >
     Implement common features with end-to-end guides.
   </Card>
   <Card
     title="Pricing"
     icon="fa-solid fa-dollar-sign"
-    iconPosition="left"
-    style={{ textAlign: "left", alignItems: "flex-start" }}
     href="https://wallet-calculator.alchemy.com/"
   >
     Save costs as you scale.