Add marketing landing page

docusaurus.config.ts

@@ -3,9 +3,12 @@ import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'EduIDE Docs',
-  tagline: 'Documentation and product guidance for EduIDE',
+  title: 'edu ide — The IDE built for learning',
+  tagline: 'A browser-based development environment designed for education',
   favicon: 'img/logo.svg',
+  stylesheets: [
+    'https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Space+Grotesk:wght@600;700&display=swap',
+  ],
   future: {
     v4: true,
   },

src/components/landing/Button.module.css

@@ -0,0 +1,43 @@
+.btnPrimary {
+  background: var(--landing-teal);
+  color: #fff !important;
+  border: none;
+  padding: 13px 24px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  transition: background 0.15s, transform 0.1s;
+  text-decoration: none !important;
+  display: inline-block;
+}
+
+.btnPrimary:hover {
+  background: var(--landing-teal-dark);
+  color: #fff !important;
+}
+
+.btnPrimary:active {
+  transform: scale(0.98);
+}
+
+.btnSecondary {
+  background: transparent;
+  color: var(--landing-text) !important;
+  border: 0.5px solid var(--landing-border-med);
+  padding: 13px 24px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  transition: background 0.15s;
+  text-decoration: none !important;
+  display: inline-block;
+}
+
+.btnSecondary:hover {
+  background: var(--landing-surface);
+  color: var(--landing-text) !important;
+}

src/components/landing/Button.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary';
+  to: string;
+  target?: string;
+  children: React.ReactNode;
+}
+
+const Button = React.memo<ButtonProps>(function Button({
+  variant,
+  to,
+  target,
+  children,
+}) {
+  return (
+    <Link
+      className={variant === 'primary' ? styles.btnPrimary : styles.btnSecondary}
+      to={to}
+      target={target}
+      {...(target === '_blank' ? { rel: 'noopener noreferrer' } : {})}
+    >
+      {children}
+    </Link>
+  );
+});
+
+export default Button;

src/components/landing/CtaSection.module.css

@@ -0,0 +1,39 @@
+.ctaSection {
+  padding: 5rem 2rem;
+  text-align: center;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.ctaSection h2 {
+  font-size: 38px;
+  font-weight: 400;
+  margin-bottom: 1rem;
+  line-height: 1.15;
+  color: var(--landing-text);
+}
+
+.ctaSection p {
+  font-size: 16px;
+  color: var(--landing-muted);
+  margin-bottom: 2.5rem;
+  line-height: 1.7;
+}
+
+.ctaActions {
+  display: flex;
+  gap: 14px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 560px) {
+  .ctaSection h2 {
+    font-size: 28px;
+  }
+
+  .ctaActions {
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/components/landing/CtaSection.tsx

@@ -0,0 +1,26 @@
+import Button from "./Button";
+import styles from "./CtaSection.module.css";
+
+export default function CtaSection() {
+  return (
+    <section className={styles.ctaSection} aria-labelledby="cta-heading">
+      <h2 id="cta-heading">Ready to try EduIDE?</h2>
+      <p>
+        Open the IDE in your browser. Or deploy it for your next course in
+        minutes.
+      </p>
+      <div className={styles.ctaActions}>
+        <Button
+          variant="primary"
+          to="https://theia.artemis.cit.tum.de/"
+          target="_blank"
+        >
+          Get Started
+        </Button>
+        <Button variant="secondary" to="/student/intro">
+          Read the Docs
+        </Button>
+      </div>
+    </section>
+  );
+}

src/components/landing/FeatureShowcase.module.css

@@ -0,0 +1,140 @@
+.section {
+  padding: 5rem 2rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.inner {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.inner.reverse {
+  grid-template-columns: 1.5fr 1fr;
+}
+
+.inner.reverse .textCol {
+  order: 2;
+}
+
+.inner.reverse .mediaCol {
+  order: 1;
+}
+
+.textCol {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.label {
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--landing-teal);
+  margin-bottom: 0.75rem;
+}
+
+.textCol h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: var(--landing-text);
+  margin-bottom: 1rem;
+}
+
+.textCol p {
+  font-size: 16px;
+  color: var(--landing-muted);
+  line-height: 1.75;
+  margin-bottom: 1.5rem;
+}
+
+.link {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--landing-teal);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.mediaCol {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+  aspect-ratio: 16 / 10;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
+}
+
+.mediaCol.hasVideo {
+  background: none;
+  aspect-ratio: auto;
+  border-radius: 0;
+  box-shadow: none;
+  mask-image:
+    linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%),
+    linear-gradient(to bottom, transparent 0%, black 4%, black 88%, transparent 100%);
+  mask-composite: intersect;
+  -webkit-mask-image:
+    linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%),
+    linear-gradient(to bottom, transparent 0%, black 4%, black 88%, transparent 100%);
+  -webkit-mask-composite: source-in;
+}
+
+.mediaCol img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 16px;
+}
+
+.mediaCol video {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.gifPlaceholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+}
+
+.gifPlaceholder svg {
+  opacity: 0.5;
+}
+
+@media (max-width: 820px) {
+  .inner,
+  .inner.reverse {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .inner.reverse .textCol {
+    order: 0;
+  }
+
+  .inner.reverse .mediaCol {
+    order: 0;
+  }
+}