---
import { AIFeaturedCoursesListing } from '../../components/AITutor/AIFeaturedCoursesListing';
import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
import { AITutorLayout } from '../../components/AITutor/AITutorLayout';
const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
---

<SkeletonLayout
  title='Roadmap AI'
  noIndex={true}
  ogImageUrl={ogImage}
  description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
>
  <AITutorLayout activeTab='stuff-picks' client:load>
    <section class='flex grow flex-col bg-gray-100'>
      <div class='container mx-auto flex max-w-3xl flex-col py-10 max-sm:py-4'>
        <AIFeaturedCoursesListing client:load />
      </div>
    </section>
  </AITutorLayout>
</SkeletonLayout>