diff options
Diffstat (limited to 'frontend/src/components/LandingPage.tsx')
| -rw-r--r-- | frontend/src/components/LandingPage.tsx | 57 |
1 files changed, 39 insertions, 18 deletions
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index f126d6f..2c543a6 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -1,6 +1,15 @@ import React, { useState, useEffect, useRef } from 'react' import { LoadingScreen } from './LoadingScreen' import { HeartLogo } from './HeartLogo' +import { TypewriterRotator } from './TypewriterRotator' + +const HERO_PHRASES = [ + '低遅延ストリーミング · LOW-LATENCY OBSERVABILITY', + 'リアルタイム監視 · REAL-TIME SURVEILLANCE', + 'ミッションクリティカル · MISSION-CRITICAL INFRASTRUCTURE', + 'エンドツーエンド可視化 · END-TO-END VISIBILITY', + '安全な意思決定 · SECURE DECISIONS AT THE EDGE', +] interface LandingPageProps { onLogin: () => void @@ -167,7 +176,7 @@ export function LandingPage({ onLogin }: LandingPageProps) { {activePanel === 'mission' ? ( <div className="mission-screen" role="region" aria-label="Mission"> <h1 className="mission-headline">Building real‑time systems for mission-critical observability and surveillance </h1> - <img src="/PC98Doukuusei.webp" alt="Mission montage" className="mission-image" /> + <img src="/mission-tactical.svg" alt="Tactical observability mesh" className="mission-image" /> <p className="mission-paragraph"> We deliver low‑latency streaming & infrastructure that turns live data into reliable, secure insight. Target selection, monitoring and full end to end observability @@ -189,27 +198,39 @@ export function LandingPage({ onLogin }: LandingPageProps) { </p> </div> ) : ( - <div className="hero" /> + <div className="hero"> + <div className="hero-tagline" aria-label="Soryu capabilities"> + <TypewriterRotator phrases={HERO_PHRASES} /> + </div> + </div> )} - {/* CTA row spanning full width: left Mission/MAKIMA, right Login */} - <div className="cta-area"> - <div className="cta-left"> - <button className="taisho-cta" onClick={handleMission}> - <span className="cta-text">{activePanel === 'mission' ? 'Close' : 'Mission'}</span> - </button> - <button className="taisho-cta" onClick={handleMakimaPanel}> - <span className="cta-text">{activePanel === 'makima' ? 'Close' : 'MAKIMA'}</span> - </button> - </div> - <div className="cta-right"> - <button className="taisho-cta" onClick={handleLogin}> - <span className="cta-icon">▶</span> - <span className="cta-text">Login</span> - </button> - </div> + {/* CTA row spanning full width: left Mission/MAKIMA, right Login */} + <div className="cta-area"> + <div className="cta-left"> + <button + className={`taisho-cta${activePanel === 'mission' ? ' is-active' : ''}`} + aria-current={activePanel === 'mission' ? 'page' : undefined} + onClick={handleMission} + > + <span className="cta-text">Mission</span> + </button> + <button + className={`taisho-cta${activePanel === 'makima' ? ' is-active' : ''}`} + aria-current={activePanel === 'makima' ? 'page' : undefined} + onClick={handleMakimaPanel} + > + <span className="cta-text">MAKIMA</span> + </button> + </div> + <div className="cta-right"> + <button className="taisho-cta" onClick={handleLogin}> + <span className="cta-icon">▶</span> + <span className="cta-text">Login</span> + </button> </div> </div> + </div> </div> {/* Bottom stats: Velocity + Energy only (hidden in mission mode) */} |