Merge pull request #159 from argotorg/add-banner

Add banner for Solidity Summit

Author: clonker

src/components/PageLayout.tsx

@@ -3,6 +3,7 @@ import { Footer, Header } from '@/components'
 import { useColorContinuity } from '@/hooks'
 import { AppProps } from 'next/app'
 import { useEffect } from 'react'
+import { Link } from '@/components'
 
 interface PageLayoutProps extends Pick<AppProps, 'Component' | 'pageProps'> {}
 export const PageLayout: React.FC<PageLayoutProps> = ({
@@ -20,11 +21,39 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [toggleColorMode])
 
+  const { colorMode } = useColorMode()
+  const isDark = colorMode === 'dark'
+
   return (
-    <Box textStyle="body" maxW="container.xl" mx="auto">
-      <Header />
-      <Component {...pageProps} />
-      <Footer />
-    </Box>
+    <>
+      {/* Banner */}
+      <Box
+        bg={isDark ? '#AEC0F1' : '#2B247C'}
+        color={isDark ? '#2B247C' : '#AEC0F1'}
+        py={3}
+        px={4}
+        textAlign="center"
+        fontSize={{ base: 'sm', md: 'md' }}
+        fontWeight="medium"
+        zIndex={9999}
+        position="relative"
+      >
+        Join us for the{' '}
+        <Link
+          href="/summit"
+          textDecoration="underline"
+          _hover={{ opacity: 0.8 }}
+        >
+          Solidity Summit
+        </Link>{' '}
+        on Nov 18th Tuesday in Buenos Aires! 🇦🇷
+      </Box>
+
+      <Box textStyle="body" maxW="container.xl" mx="auto">
+        <Header />
+        <Component {...pageProps} />
+        <Footer />
+      </Box>
+    </>
   )
 }