import React, { useState, useEffect, useRef } from 'react'; import { Dumbbell, GraduationCap, Briefcase, Trophy, ChevronRight, Menu, X, CheckCircle, Activity, Users, Quote, ArrowRight, Instagram, Facebook, Youtube, Play, Plus, Minus, ArrowUpRight, Star, MapPin, Clock, CalendarCheck, TrendingUp, Award, Zap } from 'lucide-react'; const App = () => { const [currentDesign, setCurrentDesign] = useState('A'); // A, B, C const [isMenuOpen, setIsMenuOpen] = useState(false); const [scrollY, setScrollY] = useState(0); const [selectedService, setSelectedService] = useState(null); // For Design C Modal const [count, setCount] = useState(0); // For Design A Counter // Scroll Handler useEffect(() => { const handleScroll = () => setScrollY(window.scrollY); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); // Counter Animation for Design A useEffect(() => { if (currentDesign === 'A') { let start = 0; const end = 10000; const duration = 2000; const increment = end / (duration / 16); const timer = setInterval(() => { start += increment; if (start >= end) { setCount(end); clearInterval(timer); } else { setCount(Math.floor(start)); } }, 16); return () => clearInterval(timer); } }, [currentDesign]); // --- Design Configurations --- const designs = { A: { id: 'A', name: "案1：Ultimate Trust (真の推奨)", keyword: "Intellectual / Depth / High-End", theme: "bg-slate-50 text-slate-800", font: "font-sans", }, B: { id: 'B', name: "案2：Editorial (雑誌風)", keyword: "Elegant / Mincho / Narrative", theme: "bg-[#fcfaf7] text-[#3a342f]", font: "font-serif", }, C: { id: 'C', name: "案3：Brutalist (衝撃)", keyword: "Impact / Neon / Interactive", theme: "bg-[#050505] text-[#eeeeee]", font: "font-sans tracking-tight", } }; const theme = designs[currentDesign]; // --- Data --- const serviceData = [ { id: '01', title: "Personal Training", jp: "パーソナルトレーニング", shortDesc: "骨格から整える、一生モノの身体づくり。", fullDesc: "解剖学に基づいたオーダーメイドのプログラムで、あなたの身体の「癖」を見抜き、根本から改善します。単なるダイエットではなく、一生動ける機能的な身体づくりを目指します。", price: "¥11,000 / 60min", features: ["骨格評価", "姿勢改善", "食事指導(Option)"], img: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=2070&auto=format&fit=crop" }, { id: '02', title: "Trainer Education", jp: "トレーナー育成スクール", shortDesc: "選ばれるトレーナーになるための実学。", fullDesc: "資格取得はゴールではありません。現場でクライアントの結果を出せる「選ばれるトレーナー」になるための実践的な知識と技術を、少人数制で徹底的に指導します。", price: "¥330,000 / 3ヶ月", features: ["実技指導", "集客ノウハウ", "卒業後サポート"], img: "https://images.unsplash.com/photo-1517963879466-db11b3872569?q=80&w=2070&auto=format&fit=crop" }, { id: '03', title: "Corporate Wellness", jp: "法人向け健康経営", shortDesc: "組織のパフォーマンスを最大化する。", fullDesc: "従業員の健康は、企業の資産です。オフィスでの出張ストレッチ講座や、健康リテラシー向上セミナーを通じて、組織のパフォーマンス最大化を支援します。", price: "要お見積もり", features: ["出張レッスン", "健康セミナー", "ストレスチェック"], img: "https://images.unsplash.com/photo-1574680096145-d05b474e2155?q=80&w=2069&auto=format&fit=crop" }, { id: '04', title: "Athlete Performance", jp: "アスリート指導", shortDesc: "勝つためのフィジカル戦略。", fullDesc: "トップアスリートの帯同経験を活かし、競技特性に合わせたフィジカル強化、動作解析、コンディショニング管理を行います。怪我をしない強い身体を作ります。", price: "要相談 (チーム契約)", features: ["動作解析", "怪我予防", "ピーキング"], img: "https://images.unsplash.com/photo-1434608519344-49d77a699ded?q=80&w=2074&auto=format&fit=crop" }, ]; // --- Helper Components --- const FadeIn = ({ children, delay = 0, className = "" }) => { const [isVisible, setIsVisible] = useState(false); const domRef = useRef(); useEffect(() => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if(entry.isIntersecting) setIsVisible(true); }); }, { threshold: 0.1 }); if (domRef.current) observer.observe(domRef.current); return () => observer.disconnect(); }, []); return (

{children} 

); }; const ServiceModal = () => { if (!selectedService) return null; return (

setSelectedService(null)}>

setSelectedService(null)} className="absolute top-0 right-0 p-6 z-20 hover:text-[#ccff00] transition-colors">

