Merge branch 'Developer-DAO:main' into lesson-erc20

Author: 7i7o

.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['next/core-web-vitals', 'plugin:storybook/recommended'],
+  extends: ['next/core-web-vitals'],
 }

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

components/Banner.tsx

@@ -0,0 +1,57 @@
+import { Center, Flex, Text, chakra } from '@chakra-ui/react'
+import { CloseIcon } from '@chakra-ui/icons'
+
+const Banner = () => {
+  const dismissBanner = () => {
+    localStorage.setItem('bannerDismissed', 'true')
+    const banner = document.getElementById('banner')
+    if (banner) {
+      banner.style.display = 'none'
+    }
+  }
+
+  return (
+    <Center
+      py="2"
+      px="3"
+      bgGradient="linear(to-r,cyan.700, purple.500)"
+      color="white"
+      textAlign="center"
+      id="banner"
+    >
+      <Flex align="center" fontSize="sm">
+        <Text fontWeight="medium" maxW={{ base: '32ch', md: 'unset' }}>
+          Acamdey V2 is coming soon 👀... Subscribe to our newsletter for
+          updates!
+        </Text>
+        <chakra.a
+          flexShrink={0}
+          href="https://developerdao.substack.com/s/probably-nothing"
+          target="_blank"
+          ms="6"
+          bg="blackAlpha.300"
+          color="whiteAlpha.900"
+          fontWeight="semibold"
+          px="3"
+          py="1"
+          rounded="base"
+        >
+          Subscribe now!{' '}
+        </chakra.a>
+        <chakra.button
+          onClick={dismissBanner}
+          ms="6"
+          color="whiteAlpha.900"
+          fontWeight="semibold"
+          px="3"
+          py="1"
+          rounded="base"
+        >
+          <CloseIcon />
+        </chakra.button>
+      </Flex>
+    </Center>
+  )
+}
+
+export default Banner

components/Header.tsx

@@ -11,6 +11,7 @@ import {
 } from '@chakra-ui/react'
 import { ArrowForwardIcon } from '@chakra-ui/icons'
 import Image from 'next/image'
+import NextLink from 'next/link'
 
 const Hero = () => {
   return (
@@ -45,6 +46,7 @@ const Hero = () => {
               <Link
                 href={'/getting-started'}
                 alignSelf={{ base: 'center', md: 'flex-start' }}
+                as={NextLink}
               >
                 <Button
                   colorScheme="pink"

components/Hero.tsx

@@ -0,0 +1,25 @@
+import NavBar from '@components/NavBar'
+import Footer from '@components/footer/Footer'
+import { Box } from '@chakra-ui/react'
+import Banner from './Banner'
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Banner />
+      <NavBar />
+      <Box
+        p="1.25em"
+        px="5%"
+        mx={{ base: '2rem', md: '6rem', lg: '10rem' }}
+        as="main"
+        minH={{ base: 'calc(75vh - 3.5rem)' }}
+      >
+        {children}
+      </Box>
+      <Footer />
+    </>
+  )
+}
+
+export default Layout

components/Layout.tsx

@@ -19,7 +19,12 @@ import { PomodoroTimer } from '@components/PomodoroTimer'
 function NavBar() {
   const router = useRouter()
   return (
-    <Box>
+    <Box
+      p="1.25em"
+      px="5%"
+      mx={{ base: '2rem', md: '6rem', lg: '10rem' }}
+      as="header"
+    >
       <Flex justify="left" alignItems="center">
         <Link as={NextLink} variant="logo" href={'/'}>
           {router.pathname.endsWith('/[slug]') ? (
@@ -79,7 +84,7 @@ function NavBar() {
                     GET STARTED
                   </Link>
                 </MenuItem>
-                <MenuItem>
+                {/* <MenuItem>
                   <Link
                     as={NextLink}
                     href="/lessons"
@@ -92,7 +97,7 @@ function NavBar() {
                   >
                     Tracks
                   </Link>
-                </MenuItem>
+                </MenuItem> */}
               </MenuList>
             </Menu>
           </Flex>
@@ -131,7 +136,7 @@ function NavBar() {
               Get Started
             </Link>
 
-            <Link
+            {/* <Link
               as={NextLink}
               href="/lessons"
               passHref
@@ -142,7 +147,7 @@ function NavBar() {
               }
             >
               Tracks
-            </Link>
+            </Link> */}
 
             {/* <Button colorScheme="gray" variant="solid">
               <ConnectButton chainStatus="icon" showBalance={false} />

components/NavBar.tsx

@@ -0,0 +1,51 @@
+import { NextSeo } from 'next-seo'
+
+interface PageSeoLayoutProps {
+  title: string
+  description?: string
+  children?: React.ReactNode
+}
+
+const PageSeoLayout = ({
+  title,
+  description,
+  children,
+}: PageSeoLayoutProps) => {
+  return (
+    <>
+      <NextSeo
+        title={`Developer DAO Academy | ${title}`}
+        description={description}
+        openGraph={{
+          type: 'website',
+          locale: 'en_US',
+          url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
+          site_name: `Developer DAO Academy`,
+          title: `Developer DAO Academy | ${title}`,
+          description: `${description}`,
+          images: [
+            {
+              url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
+              alt: 'Developer DAO Academy',
+              type: 'image/png',
+            },
+          ],
+        }}
+        twitter={{
+          handle: '@devdao_academy',
+          site: '@devdao_academy',
+          cardType: 'summary_large_image',
+        }}
+        additionalLinkTags={[
+          {
+            rel: 'icon',
+            href: '/favicon/favicon.ico',
+          },
+        ]}
+      />
+      {children}
+    </>
+  )
+}
+
+export default PageSeoLayout

components/PageSeoLayout.tsx

@@ -14,6 +14,10 @@ export default function Footer() {
   return (
     <Box
       // bg={useColorModeValue('#00000f', '#1d1e20')}
+      p="1.25em"
+      px="5%"
+      mx={{ base: '2rem', md: '6rem', lg: '10rem' }}
+      as="footer"
       color={useColorModeValue('gray.700', 'gray.200')}
     >
       <Container