@sp-days-framework/create-sp-days 1.0.0

package/templates/addon-resources/resources/frontpage-collection/components/ContentBlock.mdx

@@ -0,0 +1,126 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { Block } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Content Block
+
+A simple styled block container for highlighting content.
+
+<div className="preview">
+  <div className="container">
+    <Block>
+      ### Example Block
+      
+      This is a live example of the Block component with hover effect.
+      
+      - **Feature 1**: Styled container
+      - **Feature 2**: Hover animation
+      - **Feature 3**: Perfect for side content
+    </Block>
+  </div>
+</div>
+
+## Features
+
+- Hover effect
+- Works great in columns or standalone
+
+## Import
+
+<Tabs>
+  <TabItem value="individual" label="Individual import" default>
+    ```mdx
+    import { Block } from "@sp-days-framework/docusaurus-frontpage-collection";
+    ```
+  </TabItem>
+  <TabItem value="default" label="Default import">
+    ```mdx
+    import Block from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/Block";
+    ```
+  </TabItem>
+</Tabs>
+
+## Basic Usage
+
+```mdx
+<Block>
+  ## Quick Info
+  
+  - **Duration**: 4 weeks
+  - **Effort**: 10 hours/week
+  - **Level**: Intermediate
+</Block>
+```
+
+## Props
+
+| Prop        | Type        | Description            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Additional CSS classes |
+| `children`  | `ReactNode` | Markdown content       |
+
+## Examples
+
+### Simple Block
+
+```mdx
+<Block>
+  ### Important Note 
+  
+  Remember to complete all iconContainers before starting.
+</Block>
+```
+
+### With Custom Class
+
+```mdx
+<Block className="my-custom-class">Custom styled content</Block>
+```
+
+### In Columns
+
+```mdx
+import {
+  Columns,
+  Left,
+  Right,
+  Block,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<Columns leftRatio="65">
+  <Left>
+    Main content goes here...
+  </Left>
+  <Right>
+    <Block>
+      ### Course Stats
+      
+      - 1,000+ students
+      - 4.8/5 rating
+      - Updated monthly
+    </Block>
+  </Right>
+</Columns>
+```
+
+### Multiple Blocks
+
+```mdx
+<Block>
+  ### Module 1
+  
+  Introduction to Docker
+</Block>
+
+<Block>
+  ### Module 2
+  
+  Container Management
+</Block>
+
+<Block>
+  ### Module 3
+  
+  Image Building
+</Block>
+```

package/templates/addon-resources/resources/frontpage-collection/components/CourseFeature.mdx

