From c0970175205a55ebbe34fd585d5d2fb12fbc6f26 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 1 Sep 2021 14:45:26 +0200
Subject: [PATCH] Homepage links update

---
 components/dimmed-more.tsx    |  5 ++--
 components/footer.tsx         | 46 ++++++++++++++++++++++-------------
 components/global-header.tsx  | 11 +++++----
 components/updates-banner.tsx | 20 ++++++++++-----
 content/site.json             |  3 +++
 pages/index.tsx               |  9 ++++---
 6 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/components/dimmed-more.tsx b/components/dimmed-more.tsx
index 539f76e26..fda55c8a8 100644
--- a/components/dimmed-more.tsx
+++ b/components/dimmed-more.tsx
@@ -2,10 +2,11 @@ import { Box, Link, Text } from '@chakra-ui/react';
 
 type DimmedMoreProps = {
   text: string;
+  href: string;
 };
 
 export function DimmedMore(props: DimmedMoreProps) {
-  const { text } = props;
+  const { text, href } = props;
 
   return (
     <Box position='relative' textAlign='center' bottom='20px'>
@@ -25,7 +26,7 @@ export function DimmedMore(props: DimmedMoreProps) {
         bg='green.600'
         color='white'
         p='7px 20px'
-        href={'#'}
+        href={href}
         fontWeight={800}
         fontSize='11px'
         textTransform='uppercase'
diff --git a/components/footer.tsx b/components/footer.tsx
index d557b9450..0bcaf9929 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,25 +1,33 @@
 import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
+import siteConfig from '../content/site.json';
 
 function NavigationLinks() {
   return (
     <>
       <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
-        <Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
-        <Link _hover={{ color: 'white' }} href='#'>Guides</Link>
-        <Link _hover={{ color: 'white' }} href='#'>Videos</Link>
-        <Link _hover={{ color: 'white' }} href='#'>Podcasts</Link>
-        <Link _hover={{ color: 'white' }} href='#'>About</Link>
-        <Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
+        <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
+        <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
+        <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
+        <Link _hover={{ color: 'white' }} href='/podcasts'>Podcasts</Link>
+        <Link _hover={{ color: 'white' }} href='/about'>About</Link>
+        <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
       </Stack>
 
       <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Guides</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Videos</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Podcasts</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Thanks</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>About</Link>
-        <Link py='7px' _hover={{ color: 'white' }} href='#'>YouTube</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/roadmaps'>Roadmaps</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/guides'>Guides</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/watch'>Videos</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/podcasts'>Podcasts</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/thanks'>Thanks</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/about'>About</Link>
+        <Link py='7px' _hover={{ color: 'white' }} target='_blank'
+              href={siteConfig.url.youtube}>YouTube</Link>
       </Stack>
     </>
   );
@@ -40,7 +48,8 @@ export function Footer() {
             </Link>
             <Text as='span' mx='7px'>by</Text>
             <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
-                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href='/'>@kamranahmedse</Link>
+                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
+                  target='_blank'>@kamranahmedse</Link>
           </Flex>
 
           <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
@@ -48,9 +57,12 @@ export function Footer() {
 
           <Text fontSize='14px' color='gray.500'>
             <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
-            <Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>FAQs</Link>&middot;
-            <Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Terms</Link>&middot;
-            <Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Privacy</Link>
+            <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>FAQs</Link>&middot;
+            <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>Terms</Link>&middot;
+            <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>Privacy</Link>
           </Text>
         </Box>
       </Container>
diff --git a/components/global-header.tsx b/components/global-header.tsx
index 3fb06541e..1217b780d 100644
--- a/components/global-header.tsx
+++ b/components/global-header.tsx
@@ -42,7 +42,7 @@ function DesktopMenuLinks() {
 
       <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
             _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
-            fontWeight={500} href={'#'}>Subscribe</Link>
+            fontWeight={500} href={'/signup'}>Subscribe</Link>
     </Stack>
   );
 }
@@ -59,13 +59,14 @@ function MobileMenuLinks() {
         cursor='pointer'
       />
       <MenuList py={'4px'} rounded='3px' minWidth='150px'>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+        <MenuItem href={'/roadmaps'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
                   color='gray.600'>Roadmaps</MenuItem>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+        <MenuItem href={'/guides'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
                   color='gray.600'>Guides</MenuItem>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+        <MenuItem href={'/watch'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
                   color='gray.600'>Videos</MenuItem>
-        <MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem>
+        <MenuItem href='/signup' as={Link} py='4px' borderColor='gray.100' fontSize='13px'
+                  color='gray.600'>Subscribe</MenuItem>
       </MenuList>
     </Menu>
   );
diff --git a/components/updates-banner.tsx b/components/updates-banner.tsx
index deb2bb9e8..9e6c6ad9d 100644
--- a/components/updates-banner.tsx
+++ b/components/updates-banner.tsx
@@ -1,8 +1,10 @@
-import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../content/site.json';
 
 export function UpdatesBanner() {
   return (
-    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left' bg='gray.800'>
+    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
+         bg='gray.800'>
       <Container maxW='container.md'>
         <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
           Informed</Heading>
@@ -12,15 +14,21 @@ export function UpdatesBanner() {
 
         <Flex flexDirection={['column', 'column', 'row']}>
           <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} variant='outline' borderWidth={2}
-                    colorScheme='green' _hover={{ color: 'green.200' }}>
+            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
+                    variant='outline' borderWidth={2}
+                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
               Subscribe to Updates
             </Button>
             <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
           </Box>
           <Box>
-            <Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} colorScheme='yellow'>Updates & Paid
-              Content</Button>
+            <Button as={Link}
+                    href={siteConfig.url.sponsor}
+                    target='_blank'
+                    width={['full', 'auto']}
+                    fontSize={['14px', '14px', '16px']}
+                    _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
+                    colorScheme='yellow'>Updates & Paid Content</Button>
             <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
                                                                                                              fontWeight={600}>5$
               per month</Text></Text>
diff --git a/content/site.json b/content/site.json
index 608401796..3833d9bb5 100644
--- a/content/site.json
+++ b/content/site.json
@@ -9,7 +9,10 @@
   "logoSquare": "/brand-square.png",
   "url": {
     "web": "https://roadmap.sh",
+    "twitter": "https://twitter.com/kamranahmedse",
+    "youtube": "https://youtube.com/theroadmap?sub_confirmation=1",
     "repo": "https://github.com/kamranahmedse/roadmap.sh",
+    "sponsor": "https://github.com/sponsors/kamranahmedse",
     "repoData": "https://github.com/kamranahmedse/roadmap.sh/tree/master/content",
     "addGuide": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/guide.md",
     "addRoadmap": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/roadmap.md",
diff --git a/pages/index.tsx b/pages/index.tsx
index 9ceeeeeb8..513e2367a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,6 +11,7 @@ import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
 import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
 import { getAllGuides, GuideType } from '../lib/guide';
 import { getAllVideos, VideoType } from '../lib/video';
+import siteConfig from '../content/site.json';
 
 type HomeProps = {
   roadmaps: RoadmapType[];
@@ -34,7 +35,9 @@ export default function Home(props: HomeProps) {
               to help guide the developers in picking up the path and guide their learnings.
             </Text>
 
-            <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} href={'#'}
+            <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'}
+                                                                           href={siteConfig.url.youtube}
+                                                                           target='_blank'
                                                                            fontWeight={600}>YouTube
               channel</Link> which we hope you are going to love.</Text>
           </Box>
@@ -68,7 +71,7 @@ export default function Home(props: HomeProps) {
                 subtitle={guide.formattedUpdatedAt}
               />
             ))}
-            <DimmedMore text='View all Guides' />
+            <DimmedMore href={'/guides'} text='View all Guides' />
           </LinksList>
         </Container>
       </Box>
@@ -99,7 +102,7 @@ export default function Home(props: HomeProps) {
                 }
               />
             ))}
-            <DimmedMore text={'View all Videos'} />
+            <DimmedMore href='/watch' text={'View all Videos'} />
           </LinksList>
         </Container>
       </Box>