development/79e92415-18c9-4f9a-8fe2-cf838e45396d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
vitalijmulika
2026-01-14 14:05:12 +02:00
commit 94ca398409
90 changed files with 2620 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/MobileMenu.js Normal file
View File

@@ -0,0 +1,97 @@
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;