fix url

Fix name
Update README.md
2025-10-20 16:39:29 +08:00 · 2025-09-29 17:41:54 +08:00 · 2025-09-29 05:20:27 +00:00 · 2025-09-26 10:18:16 +00:00 · 2025-09-26 18:14:53 +08:00 · 2025-09-26 18:13:41 +08:00
32 changed files with 358 additions and 101 deletions
--- a/README.md
+++ b/README.md
@@ -1,25 +1,105 @@
-# website-products
-
-官网产品页面的代码（目前尚未实际使用，仅仅用于留档）
+---
+gitea: none
+include_toc: true
+---


+官网产品页面的代码，基本思路是：
+
+1. 创建一个空白的 template `page-react-template.php`，不使用当前的模板
+2. 使用 plugin 的短代码方式，动态配置产品名称，来定位到指定目录下的文件
+
+> 目前都使用 coze 生成页面，但是 coze 的代码几乎都是 react 的，目前只有 react app 的操作事项
+
+
+
+# 文件说明

 ## 基本配置

-`react-product-loader`
+`./react-product-loader/`
 - 用于在 wordpress 中引入 react 页面的 pluigin
 	- 因为使用 coze 生成的代码几乎都是 react 的
 - 放置在 plugin 文件夹下
 	-  `wp-content/plugin/react-product-loader`

-`page-react-template.php`
+![plugin](./img/plugin.png)
+
+`./page-react-template.php`
 - 用于展示产品的模板页面，不使用官网默认的模板
 - 放置在当前使用的模板下面：
 	- `wp-content/themes/skyline-wp`

+![plugin](./img/themes.png)
+
 ## 产品页面

 - 产品的页面放在 `wp-content/products/react-apps` 下
