Update links

components/featured-content/guides.js

@@ -9,7 +9,7 @@ const FeaturedGuides = () => (
       <p className='border-through featured-separator'>
           <span>
             Guides mostly visited by the community&nbsp;
-            <Link href="/guides"><a className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a></Link>
+            <a href="/guides" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a>
           </span>
       </p>
       <div className="swim-lane row">

components/featured-content/roadmaps.js

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { FeaturedContentWrap } from './style';
 import roadmaps from 'storage/roadmaps';
 import FeaturedRoadmap from 'components/featured-roadmap';
@@ -10,9 +9,7 @@ const FeaturedRoadmaps = () => (
         <p className="border-through featured-separator">
             <span>
               Roadmaps mostly visited by the community&nbsp;
-              <Link href='/roadmaps'>
-                <a className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
-              </Link>
+              <a href='/roadmaps' className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
             </span>
         </p>
       </div>

components/featured-guide/index.js

@@ -1,5 +1,4 @@
-import Link from 'next/link';
-import formatDate from 'date-fns/format'
+import formatDate from 'date-fns/format';
 
 import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
 import { findByUsername } from 'lib/author';
@@ -7,9 +6,8 @@ import { findByUsername } from 'lib/author';
 const FeaturedGuide = ({ guide }) => {
   const author = findByUsername(guide.author) || {};
   return (
-    <div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container">
-      <Link href={ guide.url } passHref>
-        <BlockLink>
+    <div className='col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container'>
+      <BlockLink href={guide.url}>
         <BlockTitle>{guide.title}</BlockTitle>
         <BlockSubtitle>{guide.featuredDescription || guide.description}</BlockSubtitle>
         <BlockMeta>
@@ -20,9 +18,8 @@ const FeaturedGuide = ({ guide }) => {
           <PublishDate>{formatDate(new Date(guide.createdAt), 'MMMM d, yyyy')}</PublishDate>
         </BlockMeta>
       </BlockLink>
-      </Link>
     </div>
-  )
+  );
 };
 
 export default FeaturedGuide;

components/featured-roadmap/index.js

@@ -1,14 +1,11 @@
-import Link from 'next/link';
 import { BlockLink, BlockSubtitle, BlockTitle } from './style';
 
 const FeaturedRoadmap = ({ roadmap }) => (
-  <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-    <Link href={ roadmap.url } passHref>
-      <BlockLink>
+  <div className='col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container'>
+    <BlockLink href={roadmap.url}>
       <BlockTitle>{roadmap.title}</BlockTitle>
       <BlockSubtitle>{roadmap.featuredDescription || roadmap.description}</BlockSubtitle>
     </BlockLink>
-    </Link>
   </div>
 );
 

components/page-footer/index.js

@@ -9,7 +9,7 @@ const PageFooter = () => (
         <div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">
           <div className="site-meta">
             <div className="brand-detail">
-              <Link href="/"><a className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a></Link>
+              <a href="/" className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a>
               <span className="preposition">by</span>
               <a href="https://twitter.com/kamranahmedse" target="_blank" className='follow-author'>@kamranahmedse</a>
             </div>

components/roadmap-summary/style.js

@@ -14,6 +14,7 @@ export const UpcomingContainer = styled.div`
 export const Summary = styled.div`
   margin-top: 35px;
   min-height: 400px;
+  max-width: 1000px;
   display: block;
   position: relative;
   text-align: left;

components/site-nav/index.js

@@ -1,19 +1,18 @@
-import Link from 'next/link';
 import { HeaderWrap } from './style';
 
 const SiteNav = () => (
   <HeaderWrap>
-    <div className="top-row container">
-      <div className="flex-grow-1 brand">
-        <a href="/">
-          <img src="/static/brand.png" alt="" />
+    <div className='top-row container'>
+      <div className='flex-grow-1 brand'>
+        <a href='/'>
+          <img src='/static/brand.png' alt='' />
         </a>
       </div>
-      <div className="nav-links">
-        <Link href="/roadmaps"><a>Roadmaps</a></Link>
-        <Link href="/guides"><a>Guides</a></Link>
-        <Link href="/about"><a className="d-none d-md-inline-block">FAQ</a></Link>
-        <Link href="/signup"><a className="signup">Subscribe</a></Link>
+      <div className='nav-links'>
+        <a href='/roadmaps'>Roadmaps</a>
+        <a href='/guides'>Guides</a>
+        <a href='/about' className='d-none d-md-inline-block'>FAQ</a>
+        <a href='/signup' className='signup'>Subscribe</a>
       </div>
     </div>
   </HeaderWrap>