2026-03-30 04:39:37 +00:00
2 changed files with 240 additions and 15 deletions
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -216,25 +216,40 @@ export default function LandingPage() {
                </div>
                <div className="landing-preview-canvas">
                  <div className="landing-mock-session">
-                    <div className="landing-mock-chat-line">
-                      <span className="label">You:</span>
-                      <span className="text">User can&apos;t access shared drive after password reset</span>
+                    <div className="landing-chat-animated" style={{ '--chat-index': 0 } as React.CSSProperties}>
+                      <div className="landing-mock-chat-line">
+                        <span className="label">You:</span>
+                        <span className="text">User can&apos;t access shared drive after password reset</span>
+                      </div>
                    </div>
-                    <div className="landing-mock-chat-line">
-                      <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
-                      <span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
+                    <div className="landing-chat-animated" style={{ '--chat-index': 1 } as React.CSSProperties}>
+                      <div className="landing-typing-indicator">
+                        <span /><span /><span />
+                      </div>
                    </div>
-                    <div className="landing-mock-chat-line">
-                      <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
-                      <span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
+                    <div className="landing-chat-animated" style={{ '--chat-index': 2 } as React.CSSProperties}>
+                      <div className="landing-mock-chat-line">
+                        <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
+                        <span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
+                      </div>
                    </div>
-                    <div className="landing-mock-chat-line">
-                      <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
-                      <span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
+                    <div className="landing-chat-animated" style={{ '--chat-index': 3 } as React.CSSProperties}>
+                      <div className="landing-mock-chat-line">
+                        <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
+                        <span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
+                      </div>
                    </div>
-                    <div className="landing-mock-chat-line doc">
-                      <span className="label">Auto-doc:</span>
-                      <span className="text">3 steps captured &#10003;</span>
+                    <div className="landing-chat-animated" style={{ '--chat-index': 4 } as React.CSSProperties}>
+                      <div className="landing-mock-chat-line">
+                        <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
+                        <span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
+                      </div>
+                    </div>
+                    <div className="landing-chat-animated" style={{ '--chat-index': 5 } as React.CSSProperties}>
+                      <div className="landing-mock-chat-line doc">
+                        <span className="label">Auto-doc:</span>
+                        <span className="text">3 steps captured &#10003;</span>
+                      </div>
                    </div>
                  </div>
                </div>
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -1503,4 +1503,214 @@
  .landing-cta-email-form {
    flex-direction: column;
  }
+}
+
+/* ============================================
+   OVERDRIVE: Live Chat Animation + Scroll Enhancements
+   ============================================ */
+
+/* ── A) ANIMATED CHAT MESSAGES ── */
+/* Each chat line fades in and slides up with staggered timing.
+   The typing indicator appears between user message and AI response,
+   then hides when the AI lines appear. */
+
+.landing-chat-animated {
+  opacity: 0;
+  transform: translateY(8px);
+  animation: landingChatReveal 0.4s ease-out both;
+  /* Base delay: 1.5s (after hero entrance) + stagger per line */
+  animation-delay: calc(1.5s + var(--chat-index, 0) * 0.6s);
+}
+
+/* The typing indicator (index 1) appears, then fades out when index 2 appears */
+.landing-chat-animated:nth-child(2) {
+  animation: landingTypingLifecycle 1.8s ease both;
+  animation-delay: calc(1.5s + 0.6s);
+}
+
+@keyframes landingChatReveal {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes landingTypingLifecycle {
+  0% { opacity: 0; transform: translateY(8px); }
+  15% { opacity: 1; transform: translateY(0); }
+  70% { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(0); height: 0; padding: 0; margin: 0; overflow: hidden; }
+}
+
+/* ── Typing indicator dots ── */
+.landing-typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+}
+
+.landing-typing-indicator span {
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #60a5fa;
+  opacity: 0.4;
+  animation: landingTypingBounce 1.2s ease-in-out infinite;
+}
+
+.landing-typing-indicator span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.landing-typing-indicator span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes landingTypingBounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+
+/* ── Sidebar items stagger in ── */
+.landing-preview-sidebar-item {
+  opacity: 0;
+  animation: landingChatReveal 0.3s ease-out both;
+}
+
+.landing-preview-sidebar-item:nth-child(1) { animation-delay: 0.8s; }
+.landing-preview-sidebar-item:nth-child(2) { animation-delay: 0.9s; }
+.landing-preview-sidebar-item:nth-child(3) { animation-delay: 1.0s; }
+.landing-preview-sidebar-item:nth-child(4) { animation-delay: 1.1s; }
+.landing-preview-sidebar-item:nth-child(5) { animation-delay: 1.2s; }
+
+/* ── B) SCROLL-DRIVEN ENHANCEMENTS ── */
+/* Upgrade the basic reveal to use scroll-driven parallax where supported */
+
+@supports (animation-timeline: scroll()) {
+  /* Sections get a subtle parallax lift as they enter viewport */
+  .landing-reveal {
+    opacity: 0;
+    transform: translateY(40px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 40%;
+    /* Override the JS-based transition approach */
+    transition: none;
+  }
+
+  /* No need for the JS .visible class when scroll-driven is available */
+  .landing-reveal.visible {
+    /* Intentionally blank — scroll-driven animation handles it */
+  }
+
+  @keyframes landingScrollReveal {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Problem cards stagger within their parent */
+  .landing-problem-card {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 50%;
+  }
+
+  .landing-problem-card:nth-child(1) { animation-range: entry 0% entry 40%; }
+  .landing-problem-card:nth-child(2) { animation-range: entry 5% entry 45%; }
+  .landing-problem-card:nth-child(3) { animation-range: entry 10% entry 50%; }
+  .landing-problem-card:nth-child(4) { animation-range: entry 15% entry 55%; }
+
+  /* Feature cards stagger */
+  .landing-feature-card {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 45%;
+  }
+
+  .landing-feature-card:nth-child(1) { animation-range: entry 0% entry 35%; }
+  .landing-feature-card:nth-child(2) { animation-range: entry 3% entry 38%; }
+  .landing-feature-card:nth-child(3) { animation-range: entry 6% entry 41%; }
+  .landing-feature-card:nth-child(4) { animation-range: entry 9% entry 44%; }
+  .landing-feature-card:nth-child(5) { animation-range: entry 12% entry 47%; }
+  .landing-feature-card:nth-child(6) { animation-range: entry 15% entry 50%; }
+
+  /* Pricing cards stagger */
+  .landing-pricing-card {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 45%;
+  }
+
+  .landing-pricing-card:nth-child(1) { animation-range: entry 0% entry 35%; }
+  .landing-pricing-card:nth-child(2) { animation-range: entry 5% entry 40%; }
+  .landing-pricing-card:nth-child(3) { animation-range: entry 10% entry 45%; }
+
+  /* How it works steps stagger */
+  .landing-step-card {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 45%;
+  }
+
+  .landing-step-card:nth-child(1) { animation-range: entry 0% entry 35%; }
+  .landing-step-card:nth-child(2) { animation-range: entry 5% entry 40%; }
+  .landing-step-card:nth-child(3) { animation-range: entry 10% entry 45%; }
+
+  /* Social proof bar parallax — slight upward drift */
+  .landing-social-proof-bar {
+    animation: landingParallaxUp linear both;
+    animation-timeline: view();
+    animation-range: entry 0% exit 100%;
+  }
+
+  @keyframes landingParallaxUp {
+    from { transform: translateY(12px); }
+    to { transform: translateY(-12px); }
+  }
+}
+
+/* ── REDUCED MOTION ── */
+@media (prefers-reduced-motion: reduce) {
+  .landing-chat-animated,
+  .landing-preview-sidebar-item {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+
+  .landing-typing-indicator span {
+    animation: none;
+    opacity: 0.6;
+  }
+
+  /* Hide typing indicator entirely in reduced motion */
+  .landing-chat-animated:nth-child(2) {
+    display: none;
+  }
 }