1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
import { useState, useEffect } from 'react'
import { LoadingScreen } from './LoadingScreen'
import { HeartLogo } from './HeartLogo'
interface LandingPageProps {
onLogin: () => void
}
export function LandingPage({ onLogin }: LandingPageProps) {
const [loading, setLoading] = useState(false)
const [showLanding, setShowLanding] = useState(false)
const [pendingAction, setPendingAction] = useState<null | 'makimaRedirect'>(null)
// Fade-in landing page content after mount
useEffect(() => {
const timer = setTimeout(() => setShowLanding(true), 500)
return () => clearTimeout(timer)
}, [])
const handleLoadingComplete = () => {
if (pendingAction === 'makimaRedirect') {
window.location.assign('https://makima.jp')
return
}
onLogin()
}
const handleLogin = () => {
setPendingAction('makimaRedirect')
setLoading(true)
}
const scrollTo = (id: string) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}
return (
<div>
{loading && <LoadingScreen onComplete={handleLoadingComplete} />}
{/* Professional floating header */}
{!loading && (
<div className={`pro-header ${showLanding ? 'fade-in' : 'hidden'}`}>
<div className="pro-header-content">
<div className="pro-header-left">
<img
src="/logo/crane-logo-transparent.png"
alt="Soryu"
height={36}
className="pro-crane-logo"
onError={(e) => {
const img = e.currentTarget as HTMLImageElement
img.onerror = null
img.src = '/logo/crane-logo.png'
}}
/>
<span className="pro-company-name">SORYU</span>
</div>
<div className="pro-header-center">
<HeartLogo size="header-no-rays" className="header-heart" />
</div>
<nav className="pro-header-nav">
<button className="pro-nav-link" onClick={() => scrollTo('pro-mission')}>
Mission
</button>
<button className="pro-nav-link" onClick={() => scrollTo('pro-makima')}>
Makima
</button>
<button className="pro-nav-link pro-nav-login" onClick={handleLogin}>
Login
</button>
</nav>
</div>
</div>
)}
{/* Main professional landing layout */}
<div className={`pro-landing ${showLanding && !loading ? 'fade-in' : 'hidden'}`}>
{/* Hero section */}
<section className="pro-hero">
<div className="pro-hero-inner">
<div className="pro-hero-tagline-jp">そりゅう</div>
<h1 className="pro-hero-headline">
Real‑Time Systems for<br />Mission‑Critical Observability
</h1>
<p className="pro-hero-sub">
Low‑latency streaming infrastructure that turns live data into reliable, secure insight.
</p>
<div className="pro-hero-cta">
<button className="pro-btn-primary" onClick={() => scrollTo('pro-mission')}>
Learn More
</button>
<button className="pro-btn-secondary" onClick={handleLogin}>
<span className="pro-btn-icon">▶</span> Launch Makima
</button>
</div>
</div>
</section>
{/* Content grid: Mission + Makima cards */}
<section className="pro-content-grid">
<div className="pro-card" id="pro-mission">
<div className="pro-card-header">
<h2 className="pro-card-title">Mission</h2>
<div className="pro-card-accent" />
</div>
<div className="pro-card-body">
<h3 className="pro-card-subtitle">
Building real‑time systems for mission-critical observability and surveillance
</h3>
<p className="pro-card-text">
We deliver low‑latency streaming & infrastructure that turns live data into
reliable, secure insight. Target selection, monitoring and full end to end observability
to make vital decisions where it matters most.
</p>
</div>
</div>
<div className="pro-card" id="pro-makima">
<div className="pro-card-header">
<h2 className="pro-card-title">Makima</h2>
<span className="pro-card-badge">Control System</span>
<div className="pro-card-accent" />
</div>
<div className="pro-card-body">
<img
src="/logo/makima-logo.svg"
alt="Makima mesh logo"
className="pro-makima-logo"
/>
<h3 className="pro-card-subtitle">Mesh Orchestration Platform</h3>
<p className="pro-card-text">
Makima is a control system for orchestrating distributed daemon meshes,
coordinating concurrent execution across distinct domains.
</p>
<p className="pro-card-text">
Unified command interface for spawning, monitoring, and directing
worker daemons. Real-time task coordination with overlay management.
</p>
</div>
</div>
</section>
{/* Footer */}
<footer className="pro-footer">
<div className="pro-footer-inner">
<span className="pro-footer-brand">SORYU</span>
<span className="pro-footer-sep">—</span>
<span className="pro-footer-text">Real‑time systems & infrastructure</span>
</div>
</footer>
</div>
</div>
)
}
|
