21 improve the landing page to clearly show what the company does

.changeset/wicked-pears-like.md

@@ -0,0 +1,5 @@
+---
+"website": patch
+---
+
+Improve the landing page to clearly show what the company does

src/components/Orbiter.astro

@@ -120,6 +120,26 @@
       revolve var(--speed) linear infinite,
       hide var(--speed) linear infinite;
     animation-delay: calc(var(--speed) * -1 * (var(--sibling-index) - 1) / var(--sibling-count));
+    position: relative;
+  }
+
+  :global(.orbit):hover > :global(*) {
+    animation-play-state: paused;
+  }
+
+  :global(.orbit) > :global(*):hover::after {
+    content: attr(data-label);
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.9rem;
+    color: white;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.5rem;
+    white-space: nowrap;
+    pointer-events: none;
   }
 
   @container (width > 40rem) {

src/content.config.ts

@@ -37,6 +37,7 @@ const productsCollection = defineCollection({
     z.object({
       title: z.string(),
       summary: z.string(),
+      buttonText: z.string(),
     }),
   ),
 });

src/content/products/de/criteriacatalog.md

@@ -1,6 +1,7 @@
 ---
 title: Criteria Catalog
 summary: Der Criteria Catalog ist ein flexibles und anpassbares System zur Verwaltung von Kriterien für verschiedene Anwendungen.
+buttonText: Mehr erfahren
 ---
 
 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.

src/content/products/de/sparkium.md

@@ -1,6 +1,7 @@
 ---
 title: Sparkium
 summary: Sparkium ist ein modernes Datenschema für die Speicherung von eLearning-Inhalten.
+buttonText: Schema anzeigen
 ---
 
 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.

src/content/products/de/sparklink.md

@@ -1,6 +1,7 @@
 ---
 title: SparkLink
 summary: SparkLink synchronizes eLearning content between sources like Git and LMS such as Moodle.
+buttonText: Demo ausprobieren
 ---
 
 Mit SparkLink können Sie eLearning-Inhalte zwischen Quellen wie Git und Lernmanagementsystemen (LMS) wie Moodle synchronisieren. Dies erleichtert die Verwaltung von Kursmaterialien.

src/content/products/en/criteriacatalog.md

@@ -1,6 +1,7 @@
 ---
-title: Criteria Catalog
+title: "Criteria Catalog 🗂️"
 summary: The Criteria Catalog is a flexible and customizable system for managing criteria across a variety of use cases.
+buttonText: Learn More
 ---
 
 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.

src/content/products/en/sparkium.md

@@ -1,6 +1,7 @@
 ---
-title: Sparkium
+title: "Sparkium 🧩"
 summary: Sparkium is a modern data schema for storing eLearning content.
+buttonText: View Schema
 ---
 
 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.

src/content/products/en/sparklink.md

@@ -1,6 +1,7 @@
 ---
-title: SparkLink
+title: "SparkLink 🔁"
 summary: SparkLink synchronizes eLearning content between sources like Git and LMS such as Moodle.
+buttonText: Try Demo
 ---
 
 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.

src/layouts/Shell.css

@@ -6,6 +6,7 @@
   --color-white-97: hsl(from var(--color-white) h s calc(l * 0.97));
   --color-white: #f9f9f9;
   --color-black: #333333;
+  --color-transition: #555;
 
   --size-font-quot: 3rem;
   --size-font-huge: 1.5rem;

src/layouts/sections/Grid.astro

@@ -28,9 +28,6 @@ const { ...attributes } = Astro.props;
     background-position:
       0px 0px,
       0px 0px;
-    background-image:
-      radial-gradient(60% 100% at 25% 75%, rgb(from var(--color-primary) r g b / 0.3) 0%, transparent 100%),
-      radial-gradient(60% 100% at 75% 25%, rgb(from var(--color-secondary) r g b / 0.3) 0%, transparent 100%);
   }
 
   .wrapper {
@@ -39,7 +36,11 @@ const { ...attributes } = Astro.props;
     box-sizing: border-box;
     width: 100%;
     background-color: rgb(from var(--color-white) r g b / 0.5);
-    border: var(--border-massive);
+    border-radius: 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.4);
     border-radius: var(--size-border-radius-large);
     padding: var(--size-gap-large);
   }

src/layouts/sections/Spotlight.astro

