homepage redesign

reown-com · Jan 2, 2025 · 787c564 · 787c564
1 parent b035e6a
commit 787c564
Show file tree

Hide file tree

Showing 24 changed files with 423 additions and 53 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -65,7 +65,7 @@
       "qrcode", "ECDH", "ciphertext", "HMAC", "mutez", "rebranded", "clickjacking", "openupm", "walletids", "walletid", "Keyserver", "CAPI",
       "Newtonsoft", "mainnets", "Netherum's", "Starscream", "lokijs", "linkining", "themself", "triggermodal", "Coinbasewallet", "bera", "UXML", "preconfigured",
       "Rebalancing", "hackathons", "eviluniswap", "permissioned", "Diffie", "prioritise", "synchronise", "scriptable", "dedup", "Zora", "Fraximal", "Podspec", "Wormfare",
-      "johnsmith", "secp", "reimagined", "tgvideo", "solflare", "WBIPs", "xverse", "mycustomwallet", "seedphrases", "Pimlico", "signup"
+      "johnsmith", "secp", "reimagined", "tgvideo", "solflare", "WBIPs", "xverse", "mycustomwallet", "seedphrases", "Pimlico", "signup", "onramps"
     ]
   }
 
diff --git a/docs/appkit/migration/index.mdx b/docs/appkit/migration/index.mdx
@@ -0,0 +1,39 @@
+---
+title: Migrate from Alternative Libraries
+pagination_next: 
+pagination_prev:
+---
+
+import Wrapper from '../../components/Home/Wrapper.js'
+import rainbowkitLogo from '../../../static/assets/home/rainbow.png'
+import connectkitLogo from '../../../static/assets/home/family.png'
+import anzaLogo from '../../../static/assets/home/anza.png'
+
+
+
+## Migrate from
+
+<Wrapper
+  type="large"
+  fit={false}
+  items={[
+    {
+      name: 'RainbowKit',
+      description: 'Migrate from RainbowKit to Reown AppKit.',
+      icon: rainbowkitLogo,
+      href: './from-rainbowkit-next'
+    },
+    {
+      name: 'ConnectKit',
+      description: 'Migrate from ConnectKit to Reown AppKit.',
+      icon: connectkitLogo,
+      href: './from-connectkit-next'
+    },
+    {
+      name: 'Anza Adapter',
+      description: 'Migrate from Solana Anza Adapter to Reown AppKit.',
+      icon: anzaLogo,
+      href: './from-anza-adapter-react'
+    }
+  ]}
+/>
diff --git a/docs/components/Home/Banner.js b/docs/components/Home/Banner.js
@@ -6,16 +6,10 @@ const Banner = () => {
   return (
     <div className={styles.banner__container}>
       <div className={styles.banner__text}>
-        <h2>Reown Docs</h2>
+        <h2>Reown</h2>
         <p>
-        Reown gives developers the tools to build user experiences that make digital ownership effortless, intuitive, and secure.
-        </p>
-        <Link className=".blue__button" to="appkit/overview">
-          Start Building
-        </Link>
+        Reown is a UX-focused company that provides toolkits – AppKit and WalletKit – for anyone building onchain to leverage and unlock better UX.        </p>
       </div>
-      <img className={styles.banner__image} src='/reown/banner-image.svg#dark-mode-only' alt="Reown Banner" />
-      <img className={styles.banner__image} src='/reown/banner-image-light.svg#light-mode-only' alt="Reown Banner" />
     </div>
   )
 }

diff --git a/docs/components/Home/CenteredContainer.js b/docs/components/Home/CenteredContainer.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+
+const CenteredContainer = ({ href, name, icon, description }) => {
+  return (
+    <Link to={href} className="home__centered-container">
+      <img src={icon} alt={name} />
+      <h4>{name}</h4>
+      <p>{description}</p>
+    </Link>
+  )
+}
+
+export default CenteredContainer
diff --git a/docs/components/Home/SupportContainer.js b/docs/components/Home/SupportContainer.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+
+const SupportContainer = ({ href, name, icon, description }) => {
+  return (
+    <Link to={href} className="home__support-container">
+      <img src={icon} alt={name} />
+      <h4>{name}</h4>
+      <p>{description}</p>
+    </Link>
+  )
+}
+
+export default SupportContainer
diff --git a/docs/components/Home/Wrapper.js b/docs/components/Home/Wrapper.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import SmallContainer from './SmallContainer'
 import LargeContainer from './LargeContainer'