/{selectedService.id}

{selectedService.title}

{selectedService.jp}

{selectedService.fullDesc} 

Features

• {selectedService.features.map((f, i) => (
• {f} 
• ))} 

料金目安 {selectedService.price} 

このプランを予約する 

); }; // --- HEADER --- const Header = () => { if (currentDesign === 'C') { return (

Morikawa.JP 

{['Concept', 'Service', 'Voice', 'FAQ'].map((item) => ( {item} ))} Contact 

setIsMenuOpen(!isMenuOpen)}> {isMenuOpen ? :

} 

); } else if (currentDesign === 'B') { return (

50 ? 'bg-[#fcfaf7]/95 py-3 border-b border-[#e6e2dd]' : 'bg-transparent py-8'}`}>

MORIKAWA

私について 提供サービス お客様の声 お問い合わせ 

setIsMenuOpen(!isMenuOpen)}>

); } else { // A: Ultimate Header return (

50 ? 'top-2' : 'top-6'}`}>

50 ? 'py-2' : 'py-3'}`}>

M

MORIKAWA.JP 

{['Concept', 'Service', 'Voice', 'Contact'].map(item => ( {item} ))} 

体験予約 setIsMenuOpen(!isMenuOpen)}>

); } }; // --- HERO SECTION --- const Hero = () => { if (currentDesign === 'C') { return (

Professional Physical Coach 

Destroy
Weakness 

「ケガで苦しむ人をゼロにする」
解剖学とデータに基づいた戦略的アプローチで、
あなたの身体機能を極限まで引き出す。 

体験セッションを予約 

Personal Training / Performance Strategy / Rehabilitation / Injury Prevention 

); } else if (currentDesign === 'B') { return (

機能美

身体と向き合う、静かな時間。

整える。
鍛える。
生きる。 

ただ筋肉をつけるだけではありません。
解剖学に基づき、あなたが本来持っている
「機能美」を呼び覚ます。
一生涯、心地よく動ける身体へ。 

コンセプトを読む 

"身体は魂の楽器である。
その音色を整えるのが私の仕事です。"

森川 敏之

); } else { // A: Ultimate Bento Hero (Overhauled) return (

{/* Advanced Background */}

{/* 1. Main Visual & Copy - The "Glass" Card */}

{/* Simulated Parallax Image */}  

{/* Badge */}

JSPO-AT 公認アスレティックトレーナー 

科学で、身体は
もっと進化する。 

感覚や根性論だけの指導は行いません。
解剖学・バイオメカニクスに基づいた「ロジカルなアプローチ」で、あなたのポテンシャルを最短距離で最大化します。 

体験トレーニングを予約 詳しく見る 

{/* 2. Trainer Profile - Interactive Card */}

Representative

森川 敏之

TOSHIYUKI MORIKAWA

{/* 3. Live Stats - Animated */}

{count.toLocaleString()} +

Total Sessions 

{/* 4. Latest News - Minimal */}

NEWS

2024.04.01

Webサイトをリニューアルオープンしました。春の体験キャンペーン実施中。 

); } }; // --- ABOUT SECTION --- const About = () => { const specs = [ "日本スポーツ協会公認 AT", "NSCA認定 CSCS", "ViPR 認定インストラクター" ]; if (currentDesign === 'C') { return (

Mission Statement

ケガで苦しむ人を、
ゼロにする。

「なぜ、ケガをするのか？」
その答えは全て解剖学にある。

精神論は要らない。
必要なのは、身体の構造に基づいた
正しい動きの再教育だ。

Read Full Profile 

Qualifications

• {specs.map((s, i) => (
• {s}
• ))}

View Method 

); } else if (currentDesign === 'B') { return (

01

Toshiyuki Morikawa

Head Trainer

痛みを知るからこそ、
寄り添える強さがある。

学生時代の度重なる怪我。リハビリの辛さ。「なぜ自分だけ？」という葛藤。それが私の原点です。痛みや不調は、身体からのサインです。

解剖学的な視点でその声を聴き、無理なく、美しく、機能的な身体へと導くお手伝いをいたします。

保有資格

{specs.map((s, i) => ({s}))}

); } else { // A: Ultimate Bento About return (

{/* Left: Enhanced Image Composition */}

{/* Floating Glass Card */}

Experience

12 Years

{/* Right: Text Content */}

Our Mission

ケガで苦しむ人を、
ゼロにする。 

私は学生時代、ケガで選手生命を脅かされる経験をしました。 その時感じた「正しい知識があれば防げたはず」という悔しさが、私の原動力です。 

解剖学に基づかない自己流のトレーニングは、時に身体を壊します。 私たちは、科学的根拠に基づいた「正しい動き」をインストールし、一生涯、痛みなく動ける身体づくりをサポートします。 

Qualifications 

{specs.map((s,i) => (

{s} 

))} 

); } }; // --- SERVICES SECTION --- const Services = () => { if (currentDesign === 'C') { return (

Menu 

{serviceData.map((s) => (

setSelectedService(s)} className="group relative border-b border-black last:border-b-0 py-12 px-6 md:px-12 hover:bg-white transition-colors cursor-pointer overflow-hidden">

/{s.id}

{s.title}

{s.jp}

))} 

); } else if (currentDesign === 'B') { return (

Service Menu

提供プログラム

{serviceData.map((s, i) => (

{s.id}

{s.jp}{s.title}

{s.fullDesc}

詳細を見る 

))} 

); } else { // A: Ultimate Bento Services return (

Our Services

提供サービス

View All 

{serviceData.map((s, i) => (

{/* Top Image Area */}

{s.id}

{s.jp}

{s.title}

{s.shortDesc}

{s.price}

詳細を見る 

))} 

); } }; // --- VOICES & FOOTER --- const VoicesAndFooter = () => { if (currentDesign === 'C') { return ( <>

Voices

{[1,2].map(i => (

Verified

{[1,2,3,4,5].map(star => )}

"腰痛が消え、記録が伸びた"

長年の腰痛が解消しただけでなく、競技パフォーマンスの数値が明らかに向上しました。

田中 健一 様

30代 / アスリート

))} 

MORIKAWA
.JP

Instagram

Tokyo, Japan

© 2024 MORIKAWA TOSHIYUKI.

) } else if (currentDesign === 'B') { return ( <>

Testimonials

お客様の変化

{[1,2].map(i => (

“

先生の指導のおかげで、自分の身体と向き合う時間が好きになりました。

30代 女性 / 会社員

))} 

MORIKAWA.JP

機能的な美しさと、一生涯動ける身体を。

Contact

• info@morikawa.jp

© 2024 Morikawa Toshiyuki

) } else { // A: Ultimate Bento Footer return ( <>

Testimonials

お客様の声

{[1,2].map(i => (

{[1,2,3,4,5].map(s => )} 

「長年の腰痛が解消しました」

論理的な指導で、なぜ痛みが出るのかが理解できました。日常生活での姿勢も意識するようになり、ゴルフの飛距離も伸びました。

30代 男性 / 経営者

))} 

{/* Background Decor */}

まずは体験トレーニングから

あなたの身体の現状を正しく評価し、最適な改善プランをご提案します。
無理な勧誘は一切ございません。 

今すぐ予約する 

M

MORIKAWA.JP 

科学的根拠に基づいたパーソナルトレーニングで、一生涯動ける機能的な身体づくりをサポートします。 

Service

• パーソナルトレーニング
• トレーナー育成
• 法人契約

Company

• 私について
• スタジオアクセス
• お問い合わせ

© 2024 MORIKAWA TOSHIYUKI. All Rights Reserved.

プライバシーポリシー 特定商取引法に基づく表記 

) } } return (

{/* Design Switcher */}

Design Mode {Object.keys(designs).map((key) => ( setCurrentDesign(key)} className={`group flex items-center gap-3 px-4 py-3 rounded-xl shadow-2xl backdrop-blur-xl border transition-all duration-300 w-64 text-left relative overflow-hidden ${ currentDesign === key ? 'bg-indigo-600 border-indigo-500 text-white scale-105' : 'bg-white/80 border-white/50 text-gray-800 hover:bg-white hover:scale-105' }`} >

{key} 

{designs[key].name} {designs[key].keyword} 

{currentDesign === key &&

} ))} 

{/* --- Design C Modal --- */} {currentDesign === 'C' && }

); }; export default App;