catering page new slider section updated

src/app/catering/CateringContent.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
 import Navbar from '@/components/Navbar/Navbar'
 import Footer from '@/components/Footer/Footer'
@@ -9,6 +9,43 @@ import Image from 'next/image'
 import styles from './catering.module.css'
 
 export default function CateringContent() {
+    // Slider state for Visual Journey section
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [mounted, setMounted] = useState(false);
+
+    const sliderImages = [
+        '/images/hero-1.png',
+        '/images/dish-1.png',
+        '/images/hero-2.png',
+        '/images/dish-2.png',
+        '/images/hero-3.png'
+    ];
+
+    // Set mounted state after component mounts (client-side only)
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Auto-slide effect (only runs after mount)
+    useEffect(() => {
+        if (!mounted) return;
+
+        const interval = setInterval(() => {
+            setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
+        }, 3000); // Change slide every 3 seconds
+
+        return () => clearInterval(interval);
+    }, [mounted, sliderImages.length]);
+
+    // Manual navigation
+    const nextSlide = () => {
+        setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
+    };
+
+    const prevSlide = () => {
+        setCurrentSlide((prev) => (prev - 1 + sliderImages.length) % sliderImages.length);
+    };
+
     // Animation variants
     const fadeInUp = {
         hidden: { opacity: 0, y: 30 },
@@ -178,24 +215,51 @@ export default function CateringContent() {
                     viewport={{ once: true, margin: "-100px" }}
                     variants={staggerContainer}
                 >
-                    {/* Left Side: Images */}
+                    {/* Left Side: Image Slider */}
                     <motion.div className={styles.welcomeImagesWrapper} variants={slideInLeft}>
-                        <div className={styles.welcomeImagesStack}>
+                        <div className={styles.sliderContainer}>
-                            <div className={styles.welcomeImageTop}>
+                            <div className={styles.sliderWrapper}>
-                                <Image
+                                {sliderImages.map((image, index) => (
-                                    src="/images/hero-1.png"
+                                    <div
-                                    alt="Gourmet dish"
+                                        key={index}
-                                    fill
+                                        className={`${styles.sliderSlide} ${index === currentSlide ? styles.sliderSlideActive : ''}`}
-                                    style={{ objectFit: 'cover' }}
+                                    >
-                                />
+                                        <Image
+                                            src={image}
+                                            alt={`Slide ${index + 1}`}
+                                            fill
+                                            style={{ objectFit: 'cover' }}
+                                        />
+                                    </div>
+                                ))}
                             </div>
-                            <div className={styles.welcomeImageBottom}>
+
-                                <Image
+                            {/* Navigation Arrows */}
-                                    src="/images/dish-1.png"
+                            <button
-                                    alt="Delicious burger"
+                                className={`${styles.sliderArrow} ${styles.sliderArrowLeft}`}
-                                    fill
+                                onClick={prevSlide}
-                                    style={{ objectFit: 'cover' }}
+                                aria-label="Previous slide"
-                                />
+                            >
+                                ←
+                            </button>
+                            <button
+                                className={`${styles.sliderArrow} ${styles.sliderArrowRight}`}
+                                onClick={nextSlide}
+                                aria-label="Next slide"
+                            >
+                                →
+                            </button>
+
+                            {/* Slide Indicators */}
+                            <div className={styles.sliderIndicators}>
+                                {sliderImages.map((_, index) => (
+                                    <button
+                                        key={index}
+                                        className={`${styles.sliderIndicator} ${index === currentSlide ? styles.sliderIndicatorActive : ''}`}
+                                        onClick={() => setCurrentSlide(index)}
+                                        aria-label={`Go to slide ${index + 1}`}
+                                    />
+                                ))}
                             </div>
                         </div>
                     </motion.div>
@@ -208,13 +272,13 @@ export default function CateringContent() {
                             <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
                         </div>
                         <h2 className={styles.mainHeadingSection}>A Visual Journey Through</h2>
-                        <div className={styles.welcomeDivider}>
+                        {/* <div className={styles.welcomeDivider}>
                             <svg width="120" height="20" viewBox="0 0 120 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <line x1="0" y1="10" x2="45" y2="10" stroke="#d3cab3" strokeWidth="2" />
                                 <path d="M52 5 Q60 10 52 15 M55 5 Q63 10 55 15 M58 5 Q66 10 58 15" stroke="#d3cab3" strokeWidth="1.5" fill="none" />
                                 <line x1="75" y1="10" x2="120" y2="10" stroke="#d3cab3" strokeWidth="2" />
                             </svg>
-                        </div>
+                        </div> */}
                         <p className={styles.welcomeDescription}>
                             Seabreeze was the first restaurant to open in Egypt, the restaurant was designed with the history in mind of it. We have created a soft industrial dining room, combined with an open  kitchen, coffee take out bar and a lovely on site coffee  roastery.
                         </p>
@@ -385,7 +449,7 @@ export default function CateringContent() {
                                 </li>
                             </ul>
                         </div>
-                         <Link href="/menu" className={styles.lastButton}>
+                        <Link href="/menu" className={styles.lastButton}>
                             View Our Menu
                         </Link>
                     </motion.div>
@@ -395,4 +459,4 @@ export default function CateringContent() {
             <Footer />
         </main>
     )
-}
+}

src/app/catering/catering.module.css

@@ -119,7 +119,6 @@
 }
 
 .sectionHeading3 {
-    /* padding: 80px 20px 40px; */
     max-width: 900px;
     margin: 0 auto;
     text-align: center;
@@ -247,10 +246,6 @@
 }
 
 @media (max-width: 767px) {
-    /* .topSection {
-        padding: 80px 15px;
-    } */
-
     .topCardsGrid {
         grid-template-columns: 1fr;
         gap: 20px;
@@ -269,10 +264,8 @@
     }
 }
 
-
-
 /* ============================================
-   WELCOME SECTION
+   WELCOME SECTION (WITH SLIDER)
    ============================================ */
 
 .welcomeSection {
@@ -295,46 +288,113 @@
     height: 550px;
 }
 
-.welcomeImagesStack {
+/* Slider Styles */
+.sliderContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+.sliderWrapper {
     position: relative;
     width: 100%;
     height: 100%;
 }
 
-.welcomeImageTop {
+.sliderSlide {
     position: absolute;
-    width: 280px;
-    height: 370px;
-    left: 0;
     top: 0;
-    overflow: hidden;
+    left: 0;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    width: 100%;
-    z-index: 2;
+    height: 100%;
-    background-color: #000;
+    opacity: 0;
+    transition: opacity 0.8s ease-in-out;
+    z-index: 0;
 }
 
-.welcomeImageBottom {
+.sliderSlideActive {
-    position: absolute;
+    opacity: 1;
-    width: 400px;
-    height: 500px;
-    left: 200px;
-    top: 50px;
-    overflow: hidden;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     z-index: 1;
-    background-color: #000;
 }
 
-.welcomeImageTop img,
+.sliderSlide img {
-.welcomeImageBottom img {
     transition: transform 0.6s ease;
 }
 
-.welcomeImagesWrapper:hover .welcomeImageTop img,
+.sliderContainer:hover .sliderSlideActive img {
-.welcomeImagesWrapper:hover .welcomeImageBottom img {
     transform: scale(1.05);
 }
 
+/* Navigation Arrows */
+.sliderArrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: rgba(211, 202, 179, 0.9);
+    border: 2px solid var(--color-border);
+    color: #5d4037;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.sliderArrow:hover {
+    background-color: var(--color-button);
+    color: #fff;
+    transform: translateY(-50%) scale(1.1);
+}
+
+.sliderArrowLeft {
+    left: 20px;
+}
+
+.sliderArrowRight {
+    right: 20px;
+}
+
+/* Slide Indicators */
+.sliderIndicators {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+}
+
+.sliderIndicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 2px solid var(--color-border);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 0;
+}
+
+.sliderIndicator:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+    transform: scale(1.2);
+}
+
+.sliderIndicatorActive {
+    background-color: var(--color-button);
+    transform: scale(1.3);
+}
+
 .welcomeContent {
     padding: 40px;
 }
@@ -398,10 +458,8 @@
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 20px;
-    /* font-size: 2.5rem; */
 }
 
-
 .welcomeSignature {
     text-align: left;
 }
@@ -432,27 +490,33 @@
 
     .welcomeImagesWrapper {
         height: 450px;
-        max-width: 600px;
+        max-width: 100%;
+        width: 100%;
         margin: 0 auto;
-    }
+        order: 1;
-
-    .welcomeImageTop {
-        width: 240px;
-        height: 320px;
-    }
-
-    .welcomeImageBottom {
-        width: 340px;
-        height: 420px;
-        left: 180px;
-    }
-
-    .welcomeTitle {
-        font-size: 44px;
     }
 
     .welcomeContent {
         padding: 20px 0;
+        order: 2;
+    }
+
+    .sliderArrow {
+        width: 45px;
+        height: 45px;
+        font-size: 20px;
+    }
+
+    .sliderArrowLeft {
+        left: 15px;
+    }
+
+    .sliderArrowRight {
+        right: 15px;
+    }
+
+    .welcomeTitle {
+        font-size: 44px;
     }
 }
 
@@ -469,16 +533,28 @@
         height: 400px;
     }
 
-    .welcomeImageTop {
+    .sliderArrow {
-        width: 200px;
+        width: 40px;
-        height: 280px;
+        height: 40px;
+        font-size: 18px;
     }
 
-    .welcomeImageBottom {
+    .sliderArrowLeft {
-        width: 280px;
+        left: 10px;
-        height: 360px;
+    }
-        left: 140px;
+
-        top: 40px;
+    .sliderArrowRight {
+        right: 10px;
+    }
+
+    .sliderIndicators {
+        bottom: 15px;
+        gap: 8px;
+    }
+
+    .sliderIndicator {
+        width: 10px;
+        height: 10px;
     }
 
     .welcomeTitle {
@@ -495,16 +571,29 @@
         height: 350px;
     }
 
-    .welcomeImageTop {
+    .sliderArrow {
-        width: 160px;
+        width: 35px;
-        height: 240px;
+        height: 35px;
+        font-size: 16px;
     }
 
-    .welcomeImageBottom {
+    .sliderArrowLeft {
-        width: 240px;
+        left: 8px;
-        height: 310px;
+    }
-        left: 100px;
+
-        top: 40px;
+    .sliderArrowRight {
+        right: 8px;
+    }
+
+    .sliderIndicators {
+        bottom: 12px;
+        gap: 6px;
+    }
+
+    .sliderIndicator {
+        width: 8px;
+        height: 8px;
+        border-width: 1px;
     }
 
     .welcomeTitle {
@@ -831,192 +920,6 @@
     }
 }
 
-/* ============================================
-   SERVICES SECTION
-   ============================================ */
-
-.servicesSection {
-    padding: 80px 20px;
-    background-color: #f5e6d3;
-}
-
-.servicesContainer {
-    max-width: 1400px;
-    margin: 0 auto;
-}
-
-.serviceItem {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 80px;
-    align-items: center;
-    margin-bottom: 120px;
-    position: relative;
-}
-
-.serviceItem:last-child {
-    margin-bottom: 0;
-}
-
-.serviceItemReverse {
-    direction: rtl;
-}
-
-.serviceItemReverse>* {
-    direction: ltr;
-}
-
-.serviceImageWrapper {
-    position: relative;
-}
-
-.serviceImageContainer {
-    position: relative;
-    width: 100%;
-    height: 500px;
-    overflow: hidden;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-    transition: transform 0.4s ease, box-shadow 0.4s ease;
-}
-
-.serviceItem:hover .serviceImageContainer {
-    transform: translateY(-10px);
-    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
-}
-
-.serviceImageContainer img {
-    transition: transform 0.6s ease;
-}
-
-.serviceItem:hover .serviceImageContainer img {
-    transform: scale(1.1);
-}
-
-.serviceContent {
-    padding: 40px;
-    position: relative;
-}
-
-.serviceNumber {
-    font-family: var(--font-playfair);
-    font-size: 120px;
-    color: rgba(139, 115, 85, 0.15);
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: -40px;
-    position: relative;
-    z-index: 0;
-}
-
-.serviceDecorLine {
-    width: 80px;
-    height: 3px;
-    background: linear-gradient(to right, #d3cab3, transparent);
-    margin-bottom: 30px;
-    position: relative;
-    z-index: 1;
-}
-
-.serviceTitle {
-    font-family: var(--font-playfair);
-    font-size: 36px;
-    color: #2d2d2d;
-    font-weight: 700;
-    margin-bottom: 25px;
-    letter-spacing: 1px;
-    position: relative;
-    z-index: 1;
-}
-
-.serviceDescription {
-    font-size: 18px;
-    color: #666;
-    line-height: 1.8;
-    font-family: var(--font-lato);
-    position: relative;
-    z-index: 1;
-}
-
-@media (max-width: 991px) {
-    .serviceItem {
-        grid-template-columns: 1fr;
-        gap: 40px;
-        margin-bottom: 80px;
-    }
-
-    .serviceItemReverse {
-        direction: ltr;
-    }
-
-    .serviceImageContainer {
-        height: 400px;
-    }
-
-    .serviceNumber {
-        font-size: 90px;
-        margin-bottom: -30px;
-    }
-
-    .serviceTitle {
-        font-size: 30px;
-    }
-
-    .serviceDescription {
-        font-size: 16px;
-    }
-}
-
-@media (max-width: 767px) {
-    .servicesSection {
-        padding: 80px 15px;
-    }
-
-    .serviceItem {
-        margin-bottom: 60px;
-        gap: 30px;
-    }
-
-    .serviceImageContainer {
-        height: 350px;
-    }
-
-    .serviceContent {
-        padding: 20px 0;
-    }
-
-    .serviceNumber {
-        font-size: 70px;
-        margin-bottom: -20px;
-    }
-
-    .serviceTitle {
-        font-size: 24px;
-    }
-
-    .serviceDescription {
-        font-size: 15px;
-    }
-
-    .serviceDecorLine {
-        width: 60px;
-        margin-bottom: 20px;
-    }
-}
-
-@media (max-width: 480px) {
-    .serviceImageContainer {
-        height: 280px;
-    }
-
-    .serviceNumber {
-        font-size: 60px;
-    }
-
-    .serviceTitle {
-        font-size: 22px;
-    }
-}
-
 /* ============================================
    ABOUT SECTION
    ============================================ */
@@ -1087,67 +990,8 @@
     padding: 40px;
 }
 
-.aboutLabel {
-    display: block;
-    font-size: 14px;
-    color: #5d4037;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    margin-bottom: 20px;
-    font-weight: 600;
-    font-family: var(--font-lato);
-}
-
-.aboutTitle {
-    font-family: var(--font-playfair);
-    font-size: 48px;
-    color: #2d2d2d;
-    font-weight: 700;
-    line-height: 1.3;
-    margin-bottom: 25px;
-    text-transform: capitalize;
-}
-
-.aboutDescription {
-    font-size: 16px;
-    color: #666;
-    line-height: 1.8;
-    margin-bottom: 40px;
-    font-family: var(--font-lato);
-}
-
 .aboutSpecials {
-    margin-bottom: 40px;
+    margin-top: 30px;
-    margin-top: 20px;
-}
-
-.lastButton {
-    display: inline-block;
-    padding: 15px 40px;
-    border: 2px solid #b07c4b;
-    color: var(--color-paragraph);
-    font-family: var(--font-lato);
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    background: transparent;
-    letter-spacing: 1px;
-    margin-top: 1rem;
-}
-
-.lastButton:hover {
-    background-color: #c49c5c;
-    color: #000;
-}
-
-.aboutSpecialsTitle {
-    font-family: var(--font-playfair);
-    font-size: 24px;
-    color: #2d2d2d;
-    font-weight: 600;
-    margin-bottom: 20px;
-    font-style: italic;
 }
 
 .aboutSpecialsList {
@@ -1160,58 +1004,39 @@
     display: flex;
     align-items: flex-start;
     gap: 15px;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
-    font-family: var(--font-lato);
+    font-size: var(--body-size);
     color: var(--color-paragraph);
+    font-family: var(--font-lato);
     line-height: 1.6;
 }
 
 .aboutSpecialsIcon {
-    color: #5d4037;
+    color: var(--color-button);
     font-weight: bold;
-    font-size: 18px;
+    font-size: 20px;
     flex-shrink: 0;
 }
 
-.aboutButton {
+.lastButton {
-    display: inline-flex;
+    display: inline-block;
-    align-items: center;
+    margin-top: 30px;
-    gap: 15px;
+    padding: 15px 40px;
-    padding: 18px 40px;
+    background-color: var(--color-button);
-    background-color: #5d4037;
     color: #fff;
-    border: none;
+    text-decoration: none;
-    font-size: 14px;
+    font-family: var(--font-lato);
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
+    letter-spacing: 1px;
-    cursor: pointer;
-    transition: all 0.4s ease;
-    font-family: var(--font-lato);
-}
-
-.aboutButton:hover {
-    background-color: #ff5722;
-    transform: translateY(-3px);
-    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
-}
-
-.aboutButtonIcon {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
     transition: all 0.3s ease;
+    border-radius: 4px;
 }
 
-.aboutButton:hover .aboutButtonIcon {
+.lastButton:hover {
-    background-color: #fff;
+    background-color: #5d4037;
-    color: #5d4037;
+    transform: translateY(-2px);
-    transform: rotate(90deg);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 @media (max-width: 991px) {
@@ -1224,10 +1049,6 @@
         height: 500px;
     }
 
-    .aboutTitle {
-        font-size: 40px;
-    }
-
     .aboutContent {
         padding: 20px 0;
     }
@@ -1247,17 +1068,8 @@
         gap: 15px;
     }
 
-    .aboutTitle {
+    .aboutSpecialsItem {
-        font-size: 32px;
+        font-size: 15px;
-    }
-
-    .aboutSpecialsTitle {
-        font-size: 20px;
-    }
-
-    .aboutButton {
-        padding: 15px 30px;
-        font-size: 12px;
     }
 }
 
@@ -1267,20 +1079,8 @@
         gap: 10px;
     }
 
-    .aboutTitle {
-        font-size: 28px;
-    }
-
-    .aboutSpecialsTitle {
-        font-size: 18px;
-    }
-
-    .aboutDescription {
-        font-size: 15px;
-    }
-
     .aboutSpecialsItem {
         font-size: 14px;
-        gap: 10px;
+        margin-bottom: 15px;
     }
 }

src/app/globals.css

@@ -97,6 +97,12 @@ h2 {
   }
 }
 
+@media (max-width: 320px) {
+  h2 {
+    font-size: 26px !important;
+  }
+}
+
 /* Global Border Utility */
 .border-standard {
   border-color: var(--color-border);