Merge pull request #129 from hackbg/feature/automation-page

feat: automation page

Author: imollov

packages/frontend/components/layout/Layout.tsx

@@ -110,6 +110,11 @@ export const Layout = ({ children, customMeta }: LayoutProps): JSX.Element => {
                   External API
                 </Link>
               </NextLink>
+              <NextLink href="/automation" passHref>
+                <Link px="4" py="1">
+                  Automation
+                </Link>
+              </NextLink>
             </Flex>
             {account ? (
               <Flex

packages/frontend/pages/automation.tsx

@@ -0,0 +1,30 @@
+import { Heading, Text, Link } from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
+import { Section } from '../components/layout'
+
+function HomeIndex(): JSX.Element {
+  return (
+    <>
+      <Heading as="h1" mb="4">
+        Automation
+      </Heading>
+      <Text fontSize="xl">
+        Reliably execute smart contract functions using a variety of triggers.
+      </Text>
+      <Section>
+        <Heading as="h2" size="md" mb="2">
+          Batch NFT Demo App
+        </Heading>
+        <Text mb="4">
+          Create batch-revealed NFT collections powered by Chainlink Automation
+          & VRF.
+        </Text>
+        <Link href="https://automation.chainlink-demo.app" isExternal>
+          Go to Demo <ExternalLinkIcon mx="2px" />
+        </Link>
+      </Section>
+    </>
+  )
+}
+
+export default HomeIndex

packages/frontend/pages/index.tsx

@@ -54,6 +54,19 @@ function HomeIndex(): JSX.Element {
           </Link>
         </NextLink>
       </Section>
+      <Section>
+        <Heading as="h2" size="md" mb="2">
+          Automation
+        </Heading>
+        <Text mb="4">
+          Reliably execute smart contract functions using a variety of triggers.
+        </Text>
+        <NextLink href="/automation" passHref>
+          <Link>
+            Go to Demo <ArrowForwardIcon />
+          </Link>
+        </NextLink>
+      </Section>
     </>
   )
 }