yawbtng · michaelnaeim · Mar 7, 2026 · Mar 7, 2026 · Mar 7, 2026 · Mar 7, 2026
diff --git a/README.md b/README.md
@@ -1,22 +1,24 @@
-<h1><a href="https://friday-michaelnaeims-projects.vercel.app/?_vercel_share=ZhKcM7DirPn47AoBzr2bMNmVR9zcJnGn">Friday</a></h1>
-
+<h1>Friday</h1>
 <p>
-    Privacy-first AI meeting assistant for local capture, live transcription, and meeting summaries. Friday is a native desktop app that records and summarizes meetings without shipping your raw audio or transcripts to the cloud. The product is built on a privacy-first local-first architecture with a Tauri desktop shell, Rust audio/transcription services, and a Next.js interface.
+    Privacy-first AI meeting assistant for local capture, live transcription, and meeting summaries. Friday is a native desktop app that records and summarizes meetings without shipping your raw audio or transcripts to the cloud. The product is built on a privacy-first local-first architecture with a Tauri desktop shell, Rust audio/transcription services, and a Next.js interface. 
+
+  Website Link : [tinyurl.com/2nvsk8ek](https://tinyurl.com/2nvsk8ek)
+
+  Demo Link : [youtu.be/QXsBkFJ8ack](https://youtu.be/QXsBkFJ8ack)
+
   </p>
 </div>
-<div align="center">
-  <img src="docs/FRIDAY_logo.jpg" width="1250" alt="Friday logo" />
-</div>
 
 
 <div align="center">
-  <img src="docs/friday_demo.gif" width="650" alt="Friday demo" />
+  <img src="docs/FRIDAY_logo.jpg" width="1250" alt="Friday logo" />
 </div>
 
 ---
 
 ## Table of Contents
 
+
 - [What Friday is for](#what-friday-is-for)
 - [Core capabilities](#core-capabilities)
 - [Project structure](#project-structure)

diff --git a/app.js b/app.js
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const triggerBox = document.getElementById('hero-video-trigger');
     const navWatchBtn = document.getElementById('nav-watch-btn');
 
-    const youtubeUrl = "https://www.youtube.com/embed/XqZsoesa55w?autoplay=1";
+    const youtubeUrl = "https://www.youtube.com/embed/QXsBkFJ8ack?autoplay=1";
 
     function openModal() {
         if(videoModal && youtubeIframe) {

diff --git a/assets/deepmind.png b/assets/deepmind.png
diff --git a/assets/langgraph.png b/assets/langgraph.png
diff --git a/index.css b/index.css
@@ -1,7 +1,7 @@
 :root {
     /* Simplistic Clean Creamy Palette */
-    --bg-base: #fdfbf7; /* Very soft cream */
-    --text-primary: #1f1f1f; /* Soft charcoal */
+    --bg-base: #FDFCFB; /* Warm off-white */
+    --text-primary: #333537; /* Dark charcoal - FRIDAY text & tagline */
     --text-secondary: #6e6e6e;
     --text-muted: #999999;
 
@@ -192,8 +192,10 @@ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 48px;
+    gap: 40px;
     flex-wrap: wrap;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 .tech-item {
     display: flex;
@@ -202,15 +204,39 @@ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height
     gap: 16px;
     opacity: 0.9;
     transition: all 0.3s ease;
+    cursor: pointer;
+}
+.tech-item img {
+    transition: all 0.3s ease;
+    filter: grayscale(100%) opacity(0.7);
+    object-fit: contain;
+}
+.tech-item svg {
+    transition: all 0.3s ease;
+    opacity: 0.7;
+    color: var(--text-secondary);
 }
 .tech-item:hover {
     opacity: 1;
     transform: translateY(-4px);
 }
+.tech-item:hover img {
+    filter: grayscale(0%) opacity(1);
+    transform: scale(1.1);
+}
+.tech-item:hover svg {
+    opacity: 1;
+    color: var(--text-primary);
+    transform: scale(1.1);
+}
 .tech-item span {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--text-secondary);
+    transition: color 0.3s ease;
+}
+.tech-item:hover span {
+    color: var(--text-primary);
 }
 
 /* Video Box Placeholder - Screenshot Match */
@@ -226,32 +252,58 @@ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height
 .hero-video-box {
     width: 100%;
     max-width: 480px;
-    aspect-ratio: 16/10;
-    background: #111111;
+    aspect-ratio: 16/9;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 40px;
     position: relative;
-    box-shadow: 0 30px 60px -10px rgba(0,0,0,0.1), 0 0 80px 20px rgba(0,0,0,0.05); /* Soft outer glow */
+    border: 1px solid rgba(0,0,0,0.08);
+    box-shadow: 0 20px 50px -15px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
     cursor: pointer;
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    overflow: hidden;
+}
+.hero-video-thumbnail {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+}
+.hero-video-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
+    pointer-events: none;
+}
+.hero-video-box:hover .hero-video-overlay {
+    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%);
 }
 .hero-video-box:hover {
     transform: translateY(-4px);
+    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
 }
 .video-btn-inner {
-    background: #333333;
+    background: var(--text-primary);
     color: white;
-    padding: 12px 24px;
-    border-radius: 8px;
+    padding: 14px 28px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     font-weight: 600;
     font-size: 1rem;
-    border: 1px solid rgba(255,255,255,0.1);
+    box-shadow: 0 4px 14px rgba(51,53,55,0.25);
+    position: relative;
+    z-index: 1;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.hero-video-box:hover .video-btn-inner {
+    transform: scale(1.02);
+    box-shadow: 0 6px 20px rgba(51,53,55,0.3);
 }
 
 .hero-stacked-ctas {

diff --git a/index.html b/index.html
@@ -48,8 +48,10 @@ <h1 style="font-size: clamp(4.5rem, 9vw, 8rem); font-family: var(--font-display)
                     Integrated with Google
                 </div>
 
-                <!-- Video Box Placeholder (Screenshot Match) -->
+                <!-- Video Box Placeholder with Thumbnail -->
                 <div class="hero-video-box scroll-reveal" id="hero-video-trigger" style="transition-delay: 0.2s;">
+                    <img class="hero-video-thumbnail" src="https://img.youtube.com/vi/QXsBkFJ8ack/maxresdefault.jpg" alt="Watch FRIDAY in action">
+                    <div class="hero-video-overlay"></div>
                     <div class="video-btn-inner">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                         Watch video
@@ -77,7 +79,7 @@ <h2>An agent that works <span class="text-glow">for you.</span></h2>
                 <div class="bento-card col-span-2 scroll-reveal" style="transition-delay: 0.1s;">
                     <div class="bento-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
                     <h3>Invisible Notetaker</h3>
-                    <p>No invasive bots joining your meetings. FRIDAY silently captures audio and generates structured notes locally on your machine, just like Granola.</p>
+                    <p>No bots in your calendar. FRIDAY runs entirely on your device—capturing audio and turning it into structured notes without sending a single byte to the cloud.</p>
                 </div>
 
                 <div class="bento-card scroll-reveal" style="transition-delay: 0.2s;">
@@ -108,10 +110,97 @@ <h2>Powered By Next-Gen Tech</h2>
                     <p>Built for speed, privacy, and autonomous intelligence.</p>
                 </div>
                 <div class="tech-grid">
-                    <div class="tech-item"><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" alt="Rust Core" width="48" height="48" style="filter: invert(41%) sepia(99%) saturate(3015%) hue-rotate(345deg) brightness(98%) contrast(92%);"><span>Rust Core</span></div>
-                    <div class="tech-item"><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" alt="Next.js" width="48" height="48"><span>Next.js Frontend</span></div>
-                    <div class="tech-item"><svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 17L12 22L22 17" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12L12 17L22 12" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>DeepMind Core</span></div>
-                    <div class="tech-item"><svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="#333" stroke-width="2"/><circle cx="12" cy="13" r="4" stroke="#333" stroke-width="2"/><path d="M12 9V13L15 15" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Tauri Desktop</span></div>
+                    <!-- Core Model -->
+                    <div class="tech-item">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="currentColor" opacity="0.8"/>
+                            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <circle cx="12" cy="12" r="2" fill="currentColor"/>
+                        </svg>
+                        <span>Gemini</span>
+                    </div>
+
+                    <!-- Agent Orchestration -->
+                    <div class="tech-item">
+                        <img src="assets/langgraph.png" alt="LangGraph" width="48" height="48">
+                        <span>LangGraph</span>
+                    </div>
+
+                    <!-- Memory Layer -->
+                    <div class="tech-item">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
+                            <path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="2"/>
+                            <circle cx="15" cy="15" r="2" fill="currentColor"/>
+                        </svg>
+                        <span>Supermemory</span>
+                    </div>
+
+                    <!-- Operational State -->
+                    <div class="tech-item">
+                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/supabase/supabase-original.svg" alt="Supabase" width="48" height="48">
+                        <span>Supabase</span>
+                    </div>
+
+                    <!-- External Retrieval -->
+                    <div class="tech-item">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
+                            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <circle cx="11" cy="11" r="3" fill="currentColor" opacity="0.3"/>
+                        </svg>
+                        <span>Exa</span>
+                    </div>
+
+                    <!-- Workspace Action Layer -->
+                    <div class="tech-item">
+                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" alt="Google Workspace" width="48" height="48">
+                        <span>Google Workspace CLI</span>
+                    </div>
+
+                    <!-- Persistent State System -->
+                    <div class="tech-item">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                            <circle cx="12" cy="12" r="2" fill="currentColor"/>
+                            <path d="M12 2V6M12 18V22M22 12H18M6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        </svg>
+                        <span>Heartbeat Loop</span>
+                    </div>
+
+                    <!-- AI Transcription -->
+                    <div class="tech-item">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 1C13.1 1 14 1.9 14 3V11C14 12.1 13.1 13 12 13C10.9 13 10 12.1 10 11V3C10 1.9 10.9 1 12 1Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M19 10V11C19 15.4 15.4 19 11 19H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M5 10V11C5 12.7 5.8 14.2 7 15.2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M12 15V23M8 19H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        </svg>
+                        <span>Meetly</span>
+                    </div>
+
+                    <!-- Existing tech items -->
+                    <div class="tech-item">
+                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" alt="Rust Core" width="48" height="48">
+                        <span>Rust Core</span>
+                    </div>
+                    <div class="tech-item">
+                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" alt="Next.js" width="48" height="48">
+                        <span>Next.js Frontend</span>
+                    </div>
+                    <div class="tech-item">
+                        <img src="assets/deepmind.png" alt="DeepMind" width="48" height="48">
+                        <span>DeepMind Core</span>
+                    </div>
+                    <div class="tech-item">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
+                            <circle cx="12" cy="13" r="4" stroke="currentColor" stroke-width="2"/>
+                            <path d="M12 9V13L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <span>Tauri Desktop</span>
+                    </div>
                 </div>
             </div>
         </section>

diff --git a/website/app.js b/website/app.js
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const triggerBox = document.getElementById('hero-video-trigger');
     const navWatchBtn = document.getElementById('nav-watch-btn');
 
-    const youtubeUrl = "https://www.youtube.com/embed/XqZsoesa55w?autoplay=1";
+    const youtubeUrl = "https://www.youtube.com/embed/QXsBkFJ8ack?autoplay=1";
 
     function openModal() {
         if(videoModal && youtubeIframe) {

diff --git a/website/assets/deepmind.png b/website/assets/deepmind.png
diff --git a/website/assets/langgraph.png b/website/assets/langgraph.png