---
title: Course Home
description: Learn with our interactive course
hide_table_of_contents: true
---

import TaskPlaceholder from '@theme/TaskPlaceholder';
import Text from '@theme/Task/Text';
import Hint from '@theme/Task/Hint';
import Solution from '@theme/Task/Solution';
import {
  HeroBanner,
  FancyHeader,
  CourseFeature,
  Included,
  NotIncluded,
  IconContainersSection,
  IconContainerBlock,
  GetStarted,
  Explore,
  ExploreItem,
  Columns,
  Left,
  Right,
  Block,
} from "@sp-days-framework/docusaurus-frontpage-collection";

<HeroBanner
  bannerText="Your Course Title Here"
  customSvg={{
    light: "img/sp-days-logo-color-light.svg",
    dark: "img/sp-days-logo-color-dark.svg",
  }}
/>

<FancyHeader>What You'll Learn</FancyHeader>

<CourseFeature>
  <Included>
    - **First Topic**: Brief description of the first main learning outcome
    - **Second Topic**: Brief description of the second main learning outcome
    - **Third Topic**: Brief description of the third main learning outcome
  </Included>
  <NotIncluded>
    - **Out of Scope Topic 1**: Explain why this isn't covered
    - **Out of Scope Topic 2**: Explain why this isn't covered
    - **Out of Scope Topic 3**: Explain why this isn't covered
  </NotIncluded>
</CourseFeature>

<FancyHeader as="h2">Prerequisites</FancyHeader>

<IconContainersSection>
  <IconContainerBlock
    title="Prerequisite 1"
    iconify="mdi:laptop"
    link="/course"
  />
  <IconContainerBlock
    title="Prerequisite 2"
    iconify="mdi:code-tags"
    link="/course"
  />
  <IconContainerBlock
    title="Prerequisite 3"
    iconify="mdi:database"
    link="/course"
  />
  <IconContainerBlock
    title="Prerequisite 4"
    iconify="mdi:cloud"
    link="/course"
  />
</IconContainersSection>

<FancyHeader as="h2">Course Structure</FancyHeader>

<Columns leftRatio="40">
  <Left>
    <Block>
      ## Self-Study
      
      - **Duration**: X hours
      - **Modules**: Y modules
      - **Hands-on Labs**: Z exercises
    </Block>
    <Block>
      ## With Instructor

      - **Duration**: X days
      - **Schedule**: Day by day breakdown
      - **Format**: In-person/Virtual/Hybrid
    </Block>
  </Left>
  <Right>
    <TaskPlaceholder title="Sample Task Title">
      <Text>
        Replace this text with your task description.

        **Task Objective:**
        Explain what the learner should accomplish.

        **Steps:**
        1. First step description
        2. Second step description
        3. Third step description

        **Expected Outcome:**
        Describe what success looks like.
      </Text>
      <Hint>
        Provide helpful hints here to guide learners without giving away the solution.
        
        - Hint 1: Point them in the right direction
        - Hint 2: Reference relevant documentation or concepts
        - Hint 3: Suggest tools or approaches to try
      </Hint>
      <Solution>
        Provide the complete solution here.
        
        ```language
        // Include code examples with proper syntax highlighting
        // Explain each important part
        ```
        
        **Explanation:**
        Walk through the solution step by step.
      </Solution>
    </TaskPlaceholder>
  </Right>
</Columns>

<GetStarted buttonText="Get Started" buttonLink="/course">
  ## Ready to Begin?
  
  Start your learning journey today with our comprehensive course materials.
  
  <Explore>
    <ExploreItem
      title="Interactive Tasks"
      iconify="ci:window-check"
      link="/course"
    >
      Access all course modules and lessons
    </ExploreItem>
    // CONDITIONAL: addon-resources (START)
    <ExploreItem
      title="Resources"
      iconify="mdi:book-open-variant"
      link="/resources"
    >
      Additional learning materials and references
    </ExploreItem>
    // CONDITIONAL: addon-resources (END)
    // CONDITIONAL: addon-slidev (START)
    <ExploreItem
      title="Presentations"
      iconify="mdi:television-play"
      link="/slidev"
    >
      View presentation slides and notes
    </ExploreItem>
    // CONDITIONAL: addon-slidev (END)
  </Explore>
</GetStarted>