Add interactive button

components/roadmap/roadmap-page-header.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Container,
+  Flex,
   Heading,
   Link,
   Stack,
@@ -11,6 +12,7 @@ import {
 } from '@chakra-ui/react';
 import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
 import React from 'react';
+import { useRouter } from 'next/router';
 
 type RoadmapPageHeaderType = {
   roadmap: RoadmapType;
@@ -18,6 +20,9 @@ type RoadmapPageHeaderType = {
 
 export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
   const { roadmap } = props;
+  const router = useRouter()
+
+  const isInteractive = router.pathname.includes('/interactive');
 
   return (
     <Box
@@ -38,54 +43,71 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
           {roadmap.title}
         </Heading>
         <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
-        <Stack mt="20px" isInline>
+        <Flex justifyContent="space-between" alignItems={'center'} mt="20px">
-          <Button
+          <Stack isInline>
-            d={['flex', 'flex']}
+            <Button
-            as={Link}
+              d={['flex', 'flex']}
-            href={'/roadmaps'}
+              as={Link}
-            size="xs"
+              href={'/roadmaps'}
-            py="14px"
+              size="xs"
-            px="10px"
+              py="14px"
-            colorScheme="teal"
+              px="10px"
-            variant="solid"
+              colorScheme="teal"
-            _hover={{ textDecoration: 'none' }}
+              variant="solid"
-          >
+              _hover={{ textDecoration: 'none' }}
-            &larr;
+            >
-            <Text as="span" d={['none', 'inline']} ml="5px">
+              &larr;
-              All Roadmaps
+              <Text as="span" d={['none', 'inline']} ml="5px">
-            </Text>
+                All Roadmaps
-          </Button>
+              </Text>
+            </Button>
 
-          {roadmap.pdfUrl && (
+            {roadmap.pdfUrl && (
+              <Button
+                as={Link}
+                href={roadmap.pdfUrl}
+                target="_blank"
+                size="xs"
+                py="14px"
+                px="10px"
+                leftIcon={<DownloadIcon />}
+                colorScheme="yellow"
+                variant="solid"
+                _hover={{ textDecoration: 'none' }}
+              >
+                Download
+              </Button>
+            )}
             <Button
               as={Link}
-              href={roadmap.pdfUrl}
+              href={'/signup'}
-              target="_blank"
               size="xs"
               py="14px"
               px="10px"
-              leftIcon={<DownloadIcon />}
+              variant="solid"
               colorScheme="yellow"
+              leftIcon={<AtSignIcon />}
+              _hover={{ textDecoration: 'none' }}
+            >
+              Subscribe
+            </Button>
+          </Stack>
+          {roadmap.id === 'frontend' && !isInteractive && (
+            <Button
+              d={['none', 'flex', 'flex']}
+              as={Link}
+              href={'/frontend/interactive'}
+              size="xs"
+              py="14px"
+              px="10px"
               variant="solid"
               _hover={{ textDecoration: 'none' }}
+              colorScheme="purple"
             >
-              Download
+              ✨ Try Beta
             </Button>
           )}
-          <Button
+        </Flex>
-            as={Link}
-            href={'/signup'}
-            size="xs"
-            py="14px"
-            px="10px"
-            leftIcon={<AtSignIcon />}
-            colorScheme="yellow"
-            variant="solid"
-            _hover={{ textDecoration: 'none' }}
-          >
-            Subscribe
-          </Button>
-        </Stack>
       </Container>
     </Box>
   );

content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md

@@ -1 +1,8 @@
 # Browsers
+
+A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work</BadgeLink>
+<BadgeLink badgeText='Read' href='https://www.browserstack.com/guide/browser-rendering-engine'>Role of Rendering Engine in Browsers</BadgeLink>
+<BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work'>Populating the Page: How Browsers Work</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md

@@ -1 +1,7 @@
 # DNS
+The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md

@@ -1 +1,8 @@
 # Domain Name
+
+A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name'>What is a Domain Name?</BadgeLink>
+<BadgeLink badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/'>What is a Domain Name? | Domain name vs. URL</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=Y4cRx19nhJk'>A Beginners Guide to How Domain Names Work</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md

@@ -1 +1,8 @@
 # Hosting
+
+Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=htbY9-yggB0' colorScheme='yellow'>What Is Web Hosting? Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AXVZYzw8geg' colorScheme='yellow'>Different Types of Web Hosting Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Kx_1NYYJS7Q' colorScheme='yellow'>Where to Host a Fullstack Project on a Budget</BadgeLink>

public/sitemap.xml

@@ -3,7 +3,7 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2021-12-07T13:12:30.171Z</lastmod>
+              <lastmod>2021-12-07T20:45:44.001Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>