+ {children}
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/src/components/organisms/AwardsMedia.tsx b/src/components/organisms/AwardsMedia.tsx
new file mode 100644
index 0000000..807df19
--- /dev/null
+++ b/src/components/organisms/AwardsMedia.tsx
@@ -0,0 +1,416 @@
+"use client";
+
+import type React from "react";
+import { useEffect, useState } from "react";
+
+export default function AwardsMedia() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [activeItem, setActiveItem] = useState
+
+
+
+
+ + 受賞 & メディア掲載 +
++ Tobanプロジェクトの主要な実績とマイルストーン +
+
+ {/* タイムライン軸 */}
+
+
+ {awards.map((award, index) => (
+
+ setActiveItem(index)}
+ onMouseLeave={() => setActiveItem(null)}
+ onTouchStart={() => setActiveItem(index)}
+ onTouchEnd={() => setTimeout(() => setActiveItem(null), 2000)}
+ >
+ {/* タイムライン ドット */}
+
+ ))}
+
+ {award.icon}
+
+
+ {/* コンテンツカード */}
+
+ {/* ヘッダー */}
+
+
+
+
+ {/* タイトル */}
+
+ {getTypeLabel(award.type)}
+
+
+ {award.date}
+
+ + {award.title} +
++ {award.subtitle} +
+ + {/* リンク */} +
+ {award.links.map((link, linkIndex) => (
+ {
+ e.currentTarget.style.backgroundColor = award.color;
+ e.currentTarget.style.color = "white";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = "transparent";
+ e.currentTarget.style.color = award.color;
+ }}
+ >
+ 🔗
+ {link.text}
+
+ ))}
+
+
+
+
+
+
+ + 導入事例 +
++ 実際にTobanを活用している組織とプロジェクト +
+
+ {cases.map((caseItem, index) => (
+
+ setHoveredCard(index)}
+ onMouseLeave={() => setHoveredCard(null)}
+ >
+ {/* ステータスバッジ */}
+
+ ))}
+
+ {caseItem.status === "active" ? "運用中" : "近日公開"}
+
+
+ {/* カテゴリー */}
+
+ {caseItem.category}
+
+
+ {/* ロゴセクション */}
+
+ {caseItem.logoSrc ? (
+
+
+ {/* コンテンツ */}
+
+ {caseItem.name[0]}
+
+ )}
+
+
+
+ {/* フッター */}
+ + {caseItem.name} +
++ {caseItem.description} +
+
+ {caseItem.linkUrl ? (
+
+ {caseItem.link}
+
+ ) : (
+
+ {caseItem.link}
+
+ )}
+
+
+ {/* ホバー時のアクセント */}
+ {hoveredCard === index && (
+
+ )}
+
+
+
+
+
+ + 主な機能ハイライト +
+プロジェクト運営を革新する6つの核心機能
+
+ {features.map((feature, index) => (
+
+ setActiveFeature(index)}
+ onMouseLeave={() => setActiveFeature(null)}
+ >
+
+ ))}
+
+
+
+
+ {feature.icon}
+
+
+
+
+ + {feature.title} +
++ {feature.text} +
+
+
+
+
+ {/* 背景装飾 */}
+
+
+
+
+
+
+
+
+ 参加方法
+
+
+
+
+ 参加方法
+
+ Getting Started
+
+ + あなたに最適な参加方法を選んで、今すぐTobanコミュニティに参加しましょう +
+
+ {roles.map((item, index) => (
+
+
+ {/* 全体的なCTA */}
+ setSelectedRole(index)}
+ onMouseLeave={() => setSelectedRole(null)}
+ >
+ {/* コストバッジ（右上） */}
+
+ ))}
+
+ {item.initialCost}
+
+
+ {/* アイコン（中央） */}
+
+
+
+ {/* メインコンテンツ */}
+
+ {item.icon}
+
+
+
+
+ {/* CTA ボタン */}
+ + {item.role} +
+ +{item.capabilities}
+ +{item.description}
+ + {/* メリット */} +
+
+ 主なメリット
+-
+ {item.benefits.map((benefit, benefitIndex) => (
+
- + + ✓ + + {benefit} + + ))} +
+
+
+
+
+
+
+ 始める準備はできましたか？
++ 数分で参加できます。まずはコントリビューターとして始めて、 + 徐々に他の役割も体験してみましょう。 +
+
+
+ 🚀
+ 今すぐ始める
+
+
+ 詳細ガイドを見る
+
+
+
+
+ {/* ドロワー背景 */}
+
+
+
+
+
+
+ {/* ハンバーガーアイコン */}
+ {
+ if (e.key === "Enter" || e.key === " ") toggleMenu();
+ }}
+ >
+
+
+
+
+ {/* */}
+ {
+ if (e.key === "Enter" || e.key === " ") closeMenu();
+ }}
+ />
+ {/* ドロワーメニュー */}
+ (null);
+
+ const steps = [
+ {
+ id: "signin-join",
+ number: "01",
+ title: "サインイン、ワークスペース参加",
+ description:
+ "ウォレット、ガス代なしで利用開始\n誰かから役割かアシストクレジットをもらうと自動的に参加",
+ image: "/assets/HowItWorksImage/HowItWorks1.png",
+ color: "#ff6b6b",
+ },
+ {
+ id: "role-check",
+ number: "02",
+ title: "役割の確認",
+ description:
+ "やるべきことや権限・権利を確認\n他にだれがどんな役割をもっているか見える",
+ image: "/assets/HowItWorksImage/HowItWorks2.png",
+ color: "#4ecdc4",
+ },
+ {
+ id: "assist-credit",
+ number: "03",
+ title: "アシストクレジットのやりとり",
+ description: "助けてもらったとき\n気づきをもらったとき\nただ渡したいとき",
+ images: [
+ "/assets/HowItWorksImage/HowItWorks3-1.png",
+ "/assets/HowItWorksImage/HowItWorks3-2.png",
+ ],
+ color: "#45b7d1",
+ },
+ {
+ id: "distribution-contract",
+ number: "04",
+ title: "分配コントラクトの作成",
+ description:
+ "報酬分配をしたい役割を選択\n報酬分配率はアルゴリズムで自動計算",
+ image: "/assets/HowItWorksImage/HowItWorks4.png",
+ color: "#96c93d",
+ },
+ {
+ id: "reward-distribution",
+ number: "05",
+ title: "報酬の分配",
+ description:
+ "ERC20、ネイティブトークンを分配コントラクトに送金\n1回のトランザクションで一気に分配",
+ image: "/assets/HowItWorksImage/HowItWorks5.png",
+ color: "#f39c12",
+ },
+ ];
+
+ useEffect(() => {
+ const checkMobile = () => {
+ const mobile = window.innerWidth <= 768;
+ setIsMobile(mobile);
+ // モバイル切り替え時にアニメーションをリセット
+ if (mobile !== isMobile) {
+ setIsVisible(false);
+ setTimeout(() => {
+ const element = document.getElementById("how-it-works");
+ if (element) {
+ const rect = element.getBoundingClientRect();
+ const windowHeight = window.innerHeight;
+ if (rect.top < windowHeight && rect.bottom > 0) {
+ setIsVisible(true);
+ }
+ }
+ }, 100);
+ }
+ };
+
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+
+ return () => window.removeEventListener("resize", checkMobile);
+ }, [isMobile]);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ }
+ },
+ {
+ threshold: isMobile ? 0.05 : 0.1,
+ rootMargin: isMobile ? "100px" : "50px",
+ },
+ );
+
+ const element = document.getElementById("how-it-works");
+ if (element) {
+ observer.observe(element);
+ }
+
+ return () => {
+ if (element) {
+ observer.unobserve(element);
+ }
+ };
+ }, [isMobile]);
+
+ useEffect(() => {
+ if (isVisible && !isMobile) {
+ const interval = setInterval(() => {
+ setCurrentStep((prev) => (prev + 1) % steps.length);
+ }, 3000);
+ return () => clearInterval(interval);
+ }
+ }, [isVisible, isMobile]);
+
+ return (
+
+
+ );
+}
+
+const sectionStyle: React.CSSProperties = {
+ padding: "80px 20px",
+ background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+ color: "white",
+ overflow: "hidden",
+ minHeight: "100vh",
+ position: "relative",
+};
+
+const containerStyle: React.CSSProperties = {
+ maxWidth: "1200px",
+ margin: "0 auto",
+ width: "100%",
+};
+
+const headerStyle: React.CSSProperties = {
+ textAlign: "center",
+ marginBottom: "60px",
+};
+
+const titleStyle: React.CSSProperties = {
+ fontSize: "clamp(2rem, 4vw, 2.8rem)",
+ fontWeight: "700",
+ margin: 0,
+ lineHeight: 1.2,
+};
+
+const highlightStyle: React.CSSProperties = {
+ background: "linear-gradient(120deg, #ff6b6b, #4ecdc4)",
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ backgroundClip: "text",
+};
+
+const stepsStyle: React.CSSProperties = {
+ alignItems: "flex-start",
+};
+
+const stepCardStyle: React.CSSProperties = {
+ padding: "30px 20px",
+ borderRadius: "20px",
+ backgroundColor: "white",
+ border: "2px solid #e2e8f0",
+ textAlign: "center",
+ position: "relative",
+ minHeight: "500px",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ boxShadow: "0 10px 40px rgba(0, 0, 0, 0.1)",
+ transition: "all 0.3s ease",
+};
+
+const stepIconContainerStyle: React.CSSProperties = {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+};
+
+const stepIconStyle: React.CSSProperties = {
+ width: "60px",
+ height: "60px",
+ borderRadius: "50%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transition: "transform 0.3s ease",
+};
+
+const iconTextStyle: React.CSSProperties = {
+ fontSize: "1.8rem",
+ filter: "drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3))",
+};
+
+const stepNumberStyle: React.CSSProperties = {
+ fontSize: "0.9rem",
+ fontWeight: "700",
+ color: "#64748b",
+ letterSpacing: "0.1em",
+};
+
+const stepTitleStyle: React.CSSProperties = {
+ fontSize: "1.1rem",
+ fontWeight: "600",
+ margin: "0 0 10px 0",
+ lineHeight: 1.3,
+};
+
+const stepDescriptionStyle: React.CSSProperties = {
+ fontSize: "0.9rem",
+ color: "#64748b",
+ margin: 0,
+ lineHeight: 1.4,
+};
+
+const arrowStyle: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ minWidth: "40px",
+ position: "absolute",
+ right: "-30px",
+ top: "50%",
+ transform: "translateY(-50%)",
+ zIndex: 1,
+};
+
+const arrowIconStyle: React.CSSProperties = {
+ fontSize: "1.5rem",
+ color: "rgba(255, 255, 255, 0.8)",
+ fontWeight: "bold",
+};
+
+const progressContainerStyle: React.CSSProperties = {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ gap: "15px",
+};
+
+const progressBarStyle: React.CSSProperties = {
+ width: "300px",
+ height: "6px",
+ backgroundColor: "rgba(255, 255, 255, 0.2)",
+ borderRadius: "3px",
+ overflow: "hidden",
+};
+
+const progressFillStyle: React.CSSProperties = {
+ height: "100%",
+ background: "linear-gradient(90deg, #ff6b6b, #4ecdc4)",
+ borderRadius: "3px",
+ transition: "width 0.5s ease",
+};
+
+const progressTextStyle: React.CSSProperties = {
+ fontSize: "0.9rem",
+ color: "rgba(255, 255, 255, 0.8)",
+ fontWeight: "500",
+};
+
+const modalOverlayStyle: React.CSSProperties = {
+ position: "fixed",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ zIndex: 1000,
+ padding: "20px",
+};
+
+const modalContentStyle: React.CSSProperties = {
+ position: "relative",
+ maxWidth: "90vw",
+ maxHeight: "90vh",
+ backgroundColor: "white",
+ borderRadius: "15px",
+ padding: "20px",
+ boxShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+};
+
+const modalCloseButtonStyle: React.CSSProperties = {
+ position: "absolute",
+ top: "10px",
+ right: "15px",
+ background: "none",
+ border: "none",
+ fontSize: "2rem",
+ cursor: "pointer",
+ color: "#666",
+ zIndex: 1001,
+ width: "40px",
+ height: "40px",
+ borderRadius: "50%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transition: "all 0.2s ease",
+};
+
+const modalImageStyle: React.CSSProperties = {
+ maxWidth: "100%",
+ maxHeight: "80vh",
+ objectFit: "contain",
+ borderRadius: "10px",
+};
diff --git a/src/components/organisms/InfiniteLoop.tsx b/src/components/organisms/InfiniteLoop.tsx
new file mode 100644
index 0000000..d911359
--- /dev/null
+++ b/src/components/organisms/InfiniteLoop.tsx
@@ -0,0 +1,333 @@
+import type React from "react";
+import { useState } from "react";
+
+interface LogoItem {
+ name: string;
+ logo?: string;
+}
+
+const InfiniteLoop: React.FC = () => {
+ const [currentSpeed, setCurrentSpeed] = useState(12);
+ const [isPaused, setIsPaused] = useState(false);
+ const [isHovered, setIsHovered] = useState(false);
+
+ const logoItems: LogoItem[] = [
+ { name: "Comoris" },
+ { name: "塩尻DAO" },
+ { name: "ento" },
+ { name: "ETH Tokyo" },
+ { name: "Fracton" },
+ { name: "Localcoop" },
+ ];
+
+ const handleSpeedChange = (speed: number) => {
+ setCurrentSpeed(speed);
+ };
+
+ const togglePause = () => {
+ setIsPaused(!isPaused);
+ };
+
+ const containerClasses = `
+ infinite-loop-container
+ ${isPaused || isHovered ? "paused" : ""}
+ `.trim();
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/components/organisms/ProblemSolution.tsx b/src/components/organisms/ProblemSolution.tsx
new file mode 100644
index 0000000..5caa21a
--- /dev/null
+++ b/src/components/organisms/ProblemSolution.tsx
@@ -0,0 +1,369 @@
+"use client";
+
+import type React from "react";
+import { useEffect, useState } from "react";
+
+export default function ProblemSolution() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkMobile = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+
+ return () => window.removeEventListener("resize", checkMobile);
+ }, []);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ }
+ },
+ { threshold: 0.3 },
+ );
+
+ const element = document.getElementById("problem-solution");
+ if (element) {
+ observer.observe(element);
+ }
+
+ return () => {
+ if (element) {
+ observer.unobserve(element);
+ }
+ };
+ }, []);
+
+ const problems = [
+ { id: "visibility", icon: "📊", text: "貢献の見える化が難しい" },
+ { id: "calculation", icon: "🧮", text: "報酬配分の計算が煩雑" },
+ { id: "sustainability", icon: "🔄", text: "ボランティアが続かない" },
+ { id: "communication", icon: "💬", text: "活動説明が難しい" },
+ ];
+
+ const solutions = [
+ { id: "instant-record", icon: "⚡", text: "アシストクレジットで即時記録" },
+ { id: "auto-distribution", icon: "🤖", text: "一度設定すれば自動で分配" },
+ { id: "token-reward", icon: "🎯", text: "貢献がトークンに" },
+ { id: "activity-history", icon: "📈", text: "活動履歴として可視化" },
+ ];
+
+ return (
+
+
+ );
+}
+
+const sectionStyle: React.CSSProperties = {
+ padding: "80px 20px",
+ background: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)",
+ minHeight: "100vh",
+ display: "flex",
+ alignItems: "center",
+};
+
+const containerStyle: React.CSSProperties = {
+ maxWidth: "1200px",
+ margin: "0 auto",
+ width: "100%",
+};
+
+const headerStyle: React.CSSProperties = {
+ textAlign: "center",
+ marginBottom: "60px",
+};
+
+const titleStyle: React.CSSProperties = {
+ fontSize: "clamp(1.8rem, 4vw, 2.5rem)",
+ fontWeight: "700",
+ color: "#1e293b",
+ lineHeight: 1.3,
+ margin: 0,
+};
+
+const highlightStyle: React.CSSProperties = {
+ background: "linear-gradient(120deg, #ff6b6b, #4ecdc4)",
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ backgroundClip: "text",
+};
+
+const contentGridStyle: React.CSSProperties = {
+ alignItems: "stretch",
+};
+
+const cardStyle: React.CSSProperties = {
+ borderRadius: "20px",
+ backgroundColor: "white",
+ boxShadow: "0 20px 60px rgba(0, 0, 0, 0.1)",
+ border: "1px solid rgba(255, 255, 255, 0.2)",
+ backdropFilter: "blur(10px)",
+ opacity: 0,
+ transform: "translateY(30px)",
+};
+
+const animationStyle: React.CSSProperties = {
+ animation: "fadeInUp 0.8s ease-out forwards",
+};
+
+const cardHeaderStyle: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ marginBottom: "30px",
+ paddingBottom: "20px",
+ borderBottom: "2px solid #f1f5f9",
+};
+
+const problemIconStyle: React.CSSProperties = {
+ fontSize: "2rem",
+ marginRight: "15px",
+ filter: "drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3))",
+};
+
+const solutionIconStyle: React.CSSProperties = {
+ fontSize: "2rem",
+ marginRight: "15px",
+ filter: "drop-shadow(0 2px 4px rgba(78, 205, 196, 0.3))",
+};
+
+const cardTitleStyle: React.CSSProperties = {
+ fontSize: "1.5rem",
+ fontWeight: "600",
+ margin: 0,
+ color: "#1e293b",
+};
+
+const listContainerStyle: React.CSSProperties = {
+ display: "flex",
+ flexDirection: "column",
+ gap: "20px",
+};
+
+const listItemStyle: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ padding: "15px 20px",
+ backgroundColor: "rgba(248, 250, 252, 0.8)",
+ borderRadius: "12px",
+ border: "1px solid #e2e8f0",
+ transition: "all 0.3s ease",
+ cursor: "pointer",
+ opacity: 0,
+ transform: "translateX(-20px)",
+};
+
+const listItemAnimationStyle: React.CSSProperties = {
+ animation: "slideInLeft 0.6s ease-out forwards",
+};
+
+const iconStyle: React.CSSProperties = {
+ fontSize: "1.5rem",
+ marginRight: "15px",
+ minWidth: "30px",
+};
+
+const arrowContainerStyle: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+};
+
+const arrowStyle: React.CSSProperties = {
+ fontSize: "3rem",
+ color: "#64748b",
+ fontWeight: "bold",
+ opacity: 0,
+ transform: "scale(0.5)",
+};
+
+const arrowAnimationStyle: React.CSSProperties = {
+ animation: "bounceIn 1s ease-out 0.5s forwards",
+};
diff --git a/src/components/organisms/SecurityStack.tsx b/src/components/organisms/SecurityStack.tsx
new file mode 100644
index 0000000..f9611a1
--- /dev/null
+++ b/src/components/organisms/SecurityStack.tsx
@@ -0,0 +1,437 @@
+"use client";
+
+import type React from "react";
+import { useEffect, useState } from "react";
+
+export default function SecurityStack() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [isMobile, setIsMobile] = useState(false);
+ const [hoveredCard, setHoveredCard] = useState(null);
+
+ const protocols = [
+ {
+ name: "Hats Protocol",
+ logo: "/assets/logo/hats-logo.png",
+ role: "権限付与・剥奪を NFT 化",
+ trust: "非転送型 ERC-1155。ロールは DAO が管理",
+ link: "https://docs.hatsprotocol.xyz",
+ linkText: "docs.hatsprotocol.xyz",
+ color: "#ff6b6b",
+ icon: "🎩",
+ },
+ {
+ name: "0xSplits",
+ logo: "/assets/logo/splits-logo.png",
+ role: "報酬の自動分配",
+ trust: "監査済み & ハイパーストラクチャ",
+ link: "https://review.mirror.xyz",
+ linkText: "review.mirror.xyz",
+ color: "#4ecdc4",
+ icon: "💰",
+ },
+ {
+ name: "ENS",
+ logo: "/assets/logo/ens-mark-Blue.svg",
+ role: "認識しやすい受取アドレス",
+ trust: "オープンソース／分散管理",
+ link: "https://ens.domains",
+ linkText: "ens.domains",
+ color: "#45b7d1",
+ icon: "🌐",
+ },
+ ];
+
+ const securityFeatures = [
+ { icon: "🔓", text: "すべてオープンソース", color: "#ff6b6b" },
+ {
+ icon: "🛡️",
+ text: "スマートコントラクトはすべて監査済み",
+ color: "#4ecdc4",
+ },
+ { icon: "⚔️", text: "複数コミュニティで実戦投入", color: "#45b7d1" },
+ ];
+
+ useEffect(() => {
+ const checkMobile = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+
+ return () => window.removeEventListener("resize", checkMobile);
+ }, []);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ }
+ },
+ { threshold: 0.3 },
+ );
+
+ const element = document.getElementById("security-stack");
+ if (element) {
+ observer.observe(element);
+ }
+
+ return () => {
+ if (element) {
+ observer.unobserve(element);
+ }
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
+
+const sectionStyle: React.CSSProperties = {
+ padding: "80px 20px",
+ background: "linear-gradient(135deg, #1e293b 0%, #334155 100%)",
+ color: "white",
+ position: "relative",
+ overflow: "hidden",
+};
+
+const containerStyle: React.CSSProperties = {
+ maxWidth: "1200px",
+ margin: "0 auto",
+ width: "100%",
+ position: "relative",
+};
+
+const headerStyle: React.CSSProperties = {
+ textAlign: "center",
+ marginBottom: "60px",
+};
+
+const titleStyle: React.CSSProperties = {
+ fontSize: "clamp(2rem, 4vw, 2.8rem)",
+ fontWeight: "700",
+ margin: 0,
+ lineHeight: 1.2,
+};
+
+const securityIconStyle: React.CSSProperties = {
+ display: "inline-block",
+ marginRight: "15px",
+ fontSize: "2.5rem",
+ filter: "drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4))",
+};
+
+const highlightStyle: React.CSSProperties = {
+ background: "linear-gradient(120deg, #ffd700, #ff6b6b)",
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ backgroundClip: "text",
+};
+
+const featuresContainerStyle: React.CSSProperties = {
+ display: "flex",
+ flexDirection: "column",
+ gap: "15px",
+ alignItems: "center",
+};
+
+const featureItemStyle: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ gap: "15px",
+ padding: "20px 25px",
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ borderRadius: "50px",
+ backdropFilter: "blur(10px)",
+ border: "1px solid rgba(255, 255, 255, 0.2)",
+ opacity: 0,
+ transform: "translateY(20px)",
+ maxWidth: "600px",
+ width: "100%",
+};
+
+const featureAnimationStyle: React.CSSProperties = {
+ animation: "slideInRight 0.8s ease-out forwards",
+};
+
+const featureIconStyle: React.CSSProperties = {
+ fontSize: "2rem",
+};
+
+const protocolGridStyle: React.CSSProperties = {
+ alignItems: "stretch",
+};
+
+const protocolCardStyle: React.CSSProperties = {
+ backgroundColor: "white",
+ borderRadius: "20px",
+ padding: "35px 30px",
+ border: "2px solid #e2e8f0",
+ color: "#1e293b",
+ boxShadow: "0 20px 60px rgba(0, 0, 0, 0.1)",
+ cursor: "pointer",
+ position: "relative",
+};
+
+const protocolHeaderStyle: React.CSSProperties = {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ marginBottom: "30px",
+};
+
+const logoContainerStyle: React.CSSProperties = {
+ width: "120px",
+ height: "120px",
+ borderRadius: "20px",
+ backgroundColor: "#f8f9fa",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ marginBottom: "20px",
+ transition: "all 0.3s ease",
+};
+
+const logoStyle: React.CSSProperties = {
+ width: "80px",
+ height: "auto",
+ maxHeight: "80px",
+ objectFit: "contain",
+};
+
+const protocolTitleStyle: React.CSSProperties = {
+ fontSize: "1.5rem",
+ fontWeight: "700",
+ margin: 0,
+ transition: "color 0.3s ease",
+};
+
+const roleContainerStyle: React.CSSProperties = {
+ marginBottom: "20px",
+};
+
+const trustContainerStyle: React.CSSProperties = {
+ marginBottom: 0,
+};
+
+const labelStyle: React.CSSProperties = {
+ display: "inline-block",
+ padding: "6px 12px",
+ borderRadius: "20px",
+ fontSize: "0.9rem",
+ fontWeight: "600",
+ color: "white",
+ marginBottom: "10px",
+};
+
+const roleTextStyle: React.CSSProperties = {
+ fontSize: "1rem",
+ lineHeight: 1.6,
+ margin: 0,
+ color: "#475569",
+};
+
+const trustTextStyle: React.CSSProperties = {
+ fontSize: "1rem",
+ lineHeight: 1.6,
+ margin: 0,
+ color: "#475569",
+};
+
+const linkStyle: React.CSSProperties = {
+ textDecoration: "none",
+ fontWeight: "600",
+ transition: "opacity 0.3s ease",
+};
diff --git a/src/components/organisms/TrackRecord.tsx b/src/components/organisms/TrackRecord.tsx
new file mode 100644
index 0000000..4174d92
--- /dev/null
+++ b/src/components/organisms/TrackRecord.tsx
@@ -0,0 +1,369 @@
+"use client";
+
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export default function TrackRecord() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [animatedNumbers, setAnimatedNumbers] = useState([0, 0, 0]);
+ const [isMobile, setIsMobile] = useState(true); // 初期値をtrueに設定してSSR時にパルスを無効化
+ const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([null, null, null]);
+
+ const records = [
+ {
+ id: "total-value",
+ metric: "累計流通額",
+ value: "¥125,000,000 相当",
+ numericValue: 125000000,
+ suffix: " 相当",
+ prefix: "¥",
+ icon: "💰",
+ color: "#10b981",
+ },
+ {
+ id: "organizations",
+ metric: "導入組織数",
+ value: "34 DAO / NPO / 地域団体",
+ numericValue: 34,
+ suffix: " DAO / NPO / 地域団体",
+ prefix: "",
+ icon: "🏢",
+ color: "#3b82f6",
+ },
+ {
+ id: "transactions",
+ metric: "処理 Tx",
+ value: "18,420 Tx",
+ numericValue: 18420,
+ suffix: " Tx",
+ prefix: "",
+ icon: "⚡",
+ color: "#f59e0b",
+ },
+ ];
+
+ const animateNumber = useCallback(
+ (finalValue: number, index: number, duration = 2000) => {
+ let startValue = 0;
+ const increment = finalValue / (duration / 50);
+
+ const intervalId = intervalRefs.current[index];
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+
+ intervalRefs.current[index] = setInterval(() => {
+ startValue += increment;
+ if (startValue >= finalValue) {
+ startValue = finalValue;
+ const intervalId = intervalRefs.current[index];
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+ intervalRefs.current[index] = null;
+ }
+ setAnimatedNumbers((prev) => {
+ const newNumbers = [...prev];
+ newNumbers[index] = Math.floor(startValue);
+ return newNumbers;
+ });
+ }, 50);
+ },
+ [],
+ );
+
+ const formatNumber = (num: number, index: number) => {
+ const record = records[index];
+ if (index === 0) {
+ // 累計流通額
+ return `${record.prefix}${num.toLocaleString()}`;
+ }
+ if (index === 2) {
+ // 処理 Tx
+ return num.toLocaleString();
+ }
+ return num.toString();
+ };
+
+ useEffect(() => {
+ // より確実なモバイル判定
+ const checkMobile = () => {
+ const isMobileWidth = window.innerWidth <= 768;
+ const isMobileUserAgent =
+ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+ navigator.userAgent,
+ );
+ const isTouchDevice =
+ "ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+ // いずれかの条件が満たされればモバイルとして判定
+ setIsMobile(isMobileWidth || isMobileUserAgent || isTouchDevice);
+ };
+
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !isVisible) {
+ setIsVisible(true);
+ // アニメーション開始（少し遅延を付けて順次実行）
+ records.forEach((record, index) => {
+ setTimeout(() => {
+ animateNumber(record.numericValue, index);
+ }, index * 300);
+ });
+ }
+ },
+ { threshold: 0.3 },
+ );
+
+ const element = document.getElementById("track-record");
+ if (element) {
+ observer.observe(element);
+ }
+
+ return () => {
+ window.removeEventListener("resize", checkMobile);
+ if (element) {
+ observer.unobserve(element);
+ }
+ // クリーンアップ
+ for (const interval of intervalRefs.current) {
+ if (interval) clearInterval(interval);
+ }
+ };
+ }, [animateNumber, isVisible]); // 依存配列を正しく設定
+
+ return (
+
+
+ );
+}
+
+const sectionStyle: React.CSSProperties = {
+ padding: "80px 20px",
+ background: "linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%)",
+ color: "white",
+ position: "relative",
+ overflow: "hidden",
+};
+
+const containerStyle: React.CSSProperties = {
+ maxWidth: "1200px",
+ margin: "0 auto",
+ width: "100%",
+};
+
+const headerStyle: React.CSSProperties = {
+ textAlign: "center",
+ marginBottom: "60px",
+};
+
+const titleStyle: React.CSSProperties = {
+ fontSize: "clamp(2rem, 4vw, 2.8rem)",
+ fontWeight: "700",
+ margin: 0,
+ lineHeight: 1.2,
+};
+
+const highlightStyle: React.CSSProperties = {
+ background: "linear-gradient(120deg, #10b981, #3b82f6)",
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ backgroundClip: "text",
+};
+
+const periodStyle: React.CSSProperties = {
+ fontSize: "1.2rem",
+ fontWeight: "400",
+ color: "rgba(255, 255, 255, 0.8)",
+};
+
+const gridStyle: React.CSSProperties = {
+ display: "grid",
+ gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+ gap: "40px",
+ maxWidth: "1000px",
+ margin: "0 auto",
+ marginBottom: "60px",
+};
+
+const cardStyle: React.CSSProperties = {
+ padding: "40px",
+ borderRadius: "24px",
+ background: "rgba(255, 255, 255, 0.05)",
+ border: "2px solid",
+ backdropFilter: "blur(10px)",
+ boxShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
+ transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
+ position: "relative",
+ overflow: "hidden",
+ opacity: 0,
+ transform: "translateY(50px) scale(0.9)",
+};
+
+const iconContainerStyle: React.CSSProperties = {
+ width: "70px",
+ height: "70px",
+ borderRadius: "18px",
+ border: "2px solid",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ marginBottom: "25px",
+ marginLeft: "auto",
+ marginRight: "auto",
+};
+
+const iconStyle: React.CSSProperties = {
+ fontSize: "2rem",
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))",
+};
+
+const contentStyle: React.CSSProperties = {
+ marginBottom: "25px",
+};
+
+const metricStyle: React.CSSProperties = {
+ fontSize: "1rem",
+ color: "rgba(255, 255, 255, 0.8)",
+ margin: "0 0 15px 0",
+ fontWeight: "500",
+ letterSpacing: "0.05em",
+};
+
+const valueStyle: React.CSSProperties = {
+ fontSize: "clamp(1.8rem, 4vw, 2.2rem)",
+ fontWeight: "700",
+ margin: 0,
+ lineHeight: 1.2,
+};
+
+const suffixStyle: React.CSSProperties = {
+ fontSize: "0.7em",
+ fontWeight: "400",
+ opacity: 0.8,
+};
+
+const progressBarStyle: React.CSSProperties = {
+ height: "6px",
+ borderRadius: "3px",
+ overflow: "hidden",
+};
+
+const progressFillStyle: React.CSSProperties = {
+ height: "100%",
+ borderRadius: "3px",
+ transition: "width 1s cubic-bezier(0.4, 0, 0.2, 1)",
+};
+
+const pulseStyle: React.CSSProperties = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ width: "300px",
+ height: "300px",
+ borderRadius: "50%",
+ transform: "translate(-50%, -50%)",
+ pointerEvents: "none",
+ zIndex: -1,
+};
+
+const noteContainerStyle: React.CSSProperties = {
+ textAlign: "center",
+ padding: "30px",
+ borderRadius: "16px",
+ background: "rgba(255, 255, 255, 0.05)",
+ border: "1px solid rgba(255, 255, 255, 0.1)",
+ backdropFilter: "blur(10px)",
+};
+
+const noteStyle: React.CSSProperties = {
+ fontSize: "1rem",
+ color: "rgba(255, 255, 255, 0.7)",
+ margin: 0,
+ fontStyle: "italic",
+};
diff --git a/src/components/organisms/UseCases.tsx b/src/components/organisms/UseCases.tsx
new file mode 100644
index 0000000..93f15fe
--- /dev/null
+++ b/src/components/organisms/UseCases.tsx
@@ -0,0 +1,579 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+export default function UseCases() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [hoveredCard, setHoveredCard] = useState(null);
+ const [selectedCard, setSelectedCard] = useState(null);
+
+ const cases = [
+ {
+ id: "municipality",
+ title: "自治体の課長さんへ",
+ subtitle: "（地域振興 / 住民参加施策）",
+ icon: "🏛️",
+ color: "#3b82f6",
+ gradient: "linear-gradient(135deg,rgb(95, 140, 212), #1d4ed8)",
+ challenges: [
+ "ボランティア活動の参加率が伸びない",
+ "「誰がどれくらい活動しているか」を把握できない",
+ "助成金や成果報告に必要なデータ収集が手間",
+ ],
+ solutions: [
+ "活動参加をアシストクレジットで即時記録",
+ "住民の貢献を見える化して、モチベーション向上",
+ "データが蓄積されるので、助成金申請・行政報告に活用可能",
+ ],
+ value: "透明で持続可能な「住民参加型まちづくり」を実現できる",
+ },
+ {
+ id: "enterprise",
+ title: "企業の担当者さんへ",
+ subtitle: "（新規事業 / コミュニティマーケティング）",
+ icon: "🏢",
+ color: "#10b981",
+ gradient: "linear-gradient(135deg, #10b981, #047857)",
+ challenges: [
+ "社内外コミュニティでの貢献が定量化できない",
+ "コミュニティ施策のROIを上司や経営陣に説明しにくい",
+ "インセンティブやリワードが不公平になりがち",
+ ],
+ solutions: [
+ "定量的な貢献ログをダッシュボードで可視化",
+ "スマートコントラクトで公平な報酬分配",
+ "API連携で既存マーケティングシステムにデータ統合",
+ ],
+ value:
+ "「成果が見える」コミュニティ施策として社内説明・承認が取りやすくなる",
+ },
+ {
+ id: "community",
+ title: "地域コミュニティマネージャーさんへ",
+ subtitle: "（NPO・団体運営者）",
+ icon: "🤝",
+ color: "#f59e0b",
+ gradient: "linear-gradient(135deg, #f59e0b, #d97706)",
+ challenges: [
+ "会員やボランティアの参加状況が曖昧",
+ "貢献に対して感謝やリワードをどう設計するか悩む",
+ "活動の継続性が不安定",
+ ],
+ solutions: [
+ "役割NFTでメンバーの役割を明確化",
+ "貢献量に応じた自動報酬で不公平感を減らす",
+ "活動ログを継続的に蓄積し、信頼の見える化",
+ ],
+ value:
+ "貢献が「忘れられない・不公平にならない」仕組みで、持続的なコミュニティ運営が可能",
+ },
+ {
+ id: "creator",
+ title: "コミュニティ創設者さん・\n運営者さんへ",
+ subtitle: "",
+ icon: "💻",
+ color: "#8b5cf6",
+ gradient: "linear-gradient(135deg,rgb(149, 128, 196), #7c3aed)",
+ challenges: [
+ "仲間の貢献が可視化されにくい",
+ "金銭的な報酬やインセンティブ設計が難しい",
+ "運営の負担が集中しやすい",
+ ],
+ solutions: [
+ "役割NFTとアシストクレジットで「誰がどのくらい貢献したか」を明確化",
+ "貢献に応じて報酬を自動分配、透明性を確保",
+ "活動記録を残せるため、次の協力者を巻き込みやすい",
+ ],
+ value:
+ "信頼できる仕組みで、コミュニティをゼロからでも安心して立ち上げられる",
+ },
+ ];
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ }
+ },
+ { threshold: 0.3 },
+ );
+
+ const element = document.getElementById("use-cases");
+ if (element) {
+ observer.observe(element);
+ }
+
+ return () => {
+ if (element) {
+ observer.unobserve(element);
+ }
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
+
+const sectionStyle: React.CSSProperties = {
+ padding: "80px 20px",
+ background: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)",
+ minHeight: "100vh",
+ display: "flex",
+ alignItems: "center",
+};
+
+const containerStyle: React.CSSProperties = {
+ maxWidth: "1400px",
+ margin: "0 auto",
+ width: "100%",
+};
+
+const headerStyle: React.CSSProperties = {
+ textAlign: "center",
+ marginBottom: "60px",
+};
+
+const titleStyle: React.CSSProperties = {
+ fontSize: "clamp(2rem, 4vw, 2.5rem)",
+ fontWeight: "700",
+ color: "#1e293b",
+ lineHeight: 1.3,
+ margin: 0,
+};
+
+const subtitleStyle: React.CSSProperties = {
+ fontSize: "1.1rem",
+ color: "#64748b",
+ marginTop: "20px",
+ lineHeight: 1.6,
+ maxWidth: "600px",
+ margin: "20px auto 0 auto",
+};
+
+const highlightStyle: React.CSSProperties = {
+ background: "linear-gradient(120deg, #3b82f6, #8b5cf6)",
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ backgroundClip: "text",
+};
+
+const gridStyle: React.CSSProperties = {
+ display: "grid",
+ gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
+ gap: "30px",
+ maxWidth: "1200px",
+ margin: "0 auto",
+};
+
+const cardStyle: React.CSSProperties = {
+ padding: "30px",
+ borderRadius: "20px",
+ backgroundColor: "white",
+ border: "1px solid #e2e8f0",
+ boxShadow: "0 10px 40px rgba(0, 0, 0, 0.1)",
+ transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+ cursor: "pointer",
+ position: "relative",
+ overflow: "hidden",
+ opacity: 0,
+ transform: "translateY(30px)",
+ display: "flex",
+ flexDirection: "column",
+};
+
+const iconContainerStyle: React.CSSProperties = {
+ width: "70px",
+ height: "70px",
+ borderRadius: "16px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ marginBottom: "20px",
+ marginLeft: "auto",
+ marginRight: "auto",
+ border: "2px solid",
+ transition: "all 0.3s ease",
+};
+
+const iconStyle: React.CSSProperties = {
+ fontSize: "2rem",
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))",
+};
+
+const contentStyle: React.CSSProperties = {
+ flex: 1,
+ marginBottom: "20px",
+};
+
+const cardTitleStyle: React.CSSProperties = {
+ fontSize: "1.4rem",
+ fontWeight: "700",
+ margin: "0 0 8px 0",
+ lineHeight: 1.2,
+ transition: "color 0.3s ease",
+};
+
+const subtitleCardStyle: React.CSSProperties = {
+ fontSize: "0.9rem",
+ margin: "0 0 20px 0",
+ lineHeight: 1.4,
+ fontWeight: "500",
+ transition: "color 0.3s ease",
+};
+
+const previewStyle: React.CSSProperties = {
+ marginTop: "15px",
+};
+
+const previewSectionStyle: React.CSSProperties = {
+ marginBottom: "15px",
+};
+
+const sectionTitleStyle: React.CSSProperties = {
+ fontSize: "1rem",
+ fontWeight: "600",
+ margin: "0 0 10px 0",
+ textTransform: "uppercase",
+ letterSpacing: "0.5px",
+ transition: "color 0.3s ease",
+};
+
+const previewTextStyle: React.CSSProperties = {
+ fontSize: "0.95rem",
+ lineHeight: 1.5,
+ margin: 0,
+ transition: "color 0.3s ease",
+};
+
+const detailStyle: React.CSSProperties = {
+ marginTop: "15px",
+};
+
+const detailSectionStyle: React.CSSProperties = {
+ marginBottom: "25px",
+};
+
+const listStyle: React.CSSProperties = {
+ margin: "0",
+ paddingLeft: "0",
+ listStyle: "none",
+};
+
+const listItemStyle: React.CSSProperties = {
+ fontSize: "0.95rem",
+ lineHeight: 1.6,
+ marginBottom: "8px",
+ paddingLeft: "20px",
+ position: "relative",
+ transition: "color 0.3s ease",
+};
+
+const valueContainerStyle: React.CSSProperties = {
+ padding: "20px",
+ borderRadius: "12px",
+ backgroundColor: "rgba(59, 130, 246, 0.05)",
+ border: "1px solid rgba(59, 130, 246, 0.1)",
+ marginTop: "20px",
+};
+
+const valueTextStyle: React.CSSProperties = {
+ fontSize: "1rem",
+ fontWeight: "600",
+ lineHeight: 1.5,
+ margin: 0,
+ transition: "color 0.3s ease",
+};
+
+const cardFooterStyle: React.CSSProperties = {
+ paddingTop: "20px",
+ borderTop: "1px solid",
+ transition: "border-color 0.3s ease",
+ textAlign: "center",
+};
+
+const learnMoreStyle: React.CSSProperties = {
+ fontSize: "0.9rem",
+ fontWeight: "600",
+ transition: "color 0.3s ease",
+};
+
+const decorationStyle: React.CSSProperties = {
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ pointerEvents: "none",
+ overflow: "hidden",
+};
+
+const decoration1Style: React.CSSProperties = {
+ position: "absolute",
+ top: "-50%",
+ right: "-20%",
+ width: "100px",
+ height: "100px",
+ borderRadius: "50%",
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ animation: "float 3s ease-in-out infinite",
+};
+
+const decoration2Style: React.CSSProperties = {
+ position: "absolute",
+ bottom: "-30%",
+ left: "-10%",
+ width: "60px",
+ height: "60px",
+ borderRadius: "50%",
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ animation: "float 3s ease-in-out infinite reverse",
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 956fa84..1e82c85 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,15 @@
import type { AppProps } from "next/app";
+import "../themes/styles/globals.css";
+import Head from "next/head";
export default function App({ Component, pageProps }: AppProps) {
- return
+
);
}
diff --git a/src/themes/global.ts b/src/themes/global.ts
new file mode 100644
index 0000000..eb60a8d
--- /dev/null
+++ b/src/themes/global.ts
@@ -0,0 +1,38 @@
+import { css } from "@emotion/react";
+import { mq } from "./settings/breakpoints";
+import { info, neutral } from "./settings/color";
+import {} from "./settings/spaces";
+
+export const globalStyles = css({
+ "html, body": {
+ color: neutral.White,
+ margin: "0",
+ padding: "0",
+ },
+
+ h1: {
+ fontWeight: 500,
+ letterSpacing: "0.07rem",
+ },
+
+ h2: {
+ fontWeight: 800,
+ letterSpacing: "0.1rem",
+
+ [mq.laptop]: {
+ fontSize: "2rem",
+ },
+ },
+
+ h3: {},
+
+ p: {
+ fontWeight: 300,
+ lineHeight: 2,
+ letterSpacing: "0.07rem",
+ },
+
+ a: { color: neutral.White, "&:hover": { color: info.Attention } },
+
+ li: { margin: "12px 0;" },
+});
diff --git a/src/themes/settings/breakpoints.ts b/src/themes/settings/breakpoints.ts
new file mode 100644
index 0000000..aea6372
--- /dev/null
+++ b/src/themes/settings/breakpoints.ts
@@ -0,0 +1,8 @@
+export const mq = {
+ mobileSmall: "@media (max-width: 479px)",
+ mobile: "@media (min-width: 480px)",
+ tablet: "@media (min-width: 768px)",
+ laptop: "@media (min-width: 1024px)",
+ desktop: "@media (min-width: 1440px)",
+ monitor: "@media (min-width: 2560px)",
+} as const;
diff --git a/src/themes/settings/color.ts b/src/themes/settings/color.ts
new file mode 100644
index 0000000..aa1827c
--- /dev/null
+++ b/src/themes/settings/color.ts
@@ -0,0 +1,69 @@
+/* Color Pallet */
+
+export const neutral = {
+ White: "#FFFFFF",
+ Grey1: "#FFF8F6",
+ Grey2: "#E5DBDF",
+ Grey3: "#BFB2C0",
+ Grey4: "#775566",
+ Grey5: "#332233",
+ Grey6: "#221122",
+ Black: "#000000",
+ Text: "#111111",
+} as const;
+
+export const brand = {
+ Primary: "#FEFBF7",
+ Secondary: "#0E052E",
+ Accent1: "#EAC435",
+ Accent2: "#B07C8C",
+
+ // 互換性のために残しておく従来の色名（新しい色で置き換え）
+ OffWhite: "#FEFBF7", // brand.Primary と同じ
+ Indigo: "#0E052E", // brand.Secondary と同じ
+ TurkishRose: "#B07C8C", // brand.Accent2 と同じ
+ BluePantone: "#4455FF", // themeLight.Link と同じ
+ MustardYellow: "#EAC435", // brand.Accent1 と同じ
+} as const;
+
+export const themeLight = {
+ Primary: brand.Primary,
+ PrimaryHighContrast: "#CC3322",
+ PrimaryLowContrast: "#FFDDDD",
+ PrimaryHover: "#FF7766",
+ PrimaryVisited: "#CC4433",
+
+ Secondary: brand.Secondary,
+ SecondaryHighContrast: "#331144",
+ SecondaryLowContrast: "#EEDDFF",
+
+ Link: "#4455FF",
+ LinkHover: "#DD66FF",
+
+ Body: neutral.Text,
+ BodyLight: neutral.Grey4,
+ Disable: neutral.Grey3,
+ Background: "#FEFBF7",
+ BackgroundHighlight: neutral.Grey1,
+} as const;
+
+export const info = {
+ Success: "#668844",
+ SuccessLight: "#EEFFDD",
+ Error: brand.Primary,
+ ErrorLight: "#FFEEEE",
+ Attention: "#FFAA44",
+ AttentionLight: "#FFF8DD",
+} as const;
+
+export const social = {
+ GitHub: "#333",
+ Discord: "#5865f2",
+ Twitter: "#1da1f2",
+ YouTube: "#ff0000",
+} as const;
+
+export const ui = {
+ Blue: "#60a5fa",
+ Green: "#34d399",
+} as const;
diff --git a/src/themes/settings/spaces.ts b/src/themes/settings/spaces.ts
new file mode 100644
index 0000000..bb0d46c
--- /dev/null
+++ b/src/themes/settings/spaces.ts
@@ -0,0 +1,102 @@
+// spacing constants
+// every increment corresponds to an additional 0.25rem / 4px.
+
+export const spacing = {
+ 0: "0px",
+ 0.25: "0.25rem",
+ 0.5: "0.5rem",
+ 0.75: "0.75rem",
+ 1: "1rem",
+ 1.25: "1.25rem",
+ 1.5: "1.5rem",
+ 1.75: "1.75rem",
+ 2: "2rem",
+ 2.25: "2.25rem",
+ 2.5: "2.5rem",
+ 2.75: "2.75rem",
+ 3: "3rem",
+ 3.25: "3.25rem",
+ 3.5: "3.5rem",
+ 3.75: "3.75rem",
+ 4: "4rem",
+ 4.25: "4.25rem",
+ 4.5: "4.5rem",
+ 4.75: "4.75rem",
+ 5: "5rem",
+ 5.25: "5.25rem",
+ 5.5: "5.5rem",
+ 5.75: "5.75rem",
+ 6: "6rem",
+ 6.25: "6.25rem",
+ 6.5: "6.5rem",
+ 6.75: "6.75rem",
+ 7: "7rem",
+ 7.25: "7.25rem",
+ 7.5: "7.5rem",
+ 7.75: "7.75rem",
+ 8: "8rem",
+ 8.25: "8.25rem",
+ 8.5: "8.5rem",
+ 8.75: "8.75rem",
+ 9: "9rem",
+ 9.25: "9.25rem",
+ 9.5: "9.5rem",
+ 9.75: "9.75rem",
+ 10: "10rem",
+ 10.25: "10.25rem",
+ 10.5: "10.5rem",
+ 10.75: "10.75rem",
+ 11: "11rem",
+ 11.25: "11.25rem",
+ 11.5: "11.5rem",
+ 11.75: "11.75rem",
+ 12: "12rem",
+ 12.25: "12.25rem",
+ 12.5: "12.5rem",
+ 12.75: "12.75rem",
+ 13: "13rem",
+ 13.25: "13.25rem",
+ 13.5: "13.5rem",
+ 13.75: "13.75rem",
+ 14: "14rem",
+ 14.25: "14.25rem",
+ 14.5: "14.5rem",
+ 14.75: "14.75rem",
+ 15: "15rem",
+ 15.25: "15.25rem",
+ 15.5: "15.5rem",
+ 15.75: "15.75rem",
+ 16: "16rem",
+ 16.25: "16.25rem",
+ 16.5: "16.5rem",
+ 16.75: "16.75rem",
+ 17: "17rem",
+ 17.25: "17.25rem",
+ 17.5: "17.5rem",
+ 17.75: "17.75rem",
+ 18: "18rem",
+ 18.25: "18.25rem",
+ 18.5: "18.5rem",
+ 18.75: "18.75rem",
+ 19: "19rem",
+ 19.25: "19.25rem",
+ 19.5: "19.5rem",
+ 19.75: "19.75rem",
+ 20: "20rem",
+ 20.25: "20.25rem",
+ 20.5: "20.5rem",
+ 20.75: "20.75rem",
+ 21: "21rem",
+ 21.25: "21.25rem",
+ 21.5: "21.5rem",
+ 21.75: "21.75rem",
+ 22: "22rem",
+ 22.25: "22.25rem",
+ 22.5: "22.5rem",
+ 22.75: "22.75rem",
+ 23: "23rem",
+ 23.25: "23.25rem",
+ 23.5: "23.5rem",
+ 23.75: "23.75rem",
+ 24: "24rem",
+};
diff --git a/src/themes/styles/globals.css b/src/themes/styles/globals.css
new file mode 100644
index 0000000..92becba
--- /dev/null
+++ b/src/themes/styles/globals.css
@@ -0,0 +1,994 @@
+/* Mobile center fix v2.0 */
+:root {
+ --background: #ffffff;
+ --foreground: #171717;
+}
+
+html,
+body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+body {
+ color: var(--foreground);
+ background: var(--background);
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Helvetica Neue", Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ margin: 0;
+}
+
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+/* 無限ループアニメーション */
+@keyframes scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+/* モダンコンポーネント用アニメーション */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes bounceIn {
+ from {
+ opacity: 0;
+ transform: scale(0.5);
+ }
+ 60% {
+ transform: scale(1.1);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes countUp {
+ from {
+ transform: translateY(20px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes float {
+ 0%,
+ 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 33% {
+ transform: translate(15px, -15px) rotate(120deg);
+ }
+ 66% {
+ transform: translate(-10px, 10px) rotate(240deg);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ transform: translate(-50%, -50%) scale(0.8);
+ opacity: 0.8;
+ }
+ 50% {
+ transform: translate(-50%, -50%) scale(1.2);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: translate(-50%, -50%) scale(0.8);
+ opacity: 0.8;
+ }
+}
+
+/* ステップスクロールアニメーション */
+@keyframes scrollStep {
+ 0% {
+ transform: translateX(0);
+ }
+ 8.33% {
+ transform: translateX(calc(-220px * 1));
+ }
+ 16.66% {
+ transform: translateX(calc(-220px * 1));
+ }
+ 25% {
+ transform: translateX(calc(-220px * 2));
+ }
+ 33.33% {
+ transform: translateX(calc(-220px * 2));
+ }
+ 41.66% {
+ transform: translateX(calc(-220px * 3));
+ }
+ 50% {
+ transform: translateX(calc(-220px * 3));
+ }
+ 58.33% {
+ transform: translateX(calc(-220px * 4));
+ }
+ 66.66% {
+ transform: translateX(calc(-220px * 4));
+ }
+ 75% {
+ transform: translateX(calc(-220px * 5));
+ }
+ 83.33% {
+ transform: translateX(calc(-220px * 5));
+ }
+ 91.66% {
+ transform: translateX(calc(-220px * 6));
+ }
+ 100% {
+ transform: translateX(calc(-220px * 6));
+ }
+}
+
+/* レスポンシブ対応のステップスクロール */
+@media (max-width: 768px) {
+ @keyframes scrollStep {
+ 0% {
+ transform: translateX(0);
+ }
+ 8.33% {
+ transform: translateX(calc(-160px * 1));
+ }
+ 16.66% {
+ transform: translateX(calc(-160px * 1));
+ }
+ 25% {
+ transform: translateX(calc(-160px * 2));
+ }
+ 33.33% {
+ transform: translateX(calc(-160px * 2));
+ }
+ 41.66% {
+ transform: translateX(calc(-160px * 3));
+ }
+ 50% {
+ transform: translateX(calc(-160px * 3));
+ }
+ 58.33% {
+ transform: translateX(calc(-160px * 4));
+ }
+ 66.66% {
+ transform: translateX(calc(-160px * 4));
+ }
+ 75% {
+ transform: translateX(calc(-160px * 5));
+ }
+ 83.33% {
+ transform: translateX(calc(-160px * 5));
+ }
+ 91.66% {
+ transform: translateX(calc(-160px * 6));
+ }
+ 100% {
+ transform: translateX(calc(-160px * 6));
+ }
+ }
+}
+
+.animate-scroll {
+ animation: scroll 30s linear infinite;
+}
+
+/* Use case marquee - 自然な無限ループ */
+.usecase-marquee {
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ overflow: hidden;
+ background: #f9fafb;
+ padding: 24px 0;
+}
+
+.usecase-track {
+ display: flex;
+ align-items: center;
+ gap: 32px;
+ white-space: nowrap;
+ animation: usecase-scroll 20s linear infinite;
+ width: 200%; /* シンプルに200%に戻す */
+}
+
+.usecase-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ flex-shrink: 0;
+ min-width: 220px; /* 幅を調整して6個すべて表示されるように */
+ justify-content: center;
+}
+
+.usecase-logo {
+ font-size: 24px;
+ line-height: 1;
+}
+
+.usecase-name {
+ font-size: 14px;
+ color: #374151;
+}
+
+.usecase-logo-img {
+ object-fit: contain;
+}
+
+/* ホバー時の一時停止 */
+.usecase-marquee:hover .usecase-track {
+ animation-play-state: paused;
+}
+
+/* 自然な無限ループアニメーション */
+@keyframes usecase-scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+/* InfiniteLoopコンポーネント専用の滑らかなスクロールアニメーション */
+@keyframes infinite-scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+/* モバイル専用のInfiniteLoopアニメーション */
+@media (max-width: 1024px) {
+ @keyframes infinite-scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+ }
+}
+
+/* ランディングページ用スタイル */
+main {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+section {
+ padding: 60px 20px;
+ text-align: center;
+}
+
+section.hero {
+ text-align: center;
+}
+
+h2 {
+ font-size: 2rem;
+ margin-bottom: 20px;
+}
+
+ul,
+ol {
+ text-align: left;
+ max-width: 600px;
+ margin: 0 auto;
+ padding-left: 20px;
+}
+
+.hero {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 60vh;
+}
+
+.hero-content h1 {
+ font-size: 2.5rem;
+ margin-bottom: 20px;
+}
+
+.hero-content p {
+ font-size: 1.25rem;
+ margin-bottom: 30px;
+ color: #444;
+}
+
+.hero-buttons .btn-primary,
+.hero-buttons .btn-secondary {
+ padding: 12px 24px;
+ font-size: 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ border: none;
+ min-width: 140px;
+ flex: 1;
+ max-width: 200px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+.hero-buttons .btn-primary {
+ background-color: #f4b520;
+ color: #fff;
+}
+
+.hero-buttons .btn-secondary {
+ background-color: #eee;
+ color: #222;
+}
+
+/* ヒーローコンテンツ: 画像とボタンを重ねる */
+.hero-content {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* ボタンを画像上に重ねて中央配置 */
+.hero-buttons {
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1;
+ display: flex;
+ gap: 12px;
+}
+
+/* ヒーロー画像のサイズ調整 */
+.hero-image {
+ max-width: 100%;
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.problem-grid,
+.case-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+.problem-grid > div,
+.case-card {
+ flex: 1 1 250px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 20px;
+ background: #fafafa;
+}
+
+ol li span {
+ font-weight: bold;
+ margin-right: 10px;
+}
+
+.pricing table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+}
+
+.pricing th,
+.pricing td {
+ padding: 10px;
+ border: 1px solid #ccc;
+}
+
+.faq dl {
+ max-width: 700px;
+ margin: 0 auto;
+ text-align: left;
+}
+
+.faq dt {
+ font-weight: bold;
+ margin-top: 20px;
+}
+
+.footer {
+ background: #222;
+ color: #fff;
+ padding: 20px;
+ text-align: center;
+}
+
+.footer a {
+ color: #ccc;
+ margin: 0 5px;
+ text-decoration: none;
+}
+
+/* レスポンシブ */
+@media (max-width: 768px) {
+ .problem-grid,
+ .case-grid {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .hero-content h1 {
+ font-size: 1.8rem;
+ }
+
+ .hero-content p {
+ font-size: 1rem;
+ }
+
+ /* モバイルでのページとmainの中央配置修正 */
+ .page {
+ padding: 20px 16px;
+ }
+
+ main {
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ padding: 0 8px;
+ }
+
+ .hero-buttons .btn-primary,
+ .hero-buttons .btn-secondary {
+ min-width: 180px;
+ max-width: 300px;
+ padding: 10px 16px;
+ font-size: 0.9rem;
+ }
+
+ /* モバイル: 画像を画面幅いっぱいに */
+ .hero-image {
+ width: 100vw;
+ max-width: 100vw;
+ }
+
+ /* モバイル用ユースケースマーキー */
+ .usecase-track {
+ gap: 20px;
+ animation: usecase-scroll 15s linear infinite; /* 同じアニメーション名に統一 */
+ width: 200%; /* シンプルに200%に統一 */
+ }
+
+ .usecase-item {
+ padding: 6px 12px;
+ gap: 8px;
+ min-width: 180px; /* 幅を増やして6個すべて表示されるように */
+ }
+
+ .usecase-name {
+ font-size: 12px;
+ }
+
+ /* モバイル: ProblemSolution 追加改善 */
+ section.problem {
+ padding: 40px 15px !important;
+ }
+
+ section.problem h2 {
+ font-size: 1.3rem !important;
+ line-height: 1.5 !important;
+ margin-bottom: 30px !important;
+ }
+
+ /* モバイル: HowItWorks 追加改善 */
+ section.how {
+ padding: 40px 15px !important;
+ }
+
+ section.how h2 {
+ font-size: 1.5rem !important;
+ margin-bottom: 35px !important;
+ }
+}
+
+/* PC: 画像のオリジナルサイズを最大として中央配置 */
+@media (min-width: 769px) {
+ .hero-image {
+ width: auto;
+ max-width: none;
+ max-height: 80vh;
+ }
+}
+
+/* セキュリティスタックのレスポンシブ対応 */
+.protocol-cards {
+ width: 100%;
+}
+
+/* デスクトップではカードを横並びで表示 */
+@media (min-width: 992px) {
+ .protocol-cards > div {
+ display: flex !important;
+ flex-direction: row !important;
+ gap: 24px !important;
+ }
+
+ .protocol-cards > div > div {
+ flex: 1;
+ min-width: 0;
+ }
+}
+
+.casestudies .case-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.casestudies .case-card {
+ flex: 1 1 280px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 20px;
+ background: #fff;
+ text-align: left;
+}
+
+.casestudies .case-logo {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 15px;
+ height: 100px;
+}
+
+.casestudies .logo-image {
+ object-fit: contain;
+}
+
+.casestudies .logo-placeholder {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 80px;
+ height: 80px;
+ border: 2px dashed #ddd;
+ border-radius: 8px;
+ background: #f9f9f9;
+}
+
+.casestudies h3 {
+ margin: 0;
+ font-size: 1.2rem;
+ color: #22a186;
+}
+
+.casestudies .case-name {
+ text-align: center;
+ margin-bottom: 15px;
+}
+
+.casestudies h4 {
+ margin: 10px 0;
+ font-size: 1rem;
+ font-weight: bold;
+}
+
+/* TrackRecord セクションのスタイル */
+.trackrecord {
+ padding: 60px 36px;
+ text-align: center;
+}
+
+@media (max-width: 768px) {
+ .casestudies .case-grid {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .casestudies .case-card {
+ width: 90%;
+ max-width: 350px;
+ flex: none;
+ }
+}
+
+/* 新しいページレイアウトスタイル */
+.page {
+ --gray-rgb: 0, 0, 0;
+ --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+ --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+ --button-primary-hover: #383838;
+ --button-secondary-hover: #f2f2f2;
+
+ display: grid;
+ /* grid-template-rows: 20px 1fr 20px; */
+ align-items: center;
+ justify-items: center;
+ min-height: 100svh;
+ /* padding: 80px; */
+ /* gap: 64px; */
+ font-family: var(--font-geist-sans);
+ width: 100%;
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+ .page {
+ --gray-rgb: 255, 255, 255;
+ --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+ --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+ --button-primary-hover: #ccc;
+ --button-secondary-hover: #1a1a1a;
+ }
+}
+
+.main {
+ display: flex;
+ flex-direction: column;
+ /* gap: 32px; */
+ grid-row-start: 2;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+.main ol {
+ font-family: var(--font-geist-mono);
+ padding-left: 0;
+ margin: 0;
+ font-size: 14px;
+ line-height: 24px;
+ letter-spacing: -0.01em;
+ list-style-position: inside;
+}
+
+.main li:not(:last-of-type) {
+ margin-bottom: 8px;
+}
+
+.main code {
+ font-family: inherit;
+ background: var(--gray-alpha-100);
+ padding: 2px 4px;
+ border-radius: 4px;
+ font-weight: 600;
+}
+
+.ctas {
+ display: flex;
+ gap: 16px;
+}
+
+.ctas a {
+ appearance: none;
+ border-radius: 128px;
+ height: 48px;
+ padding: 0 20px;
+ border: 1px solid transparent;
+ transition: background 0.2s, color 0.2s, border-color 0.2s;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 500;
+}
+
+a.primary {
+ background: var(--foreground);
+ color: var(--background);
+ gap: 8px;
+}
+
+a.secondary {
+ border-color: var(--gray-alpha-200);
+ min-width: 158px;
+}
+
+.footer {
+ grid-row-start: 3;
+ display: flex;
+ gap: 24px;
+}
+
+.footer a {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.footer img {
+ flex-shrink: 0;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+ a.primary:hover {
+ background: var(--button-primary-hover);
+ border-color: transparent;
+ }
+
+ a.secondary:hover {
+ background: var(--button-secondary-hover);
+ border-color: transparent;
+ }
+
+ .footer a:hover {
+ text-decoration: underline;
+ text-underline-offset: 4px;
+ }
+}
+
+@media (max-width: 600px) {
+ .page {
+ padding: 16px;
+ padding-bottom: 80px;
+ }
+
+ .main {
+ align-items: center;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ padding: 0 8px;
+ }
+
+ .main ol {
+ text-align: center;
+ }
+
+ .ctas {
+ flex-direction: column;
+ }
+
+ .ctas a {
+ font-size: 14px;
+ height: 40px;
+ padding: 0 16px;
+ }
+
+ a.secondary {
+ min-width: auto;
+ }
+
+ .footer {
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .logo {
+ filter: invert();
+ }
+}
+
+/* モバイル画面での確実な中央配置 */
+@media screen and (max-width: 1024px) {
+ * {
+ box-sizing: border-box !important;
+ }
+
+ html,
+ body {
+ width: 100% !important;
+ max-width: 100vw !important;
+ overflow-x: hidden !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+
+ .page {
+ padding: 0 !important;
+ width: 100vw !important;
+ max-width: 100vw !important;
+ margin: 0 !important;
+ box-sizing: border-box !important;
+ justify-items: center !important;
+ align-items: center !important;
+ overflow-x: hidden !important;
+ }
+
+ .main {
+ width: 100vw !important;
+ max-width: 100vw !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ box-sizing: border-box !important;
+ overflow-x: hidden !important;
+ }
+
+ main {
+ width: 100vw !important;
+ max-width: 100vw !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ box-sizing: border-box !important;
+ overflow-x: hidden !important;
+ }
+
+ /* 各セクションの強制的な中央配置 */
+ section {
+ width: 100vw !important;
+ max-width: 100vw !important;
+ margin: 0 !important;
+ padding: 40px 16px !important;
+ box-sizing: border-box !important;
+ overflow-x: hidden !important;
+ position: relative !important;
+ left: 0 !important;
+ right: 0 !important;
+ }
+
+ /* ヒーローセクションの特別対応 */
+ .hero {
+ width: 100vw !important;
+ max-width: 100vw !important;
+ margin: 0 !important;
+ /* padding: 20px 16px !important; */
+ box-sizing: border-box !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ overflow-x: hidden !important;
+ position: relative !important;
+ left: 0 !important;
+ right: 0 !important;
+ }
+
+ .hero-content {
+ width: 100% !important;
+ max-width: calc(100vw - 32px) !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ box-sizing: border-box !important;
+ display: flex !important;
+ flex-direction: column !important;
+ align-items: center !important;
+ justify-content: center !important;
+ }
+
+ .hero-image {
+ width: 100% !important;
+ max-width: 100% !important;
+ height: auto !important;
+ object-fit: contain !important;
+ }
+
+ /* すべてのコンテナの強制的な幅調整 */
+ div {
+ max-width: 100vw !important;
+ box-sizing: border-box !important;
+ }
+
+ /* インラインスタイルを持つコンテナの上書き */
+ div[style*="maxWidth"] {
+ max-width: calc(100vw - 32px) !important;
+ }
+
+ div[style*="margin: 0 auto"] {
+ margin: 0 16px !important;
+ }
+
+ /* Grid系レイアウトの調整 */
+ div[style*="display: grid"],
+ div[style*="gridTemplateColumns"] {
+ grid-template-columns: 1fr !important;
+ width: 100% !important;
+ max-width: calc(100vw - 32px) !important;
+ }
+
+ /* Flex系レイアウトの調整 */
+ div[style*="display: flex"]:not(.logo-track-container):not(
+ .infinite-loop-wrapper
+ ) {
+ flex-wrap: wrap !important;
+ width: 100% !important;
+ max-width: calc(100vw - 32px) !important;
+ }
+
+ /* InfiniteLoopコンポーネントの特別対応 */
+ .infinite-loop-container {
+ width: 100% !important;
+ max-width: 100vw !important;
+ margin: 0 !important;
+ overflow-x: hidden !important;
+ }
+
+ .infinite-loop-wrapper {
+ width: 100% !important;
+ max-width: 100vw !important;
+ margin: 0 auto !important;
+ overflow-x: hidden !important;
+ }
+
+ .logo-track-container {
+ display: flex !important;
+ flex-wrap: nowrap !important;
+ width: calc(200% + 40px) !important;
+ max-width: none !important;
+ align-items: center !important;
+ animation-name: infinite-scroll !important;
+ }
+
+ /* アニメーション要素の保護 */
+ div[style*="animationName"] {
+ flex-wrap: nowrap !important;
+ max-width: none !important;
+ }
+}
diff --git a/src/types/index.tsx b/src/types/index.tsx
new file mode 100644
index 0000000..9a20234
--- /dev/null
+++ b/src/types/index.tsx
@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+export interface PageProps {
+ pageTitle: string;
+ params?: {
+ id: string[];
+ };
+ searchParams?: { [key: string]: string | string[] | undefined };
+ children?: ReactNode;
+}
+
+export interface ComponentProps {
+ children?: ReactNode;
+}
+
+interface Contributor {
+ name: string;
+ linkToOnlinePresence: string;
+ role: string;
+ org: string;
+ orgUrl: string;
+ imagePath: string;
+}
+
+export interface Mentor extends Contributor {}
+
+export interface Judge extends Contributor {}
diff --git a/yarn.lock b/yarn.lock
index b004e5f..c9d27a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1861,6 +1861,15 @@ __metadata:
languageName: node
linkType: hard
+"react-icons@npm:^5.5.0":
+ version: 5.5.0
+ resolution: "react-icons@npm:5.5.0"
+ peerDependencies:
+ react: "*"
+ checksum: cbd74f4b7982e6e18d59798a6b578268c8eb0909d78d87bcf9b25f99b3e544fd189a76551cb5e770d17f154a60b668551aee108aaf8471309b23f7af3b2c5b07
+ languageName: node
+ linkType: hard
+
"react-is@npm:^16.7.0":
version: 16.13.1
resolution: "react-is@npm:16.13.1"
@@ -2312,6 +2321,7 @@ __metadata:
next: ^15.0.0
react: ^18.0.0
react-dom: ^18.0.0
+ react-icons: ^5.5.0
serve: ^14.0.0
typescript: ^5.0.0
languageName: unknown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/organisms/HeroSection.tsx b/src/components/organisms/HeroSection.tsx
new file mode 100644
index 0000000..6135d67
--- /dev/null
+++ b/src/components/organisms/HeroSection.tsx
@@ -0,0 +1,26 @@
+export default function HeroSection() {
+ return (
+
+ );
+}
diff --git a/src/components/organisms/HowItWorks.tsx b/src/components/organisms/HowItWorks.tsx
new file mode 100644
index 0000000..5b5182a
--- /dev/null
+++ b/src/components/organisms/HowItWorks.tsx
@@ -0,0 +1,634 @@
+"use client";
+
+import React from "react";
+import { useEffect, useState } from "react";
+
+export default function HowItWorks() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [currentStep, setCurrentStep] = useState(0);
+ const [isMobile, setIsMobile] = useState(false);
+ const [modalImage, setModalImage] = useState
+
+
+
+
+ 導入も、運用も、
+
+
+
+ {/* ステップ表示 */}
+
+ 導入も、運用も、
+
+ シンプルです
+
+
+ {steps.map((step, index) => (
+
+ {/* カード */}
+
+ ))}
+
+
+ {/* プログレスバー（デスクトップのみ） */}
+ {!isMobile && (
+
+
+
+ {/* モバイル用矢印（カードの外側、独立したブロック） */}
+ {index < steps.length - 1 && isMobile && (
+
+ {/* 画像セクション */}
+
+
+ {/* デスクトップ用矢印（最後のステップ以外） */}
+ {index < steps.length - 1 && !isMobile && (
+
+ {step.image ? (
+ 
setModalImage(step.image)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ setModalImage(step.image);
+ }
+ }}
+ style={{
+ maxWidth: "100%",
+ maxHeight: isMobile ? "200px" : "250px",
+ objectFit: "contain",
+ borderRadius: "10px",
+ boxShadow: "0 4px 15px rgba(0, 0, 0, 0.15)",
+ cursor: "pointer",
+ transition:
+ "transform 0.2s ease, box-shadow 0.2s ease",
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.transform = "scale(1.02)";
+ e.currentTarget.style.boxShadow =
+ "0 6px 20px rgba(0, 0, 0, 0.2)";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = "scale(1)";
+ e.currentTarget.style.boxShadow =
+ "0 4px 15px rgba(0, 0, 0, 0.15)";
+ }}
+ />
+ ) : step.images ? (
+
+
+ {/* ステップ番号 */}
+
+ {step.images.map((img: string, imgIndex: number) => (
+ 
setModalImage(img)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ setModalImage(img);
+ }
+ }}
+ style={{
+ maxWidth: isMobile ? "45%" : "180px",
+ maxHeight: isMobile ? "150px" : "200px",
+ objectFit: "contain",
+ borderRadius: "8px",
+ boxShadow: "0 4px 15px rgba(0, 0, 0, 0.15)",
+ cursor: "pointer",
+ transition:
+ "transform 0.2s ease, box-shadow 0.2s ease",
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.transform = "scale(1.02)";
+ e.currentTarget.style.boxShadow =
+ "0 6px 20px rgba(0, 0, 0, 0.2)";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = "scale(1)";
+ e.currentTarget.style.boxShadow =
+ "0 4px 15px rgba(0, 0, 0, 0.15)";
+ }}
+ />
+ ))}
+
+ ) : null}
+
+ {step.number}
+
+
+ {/* コンテンツセクション */}
+
+
+ + {step.title} +
+ ++ {step.description} +
+
+
+ )}
+
+ →
+
+
+
+ ↓
+
+
+ )}
+
+
+ )}
+
+ {/* 画像拡大モーダル */}
+ {modalImage && (
+
+ )}
+
+
+
+
+ Step {currentStep + 1} of {steps.length}
+
+
+
+ );
+};
+
+export default InfiniteLoop;
diff --git a/src/components/organisms/Pricing.tsx b/src/components/organisms/Pricing.tsx
new file mode 100644
index 0000000..94e0d1c
--- /dev/null
+++ b/src/components/organisms/Pricing.tsx
@@ -0,0 +1,33 @@
+export default function Pricing() {
+ return (
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
+
+
+
+
+ {/* 第1セット */}
+ {logoItems.map((item) => (
+
+
+ {item.name}
+
+ ))}
+
+ {/* 第2セット（シームレスなループ用） */}
+ {logoItems.map((item) => (
+
+ {item.name}
+
+ ))}
+ はじめやすく、続けやすい。
+| プラン | +内容 | +料金 | +
|---|---|---|
| フリープラン | +1プロジェクト / 5ロールまで | +無料 | +
| スタンダード | +API連携、人数制限解除 | +月額 ¥4,980〜 | +
| カスタム | +法人・自治体向け支援 | +お問合せ | +
+
+
+
+ 協働プロジェクトの現場の
+
+
+
+
+ 協働プロジェクトの現場の
+
+ 「よくある困りごと」
+
+ Tobanが全て解決します
+
+
+ {/* 課題セクション */}
+
+
+
+
+ {/* 矢印 */}
+
+
+ ⚠️
+ + 課題 +
+
+ {problems.map((item, index) => (
+
+
+
+ {item.icon}
+
+ {item.text}
+
+ ))}
+
+
+
+ {/* モバイル用矢印 */}
+ {isMobile && (
+
+ →
+
+
+
+ )}
+
+ {/* 解決策セクション */}
+
+ ↓
+
+
+
+
+
+ ✨
+ + 解決策 +
+
+ {solutions.map((item, index) => (
+
+
+
+ {item.icon}
+
+ {item.text}
+
+ ))}
+
+ {/* ヘッダー */}
+
+
+
+ 🔒
+ セキュリティ &
+
+
+ {/* セキュリティ機能 */}
+
+ 🔒
+ セキュリティ &
+ プロトコルスタック
+
+
+ {securityFeatures.map((feature, index) => (
+
+
+ {/* プロトコルカード */}
+
+
+ {feature.icon}
+
+
+ {feature.text}
+
+
+ ))}
+
+ {protocols.map((protocol, index) => (
+
+ !isMobile && setHoveredCard(index)}
+ onMouseLeave={() => !isMobile && setHoveredCard(null)}
+ >
+ {/* ロゴとタイトル */}
+
+ ))}
+
+
+
+ {/* 役割 */}
+
+ 
+
+ + {protocol.name} +
+
+
+
+ {/* 信頼ポイント */}
+
+ Toban での役割
+
+ + {protocol.role} +
+
+
+
+ 信頼ポイント
+
+ + {protocol.trust}{" "} + + {protocol.linkText} + +
+
+
+
+
+ トラックレコード
+
+
+
+
+ トラックレコード
+
+ （2024-06→現在）
+
+
+ {records.map((record, index) => (
+
+
+
+
+ ))}
+
+ {record.icon}
+
+
+
+
+
+ {record.metric}
++ {formatNumber(animatedNumbers[index], index)} + {record.suffix} +
+
+
+
+
+ {/* パルスエフェクト（モバイルでは非表示） */}
+ {isVisible && !isMobile && (
+
+ )}
+
+
+ + 💡 注：実データは on-chain から自動取得し動的更新に。 +
+
+
+
+
+ あなたの現場でも、
+
+
+
+
+ あなたの現場でも、
+
+ すぐに役立ちます
+
+
+ {cases.map((item, index) => (
+
+ ))}
+
+
-
+ Hello, Toban LP!
-
+
+
+
+