catering structure updated
This commit is contained in:
akash
parent
af48ab02f3
commit
84fd25212c
BIN
public/images/home/bottom.webp
Normal file
BIN
public/images/home/bottom.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 34 KiB |
BIN
public/images/home/top.webp
Normal file
BIN
public/images/home/top.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -1,5 +1,6 @@
|
|||||||
import Hero from "@/components/Hero/Hero";
|
import Hero from "@/components/Hero/Hero";
|
||||||
import PopularDishes from "@/components/PopularDishes/PopularDishes";
|
import PopularDishes from "@/components/PopularDishes/PopularDishes";
|
||||||
|
import Catering from "@/components/Catering/Catering";
|
||||||
import About from "@/components/About/About";
|
import About from "@/components/About/About";
|
||||||
import Categories from "@/components/Categories/Categories";
|
import Categories from "@/components/Categories/Categories";
|
||||||
import Menu from "@/components/Menu/Menu";
|
import Menu from "@/components/Menu/Menu";
|
||||||
@ -22,7 +23,7 @@ export default function Home() {
|
|||||||
<Hero />
|
<Hero />
|
||||||
<PopularDishes />
|
<PopularDishes />
|
||||||
<About />
|
<About />
|
||||||
<Categories/>
|
<Catering />
|
||||||
<Menu />
|
<Menu />
|
||||||
<Gallery />
|
<Gallery />
|
||||||
<Testimonials />
|
<Testimonials />
|
||||||
|
|||||||
442
src/components/Catering/Catering.module.css
Normal file
442
src/components/Catering/Catering.module.css
Normal file
@ -0,0 +1,442 @@
|
|||||||
|
.cateringSection {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #000000;
|
||||||
|
background-image: url(/images/about-us/guest-bg.webp);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 100px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #f5e6d3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: var(--font-playfair);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--color-paragraph);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
/* text-transform: uppercase; */
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 60px;
|
||||||
|
padding: 0 20px;
|
||||||
|
align-items: center;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= LEFT SIDE (IMAGES) ================= */
|
||||||
|
.leftSide {
|
||||||
|
position: relative;
|
||||||
|
height: 550px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Decorative L-Shape Frame (Yellow/Gold) */
|
||||||
|
.decorativeFrame {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-left: 15px solid #c49c5c;
|
||||||
|
border-bottom: 15px solid #c49c5c;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1. Top Left Image */
|
||||||
|
.topLeftImage {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 55%;
|
||||||
|
height: 58%;
|
||||||
|
/* Increased slightly for better coverage */
|
||||||
|
z-index: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. Bottom Right Image */
|
||||||
|
.bottomRightImage {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
z-index: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
/* narrower 'cut' gap as requested */
|
||||||
|
border-top: 10px solid #c49c5c;
|
||||||
|
border-left: 10px solid #c49c5c;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. Floating Call Widget (Top Right) */
|
||||||
|
.callWidgetLeft {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: 0;
|
||||||
|
/* slightly off-grid right alignment if desired, or keep flush */
|
||||||
|
background-color: #1a1a1af2;
|
||||||
|
padding: 20px 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
z-index: 10;
|
||||||
|
text-decoration: none;
|
||||||
|
max-width: 320px;
|
||||||
|
border-left: 5px solid #c49c5c;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callIconCircleLeft {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: var(--color-gold);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callIconLeft {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callInfoLeft {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callLabelLeft {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #f5e6d3;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callNumberLeft {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--color-gold);
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= RIGHT SIDE (CONTENT) ================= */
|
||||||
|
.rightSide {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: var(--color-paragraph);
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
color: var(--color-gold);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitleIcon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainHeading {
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlightText {
|
||||||
|
color: var(--color-gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #f5e6d3;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Middle Row: Features + Quote Box split */
|
||||||
|
.middleContentRow {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.1fr 1fr;
|
||||||
|
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Features List */
|
||||||
|
.featuresColumn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureItem {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIconCircle {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid #c49c5c;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #c49c5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIcon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureContent h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f5e6d3;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureContent p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quote/Info Box */
|
||||||
|
.quoteBoxWrapper {
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
/* Light translucent box */
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 20px 0 20px 0;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 200px;
|
||||||
|
/* Fixed height to prevent jumping */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteBox {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteText {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ddd;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-style: italic;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteIcon {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
right: 0;
|
||||||
|
font-size: 60px;
|
||||||
|
color: rgba(196, 156, 92, 0.2);
|
||||||
|
/* Faded gold #c49c5c */
|
||||||
|
font-family: serif;
|
||||||
|
line-height: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dots */
|
||||||
|
.sliderdots {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: auto;
|
||||||
|
z-index: 3;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: #555;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeDot {
|
||||||
|
background-color: #c49c5c;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bottom Action Row */
|
||||||
|
.actionRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
/* border-top: 1px solid rgba(255, 255, 255, 0.1); */
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discoverBtn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 15px 40px;
|
||||||
|
border: 2px solid #b07c4b;
|
||||||
|
color: #f5e6d3;
|
||||||
|
font-family: var(--font-playfair);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discoverBtn:hover {
|
||||||
|
background-color: #c49c5c;
|
||||||
|
color: #F5E6D3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Call Group removed from Right Side as it's on the Left now */
|
||||||
|
.callGroup {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 992px) {
|
||||||
|
|
||||||
|
.middleContentRow {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr;
|
||||||
|
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftSide {
|
||||||
|
height: auto;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middleContentRow {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.leftSide {
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topLeftImage {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
margin-bottom: -50px;
|
||||||
|
/* Overlap */
|
||||||
|
z-index: 1;
|
||||||
|
left: auto;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomRightImage {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
height: 250px;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 10%;
|
||||||
|
right: auto;
|
||||||
|
bottom: auto;
|
||||||
|
border-top: 10px solid #000000;
|
||||||
|
border-left: 10px solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callWidgetLeft {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
max-width: 250px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callNumberLeft {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decorativeFrame {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainHeading {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionRow {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
201
src/components/Catering/Catering.tsx
Normal file
201
src/components/Catering/Catering.tsx
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import styles from './Catering.module.css'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
const AwardIcon = () => (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 15C15.866 15 19 11.866 19 8V3H5V8C5 11.866 8.13401 15 12 15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M8.21 13.89L7 23L12 20L17 23L15.79 13.88" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const EventsIcon = () => (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 2V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M16 2V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M3 9H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H19C20.1046 6 21 6.89543 21 8Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const CateringIcon = () => (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 21V22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M3 13C3 13 3 8 12 8C21 8 21 13 21 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M12 5V8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M3 13H21L22 16H2L3 13Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const VenueIcon = () => (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const PhoneIcon = () => (
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22 16.92V19.92C22.0011 20.1986 21.9441 20.4742 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.4019C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.92C16.7428 21.5857 13.787 20.5342 11.19 18.85C8.77382 17.2436 6.72159 15.1913 5.115 12.775C3.4296 10.1764 2.37871 7.21876 2.045 4.14C2.01977 3.86249 2.0531 3.5828 2.14242 3.31885C2.23175 3.0549 2.37513 2.81263 2.56353 2.60733C2.75193 2.40203 2.98114 2.23838 3.23645 2.12674C3.49175 2.01511 3.76747 1.958 4.046 1.96H7.046C7.54518 1.95662 8.02636 2.14092 8.39706 2.47761C8.76776 2.81431 8.99905 3.27599 9.046 3.775C9.13327 4.73516 9.3101 5.68165 9.57 6.6C9.67389 6.96342 9.65431 7.35246 9.51368 7.70311C9.37305 8.05377 9.11979 8.34493 8.796 8.528L7.526 9.798C8.94838 12.2988 11.0022 14.3526 13.503 15.775L14.773 14.505C14.9561 14.1812 15.2472 13.928 15.5979 13.7873C15.9486 13.6467 16.3376 13.6271 16.701 13.731C17.6193 13.9909 18.5658 14.1677 19.526 14.255C20.0266 14.3023 20.4897 14.535 20.8267 14.9079C21.1637 15.2808 21.3472 15.7636 21.342 16.264V16.92Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: "It is a long established fact that our catering will distract you with delicious content of a page when looking at its layout."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: "The authentic flavors transported us straight to Turkey. An unforgettable culinary experience for our wedding guests."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: "Professional service and exquisite presentation. Antalya Catering made our corporate event truly spectacular."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Catering() {
|
||||||
|
const [activeQuote, setActiveQuote] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setActiveQuote((prev) => (prev + 1) % testimonials.length)
|
||||||
|
}, 4000)
|
||||||
|
return () => clearInterval(timer)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={styles.cateringSection}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
{/* Left Side: Collage */}
|
||||||
|
<div className={styles.leftSide}>
|
||||||
|
{/* Decorative Frame */}
|
||||||
|
<div className={styles.decorativeFrame}></div>
|
||||||
|
|
||||||
|
{/* 1. Top Left Image */}
|
||||||
|
<div className={styles.topLeftImage}>
|
||||||
|
<Image
|
||||||
|
src="/images/home/top.webp"
|
||||||
|
alt="Catering Team"
|
||||||
|
fill
|
||||||
|
className={styles.image}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2. Bottom Right Image */}
|
||||||
|
<div className={styles.bottomRightImage}>
|
||||||
|
<Image
|
||||||
|
src="/images/home/bottom.webp"
|
||||||
|
alt="Chef Working"
|
||||||
|
fill
|
||||||
|
className={styles.image}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3. Floating Call Widget (Clickable) */}
|
||||||
|
<a href="tel:+15195882037" className={styles.callWidgetLeft}>
|
||||||
|
<div className={styles.callIconCircleLeft}>
|
||||||
|
<PhoneIcon />
|
||||||
|
</div>
|
||||||
|
<div className={styles.callInfoLeft}>
|
||||||
|
<span className={styles.callLabelLeft}>Call Us anytime</span>
|
||||||
|
<span className={styles.callNumberLeft}>+1 519 588 2037</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Side: Content */}
|
||||||
|
<div className={styles.rightSide}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="Home Gallery Decorative Dinner Icon" width={24} height={24} />
|
||||||
|
<span>CATERING & EVENTS</span>
|
||||||
|
<Image src="/images/eat.png" alt="Home Gallery Decorative Cutlery Icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
|
<h2 className={styles.title}>Turkish Catering Excellence
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className={styles.description}>
|
||||||
|
Experience authentic Turkish cuisine at your next event. From intimate gatherings to grand celebrations, we provide exceptional service and unforgettable flavors that will delight your guests.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Middle Row: Features + Quote Box */}
|
||||||
|
<div className={styles.middleContentRow}>
|
||||||
|
{/* Features Column */}
|
||||||
|
<div className={styles.featuresColumn}>
|
||||||
|
<div className={styles.featureItem}>
|
||||||
|
<div className={styles.featureIconCircle}>
|
||||||
|
<div className={styles.featureIcon}><EventsIcon /></div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureContent}>
|
||||||
|
<h4>Events & Celebrations</h4>
|
||||||
|
{/* <p>Tailored menus for every occasion.</p> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureItem}>
|
||||||
|
<div className={styles.featureIconCircle}>
|
||||||
|
<div className={styles.featureIcon}><CateringIcon /></div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureContent}>
|
||||||
|
<h4>Food & Beverage Catering</h4>
|
||||||
|
{/* <p>Traditional charcoal-grilled dishes.</p> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureItem}>
|
||||||
|
<div className={styles.featureIconCircle}>
|
||||||
|
<div className={styles.featureIcon}><VenueIcon /></div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureContent}>
|
||||||
|
<h4>Venue & Service Options</h4>
|
||||||
|
{/* <p>Traditional charcoal-grilled dishes.</p> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quote Box Slider */}
|
||||||
|
<div className={styles.quoteBoxWrapper}>
|
||||||
|
<AnimatePresence mode='wait'>
|
||||||
|
<motion.div
|
||||||
|
key={activeQuote}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.quoteBox}
|
||||||
|
>
|
||||||
|
<p className={styles.quoteText}>
|
||||||
|
"{testimonials[activeQuote].text}"
|
||||||
|
</p>
|
||||||
|
<span className={styles.quoteIcon}>,,</span>
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
{/* Optional Dots/Indicators can be added here if needed, but user just asked for sliding */}
|
||||||
|
<div className={styles.sliderdots}>
|
||||||
|
{testimonials.map((_, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className={`${styles.dot} ${index === activeQuote ? styles.activeDot : ''}`}
|
||||||
|
onClick={() => setActiveQuote(index)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Action Row */}
|
||||||
|
<div className={styles.actionRow}>
|
||||||
|
<Link href="/catering-services-ontario" className={styles.discoverBtn}>
|
||||||
|
Discover More →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user