@@ -25,7 +25,7 @@ const { ...attributes } = Astro.props;
 
 <style>
   .wrapper {
-    background-color: rgb(from var(--color-white) r g b / 0.5);
+    background-color: rgb(from var(--color-white) r g b / 0.4);
     border: var(--border-massive);
     border-radius: var(--size-border-radius-large);
     gap: var(--size-gap);

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

@@ -41,7 +41,7 @@ const products = i18nProps(collection, {
             <p slot="description">{product.data.summary}</p>
             <Fragment slot="actions">
               <a href={product.translatedPath} class="button primary">
-                {messages.action({ product: product.data.title })}
+                {messages.action({ product: product.data.title.replace(/(\p{Extended_Pictographic}\uFE0F?)$/gu, "") })}
               </a>
             </Fragment>
           </Card>

src/pages/[...locale]/index.astro

@@ -25,10 +25,11 @@ import Contact from "../../layouts/groups/Contact.astro";
 export const getStaticPaths = generateGetStaticIndexPaths("[...locale]");
 
 const messages = useI18n("src/pages/[...locale]/index.astro", {
-  spotlightTitle: "Empowers and Connects",
-  spotlightContent: "Join us in our mission to empower and connect the EdTech space with our products.",
-  spotlightActionConnect: "Connect",
-  spotlightActionEmpower: "Empower",
+  spotlightTitle: "Intelligent plugins in the field of education",
+  spotlightContent:
+    "We are committed to developing innovative tools that empower educators, students, and developers in the field of educational technology.",
+  spotlightActionConnect: "Connect With Us",
+  spotlightActionEmpower: "Explore Products",
   spotlightActionEmpowerLink: "/products",
   empowerTitle: "Products that empower",
   connectTitle: "Connect with us",
@@ -55,6 +56,9 @@ const products = i18nProps(collection, {
   <Spotlight id="spotlight">
     <h1 slot="title">{messages.spotlightTitle}</h1>
     <p slot="content">{messages.spotlightContent}</p>
+    <p slot="content" id="transition">
+      Our products make education smarter, simpler, and more connected. Scroll down to see how ↓
+    </p>
     <Fragment slot="actions">
       <a href={messages.spotlightActionEmpowerLink} class="button primary">{messages.spotlightActionEmpower}</a>
       <a href="#connect" class="button">{messages.spotlightActionConnect}</a>
@@ -63,15 +67,15 @@ const products = i18nProps(collection, {
       <Image slot="host" alt="Our logo as the orbiters host" src={LogoSquare} />
       <Fragment slot="orbits">
         <div class="orbit">
-          <div>🎓</div>
-          <div>📚</div>
-          <div>💻</div>
-          <div>☁️</div>
-          <div>🧠</div>
-          <div>💬</div>
-          <div>🚀</div>
-          <div>💡</div>
-          <div>🧑‍🏫</div>
+          <div data-label="Education">🎓</div>
+          <div data-label="Books">📚</div>
+          <div data-label="Coding">💻</div>
+          <div data-label="Cloud">☁️</div>
+          <div data-label="Intelligence">🧠</div>
+          <div data-label="Message">💬</div>
+          <div data-label="Speed Up">🚀</div>
+          <div data-label="Solutions">💡</div>
+          <div data-label="Teaching">🧑‍🏫</div>
         </div>
         <div class="orbit">
           <Image alt="Logo of Moodle" src={MoodleLogo} />
@@ -96,7 +100,7 @@ const products = i18nProps(collection, {
             <h3>{product.data.title}</h3>
             <p>{product.data.summary}</p>
             <a href={product.translatedPath} class="button primary">
-              {messages.spotlightActionEmpower}
+              {product.data.buttonText}
             </a>
           </article>
         ))
@@ -137,6 +141,9 @@ const products = i18nProps(collection, {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    background-image:
+      radial-gradient(60% 100% at 75% 25%, rgb(from var(--color-primary) r g b / 0.3) 0%, transparent 100%),
+      radial-gradient(60% 100% at 25% 75%, rgb(from var(--color-secondary) r g b / 0.3) 0%, transparent 100%);
   }
 
   #spotlight,
@@ -147,27 +154,17 @@ const products = i18nProps(collection, {
     justify-content: center;
     min-height: 100vh;
     background-size: 100% 100%;
-    background-position:
-      0px 0px,
-      0px 0px;
-  }
-
-  #spotlight {
-    background-image:
-      radial-gradient(60% 100% at 75% 25%, rgb(from var(--color-primary) r g b / 0.3) 0%, transparent 100%),
-      radial-gradient(60% 100% at 25% 75%, rgb(from var(--color-secondary) r g b / 0.3) 0%, transparent 100%);
+    background-image: rgba(255, 255, 255, 0.8);
+    border-radius: 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.4);
   }
 
-  #empower {
-    background-image:
-      radial-gradient(60% 100% at 25% 75%, rgb(from var(--color-primary) r g b / 0.3) 0%, transparent 100%),
-      radial-gradient(60% 100% at 75% 25%, rgb(from var(--color-secondary) r g b / 0.3) 0%, transparent 100%);
-  }
-
-  #connect {
-    background-image:
-      radial-gradient(60% 100% at 75% 75%, rgb(from var(--color-primary) r g b / 0.3) 0%, transparent 100%),
-      radial-gradient(60% 100% at 25% 25%, rgb(from var(--color-secondary) r g b / 0.3) 0%, transparent 100%);
+  #transition {
+    font-size: var(--size-font-small);
+    color: var(--color-transition);
   }
 
   #empower article {
@@ -178,4 +175,52 @@ const products = i18nProps(collection, {
       width: fit-content;
     }
   }
+
+  #scroll-button {
+    position: fixed;
+    bottom: var(--size-gap);
+    right: var(--size-gap-small);
+    cursor: pointer;
+    display: flex;
+    border: none;
+    animation: bounce 2s infinite;
+    background-color: transparent;
+    padding: var(--size-gap-large);
+  }
+
+  #scroll-button img {
+    height: 4rem;
+    transition: transform 0.3s ease;
+  }
+
+  #scroll-button:hover img {
+    transform: scale(1.5);
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(var(--size-gap-small));
+    }
+  }
 </style>
+
+<script>
+  const scrollButton = document.getElementById("scroll-button")!;
+
+  const grids = Array.from(document.querySelectorAll<HTMLElement>("#empower, #connect"));
+  scrollButton.addEventListener("click", () => {
+    const scrollY = window.scrollY;
+    const nextGrid = grids.find((grid) => grid.offsetTop > scrollY);
+
+    if (nextGrid) {
+      nextGrid.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  });
+</script>