Refresh UIT Studio README and launch demo

README.md

@@ -17,15 +17,27 @@
 ## UIT Studio
 
 <p align="center">
-  <img src="docs/assets/uit-studio-panda.png" alt="UIT Studio panda mascot" width="180">
+  <img src="docs/assets/uit-studio-launch.gif" alt="UIT Studio launch demo" width="800">
 </p>
 
-- **Your course space. Built to focus.**
-- Both installation methods launch the same local web Studio with `uit-studio`. The npm installation requires [Node.js 24.0+](https://nodejs.org/); native release packages include Node.js and the SSO Chromium runtime.
-- **See what's due. Find what you need. Get back to learning.**
-- Track deadlines, announcements, and course materials in one focused workspace.
-- Calendar keeps the next deadline visible. Announcements keep you in the loop. Reminders keep you ahead.
-- Studio runs locally in the background. Run `uit-studio stop` whenever you want to shut it down.
+UIT Studio is a local course workspace for:
+
+- browsing course materials, announcements, assignments, grades, and calendar;
+- starting Codex agent threads with course context;
+- free to start: [Codex CLI](https://developers.openai.com/codex/cli/) + [ChatGPT Desktop](https://chatgpt.com/download/), with ChatGPT sign-in.
+
+Sign in with UIT SSO or a legacy Moodle account. Both installation methods launch the same local web Studio with `uit-studio`; run `uit-studio stop` to shut it down.
+
+Agent mode requires the [Codex CLI](https://github.com/openai/codex):
+
+```bash
+npm install -g @openai/codex
+codex --login
+```
+
+The ChatGPT desktop app alone is not sufficient for agent mode.
+
+### Installation
 
 <details>
 <summary>macOS</summary>
@@ -79,26 +91,12 @@ uit-studio
 
 </details>
 
-### Agent mode requirement
-
-Course features work without Codex. Agent mode requires the **Codex CLI**:
-
-```bash
-npm install -g @openai/codex
-codex --login
-```
-
-The ChatGPT desktop app alone is not sufficient. Sign in to UIT Studio with UIT SSO or a legacy Moodle account.
-
-<p align="center">
-  <img src="docs/landing-page/assets/studio-courses.png" alt="UIT Studio courses workspace" width="860">
-</p>
-
-Ask with course context. Continue the same thread in Codex CLI or the ChatGPT desktop app.
-
-<p align="center">
-  <img src="docs/landing-page/assets/studio-chat.png" alt="UIT Studio agent workspace" width="860" style="border-radius: 8px;">
-</p>
+<table>
+  <tr>
+    <td><img src="docs/landing-page/assets/studio-courses.png" alt="UIT Studio courses workspace" width="100%"></td>
+    <td><img src="docs/landing-page/assets/studio-chat.png" alt="UIT Studio agent workspace" width="100%"></td>
+  </tr>
+</table>
 
 ---
 

docs/landing-page/index.html

@@ -11,7 +11,7 @@
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://ryanng1403.github.io/uit-cli/">
   <meta property="og:title" content="UIT STUDIO">
-  <meta property="og:description" content="One workspace. Every course.">
+  <meta property="og:description" content="Connect your UIT courses to Codex—browse materials, track deadlines, and run agent threads with course context in one local workspace.">
   <meta property="og:image" content="assets/studio-courses.png">
 
   <!-- Favicon / UIT Đậu Đậu -->
@@ -97,8 +97,8 @@ <h1 class="hero-title display" aria-label="UIT STUDIO">
         <span class="title-char" aria-hidden="true">U</span><span class="title-char" aria-hidden="true">I</span><span class="title-char" aria-hidden="true">T</span><span class="title-space" aria-hidden="true"></span><span class="title-char" aria-hidden="true">S</span><span class="title-char" aria-hidden="true">T</span><span class="title-char" aria-hidden="true">U</span><span class="title-char" aria-hidden="true">D</span><span class="title-char" aria-hidden="true">I</span><span class="title-char" aria-hidden="true">O</span>
       </h1>
 
-      <p class="hero-sub" aria-label="One workspace. Every course.">
-        <span class="hero-sub-copy" aria-hidden="true"><span class="subtitle-char">O</span><span class="subtitle-char">n</span><span class="subtitle-char">e</span><span class="subtitle-space"></span><span class="subtitle-char">w</span><span class="subtitle-char">o</span><span class="subtitle-char">r</span><span class="subtitle-char">k</span><span class="subtitle-char">s</span><span class="subtitle-char">p</span><span class="subtitle-char">a</span><span class="subtitle-char">c</span><span class="subtitle-char">e</span><span class="subtitle-char">.</span><span class="subtitle-space"></span><span class="subtitle-char">E</span><span class="subtitle-char">v</span><span class="subtitle-char">e</span><span class="subtitle-char">r</span><span class="subtitle-char">y</span><span class="subtitle-space"></span><span class="subtitle-char">c</span><span class="subtitle-char">o</span><span class="subtitle-char">u</span><span class="subtitle-char">r</span><span class="subtitle-char">s</span><span class="subtitle-char">e</span><span class="subtitle-char">.</span></span>
+      <p class="hero-sub" aria-label="Connect your UIT courses to Codex—browse materials, track deadlines, and run agent threads with course context in one local workspace.">
+        <span class="hero-sub-copy">Connect your UIT courses to Codex—browse materials, track deadlines, and run agent threads with course context in one local workspace.</span>
       </p>
 
       <div class="hero-actions">
@@ -144,6 +144,29 @@ <h1 class="hero-title display" aria-label="UIT STUDIO">
     </div>
   </header>
 
+  <!-- Product demo -->
+  <section class="studio-demo" aria-labelledby="studio-demo-heading">
+    <div class="container">
+      <div class="studio-demo-head">
+        <h2 id="studio-demo-heading" class="section-title-aura">See it in action.</h2>
+      </div>
+
+      <figure class="studio-demo-frame">
+        <video
+          class="studio-demo-video"
+          controls
+          playsinline
+          preload="metadata"
+          poster="assets/studio-courses.png"
+          aria-label="UIT Studio launch demo"
+        >
+          <source src="assets/uit-studio-launch-60fps.mp4" type="video/mp4">
+          Your browser does not support HTML video.
+        </video>
+      </figure>
+    </div>
+  </section>
+
   <!-- Platform Features Section -->
   <section id="platform" class="sec-platform">