// Variant 1 — 「四方」Shihou Minimal (refined direction)
// Message: "Technologyで、食(職人)に寄り添い、四方良しを。"
// 紙の余白、明朝主役、朱一点。章立て構造・章タイトルが縦組み。
const V1_Shihou = () => {
const __SB = (typeof window !== 'undefined' && window.__ASSET_BASE__) || './';
const { lang } = (window.useLang ? window.useLang() : { lang: 'jp' });
const EN = lang === 'en';
const { isMobile } = (window.useViewport ? window.useViewport() : { isMobile: false });
const PX = isMobile ? 20 : 80; // section horizontal padding
const PY = isMobile ? 60 : 100; // section vertical padding
const [scrollY, setScrollY] = React.useState(0);
const ref = React.useRef(null);
const heroLogoRef = React.useRef(null);
const [activeService, setActiveService] = React.useState(0);
// Slow rotation on hero logo image
React.useEffect(() => {
if (!window.gsap || !heroLogoRef.current) return;
const ctx = window.gsap.context(() => {
window.gsap.to(heroLogoRef.current, {
rotation: 360,
transformOrigin: '50% 50%',
duration: 80,
repeat: -1,
ease: 'none',
});
});
return () => ctx.revert();
}, []);
React.useEffect(() => {
// Body/window scrolls everywhere (desktop + mobile)
const onScroll = () => setScrollY(window.scrollY || window.pageYOffset || 0);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const { theme } = useTheme();
const v1 = {
paper: theme.paper,
paperDeep: theme.paperDeep,
ink: theme.ink,
sumi: theme.sumi,
shu: theme.accent,
shuDeep: theme.accentDeep,
muted: theme.muted,
mutedLight: theme.mutedLight,
line: theme.line,
serif: theme.fonts.serif,
sans: theme.fonts.sans,
mono: theme.fonts.mono,
};
const techBg = theme.mode === 'dark' ? v1.paper : v1.ink;
const techFg = theme.mode === 'dark' ? v1.ink : v1.paper;
const techBody = theme.mode === 'dark' ? v1.sumi : '#d8d2c2';
const ChapterLabel = ({ num, jp, en }) => (
CHAP. {num}
{EN ? en : `第 ${num} 章 / ${jp}`}
{EN ? jp : en}
);
// SVG "Technology ribbon" — four subtle animated strokes forming the mark as dataflow
const FlowMark = ({ size = 320, opacity = 0.1 }) => (
{Array.from({ length: 24 }).map((_, i) => (
))}
);
const ScoreMotionStyle = () => (
);
const CraftScoreSection = React.forwardRef((_, sectionRef) => {
const scoreLines = Array.from({ length: isMobile ? 7 : 12 });
const supportMenu = [
{ label: 'Management', jp: '経営管理', en: 'Business Management', href: `${__SB}services/#culimanage` },
{ label: 'Development', jp: '仕組み化・開発', en: 'Systems / Development', href: `${__SB}services/#culiec` },
{ label: 'Marketing / Branding', jp: '集客・ブランド', en: 'Marketing / Branding', href: `${__SB}services/#culimedia` },
{ label: 'Sales / Customer Success', jp: '営業・顧客対応', en: 'Sales / Customer Success', href: `${__SB}services/#curegi` },
];
return (
{window.DecorativeMotionField ? : null}
{window.MorphLineMotif ? : null}
{window.MorphLineMotif ? : null}
{scoreLines.map((_, i) => (
))}
{EN
? <>For makers, back to whatmatters .>
: <>作り手が、 本来向き合うべきこと へ。>}
{EN
? <>With respect for makers, Culina supports the non-production side of business from four directions: management, systems, marketing, and sales, so craftspeople can fully face the work only they can do.>
: <>Culinaは作り手に敬意を持ちつつ、職人が本来向き合うべきことに全力で向き合えるよう、企業の非生産領域 を、経営・仕組み・集客・営業の4方向から支援する。>}
{EN
? <>Inside the maker's everyday discipline livecraft, spirit, and essence .>
: <>作り手の当たり前の積み重ねの中に、技術と魂と本質 がある。>}
);
});
// Refs for GSAP reveal animations (motion.jsx provides window.useReveal)
const scoreRef = React.useRef(null);
const introRef = React.useRef(null);
const philosophyRef = React.useRef(null);
const techRef = React.useRef(null);
const servicesRef = React.useRef(null);
const manifestoRef = React.useRef(null);
const newsRef = React.useRef(null);
const ctaRef = React.useRef(null);
// Fallback no-op if motion.jsx isn't loaded (e.g. DesignCanvas preview)
const reveal = window.useReveal || ((_ref, _opt) => {});
reveal(scoreRef, { y: 70, duration: 1.25, stagger: 0.08 });
reveal(introRef, { y: 80, duration: 1.2 });
reveal(philosophyRef,{ y: 100, duration: 1.3, stagger: 0.18 });
reveal(techRef, { y: 80, duration: 1.2 });
reveal(servicesRef, { y: 60, duration: 1.1, stagger: 0.1 });
reveal(manifestoRef, { y: 80, duration: 1.4, scale: 0.95 });
reveal(newsRef, { y: 60, duration: 1.1, stagger: 0.08 });
reveal(ctaRef, { y: 80, duration: 1.2 });
return (
{/* Scroll progress bar + Motion init */}
{window.ScrollProgressBar ?
: null}
{window.MotionReady ?
: null}
{/* ── NAV ─────────────────────────────────── */}
{window.SiteNav ?
: null}
{/* ── HERO ───────────────────────────────── */}
{/* Animated shape backdrop (Ver2) */}
{window.ShapeBackdrop ? : null}
{/* bg flow mark */}
{/* top labels */}
CULINA, INC. / EST. 2019 TOKYO
{EN ? 'SHIHOU × AI / DX' : '四方良し × AI / DX'}
{/* Main headline with logo on the right */}
{EN
? <>Technology alongside food (and its makers) >
: <>Technology で 食(職人) に寄り添い>}
{EN
? <>A fourfoldgood , an AX .>
: <>四方良し のAX を。>}
{/* Right — logo as hero visual with four-way labels */}
{/* concentric rings — "寄り添う" enveloping motion */}
{[110, 140, 170, 200].map((r, i) => (
))}
{[60, 230, 260].map((r, i) => (
))}
{/* cross guides */}
{/* 4-way labels */}
{[
{ t: '買 い 手', en: 'BUYER', style: { top: 0, left: '50%', transform: 'translate(-50%, -50%)' } },
{ t: '売 り 手', en: 'SELLER', style: { right: 0, top: '50%', transform: 'translate(50%, -50%)' } },
{ t: '世 間', en: 'WORLD', style: { bottom: 0, left: '50%', transform: 'translate(-50%, 50%)' } },
{ t: '作 り 手', en: 'MAKER', style: { left: 0, top: '50%', transform: 'translate(-50%, -50%)' }, emphasize: true },
].map((c, i) => (
{EN ? c.en : c.t}
{EN ? c.t : c.en}
))}
{/* 元のロゴ画像 — GSAP でゆっくり自転 */}
{/* scroll cue */}
{EN ? 'SCROLL / READ ON' : 'SCROLL / 読み進める'}
{/* ── INTRO STATEMENT ───────────────────── */}
{window.DecorativeMotionField ? : null}
{window.MorphLineMotif ? : null}
{window.MorphLineMotif ? : null}
{EN ? (
<>In the field of food, there are skilled hands
and wisdom that cannot be fully put into words.
Yet regulations, paperwork, and labor shortages keep pulling those hands away.
We take on that complexity and use Technology to restore the time makers need
to face creation itself .>
) : (
<>食の現場には、熟練の手 と、
伝えきれない知恵 があります。
けれど、法規や事務、人手不足が
その手を、いつも煩わせている。
私たちは、その煩雑を引き受け、
職人が創造だけに 向かえる時間を、
Technologyの力で取り戻します。>
)}
{/* ── THE FOUR GOODS (PHILOSOPHY) ─────── */}
{/* Subtle animated backdrop shape */}
{window.DecorativeMotionField ? : null}
{window.MorphLineMotif ? : null}
{window.MorphLineMotif ? : null}
{window.ShapeAccent ? : null}
{EN ? <>From three to four .> : <>三方から、四方 へ。>}
{EN
? <>The Omi merchant principle says: good for the buyer, good for the seller, good for society. Culina begins by adding one more: good for the maker . Only businesses that place the maker's pride at the center can last.>
: <>近江商人の商道徳「買い手良し・売り手良し・世間良し」。そこに、作り手良し を加えるのが、Culinaの出発点です。職人の矜持を中心に据えた事業だけが、長く続き、世に残る。>}
{/* Four cards — layout echoes the logo's four-square motif */}
{FOUR_GOODS.map((f, i) => (
◇ 0{i+1} / 04
{f.kanji}
{f.yomi} / {f.en.toUpperCase()}
{f.desc}
{i === 3 && (
CULINA の第4番
)}
))}
{/* caption line */}
四方のうちどれか一つでも欠ければ、事業は続かない。
— CULINA PRINCIPLE
{/* ── TECHNOLOGY × CRAFT bridge section ── */}
{window.DecorativeMotionField ? : null}
{window.MorphLineMotif ? : null}
{window.MorphLineMotif ? : null}
第 弐 章 / TECHNOLOGY × CRAFT
{EN
? <>Technology isa tool . The protagonist is the human hand .>
: <>Technologyは、道具 。 主役は、人の手 。>}
{EN
? <>AI and DX are our strengths, but we are not here to replace makers with Technology. We read gestures, experience, and the context of the workplace carefully, then place Technology so it can stand alongside them. That is Culina's way.>
: <>AI と DX を強みとしながら、私たちは「Technologyで置き換える」会社ではありません。 職人の所作や経験、現場の文脈を丁寧に読み解き、 そこに寄り添う ようにTechnologyを置く。 それが、Culina のやり方です。>}
{[
{ num: '8', label: '事業ライン' },
{ num: '120+', label: '導入店舗' },
{ num: '2019', label: '創業年' },
].map((s, i) => (
{s.num}
{s.label.toUpperCase()}
))}
{/* ── SERVICES ─────────────────────────── */}
{window.DecorativeMotionField ? : null}
{window.MorphLineMotif ? : null}
{window.MorphLineMotif ? : null}
{EN ? <>Eight concreteforms of support .> : <>八つの、 具体的な伴走 。>}
{EN
? <>From recipe systems and NFC proof to recruiting, brand communication, commerce, and management support. Culina supports the work around makers so makers can keep facing their craft.>
: <>レシピシステム、NFC証明、採用、ブランド発信、EC、経営伴走まで。作り手が本来向き合うべきことに向き合えるよう、Culinaの事業は周辺領域を支えます。>}
{SERVICES.map((s, i) => (
setActiveService(i)}
style={{
display: 'grid',
gridTemplateColumns: isMobile ? '40px 1fr' : '60px 1.4fr 2.2fr 200px',
alignItems: 'center',
gap: isMobile ? 16 : 40,
padding: isMobile ? '20px 8px' : '28px 16px',
borderBottom: `1px solid ${v1.line}`,
cursor: 'pointer', textDecoration: 'none',
background: activeService === i ? v1.paperDeep : 'transparent',
transition: 'background 0.2s, padding 0.2s',
}}>
0{i+1}
{s.name}
{s.kana}
{isMobile && (
{EN ? s.tagEn : s.tag}
)}
{!isMobile && (
{EN ? s.tagEn : s.tag}
{s.desc ?
{s.desc}
: null}
)}
{!isMobile && (
{EN ? 'Learn more →' : '詳しく見る →'}
)}
))}
{/* ── BIG PULL QUOTE ──────────────────── */}
{window.DecorativeMotionField ? : null}
{window.MorphLineMotif ? : null}
{window.MorphLineMotif ? : null}
{window.ShapeAccent ? : null}
— MANIFESTO
{EN
? <>A world where professionals can devote themselves to creation itself .>
: <>プロフェッショナルが、創造だけ に、 専念できる世界を。>}
Culina, Inc.
{/* ── NEWS ──────────────────────────── */}
{window.MorphLineMotif ? : null}
{NEWS.map((n, i) => (
{n.date}
{n.tag.toUpperCase()}
{n.title}
→
))}
{/* ── CTA ──────────────────────────── */}
{window.MorphLineMotif ? : null}
{window.ShapeAccent ? : null}
あなたの事業の
次の一手 を、
ご一緒に。
最初の30分は、無料でお話を伺います。
私たちの八つの事業のどれが合うか、
あるいはどれも要らないのか、
正直にお伝えします。
{/* ── FOOTER ────────────────────────── */}
{window.SiteFooter ?
: null}
);
};
window.V1_Shihou = V1_Shihou;