- 在 `固定ページ` 中创建页面，使用 `ショートコード` 引入
-	- `[react_app app_name="alisurvey"]`
-	- 其中 `app_name` 是文件夹的名字
+
+### 流程
+
+1. 运行 `npm run build`
+2. 将生成的 `dist/static/assets` 下的 `index-....js` 和 `index-....css` 放到 wordpress 中  
+    - 放在 `wp-content/products/react-apps` 目录下
+3. 在 wordpress 「**固定ページ**」中创建页面，使用 `ショートコード` 引入  
+    - 输入 `[react_app app_name="alisurvey"]`  
+        - 其中 `app_name` （这里是 `alisurvey`）是项目文件夹名字（与下面开发事项提到的 `baseUrl` 也一样）
+4. 设置使用的模板名称为： **React Product Template**
+
+> `index.html` 不需要导入，所以页面 meta、descirption 之类都在「**固定ページ**」中设置
+
+![plugin](./img/products.png)
+
+![plugin](./img/page.png)
+
+# 开发事项
+
+当 coze 生成了 react 代码之后，需要做一些修改
+
+## 1. 修改 baseUrl
+
+> 参考这个 commit： https://git.alicorns.co.jp/xuejiahao/website-products/commit/8dd1e3c34f4633f8fae7f3ade0513b6c6c1f1822
+
+1. `main.tsx`
+```diff
+createRoot(document.getElementById("root")!).render(  # <---- 检查必须是 #root
+  <StrictMode>
+-    <BrowserRouter>
+    <BrowserRouter basename="alisurvey">         # <---- 需要和项目文件夹名一致
+      <App />
+      <Toaster />
+    </BrowserRouter>
+```
+
+2. `vite.config.ts`
+```diff
+-export default defineConfig({
+-  plugins: getPlugins()
+-});
+export default defineConfig(({ command }) => ({
+  plugins: getPlugins(),
+  base: command === 'build' 
+    ? '/wp-content/products/react-apps/alisurvey/' # <---- 存放到 wordpress 的路径，末尾需要 /
+    : '/alisurvey'                                 # <---- 本地用，需要和项目文件夹名一致
+}));
+```
+
+## 2. 修改 pnpm 为 npm [可选]
+
+- `package.json`
+```diff
+  "scripts": {
+    "dev:client": "vite --host --port 3000",
+-    "dev": "pnpm dev:client",
+    "dev": "npm run dev:client",
+    "build:client": "vite build --outDir dist/static",
+-    "build": "rm -rf dist && pnpm build:client && cp package.json dist && touch dist/build.flag"
+    "build": "rm -rf dist && npm run build:client && cp package.json dist && touch dist/build.flag"
+  },
+```
+
+## 可用的 AI 生成网站的工具：
+
+1. [字节的扣子空间 Coze](https://space.coze.cn/expert/10000)
+2. [lovable.dev](https://lovable.dev/) - 大量使用需要付费，源码无法下载
+3. [readdy.ai](https://readdy.ai/) - 大量使用需要付费，源码无法下载
--- a/img/page.png
+++ b/img/page.png
--- a/img/plugin.png
+++ b/img/plugin.png
--- a/img/products.png
+++ b/img/products.png
--- a/img/themes.png
+++ b/img/themes.png
--- a/products/react-apps/alisurvey/README.md
+++ b/products/react-apps/alisurvey/README.md
@@ -1,4 +1,4 @@
-# Alisurvey
+# AliSurvey

 https://www.alicorns.co.jp/alisurvey

@@ -22,4 +22,4 @@ npm install
 npm run dev
 ```

- 在浏览器访问 http://localhost:3000
+- 在浏览器访问 http://localhost:3000/alisurvey
--- a/products/react-apps/alisurvey/index.html
+++ b/products/react-apps/alisurvey/index.html
@@ -3,16 +3,16 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Alisurvey - 日本企業向けSaaSアンケートツール | アンケート作成・データ分析</title>
-    <meta name="description" content="Alisurveyは、日本企業のニーズに特化したSaaS型アンケートツールです。コード不要で直感的にアンケートを作成し、データを分析できます。無料で始める。" />
-    <meta name="keywords" content="アンケート, アンケート作成, アンケートツール, SaaS, データ分析, Alisurvey, 日本語アンケート" />
-    <meta property="og:title" content="Alisurvey - 日本企業向けSaaSアンケートツール" />
+    <title>AliSurvey - 日本企業向けSaaSアンケートツール | アンケート作成・データ分析</title>
+    <meta name="description" content="AliSurveyは、日本企業のニーズに特化したSaaS型アンケートツールです。コード不要で直感的にアンケートを作成し、データを分析できます。無料で始める。" />
+    <meta name="keywords" content="アンケート, アンケート作成, アンケートツール, SaaS, データ分析, AliSurvey, 日本語アンケート" />
+    <meta property="og:title" content="AliSurvey - 日本企業向けSaaSアンケートツール" />
    <meta property="og:description" content="コード不要で直感的にアンケートを作成し、データを分析できるSaaSツール" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com" />
    <meta property="og:image" content="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Survey%20software%20dashboard%20Japanese%20interface&sign=abf2fd53e3a93d90381b48ce9d773a33" />
    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Alisurvey - 日本企業向けSaaSアンケートツール" />
+    <meta name="twitter:title" content="AliSurvey - 日本企業向けSaaSアンケートツール" />
    <meta name="twitter:description" content="コード不要で直感的にアンケートを作成し、データを分析できます" />
    <meta name="twitter:image" content="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Survey%20software%20dashboard%20Japanese%20interface&sign=abf2fd53e3a93d90381b48ce9d773a33" />
    <link
--- a/products/react-apps/alisurvey/src/assets/images/build-page.png
+++ b/products/react-apps/alisurvey/src/assets/images/build-page.png
--- a/products/react-apps/alisurvey/src/assets/images/d1.png
+++ b/products/react-apps/alisurvey/src/assets/images/d1.png
--- a/products/react-apps/alisurvey/src/assets/images/d2.png
+++ b/products/react-apps/alisurvey/src/assets/images/d2.png
--- a/products/react-apps/alisurvey/src/assets/images/d3.png
+++ b/products/react-apps/alisurvey/src/assets/images/d3.png
--- a/products/react-apps/alisurvey/src/assets/images/logic-page.png
+++ b/products/react-apps/alisurvey/src/assets/images/logic-page.png
--- a/products/react-apps/alisurvey/src/assets/images/main.png
+++ b/products/react-apps/alisurvey/src/assets/images/main.png
--- a/products/react-apps/alisurvey/src/assets/images/mobile.png
+++ b/products/react-apps/alisurvey/src/assets/images/mobile.png
--- a/products/react-apps/alisurvey/src/assets/images/t.png
+++ b/products/react-apps/alisurvey/src/assets/images/t.png
--- a/products/react-apps/alisurvey/src/assets/images/t2.png
+++ b/products/react-apps/alisurvey/src/assets/images/t2.png
--- a/products/react-apps/alisurvey/src/assets/images/t3.png
+++ b/products/react-apps/alisurvey/src/assets/images/t3.png
--- a/products/react-apps/alisurvey/src/assets/images/t4.png
+++ b/products/react-apps/alisurvey/src/assets/images/t4.png
--- a/products/react-apps/alisurvey/src/assets/images/t5.png
+++ b/products/react-apps/alisurvey/src/assets/images/t5.png
--- a/products/react-apps/alisurvey/src/assets/images/t6.png
+++ b/products/react-apps/alisurvey/src/assets/images/t6.png
--- a/products/react-apps/alisurvey/src/components/CTA.tsx
+++ b/products/react-apps/alisurvey/src/components/CTA.tsx
@@ -38,13 +38,13 @@ export default function CTA() {
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <a 
-              href="#signup" 
+              href="https://alisurvey.alicorns.co.jp" target='_blank'
              className="px-8 py-5 bg-white text-blue-600 font-bold rounded-xl shadow-xl hover:shadow-2xl transition-all text-center text-lg"
            >
              無料で始める <i className="fa-solid fa-arrow-right ml-2"></i>
            </a>
-            <a 
-              href="#demo" 
+            <a target='_blank'
+              href="https://alisurvey.alicorns.co.jp?for=demo"
              className="px-8 py-5 bg-transparent border-2 border-white text-white font-bold rounded-xl hover:bg-white/10 transition-all flex items-center justify-center gap-2 text-lg"
            >
              <i className="fa-solid fa-play-circle"></i> デモを見る
--- a/products/react-apps/alisurvey/src/components/FeatureDetail.tsx
+++ b/products/react-apps/alisurvey/src/components/FeatureDetail.tsx
@@ -1,7 +1,10 @@
 import { motion } from 'framer-motion';
 import FeatureCard from './FeatureCard';
+import detail1Image from '../assets/images/d1.png';
+import detail2Image from '../assets/images/d2.png';
+import detail3Image from '../assets/images/d3.png';

-export default function FeatureSection() {
+export default function FeatureDetail() {
  return (
    <section id="details" className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -38,7 +41,7 @@ export default function FeatureSection() {
          <div className="md:w-1/2">
            <div className="bg-white p-4 rounded-xl shadow-xl">
              <img 
-                src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Drag%20and%20drop%20questionnaire%20builder%20interface%20with%20various%20components%20modern%20UI&sign=7476f5a0f4db10309b9e34d74bff863b" 
+                src={detail1Image}
                alt="ドラッグ&ドロップアンケート作成" 
                className="rounded-lg w-full h-auto"
              />
@@ -72,7 +75,7 @@ export default function FeatureSection() {
          <div className="md:w-1/2">
            <div className="bg-white p-4 rounded-xl shadow-xl">
              <img 
-                src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Access%20control%20settings%20interface%20for%20questionnaire%20security&sign=1bd9e6e769ebe1e36a8f9409e42a79de" 
+                src={detail2Image}
                alt="アクセス制限設定" 
                className="rounded-lg w-full h-auto"
              />
@@ -106,7 +109,7 @@ export default function FeatureSection() {
          <div className="md:w-1/2">
            <div className="bg-white p-4 rounded-xl shadow-xl">
              <img 
-                src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Questionnaire%20data%20analysis%20dashboard%20with%20charts%20and%20graphs&sign=bd395ab9ad3c4c07ce7a3c64af386389" 
+                src={detail3Image} 
                alt="データ分析ダッシュボード" 
                className="rounded-lg w-full h-auto"
              />
@@ -118,7 +121,7 @@ export default function FeatureSection() {
          <p className="text-gray-600 mb-4">
            上記以外のニーズがある場合は、カスタムプランもご用意しています。
          </p>
-          <a href="#contact" className="text-blue-600 font-medium hover:underline">
+          <a href="/contact/?subject=AliSurvey-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" className="text-blue-600 font-medium hover:underline">
            カスタムプランについて <i className="fa-solid fa-arrow-right ml-1"></i>
          </a>
        </div>
--- a/products/react-apps/alisurvey/src/components/FeatureSection.tsx
+++ b/products/react-apps/alisurvey/src/components/FeatureSection.tsx
@@ -1,5 +1,11 @@
 import { motion } from 'framer-motion';
 import FeatureCard from './FeatureCard';
+import feature1Image from '../assets/images/t.png';
+import feature2Image from '../assets/images/t2.png';
+import feature3Image from '../assets/images/t3.png';
+import feature4Image from '../assets/images/t4.png';
+import feature5Image from '../assets/images/t5.png';
+import feature6Image from '../assets/images/t6.png';

 export default function FeatureSection() {
  // 製品機能データ
@@ -8,37 +14,37 @@ export default function FeatureSection() {
      title: "直感的なアンケート作成",
      description: "ドラッグ＆ドロップ操作で簡単にアンケートを作成。20種類以上のコンポーネントであらゆるニーズに対応。",
      icon: "fa-magic",
-      imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20builder%20interface%20with%20drag%20and%20drop%20functionality%2C%20Japanese%20UI%2C%20form%20components&sign=8e9d8de869467bedbdf2e76d42647619"
+      imageUrl: feature1Image
    },
    {
      title: "豊富なテンプレート",
      description: "業界別のプリセットテンプレートを提供。すぐに使えるだけでなく、独自のテンプレートも作成可能。",
      icon: "fa-file-alt",
-      imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20templates%20gallery%20Japanese%20interface%20business%20style&sign=53407b72fa47fa4cf1f6375135dcc882"
+      imageUrl: feature2Image
    },
    {
      title: "高度な条件表示設定",
      description: "回答に応じて質問を動的に表示/非表示。複雑なロジックも直感的に設定可能。",
      icon: "fa-sitemap",
-      imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20conditional%20logic%20settings%20Japanese%20interface&sign=8caac1c11078139b117d451993301122"
+      imageUrl: feature3Image
    },
    {
      title: "多様なアクセス制限",
      description: "IP、デバイス、回答回数、時間制限など、必要な制限を設定してデータの信頼性を確保。",
      icon: "fa-shield-alt",
-      imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20access%20control%20settings%20Japanese%20security%20interface&sign=2c413aa7bedc4e37a48cf3fd6898582e"
+      imageUrl: feature4Image
    },
    {
      title: "リアルタイムデータ分析",
      description: "回答をリアルタイムで集計し、グラフ（棒グラフ、折れ線グラフ、円グラフ）で視覚化。",
      icon: "fa-chart-pie",
-      imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20data%20analysis%20dashboard%20charts%20Japanese%20interface&sign=ae43ebbb1096c076634ea4259267a835"
+      imageUrl: feature5Image
    },
    {
      title: "柔軟なデータ管理",
      description: "収集したデータの編集、エクスポート、印刷、添付ファイルの一括ダウンロードに対応。",
      icon: "fa-database",
-      imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20data%20management%20Japanese%20interface%20export%20functionality&sign=c49d55504f0bade0cfcec05fb3ac650c"
+      imageUrl: feature6Image
    }
  ];

@@ -48,7 +54,7 @@ export default function FeatureSection() {
        {/* セクションヘッダー */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
-            Alisurveyの特徴
+            AliSurveyの特徴
          </h2>
          <p className="text-lg text-gray-700">
            アンケート作成からデータ収集、分析まで、すべてのプロセスを簡単かつ効率的に行えます。
@@ -71,7 +77,7 @@ export default function FeatureSection() {
        </div>
        
        {/* 追加の機能強調 */}
-        <div className="mt-24">
+        {/* <div className="mt-24">
          <div className="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl overflow-hidden">
            <div className="grid grid-cols-1 md:grid-cols-2">
              <div className="p-8 md:p-12 flex flex-col justify-center relative">
@@ -112,7 +118,7 @@ export default function FeatureSection() {
              </div>
            </div>
          </div>
-        </div>
+        </div> */}
      </div>
    </section>
  );
--- a/products/react-apps/alisurvey/src/components/Footer.tsx
+++ b/products/react-apps/alisurvey/src/components/Footer.tsx
@@ -6,13 +6,13 @@ export default function Footer() {
      <div className="container mx-auto px-4 md:px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
          <div className="lg:col-span-2">
-            <h3 className="text-2xl font-bold text-white mb-4">Alisurvey</h3>
+            <h3 className="text-2xl font-bold text-white mb-4">AliSurvey</h3>
            <p className="text-gray-400 mb-6 max-w-md">
-              ドラッグ＆ドロップで簡単にアンケートを作成。リアルタイムで結果を分析できるSaaSプラットフォームです。
+              ドラッグ＆ドロップで簡単にアンケートを作成。リアルタイムで結果を分析できる<b>無料</b>SaaSプラットフォームです。
            </p>
            <div className="flex space-x-4">
-              <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
-                <i className="fa-brands fa-twitter"></i>
+              <a target='_blank' href="https://x.com/AlicornsC54803" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
+                <i className="fa-brands fa-x-twitter"></i>
              </a>
              <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-700 transition-colors">
                <i className="fa-brands fa-facebook"></i>
@@ -28,41 +28,41 @@ export default function Footer() {
          <div>
            <h4 className="text-lg font-semibold text-white mb-4">製品</h4>
            <ul className="space-y-2">
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">特徴</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">価格</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">更新履歴</a></li>
+              <li><a href="/alisurvey#features" className="text-gray-400 hover:text-white transition-colors">特徴</a></li>
+              {/* <li><span className="text-gray-400 hover:text-white transition-colors">価格</span></li>
+              <li><span className="text-gray-400 hover:text-white transition-colors">更新履歴</span></li> */}
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold text-white mb-4">サポート</h4>
            <ul className="space-y-2">
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">ヘルプセンター</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">チュートリアル</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">お問い合わせ</a></li>
+              {/* <li><span className="text-gray-400 hover:text-white transition-colors">ヘルプセンター</span></li>
+              <li><span className="text-gray-400 hover:text-white transition-colors">チュートリアル</span></li> */}
+              <li><a href="/contact/?subject=-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" className="text-gray-400 hover:text-white transition-colors">お問い合わせ</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold text-white mb-4">会社</h4>
            <ul className="space-y-2">
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">会社概要</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">プライバシーポリシー</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">利用規約</a></li>
+              <li><a href="/" className="text-gray-400 hover:text-white transition-colors">会社概要</a></li>
+              <li><a href="/privacy-policy" className="text-gray-400 hover:text-white transition-colors">プライバシーポリシー</a></li>
+              {/* <li><span href="#" className="text-gray-400 hover:text-white transition-colors">利用規約</span></li> */}
            </ul>
          </div>
        </div>
-        
+
        <div className="border-t border-gray-800 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-500 text-sm mb-4 md:mb-0">
-              &copy; 2025 Alisurvey. 全著作権所有.
+              &copy; 2025 Alicorn Co., Ltd. 全著作権所有.
            </p>
-            
-            <div className="flex gap-6">
-              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm">利用規約</a>
-              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm">プライバシーポリシー</a>
+
+            {/* <div className="flex gap-6">
+              <span href="#" className="text-gray-500 hover:text-gray-300 text-sm">利用規約</span>
+              <a href="/privacy-policy" className="text-gray-500 hover:text-gray-300 text-sm">プライバシーポリシー</a>
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm">Cookie設定</a>
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm">サポート</a>
-            </div>
+            </div> */}
          </div>
        </div>
      </div>
--- a/products/react-apps/alisurvey/src/components/Header.tsx
+++ b/products/react-apps/alisurvey/src/components/Header.tsx
@@ -20,9 +20,12 @@ export default function Header({ isScrolled }: HeaderProps) {
      <div className="container mx-auto px-4 md:px-8">
        <div className="flex justify-between items-center">
          {/* ロゴ */}
-          <div className="flex items-baseline">
-            <h1 className="text-2xl font-bold text-blue-600">Alisurvey</h1>
-            <span className="ml-2 text-gray-500 text-xs">アンケートシステム</span>
+          <div className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">A</span>
+            </div>
+            <h1 className="text-xl font-bold text-blue-600">AliSurvey</h1>
+            <span className="pt-1 text-gray-500 text-xs">アンケートシステム</span>
          </div>
          
          {/* デスクトップナビゲーション */}
@@ -31,10 +34,10 @@ export default function Header({ isScrolled }: HeaderProps) {
            <a href="#details" className="text-gray-700 hover:text-blue-600 transition-colors">機能</a>
            {/* <a href="#pricing" className="text-gray-700 hover:text-blue-600 transition-colors">価格</a>
            <a href="#testimonials" className="text-gray-700 hover:text-blue-600 transition-colors">顧客の声</a> */}
-            <a href="#contact" className="text-gray-700 hover:text-blue-600 transition-colors">お問い合わせ</a>
-            <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
+            <a href="/contact/?subject=AliSurvey-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" className="text-gray-700 hover:text-blue-600 transition-colors">お問い合わせ</a>
+            <a href="https://alisurvey.alicorns.co.jp" target='_blank' className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
              無料で始める
-            </button>
+            </a>
          </nav>
          
          {/* モバイルメニューボタン */}
@@ -80,15 +83,15 @@ export default function Header({ isScrolled }: HeaderProps) {
              顧客の声
            </a> */}
            <a 
-              href="#contact" 
+              href="/contact/?subject=AliSurvey-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" 
              className="text-gray-700 hover:text-blue-600 py-2 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              お問い合わせ
            </a>
-            <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
+            <a href="https://alisurvey.alicorns.co.jp" target='_blank' className="text-center bg-blue-600 hover:bg-blue-700  text-white px-6 py-2 rounded-lg transition-colors">
              無料で始める
-            </button>
+            </a>
          </div>
        </div>
      )}
--- a/products/react-apps/alisurvey/src/components/Hero.tsx
+++ b/products/react-apps/alisurvey/src/components/Hero.tsx
@@ -1,13 +1,15 @@
 import { motion } from "framer-motion";
+import mainImage from '../assets/images/main.png';
+import mobileImage from '../assets/images/mobile.png';

 export default function Hero() {
    return (
        <section
            className="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-blue-50 to-indigo-50">
            <div className="container mx-auto px-4 md:px-8">
-                <div className="flex flex-col md:flex-row items-center">
+                <div className="flex flex-col md:flex-row items-center mb-12 md:mb-0">
                    {}
-                    <div className="md:w-1/2 mb-12 md:mb-0">
+                    <div className="md:w-1/2">
                        <motion.div
                            initial={{
                                opacity: 0,
@@ -20,36 +22,18 @@ export default function Hero() {
                            transition={{
                                duration: 0.6
                            }}>
-                            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6" style={{ lineHeight: '1.1em' }}>
+                            <div className="inline-block px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium">
+                                アンケート作成を革命化
+                            </div>
+                            <h1 className="text-4xl xl:text-5xl 2xl:text-6xl font-bold text-gray-900 mb-6" style={{ lineHeight: '1.1em' }}>
                                フォームは簡単に<br />
                                共有は一瞬で<br />
                                <span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">あとは分析に力を注ごう</span>
                            </h1>
-                            <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-lg">ドラッグ＆ドロップで直感的にアンケート作成。<br />QRコードで即時共有、効率的な運用を実現します。</p>
-                            <div className="flex flex-col sm:flex-row gap-4">
-                                <button
-                                    className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-medium transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">無料で始める <i className="fa-solid fa-arrow-right ml-2"></i>
-                                </button>
-                                <button
-                                    className="bg-white hover:bg-gray-50 text-blue-600 border border-blue-600 px-8 py-4 rounded-lg text-lg font-medium transition-all">
-                                    <i className="fa-solid fa-play-circle mr-2"></i>デモを見る
-                                                    </button>
-                            </div>
-                            {/* <div className="mt-10 flex items-center">
-                                <div className="flex -space-x-2">
-                                    {[1, 2, 3, 4].map(i => <img
-                                        key={i}
-                                        src={`https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Japanese%20business%20person%20avatar&sign=c0224456042d7467b42e4fe01b6bb356`}
-                                        alt="顧客"
-                                        className="w-10 h-10 rounded-full border-2 border-white" />)}
-                                </div>
-                                <div className="ml-4">
-                                    <div className="flex items-center">
-                                        {[1, 2, 3, 4, 5].map(i => <i key={i} className="fa-solid fa-star text-yellow-400 text-sm"></i>)}
-                                    </div>
-                                    <p className="text-sm text-gray-600">500社以上の企業が信頼</p>
-                                </div>
-                            </div> */}
+                            <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-lg">
+                                20種類以上のコンポーネント。<br />
+                                ドラッグ＆ドロップで直感的にアンケート作成。<br />
+                                QRコードで即時共有、効率的な運用を実現します。</p>
                        </motion.div>
                    </div>
                    {}
@@ -68,11 +52,49 @@ export default function Hero() {
                                delay: 0.2
                            }}>
                            <div className="relative">
-                                <img
-                                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Survey%20software%20dashboard%20interface%20with%20Japanese%20language%20UI%2C%20clean%20design%2C%20data%20visualization%2C%20professional%20business%20software&sign=5519ee83ef20788c1286f1e6b97baab3"
-                                    alt="Alisurveyダッシュボード"
-                                    className="relative rounded-2xl overflow-hidden shadow-2xl transform rotate-1 hover:rotate-0 transition-transform duration-500" />
-                                <div className="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
+                                {/*  rotate-1 hover:rotate-0 */}
+                                <div className="relative rounded-2xl overflow-hidden shadow-2xl transform transition-transform duration-500 p-6 bg-gradient-to-r from-blue-600 to-indigo-100">
+                                    {/* 海浪效果容器 */}
+                                    <div className="absolute inset-0 overflow-hidden ocean-waves">
+                                        {/* 背景波浪层 */}
+                                        <div className="absolute bottom-0 w-[200%] h-full ocean-wave-back"></div>
+                                        {/* 前景波浪层 */}
+                                        <div className="absolute bottom-0 w-[200%] h-full ocean-wave-front"></div>
+                                    </div>
+                                    <img
+                                        src={mainImage}
+                                        alt="AliSurveyダッシュボード"
+                                        className="w-full h-auto rounded-xl relative z-10"
+                                        />
+                                </div>
+                                <motion.div
+                                    initial={{
+                                        opacity: 0,
+                                        y: 40 // 从下方开始
+                                    }}
+                                    animate={{
+                                        opacity: 1,
+                                        y: 0 // 向上移动到目标位置
+                                    }}
+                                    transition={{
+                                        duration: 0.6,
+                                        delay: 0.2 // 稍晚于背景图出现，形成层次感
+                                    }}
+                                    className="absolute -right-5 top-1/3 transform -translate-y-1/2 z-20 hidden lg:block"
+                                >
+                                    <div className="relative">
+                                        <div className="w-32 xl:w-40 2xl:w-48 h-auto rounded-3xl bg-gradient-to-r from-indigo-100/30 to-blue-200/30 p-1 transform rotate-3 transition-transform hover:rotate-0 duration-500">
+                                            <img
+                                                src={mobileImage}
+                                                alt="AliSurveyモバイル"
+                                                className="w-full h-auto rounded-2xl shadow-2xl "
+                                            />
+                                        </div>
+                                        {/* 装饰性亮点 */}
+                                        <div className="absolute -top-3 -right-3 w-12 h-12 bg-white rounded-full opacity-70 blur-md animate-pulse"></div>
+                                    </div>
+                                </motion.div>
+                                {/* <div className="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                                    <div className="flex items-center">
                                        <div className="bg-green-100 p-2 rounded-lg">
                                            <i className="fa-solid fa-chart-line text-green-600 text-xl"></i>
@@ -93,12 +115,90 @@ export default function Hero() {
                                            <p className="text-2xl font-bold text-gray-900">90％削減</p>
                                        </div>
                                    </div>
-                                </div>
+                                </div> */}
+
                            </div>
                        </motion.div>
                    </div>
                </div>
+                <div>
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
+                        <a target='_blank'
+                            href="https://alisurvey.alicorns.co.jp"
+                            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-medium transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">無料で始める <i className="fa-solid fa-arrow-right ml-2"></i>
+                        </a>
+                        <a target='_blank'
+                            href="https://alisurvey.alicorns.co.jp?for=demo"
+                            className="bg-white hover:bg-gray-50 text-blue-600 border border-blue-600 px-8 py-4 rounded-lg text-lg font-medium transition-all">
+                            <i className="fa-solid fa-play-circle mr-2"></i>デモを見る
+                                            </a>
+                    </div>
+                    {/* <div className="mt-10 flex items-center">
+                        <div className="flex -space-x-2">
+                            {[1, 2, 3, 4].map(i => <img
+                                key={i}
+                                src={`https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Japanese%20business%20person%20avatar&sign=c0224456042d7467b42e4fe01b6bb356`}
+                                alt="顧客"
+                                className="w-10 h-10 rounded-full border-2 border-white" />)}
+                        </div>
+                        <div className="ml-4">
+                            <div className="flex items-center">
+                                {[1, 2, 3, 4, 5].map(i => <i key={i} className="fa-solid fa-star text-yellow-400 text-sm"></i>)}
+                            </div>
+                            <p className="text-sm text-gray-600">500社以上の企業が信頼</p>
+                        </div>
+                    </div> */}
+                </div>
            </div>
+            
+            <style>{`
+                .ocean-wave-back,
+                .ocean-wave-front {
+                    left: 0;
+                    background-repeat: repeat-x;
+                    background-position-y: bottom;
+                    animation-timing-function: linear;
+                    animation-iteration-count: infinite;
+                    will-change: transform;
+                }
+
+                /* 背景波浪层样式 */
+                .ocean-wave-back {
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,70 C300,50 300,90 600,70 C900,50 900,90 1200,70 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
+                    background-size: 600px 100%;
+                    animation-name: wave-flow-back;
+                    animation-duration: 20s;
+                }
+
+                /* 前景波浪层样式 */
+                .ocean-wave-front {
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,40 C300,60 300,20 600,40 C900,60 900,20 1200,40 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
+                    background-size: 600px 100%
+                    animation-name: wave-flow-front;
+                    animation-duration: 10s;
+                    animation-delay: -2s;
+                }
+
+                /* 背景层波浪动画 - 修改位移量 */
+                @keyframes wave-flow-back {
+                0% {
+                    transform: translateX(0);
+                }
+                100% {
+                    transform: translateX(-600px);
+                }
+                }
+
+                /* 前景层波浪动画 - 修改位移量 */
+                @keyframes wave-flow-front {
+                0% {
+                    transform: translateX(0);
+                }
+                100% {
+                    transform: translateX(-600px);
+                }
+                }
+            `}</style>
        </section>
    );
 }
--- a/products/react-apps/alisurvey/src/components/Testimonials.tsx
+++ b/products/react-apps/alisurvey/src/components/Testimonials.tsx
@@ -5,7 +5,7 @@ const testimonials = [
    name: "田中 健太",
    company: "株式会社ABC",
    position: "マーケティング部長",
-    content: "Alisurveyの直感的な操作感に驚きました。これまでIT部門に依頼していたアンケート作成を、マーケティングチーム内で完結できるようになり、作業効率が格段に向上しました。",
+    content: "AliSurveyの直感的な操作感に驚きました。これまでIT部門に依頼していたアンケート作成を、マーケティングチーム内で完結できるようになり、作業効率が格段に向上しました。",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Middle%20aged%20Japanese%20businessman%20smile&sign=753057963873d8d3eaec44917a19d62f"
  },
  {
@@ -33,7 +33,7 @@ export default function Testimonials() {
            顧客の声
          </h2>
          <p className="text-gray-700">
-            Alisurveyをご利用いただいている顧客の声をご紹介します。
+            AliSurveyをご利用いただいている顧客の声をご紹介します。
          </p>
        </div>
        
--- a/products/react-apps/alisurvey/src/components/UseCases.tsx
+++ b/products/react-apps/alisurvey/src/components/UseCases.tsx
@@ -0,0 +1,27 @@
+export default function UseCases() {
+
+  return (
+    <section id="benefits" className="py-20 bg-gradient-to-br from-blue-50 to-indigo-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 rounded-2xl">
+        <h3 className="text-2xl lg:text-3xl font-bold text-center text-foreground mb-12">
+          こんな業務に最適
+        </h3>
+
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+          {[
+            { icon: "🏢", title: "企業内調査", desc: "従業員満足度調査" },
+            { icon: "🛍️", title: "顧客アンケート", desc: "商品・サービス評価" },
+            { icon: "🎓", title: "教育機関", desc: "学習効果測定" },
+            { icon: "📈", title: "マーケティング", desc: "市場調査・分析" }
+          ].map((useCase, index) => (
+            <div key={index} className="text-center space-y-3">
+              <div className="text-4xl">{useCase.icon}</div>
+              <h4 className="font-semibold text-foreground">{useCase.title}</h4>
+              <p className="text-sm text-muted-foreground">{useCase.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/products/react-apps/alisurvey/src/main.tsx
+++ b/products/react-apps/alisurvey/src/main.tsx
@@ -7,7 +7,7 @@ import "./index.css";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename="alisurvey">
      <App />
      <Toaster />
    </BrowserRouter>
--- a/products/react-apps/alisurvey/src/pages/Home.tsx
+++ b/products/react-apps/alisurvey/src/pages/Home.tsx
@@ -10,6 +10,7 @@ import FeatureDetail from '@/components/FeatureDetail';
 import ChartDemo from '@/components/ChartDemo';
 import PricingSection from '@/components/PricingSection';
 import Testimonials from '@/components/Testimonials';
+import UseCases from '@/components/UseCases';
 import CTA from '@/components/CTA';
 import Footer from '@/components/Footer';

@@ -58,6 +59,9 @@ export default function Home() {
      {/* 機能詳細セクション */}
      <FeatureDetail />

+      {/* Use Cases */}
+      <UseCases />
+
      {/* CTAセクション */}
      <CTA />
      
--- a/products/react-apps/alisurvey/vite.config.ts
+++ b/products/react-apps/alisurvey/vite.config.ts
@@ -11,6 +11,11 @@ function getPlugins() {
  return plugins;
 }

-export default defineConfig({
-  plugins: getPlugins()
-});
+
+
+export default defineConfig(({ command }) => ({
+  plugins: getPlugins(),
+  base: command === 'build' 
+    ? '/wp-content/products/react-apps/alisurvey/' 
+    : '/alisurvey'
+}));
--- a/react-product-loader/react-product-loader.php
+++ b/react-product-loader/react-product-loader.php
@@ -87,4 +87,33 @@ function rpl_enqueue_react_app_assets() {
            '6.7.2'
        );
    }
+}
+
+/**
+ * 使用黑名单模式，在 React 模板页面移除指定样式
+ */
+add_action( 'wp_enqueue_scripts', 'rpl_blacklist_specific_styles', 99 );
+function rpl_blacklist_specific_styles() {
+    // 仅在 page-react-template.php 模板上执行
+    if ( ! is_page_template( 'page-react-template.php' ) ) {
+        return;
+    }
+
+    // --- 定义要移除的样式句柄（handle）黑名单 ---
+    $blacklisted_handles = [
+        // colibri-page-builder
+        'fancybox',
+        'extend-builder-css', 
+        'extend_builder_-fonts', 
+    ];
+
+    // 遍历黑名单并移除每个样式
+    foreach ( $blacklisted_handles as $handle ) {
+        wp_dequeue_style( $handle );
+    }
+
+    // global $wp_styles;
+    // echo '<pre id="test">';
+    // print_r( $wp_styles->queue );
+    // echo '</pre>';
 }
Author	SHA1	Message	Date
hsueh chiahao	80eeb54397	fix url	2025-10-20 16:39:29 +08:00
hsueh chiahao	034f37d885	Fix name	2025-09-29 17:41:54 +08:00
薛家豪	cb51342f6d	Update README.md	2025-09-29 05:20:27 +00:00
薛家豪	f46da4da00	Update README.md	2025-09-26 10:18:16 +00:00
hsueh chiahao	8dd1e3c34f	fix base url	2025-09-26 18:14:53 +08:00
hsueh chiahao	f8061b31bd	fix alisurvey	2025-09-26 18:13:41 +08:00
hsueh chiahao	b28cdf7307	Fix alisurvey page	2025-09-25 23:10:15 +08:00
薛家豪	21f25dac84	Update README.md	2025-09-25 14:29:09 +00:00
hsueh chiahao	fbe4e19ab6	update readme	2025-09-25 21:53:03 +08:00
hsueh chiahao	98dac11ece	fix path	2025-09-25 17:40:35 +08:00
hsueh chiahao	b091693221	remove css	2025-09-25 17:40:16 +08:00