diff --git a/public/images/home/bottom.webp b/public/images/home/bottom.webp new file mode 100644 index 0000000..fd9bbde Binary files /dev/null and b/public/images/home/bottom.webp differ diff --git a/public/images/home/home-banner-1-authentic.webp b/public/images/home/home-banner-1-authentic.webp index 3681417..6ab8361 100644 Binary files a/public/images/home/home-banner-1-authentic.webp and b/public/images/home/home-banner-1-authentic.webp differ diff --git a/public/images/home/top.webp b/public/images/home/top.webp new file mode 100644 index 0000000..b0b3ee8 Binary files /dev/null and b/public/images/home/top.webp differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 4bfab9e..a883d01 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,6 @@ import Hero from "@/components/Hero/Hero"; import PopularDishes from "@/components/PopularDishes/PopularDishes"; +import Catering from "@/components/Catering/Catering"; import About from "@/components/About/About"; import Categories from "@/components/Categories/Categories"; import Menu from "@/components/Menu/Menu"; @@ -22,7 +23,7 @@ export default function Home() { - + diff --git a/src/components/Catering/Catering.module.css b/src/components/Catering/Catering.module.css new file mode 100644 index 0000000..366814b --- /dev/null +++ b/src/components/Catering/Catering.module.css @@ -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; + } +} \ No newline at end of file diff --git a/src/components/Catering/Catering.tsx b/src/components/Catering/Catering.tsx new file mode 100644 index 0000000..522b66c --- /dev/null +++ b/src/components/Catering/Catering.tsx @@ -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 = () => ( + + + + +) + +const EventsIcon = () => ( + + + + + + +) + +const CateringIcon = () => ( + + + + + + +) + +const VenueIcon = () => ( + + + + +) + +const PhoneIcon = () => ( + + + +) + +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 ( +
+
+ {/* Left Side: Collage */} +
+ {/* Decorative Frame */} +
+ + {/* 1. Top Left Image */} +
+ Catering Team +
+ + {/* 2. Bottom Right Image */} +
+ Chef Working +
+ + {/* 3. Floating Call Widget (Clickable) */} + +
+ +
+
+ Call Us anytime + +1 519 588 2037 +
+ +
+ + {/* Right Side: Content */} +
+
+ Home Gallery Decorative Dinner Icon + CATERING & EVENTS + Home Gallery Decorative Cutlery Icon +
+

Turkish Catering Excellence +

+ +

+ 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. +

+ + {/* Middle Row: Features + Quote Box */} +
+ {/* Features Column */} +
+
+
+
+
+
+

Events & Celebrations

+ {/*

Tailored menus for every occasion.

*/} +
+
+
+
+
+
+
+

Food & Beverage Catering

+ {/*

Traditional charcoal-grilled dishes.

*/} +
+
+
+
+
+
+
+

Venue & Service Options

+ {/*

Traditional charcoal-grilled dishes.

*/} +
+
+
+ + {/* Quote Box Slider */} +
+ + +

+ "{testimonials[activeQuote].text}" +

+ ,, + + + {/* Optional Dots/Indicators can be added here if needed, but user just asked for sliding */} +
+ {testimonials.map((_, index) => ( + setActiveQuote(index)} + /> + ))} +
+
+
+ + {/* Bottom Action Row */} +
+ + Discover More → + +
+
+
+
+ ) +}