Changes & Menus, enabled Gitea Workflow

.gitea/workflows/deploy.yaml

@@ -0,0 +1,26 @@
+name: Deploy NPM app
+run-name: ${{ gitea.actor }} is deploying to PROD servers.
+on: [push, fork, pull]
+
+jobs:
+  Explore-Gitea-Actions:
+    runs-on: 422239c5937c
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - run: echo "💡 The ${{ gitea.repository }} repository has been cloned to the runner."
+      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
+      - name: SSH to remote server
+        uses: appleboy/ssh-action@v1.0.3
+        with: 
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          password: ${{ secrets.PASSWORD }}
+          port: ${{ secrets.PORT }}
+          script: |
+            cd /home/zouklambadabcn.com/public_html/
+            git pull
+            npm install
+            npm run build
+            pm2 restart ZLB
+      - run: echo "🍏 This job's status is ${{ job.status }}."

src/components/BookingSection.tsx

@@ -149,7 +149,12 @@ const BookingSection = () => {
 
   if (status === "success") {
     return (
-      <section id="booking" ref={sectionRef} className="section-padding bg-background scroll-mt-24">
+      <section 
+        id="booking" 
+        ref={sectionRef} 
+        className="section-padding bg-background scroll-mt-24 relative z-10 -mt-[40px] pt-[120px]"
+        style={{ borderRadius: "0 100% 0 0 / 0 120px 0 0" }}
+      >
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -168,7 +173,12 @@ const BookingSection = () => {
   }
 
   return (
-    <section id="booking" ref={sectionRef} className="section-padding bg-background scroll-mt-24">
+    <section 
+      id="booking" 
+      ref={sectionRef} 
+      className="section-padding bg-background scroll-mt-24 relative z-10 -mt-[40px] pt-[120px]"
+      style={{ borderRadius: "0 100% 0 0 / 0 120px 0 0" }}
+    >
       <div className="container mx-auto max-w-2xl">
         <motion.div
           initial={{ opacity: 0, y: 20 }}

src/components/FooterSection.tsx

@@ -10,7 +10,8 @@ const FooterSection = () => (
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: false, amount: 0.15 }}
     transition={{ duration: 0.6 }}
-    className="bg-foreground text-primary-foreground"
+    className="bg-foreground text-primary-foreground relative z-30 -mt-[40px] pt-[80px]"
+    style={{ clipPath: "polygon(50% 0, 100% 40px, 100% 100%, 0 100%, 0 40px)" }}
   >
     <div className="container mx-auto px-4 py-12">
       <div className="grid md:grid-cols-3 gap-8 mb-8">

src/components/GallerySection.tsx

@@ -3,7 +3,11 @@ import { GALLERY_IMAGES } from "@/data/event-data";
 import { ImageIcon } from "lucide-react";
 
 const GallerySection = () => (
-  <section id="gallery" className="section-padding bg-card">
+  <section 
+    id="gallery" 
+    className="section-padding bg-card relative z-20 -mt-[40px] pt-[120px]"
+    style={{ borderRadius: "0 100% 0 0 / 0 100px 0 0" }}
+  >
     <div className="container mx-auto">
       <motion.div
         initial={{ opacity: 0, y: 20 }}

src/components/HotelSection.tsx

@@ -4,7 +4,11 @@ import { Button } from "@/components/ui/button";
 import { BedDouble, ExternalLink } from "lucide-react";
 
 const HotelSection = () => (
-  <section id="hotel" className="section-padding bg-card">
+  <section 
+    id="hotel" 
+    className="section-padding bg-card relative z-20 -mt-[40px] pt-[100px]"
+    style={{ borderRadius: "50% 50% 0 0 / 60px 60px 0 0" }}
+  >
     <div className="container mx-auto">
       <motion.div
         initial={{ opacity: 0, y: 20 }}

src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X } from "lucide-react";
 import { NAV_LINKS } from "@/data/event-data";
 import Logo from "@/assets/logo.png";
@@ -18,17 +18,26 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
+  useEffect(() => {
+    if (menuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => { document.body.style.overflow = "unset"; };
+  }, [menuOpen]);
+
   return (
     <nav
       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
         scrolled
-          ? "bg-background/95 backdrop-blur-md shadow-card"
+          ? "bg-background shadow-card"
-          : "bg-white/30"
+          : "bg-background"
       }`}
     >
-      <div className="container mx-auto flex items-center justify-between px-4 py-3">
+      <div className="container mx-auto flex items-center justify-between px-4 py-3 relative z-50">
         {/* Logo */}
-        <a href="#" className="font-display text-xl font-bold text-gradient">
+        <a href="#" className="font-display text-xl font-bold text-gradient" onClick={() => setMenuOpen(false)}>
           <img src={Logo} alt="ZLB Logo" className="h-8 w-auto" />
         </a>
 
@@ -47,33 +56,41 @@ const Navbar = () => {
 
         {/* Mobile toggle */}
         <button
-          className="md:hidden text-foreground"
+          className="md:hidden text-foreground hover:text-primary transition-colors focus:outline-none"
           onClick={() => setMenuOpen(!menuOpen)}
           aria-label="Toggle menu"
         >
-          {menuOpen ? <X size={24} /> : <Menu size={24} />}
+          {menuOpen ? <X size={28} /> : <Menu size={28} />}
         </button>
       </div>
 
-      {/* Mobile menu */}
+      {/* Mobile menu (Full Screen) */}
-      {menuOpen && (
+      <AnimatePresence>
-        <motion.div
+        {menuOpen && (
-          initial={{ opacity: 0, y: -10 }}
+          <motion.div
-          animate={{ opacity: 1, y: 0 }}
+            initial={{ opacity: 0, y: "-100%" }}
-          className="md:hidden bg-background/98 backdrop-blur-md border-t border-border px-4 pb-4"
+            animate={{ opacity: 1, y: 0 }}
-        >
+            exit={{ opacity: 0, y: "-100%" }}
-          {NAV_LINKS.map((link) => (
+            transition={{ type: "spring", damping: 25, stiffness: 200 }}
-            <a
+            className="md:hidden fixed inset-0 z-40 bg-background flex flex-col items-center justify-center gap-8"
-              key={link.href}
+          >
-              href={link.href}
+            {NAV_LINKS.map((link, i) => (
-              onClick={() => setMenuOpen(false)}
+              <motion.a
-              className="block py-3 text-sm font-medium text-foreground/80 hover:text-primary transition-colors border-b border-border/50"
+                key={link.href}
-            >
+                href={link.href}
-              {link.label}
+                initial={{ opacity: 0, y: 30 }}
-            </a>
+                animate={{ opacity: 1, y: 0 }}
-          ))}
+                exit={{ opacity: 0, y: 30 }}
-        </motion.div>
+                transition={{ delay: 0.1 * i }}
-      )}
+                onClick={() => setMenuOpen(false)}
+                className="text-3xl font-display font-medium text-foreground hover:text-primary transition-colors"
+              >
+                {link.label}
+              </motion.a>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </nav>
   );
 };

src/components/PracticalSection.tsx

@@ -3,7 +3,11 @@ import { EVENT_INFO, PRACTICAL_INFO } from "@/data/event-data";
 import { MapPin, Plane, Train } from "lucide-react";
 
 const PracticalSection = () => (
-  <section id="info" className="section-padding bg-background">
+  <section 
+    id="info" 
+    className="section-padding bg-background relative z-10 -mt-[40px] pt-[100px]"
+    style={{ borderRadius: "100% 0 0 0 / 100px 0 0 0" }}
+  >
     <div className="container mx-auto">
       <motion.div
         initial={{ opacity: 0, y: 20 }}

src/components/ScheduleSection.tsx

@@ -17,7 +17,11 @@ const typeColor: Record<string, string> = {
 };
 
 const ScheduleSection = () => (
-  <section id="schedule" className="section-padding bg-card">
+  <section 
+    id="schedule" 
+    className="section-padding bg-card relative z-20 -mt-[40px] pt-[100px]"
+    style={{ borderRadius: "100% 0 0 0 / 120px 0 0 0" }}
+  >
     <div className="container mx-auto">
       <motion.div
         initial={{ opacity: 0, y: 20 }}

src/components/StaffSection.tsx

@@ -27,7 +27,11 @@ const StaffSection = () => {
   };
 
   return (
-    <section id="staff" className="section-padding bg-background">
+    <section 
+      id="staff" 
+      className="section-padding bg-background relative z-10 -mt-[40px] pt-[120px]"
+      style={{ borderRadius: "50% 50% 0 0 / 80px 80px 0 0" }}
+    >
       <div className="container mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 20 }}