+import CenteredContainer from './CenteredContainer'
+import SupportContainer from './SupportContainer'
 
 const Wrapper = ({ items, type, fit = true, ...props }) => {
   return (
@@ -9,32 +11,56 @@ const Wrapper = ({ items, type, fit = true, ...props }) => {
       className="home__wrapper"
       style={{
         paddingTop: !fit ? '1rem' : 'inherit',
-        ...props.style
+        ...props.style,
       }}
     >
-      {type === 'small'
-        ? items.map((item, index) => (
-            <SmallContainer
-              key={index}
-              href={item.href}
-              type={item.type}
-              name={item.name}
-              icon={item.icon}
-              isWhite={item.isWhite || false}
-            />
-          ))
-        : items.map((item, index) => (
-            <LargeContainer
-              key={index}
-              href={item.href}
-              type={item.type}
-              name={item.name}
-              icon={item.icon}
-              fit={fit}
-              isWhite={item.isWhite || false}
-              description={item.description}
-            />
-          ))}
+      {type === 'small' &&
+        items.map((item, index) => (
+          <SmallContainer
+            key={index}
+            href={item.href}
+            type={item.type}
+            name={item.name}
+            icon={item.icon}
+            isWhite={item.isWhite || false}
+          />
+        ))}
+
+      {type === 'large' &&
+        items.map((item, index) => (
+          <LargeContainer
+            key={index}
+            href={item.href}
+            type={item.type}
+            name={item.name}
+            icon={item.icon}
+            fit={fit}
+            isWhite={item.isWhite || false}
+            description={item.description}
+          />
+        ))}
+
+      {type === 'centered' &&
+        items.map((item, index) => (
+          <CenteredContainer
+            key={index}
+            href={item.href}
+            name={item.name}
+            icon={item.icon}
+            description={item.description}
+          />
+        ))}
+
+      {type === 'support' &&
+        items.map((item, index) => (
+          <SupportContainer
+            key={index}
+            href={item.href}
+            name={item.name}
+            icon={item.icon}
+            description={item.description}
+          />
+        ))}
     </div>
   )
 }

diff --git a/docs/readme.mdx b/docs/readme.mdx
@@ -21,38 +21,115 @@ import Link from '@docusaurus/Link'
 
 <Banner />
 
-<div className="home__divider" />
+<Wrapper
+  type="large"
+  items={[
+    {
+      name: 'Get Started',
+      icon: 'reown/get-started.svg',
+      href: '/appkit/overview',
+      description: 'Get started with Reown AppKit',
+    },
+    {
+      name: 'Upgrade to Reown',
+      icon: 'reown/upgrade.svg',
+      href: '/appkit/upgrade/from-w3m-to-reown',
+      description: 'Upgrade to latest version of Reown AppKit',
+    },
+     {
+      name: 'Features',
+      icon: 'reown/features.svg',
+      href: '/appkit/features/swaps',
+      description: 'Learn about the features Reown has to offer',
+    },
+    {
+      name: 'Try AppKit Demo',
+      icon: 'reown/demo.svg',
+      href: 'https://demo.reown.com/?utm_source=navbar&utm_medium=docs&utm_campaign=backlinks',
+      description: 'Try out the powerful Reown AppKit today',
+    },
+     {
+      name: 'Migrate from Alternatives',
+      icon: 'reown/migrate.svg',
+      href: '/appkit/migration/',
+      description: 'Migrate from other solutions to Reown AppKit',
+    },
+    {
+      name: 'Browse our repositories',
+      icon: 'reown/browse.svg',
+      href: 'https://github.com/reown-com',
+      description: 'Browse all our open-source repos',
+    }
+  ]}
+/>
+
 
 ## Reown SDKs
 
 Effortlessly integrate our suite of SDKs. 
 
 <Wrapper
-  type="large"
+  type="centered"
   items={[
     {
       name: 'AppKit',
       icon: 'reown/appkit-logo.svg',
       href: '/appkit/overview',
-      description: 'The all-in-one stack to build apps for the new internet.',
+      description: 'Reown AppKit is a comprehensive SDK for creating seamless onchain UX, offering features like login (email & social), gas fee sponsorship, multi-chain support, onramps, swaps, user insights, and access to more than 600 wallets.',
     },
     {
       name: 'WalletKit',
       icon: 'reown/walletkit-logo.svg',
       href: '/walletkit/overview',
-      description: 'The ultimate toolkit for building and connecting wallets.',
+      description: 'Reown WalletKit is an open-source SDK for seamless wallet connections across blockchains. It offers one-click authentication, secure transaction signing, phishing protection, and advanced on-chain actions like batch transactions and paymasters.',
     }
   ]}
 />
 
 <br />
-:::info
 
-Check our upgrade guides to migrate to our new Reown SDKs -> [AppKit](./appkit/upgrade/from-w3m-to-reown) and [WalletKit](./walletkit/upgrade/from-web3wallet-to-reown).
+<Wrapper
+  type="support"
+  items={[
+    {
+      name: 'Get Support',
+      icon: 'reown/support.svg',
+      href: 'https://discord.com/invite/kdTQHQ6AFQ',
+      description: 'Reown offers free unlimited support for builders 24/7. Feel free to read our FAQ or get in touch.',
+    },
+  ]}
+  />
 
-:::
+## Recipes
+
+Step-by-step guides and ready-to-use code examples designed to help you quickly implement common features and solve specific use cases using the SDK. Perfect for tackling real-world scenarios with ease.
+
+<Wrapper
+  type="large"
+  items={[
+    {
+      name: 'Build a Telegram Mini App',
+      icon: 'reown/recipes.svg',
+      href: '/appkit/recipes/telegram-mini-app',
+    },
+    {
+      name: 'Configure Tenderly Virtual TestNets',
+      icon: 'reown/recipes.svg',
+      href: '/appkit/recipes/tenderly-virtual-testnets',
+    },
+    {
+      name: 'Initiate EVM Transactions',
+      icon: 'reown/recipes.svg',
+      href: '/appkit/recipes/wagmi-send-transaction',
+    },
+    {
+      name: 'Initiate Solana Transactions',
+      icon: 'reown/recipes.svg',
+      href: '/appkit/recipes/solana-send-transaction',
+    }
+  ]}
+/>
 
-<br />
 
 ## Join our community
 

diff --git a/sidebars.js b/sidebars.js
@@ -277,7 +277,7 @@ module.exports = {
             {
               type: 'category',
               label: 'Recipes',
-              collapsed:false,
+              collapsed:true,
               collapsible: true,
               items: [
                 { type: 'doc', label: 'Build a Telegram Mini App', id: 'appkit/recipes/telegram-mini-app' },
@@ -303,6 +303,10 @@ module.exports = {
               label: 'Migration',
               collapsed: true,
               collapsible: true,
+              link:{
+                type: 'doc',
+                id: 'appkit/migration/index'
+              },
               items: [
                 {
                   type: 'doc',