Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>災害AI - 災害に備えたローカルLLM | 予約注文受付中</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .scroll-smooth { | |
| scroll-behavior: smooth; | |
| } | |
| </style> | |
| </head> | |
| <body class="scroll-smooth font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-shield-alt text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">災害AI</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">特徴</a> | |
| <a href="#how-it-works" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">仕組み</a> | |
| <a href="#pricing" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">価格</a> | |
| <a href="#faq" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">FAQ</a> | |
| <a href="#pre-order" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium pulse-animation">予約注文</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">メニューを開く</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">特徴</a> | |
| <a href="#how-it-works" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">仕組み</a> | |
| <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">価格</a> | |
| <a href="#faq" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">FAQ</a> | |
| <a href="#pre-order" class="block px-3 py-2 text-base font-medium text-white bg-blue-600 hover:bg-blue-700">予約注文</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| 災害に備えたローカルLLM | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl"> | |
| インターネットが使えない緊急時でも、AIが災害情報と生存戦略を提供します | |
| </p> | |
| <div class="mt-10"> | |
| <a href="#pre-order" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100 shadow-lg pulse-animation"> | |
| 今すぐ予約注文 | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">特徴</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| 災害AIが提供する安心 | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| インターネット接続がなくても機能する、災害対策専用AIアシスタント | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-gray-50 p-6 shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">オフライン動作</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| インターネット接続がなくても完全に機能します。停電時でも小型発電機やバッテリーで動作可能。 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-gray-50 p-6 shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-map-marked-alt text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">地域特化情報</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| お住まいの地域の避難場所、災害リスク、自治体連絡先など、地域に特化した情報を提供。 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-gray-50 p-6 shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-first-aid text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">応急処置ガイド</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| 災害時の怪我や病気に対する応急処置方法をわかりやすく解説。画像付きで直感的に理解できます。 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-gray-50 p-6 shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-language text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">多言語対応</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| 日本語、英語、中国語、韓国語など主要言語に対応。外国人観光客や居住者も安心。 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-gray-50 p-6 shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-database text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">最新データ搭載</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| 毎年更新される災害対策マニュアル、気象庁データ、自治体情報を搭載。 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-gray-50 p-6 shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">対話型インターフェース</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| 自然な会話で必要な情報を取得。音声入力にも対応しており、手が塞がっている状況でも利用可能。 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works Section --> | |
| <div id="how-it-works" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">仕組み</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| 災害AIの動作原理 | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| 最先端のローカルLLM技術で、いつでもどこでも安心を提供 | |
| </p> | |
| </div> | |
| <div class="mt-16"> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Step 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">デバイスセットアップ</h3> | |
| <p class="text-gray-600"> | |
| 災害AIデバイスを自宅やオフィスに設置。Wi-Fi接続で初期設定と地域情報のダウンロードを行います。 | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">データ同期</h3> | |
| <p class="text-gray-600"> | |
| 定期的に最新の災害情報、気象データ、避難所情報を自動更新。オフラインでも最新データを保持。 | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">災害発生時</h3> | |
| <p class="text-gray-600"> | |
| 災害発生時、インターネットが遮断されても、デバイス内のAIが状況に応じた適切なアドバイスを提供。 | |
| </p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> | |
| <span class="text-xl font-bold">4</span> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">継続的サポート</h3> | |
| <p class="text-gray-600"> | |
| 災害後の生活再建支援、心のケアアドバイス、行政サービス情報など、長期的なサポートを提供。 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-white rounded-lg shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0"> | |
| <img class="h-full w-full object-cover md:w-96" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Disaster preparedness"> | |
| </div> | |
| <div class="p-8"> | |
| <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold">デモビデオ</div> | |
| <h3 class="mt-2 text-2xl font-semibold text-gray-900">災害AIの動作デモ</h3> | |
| <p class="mt-3 text-gray-600"> | |
| 災害AIが実際に災害シナリオでどのように動作するかをご覧ください。地震発生時のリアルタイムアドバイス、避難経路の提案、応急処置のガイダンスなど、命を守るための機能を確認できます。 | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-play-circle text-blue-600 text-4xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">デモビデオを見る</div> | |
| <div class="text-sm text-gray-500">2分30秒</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pricing Section --> | |
| <div id="pricing" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">価格</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| 安心のための投資 | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| 災害AIは家族の安全を守るための賢い選択です | |
| </p> | |
| </div> | |
| <div class="mt-16 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"> | |
| <!-- Basic Plan --> | |
| <div class="relative p-8 bg-gray-50 border border-gray-200 rounded-2xl shadow-sm"> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-900">基本プラン</h3> | |
| <p class="mt-4 flex items-baseline text-gray-600"> | |
| <span class="text-4xl font-extrabold tracking-tight">¥49,800</span> | |
| <span class="ml-1 text-xl font-semibold">(税込)</span> | |
| </p> | |
| <p class="mt-2 text-sm text-gray-500">個人・小家族向け</p> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <p class="text-base text-gray-600">1台のデバイス</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <p class="text-base text-gray-600">基本災害情報セット</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <p class="text-base text-gray-600">年1回のデータ更新</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <p class="text-base text-gray-600">メールサポート</p> | |
| </li> | |
| </ul> | |
| <a href="#pre-order" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-blue-600 text-white hover:bg-blue-700"> | |
| 予約注文 | |
| </a> | |
| </div> | |
| <!-- Popular Plan --> | |
| <div class="relative p-8 bg-white border-2 border-blue-600 rounded-2xl shadow-lg"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <span class="px-4 py-1 text-xs font-semibold tracking-wide text-white bg-blue-600 rounded-full">人気プラン</ | |
| </html> |