diff options
| -rw-r--r-- | frontend/index.html | 2 | ||||
| -rw-r--r-- | frontend/src/components/LandingPage.tsx | 314 | ||||
| -rw-r--r-- | frontend/src/styles/pc98.css | 4 |
3 files changed, 6 insertions, 314 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 @@ <title>soryu.co</title> <link rel="icon" type="image/png" href="/logo/crane-logo-transparent.png" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet"> + <link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> </head> <body> <div id="root"></div> diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 08febd1..e7579b5 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import { useState, useEffect } from 'react' import { LoadingScreen } from './LoadingScreen' import { HeartLogo } from './HeartLogo' @@ -153,318 +153,6 @@ export function LandingPage({ onLogin }: LandingPageProps) { </div> </footer> </div> - - <style>{` - /* ── Professional Landing Styles ── */ - - .pro-header { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; - backdrop-filter: blur(12px); - background: rgba(10, 14, 28, 0.85); - border-bottom: 1px solid rgba(0, 200, 255, 0.15); - } - - .pro-header-content { - max-width: 1100px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.6rem 1.5rem; - } - - .pro-header-left { - display: flex; - align-items: center; - gap: 0.65rem; - } - - .pro-crane-logo { - display: block; - } - - .pro-company-name { - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.18em; - color: #e0e8f0; - } - - .pro-header-center { - display: flex; - align-items: center; - justify-content: center; - } - - .pro-header-nav { - display: flex; - align-items: center; - gap: 0.25rem; - } - - .pro-nav-link { - background: none; - border: 1px solid transparent; - color: #8fa8c8; - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - font-size: 0.8rem; - letter-spacing: 0.08em; - padding: 0.35rem 0.75rem; - cursor: pointer; - border-radius: 3px; - transition: color 0.2s, border-color 0.2s; - } - - .pro-nav-link:hover { - color: #00c8ff; - border-color: rgba(0, 200, 255, 0.3); - } - - .pro-nav-login { - color: #00c8ff; - border-color: rgba(0, 200, 255, 0.35); - margin-left: 0.5rem; - } - - .pro-nav-login:hover { - background: rgba(0, 200, 255, 0.08); - border-color: #00c8ff; - } - - /* ── Landing Container ── */ - - .pro-landing { - min-height: 100vh; - background: #080c1a; - color: #c8d4e0; - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - overflow-x: hidden; - } - - /* ── Hero ── */ - - .pro-hero { - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - padding: 6rem 1.5rem 4rem; - text-align: center; - position: relative; - } - - .pro-hero::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 100, 180, 0.08) 0%, transparent 100%), - radial-gradient(ellipse 40% 30% at 50% 60%, rgba(0, 200, 255, 0.04) 0%, transparent 100%); - pointer-events: none; - } - - .pro-hero-inner { - position: relative; - max-width: 700px; - } - - .pro-hero-tagline-jp { - font-size: 0.85rem; - letter-spacing: 0.5em; - color: rgba(0, 200, 255, 0.45); - margin-bottom: 1.5rem; - text-transform: uppercase; - } - - .pro-hero-headline { - font-size: clamp(1.8rem, 4vw, 2.8rem); - font-weight: 600; - line-height: 1.25; - color: #e8f0fa; - margin: 0 0 1.25rem; - letter-spacing: -0.01em; - } - - .pro-hero-sub { - font-size: 1rem; - line-height: 1.7; - color: #8fa8c8; - margin: 0 auto 2.5rem; - max-width: 520px; - } - - .pro-hero-cta { - display: flex; - gap: 1rem; - justify-content: center; - flex-wrap: wrap; - } - - .pro-btn-primary, - .pro-btn-secondary { - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - font-size: 0.85rem; - letter-spacing: 0.06em; - padding: 0.65rem 1.5rem; - border-radius: 3px; - cursor: pointer; - transition: all 0.2s; - } - - .pro-btn-primary { - background: rgba(0, 200, 255, 0.1); - color: #00c8ff; - border: 1px solid rgba(0, 200, 255, 0.35); - } - - .pro-btn-primary:hover { - background: rgba(0, 200, 255, 0.18); - border-color: #00c8ff; - } - - .pro-btn-secondary { - background: transparent; - color: #8fa8c8; - border: 1px solid rgba(140, 170, 200, 0.25); - } - - .pro-btn-secondary:hover { - color: #e0e8f0; - border-color: rgba(140, 170, 200, 0.5); - } - - .pro-btn-icon { - margin-right: 0.35rem; - font-size: 0.75rem; - } - - /* ── Content Grid ── */ - - .pro-content-grid { - max-width: 1100px; - margin: 0 auto; - padding: 0 1.5rem 5rem; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); - gap: 2rem; - } - - .pro-card { - background: rgba(12, 18, 36, 0.7); - border: 1px solid rgba(0, 200, 255, 0.12); - border-radius: 4px; - overflow: hidden; - scroll-margin-top: 5rem; - } - - .pro-card-header { - padding: 1.25rem 1.5rem 0.75rem; - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; - } - - .pro-card-title { - font-size: 1.1rem; - font-weight: 600; - letter-spacing: 0.12em; - color: #e0e8f0; - margin: 0; - text-transform: uppercase; - } - - .pro-card-badge { - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.2rem 0.5rem; - background: rgba(0, 200, 255, 0.1); - border: 1px solid rgba(0, 200, 255, 0.25); - border-radius: 2px; - color: #00c8ff; - } - - .pro-card-accent { - flex: 1; - height: 1px; - background: linear-gradient(90deg, rgba(0, 200, 255, 0.3), transparent); - } - - .pro-card-body { - padding: 0.75rem 1.5rem 1.5rem; - } - - .pro-card-subtitle { - font-size: 0.95rem; - font-weight: 500; - color: #c0d0e0; - margin: 0 0 0.75rem; - line-height: 1.5; - } - - .pro-card-text { - font-size: 0.85rem; - line-height: 1.7; - color: #7a90a8; - margin: 0 0 0.6rem; - } - - .pro-card-text:last-child { - margin-bottom: 0; - } - - .pro-makima-logo { - display: block; - width: 64px; - height: 64px; - margin-bottom: 1rem; - opacity: 0.75; - } - - /* ── Footer ── */ - - .pro-footer { - border-top: 1px solid rgba(0, 200, 255, 0.1); - padding: 1.5rem; - text-align: center; - } - - .pro-footer-inner { - font-size: 0.75rem; - color: #4a6080; - letter-spacing: 0.08em; - } - - .pro-footer-brand { - letter-spacing: 0.18em; - color: #5a7898; - } - - .pro-footer-sep { - margin: 0 0.5rem; - opacity: 0.4; - } - - /* ── Shared transitions ── */ - - .pro-landing.hidden, - .pro-header.hidden { - opacity: 0; - pointer-events: none; - } - - .pro-landing.fade-in, - .pro-header.fade-in { - opacity: 1; - transition: opacity 0.8s ease; - } - `}</style> </div> ) } diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css index b06cacd..e591cdc 100644 --- a/frontend/src/styles/pc98.css +++ b/frontend/src/styles/pc98.css @@ -4986,6 +4986,10 @@ button:focus-visible { opacity: 0.4; } +.pro-footer-text { + color: #4a6080; +} + /* ── Shared transitions ── */ .pro-landing.hidden, |