From c0fd0439b7d870f74e1496930ef8cb36d4002fef Mon Sep 17 00:00:00 2001 From: akash Date: Sat, 29 Nov 2025 19:08:44 +0530 Subject: [PATCH] catering page new slider section updated --- src/app/catering/CateringContent.tsx | 106 +++++- src/app/catering/catering.module.css | 550 +++++++++------------------ src/app/globals.css | 6 + 3 files changed, 266 insertions(+), 396 deletions(-) diff --git a/src/app/catering/CateringContent.tsx b/src/app/catering/CateringContent.tsx index 012d335..5698019 100644 --- a/src/app/catering/CateringContent.tsx +++ b/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 */} -
-
- Gourmet dish +
+
+ {sliderImages.map((image, index) => ( +
+ {`Slide +
+ ))}
-
- Delicious burger + + {/* Navigation Arrows */} + + + + {/* Slide Indicators */} +
+ {sliderImages.map((_, index) => ( +
@@ -208,13 +272,13 @@ export default function CateringContent() { Antalya Cutlery Icon

A Visual Journey Through

-
+ {/*
-
+
*/}

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.

@@ -385,7 +449,7 @@ export default function CateringContent() {
- + View Our Menu @@ -395,4 +459,4 @@ export default function CateringContent() {