51 add sparkium page

src/components/FeatureCard.astro

@@ -0,0 +1,30 @@
+---
+import type { ImageMetadata } from "astro";
+
+type Props = {
+  feature: string;
+  spotlight: { alt: string; image: ImageMetadata };
+  description: string;
+};
+
+const { feature, spotlight, description } = Astro.props;
+---
+
+<div class="feature-card">
+  <h3>{feature}</h3>
+  <img src={spotlight.image.src} alt={spotlight.alt} />
+  <p>{description}</p>
+</div>
+
+<style>
+  .feature-card {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .feature-card img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+</style>

src/content/products/de/criteriacatalog.md → src/content/products/de/criteriacatalog.mdx

@@ -3,4 +3,11 @@ title: Criteria Catalog
 summary: Der Criteria Catalog ist ein flexibles und anpassbares System zur Verwaltung von Kriterien für verschiedene Anwendungen.
 ---
 
+import { Image } from "astro:assets";
+import Placeholder from "../../../../assets/placeholder/placeholder.svg";
+
 Der Criteria Catalog ist ein flexibles und anpassbares System zur Verwaltung von Kriterien für verschiedene Anwendungen. Es ermöglicht die einfache Erstellung, Bearbeitung und Organisation von Kriterien, die in verschiedenen Kontexten verwendet werden können. Durch seine modulare Struktur kann der Criteria Catalog leicht erweitert und angepasst werden, um spezifische Anforderungen zu erfüllen. Ideal für Prüfungsorganisationen, Bildungsinstitutionen und Unternehmen, die ein effektives Kriteriensystem benötigen. Der Criteria Catalog unterstützt verschiedene Formate und Standards, um eine breite Anwendbarkeit zu gewährleisten. Mit seiner benutzerfreundlichen Oberfläche und leistungsstarken Funktionen ist er ein unverzichtbares Werkzeug für die Verwaltung von Kriterien in modernen Anwendungen.
+
+<a href="https://example.com">
+  <Image src={Placeholder} alt="Criteria catalog image" />
+</a>

src/content/products/de/sparkium.md → src/content/products/de/sparkium.mdx

@@ -3,5 +3,11 @@ title: Sparkium
 summary: Sparkium ist ein modernes Datenschema für die Speicherung von eLearning-Inhalten.
 ---
 
+import { Image } from "astro:assets";
+import Placeholder from "../../../../assets/placeholder/placeholder.svg";
+
 Sparkium ist ein modernes Datenschema für die Speicherung von eLearning-Inhalten. Dadurch das es auf textbasierten Formaten wie Markdown basiert und ein strukturiertes Dateisystem verwendet, ist es zugänglich, leicht zu bearbeiten und versionierbar.
 
+<a href="https://example.com">
+  <Image src={Placeholder} alt="Sparkium image" />
+</a>

src/content/products/de/sparklink.md → src/content/products/de/sparklink.mdx

@@ -3,5 +3,11 @@ title: SparkLink
 summary: SparkLink synchronizes eLearning content between sources like Git and LMS such as Moodle.
 ---
 
+import { Image } from "astro:assets";
+import Placeholder from "../../../../assets/placeholder/placeholder.svg";
+
 Mit SparkLink können Sie eLearning-Inhalte zwischen Quellen wie Git und Lernmanagementsystemen (LMS) wie Moodle synchronisieren. Dies erleichtert die Verwaltung von Kursmaterialien.
 
+<a href="https://example.com">
+  <Image src={Placeholder} alt="Sparklink image" />
+</a>

src/content/products/en/criteriacatalog.md → src/content/products/en/criteriacatalog.mdx

@@ -3,4 +3,12 @@ title: Criteria Catalog
 summary: The Criteria Catalog is a flexible and customizable system for managing criteria across a variety of use cases.
 ---
 
+import { Image } from "astro:assets";
+import Placeholder from "../../../../assets/placeholder/placeholder.svg";
+
 The Criteria Catalog is a flexible and customizable system for managing criteria across different applications. It enables easy creation, editing, and organization of criteria that can be used in multiple contexts. Thanks to its modular structure, the Criteria Catalog can be easily extended and adapted to meet specific requirements. It is ideal for examination boards, educational institutions, and companies that need an effective criteria management system. The Criteria Catalog supports various formats and standards to ensure broad applicability. With its user‑friendly interface and powerful features, it is an essential tool for managing criteria in modern applications.
+
+<a href="https://example.com">
+  <Image src={Placeholder} alt="Criteria catalog image" />
+</a>
+

src/content/products/en/sparkium.mdx

@@ -0,0 +1,37 @@
+---
+title: Sparkium
+summary: Sparkium is a modern data schema for storing eLearning content.
+---
+
+import FeatureCard from "../../../components/FeatureCard.astro";
+import CardList from "../../../components/CardList.astro";
+import { Image } from "astro:assets";
+import Placeholder from "../../../../assets/placeholder/placeholder.svg";
+
+With Sparkium, you can store eLearning content in a modern data schema. Based on text-based formats like Markdown and using a structured file system, it is accessible, easy to edit, and versionable.
+
+<a href="https://example.com">
+  <Image src={Placeholder} alt="Sparkium image" />
+</a>
+
+<button class="button"> Explore </button>
+
+<CardList>
+  <FeatureCard
+    feature="Markdown-based"
+    spotlight={{ alt: "Markdown based", image: Placeholder}}
+    description="Write content in simple Markdown format."
+  />
+
+  <FeatureCard
+    feature="Version controlled"
+    spotlight={{ alt: "Version controlled", image: Placeholder}}
+    description="Track changes easily with Git."
+  />
+
+  <FeatureCard
+    feature="Structured"
+    spotlight={{ alt: "Structure", image: Placeholder}}
+    description="Organize content in a clean file system."
+  />
+</CardList>

src/content/products/en/sparklink.md → src/content/products/en/sparklink.mdx

@@ -3,4 +3,11 @@ title: SparkLink
 summary: SparkLink synchronizes eLearning content between sources like Git and LMS such as Moodle.
 ---
 
+import { Image } from "astro:assets";
+import Placeholder from "../../../../assets/placeholder/placeholder.svg";
+
 With SparkLink, you can synchronize eLearning content between sources like Git and learning management systems (LMS) such as Moodle. This helps in managing course materials.
+
+<a href="https://example.com">
+  <Image src={Placeholder} alt="Sparklink image" />
+</a>

src/layouts/templates/Article.astro

@@ -95,6 +95,13 @@ const { title, class: className } = Astro.props;
     }
   }
 
+  article.column-article {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--size-gap);
+  }
+
   header :global(h1) {
     margin: 0;
   }

src/pages/[...locale]/[products]/[product].astro

@@ -25,7 +25,7 @@ const { Content } = await render(page);
 
 <Shell translations={page.translations}>
   <Meta slot="meta" title={page.data.title} />
-  <Article>
+  <Article class="column-article">
     <h1 slot="title">{page.data.title}</h1>
     <Content />
   </Article>