// PAGE — composes the full scrollable homepage inside a scroll container
// Plus: fixed bottom CTA that appears after the hero
function KBPage() {
const K = window.KB;
const { Phone, Line, Sparkle } = window.KBIcon;
const scrollRef = React.useRef(null);
const [showFixedCta, setShowFixedCta] = React.useState(false);
React.useEffect(() => {
const el = scrollRef.current;
if (!el) return;
const onScroll = () => setShowFixedCta(el.scrollTop > 640 || window.scrollY > 640);
el.addEventListener('scroll', onScroll);
window.addEventListener('scroll', onScroll, { passive: true });
// Section reveal — viewport-based (works for both window and inner-div scroll)
const sections = Array.from(el.querySelectorAll('section')).slice(1);
sections.forEach(s => s.classList.add('kb-reveal'));
const revealObs = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('kb-visible');
revealObs.unobserve(entry.target);
}
});
}, { root: null, threshold: 0.06, rootMargin: '0px 0px -24px 0px' });
sections.forEach(s => revealObs.observe(s));
return () => {
el.removeEventListener('scroll', onScroll);
window.removeEventListener('scroll', onScroll);
revealObs.disconnect();
};
}, []);
return (
{/* Fixed bottom CTA */}
電話
LINE査定
{
const s = document.querySelector('#form');
if (s) s.scrollIntoView({ behavior: 'smooth', block: 'start' });
}} style={{
height: 48, border: 'none', borderRadius: 6,
background: `linear-gradient(180deg, ${K.goldLight}, ${K.gold} 50%, ${K.goldDeep})`,
color: K.navy900, textDecoration: 'none',
fontFamily: K.fontSans, fontWeight: 900, fontSize: 11.5,
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
boxShadow: '0 6px 16px rgba(201,169,97,0.3)',
}}>
無料査定
);
}
function KBRecruitBanner() {
const K = window.KB;
return (
);
}
window.KBPage = KBPage;