chore: update docs and redesign landing page hero
- CLAUDE.md: correct Docker container names, update migration format docs (hash IDs now default), fix Node path in Lesson 63, update design system values to electric blue accent, add retracted lessons note, add GitNexus section - .gitignore: add .gitnexus - Landing page: replace animated chat preview with ticket-comparison hero layout; remove backdrop-filter from scrolled nav (aligns with design system); clean up removed chat animation CSS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -180,57 +180,6 @@ export default function LandingPage() {
|
||||
Built by a 15-year MSP veteran who got tired of empty ticket notes.
|
||||
</p>
|
||||
</div>
|
||||
<div className="landing-hero-visual">
|
||||
<div className="landing-preview-window">
|
||||
<div className="landing-preview-titlebar">
|
||||
<div className="landing-preview-dots"><span /><span /><span /></div>
|
||||
<div className="landing-preview-url">
|
||||
<span className="landing-lock-icon">🔒</span>
|
||||
app.resolutionflow.com/pilot
|
||||
</div>
|
||||
</div>
|
||||
<div className="landing-preview-body">
|
||||
<div className="landing-mock-session">
|
||||
<div className="landing-chat-animated" style={{ '--chat-index': 0 } as React.CSSProperties}>
|
||||
<div className="landing-mock-chat-line user">
|
||||
<span className="label">You</span>
|
||||
<span className="text">User can't access shared drive after password reset</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="landing-chat-animated" style={{ '--chat-index': 1 } as React.CSSProperties}>
|
||||
<div className="landing-typing-indicator">
|
||||
<span /><span /><span />
|
||||
<span className="landing-typing-label">FlowPilot is thinking…</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="landing-chat-animated" style={{ '--chat-index': 2 } as React.CSSProperties}>
|
||||
<div className="landing-mock-chat-line ai">
|
||||
<span className="label">FlowPilot</span>
|
||||
<span className="text">Likely a cached credential issue. Let's check:</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="landing-chat-animated" style={{ '--chat-index': 3 } as React.CSSProperties}>
|
||||
<div className="landing-mock-chat-line ai">
|
||||
<span className="label">FlowPilot</span>
|
||||
<span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="landing-chat-animated" style={{ '--chat-index': 4 } as React.CSSProperties}>
|
||||
<div className="landing-mock-chat-line ai">
|
||||
<span className="label">FlowPilot</span>
|
||||
<span className="text">2. Credential Manager → remove saved share entries</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 ✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -74,9 +74,8 @@
|
||||
}
|
||||
|
||||
.landing-nav.scrolled {
|
||||
background: rgba(20, 22, 29, 0.95);
|
||||
background: #0d0f15;
|
||||
border-bottom: 1px solid var(--lp-border);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.landing-nav-inner {
|
||||
@@ -230,19 +229,44 @@
|
||||
|
||||
/* ---- HERO ---- */
|
||||
.landing-hero {
|
||||
padding: 9rem 2rem 5rem;
|
||||
padding: 10rem 2rem 8rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 580px;
|
||||
}
|
||||
|
||||
/* Full-bleed image layer — positioned lower so terrain fills, hub upper-right */
|
||||
.landing-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('/images/hero_001.jpg') 58% 38% / cover no-repeat;
|
||||
opacity: 0.72;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Left-to-right bleed: solid dark where text lives, dissolves into raw image on the right */
|
||||
.landing-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(to right, #14161d 22%, rgba(20, 22, 29, 0.80) 38%, rgba(20, 22, 29, 0.20) 58%, transparent 78%),
|
||||
linear-gradient(to top, #14161d 0%, rgba(20, 22, 29, 0) 16%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.landing-hero-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.landing-hero-content {
|
||||
max-width: 520px;
|
||||
animation: landingFadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@@ -286,7 +310,7 @@
|
||||
}
|
||||
|
||||
.landing-hero-accent {
|
||||
color: var(--lp-accent-text);
|
||||
color: var(--lp-accent);
|
||||
}
|
||||
|
||||
.landing-hero-sub {
|
||||
@@ -359,72 +383,205 @@
|
||||
animation: landingPreviewEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
|
||||
}
|
||||
|
||||
/* ---- PREVIEW WINDOW ---- */
|
||||
.landing-preview-window {
|
||||
/* ---- TICKET COMPARISON (hero visual) ---- */
|
||||
.landing-ticket-comparison {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.landing-tc-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.landing-tc-label {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.landing-tc-label.before-label {
|
||||
color: var(--lp-text-dim);
|
||||
}
|
||||
|
||||
.landing-tc-label.after-label {
|
||||
color: var(--lp-accent);
|
||||
}
|
||||
|
||||
.landing-tc-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--lp-border);
|
||||
background: var(--lp-card);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
|
||||
padding: 0.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.landing-preview-titlebar {
|
||||
.landing-tc-card.before-card {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.landing-tc-card.after-card {
|
||||
border-color: rgba(96, 165, 250, 0.28);
|
||||
box-shadow: 0 0 36px rgba(96, 165, 250, 0.10), 0 16px 48px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.landing-tc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--lp-border);
|
||||
}
|
||||
|
||||
.landing-preview-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
.tc-ticket-id {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: var(--lp-text-secondary);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.landing-preview-dots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--lp-elevated);
|
||||
.tc-status {
|
||||
font-size: 0.58rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 7px;
|
||||
border-radius: 100px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.landing-preview-dots span:first-child {
|
||||
background: #ef4444;
|
||||
.tc-status.open {
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
color: #f87171;
|
||||
border: 1px solid rgba(248, 113, 113, 0.2);
|
||||
}
|
||||
|
||||
.landing-preview-dots span:nth-child(2) {
|
||||
background: #eab308;
|
||||
}
|
||||
|
||||
.landing-preview-dots span:last-child {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.landing-preview-url {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--lp-border);
|
||||
font-size: 0.6rem;
|
||||
color: var(--lp-text-dim);
|
||||
flex: 1;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.landing-lock-icon {
|
||||
.tc-status.resolved {
|
||||
background: rgba(52, 211, 153, 0.1);
|
||||
color: var(--lp-success);
|
||||
font-size: 0.55rem;
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
.landing-preview-body {
|
||||
padding: 1.25rem;
|
||||
min-height: 260px;
|
||||
.landing-tc-subject {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--lp-text-heading);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.landing-tc-notes-heading {
|
||||
font-size: 0.58rem;
|
||||
font-weight: 600;
|
||||
color: var(--lp-text-dim);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.landing-tc-notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.landing-tc-notes.before-notes {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.06);
|
||||
font-size: 0.65rem;
|
||||
color: var(--lp-text-dim);
|
||||
font-style: italic;
|
||||
min-height: 80px;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tc-note {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
font-size: 0.62rem;
|
||||
color: var(--lp-text-secondary);
|
||||
line-height: 1.5;
|
||||
animation: tcNoteIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation-delay: calc(1.2s + var(--note-i, 0) * 0.55s);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes tcNoteIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.tc-note.resolution-note {
|
||||
margin-top: 0.15rem;
|
||||
padding-top: 0.35rem;
|
||||
border-top: 1px solid var(--lp-border);
|
||||
}
|
||||
|
||||
.tc-time {
|
||||
font-size: 0.55rem;
|
||||
color: var(--lp-text-dim);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
flex-shrink: 0;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
.tc-check {
|
||||
color: var(--lp-success);
|
||||
flex-shrink: 0;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.tc-resolution-tag {
|
||||
font-size: 0.52rem;
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
background: rgba(96, 165, 250, 0.12);
|
||||
color: var(--lp-accent-text);
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.landing-tc-footer {
|
||||
font-size: 0.58rem;
|
||||
padding-top: 0.4rem;
|
||||
border-top: 1px solid var(--lp-border);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.landing-tc-footer.before-footer {
|
||||
color: var(--lp-text-dim);
|
||||
}
|
||||
|
||||
.landing-tc-footer.after-footer {
|
||||
color: var(--lp-accent-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.landing-tc-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
padding-top: 1.4rem;
|
||||
color: var(--lp-text-dim);
|
||||
}
|
||||
|
||||
.landing-tc-divider svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* ---- MOCK ELEMENTS ---- */
|
||||
@@ -1255,79 +1412,6 @@
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
/* ---- CHAT ANIMATION ---- */
|
||||
.landing-chat-animated {
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
animation: landingChatSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation-delay: calc(1.5s + var(--chat-index, 0) * 1.2s);
|
||||
}
|
||||
|
||||
.landing-chat-animated:nth-child(2) {
|
||||
animation: landingTypingLifecycle 3s ease both;
|
||||
animation-delay: 2.7s;
|
||||
}
|
||||
|
||||
.landing-chat-animated:nth-child(3) { animation-delay: 5.7s; }
|
||||
.landing-chat-animated:nth-child(4) { animation-delay: 6.7s; }
|
||||
.landing-chat-animated:nth-child(5) { animation-delay: 7.7s; }
|
||||
.landing-chat-animated:nth-child(6) { animation-delay: 9s; }
|
||||
|
||||
@keyframes landingChatSlideIn {
|
||||
from { opacity: 0; transform: translateX(-16px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes landingTypingLifecycle {
|
||||
0% { opacity: 0; transform: translateX(-16px); }
|
||||
10% { opacity: 1; transform: translateX(0); }
|
||||
75% { opacity: 1; transform: translateX(0); }
|
||||
90% { opacity: 0; transform: translateX(0); }
|
||||
100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
|
||||
}
|
||||
|
||||
.landing-typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
background: var(--lp-accent-soft);
|
||||
border: 1px solid rgba(96, 165, 250, 0.1);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.landing-typing-indicator span {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--lp-accent);
|
||||
opacity: 0.5;
|
||||
animation: landingTypingBounce 1s 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; }
|
||||
|
||||
.landing-typing-label {
|
||||
font-size: 0.6rem;
|
||||
color: var(--lp-accent);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
/* Override dot styles */
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
opacity: 1 !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@keyframes landingTypingBounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ---- SCROLL REVEAL ---- */
|
||||
.landing-reveal {
|
||||
@@ -1617,7 +1701,6 @@
|
||||
|
||||
/* ---- REDUCED MOTION ---- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.landing-chat-animated,
|
||||
.landing-hero-visual,
|
||||
.landing-hero-content {
|
||||
opacity: 1;
|
||||
@@ -1625,13 +1708,10 @@
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.landing-typing-indicator span {
|
||||
.tc-note {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
animation: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.landing-chat-animated:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.landing-reveal {
|
||||
|
||||
Reference in New Issue
Block a user