diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/LandingPage.tsx | 104 |
1 files changed, 37 insertions, 67 deletions
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 2c543a6..3141556 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect, useRef } from 'react' -import { LoadingScreen } from './LoadingScreen' import { HeartLogo } from './HeartLogo' import { TypewriterRotator } from './TypewriterRotator' @@ -11,18 +10,12 @@ const HERO_PHRASES = [ '安全な意思決定 · SECURE DECISIONS AT THE EDGE', ] -interface LandingPageProps { - onLogin: () => void -} - -export function LandingPage({ onLogin }: LandingPageProps) { - const [loading, setLoading] = useState(false) +export function LandingPage() { const [showLanding, setShowLanding] = useState(false) const [isStandby, setIsStandby] = useState(true) // false = LIVE, true = STDBY const [velocity, setVelocity] = useState(0) const [energy, setEnergy] = useState(0) const [ramped, setRamped] = useState(false) - const [pendingAction, setPendingAction] = useState<null | 'makimaRedirect'>(null) const [activePanel, setActivePanel] = useState<null | 'mission' | 'makima'>(null) // Fade-in landing page content after mount @@ -87,19 +80,6 @@ export function LandingPage({ onLogin }: LandingPageProps) { } }, []) - const handleLoadingComplete = () => { - if (pendingAction === 'makimaRedirect') { - window.location.assign('https://makima.jp') - return - } - onLogin() - } - - const handleLogin = () => { - setPendingAction('makimaRedirect') - setLoading(true) - } - const handleMission = () => { setActivePanel((mode) => (mode === 'mission' ? null : 'mission')) } @@ -110,50 +90,46 @@ export function LandingPage({ onLogin }: LandingPageProps) { return ( <div> - {loading && <LoadingScreen onComplete={handleLoadingComplete} />} - - {!loading && ( - <div className={`floating-header ${showLanding ? 'fade-in' : 'hidden'}`}> - <div className="header-content"> - <div className="brand"> - <img - src="/logo/crane-logo-transparent.png" - alt="Soryu" - height={40} - className="brand-mark" - onError={(e) => { - const img = e.currentTarget as HTMLImageElement - img.onerror = null - img.src = '/logo/crane-logo.png' - }} - /> - </div> - <div className="header-center"> - <HeartLogo size="header-no-rays" className="header-heart" /> - </div> + <div className={`floating-header ${showLanding ? 'fade-in' : 'hidden'}`}> + <div className="header-content"> + <div className="brand"> + <img + src="/logo/crane-logo-transparent.png" + alt="Soryu" + height={40} + className="brand-mark" + onError={(e) => { + const img = e.currentTarget as HTMLImageElement + img.onerror = null + img.src = '/logo/crane-logo.png' + }} + /> + </div> + <div className="header-center"> + <HeartLogo size="header-no-rays" className="header-heart" /> + </div> - <div className="system-info"> - <div className="info-item"> - <span className="info-label">System:</span> - <span - className="info-value live-status clickable" - onClick={() => setIsStandby(!isStandby)} - title="Click to toggle between LIVE and STANDBY" - > - <span className={`status-dot ${isStandby ? 'standby' : 'live'}`}></span> - {isStandby ? 'STDBY' : 'LIVE'} - </span> - </div> - <div className="info-item"> - <span className="info-label">Version:</span> - <span className="info-value">v1.0.0</span> - </div> + <div className="system-info"> + <div className="info-item"> + <span className="info-label">System:</span> + <span + className="info-value live-status clickable" + onClick={() => setIsStandby(!isStandby)} + title="Click to toggle between LIVE and STANDBY" + > + <span className={`status-dot ${isStandby ? 'standby' : 'live'}`}></span> + {isStandby ? 'STDBY' : 'LIVE'} + </span> + </div> + <div className="info-item"> + <span className="info-label">Version:</span> + <span className="info-value">v1.0.0</span> </div> </div> </div> - )} + </div> - <div className={`modern-landing-page manga-style ${showLanding && !loading ? 'fade-in' : 'hidden'}`}> + <div className={`modern-landing-page manga-style ${showLanding ? 'fade-in' : 'hidden'}`}> {/* Background GIF fills the main body */} <div className="background-only" aria-hidden="true"> <img src="/background-animation.gif" alt="" className="background-gif" /> @@ -205,7 +181,7 @@ export function LandingPage({ onLogin }: LandingPageProps) { </div> )} - {/* CTA row spanning full width: left Mission/MAKIMA, right Login */} + {/* CTA row spanning full width: left Mission/MAKIMA */} <div className="cta-area"> <div className="cta-left"> <button @@ -223,12 +199,6 @@ export function LandingPage({ onLogin }: LandingPageProps) { <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> |