46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
'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>
|
||
);
|
||
}
|