move Freezmo news to the Right now tile, rework Freezmo panel into a real launch section

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`

src/app/components/WebLayout.tsx

@@ -222,9 +222,10 @@ export default function WebLayout() {
             <article id="now" className="web-tile glass">
               <h3 className="web-tile-title">Right now</h3>
               <p className="web-tile-text">
-                I left the maturita.c project to focus on my proxmox server (just popped in
+                Started working on a new project{" "}
-                another 1.7TB hdd upgrade, 3 small hdds from ewaste laptops and I just
+                <a href="https://freezmo.dvorakmortonxd.dev">Freezmo</a>, basically a free
-                ziplocked it into place and connected it lmao)
+                version of the famous Gizmo app but instead of paying for AI you use your
+                ollama free cloud api key.
               </p>
             </article>
 
@@ -235,22 +236,53 @@ export default function WebLayout() {
             </article>
           </div>
 
-          <Section eyebrow="FREEZMO" title="Introducing Freezmo" className="web-feature">
+          <section className="web-freezmo glass">
-            <Image
+            <span className="web-freezmo-orb web-freezmo-orb-a" aria-hidden="true" />
-              src="/freezmo-app.webp"
+            <span className="web-freezmo-orb web-freezmo-orb-b" aria-hidden="true" />
-              alt="Freezmo quiz screen — a history question about the Schuman plan with AI grading feedback"
+            <div className="web-freezmo-body">
-              width={1941}
+              <div className="web-freezmo-copy">
-              height={942}
+                <span className="web-eyebrow">Freezmo</span>
-              sizes="(max-width: 900px) 100vw, 1100px"
+                <h2 className="web-freezmo-title">
-              className="web-feature-shot"
+                  Introducing <span className="web-freezmo-name">Freezmo</span>
-            />
+                  <span className="web-freezmo-badge">new</span>
-            <p className="web-feature-text">
+                </h2>
-              Started working on a new project Freezmo — basically a free version of the
+                <p className="web-freezmo-lead">
-              famous Gizmo app, but instead of paying for AI you use your ollama free cloud
+                  A free take on the famous Gizmo study app. Notes in, flashcards and quizzes
-              API key. Notes in, flashcards and quizzes out. Try it at{" "}
+                  out — and instead of paying for AI, you plug in your own free Ollama cloud
-              <a href="https://freezmo.dvorakmortonxd.dev">freezmo.dvorakmortonxd.dev</a>.
+                  API key.
-            </p>
+                </p>
-          </Section>
+                <ul className="web-freezmo-points">
+                  <li>Notes in, flashcards &amp; quizzes out</li>
+                  <li>AI grades your answers and explains what you missed</li>
+                  <li>Your own free Ollama cloud API key — no subscription</li>
+                </ul>
+                <div className="web-freezmo-actions">
+                  <a
+                    className="web-freezmo-cta"
+                    href="https://freezmo.dvorakmortonxd.dev"
+                  >
+                    Try Freezmo <span aria-hidden="true">↗</span>
+                  </a>
+                  <a
+                    className="web-freezmo-ghost"
+                    href="https://git.dvorakmortonxd.dev/dvorakmortonxd/freezmo"
+                  >
+                    Source on GitDXD
+                  </a>
+                </div>
+              </div>
+              <div className="web-freezmo-shot">
+                <Image
+                  src="/freezmo-app.webp"
+                  alt="Freezmo quiz screen — a history question about the Schuman plan with AI grading feedback"
+                  width={1941}
+                  height={942}
+                  sizes="(max-width: 900px) 100vw, 560px"
+                  className="web-freezmo-img"
+                />
+              </div>
+            </div>
+          </section>
 
           <div className="web-split">
             <Section eyebrow="REVIVAL.INC" title="Revival Inc." className="web-feature">

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