Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TECHNOVA | 未来を創るテクノロジー企業</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| // バイオテック/クリーンな配色 | |
| primary: '#00b894', // New: フレッシュなティール/エメラルドグリーン | |
| secondary: '#4a69bd', // New: 落ち着いたソフトブルー | |
| dark: '#ffffff', // New: 背景色 - 清潔な白 | |
| darker: '#1a1a1a', // New: 文字色 - 濃いダークグレー | |
| light: '#f5f7f8', // New: 補助背景/ボーダー色 - 非常に薄いグレー | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif', 'system-ui'], | |
| jp: ['"Noto Sans JP"', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| }, | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-dark font-sans text-darker relative overflow-x-hidden min-h-screen"> | |
| <div id="particles-js" class="absolute inset-0 z-0"></div> | |
| <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition duration-300 bg-light/80 backdrop-blur-md shadow-md"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <svg class="w-8 h-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM11 15.75c0 .414.336.75.75.75h.5c.414 0 .75-.336.75-.75V8.25c0-.414-.336-.75-.75-.75h-.5c-.414 0-.75.336-.75.75v7.5Z" fill="currentColor"/> | |
| <path d="M11 8.25a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-7.5Z" fill="#1a1a1a"/> </svg> | |
| <span class="text-xl font-bold text-darker tracking-wider">TECHNOVA</span> | |
| </a> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#hero" class="nav-link border-b-2 border-transparent px-3 py-2 text-sm font-medium text-darker hover:text-primary transition duration-300" data-i18n="nav.home">ホーム</a> | |
| <a href="#about" class="nav-link border-b-2 border-transparent px-3 py-2 text-sm font-medium text-darker hover:text-primary transition duration-300" data-i18n="nav.about">会社概要</a> | |
| <a href="#services" class="nav-link border-b-2 border-transparent px-3 py-2 text-sm font-medium text-darker hover:text-primary transition duration-300" data-i18n="nav.services">サービス</a> | |
| <a href="#products" class="nav-link border-b-2 border-transparent px-3 py-2 text-sm font-medium text-darker hover:text-primary transition duration-300" data-i18n="nav.products">製品</a> | |
| <a href="#contact" class="nav-link border-b-2 border-transparent px-3 py-2 text-sm font-medium text-darker hover:text-primary transition duration-300" data-i18n="nav.contact">お問い合わせ</a> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex space-x-1 p-1 bg-light rounded-lg border border-light"> | |
| <button class="lang-btn text-xs font-semibold px-2 py-1 rounded-md transition duration-200 bg-gray-700/50 text-gray-300 hover:bg-gray-700/80" data-lang="ja">日本語</button> | |
| <button class="lang-btn text-xs font-semibold px-2 py-1 rounded-md transition duration-200 bg-gray-700/50 text-gray-300 hover:bg-gray-700/80" data-lang="zh">中文</button> | |
| <button class="lang-btn text-xs font-semibold px-2 py-1 rounded-md transition duration-200 bg-gray-700/50 text-gray-300 hover:bg-gray-700/80" data-lang="en">English</button> | |
| </div> | |
| <button id="menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-darker hover:text-primary hover:bg-light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary sm:hidden" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i class="fa fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sm:hidden hidden bg-white shadow-xl" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#hero" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-darker hover:bg-light hover:text-primary" data-i18n="nav.home">ホーム</a> | |
| <a href="#about" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-darker hover:bg-light hover:text-primary" data-i18n="nav.about">会社概要</a> | |
| <a href="#services" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-darker hover:bg-light hover:text-primary" data-i18n="nav.services">サービス</a> | |
| <a href="#products" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-darker hover:bg-light hover:text-primary" data-i18n="nav.products">製品</a> | |
| <a href="#contact" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-darker hover:bg-light hover:text-primary" data-i18n="nav.contact">お問い合わせ</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="bg-dark" id="main-content"> | |
| <section id="hero" class="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden min-h-screen flex items-center"> | |
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-12 items-center"> | |
| <div class="lg:col-span-6 text-center lg:text-left"> | |
| <span class="text-primary font-semibold text-sm tracking-widest uppercase mb-4 block" data-i18n="hero.tagline">未来を創るテクノロジー</span> | |
| <h1 class="text-5xl md:text-7xl font-extrabold text-darker leading-tight mb-6"> | |
| <span class="block" data-i18n="hero.title1">イノベーションで</span> | |
| <span class="block text-primary" data-i18n="hero.title2">世界を変える</span> | |
| </h1> | |
| <p class="mt-4 text-lg text-gray-700 max-w-xl mx-auto lg:mx-0 mb-8" data-i18n="hero.desc">TECHNOVAは、AI、ロボティクス、デジタルトランスフォーメーションの分野で、次世代のテクノロジーソリューションを提供する日本のリーディングカンパニーです。</p> | |
| <div class="flex justify-center lg:justify-start space-x-4"> | |
| <a href="#contact" class="px-8 py-3 text-lg font-semibold rounded-full bg-primary text-white hover:bg-primary/80 transition duration-300 shadow-lg shadow-primary/30 transform hover:scale-105" data-i18n="hero.cta">お問い合わせ</a> | |
| <a href="#about" class="px-8 py-3 text-lg font-semibold rounded-full bg-transparent border-2 border-primary text-primary hover:bg-primary/10 transition duration-300" data-i18n="hero.learnMore">詳細を見る</a> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-6 mt-12 lg:mt-0 relative"> | |
| <img class="w-full h-auto rounded-xl shadow-2xl border-4 border-white transform hover:scale-[1.01] transition duration-500 ease-in-out" src="https://picsum.photos/id/1060/800/800" alt="未来的なテクノロジーのイメージ"> | |
| <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-secondary/10 rounded-full animate-pulse-slow"></div> | |
| <div class="absolute -top-4 -left-4 w-12 h-12 bg-primary/20 rounded-lg transform rotate-45"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-16 bg-light/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center"> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl transition duration-300 hover:scale-[1.02]"> | |
| <span class="text-6xl font-bold text-primary block" data-i18n="stats.years">15+</span> | |
| <span class="text-lg font-medium text-darker mt-2 block" data-i18n="stats.yearsDesc">年の実績</span> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl transition duration-300 hover:scale-[1.02]"> | |
| <span class="text-6xl font-bold text-primary block" data-i18n="stats.clients">500+</span> | |
| <span class="text-lg font-medium text-darker mt-2 block" data-i18n="stats.clientsDesc">満足クライアント</span> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl transition duration-300 hover:scale-[1.02]"> | |
| <span class="text-6xl font-bold text-primary block" data-i18n="stats.projects">1200+</span> | |
| <span class="text-lg font-medium text-darker mt-2 block" data-i18n="stats.projectsDesc">成功プロジェクト</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="about" class="py-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-4xl font-extrabold text-darker text-center mb-4" data-i18n="about.title">会社概要</h2> | |
| <p class="text-xl text-gray-700 text-center max-w-3xl mx-auto mb-16" data-i18n="about.desc">TECHNOVAは2008年に東京に設立され、テクノロジーイノベーションを通じて社会課題の解決と人々の生活の向上を目指しています。</p> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"> | |
| <div> | |
| <div class="space-y-10"> | |
| <div class="p-6 rounded-xl bg-white border border-light shadow-md hover:border-primary/50 transition duration-300"> | |
| <div class="flex items-center space-x-4 mb-3"> | |
| <div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i class="fa fa-eye"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-darker" data-i18n="about.vision">ビジョン</h3> | |
| </div> | |
| <p class="text-gray-700" data-i18n="about.visionDesc">テクノロジーを活用して、より豊かで持続可能な未来社会を創り上げることを目指します。</p> | |
| </div> | |
| <div class="p-6 rounded-xl bg-white border border-light shadow-md hover:border-primary/50 transition duration-300"> | |
| <div class="flex items-center space-x-4 mb-3"> | |
| <div class="w-10 h-10 bg-secondary/10 text-secondary rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i class="fa fa-lightbulb-o"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-darker" data-i18n="about.values">企業理念</h3> | |
| </div> | |
| <p class="text-gray-700" data-i18n="about.valuesDesc">イノベーション、品質、信頼、持続可能性を基盤として、お客様と社会に貢献します。</p> | |
| </div> | |
| <div class="p-6 rounded-xl bg-white border border-light shadow-md hover:border-primary/50 transition duration-300"> | |
| <div class="flex items-center space-x-4 mb-3"> | |
| <div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i class="fa fa-globe"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-darker" data-i18n="about.global">グローバル展開</h3> | |
| </div> | |
| <p class="text-gray-700" data-i18n="about.globalDesc">東京を本社とし、シリコンバレー、北京、ロンドンに拠点を置き、世界中のクライアントにサービスを提供しています。</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:mt-0 p-8 rounded-xl bg-white shadow-2xl border border-light"> | |
| <h3 class="text-2xl font-bold text-darker mb-4" data-i18n="about.growth">会社の成長</h3> | |
| <div class="h-96"> | |
| <canvas id="growthChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="services" class="py-24 bg-light"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-4xl font-extrabold text-darker text-center mb-4" data-i18n="services.title">サービス</h2> | |
| <p class="text-xl text-gray-700 text-center max-w-3xl mx-auto mb-16" data-i18n="services.desc">最新のテクノロジーを活用した革新的なソリューションで、お客様のビジネスの成長を支援します。</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4 transition duration-300 group-hover:bg-primary group-hover:text-white"> | |
| <i class="fa fa-rocket text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-darker mb-3" data-i18n="services.ai.title">AIソリューション</h3> | |
| <p class="text-gray-700 mb-4" data-i18n="services.ai.desc">機械学習、深層学習、自然言語処理を活用したカスタムAIソリューションの開発と導入支援を提供します。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 flex items-center" data-i18n="services.learnMore">詳細を見る <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="w-12 h-12 bg-secondary/10 text-secondary rounded-lg flex items-center justify-center mb-4 transition duration-300 group-hover:bg-secondary group-hover:text-white"> | |
| <i class="fa fa-android text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-darker mb-3" data-i18n="services.robotics.title">ロボティクス</h3> | |
| <p class="text-gray-700 mb-4" data-i18n="services.robotics.desc">産業用ロボット、サービスロボット、自律移動ロボットの開発とシステム統合サービスを提供します。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 flex items-center" data-i18n="services.learnMore">詳細を見る <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4 transition duration-300 group-hover:bg-primary group-hover:text-white"> | |
| <i class="fa fa-cloud text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-darker mb-3" data-i18n="services.cloud.title">クラウドサービス</h3> | |
| <p class="text-gray-700 mb-4" data-i18n="services.cloud.desc">クラウドマイグレーション、マイクロサービスアーキテクチャ、サーバーレスコンピューティングのコンサルティングと開発。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 flex items-center" data-i18n="services.learnMore">詳細を見る <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="w-12 h-12 bg-secondary/10 text-secondary rounded-lg flex items-center justify-center mb-4 transition duration-300 group-hover:bg-secondary group-hover:text-white"> | |
| <i class="fa fa-bolt text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-darker mb-3" data-i18n="services.iot.title">IoTプラットフォーム</h3> | |
| <p class="text-gray-700 mb-4" data-i18n="services.iot.desc">デバイス接続、データ収集、分析、可視化を提供するIoTプラットフォームの開発と運用支援サービス。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 flex items-center" data-i18n="services.learnMore">詳細を見る <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4 transition duration-300 group-hover:bg-primary group-hover:text-white"> | |
| <i class="fa fa-cogs text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-darker mb-3" data-i18n="services.digital.title">デジタルトランスフォーメーション</h3> | |
| <p class="text-gray-700 mb-4" data-i18n="services.digital.desc">伝統的なビジネスモデルをデジタル化するための戦略策定、システム開発、組織変革の支援を提供します。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 flex items-center" data-i18n="services.learnMore">詳細を見る <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| <div class="p-8 rounded-xl bg-white shadow-xl border border-light transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="w-12 h-12 bg-secondary/10 text-secondary rounded-lg flex items-center justify-center mb-4 transition duration-300 group-hover:bg-secondary group-hover:text-white"> | |
| <i class="fa fa-shield text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-darker mb-3" data-i18n="services.cyber.title">サイバーセキュリティ</h3> | |
| <p class="text-gray-700 mb-4" data-i18n="services.cyber.desc">ネットワークセキュリティ、データ保護、脆弱性評価、セキュリティ監視の総合的なサイバーセキュリティサービス。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 flex items-center" data-i18n="services.learnMore">詳細を見る <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="products" class="py-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-4xl font-extrabold text-darker text-center mb-4" data-i18n="products.title">製品</h2> | |
| <p class="text-xl text-gray-700 text-center max-w-3xl mx-auto mb-16" data-i18n="products.desc">当社独自の研究開発によって生まれた、世界をリードするイノベーティブな製品ラインナップ。</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="rounded-xl bg-white shadow-xl border border-light overflow-hidden transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="h-48 bg-gray-100 relative overflow-hidden"> | |
| <img class="w-full h-full object-cover transform transition duration-500 group-hover:scale-110" src="https://picsum.photos/id/40/600/400" alt="NeoAI Core"> | |
| <div class="absolute inset-0 bg-primary/20 group-hover:bg-primary/40 transition duration-300"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-darker mb-2" data-i18n="products.neoAI.title">NeoAI Core</h3> | |
| <p class="text-gray-700 text-sm mb-4" data-i18n="products.neoAI.desc">高い効率性と汎用性を兼ね備えた次世代AIプロセッサ。低消費電力で高性能なAI処理を実現し、様々なデバイスに搭載可能です。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 text-sm flex items-center" data-i18n="products.learnMore">製品詳細 <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| </div> | |
| <div class="rounded-xl bg-white shadow-xl border border-light overflow-hidden transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="h-48 bg-gray-100 relative overflow-hidden"> | |
| <img class="w-full h-full object-cover transform transition duration-500 group-hover:scale-110" src="https://picsum.photos/id/1025/600/400" alt="Nexus IoT Platform"> | |
| <div class="absolute inset-0 bg-secondary/20 group-hover:bg-secondary/40 transition duration-300"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-darker mb-2" data-i18n="products.nexus.title">Nexus IoT Platform</h3> | |
| <p class="text-gray-700 text-sm mb-4" data-i18n="products.nexus.desc">数百万台のデバイスを安全かつ効率的に接続・管理するためのIoTプラットフォーム。リアルタイムデータ分析と可視化機能を提供します。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 text-sm flex items-center" data-i18n="products.learnMore">製品詳細 <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| </div> | |
| <div class="rounded-xl bg-white shadow-xl border border-light overflow-hidden transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="h-48 bg-gray-100 relative overflow-hidden"> | |
| <img class="w-full h-full object-cover transform transition duration-500 group-hover:scale-110" src="https://picsum.photos/id/433/600/400" alt="Alpha Robotics"> | |
| <div class="absolute inset-0 bg-primary/20 group-hover:bg-primary/40 transition duration-300"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-darker mb-2" data-i18n="products.alpha.title">Alpha Robotics</h3> | |
| <p class="text-gray-700 text-sm mb-4" data-i18n="products.alpha.desc">産業現場やサービス業界で活躍する自律移動ロボットシリーズ。AIによる環境認識と経路計画機能を搭載しています。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 text-sm flex items-center" data-i18n="products.learnMore">製品詳細 <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| </div> | |
| <div class="rounded-xl bg-white shadow-xl border border-light overflow-hidden transform hover:shadow-2xl hover:scale-[1.02] transition duration-300 group"> | |
| <div class="h-48 bg-gray-100 relative overflow-hidden"> | |
| <img class="w-full h-full object-cover transform transition duration-500 group-hover:scale-110" src="https://picsum.photos/id/160/600/400" alt="Zenith Cloud"> | |
| <div class="absolute inset-0 bg-secondary/20 group-hover:bg-secondary/40 transition duration-300"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-darker mb-2" data-i18n="products.zenith.title">Zenith Cloud</h3> | |
| <p class="text-gray-700 text-sm mb-4" data-i18n="products.zenith.desc">エンタープライズ向けの高い安全性と柔軟性を備えたクラウドコンピューティングプラットフォーム。AIによる最適化機能を搭載しています。</p> | |
| <a href="#" class="text-primary font-semibold hover:text-secondary transition duration-300 text-sm flex items-center" data-i18n="products.learnMore">製品詳細 <i class="fa fa-arrow-right ml-2 text-sm"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="py-24 bg-light"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-4xl font-extrabold text-darker text-center mb-4" data-i18n="contact.title">お問い合わせ</h2> | |
| <p class="text-xl text-gray-700 text-center max-w-3xl mx-auto mb-16" data-i18n="contact.desc">当社の製品やサービスについてのお問い合わせ、プロジェクトの相談、採用情報など、ご不明な点があればお気軽にお問い合わせください。</p> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start"> | |
| <div class="lg:col-span-1 space-y-8 p-8 rounded-xl bg-white shadow-lg border border-light"> | |
| <h3 class="text-2xl font-bold text-darker mb-4">お問い合わせ窓口</h3> | |
| <div class="space-y-4 border-t pt-4 border-light"> | |
| <h4 class="text-xl font-bold text-darker" data-i18n="contact.address">本社所在地</h4> | |
| <p class="text-gray-700 leading-relaxed" data-i18n="contact.addressDesc">東京都千代田区大手町1-1-1 大手町タワー</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <h4 class="text-xl font-bold text-darker" data-i18n="contact.phone">電話番号</h4> | |
| <p class="text-gray-700">+81 3-1234-5678</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <h4 class="text-xl font-bold text-darker" data-i18n="contact.email">メールアドレス</h4> | |
| <p class="text-primary hover:underline"><a href="mailto:info@technova.jp">info@technova.jp</a></p> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-2 p-8 rounded-xl bg-white shadow-lg border border-light relative z-[60]"> | |
| <h3 class="text-2xl font-bold text-darker mb-6">会社所在地図</h3> | |
| <div class="w-full h-96 rounded-lg overflow-hidden border border-gray-300 mb-4"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.151541708679!2d139.7598055955713!3d35.68744645444569!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c07a94ef3e9%3A0xcd2549ac06389fa!2z44CSMTAwLTAwMDQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65aSn5omL55S6!5e0!3m2!1sja!2sjp!4v1763091607163!5m2!1sja!2sjp" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> <button id="scroll-top" class="fixed bottom-6 right-6 p-4 rounded-full bg-primary text-white shadow-xl opacity-0 invisible transition duration-300 hover:bg-primary/80 z-40"> | |
| <i class="fa fa-arrow-up"></i> | |
| </button> | |
| <footer class="bg-light py-16 border-t border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-6 gap-8"> | |
| <div class="col-span-2 space-y-4"> | |
| <div class="flex items-center space-x-2"> | |
| <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM11 15.75c0 .414.336.75.75.75h.5c.414 0 .75-.336.75-.75V8.25c0-.414-.336-.75-.75-.75h-.5c-.414 0-.75.336-.75.75v7.5Z" fill="currentColor"/> | |
| <path d="M11 8.25a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-7.5Z" fill="#1a1a1a"/> | |
| </svg> | |
| <span class="text-lg font-bold text-darker tracking-wider">TECHNOVA</span> | |
| </div> | |
| <p class="text-gray-600 text-sm" data-i18n="footer.desc">テクノロジーイノベーションで未来を創る、日本のリーディングカンパニー。</p> | |
| </div> | |
| <div class="space-y-3"> | |
| <h4 class="text-lg font-semibold text-darker" data-i18n="footer.links">リンク</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#hero" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.home">ホーム</a></li> | |
| <li><a href="#about" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.about">会社概要</a></li> | |
| <li><a href="#services" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.services">サービス</a></li> | |
| <li><a href="#products" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.products">製品</a></li> | |
| <li><a href="#contact" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.contact">お問い合わせ</a></li> | |
| </ul> | |
| </div> | |
| <div class="space-y-3"> | |
| <h4 class="text-lg font-semibold text-darker" data-i18n="services.title">サービス</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.ai">AIソリューション</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.robotics">ロボティクス</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.cloud">クラウドサービス</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.iot">IoTプラットフォーム</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary text-sm" data-i18n="footer.cyber">サイバーセキュリティ</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-span-2 space-y-3"> | |
| <h4 class="text-lg font-semibold text-darker" data-i18n="contact.title">お問い合わせ</h4> | |
| <div class="space-y-2 text-sm text-gray-600"> | |
| <p><i class="fa fa-map-marker text-primary w-4 mr-2"></i> <span data-i18n="footer.address">東京都千代田区大手町1-1-1 大手町タワー</span></p> | |
| <p><i class="fa fa-phone text-primary w-4 mr-2"></i> +81 3-1234-5678</p> | |
| <p><i class="fa fa-envelope text-primary w-4 mr-2"></i> info@technova.jp</p> | |
| <p><i class="fa fa-clock-o text-primary w-4 mr-2"></i> <span data-i18n="footer.hours">月～金 9:00～18:00</span></p> | |
| </div> | |
| <div class="flex space-x-4 pt-2"> | |
| <a href="#" class="text-darker hover:text-primary transition duration-300"><i class="fa fa-facebook-official text-xl"></i></a> | |
| <a href="#" class="text-darker hover:text-primary transition duration-300"><i class="fa fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-darker hover:text-primary transition duration-300"><i class="fa fa-linkedin text-xl"></i></a> | |
| <a href="#" class="text-darker hover:text-primary transition duration-300"><i class="fa fa-instagram text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-300 text-center"> | |
| <p class="text-sm text-gray-600" data-i18n="footer.copyright">© 2024 TECHNOVA Inc. 全ての権利を留保します。</p> | |
| <div class="flex justify-center space-x-4 mt-2 text-sm"> | |
| <a href="#" class="text-gray-600 hover:text-primary" data-i18n="footer.privacy">プライバシーポリシー</a> | |
| <span class="text-gray-400">|</span> | |
| <a href="#" class="text-gray-600 hover:text-primary" data-i18n="footer.terms">利用規約</a> | |
| <span class="text-gray-400">|</span> | |
| <a href="#" class="text-gray-600 hover:text-primary" data-i18n="footer.cookie">クッキーポリシー</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 言語データ - 住所と「拡大地図を表示」リンクの翻訳を追加 | |
| const translations = { | |
| ja: { | |
| nav: { home: 'ホーム', about: '会社概要', services: 'サービス', products: '製品', contact: 'お問い合わせ' }, | |
| hero: { tagline: '未来を創るテクノロジー', title1: 'イノベーションで', title2: '世界を変える', desc: 'TECHNOVAは、AI、ロボティクス、デジタルトランスフォーメーションの分野で、次世代のテクノロジーソリューションを提供する日本のリーディングカンパニーです。', cta: 'お問い合わせ', learnMore: '詳細を見る' }, | |
| stats: { years: '15+', yearsDesc: '年の実績', clients: '500+', clientsDesc: '満足クライアント', projects: '1200+', projectsDesc: '成功プロジェクト' }, | |
| about: { | |
| title: '会社概要', desc: 'TECHNOVAは2008年に東京に設立され、テクノロジーイノベーションを通じて社会課題の解決と人々の生活の向上を目指しています。', since: '2008', vision: 'ビジョン', visionDesc: 'テクノロジーを活用して、より豊かで持続可能な未来社会を創り上げることを目指します。', values: '企業理念', valuesDesc: 'イノベーション、品質、信頼、持続可能性を基盤として、お客様と社会に貢献します。', global: 'グローバル展開', globalDesc: '東京を本社とし、シリコンバレー、北京、ロンドンに拠点を置き、世界中のクライアントにサービスを提供しています。', growth: '会社の成長', growthChartLabel1: '売上高 (億円)', growthChartLabel2: '従業員数' | |
| }, | |
| services: { | |
| title: 'サービス', desc: '最新のテクノロジーを活用した革新的なソリューションで、お客様のビジネスの成長を支援します。', learnMore: '詳細を見る', | |
| ai: { title: 'AIソリューション', desc: '機械学習、深層学習、自然言語処理を活用したカスタムAIソリューションの開発と導入支援を提供します。' }, | |
| robotics: { title: 'ロボティクス', desc: '産業用ロボット、サービスロボット、自律移動ロボットの開発とシステム統合サービスを提供します。' }, | |
| cloud: { title: 'クラウドサービス', desc: 'クラウドマイグレーション、マイクロサービスアーキテクチャ、サーバーレスコンピューティングのコンサルティングと開発。' }, | |
| iot: { title: 'IoTプラットフォーム', desc: 'デバイス接続、データ収集、分析、可視化を提供するIoTプラットフォームの開発と運用支援サービス。' }, | |
| digital: { title: 'デジタルトランスフォーメーション', desc: '伝統的なビジネスモデルをデジタル化するための戦略策定、システム開発、組織変革の支援を提供します。' }, | |
| cyber: { title: 'サイバーセキュリティ', desc: 'ネットワークセキュリティ、データ保護、脆弱性評価、セキュリティ監視の総合的なサイバーセキュリティサービス。' } | |
| }, | |
| products: { | |
| title: '製品', desc: '当社独自の研究開発によって生まれた、世界をリードするイノベーティブな製品ラインナップ。', learnMore: '製品詳細', | |
| neoAI: { title: 'NeoAI Core', desc: '高い効率性と汎用性を兼ね備えた次世代AIプロセッサ。低消費電力で高性能なAI処理を実現し、様々なデバイスに搭載可能です。' }, | |
| nexus: { title: 'Nexus IoT Platform', desc: '数百万台のデバイスを安全かつ効率的に接続・管理するためのIoTプラットフォーム。リアルタイムデータ分析と可視化機能を提供します。' }, | |
| alpha: { title: 'Alpha Robotics', desc: '産業現場やサービス業界で活躍する自律移動ロボットシリーズ。AIによる環境認識と経路計画機能を搭載しています。' }, | |
| zenith: { title: 'Zenith Cloud', desc: 'エンタープライズ向けの高い安全性と柔軟性を備えたクラウドコンピューティングプラットフォーム。AIによる最適化機能を搭載しています。' } | |
| }, | |
| contact: { | |
| title: 'お問い合わせ', desc: '当社の製品やサービスについてのお問い合わせ、プロジェクトの相談、採用情報など、ご不明な点があればお気軽にお問い合わせください。', address: '本社所在地', | |
| addressDesc: '東京都千代田区大手町1-1-1 大手町タワー', // 住所修正 | |
| phone: '電話番号', email: 'メールアドレス', formTitle: 'お問い合わせフォーム', name: 'お名前', emailForm: 'メールアドレス', company: '会社名 / 団体名', subject: '件名', subjectSelect: 'お問い合わせの目的を選択してください', subjectProduct: '製品について', subjectService: 'サービスについて', subjectProject: 'プロジェクトの相談', subjectRecruit: '採用情報', subjectOther: 'その他', message: 'お問い合わせ内容', privacy: 'プライバシーポリシーに同意します。当社はお客様から提供された情報を、お問い合わせへの回答以外の目的で使用することはありません。', submit: '送信する', | |
| mapLink: '【拡大地図を表示】' // 新しいリンクテキスト | |
| }, | |
| footer: { | |
| desc: 'テクノロジーイノベーションで未来を創る、日本のリーディングカンパニー。', links: 'リンク', home: 'ホーム', about: '会社概要', services: 'サービス', products: '製品', contact: 'お問い合わせ', ai: 'AIソリューション', robotics: 'ロボティクス', cloud: 'クラウドサービス', iot: 'IoTプラットフォーム', cyber: 'サイバーセキュリティ', | |
| address: '東京都千代田区大手町1-1-1 大手町タワー', // 住所修正 | |
| hours: '月～金 9:00～18:00', copyright: '© 2024 TECHNOVA Inc. 全ての権利を留保します。', privacy: 'プライバシーポリシー', terms: '利用規約', cookie: 'クッキーポリシー' | |
| } | |
| }, | |
| zh: { | |
| nav: { home: '首页', about: '公司概要', services: '服务', products: '产品', contact: '联系我们' }, | |
| hero: { tagline: '创造未来的科技', title1: '以创新', title2: '改变世界', desc: 'TECHNOVA 是一家领先的日本科技公司，在人工智能、机器人和数字化转型领域提供下一代技术解决方案。', cta: '联系我们', learnMore: '查看详情' }, | |
| stats: { years: '15+', yearsDesc: '年行业经验', clients: '500+', clientsDesc: '满意客户', projects: '1200+', projectsDesc: '成功项目' }, | |
| about: { | |
| title: '公司概要', desc: 'TECHNOVA 于 2008 年在东京成立，旨在通过技术创新解决社会问题，改善人们的生活。', since: '2008', vision: '愿景', visionDesc: '我们的目标是利用技术创造一个更繁荣、更可持续的未来社会。', values: '企业理念', valuesDesc: '我们以创新、质量、诚信和可持续性为基础，为客户和社会做出贡献。', global: '全球布局', globalDesc: '总部位于东京，在硅谷、北京和伦敦设有办事处，为全球客户提供服务。', growth: '公司成长', growthChartLabel1: '营业额 (亿日元)', growthChartLabel2: '员工人数' | |
| }, | |
| services: { | |
| title: '服务', desc: '我们利用最新技术提供创新解决方案，支持客户的业务增长。', learnMore: '查看详情', | |
| ai: { title: 'AI 解决方案', desc: '提供利用机器学习、深度学习和自然语言处理的定制化 AI 解决方案的开发和实施支持。' }, | |
| robotics: { title: '机器人技术', desc: '提供工业机器人、服务机器人和自主移动机器人的开发及系统集成服务。' }, | |
| cloud: { title: '云服务', desc: '云迁移、微服务架构、无服务器计算的咨询与开发。' }, | |
| iot: { title: 'IoT 平台', desc: '提供设备连接、数据收集、分析和可视化的 IoT 平台开发与运营支持服务。' }, | |
| digital: { title: '数字化转型', desc: '为传统商业模式的数字化提供战略制定、系统开发和组织变革支持。' }, | |
| cyber: { title: '网络安全', desc: '全面的网络安全服务，包括网络安全、数据保护、漏洞评估和安全监控。' } | |
| }, | |
| products: { | |
| title: '产品', desc: '我们通过自主研发，推出了引领世界的创新产品系列。', learnMore: '产品详情', | |
| neoAI: { title: 'NeoAI Core', desc: '高效、通用的下一代 AI 处理器。实现低功耗、高性能的 AI 处理，可搭载于各种设备。' }, | |
| nexus: { title: 'Nexus IoT Platform', desc: '安全高效连接和管理数百万台设备的 IoT 平台。提供实时数据分析和可视化功能。' }, | |
| alpha: { title: 'Alpha Robotics', desc: '活跃在工业现场和服务业的自主移动机器人系列。搭载 AI 环境识别和路径规划功能。' }, | |
| zenith: { title: 'Zenith Cloud', desc: '面向企业的高安全、高灵活性的云计算平台。搭载 AI 优化功能。' } | |
| }, | |
| contact: { | |
| title: '联系我们', desc: '如果您对我们的产品或服务有任何疑问、项目咨询或招聘信息，请随时与我们联系。', address: '总公司地址', | |
| addressDesc: '东京都千代田区大手町 1-1-1 大手町大厦', // 住所修正 | |
| phone: '电话号码', email: '电子邮箱', formTitle: '联系表单', name: '您的姓名', emailForm: '电子邮箱地址', company: '公司名 / 团体名', subject: '主题', subjectSelect: '请选择咨询目的', subjectProduct: '关于产品', subjectService: '关于服务', subjectProject: '项目咨询', subjectRecruit: '招聘信息', subjectOther: '其他', message: '咨询内容', privacy: '我同意隐私政策。本公司承诺不会将客户提供的信息用于回复咨询以外的任何目的。', submit: '发送', | |
| mapLink: '【扩大地图显示】' // 新しいリンクテキスト | |
| }, | |
| footer: { | |
| desc: '以科技创新创造未来，日本领先的科技公司。', links: '快速链接', home: '首页', about: '公司概要', services: '服务', products: '产品', contact: '联系我们', ai: 'AI 解决方案', robotics: '机器人技术', cloud: '云服务', iot: 'IoT 平台', cyber: '网络安全', | |
| address: '东京都千代田区大手町 1-1-1 大手町大厦', // 住所修正 | |
| hours: '周一至周五 9:00～18:00', copyright: '© 2024 TECHNOVA Inc. 保留所有权利。', privacy: '隐私政策', terms: '服务条款', cookie: 'Cookie 政策' | |
| } | |
| }, | |
| en: { | |
| nav: { home: 'Home', about: 'About Us', services: 'Services', products: 'Products', contact: 'Contact' }, | |
| hero: { tagline: 'Technology that Creates the Future', title1: 'Innovation to', title2: 'Change the World', desc: 'TECHNOVA is a leading Japanese technology company providing next-generation technology solutions in the fields of AI, robotics, and digital transformation.', cta: 'Contact Us', learnMore: 'Learn More' }, | |
| stats: { years: '15+', yearsDesc: 'Years of Experience', clients: '500+', clientsDesc: 'Satisfied Clients', projects: '1200+', projectsDesc: 'Successful Projects' }, | |
| about: { | |
| title: 'About Us', desc: 'TECHNOVA was established in Tokyo in 2008 with the aim of solving social issues and improving people\'s lives through technological innovation.', since: '2008', vision: 'Vision', visionDesc: 'We aim to create a richer and more sustainable future society by leveraging technology.', values: 'Corporate Philosophy', valuesDesc: 'We contribute to our customers and society based on innovation, quality, reliability, and sustainability.', global: 'Global Expansion', globalDesc: 'Headquartered in Tokyo, with offices in Silicon Valley, Beijing, and London, we serve clients worldwide.', growth: 'Company Growth', growthChartLabel1: 'Revenue (Billion JPY)', growthChartLabel2: 'Number of Employees' | |
| }, | |
| services: { | |
| title: 'Services', desc: 'We support our clients\' business growth with innovative solutions utilizing the latest technology.', learnMore: 'Learn More', | |
| ai: { title: 'AI Solutions', desc: 'We offer development and implementation support for custom AI solutions using machine learning, deep learning, and natural language processing.' }, | |
| robotics: { title: 'Robotics', desc: 'We provide development and system integration services for industrial robots, service robots, and autonomous mobile robots.' }, | |
| cloud: { title: 'Cloud Services', desc: 'Consulting and development for cloud migration, microservices architecture, and serverless computing.' }, | |
| iot: { title: 'IoT Platform', desc: 'Development and operational support services for an IoT platform that enables device connection, data collection, analysis, and visualization.' }, | |
| digital: { title: 'Digital Transformation', desc: 'We support strategy formulation, system development, and organizational change to digitize traditional business models.' }, | |
| cyber: { title: 'Cybersecurity', desc: 'Comprehensive cybersecurity services, including network security, data protection, vulnerability assessment, and security monitoring.' } | |
| }, | |
| products: { | |
| title: 'Products', desc: 'An innovative, world-leading product lineup born from our proprietary research and development.', learnMore: 'Product Details', | |
| neoAI: { title: 'NeoAI Core', desc: 'A next-generation AI processor combining high efficiency and versatility. It achieves high-performance, low-power AI processing and can be installed in various devices.' }, | |
| nexus: { title: 'Nexus IoT Platform', desc: 'An IoT platform for securely and efficiently connecting and managing millions of devices. Provides real-time data analysis and visualization.' }, | |
| alpha: { title: 'Alpha Robotics', desc: 'A series of autonomous mobile robots active in industrial sites and the service sector. Equipped with AI environment recognition and route planning functions.' }, | |
| zenith: { title: 'Zenith Cloud', desc: 'A cloud computing platform for enterprises with high security and flexibility, featuring AI-based optimization capabilities.' } | |
| }, | |
| contact: { | |
| title: 'Contact Us', desc: 'Please feel free to contact us with any questions about our products and services, project consultation, or recruitment information.', address: 'Headquarters Address', | |
| addressDesc: 'Otemachi Tower, 1-1-1 Otemachi, Chiyoda-ku, Tokyo', // 住所修正 | |
| phone: 'Phone Number', email: 'Email Address', formTitle: 'Contact Form', name: 'Your Name', emailForm: 'Email Address', company: 'Company / Organization Name', subject: 'Subject', subjectSelect: 'Please select the purpose of your inquiry', subjectProduct: 'Inquiry about Products', subjectService: 'Inquiry about Services', subjectProject: 'Project Consultation', subjectRecruit: 'Recruitment Information', subjectOther: 'Other', message: 'Your Message', privacy: 'I agree to the privacy policy. Our company will not use the information provided by customers for any purpose other than responding to inquiries.', submit: 'Submit', | |
| mapLink: '【View Larger Map】' // 新しいリンクテキスト | |
| }, | |
| footer: { | |
| desc: 'A leading Japanese company creating the future through technological innovation.', links: 'Quick Links', home: 'Home', about: 'About Us', services: 'Services', products: 'Products', contact: 'Contact', ai: 'AI Solutions', robotics: 'Robotics', cloud: 'Cloud Services', iot: 'IoT Platform', cyber: 'Cybersecurity', | |
| address: 'Otemachi Tower, 1-1-1 Otemachi, Chiyoda-ku, Tokyo', // 住所修正 | |
| hours: 'Mon-Fri 9:00 AM - 6:00 PM', copyright: '© 2024 TECHNOVA Inc. All rights reserved.', privacy: 'Privacy Policy', terms: 'Terms of Use', cookie: 'Cookie Policy' | |
| } | |
| } | |
| }; | |
| /** | |
| * 根据语言和键名获取翻译 | |
| * @param {string} lang - 語言コード (e.g., 'ja', 'zh', 'en') | |
| * @param {string} key - 翻訳キー (e.g., 'nav.home') | |
| * @returns {string} - 翻訳されたテキスト | |
| */ | |
| function getTranslation(lang, key) { | |
| const langData = translations[lang]; | |
| if (!langData) { | |
| return getTranslation('ja', key); | |
| } | |
| const keys = key.split('.'); | |
| let result = langData; | |
| for (const k of keys) { | |
| if (result && typeof result === 'object' && k in result) { | |
| result = result[k]; | |
| } else { | |
| const fallbackResult = keys.reduce((obj, k) => (obj && obj[k] !== 'undefined') ? obj[k] : undefined, translations['ja']); | |
| return fallbackResult || key; | |
| } | |
| } | |
| return result; | |
| } | |
| /** | |
| * ページ言語を切り替える | |
| * @param {string} lang - 切り替え先の言語コード | |
| */ | |
| function changeLanguage(lang) { | |
| if (!translations[lang]) { | |
| console.error(`Cannot change language: "${lang}" data is missing.`); | |
| return; | |
| } | |
| localStorage.setItem('technova_lang', lang); | |
| document.querySelectorAll('[data-i18n]').forEach(element => { | |
| const key = element.getAttribute('data-i18n'); | |
| const translation = getTranslation(lang, key); | |
| if (translation) { | |
| element.innerText = translation; | |
| } | |
| }); | |
| // 言語ボタンのアクティブ状態を更新 | |
| document.querySelectorAll('.lang-btn').forEach(btn => { | |
| if (btn.getAttribute('data-lang') === lang) { | |
| // アクティブ状態のスタイルを更新 | |
| btn.classList.add('bg-primary/10', 'text-primary', 'border', 'border-primary/30'); | |
| btn.classList.remove('bg-gray-700/50', 'text-gray-300', 'hover:bg-gray-700/80'); | |
| btn.classList.add('hover:bg-primary/20'); | |
| } else { | |
| // 非アクティブ状態のスタイルを更新 | |
| btn.classList.remove('bg-primary/10', 'text-primary', 'border', 'border-primary/30'); | |
| btn.classList.add('bg-gray-700/50', 'text-gray-300', 'hover:bg-gray-700/80'); | |
| btn.classList.remove('hover:bg-primary/20'); | |
| } | |
| }); | |
| } | |
| // --- ページロードとイベントリスニング --- | |
| // 粒子背景 | |
| particlesJS("particles-js", { | |
| "particles": { | |
| "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, | |
| "color": { "value": "#00b894" }, | |
| "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, | |
| "opacity": { "value": 0.5, "random": true, "anim": { "enable": true, "speed": 1, "opacity_min": 0.1, "sync": false } }, | |
| "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, | |
| "line_linked": { "enable": true, "distance": 150, "color": "#00b894", "opacity": 0.2, "width": 1 }, | |
| "move": { "enable": true, "speed": 1, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } | |
| }, | |
| "interactivity": { | |
| "detect_on": "canvas", | |
| "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": false, "mode": "push" }, "resize": true }, | |
| "modes": { | |
| "grab": { "distance": 140, "line_opacity": 0.4 }, | |
| "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, | |
| "repulse": { "distance": 200, "duration": 0.4 }, | |
| "push": { "particles_nb": 4 }, | |
| "remove": { "particles_nb": 2 } | |
| } | |
| }, | |
| "retina_detect": true | |
| }); | |
| // 既存のナビゲーション、メニュー、スクロール処理のコード（変更なし） | |
| const navbar = document.getElementById('navbar'); | |
| window.addEventListener('scroll', function() { | |
| // スクロール時に背景がより白くなるように（Navの白背景がスクロールで濃くなる） | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('bg-white'); | |
| navbar.classList.remove('bg-light/80'); | |
| } else { | |
| navbar.classList.remove('bg-white'); | |
| navbar.classList.add('bg-light/80'); | |
| } | |
| }); | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| const icon = menuBtn.querySelector('i'); | |
| icon.classList.toggle('fa-bars'); | |
| icon.classList.toggle('fa-times'); | |
| }); | |
| document.querySelectorAll('.mobile-nav-link').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| const icon = menuBtn.querySelector('i'); | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| }); | |
| }); | |
| const scrollTopBtn = document.getElementById('scroll-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 300) { | |
| scrollTopBtn.classList.remove('opacity-0', 'invisible'); | |
| scrollTopBtn.classList.add('opacity-100', 'visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('opacity-100', 'visible'); | |
| scrollTopBtn.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| const sections = document.querySelectorAll('section[id]'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| if (scrollY >= sectionTop - 100) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('text-primary'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('text-primary'); | |
| } | |
| }); | |
| mobileNavLinks.forEach(link => { | |
| link.classList.remove('text-primary'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('text-primary'); | |
| } | |
| }); | |
| }); | |
| // --- DOM ロード後に実行 --- | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // --- 言語切り替え初期化 --- | |
| const savedLang = localStorage.getItem('technova_lang'); | |
| const browserLang = navigator.language.split('-')[0]; | |
| let initialLang = 'ja'; // デフォルトを日本語に設定 | |
| if (savedLang && ['ja', 'zh', 'en'].includes(savedLang)) { | |
| initialLang = savedLang; | |
| } else if (['zh', 'en'].includes(browserLang) && translations[browserLang]) { | |
| initialLang = browserLang; | |
| } | |
| document.querySelectorAll('.lang-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const lang = btn.getAttribute('data-lang'); | |
| changeLanguage(lang); | |
| }); | |
| }); | |
| changeLanguage(initialLang); | |
| // --- Chart.js のコード - カラーを新しいバイオテックカラーに更新 --- | |
| if (document.getElementById('growthChart')) { | |
| const ctx = document.getElementById('growthChart').getContext('2d'); | |
| // プライマリーカラーのグラデーションを作成 | |
| const gradient = ctx.createLinearGradient(0, 0, 0, 400); | |
| gradient.addColorStop(0, 'rgba(0, 184, 148, 0.5)'); // New primary: #00b894 | |
| gradient.addColorStop(1, 'rgba(0, 184, 148, 0)'); | |
| new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'], | |
| datasets: [{ | |
| label: getTranslation(initialLang, 'about.growthChartLabel1') || '売上高 (億円)', | |
| data: [12, 19, 30, 42, 65, 80, 110], | |
| backgroundColor: gradient, | |
| borderColor: '#00b894', // New primary | |
| borderWidth: 2, | |
| pointBackgroundColor: '#00b894', | |
| pointBorderColor: '#ffffff', // 白背景に合わせる | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: '#00b894', | |
| tension: 0.4, | |
| fill: 'start' | |
| }, | |
| { | |
| label: getTranslation(initialLang, 'about.growthChartLabel2') || '従業員数', | |
| data: [50, 70, 110, 150, 220, 300, 410], | |
| backgroundColor: 'rgba(74, 105, 189, 0.1)', // New secondary/10 | |
| borderColor: '#4a69bd', // New secondary | |
| borderWidth: 2, | |
| pointBackgroundColor: '#4a69bd', | |
| pointBorderColor: '#ffffff', // 白背景に合わせる | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: '#4a69bd', | |
| tension: 0.4, | |
| fill: false | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| color: '#1a1a1a' // テキストをダークカラーに変更 | |
| } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| ticks: { | |
| color: '#1a1a1a' // テキストをダークカラーに変更 | |
| }, | |
| grid: { | |
| color: 'rgba(0, 184, 148, 0.1)' // グリッド線もバイオテックカラーの薄い色に | |
| } | |
| }, | |
| y: { | |
| ticks: { | |
| color: '#1a1a1a' // テキストをダークカラーに変更 | |
| }, | |
| grid: { | |
| color: 'rgba(0, 184, 148, 0.1)' // グリッド線もバイオテックカラーの薄い色に | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |