Fix alisurvey page

products/react-apps/alisurvey/src/components/FeatureDetail.tsx

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
 import FeatureCard from './FeatureCard';
 
-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">

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">
+          <div className="flex items-center space-x-2">
-            <h1 className="text-2xl font-bold text-blue-600">Alisurvey</h1>
+            <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="ml-2 text-gray-500 text-xs">アンケートシステム</span>
+              <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>
           
           {/* デスクトップナビゲーション */}

products/react-apps/alisurvey/src/components/Hero.tsx

@@ -20,12 +20,18 @@ export default function Hero() {
                             transition={{
                                 duration: 0.6
                             }}>
+                            <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 md:text-5xl lg: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>
+                            <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-lg">
+                                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>

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-1 md: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>
+  );
+}

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 />