Improve navigation design

src/components/Navigation/Navigation.astro

@@ -29,16 +29,14 @@ import { AccountDropdown } from './AccountDropdown';
       <!-- Desktop navigation items -->
       <div class='hidden gap-5 sm:flex sm:items-center'>
         <NavigationDropdown client:load />
-        <a href='/get-started' class='text-gray-400 hover:text-white'>
-          Start Here
-        </a>
         <RoadmapDropdownMenu client:load />
         <AIDropdownMenu client:load />
         <a
-          href='/teams'
-          class='group relative hidden text-gray-400 hover:text-white xl:block'
+          href='/premium'
+          class='group relative hidden items-center gap-1.5 font-medium text-yellow-400 transition-all duration-200 hover:text-yellow-300 xl:flex'
         >
-          Teams
+          <Icon icon='bolt' />
+          Upgrade to Pro
         </a>
       </div>
     </div>
@@ -89,10 +87,7 @@ import { AccountDropdown } from './AccountDropdown';
           </a>
         </li>
         <li>
-          <a
-            href='/ai'
-            class='text-xl hover:text-blue-300 md:text-lg'
-          >
+          <a href='/ai' class='text-xl hover:text-blue-300 md:text-lg'>
             AI Tutor
           </a>
         </li>

src/components/NavigationDropdown.tsx

@@ -1,12 +1,8 @@
 import {
-  BookOpenText,
-  CheckSquare,
-  FileQuestion,
-  FolderKanban,
-  Menu,
-  Shirt,
-  Video,
-  Database,
+  BookOpenText, FolderKanban,
+  Menu, Database,
+  ArrowRight,
+  Users
 } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { cn } from '../lib/classname.ts';
@@ -26,6 +22,13 @@ const links = [
     isHighlighted: false,
     isNew: true,
   },
+  {
+    link: '/get-started',
+    label: 'Get Started',
+    description: 'Pick a path and get started',
+    Icon: ArrowRight,
+    isHighlighted: false,
+  },
   {
     link: '/projects',
     label: 'Projects',
@@ -33,20 +36,6 @@ const links = [
     Icon: FolderKanban,
     isHighlighted: false,
   },
-  {
-    link: '/best-practices',
-    label: 'Best Practices',
-    description: "Do's and don'ts",
-    Icon: CheckSquare,
-    isHighlighted: false,
-  },
-  {
-    link: '/questions',
-    label: 'Questions',
-    description: 'Test and Practice your knowledge',
-    Icon: FileQuestion,
-    isHighlighted: false,
-  },
   {
     link: '/guides',
     label: 'Guides',
@@ -55,19 +44,11 @@ const links = [
     isHighlighted: false,
   },
   {
-    link: 'https://youtube.com/@roadmapsh',
-    label: 'Videos',
-    description: 'Animated and interactive content',
-    Icon: Video,
-    isExternal: true,
-    isHighlighted: false,
-  },
-  {
-    link: 'https://cottonbureau.com/people/roadmapsh',
-    label: 'Shop',
-    description: 'Get some cool swag',
-    Icon: Shirt,
-    isExternal: true,
+    link: '/teams',
+    label: 'Teams',
+    description: 'Collaborate with your team',
+    Icon: Users,
+    isExternal: false,
     isHighlighted: false,
   },
   {

src/components/TopNavDropdowns/AIDropdownMenu.tsx

@@ -49,7 +49,7 @@ export function AIDropdownMenu() {
     <NavigationDropdownMenu
       links={links}
       trigger={
-        <span className="group relative mr-3 flex items-center gap-1 text-blue-300 hover:text-white">
+        <span className="group relative flex items-center gap-1 hover:text-white">
           AI Tutor
           <ChevronDown className="inline-block h-3 w-3" strokeWidth={4} />
         </span>

src/icons/bolt.svg

@@ -0,0 +1,5 @@
+<svg class='w-4 h-4 fill-current' viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M7.41016 2.5C7.05632 2.5 6.75061 2.74731 6.6767 3.09336L4.4267 13.6285C4.37942 13.8499 4.43468 14.0809 4.57707 14.2569C4.71947 14.4329 4.93376 14.5352 5.16016 14.5352H10.6842L10.0637 21.6852C10.0338 22.0302 10.244 22.3509 10.5724 22.4611C10.9008 22.5712 11.2619 22.4422 11.4461 22.1489L19.4749 9.36368C19.6201 9.13255 19.6282 8.84081 19.4962 8.60195C19.3641 8.36309 19.1127 8.21482 18.8398 8.21482L13.1876 8.21482L15.368 3.56863C15.477 3.33632 15.4597 3.0644 15.3221 2.8478C15.1845 2.6312 14.9457 2.5 14.6891 2.5H7.41016Z"
+        fill="currentColor" />
+</svg>

src/pages/premium.astro

@@ -3,7 +3,63 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import { PremiumPage } from '../components/Premium/PremiumPage';
 ---
 
-<BaseLayout title='Roadmaps for teams' permalink={'/teams'}>
+<BaseLayout 
+  title='Premium Features - AI-Powered Learning | roadmap.sh'
+  description='Unlock unlimited AI-powered learning with roadmap.sh Premium. Generate unlimited courses, get career guidance, instant AI answers, and access exclusive features for just $10/month.'
+  keywords={[
+    'roadmap.sh premium',
+    'ai learning platform',
+    'developer education',
+    'programming courses',
+    'career guidance',
+    'ai tutor',
+    'coding roadmaps',
+    'tech learning subscription',
+    'developer tools',
+    'unlimited courses',
+    'ai-powered education',
+    'programming mentor'
+  ]}
+  permalink={'/premium'}
+  jsonLd={[
+    {
+      '@context': 'https://schema.org',
+      '@type': 'Product',
+      name: 'roadmap.sh Premium',
+      description: 'AI-powered learning platform for developers with unlimited courses, career guidance, and instant AI support.',
+      brand: {
+        '@type': 'Brand',
+        name: 'roadmap.sh'
+      },
+      offers: [
+        {
+          '@type': 'Offer',
+          name: 'Monthly Plan',
+          price: '10.00',
+          priceCurrency: 'USD',
+          priceValidUntil: '2025-12-31',
+          availability: 'https://schema.org/InStock',
+          url: 'https://roadmap.sh/premium'
+        },
+        {
+          '@type': 'Offer',
+          name: 'Yearly Plan',
+          price: '100.00',
+          priceCurrency: 'USD',
+          priceValidUntil: '2025-12-31',
+          availability: 'https://schema.org/InStock',
+          url: 'https://roadmap.sh/premium'
+        }
+      ],
+      aggregateRating: {
+        '@type': 'AggregateRating',
+        ratingValue: '4.8',
+        bestRating: '5',
+        ratingCount: '1000'
+      }
+    }
+  ]}
+>
   <PremiumPage client:load />
 
   <div slot='changelog-banner'></div>