@@ -0,0 +1,147 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import {
+  CourseFeature,
+  Included,
+  NotIncluded,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Course Feature Section
+
+A card-based component for displaying what's included and not included in your course.
+
+<div className="preview">
+  <div className="container" style={{ width: '-webkit-fill-available'}}>
+    <CourseFeature>
+      <Included>
+        - **Core Concepts**: Learn the fundamentals
+        - **Hands-on Labs**: Practice with real examples
+        - **Certificate**: Earn a completion certificate
+      </Included>
+      <NotIncluded>
+        - **Advanced Topics**: Covered in advanced course
+        - **1-on-1 Mentoring**: Available as add-on
+      </NotIncluded>
+    </CourseFeature>
+  </div>
+</div>
+
+## Features
+
+- Side-by-side included/not included cards
+- Built-in success/danger colored icons
+- Hover animations on cards and icons
+- Support for custom icons
+- Responsive layout
+- Equal height cards
+
+## Import
+
+<Tabs>
+  <TabItem value="individual" label="Individual import" default>
+    ```mdx
+    import {
+      CourseFeature,
+      Included,
+      NotIncluded,
+    } from "@sp-days-framework/docusaurus-frontpage-collection";
+    ```
+  </TabItem>
+  <TabItem value="default" label="Default import">
+    ```mdx
+    import CourseFeature, { Included, NotIncluded } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/CourseFeature";
+    ```
+  </TabItem>
+</Tabs>
+
+## Basic Usage
+
+```mdx
+<CourseFeature>
+  <Included>
+    - **Docker Fundamentals**: Core concepts and architecture
+    - **Container Management**: Creating and managing containers
+    - **Image Building**: Building custom images
+  </Included>
+  <NotIncluded>
+    - **Kubernetes**: Covered in advanced course
+    - **CI/CD Pipelines**: Separate course available
+  </NotIncluded>
+</CourseFeature>
+```
+
+## Props
+
+### CourseFeature
+
+| Prop                       | Type                   | Default    | Description                                       |
+| -------------------------- | ---------------------- | ---------- | ------------------------------------------------- |
+| `children`                 | `ReactNode`            | required   | Included/NotIncluded components or direct content |
+| `iconifyIncluded`          | `IconifyConfig\|string`| Check icon | Iconify icon for included section                 |
+| `customSvgIncluded`        | `CustomSvgConfig`      | -          | Custom SVG file for included section (supports color override) |
+| `customImageIncluded`      | `CustomImageConfig`    | -          | Custom image file (PNG/JPEG) for included section |
+| `iconifyNotIncluded`       | `IconifyConfig\|string`| Cross icon | Iconify icon for not included section             |
+| `customSvgNotIncluded`     | `CustomSvgConfig`      | -          | Custom SVG file for not included section (supports color override) |
+| `customImageNotIncluded`   | `CustomImageConfig`    | -          | Custom image file (PNG/JPEG) for not included section |
+| `included`                 | `boolean`              | `true`     | Legacy prop for single card mode                  |
+
+### Included / NotIncluded
+
+| Prop       | Type        | Description      |
+| ---------- | ----------- | ---------------- |
+| `children` | `ReactNode` | Markdown content |
+
+## Examples
+
+### Standard Usage
+
+```mdx
+<CourseFeature>
+  <Included>
+    - **Core Concepts**: Fundamentals
+    - **Hands-on Labs**: Practical exercises
+    - **Real Examples**: Production code
+  </Included>
+  <NotIncluded>
+    - **Advanced Topics**: In advanced course
+    - **Certification**: Available separately
+  </NotIncluded>
+</CourseFeature>
+```
+
+### With Custom Icons
+
+```mdx
+<CourseFeature
+  iconifyIncluded="mdi:check-circle"
+  iconifyNotIncluded="mdi:close-circle"
+>
+  <Included>
+    Content...
+  </Included>
+  <NotIncluded>
+    Not included...
+  </NotIncluded>
+</CourseFeature>
+```
+
+### Only Included
+
+```mdx
+<CourseFeature>
+  <Included>
+    - Everything you need
+    - Lifetime access
+    - Free updates
+  </Included>
+</CourseFeature>
+```
+
+## Default Icons
+
+The component uses inline SVG icons with CSS variable colors:
+
+- **Included**: Green check circle (`var(--ifm-color-success)`)
+- **Not Included**: Red cross circle (`var(--ifm-color-danger)`)
+
+These automatically adapt to your Docusaurus theme colors.

package/templates/addon-resources/resources/frontpage-collection/components/FancyHeader.mdx

@@ -0,0 +1,76 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { FancyHeader } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Fancy Header
+
+A header component with a decorative underline accent.
+
+<div className="preview">
+  <div className="container">
+    <FancyHeader as="h3">This is a Live Example</FancyHeader>
+  </div>
+</div>
+
+## Features
+
+- Decorative underline accent
+- Customizable heading level
+- Primary color accent
+- Automatic spacing
+- Scroll margin for anchor links
+
+## Import
+
+<Tabs>
+  <TabItem value="individual" label="Individual import" default>
+    ```mdx
+    import { FancyHeader } from "@sp-days-framework/docusaurus-frontpage-collection";
+    ```
+  </TabItem>
+  <TabItem value="default" label="Default import">
+    ```mdx
+    import FancyHeader from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/FancyHeader";
+    ```
+  </TabItem>
+</Tabs>
+
+## Basic Usage
+
+```mdx
+<FancyHeader>Section Title</FancyHeader>
+```
+
+## Props
+
+| Prop        | Type                                           | Default  | Description            |
+| ----------- | ---------------------------------------------- | -------- | ---------------------- |
+| `as`        | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h2'`   | Heading level          |
+| `className` | `string`                                       | -        | Additional CSS classes |
+| `children`  | `ReactNode`                                    | required | Header text            |
+
+## Examples
+
+### Default (h2)
+
+```mdx
+<FancyHeader>What You'll Learn</FancyHeader>
+```
+
+### Different Heading Levels
+
+```mdx
+<FancyHeader as="h1">Main Title</FancyHeader>
+
+<FancyHeader as="h2">Section Title</FancyHeader>
+
+<FancyHeader as="h3">Subsection Title</FancyHeader>
+```
+
+### With Custom Class
+
+```mdx
+<FancyHeader as="h2" className="my-custom-class">
+  Custom Styled Header
+</FancyHeader>
+```

package/templates/addon-resources/resources/frontpage-collection/components/GetStarted.mdx

@@ -0,0 +1,222 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import {
+  GetStarted,
+  Explore,
+  ExploreItem,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Get Started
+
+A call-to-action component with an optional explore grid for additional resources.
+
+<div className="preview">
+  <div className="container" style={{ paddingBottom: '1.5rem' }}>
+    <GetStarted buttonText="Get Started" buttonLink="/resources">
+      ## Ready to Begin?
+      
+      Start your learning journey today with our comprehensive course materials.
+      
+      <Explore>
+        <ExploreItem
+          title="Interactive Tasks"
+          iconify="ci:window-check"
+          link="/resources"
+        >
+          Access all course modules and lessons
+        </ExploreItem>
+        <ExploreItem
+          title="Resources"
+          iconify="mdi:book-open-variant"
+          link="/resources"
+        >
+          Additional learning materials and references
+        </ExploreItem>
+        <ExploreItem
+          title="Presentations"
+          iconify="mdi:television-play"
+          link="/resources"
+        >
+          View presentation slides and notes
+        </ExploreItem>
+      </Explore>
+    </GetStarted>
+  </div>
+</div>
+
+## Features
+
+- Central call-to-action button with pop animation
+- Optional explore grid
+- Responsive layout
+- Icon support for explore items
+- Hover effects with customizable colors
+- Optional animation disable
+
+## Import
+
+<Tabs>
+  <TabItem value="individual" label="Individual import" default>
+    ```mdx
+    import {
+      GetStarted,
+      Explore,
+      ExploreItem,
+    } from "@sp-days-framework/docusaurus-frontpage-collection";
+    ```
+  </TabItem>
+  <TabItem value="default" label="Default import">
+    ```mdx
+    import GetStarted, { Explore, ExploreItem } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/GetStarted";
+    ```
+  </TabItem>
+</Tabs>
+
+## Basic Usage
+
+```mdx
+<GetStarted buttonText="Start Learning" buttonLink="/docs/intro">
+  ## Ready to Begin?
+  
+  Start with Module 1 and begin your journey!
+  
+  <Explore>
+    <ExploreItem
+      title="Documentation"
+      iconify="mdi:book-open-variant"
+      link="/docs"
+    >
+      Comprehensive guides
+    </ExploreItem>
+    <ExploreItem
+      title="Examples"
+      iconify="mdi:code-tags"
+      link="/examples"
+    >
+      Sample projects
+    </ExploreItem>
+  </Explore>
+</GetStarted>
+```
+
+## Props
+
+### GetStarted
+
+| Prop         | Type        | Description                                          |
+| ------------ | ----------- | ---------------------------------------------------- |
+| `buttonText` | `string`    | Text for the CTA button                              |
+| `buttonLink` | `string`    | Link for the CTA button                              |
+| `children`   | `ReactNode` | Content displayed above button and Explore component |
+
+### Explore
+
+| Prop       | Type        | Default   | Description                |
+| ---------- | ----------- | --------- | -------------------------- |
+| `children` | `ReactNode` | required  | ExploreItem components     |
+| `minWidth` | `string`    | `'250px'` | Minimum width for items    |
+| `columns`  | `number`    | `0`       | Fixed columns (0 for auto) |
+
+### ExploreItem
+
+| Prop              | Type                   | Description                           |
+| ----------------- | ---------------------- | ------------------------------------- |
+| `title`           | `string`               | Item title                            |
+| `iconify`         | `IconifyConfig\|string`| Iconify icon name or configuration    |
+| `customSvg`       | `CustomSvgConfig`      | Custom SVG files for light/dark themes (supports color override) |
+| `customImage`     | `CustomImageConfig`    | Custom image files (PNG/JPEG) for light/dark themes |
+| `iconColors`      | `IconColorConfig`      | Icon color overrides (light/dark/hover)|
+| `titleColors`     | `TitleColorConfig`     | Title color overrides (light/dark/hover)|
+| `disableAnimation`| `boolean`              | Disable hover animation (default: false)|
+| `link`            | `string`               | Link URL                              |
+| `children`        | `ReactNode`            | Description content                   |
+
+## Examples
+
+### Simple CTA
+
+```mdx
+<GetStarted buttonText="Get Started" buttonLink="/docs">
+  Ready to learn? Click below to start!
+</GetStarted>
+```
+
+### With Explore Grid
+
+```mdx
+<GetStarted buttonText="Start Learning" buttonLink="/docs/module1">
+  ## Ready for Launch?
+  
+  Begin your Docker journey today!
+  
+  <Explore>
+    <ExploreItem title="Documentation" iconify="mdi:book" link="/docs">
+      Complete reference guides
+    </ExploreItem>
+    <ExploreItem title="Video Tutorials" iconify="mdi:video" link="/videos">
+      Step-by-step videos
+    </ExploreItem>
+    <ExploreItem title="Community" iconify="mdi:forum" link="/community">
+      Join the discussion
+    </ExploreItem>
+  </Explore>
+</GetStarted>
+```
+
+### With Custom Colors
+
+```mdx
+<Explore>
+  <ExploreItem 
+    title="Documentation" 
+    iconify="mdi:book"
+    iconColors={{
+      light: "#1976d2",
+      lightHover: "#115293",
+      dark: "#90caf9",
+      darkHover: "#b3d9ff"
+    }}
+    titleColors={{
+      light: "#333333",
+      lightHover: "#1976d2"
+    }}
+    link="/docs"
+  >
+    Complete reference
+  </ExploreItem>
+</Explore>
+```
+
+### Disable Animations
+
+```mdx
+<Explore>
+  <ExploreItem 
+    title="Static Item" 
+    iconify="mdi:information"
+    disableAnimation={true}
+    link="/info"
+  >
+    No hover effects
+  </ExploreItem>
+</Explore>
+```
+
+### Fixed Column Layout
+
+```mdx
+<Explore columns={2}>
+  <ExploreItem title="Item 1" iconify="mdi:numeric-1" link="/1">
+    Content
+  </ExploreItem>
+  <ExploreItem title="Item 2" iconify="mdi:numeric-2" link="/2">
+    Content
+  </ExploreItem>
+  <ExploreItem title="Item 3" iconify="mdi:numeric-3" link="/3">
+    Content
+  </ExploreItem>
+  <ExploreItem title="Item 4" iconify="mdi:numeric-4" link="/4">
+    Content
+  </ExploreItem>
+</Explore>
+```