diff --git a/agents.md b/agents.md
index dc408d5..a7e68bb 100644
--- a/agents.md
+++ b/agents.md
@@ -171,7 +171,8 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
(no `img`/`image`/`emoji`/`accent`). Status pill colors come from the `--status-*`
tokens in `web.css`, overridden for the dark desktop windows in `skeuo.css`
along with the row hairlines (`--index-line`). Above the split, the full-width
- **Freezmo** feature panel (`.web-feature` + `.web-feature-shot`) is the one
+ **Freezmo** launch panel (`.web-freezmo` — app-tinted glow, floating orbs,
+ gradient wordmark + "new" badge, feature bullets, Try/Source CTAs) is the one
place a **real screenshot** is used (`public/freezmo-app.webp`, the live
study app). The two remaining feature panels (`.web-split`) stretch
to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow`
diff --git a/src/app/components/WebLayout.tsx b/src/app/components/WebLayout.tsx
index b2ab559..34baf13 100644
--- a/src/app/components/WebLayout.tsx
+++ b/src/app/components/WebLayout.tsx
@@ -222,9 +222,10 @@ export default function WebLayout() {
Right now
- I left the maturita.c project to focus on my proxmox server (just popped in
- another 1.7TB hdd upgrade, 3 small hdds from ewaste laptops and I just
- ziplocked it into place and connected it lmao)
+ Started working on a new project{" "}
+ Freezmo, basically a free
+ version of the famous Gizmo app but instead of paying for AI you use your
+ ollama free cloud api key.
@@ -235,22 +236,53 @@ export default function WebLayout() {
-
-
-
- Started working on a new project Freezmo — basically a free version of the
- famous Gizmo app, but instead of paying for AI you use your ollama free cloud
- API key. Notes in, flashcards and quizzes out. Try it at{" "}
- freezmo.dvorakmortonxd.dev.
-
-
+
+
+
+
+
+
Freezmo
+
+ Introducing Freezmo
+ new
+
+
+ A free take on the famous Gizmo study app. Notes in, flashcards and quizzes
+ out — and instead of paying for AI, you plug in your own free Ollama cloud
+ API key.
+
+
+ - Notes in, flashcards & quizzes out
+ - AI grades your answers and explains what you missed
+ - Your own free Ollama cloud API key — no subscription
+
+
+
+
+
+
+
diff --git a/src/app/web.css b/src/app/web.css
index 6c18d28..fa3282c 100644
--- a/src/app/web.css
+++ b/src/app/web.css
@@ -448,16 +448,207 @@ html[data-theme="web"] body {
display: flex;
flex-direction: column;
}
-/* Real app screenshot inside a feature panel (Freezmo) — framed like the CSS
- mock windows so it sits in the same visual language. */
-.web-feature-shot {
+
+/* ============================================================
+ FREEZMO FEATURE
+ Full-width launch panel for the live study app: blue app-
+ tinted glow, floating orbs, gradient wordmark/badge, feature
+ bullets and CTAs, with the real screenshot tilted into place.
+ ============================================================ */
+.web-freezmo {
+ position: relative;
+ overflow: hidden;
+ padding: clamp(18px, 2.6vw, 30px);
+ border-radius: 22px;
+ background:
+ radial-gradient(55% 85% at 8% 0%, rgba(109, 94, 252, 0.2), transparent 62%),
+ radial-gradient(48% 78% at 96% 12%, rgba(47, 139, 255, 0.22), transparent 58%),
+ radial-gradient(40% 65% at 78% 100%, rgba(45, 212, 191, 0.12), transparent 62%),
+ linear-gradient(155deg, var(--glass-hi), var(--glass-lo));
+}
+.web-freezmo-orb {
+ position: absolute;
+ z-index: 0;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(
+ circle at 34% 30%,
+ rgba(255, 255, 255, 0.7),
+ rgba(96, 150, 255, 0.35) 45%,
+ rgba(30, 60, 140, 0.04) 74%
+ );
+ box-shadow: 0 0 60px rgba(80, 140, 255, 0.35);
+ animation: freezmo-float 8s ease-in-out infinite;
+}
+.web-freezmo-orb-a {
+ width: 130px;
+ height: 130px;
+ left: -46px;
+ bottom: -46px;
+}
+.web-freezmo-orb-b {
+ width: 74px;
+ height: 74px;
+ right: 40%;
+ top: -28px;
+ animation-duration: 10s;
+ animation-delay: -4s;
+}
+.web-freezmo-body {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
+ gap: clamp(20px, 3vw, 36px);
+ align-items: center;
+}
+.web-freezmo-copy {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+.web-freezmo-title {
+ margin: 8px 0 12px;
+ font-size: clamp(1.7rem, 3.4vw, 2.35rem);
+ font-weight: 800;
+ letter-spacing: -0.03em;
+ line-height: 1.08;
+}
+.web-freezmo-name {
+ background: linear-gradient(120deg, var(--web-accent), var(--web-accent-2));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+.web-freezmo-badge {
+ display: inline-block;
+ margin-left: 12px;
+ padding: 4px 10px 5px;
+ transform: translateY(-4px);
+ border-radius: 999px;
+ font-family: var(--font-custom-mono);
+ font-size: 0.6rem;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: #fff;
+ background: linear-gradient(120deg, var(--web-accent), var(--web-accent-2));
+ box-shadow: 0 10px 24px -10px var(--web-accent);
+}
+.web-freezmo-lead {
+ font-size: 0.95rem;
+ color: var(--web-muted);
+}
+.web-freezmo-points {
+ display: grid;
+ gap: 8px;
+ margin: 16px 0 20px;
+ padding: 0;
+ list-style: none;
+}
+.web-freezmo-points li {
+ display: flex;
+ gap: 10px;
+ align-items: baseline;
+ font-size: 0.86rem;
+ font-weight: 550;
+}
+.web-freezmo-points li::before {
+ content: "→";
+ font-weight: 700;
+ color: var(--web-accent-2);
+}
+.web-freezmo-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+.web-freezmo-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 11px 20px;
+ border-radius: 12px;
+ color: #fff;
+ font-size: 0.9rem;
+ font-weight: 700;
+ text-decoration: none;
+ background: linear-gradient(120deg, var(--web-accent), var(--web-accent-2));
+ box-shadow: 0 16px 34px -16px var(--web-accent);
+ transition: transform 0.16s ease, box-shadow 0.16s ease;
+}
+.web-freezmo-cta:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 20px 40px -16px var(--web-accent);
+ color: #fff;
+}
+.web-freezmo-cta span {
+ transition: transform 0.16s ease;
+}
+.web-freezmo-cta:hover span {
+ transform: translate(2px, -2px);
+}
+.web-freezmo-ghost {
+ display: inline-flex;
+ align-items: center;
+ padding: 11px 18px;
+ border-radius: 12px;
+ border: 1px solid var(--btn-border, var(--glass-border));
+ background: var(--btn-bg, var(--glass-lo));
+ color: var(--fg);
+ font-size: 0.9rem;
+ font-weight: 600;
+ text-decoration: none;
+ transition: background-color 0.16s ease, border-color 0.16s ease;
+}
+.web-freezmo-ghost:hover {
+ background: var(--btn-bg-hi, var(--glass-hi));
+ border-color: var(--accent-line);
+}
+.web-freezmo-shot {
+ position: relative;
+}
+.web-freezmo-shot::before {
+ content: "";
+ position: absolute;
+ inset: -14% -10% -18%;
+ background: radial-gradient(
+ 60% 60% at 55% 45%,
+ color-mix(in srgb, var(--web-accent-2) 28%, transparent),
+ transparent 70%
+ );
+ filter: blur(4px);
+}
+.web-freezmo-img {
+ position: relative;
display: block;
width: 100%;
height: auto;
- margin-bottom: 14px;
border-radius: 16px;
border: 1px solid var(--glass-border);
- box-shadow: 0 18px 36px -22px rgba(23, 32, 60, 0.5);
+ box-shadow: 0 34px 70px -34px rgba(8, 16, 40, 0.75);
+ transform: rotate(-1.2deg);
+ transition: transform 0.35s ease;
+}
+.web-freezmo-shot:hover .web-freezmo-img {
+ transform: rotate(0deg) translateY(-3px);
+}
+@keyframes freezmo-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-12px);
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ .web-freezmo-orb {
+ animation: none;
+ }
+ .web-freezmo-img {
+ transition: none;
+ }
}
/* ============================================================
FEATURE WINDOWS