const { useState, useEffect, useRef } = React;
// ============ NAV ============
const Nav = ({ scrolled, isMobile, menuOpen, setMenuOpen }) => (
<>
{isMobile && menuOpen && (
{[
{jp:'About', en:'ABOUT', href:'#about'},
{jp:'Service', en:'SERVICE', href:'#service'},
{jp:'Results', en:'RESULTS', href:'#results'},
{jp:'Contact', en:'CONTACT', href:'#contact'}
].map(l => (
setMenuOpen(false)} style={{
padding:'22px 4px', fontFamily:'var(--font-en)', fontSize: 28,
letterSpacing:'0.18em', color:'var(--ink)', borderBottom:'1px solid var(--line)'
}}>{l.en}
))}
setMenuOpen(false)} style={{
marginTop: 32, padding:'20px', background:'var(--ink)', color:'var(--white)',
textAlign:'center', fontFamily:'var(--font-en)', fontSize: 14, letterSpacing:'0.22em'
}}>CONTACT US →
{[
{top:'20%', dur: 22, delay: 0, op: 0.10},
{top:'52%', dur: 28, delay: 6, op: 0.06},
{top:'80%', dur: 24, delay: 2, op: 0.09}
].map((l, i) => (
))}
隼
{/* Label */}
一度きりの人生に、
本気で羽ばたく機会を。
株式会社隼は、YouTube・TikTok・LINEを横断する
戦略型SNSプロデュースで、あなたの事業を加速させます。
{doubled.map((t, i) => (
{t}✦
))}
);
};
// ============ VISION ============
const Vision = ({ isMobile }) => (
);
// ============ VALUES ============
const Values = ({ isMobile }) => {
const values = [
{ num:'01', en:'OWN IT', jp:'自分の人生に、責任を持つ。', desc:'他人任せにしない。指示待ちにしない。自分の役割は自分で決める。相談する前に、まず考える。' },
{ num:'02', en:'SPEED IS RESPECT', jp:'速さは、誠意である。', desc:'判断・連携・実行のスピードこそ信頼の源泉。「明日やる」は、機会損失の言い換えである。' },
{ num:'03', en:'KEEP THE VIBE UP', jp:'場のエネルギーを、上げ続ける。', desc:'機嫌の管理は、リーダーの規律である。自分の機嫌は、自分で整える。' }
];
return (
{/* Background VALUES en */}
VALUES
行動指針 — 三つの原則
{values.map(v => )}
自分の人生は自分で背負う。
／
だから、誰よりも速く動く。
／
場のエネルギーは自分が作る。
);
};
const ValueRow = ({ num, en, jp, desc, isMobile }) => {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display:'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr 1.4fr', gap: isMobile ? 20 : 48,
padding: isMobile ? '32px 0 32px 16px' : '48px 0 48px 24px',
borderTop:'1px solid var(--line)',
borderLeft:'3px solid ' + (hover ? 'var(--gold)' : 'transparent'),
transform: hover ? 'translateX(8px)' : 'translateX(0)',
transition:'transform 0.35s ease, border-left-color 0.35s ease',
alignItems:'start'
}}
>
{num}
{desc}
SNS
PRODUCTION
戦略型SNSプロデュース
経験豊富なプロデューサー陣が、
YouTube・TikTok・LINEを横断した戦略設計で、
あなたの事業を加速させます。
{items.map((it, i) => )}
);
};
const ServiceRow = ({ num, title, desc, last, isMobile }) => {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display:'grid', gridTemplateColumns: isMobile ? '1fr' : '120px 1fr auto', gap: isMobile ? 12 : 40,
padding: isMobile ? '28px 16px' : '40px 24px',
borderTop:'1px solid var(--line-strong)',
borderBottom: last ? '1px solid var(--line-strong)' : 'none',
borderLeft: '3px solid ' + (hover ? 'var(--gold)' : 'transparent'),
transform: hover ? 'translateX(8px)' : 'translateX(0)',
transition:'transform 0.35s, border-left-color 0.35s, background 0.35s',
background: hover ? 'var(--white)' : 'transparent',
alignItems: isMobile ? 'start' : 'center'
}}
>
{num}
{[
{top:'8%', left:'-10%', w:'130%', op: 0.10},
{top:'30%', left:'-5%', w:'120%', op: 0.06},
{top:'58%', left:'-12%', w:'135%', op: 0.09},
{top:'82%', left:'-8%', w:'125%', op: 0.05}
].map((l, i) => (
))}
ENTERTAINMENT
ENTERTAINMENT
アイドル・タレント・エンタメコンテンツ事業、始動。
SNSで培った影響力と熱量を、次のステージへ。
);
// ============ RESULTS ============
const Results = ({ isMobile }) => {
const cards = [
{
channel:'YOUTUBE',
client:'資産運用チャンネル',
big:'500人 → 32,000人',
sub:'登録者数 64倍成長（1年間）',
notes:['月20〜30件のアポイント獲得', '最高30万回再生'],
graphType:'growth'
},
{
channel:'YOUTUBE',
client:'保険営業チャンネル',
big:'最短6ヶ月',
sub:'YouTube収益化達成（23本）',
notes:['保険営業という高難度ジャンル', '短期での収益化を実現'],
graphType:'monetize'
},
{
channel:'YOUTUBE',
client:'医療キャリア支援チャンネル',
big:'月5件',
sub:'月間面談実施数を確立（1年半）',
notes:['看護師向けキャリア支援チャンネル', 'YouTube → LINE → 相談の導線設計'],
graphType:'consultation'
},
{
channel:'TIKTOK / INSTAGRAM',
client:'ヘルスケア店舗アカウント',
big:'最高763万回再生',
sub:'累計再生回数（2年間）',
notes:['100万回超バズ動画 5本以上', 'ローカルビジネスSNS成功モデル'],
graphType:'viral'
}
];
return (
数字が、実力を証明する。
{cards.map((c, i) => )}
);
};
// ---- graph helpers ----
const useAnimated = () => {
const [anim, setAnim] = useState(false);
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setAnim(true); }, { threshold: 0.3 });
obs.observe(el);
return () => obs.disconnect();
}, []);
return [ref, anim];
};
const GrowthGraph = () => {
const [ref, anim] = useAnimated();
return (
);
};
const MonetizeGraph = () => {
const [ref, anim] = useAnimated();
const months = [
{label:'M1', h:22, count:'3本'},
{label:'M2', h:28, count:'4本'},
{label:'M3', h:28, count:'4本'},
{label:'M4', h:28, count:'4本'},
{label:'M5', h:28, count:'4本'},
{label:'M6', h:34, count:'4本', final:true},
];
return (
{months.map((m, i) => (
{m.final && (
達成！
)}
{m.label}
))}
月1〜4本ペースで投稿
23 VIDEOS TOTAL
);
};
const ConsultationGraph = () => {
const [ref, anim] = useAnimated();
return (
);
};
const ViralGraph = () => {
const [ref, anim] = useAnimated();
const videos = [
{h:56, label:'763万', top:true},
{h:30, label:'312万', top:false},
{h:24, label:'245万', top:false},
{h:19, label:'198万', top:false},
{h:14, label:'145万', top:false},
];
return (
{videos.map((v, i) => (
))}
バズ動画 トップ5
VIRAL HITS
);
};
const GRAPHS = { growth: GrowthGraph, monetize: MonetizeGraph, consultation: ConsultationGraph, viral: ViralGraph };
const ResultCard = ({ channel, client, big, sub, notes, graphType, isMobile }) => {
const [hover, setHover] = useState(false);
const Graph = graphType ? GRAPHS[graphType] : null;
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
background:'var(--white)', border:'1px solid var(--line)',
padding:'44px 44px 40px', position:'relative', overflow:'hidden',
transform: hover ? 'translateY(-4px)' : 'translateY(0)',
transition:'transform 0.35s ease, box-shadow 0.35s ease',
boxShadow: hover ? '0 20px 40px rgba(17,17,17,0.06)' : '0 0 0 rgba(0,0,0,0)'
}}
>
{big}
{sub}
{notes.map((n, i) => (
{n}
))}
{Graph &&
}
株式会社隼
について
株式会社隼は、SNSプロデュースの力で、夢を追うすべての人に「本気で羽ばたく機会」を届ける会社です。4年間のSNS運用で磨き上げたマーケティング力で、他の誰にも真似できない価値を創造します。
{rows.map(([en, jp, v], i) => (
))}
);
};
// ============ CTA ============
const CTA = ({ isMobile }) => {
const [hover, setHover] = useState(false);
return (
);
};
// ============ CONTACT FORM ============
const ContactForm = ({ isMobile }) => {
const [kind, setKind] = useState('SNSプロデュースのご相談');
const [company, setCompany] = useState('');
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [agree, setAgree] = useState(false);
const [hover, setHover] = useState(false);
const [sent, setSent] = useState(false);
const kinds = ['SNSプロデュースのご相談','お見積り・料金について','その他・取材・採用'];
const onSubmit = (e) => {
e.preventDefault();
if (!agree) return;
console.log('[HAYABUSA Contact]', { kind, company, name, email, phone, message });
setSent(true);
};
const inputStyle = {
width:'100%', padding:'14px 16px', fontFamily:'var(--font-jp)', fontSize: 15,
background:'var(--white)', border:'1px solid var(--line)',
color:'var(--ink)', outline:'none', transition:'border-color 0.25s',
borderRadius: 0
};
const labelStyle = {
display:'flex', alignItems:'baseline', gap: 6,
fontFamily:'var(--font-jp)', fontWeight: 700, fontSize: 13,
color:'var(--ink-2)', marginBottom: 10, letterSpacing:'0.02em'
};
const req = *;
const opt = OPTIONAL;
return (