97 lines
4.3 KiB
JavaScript
97 lines
4.3 KiB
JavaScript
import React from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { X, ChevronDown, MessageCircle, Github, Linkedin, Mail } from 'lucide-react';
|
|
|
|
const MobileMenu = ({ isOpen, onClose }) => {
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-50 lg:hidden"
|
|
>
|
|
<div className="fixed inset-0 bg-black/20" onClick={onClose} />
|
|
<motion.div
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ type: 'tween', duration: 0.3 }}
|
|
className="fixed right-0 top-0 h-full w-80 mobile-menu shadow-xl"
|
|
>
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
<span className="text-xl font-bold text-gray-900">Menu</span>
|
|
<button onClick={onClose} className="p-2">
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="grid grid-cols-2 gap-8">
|
|
{/* Menu */}
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 mb-4">Menu</h3>
|
|
<ul className="space-y-3 text-gray-600">
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">Case Studies</a></li>
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">Blog</a></li>
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">Contacts</a></li>
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">About Us</a></li>
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Services */}
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 mb-4">Services</h3>
|
|
<ul className="space-y-3 text-gray-600">
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">Web Development</a></li>
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">Mobile Development</a></li>
|
|
<li><a href="#" className="hover:text-gray-900 transition-colors">Support and Maintenance</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Info */}
|
|
<div className="mt-8 pt-8 border-t border-gray-200">
|
|
<div className="flex items-center space-x-2 text-sm text-gray-600 mb-4">
|
|
<MessageCircle className="w-4 h-4" />
|
|
<span>Feel free to drop us a note:</span>
|
|
</div>
|
|
<a href="mailto:contact@sargas.io" className="text-gray-900 font-medium">
|
|
contact@sargas.io
|
|
</a>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="flex items-center space-x-4 mt-6">
|
|
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<Github className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<Linkedin className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<MessageCircle className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<Mail className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="absolute bottom-0 left-0 right-0 p-6 border-t border-gray-200">
|
|
<div className="flex items-center justify-between text-sm text-gray-500">
|
|
<a href="#" className="hover:text-gray-700 transition-colors">Privacy Policy</a>
|
|
<a href="#" className="hover:text-gray-700 transition-colors">Terms of Use</a>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default MobileMenu; |