auto-commit for b6920384-e719-4360-b37b-9bb5ad6d54a6

2026-07-28 04:52:29 -05:00 · 2026-03-16 16:07:02 +00:00
parent 4b54a91dcc
commit 706e3e2eb6
84 changed files with 6028 additions and 0 deletions
@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Plane, Menu, X } from 'lucide-react';
+import { Button } from './ui/button';
+
+const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const scrollToSection = (sectionId) => {
+    if (window.location.pathname !== '/') {
+      navigate('/');
+      setTimeout(() => {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth' });
+        }
+      }, 100);
+    } else {
+      const element = document.getElementById(sectionId);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+    setIsMenuOpen(false);
+  };
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md shadow-sm">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center py-4">
+          {/* Logo */}
+          <Link to="/" className="flex items-center space-x-2 group">
+            <div className="bg-gradient-to-br from-cyan-500 to-blue-600 p-2 rounded-lg transform group-hover:scale-110 transition-transform duration-300">
+              <Plane className="w-6 h-6 text-white" />
+            </div>
+            <span className="text-xl font-bold bg-gradient-to-r from-cyan-600 to-blue-700 bg-clip-text text-transparent">
+              Epic Travel
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-8">
+            <button
+              onClick={() => scrollToSection('home')}
+              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium"
+            >
+              Home
+            </button>
+            <button
+              onClick={() => scrollToSection('specials')}
+              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium"
+            >
+              Specials
+            </button>
+            <button
+              onClick={() => scrollToSection('destinations')}
+              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium"
+            >
+              Destinations
+            </button>
+            <button
+              onClick={() => scrollToSection('testimonials')}
+              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium"
+            >
+              Testimonials
+            </button>
+            <button
+              onClick={() => scrollToSection('contact')}
+              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium"
+            >
+              Contact
+            </button>
+            <Link to="/admin">
+              <Button
+                variant="outline"
+                className="border-cyan-600 text-cyan-600 hover:bg-cyan-50"
+              >
+                Admin
+              </Button>
+            </Link>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden p-2 text-gray-700 hover:text-cyan-600 transition-colors"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <div className="md:hidden py-4 border-t animate-in slide-in-from-top">
+            <nav className="flex flex-col space-y-4">
+              <button
+                onClick={() => scrollToSection('home')}
+                className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left"
+              >
+                Home
+              </button>
+              <button
+                onClick={() => scrollToSection('specials')}
+                className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left"
+              >
+                Specials
+              </button>
+              <button
+                onClick={() => scrollToSection('destinations')}
+                className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left"
+              >
+                Destinations
+              </button>
+              <button
+                onClick={() => scrollToSection('testimonials')}
+                className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left"
+              >
+                Testimonials
+              </button>
+              <button
+                onClick={() => scrollToSection('contact')}
+                className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left"
+              >
+                Contact
+              </button>
+              <Link to="/admin" onClick={() => setIsMenuOpen(false)}>
+                <Button
+                  variant="outline"
+                  className="border-cyan-600 text-cyan-600 hover:bg-cyan-50 w-full"
+                >
+                  Admin
+                </Button>
+              </Link>
+            </nav>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Header;