Add a glassmorphism landing page for Graduately.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/globals.css

@@ -0,0 +1,264 @@
+@import "tailwindcss";
+
+:root {
+  --ink: #0f2a2e;
+  --ink-muted: #3d5a5f;
+  --glass: rgba(255, 255, 255, 0.42);
+  --glass-strong: rgba(255, 255, 255, 0.58);
+  --glass-border: rgba(255, 255, 255, 0.55);
+  --accent: #e07a5f;
+  --accent-deep: #c45d42;
+  --teal: #1a8a8a;
+  --sand: #f2e8d5;
+  --font-display: var(--font-fraunces);
+  --font-body: var(--font-sora);
+}
+
+@theme inline {
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-accent: var(--accent);
+  --color-accent-deep: var(--accent-deep);
+  --color-teal: var(--teal);
+  --color-sand: var(--sand);
+  --font-sans: var(--font-sora);
+  --font-display: var(--font-fraunces);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  font-family: var(--font-body), system-ui, sans-serif;
+  background: #c8e4e0;
+  overflow-x: hidden;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--teal) 35%, transparent);
+  color: var(--ink);
+}
+
+.ambient {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 80% 60% at 10% 20%, #9fd4cf 0%, transparent 55%),
+    radial-gradient(ellipse 70% 50% at 90% 10%, #f0c9a8 0%, transparent 50%),
+    radial-gradient(ellipse 60% 55% at 70% 80%, #7eb8b4 0%, transparent 55%),
+    radial-gradient(ellipse 50% 40% at 20% 85%, #e8d4b8 0%, transparent 50%),
+    linear-gradient(160deg, #b8ddd8 0%, #d4ebe7 40%, #e8dfd0 100%);
+}
+
+.ambient__orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  opacity: 0.7;
+  animation: drift 18s ease-in-out infinite;
+}
+
+.ambient__orb--1 {
+  width: min(48vw, 520px);
+  height: min(48vw, 520px);
+  top: -8%;
+  left: -6%;
+  background: #6db8b2;
+  animation-delay: 0s;
+}
+
+.ambient__orb--2 {
+  width: min(42vw, 460px);
+  height: min(42vw, 460px);
+  top: 12%;
+  right: -8%;
+  background: #efb48a;
+  animation-delay: -6s;
+  animation-duration: 22s;
+}
+
+.ambient__orb--3 {
+  width: min(55vw, 600px);
+  height: min(55vw, 600px);
+  bottom: -15%;
+  left: 25%;
+  background: #8ec5c0;
+  animation-delay: -11s;
+  animation-duration: 26s;
+}
+
+.ambient__noise {
+  position: absolute;
+  inset: 0;
+  opacity: 0.07;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 180px;
+}
+
+@keyframes drift {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(3%, 4%) scale(1.05);
+  }
+  66% {
+    transform: translate(-2%, 2%) scale(0.96);
+  }
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float-y {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-12px);
+  }
+}
+
+.rise {
+  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.rise-delay-1 {
+  animation-delay: 0.12s;
+}
+
+.rise-delay-2 {
+  animation-delay: 0.24s;
+}
+
+.rise-delay-3 {
+  animation-delay: 0.36s;
+}
+
+.rise-delay-4 {
+  animation-delay: 0.5s;
+}
+
+.float-soft {
+  animation: float-y 7s ease-in-out infinite;
+}
+
+.glass {
+  background: var(--glass);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(22px) saturate(1.35);
+  -webkit-backdrop-filter: blur(22px) saturate(1.35);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.55) inset,
+    0 18px 40px rgba(15, 42, 46, 0.08);
+}
+
+.glass-strong {
+  background: var(--glass-strong);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(28px) saturate(1.4);
+  -webkit-backdrop-filter: blur(28px) saturate(1.4);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.65) inset,
+    0 22px 48px rgba(15, 42, 46, 0.1);
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.9rem 1.55rem;
+  border-radius: 14px;
+  background: var(--accent);
+  color: #fffaf6;
+  font-weight: 600;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+}
+
+.btn-primary:hover {
+  background: var(--accent-deep);
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.9rem 1.4rem;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.28);
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.45);
+  transform: translateY(-1px);
+}
+
+.section-title {
+  font-family: var(--font-display), Georgia, serif;
+  font-weight: 560;
+  font-size: clamp(1.75rem, 3.5vw, 2.45rem);
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  color: var(--ink);
+}
+
+.section-lead {
+  margin-top: 0.75rem;
+  max-width: 36rem;
+  color: var(--ink-muted);
+  font-size: 1.05rem;
+  line-height: 1.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ambient__orb,
+  .float-soft,
+  .rise,
+  .rise-delay-1,
+  .rise-delay-2,
+  .rise-delay-3,
+  .rise-delay-4 {
+    animation: none !important;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Fraunces, Sora } from "next/font/google";
+import "./globals.css";
+
+const sora = Sora({
+  variable: "--font-sora",
+  subsets: ["latin", "latin-ext"],
+  weight: ["400", "500", "600", "700"],
+});
+
+const fraunces = Fraunces({
+  variable: "--font-fraunces",
+  subsets: ["latin", "latin-ext"],
+  weight: ["500", "600", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "Graduately — příprava na maturitu",
+  description:
+    "Vzdělávací aplikace k přípravě na maturitu. Deutsch, sítě, hardware a čeština — na macOS, Windows, Linux, Android i iOS.",
+  openGraph: {
+    title: "Graduately",
+    description: "Procvičování k maturitě v jednom okně.",
+    type: "website",
+  },
+};
+
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html
+      lang="cs"
+      className={`${sora.variable} ${fraunces.variable} h-full antialiased`}
+    >
+      <body className="min-h-full font-sans">{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,24 @@
+import { Download } from "@/components/Download";
+import { Features } from "@/components/Features";
+import { Footer } from "@/components/Footer";
+import { Hero } from "@/components/Hero";
+import { Subjects } from "@/components/Subjects";
+
+export default function Home() {
+  return (
+    <div id="top" className="relative">
+      <div className="ambient" aria-hidden>
+        <div className="ambient__orb ambient__orb--1" />
+        <div className="ambient__orb ambient__orb--2" />
+        <div className="ambient__orb ambient__orb--3" />
+        <div className="ambient__noise" />
+      </div>
+
+      <Hero />
+      <Subjects />
+      <Features />
+      <Download />
+      <Footer />
+    </div>
+  );
+}

src/components/Download.tsx

@@ -0,0 +1,81 @@
+const platforms = [
+  {
+    name: "macOS",
+    note: "Apple Silicon",
+    href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-macos.zip",
+  },
+  {
+    name: "Windows",
+    note: "x64",
+    href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-windows.zip",
+  },
+  {
+    name: "Linux",
+    note: "x86_64",
+    href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-linux.zip",
+  },
+  {
+    name: "Android",
+    note: "8+",
+    href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-android.zip",
+  },
+  {
+    name: "iOS",
+    note: "26+",
+    href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-ios.zip",
+  },
+];
+
+export function Download() {
+  return (
+    <section id="stahnout" className="px-5 sm:px-8 lg:px-12 py-20 sm:py-28">
+      <div className="max-w-6xl mx-auto">
+        <div className="glass-strong rounded-[28px] p-8 sm:p-12">
+          <h2 className="section-title">Stáhni a nainstaluj</h2>
+          <p className="section-lead">
+            Zip rozbalíš a spustíš instalátor. Buildy se aktualizují samy z
+            větve builds.
+          </p>
+
+          <div className="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {platforms.map((platform) => (
+              <a
+                key={platform.name}
+                href={platform.href}
+                className="group flex items-center justify-between gap-4 rounded-2xl border border-white/50 bg-white/35 px-5 py-4 no-underline text-ink backdrop-blur-md transition-[background,transform] duration-200 hover:bg-white/55 hover:-translate-y-0.5"
+              >
+                <span>
+                  <span className="block font-semibold text-base">
+                    {platform.name}
+                  </span>
+                  <span className="block text-sm text-ink-muted mt-0.5">
+                    {platform.note}
+                  </span>
+                </span>
+                <span
+                  className="text-accent font-semibold text-sm tracking-wide transition-transform duration-200 group-hover:translate-x-0.5"
+                  aria-hidden
+                >
+                  ↓
+                </span>
+              </a>
+            ))}
+          </div>
+
+          <p className="mt-8 mb-0 text-sm text-ink-muted">
+            Zdrojáky a dokumentace jsou na{" "}
+            <a
+              href="https://github.com/pepaskopec-blip/Graduately"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-teal font-semibold underline-offset-2 hover:underline"
+            >
+              GitHubu
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Features.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+
+const features = [
+  {
+    title: "Učební cesty",
+    text: "Mapa předmětů, uzly lekcí a zamčené placeholdery, které čekají na obsah.",
+    image: "/screenshots/subjects.png",
+    alt: "Obrazovka s mapou předmětů",
+  },
+  {
+    title: "Cvičení s nápovědou",
+    text: "Německá cesta s vokabeltrainingem, tipy a postupem, který se ukládá.",
+    image: "/screenshots/german.png",
+    alt: "Německá učební cesta v Graduately",
+  },
+];
+
+export function Features() {
+  return (
+    <section id="funkce" className="px-5 sm:px-8 lg:px-12 py-8 sm:py-12 pb-20">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="section-title">Jak to vypadá uvnitř</h2>
+        <p className="section-lead">
+          Statistiky, hledání, deset témat a přepínač čeština / angličtina.
+        </p>
+
+        <div className="mt-12 grid gap-8 lg:gap-10">
+          {features.map((feature, index) => (
+            <article
+              key={feature.title}
+              className={`glass-strong rounded-[28px] overflow-hidden grid lg:grid-cols-2 ${
+                index % 2 === 1 ? "lg:[&>*:first-child]:order-2" : ""
+              }`}
+            >
+              <div className="p-8 sm:p-10 flex flex-col justify-center">
+                <h3 className="font-[family-name:var(--font-fraunces)] text-2xl sm:text-3xl font-semibold text-ink m-0">
+                  {feature.title}
+                </h3>
+                <p className="mt-3 mb-0 text-ink-muted text-lg leading-relaxed">
+                  {feature.text}
+                </p>
+              </div>
+              <div className="relative min-h-[240px] sm:min-h-[320px]">
+                <Image
+                  src={feature.image}
+                  alt={feature.alt}
+                  fill
+                  className="object-cover object-top"
+                  sizes="(max-width: 1024px) 100vw, 50vw"
+                />
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Footer.tsx

@@ -0,0 +1,14 @@
+export function Footer() {
+  return (
+    <footer className="px-5 sm:px-8 lg:px-12 pb-10 pt-4">
+      <div className="max-w-6xl mx-auto glass rounded-2xl px-6 py-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <p className="m-0 font-[family-name:var(--font-fraunces)] text-lg font-semibold text-ink">
+          Graduately
+        </p>
+        <p className="m-0 text-sm text-ink-muted">
+          Vzdělávací aplikace k přípravě na maturitu · open source
+        </p>
+      </div>
+    </footer>
+  );
+}

src/components/Hero.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+
+const GITHUB = "https://github.com/pepaskopec-blip/Graduately";
+
+export function Hero() {
+  return (
+    <header className="relative min-h-[100svh] flex flex-col overflow-hidden">
+      <div className="absolute inset-y-0 right-0 w-full lg:w-[56%] pointer-events-none">
+        <Image
+          src="/screenshots/welcome.png"
+          alt="Úvodní obrazovka aplikace Graduately"
+          fill
+          priority
+          className="object-cover object-[center_top] float-soft"
+          sizes="(max-width: 1024px) 100vw, 56vw"
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-[#c8e4e0]/75 via-[#c8e4e0]/25 to-[#c8e4e0]/80 lg:bg-gradient-to-r lg:from-[#b8ddd8] lg:via-[#b8ddd8]/55 lg:to-transparent"
+          aria-hidden
+        />
+      </div>
+
+      <nav className="relative z-10 rise flex items-center justify-between px-5 sm:px-8 lg:px-12 pt-6 pb-4">
+        <a
+          href="#top"
+          className="font-[family-name:var(--font-fraunces)] text-xl sm:text-2xl font-semibold tracking-tight text-ink no-underline"
+        >
+          Graduately
+        </a>
+        <div className="flex items-center gap-2 sm:gap-3">
+          <a href="#stahnout" className="btn-ghost !py-2.5 !px-3.5 text-sm">
+            Stáhnout
+          </a>
+          <a
+            href={GITHUB}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-primary !py-2.5 !px-3.5 text-sm"
+          >
+            GitHub
+          </a>
+        </div>
+      </nav>
+
+      <div className="relative z-10 flex-1 flex flex-col justify-center px-5 sm:px-8 lg:px-12 pb-16 pt-8 max-w-xl lg:max-w-[44%]">
+        <h1 className="rise rise-delay-1 font-[family-name:var(--font-fraunces)] text-[clamp(2.8rem,7vw,4.75rem)] font-semibold leading-[0.95] tracking-[-0.035em] text-ink m-0">
+          Graduately
+        </h1>
+        <p className="rise rise-delay-2 mt-5 font-[family-name:var(--font-fraunces)] text-[clamp(1.65rem,3.2vw,2.35rem)] font-medium leading-snug tracking-[-0.02em] text-ink m-0">
+          Maturita? To dáte.
+        </p>
+        <p className="rise rise-delay-3 mt-4 text-base sm:text-lg text-ink-muted leading-relaxed max-w-md m-0">
+          Procvičování k maturitě v jednom okně — česky i anglicky, se
+          statistikami a automatickými aktualizacemi.
+        </p>
+        <div className="rise rise-delay-4 mt-8 flex flex-wrap gap-3">
+          <a href="#stahnout" className="btn-primary">
+            Stáhnout aplikaci
+          </a>
+          <a href="#predmety" className="btn-ghost">
+            Co umí
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/Subjects.tsx

@@ -0,0 +1,54 @@
+const subjects = [
+  {
+    flag: "DE",
+    name: "Deutsch",
+    detail: "3 jednotky — cvičení, nápovědy a vokabeltraining",
+  },
+  {
+    flag: "NET",
+    name: "Správa počítačových sítí",
+    detail: "1. ročník, 27 lekcí včetně VLSM, teorie a kvízů",
+  },
+  {
+    flag: "HW",
+    name: "Technické vybavení",
+    detail: "Architektura, historie a základy bit/byte",
+  },
+  {
+    flag: "CZ",
+    name: "Český jazyk a literatura",
+    detail: "Mluvnice a 82 knih maturitní četby se zápisky a kvízy",
+  },
+];
+
+export function Subjects() {
+  return (
+    <section id="predmety" className="px-5 sm:px-8 lg:px-12 py-20 sm:py-28">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="section-title">Čtyři otevřené předměty</h2>
+        <p className="section-lead">
+          Další předměty jsou zatím zamčené placeholdery — obsah doroste.
+        </p>
+
+        <ul className="mt-12 grid gap-4 sm:grid-cols-2 list-none p-0 m-0">
+          {subjects.map((subject) => (
+            <li
+              key={subject.name}
+              className="glass rounded-2xl px-6 py-6 transition-[transform,background] duration-200 hover:-translate-y-0.5 hover:bg-[rgba(255,255,255,0.55)]"
+            >
+              <span className="inline-block text-xs font-bold tracking-[0.12em] text-teal mb-3">
+                {subject.flag}
+              </span>
+              <h3 className="font-[family-name:var(--font-fraunces)] text-xl font-semibold text-ink m-0">
+                {subject.name}
+              </h3>
+              <p className="mt-2 mb-0 text-ink-muted leading-relaxed">
+                {subject.detail}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}