/* TEN GROW — Home (トップページ) */ const DS_Home = window.TENGROWDesignSystem_8927da; function TG_Home() { const { SectionHeading, Button, CircleButton, ServiceCard, NewsCard, Stat, Badge } = DS_Home; const { Container, Section, Photo, GhostWord, VideoSlot, ParticleText } = window; const [sceneI, setSceneI] = React.useState(0); const heroScenes = [ { word: "TEN GROW", cap: "成果報酬型広告のプロフェッショナル" }, { word: "PERFORMANCE", cap: "成果に、まっすぐ向き合う。" }, { word: "CREATIVE", cap: "動かす、SNS動画クリエイティブ。" }, { word: "GROWTH", cap: "その先の、成長まで伴走する。" }, ]; const Arrow = () => ; const services = [ { index: "01", badge: "成果報酬型", badgeColor: "red", en: "Performance Marketing", title: "成果報酬型マーケティング支援", description: "広告を運用するだけでなく、事業の利益構造から逆算して戦略を設計。成果に連動した支援体制で、継続的な売上成長を目指します。" }, { index: "02", badge: "販売導線", badgeColor: "amber", en: "Sales Funnel Design", title: "集客・販売導線構築", description: "集客して終わりではなく、問い合わせ・商談・成約につながる導線をLP・Web・LINEまで一気通貫で構築します。" }, { index: "03", badge: "SNS・ブランド", badgeColor: "ink", en: "Brand / SNS Growth", title: "SNS・ブランド成長支援", description: "企業や経営者の価値を言語化し、認知・採用・集客につながるブランドをSNS運用と発信で育てます。" }, ]; const news = [ { date: "2026.07.03", category: "お知らせ", categoryColor: "ink", title: "株式会社TEN GROWを設立しました" }, { date: "2026.07.10", category: "プレス", categoryColor: "amber", title: "コーポレートサイトを公開しました" }, { date: "2026.07.16", category: "サービス", categoryColor: "teal", title: "成果報酬型広告運用サービスの提供を開始しました" }, ]; const strengths = [ { src: "./assets/strength-1.png", en: "Marketing", title: "マーケティング", desc: "成果から逆算した広告設計で、獲得と売上に直結させます。" }, { src: "./assets/strength-2.png", en: "One-stop", title: "ワンストップ", desc: "媒体運用・クリエイティブ制作・分析改善までを一気通貫で。" }, { src: "./assets/strength-3.png", en: "Performance", title: "成果報酬型", desc: "費用は成果に応じて。リスクを抑えて成果に投資できます。" }, ]; const StrengthCard = ({ s, i }) => { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", flexDirection: "column", height: "100%", textDecoration: "none", color: "var(--color-text)", background: "#fff", boxShadow: hover ? "var(--shadow-lg)" : "var(--shadow-sm)", transform: hover ? "translateY(-6px)" : "none", transition: "transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)" }}>
{String(i + 1).padStart(2, "0")}. {s.en}

{s.title}

{s.desc}

 ); }; const ServiceCarousel = () => { const trackRef = React.useRef(null); const [idx, setIdx] = React.useState(0); const idxRef = React.useRef(0); const progRef = React.useRef(false); const goTo = (i) => { const el = trackRef.current; if (!el) return; const cards = el.querySelectorAll("[data-card]"); if (!cards.length) return; const n = (i + cards.length) % cards.length; const left = cards[n].offsetLeft - cards[0].offsetLeft; progRef.current = true; el.scrollTo({ left, behavior: "smooth" }); idxRef.current = n; setIdx(n); clearTimeout(el._progT); el._progT = setTimeout(() => { progRef.current = false; }, 800); }; const onScroll = () => { if (progRef.current) return; // don't clobber the counter during auto/programmatic scroll const el = trackRef.current; if (!el) return; const cards = el.querySelectorAll("[data-card]"); if (!cards.length) return; const base = cards[0].offsetLeft; let best = 0, bd = Infinity; cards.forEach((c, i) => { const d = Math.abs((c.offsetLeft - base) - el.scrollLeft); if (d < bd) { bd = d; best = i; } }); idxRef.current = best; setIdx(best); }; // auto-advance: ping-pong 01→06→01 (no jarring full rewind), pauses on hover/touch const dirRef = React.useRef(1); React.useEffect(() => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const el = trackRef.current; if (!el) return; let paused = false; const pause = () => { paused = true; }, resume = () => { paused = false; }; el.addEventListener("pointerenter", pause); el.addEventListener("pointerleave", resume); el.addEventListener("pointerdown", pause); const last = services.length - 1; const id = setInterval(() => { if (paused) return; let next = idxRef.current + dirRef.current; if (next > last) { dirRef.current = -1; next = last - 1; } else if (next < 0) { dirRef.current = 1; next = 1; } goTo(next); }, 3200); return () => { clearInterval(id); el.removeEventListener("pointerenter", pause); el.removeEventListener("pointerleave", resume); el.removeEventListener("pointerdown", pause); }; }, []); const catColors = { "成果報酬型": "var(--red-500)", "販売導線": "var(--amber-600)", "SNS・ブランド": "var(--ink-900)" }; return (
{services.map((s, i) => (
{String(i + 1).padStart(2, "0")} {s.badge}
{s.title}

{s.description}

 ))}
{services.map((_, i) => (
{String(idx + 1).padStart(2, "0")} / {String(services.length).padStart(2, "0")}
); }; return (
{/* ---------- HERO (sticky — light field, auto-cycling particle scenes) ---------- */}
{/* auto-cycling particle scenes */} s.word)} interval={3600} onScene={setSceneI} /> {/* fixed eyebrow, top — small & refined so the particle wordmark stays the hero */}

Performance Advertising Partner

{/* scene caption, lower third — synced to the cycling word */}

{heroScenes[sceneI].cap}

{/* date + scroll chevron */}
{/* ---------- everything below scrolls up over the pinned hero ---------- */}
{/* ---------- STRENGTHS (About TEN GROW) — first over the hero ---------- */}
TEN GROWの強み

About TEN GROW

{strengths.map((s, i) => )}
{/* ---------- SERVICE (dark, horizontal scroll) ---------- */}

Service
{/* ---------- COMPANY / RECRUIT split tiles ---------- */}
{[ { label: "会社情報", en: "Company", href: "#company", src: "./assets/office.png" }, { label: "採用情報", en: "Recruit", href: "#contact", src: "./assets/team.png" }, ].map((t) => ( {/* ---------- NEWS ---------- */}
{news.map((n,i)=>)}
{/* ---------- CTA ---------- */}

売上の相談は、お気軽に。

まずは現状の課題をお聞かせください。成果報酬型だからこそ、最適な一手をご提案します。
); } window.TG_Home = TG_Home;