xuejiahao/website-products
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix alisurvey

Browse Source
This commit is contained in:
hsueh chiahao
2025-09-26 18:13:41 +08:00
parent b28cdf7307
commit f8061b31bd
20 changed files with 167 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
products/react-apps/alisurvey/src/assets/images/build-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
products/react-apps/alisurvey/src/assets/images/d1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
products/react-apps/alisurvey/src/assets/images/d2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
products/react-apps/alisurvey/src/assets/images/d3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
products/react-apps/alisurvey/src/assets/images/logic-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
products/react-apps/alisurvey/src/assets/images/main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

BIN
products/react-apps/alisurvey/src/assets/images/mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
products/react-apps/alisurvey/src/assets/images/t.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
products/react-apps/alisurvey/src/assets/images/t2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
products/react-apps/alisurvey/src/assets/images/t3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
products/react-apps/alisurvey/src/assets/images/t4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
products/react-apps/alisurvey/src/assets/images/t5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
products/react-apps/alisurvey/src/assets/images/t6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

2
products/react-apps/alisurvey/src/components/CTA.tsx
View File

@@ -38,7 +38,7 @@ 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>

11
products/react-apps/alisurvey/src/components/FeatureDetail.tsx
View File

@@ -1,5 +1,8 @@
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 FeatureDetail() {
return (
@@ -38,7 +41,7 @@ export default function FeatureDetail() {
<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 FeatureDetail() {
<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 FeatureDetail() {
<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 FeatureDetail() {
<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>

22
products/react-apps/alisurvey/src/components/FeatureSection.tsx
View File

@@ -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
}
];
@@ -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>
);

26
products/react-apps/alisurvey/src/components/Footer.tsx
View File

@@ -28,25 +28,25 @@ 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=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-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>
@@ -57,12 +57,12 @@ export default function Footer() {
&copy; 2025 Alisurvey. 全著作権所有.
</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>

12
products/react-apps/alisurvey/src/components/Header.tsx
View File

@@ -34,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>
{/* モバイルメニューボタン */}
@@ -83,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>
)}

157
products/react-apps/alisurvey/src/components/Hero.tsx
View File

@@ -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,
@@ -32,30 +34,6 @@ export default function Hero() {
20種類以上のコンポーネント。<br />
ドラッグ＆ドロップで直感的にアンケート作成。<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> */}
</motion.div>
</div>
{}
@@ -74,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>
@@ -99,12 +115,89 @@ 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>
<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> */}
</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>
);
}

2
products/react-apps/alisurvey/src/components/UseCases.tsx
View File

@@ -7,7 +7,7 @@ export default function UseCases() {
こんな業務に最適
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
{[
{ icon: "🏢", title: "企業内調査", desc: "従業員満足度調査" },
{ icon: "🛍️", title: "顧客アンケート", desc: "商品・サービス評価" },