Merge branch 'landing-page' into landing-cards

dapp/src/DApp.tsx

@@ -1,34 +1,26 @@
 import React from "react"
-import { Box, ChakraProvider } from "@chakra-ui/react"
+import { ChakraProvider } from "@chakra-ui/react"
 import { Provider as ReduxProvider } from "react-redux"
-import { RouterProvider } from "react-router-dom"
-import { useInitApp } from "./hooks"
-import { store } from "./store"
-import theme from "./theme"
+import { AcreSdkProvider } from "./acre-react/contexts"
+import GlobalStyles from "./components/GlobalStyles"
 import {
   DocsDrawerContextProvider,
   LedgerWalletAPIProvider,
   SidebarContextProvider,
   WalletContextProvider,
 } from "./contexts"
-import { AcreSdkProvider } from "./acre-react/contexts"
-import Header from "./components/Header"
-import Sidebar from "./components/Sidebar"
-import DocsDrawer from "./components/DocsDrawer"
-import GlobalStyles from "./components/GlobalStyles"
-import { router } from "./router"
+import { useInitApp } from "./hooks"
+import { Router } from "./router"
+import { store } from "./store"
+import theme from "./theme"
 
 function DApp() {
   useInitApp()
 
   return (
     <>
-      <Header />
-      <Box as="main">
-        <RouterProvider router={router} />
-      </Box>
-      <Sidebar />
-      <DocsDrawer />
+      <GlobalStyles />
+      <Router />
     </>
   )
 }
@@ -42,7 +34,6 @@ function DAppProviders() {
             <SidebarContextProvider>
               <ReduxProvider store={store}>
                 <ChakraProvider theme={theme}>
-                  <GlobalStyles />
                   <DApp />
                 </ChakraProvider>
               </ReduxProvider>

dapp/src/components/shared/Layout.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react"
+import { AnimatePresence, motion, Variants } from "framer-motion"
+import { useLocation, useOutlet } from "react-router-dom"
+import Header from "../Header"
+import DocsDrawer from "../DocsDrawer"
+import Sidebar from "../Sidebar"
+
+const wrapperVariants: Variants = {
+  in: { opacity: 0, y: 48 },
+  out: { opacity: 0, y: -48 },
+  visible: { opacity: 1, y: 0 },
+}
+
+// This tricky component makes Outlet persistent so React and Framer Motion can
+// distinguish wheather it should be rerendered between routes.
+// Ref: https://github.com/remix-run/react-router/discussions/8008#discussioncomment-1280897
+function PersistentOutlet() {
+  const [outlet] = useState(useOutlet())
+  return outlet
+}
+
+function Layout() {
+  const location = useLocation()
+  return (
+    <>
+      <Header />
+      <AnimatePresence mode="popLayout">
+        <motion.main
+          key={location.pathname}
+          variants={wrapperVariants}
+          transition={{ type: "spring", damping: 12, stiffness: 120 }}
+          initial="in"
+          animate="visible"
+          exit="out"
+        >
+          <PersistentOutlet />
+        </motion.main>
+      </AnimatePresence>
+      <Sidebar />
+      <DocsDrawer />
+    </>
+  )
+}
+
+export default Layout

dapp/src/pages/LandingPage/HeroSection.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Button, Heading, VStack, Text } from "@chakra-ui/react"
+
+export default function HeroSection() {
+  return (
+    <VStack spacing={0} mt={13} mb={20} align="center" textAlign="center">
+      <Heading
+        fontSize={{ base: "4xl", md: "6xl" }}
+        mb={2}
+        fontWeight="semibold"
+      >
+        Bitcoin staking done right.
+      </Heading>
+      <Text
+        fontSize={{ base: "md", md: "xl" }}
+        lineHeight={7}
+        mb={10}
+        fontWeight="medium"
+      >
+        The open source, decentralized way to grow your bitcoin
+      </Text>
+      <Button size="lg" px={7} fontWeight="bold" lineHeight={6} h="auto">
+        Deposit BTC
+      </Button>
+    </VStack>
+  )
+}

dapp/src/pages/LandingPage/index.tsx

@@ -9,6 +9,8 @@ import ValueCard from "./ValueCard"
 import TVLCard from "./TVLCard"
 import ContentCard from "./ContentCard"
 import CardButton from "./CardButton"
+import HeroSection from "./HeroSection"
+
 
 export default function LandingPage() {
   return (
@@ -20,6 +22,7 @@ export default function LandingPage() {
       maxW="100.625rem"
       mx="auto"
     >
+      <HeroSection />
       <VStack spacing={4} mx={32} align="stretch">
         <HStack spacing={5} align="stretch" mb={12} w="full">
           <IconCard

dapp/src/router/index.tsx

@@ -1,22 +1,24 @@
 import React from "react"
-import { createBrowserRouter } from "react-router-dom"
+import { BrowserRouter, Route, Routes } from "react-router-dom"
 import LandingPage from "#/pages/LandingPage"
 import ActivityPage from "#/pages/ActivityPage"
 import DashboardPage from "#/pages/DashboardPage"
+import Layout from "#/components/shared/Layout"
 import { routerPath } from "./path"
 
-export const router = createBrowserRouter([
-  {
-    path: routerPath.home,
-    element: <LandingPage />,
-    index: true,
-  },
-  {
-    path: routerPath.dashboard,
-    element: <DashboardPage />,
-  },
-  {
-    path: `${routerPath.activity}/:activityId`,
-    element: <ActivityPage />,
-  },
-])
+export function Router() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index path={routerPath.home} element={<LandingPage />} />
+          <Route path={routerPath.dashboard} element={<DashboardPage />} />
+          <Route
+            path={`${routerPath.activity}/:activityId`}
+            element={<ActivityPage />}
+          />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}

dapp/src/theme/index.ts

@@ -45,6 +45,9 @@ const defaultTheme = {
   zIndices,
   semanticTokens,
   styles,
+  space: {
+    13: "3.25rem",
+  },
   components: {
     Alert: alertTheme,
     Button: buttonTheme,