Next-ify some links (#442)

components/slack.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import usePrefersMotion from '../lib/use-prefers-motion'
 import useHasMounted from '../lib/use-has-mounted'
 import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -45,16 +46,17 @@ const Content = () => (
       For leaders, you'll be able to connect with other leaders and support one
       another.
     </Text>
-    <Button
-      as="a"
-      href="https://hackclub.com/slack/"
-      variant="ctaLg"
-      sx={{
-        background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
-      }}
-    >
-      Join our Slack →
-    </Button>
+    <Link href="/slack" passHref>
+      <Button
+        as="a"
+        variant="ctaLg"
+        sx={{
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+        }}
+      >
+        Join our Slack →
+      </Button>
+    </Link>
   </Container>
 )
 

pages/index.js

@@ -430,16 +430,17 @@ const Page = () => (
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
-        <Button
-          as="a"
-          href="https://hackclub.com/philosophy/"
-          variant="ctaLg"
-          sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
-          }}
-        >
-          Our philosophy →
-        </Button>
+        <NextLink href="/philosophy" passHref>
+          <Button
+            as="a"
+            variant="ctaLg"
+            sx={{
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+            }}
+          >
+            Our philosophy →
+          </Button>
+        </NextLink>
       </Container>
     </Box>
     <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>

pages/philosophy.js

@@ -4,6 +4,7 @@ import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
 import Nav from '../components/nav'
 import styled from '@emotion/styled'
 import Footer from '../components/footer'
+import NextLink from "next/link"
 
 const Header = styled(Box)`
   color: white;
@@ -268,13 +269,14 @@ export default function Philosophy() {
           >
             Start a club
           </Button>
-          <Button
-            sx={{ bg: 'white', color: 'red' }}
-            as="a"
-            href="https://hackclub.com/slack"
-          >
-            Join our Slack
-          </Button>
+          <NextLink href="/slack" passHref>
+            <Button
+              sx={{ bg: 'white', color: 'red' }}
+              as="a"
+            >
+              Join our Slack
+            </Button>
+          </NextLink>
         </Box>
       </Box>
       <Footer light />

pages/slack/index.js

@@ -183,7 +183,6 @@ const SlackPage = () => {
           </Card>
           <Card
             bg="red"
-            as="a"
             sx={{
               gridColumn: ['span 2 !important', 'span 2 !important'],
               gridRow: ['span 1 !important', 'span 3 !important'],