新規作成

src/components/Header.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export default function Header() {
+  return (
+    <motion.header
+      className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800"
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
+        <motion.div
+          className="flex flex-col items-start sm:items-center"
+          whileHover={{ scale: 1.03 }}
+        >
+          <span className="text-xl sm:text-2xl font-bold gradient-text">
+            新日本テクノソリューションズ株式会社
+          </span>
+          <span className="text-base sm:text-lg font-semibold text-gray-300 mt-1">
+            New Japan Techno Solutions Inc.
+          </span>
+        </motion.div>
+        <nav className="hidden md:flex gap-8">
+          <a href="#about" className="text-gray-300 hover:text-white transition-colors">
+            について
+          </a>
+          <a href="#expertise" className="text-gray-300 hover:text-white transition-colors">
+            実績
+          </a>
+          <a href="#technology" className="text-gray-300 hover:text-white transition-colors">
+            技術
+          </a>
+          <a href="#contact" className="text-gray-300 hover:text-white transition-colors">
+            お問い合わせ
+          </a>
+        </nav>
+        <button className="px-6 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg font-semibold transition-colors text-sm">
+          Contact
+        </button>
+      </div>
+    </motion.header>
+  );
+}