From b668d304306bbb030069f0f14116e210dea823cf Mon Sep 17 00:00:00 2001 From: soryu Date: Tue, 28 Apr 2026 14:07:50 +0100 Subject: feat: soryu-co/soryu - soryu: Integrate and polish landing page styles with component --- frontend/index.html | 2 +- frontend/src/components/LandingPage.tsx | 262 +++++++++----------------- frontend/src/styles/mobile.css | 108 +++++++++++ frontend/src/styles/pc98.css | 323 ++++++++++++++++++++++++++++++++ 4 files changed, 525 insertions(+), 170 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 095310b..0014d94 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,7 +6,7 @@ soryu.co - +
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index f126d6f..e7579b5 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react' +import { useState, useEffect } from 'react' import { LoadingScreen } from './LoadingScreen' import { HeartLogo } from './HeartLogo' @@ -9,12 +9,7 @@ interface LandingPageProps { export function LandingPage({ onLogin }: LandingPageProps) { const [loading, setLoading] = useState(false) 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) - const [activePanel, setActivePanel] = useState(null) // Fade-in landing page content after mount useEffect(() => { @@ -22,62 +17,6 @@ export function LandingPage({ onLogin }: LandingPageProps) { return () => clearTimeout(timer) }, []) - // Ramp up stats, then keep them fluctuating near max - useEffect(() => { - const VELOCITY_MAX = 603 - const ENERGY_MAX = 32 - - let rampInterval: number | undefined - let fluctuateInterval: number | undefined - - // Ramp-up for ~2 seconds - const rampDurationMs = 2000 - const tickMs = 30 - const vStep = VELOCITY_MAX / (rampDurationMs / tickMs) - const eStep = ENERGY_MAX / (rampDurationMs / tickMs) - - rampInterval = window.setInterval(() => { - setVelocity((v) => { - const next = v + vStep - return next >= VELOCITY_MAX ? VELOCITY_MAX : next - }) - setEnergy((e) => { - const next = e + eStep - return next >= ENERGY_MAX ? ENERGY_MAX : next - }) - }, tickMs) - - const stopRamp = window.setTimeout(() => { - if (rampInterval) window.clearInterval(rampInterval) - setVelocity(VELOCITY_MAX) - setEnergy(ENERGY_MAX) - setRamped(true) - - // Fluctuate near the top - fluctuateInterval = window.setInterval(() => { - setVelocity((v) => { - const min = VELOCITY_MAX - 18 - const max = VELOCITY_MAX - const delta = (Math.random() - 0.5) * 6 // ±3 - const next = Math.max(min, Math.min(max, v + delta)) - return next - }) - setEnergy((e) => { - const min = ENERGY_MAX - 2 - const max = ENERGY_MAX - const delta = (Math.random() - 0.5) * 0.25 // ±0.125 - const next = Math.max(min, Math.min(max, e + delta)) - return next - }) - }, 220) - }, rampDurationMs + 60) - - return () => { - if (rampInterval) window.clearInterval(rampInterval) - if (fluctuateInterval) window.clearInterval(fluctuateInterval) - } - }, []) - const handleLoadingComplete = () => { if (pendingAction === 'makimaRedirect') { window.location.assign('https://makima.jp') @@ -91,144 +30,129 @@ export function LandingPage({ onLogin }: LandingPageProps) { setLoading(true) } - const handleMission = () => { - setActivePanel((mode) => (mode === 'mission' ? null : 'mission')) - } - - const handleMakimaPanel = () => { - setActivePanel((mode) => (mode === 'makima' ? null : 'makima')) + const scrollTo = (id: string) => { + document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }) } return (
{loading && } + {/* Professional floating header */} {!loading && ( -
-
-
+
+
+
Soryu { const img = e.currentTarget as HTMLImageElement img.onerror = null img.src = '/logo/crane-logo.png' }} /> + SORYU
-
+ +
-
-
- System: - setIsStandby(!isStandby)} - title="Click to toggle between LIVE and STANDBY" - > - - {isStandby ? 'STDBY' : 'LIVE'} - -
-
- Version: - v1.0.0 -
-
+
)} -
- {/* Background GIF fills the main body */} - - - {/* Minimal overlay: masthead, issue badge, and CTA */} -
-