feat: added marketing banner

Author: okhaimie-dev

components/Banner.tsx

@@ -0,0 +1,35 @@
+import { Center, Flex, Text, chakra } from '@chakra-ui/react'
+
+const Banner = () => {
+  return (
+    <Center
+      py="2"
+      px="3"
+      bgGradient="linear(to-r,cyan.700, purple.500)"
+      color="white"
+      textAlign="center"
+    >
+      <Flex align="center" fontSize="sm">
+        <Text fontWeight="medium" maxW={{ base: '32ch', md: 'unset' }}>
+          Join our newsletter for exclusive 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>
+      </Flex>
+    </Center>
+  )
+}
+
+export default Banner

components/Layout.tsx

@@ -1,10 +1,12 @@
 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"

package.json

@@ -18,6 +18,8 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/inter": "^4.5.15",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "@vercel/analytics": "^0.1.10",
     "framer-motion": "^10.0.0",
     "next": "13.2.1",

yarn.lock

@@ -1270,6 +1270,18 @@
   resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.15.tgz#eed1873d68755d3b52d6fcfcfa3493118430a512"
   integrity sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q==
 
+"@headlessui/react@^1.7.17":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
+  dependencies:
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
+  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -2627,7 +2639,7 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==