Add Vercel Callout (#130)

Author: andersy005

README.md

@@ -1,6 +1,6 @@
 # xarray landing page
 
-![GitHub deployments](https://img.shields.io/github/deployments/andersy005/xarray-website/Production?label=vercel&logo=vercel&style=for-the-badge)
+![Vercel Deployment](https://img.shields.io/github/deployments/xarray-contrib/xarray.dev/Production?label=vercel&logo=vercel&style=for-the-badge)
 
 Landing Page for xarray project.
 
@@ -21,7 +21,7 @@ This project is built using the following tools/technologies:
 ### 1. Clone the repository
 
 ```bash
-git clone `REPO_URL`
+git clone https://github.com/xarray-contrib/xarray.dev
 ```
 
 ### 2. Install dependencies
@@ -43,3 +43,9 @@ npm run dev
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+<a href="https://vercel.com?utm_source=xarray&utm_campaign=oss">
+<p align="center">
+  <img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg">
+</p>
+</a>

src/components/Footer.js

@@ -10,10 +10,12 @@ import {
   VisuallyHidden,
   Image,
   useColorModeValue,
+  VStack,
 } from "@chakra-ui/react"
 
 import { FaTwitter, FaGithub } from "react-icons/fa"
 import { footerItems } from "../data/footer-items"
+import { VercelCallout } from "./VercelCallout"
 
 const SocialButton = ({ children, label, href }) => {
   return (
@@ -129,6 +131,9 @@ export const Footer = () => {
             })}
           </Stack>
         </SimpleGrid>
+        <VStack as="footer" spacing={4} mt={12} textAlign="center">
+          <VercelCallout />
+        </VStack>
       </Container>
     </Box>
   )

src/components/VercelCallout.js

@@ -0,0 +1,26 @@
+import { Box, Link } from "@chakra-ui/react"
+
+export function VercelCallout() {
+  return (
+    <Box
+      mt="6"
+      fontSize="sm"
+      fontWeight="semibold"
+      display="inline-block"
+      bg="black"
+      color="white"
+      px="4"
+      py="2"
+      rounded="lg"
+    >
+      {" "}
+      <Link href="https://vercel.com?utm_source=xarray&utm_campaign=oss">
+        {"Powered by"}{" "}
+        <span role="img" aria-label="Vercel logo">
+          ▲
+        </span>{" "}
+        Vercel
+      </Link>
+    </Box>
+  )
+}