MetatroncubeSoftwareSolutions/Antalya-Restaurant
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new menu page structure updated , all page meta tag layout updated & all menu list are updated

Browse Source
This commit is contained in:
akash 2025-11-28 18:45:52 +05:30
parent 6356e07fa0
commit 268de203eb
33 changed files with 2104 additions and 1698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/robots.txt
View File

@ -3,4 +3,4 @@ User-agent: *
Disallow: Disallow:
# Sitemap # Sitemap
Sitemap: http://localhost:3000/sitemap.xml Sitemap: https://antalya.metatronnest.com/sitemap.xml

2
scripts/generate-sitemap.cjs
View File

@ -3,7 +3,7 @@ const path = require("path");
const { SitemapStream, streamToPromise } = require("sitemap"); const { SitemapStream, streamToPromise } = require("sitemap");
const { pathToFileURL } = require("url"); const { pathToFileURL } = require("url");
const hostname = "http://localhost:3000"; // localhost for development const hostname = "https://antalya.metatronnest.com"; // localhost for development
const addTrailingSlash = true; // ✅ Set this true if your Next.js uses trailingSlash: true const addTrailingSlash = true; // ✅ Set this true if your Next.js uses trailingSlash: true
// Utility to format URLs based on config // Utility to format URLs based on config

12
scripts/image_alt_issues.csv
View File

@ -1,10 +1,20 @@
Page URL,Image Src,Alt Text,Issue Type Page URL,Image Src,Alt Text,Issue Type
"http://localhost:3000/","","Antalya Restaurant","Duplicate Alt (2 times)" "http://localhost:3000/","","Antalya Restaurant","Duplicate Alt (2 times)"
"http://localhost:3000/about/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/","","Antalya Dinner Icon","Duplicate Alt (6 times)"
"http://localhost:3000/","","Antalya Cutlery Icon","Duplicate Alt (6 times)"
"http://localhost:3000/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/menu/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/menu/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/menu/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/gallery/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/gallery/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/gallery/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/contact/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/contact/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/contact/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/blog/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/blog/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/blog/","","icon","Duplicate Alt (2 times)"
"http://localhost:3000/blog/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/blog/the-art-of-turkish-tea/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/blog/the-art-of-turkish-tea/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/blog/the-art-of-turkish-tea/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/blog/secrets-of-charcoal-grilling/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/blog/secrets-of-charcoal-grilling/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/blog/secrets-of-charcoal-grilling/","","Phone","Duplicate Alt (2 times)"
"http://localhost:3000/blog/a-taste-of-sweet-legacy/","","Antalya Restaurant","Duplicate Alt (3 times)" "http://localhost:3000/blog/a-taste-of-sweet-legacy/","","Antalya Restaurant","Duplicate Alt (3 times)"
"http://localhost:3000/blog/a-taste-of-sweet-legacy/","","Phone","Duplicate Alt (2 times)"

1 Page URL Image Src Alt Text Issue Type
2 http://localhost:3000/ Antalya Restaurant Duplicate Alt (2 times)
3 http://localhost:3000/about/ http://localhost:3000/ Antalya Restaurant Antalya Dinner Icon Duplicate Alt (3 times) Duplicate Alt (6 times)
4 http://localhost:3000/ Antalya Cutlery Icon Duplicate Alt (6 times)
5 http://localhost:3000/ Phone Duplicate Alt (2 times)
6 http://localhost:3000/menu/ Antalya Restaurant Duplicate Alt (3 times)
7 http://localhost:3000/menu/ Phone Duplicate Alt (2 times)
8 http://localhost:3000/gallery/ Antalya Restaurant Duplicate Alt (3 times)
9 http://localhost:3000/gallery/ Phone Duplicate Alt (2 times)
10 http://localhost:3000/contact/ Antalya Restaurant Duplicate Alt (3 times)
11 http://localhost:3000/contact/ Phone Duplicate Alt (2 times)
12 http://localhost:3000/blog/ Antalya Restaurant Duplicate Alt (3 times)
13 http://localhost:3000/blog/ icon Duplicate Alt (2 times)
14 http://localhost:3000/blog/ Phone Duplicate Alt (2 times)
15 http://localhost:3000/blog/the-art-of-turkish-tea/ Antalya Restaurant Duplicate Alt (3 times)
16 http://localhost:3000/blog/the-art-of-turkish-tea/ Phone Duplicate Alt (2 times)
17 http://localhost:3000/blog/secrets-of-charcoal-grilling/ Antalya Restaurant Duplicate Alt (3 times)
18 http://localhost:3000/blog/secrets-of-charcoal-grilling/ Phone Duplicate Alt (2 times)
19 http://localhost:3000/blog/a-taste-of-sweet-legacy/ Antalya Restaurant Duplicate Alt (3 times)
20 http://localhost:3000/blog/a-taste-of-sweet-legacy/ Phone Duplicate Alt (2 times)

2
scripts/seo-test-selenium.cjs
View File

@ -222,7 +222,7 @@ async function checkSEO(url, siteDomain) {
// ========================== // ==========================
(async () => { (async () => {
const sitemapUrl = "http://localhost:3000/sitemap.xml"; const sitemapUrl = "http://localhost:3000/sitemap.xml";
const siteDomain = "http://localhost:3000"; const siteDomain = "https://antalya.metatronnest.com";
console.log("📄 Fetching URLs from sitemap..."); console.log("📄 Fetching URLs from sitemap...");
const urls = await getUrlsFromSitemap(sitemapUrl); const urls = await getUrlsFromSitemap(sitemapUrl);

382
src/app/about-us/AboutContent.tsx Normal file
View File

@ -0,0 +1,382 @@
'use client'
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";
import FAQ from "@/components/FAQ/FAQ";
import Image from "next/image";
import Link from "next/link";
import styles from "./about.module.css";
import { featuresData, testimonialData, ctaData, aboutFaqData } from "@/utils/constant";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
export default function AboutContent() {
const [currentTestimonial, setCurrentTestimonial] = useState(0);
// Animation variants
const fadeInUp = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6
}
}
};
const fadeIn = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { duration: 0.8 }
}
};
const slideInLeft = {
hidden: { opacity: 0, x: -50 },
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.7
}
}
};
const slideInRight = {
hidden: { opacity: 0, x: 50 },
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.7
}
}
};
const staggerContainer = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.2,
delayChildren: 0.1
}
}
};
// Auto-slide testimonials
useEffect(() => {
const interval = setInterval(() => {
setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
}, 5000); // Change every 5 seconds
return () => clearInterval(interval);
}, []);
const nextTestimonial = () => {
setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
};
const prevTestimonial = () => {
setCurrentTestimonial((prev) => (prev - 1 + testimonialData.length) % testimonialData.length);
};
return (
<main className={styles.main}>
<Navbar />
{/* Hero Banner */}
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={fadeIn}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>About Us</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / About
</p>
</div>
</motion.section>
{/* About Section - No boxed structure */}
<section className={styles.section}>
<motion.div
className={styles.container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
<motion.div className={styles.textBlock} variants={slideInLeft}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.sectionTitle}>Our Story</h2>
<p className={styles.text}>
Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
What started as a small family-run kitchen has grown into a beloved dining destination, known for its warm hospitality and traditional recipes passed down through generations.
</p>
<p className={styles.text}>
Every dish we serve tells a story of tradition, passion, and dedication to the culinary arts. Our chefs use time-honored techniques combined with the freshest ingredients to create an unforgettable dining experience.
</p>
<Link href="/menu" className={styles.menuButton}>
View Our Menu
</Link>
</motion.div>
<motion.div className={styles.imageBlock} variants={slideInRight}>
<Image src="/images/restaurant-interior.png" alt="Our Story" width={500} height={350} className={styles.image} />
</motion.div>
</motion.div>
</section>
{/* Features Section - With real images */}
<section className={`${styles.section} ${styles.featuresSection}`}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<motion.h2
className={styles.sectionTitleCenter}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
>
What Makes Us Special
</motion.h2>
<motion.div
className={styles.featuresGrid}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
{featuresData.map((feature) => (
<motion.div
key={feature.id}
className={styles.featureCard}
variants={fadeInUp}
whileHover={{ y: -5, transition: { duration: 0.3 } }}
>
<div className={styles.featureImageWrapper}>
<Image src={feature.image} alt={feature.title} fill className={styles.featureImage} />
</div>
<h3 className={styles.featureTitle}>{feature.title}</h3>
<p className={styles.featureDesc}>{feature.description}</p>
</motion.div>
))}
</motion.div>
</section>
{/* Why Choose Us Section */}
<section className={styles.section}>
<motion.div
className={styles.container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
<motion.div className={styles.imageBlock} variants={slideInLeft}>
<Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
</motion.div>
<motion.div className={styles.textBlock} variants={slideInRight}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.sectionTitle}>Why Choose Us</h2>
<p className={styles.text}>
At Antalya Restaurant, we don't just serve food – we create experiences. Our commitment to authenticity means every spice, every ingredient, and every cooking method stays true to Turkish culinary traditions.
</p>
<p className={styles.text}>
From our charcoal-grilled kebabs to our handmade baklava, we take pride in delivering dishes that transport you straight to the streets of Istanbul and the coasts of Antalya.
</p>
</motion.div>
</motion.div>
</section>
{/* Testimonials Section - Auto Slider */}
<section className={`${styles.section} ${styles.testimonialsSection}`}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<motion.h2
className={styles.sectionTitleCenter}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
>
What Our Guests Say
</motion.h2>
<motion.div
className={styles.testimonialSlider}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeIn}
>
<button className={styles.sliderBtn} onClick={prevTestimonial}>‹</button>
<AnimatePresence mode="wait">
<motion.div
key={currentTestimonial}
className={styles.testimonialCard}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
transition={{ duration: 0.5 }}
>
<p className={styles.testimonialText}>"{testimonialData[currentTestimonial].text}"</p>
<div className={styles.testimonialAuthor}>
<div className={styles.authorImageWrapper}>
<Image
src={testimonialData[currentTestimonial].image}
alt={testimonialData[currentTestimonial].name}
fill
className={styles.authorImage}
/>
</div>
<div className={styles.authorInfo}>
<p className={styles.authorName}>{testimonialData[currentTestimonial].name}</p>
<p className={styles.authorRole}>{testimonialData[currentTestimonial].role}</p>
</div>
</div>
</motion.div>
</AnimatePresence>
<button className={styles.sliderBtn} onClick={nextTestimonial}>›</button>
</motion.div>
{/* Slider dots */}
<div className={styles.sliderDots}>
{testimonialData.map((_, index) => (
<button
key={index}
className={`${styles.dot} ${index === currentTestimonial ? styles.activeDot : ''}`}
onClick={() => setCurrentTestimonial(index)}
/>
))}
</div>
</section>
{/* FAQ Section - Image Left, FAQ Right */}
<section className={styles.faqSection}>
<motion.div
className={styles.faqContainer}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
<motion.div className={styles.faqImageBlock} variants={slideInLeft}>
<Image
src="/images/restaurant-interior.png"
alt="Frequently Asked Questions"
width={600}
height={700}
className={styles.faqImage}
/>
</motion.div>
<motion.div className={styles.faqContentBlock} variants={slideInRight}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
<p className={styles.faqSubtitle}>
Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
</p>
<div className={styles.faqAccordion}>
{aboutFaqData.map((faq, index) => (
<FaqItem key={index} question={faq.q} answer={faq.a} />
))}
</div>
</motion.div>
</motion.div>
</section>
{/* Call to Action */}
<motion.section
className={styles.ctaSection}
style={{ backgroundImage: `url(${ctaData.backgroundImage})` }}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeIn}
>
<div className={styles.ctaOverlay}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<motion.h2
className={styles.ctaTitle}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
>
{ctaData.title}
</motion.h2>
<motion.p
className={styles.ctaSubtitle}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
>
{ctaData.subtitle}
</motion.p>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.6 }}
>
<Link href={ctaData.buttonLink} className={styles.ctaButton}>
{ctaData.buttonText}
</Link>
</motion.div>
</div>
</motion.section>
<Footer />
</main>
);
}
// FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className={styles.faqItem}>
<button
className={`${styles.faqQuestion} ${isOpen ? styles.faqQuestionActive : ''}`}
onClick={() => setIsOpen(!isOpen)}
>
<span>{question}</span>
<span className={styles.faqIcon}>{isOpen ? '−' : '+'}</span>
</button>
{isOpen && (
<div className={styles.faqAnswer}>
<p>{answer}</p>
</div>
)}
</div>
);
}

4
src/app/about-us/about.module.css
View File

@ -5,7 +5,7 @@
} }
.hero { .hero {
padding: 10rem 2rem; padding: 200px 0px;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png'); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -22,7 +22,7 @@
.heroTitle { .heroTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: 4rem; font-size: 4rem;
color: var(--color-gold); color: #F5E6D3;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;

385
src/app/about-us/page.tsx
View File

@ -1,382 +1,11 @@
'use client' import { Metadata } from "next";
import AboutContent from "./AboutContent";
import Navbar from "@/components/Navbar/Navbar"; export const metadata: Metadata = {
import Footer from "@/components/Footer/Footer"; title: "About Us | Antalya Restaurant",
import FAQ from "@/components/FAQ/FAQ"; description: "Learn about the rich history and culinary traditions of Antalya Restaurant. Meet our chefs and discover our passion for authentic Turkish food.",
import Image from "next/image"; };
import Link from "next/link";
import styles from "./about.module.css";
import { featuresData, testimonialData, ctaData, aboutFaqData } from "@/utils/constant";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
export default function AboutPage() { export default function AboutPage() {
const [currentTestimonial, setCurrentTestimonial] = useState(0); return <AboutContent />;
// Animation variants
const fadeInUp = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6
}
}
};
const fadeIn = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { duration: 0.8 }
}
};
const slideInLeft = {
hidden: { opacity: 0, x: -50 },
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.7
}
}
};
const slideInRight = {
hidden: { opacity: 0, x: 50 },
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.7
}
}
};
const staggerContainer = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.2,
delayChildren: 0.1
}
}
};
// Auto-slide testimonials
useEffect(() => {
const interval = setInterval(() => {
setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
}, 5000); // Change every 5 seconds
return () => clearInterval(interval);
}, []);
const nextTestimonial = () => {
setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
};
const prevTestimonial = () => {
setCurrentTestimonial((prev) => (prev - 1 + testimonialData.length) % testimonialData.length);
};
return (
<main className={styles.main}>
<Navbar />
{/* Hero Banner */}
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={fadeIn}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>About Us</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / About
</p>
</div>
</motion.section>
{/* About Section - No boxed structure */}
<section className={styles.section}>
<motion.div
className={styles.container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
<motion.div className={styles.textBlock} variants={slideInLeft}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.sectionTitle}>Our Story</h2>
<p className={styles.text}>
Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
What started as a small family-run kitchen has grown into a beloved dining destination, known for its warm hospitality and traditional recipes passed down through generations.
</p>
<p className={styles.text}>
Every dish we serve tells a story of tradition, passion, and dedication to the culinary arts. Our chefs use time-honored techniques combined with the freshest ingredients to create an unforgettable dining experience.
</p>
<Link href="/menu" className={styles.menuButton}>
View Our Menu
</Link>
</motion.div>
<motion.div className={styles.imageBlock} variants={slideInRight}>
<Image src="/images/restaurant-interior.png" alt="Our Story" width={500} height={350} className={styles.image} />
</motion.div>
</motion.div>
</section>
{/* Features Section - With real images */}
<section className={`${styles.section} ${styles.featuresSection}`}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<motion.h2
className={styles.sectionTitleCenter}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
>
What Makes Us Special
</motion.h2>
<motion.div
className={styles.featuresGrid}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
{featuresData.map((feature) => (
<motion.div
key={feature.id}
className={styles.featureCard}
variants={fadeInUp}
whileHover={{ y: -5, transition: { duration: 0.3 } }}
>
<div className={styles.featureImageWrapper}>
<Image src={feature.image} alt={feature.title} fill className={styles.featureImage} />
</div>
<h3 className={styles.featureTitle}>{feature.title}</h3>
<p className={styles.featureDesc}>{feature.description}</p>
</motion.div>
))}
</motion.div>
</section>
{/* Why Choose Us Section */}
<section className={styles.section}>
<motion.div
className={styles.container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
<motion.div className={styles.imageBlock} variants={slideInLeft}>
<Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
</motion.div>
<motion.div className={styles.textBlock} variants={slideInRight}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.sectionTitle}>Why Choose Us</h2>
<p className={styles.text}>
At Antalya Restaurant, we don't just serve food – we create experiences. Our commitment to authenticity means every spice, every ingredient, and every cooking method stays true to Turkish culinary traditions.
</p>
<p className={styles.text}>
From our charcoal-grilled kebabs to our handmade baklava, we take pride in delivering dishes that transport you straight to the streets of Istanbul and the coasts of Antalya.
</p>
</motion.div>
</motion.div>
</section>
{/* Testimonials Section - Auto Slider */}
<section className={`${styles.section} ${styles.testimonialsSection}`}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<motion.h2
className={styles.sectionTitleCenter}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
>
What Our Guests Say
</motion.h2>
<motion.div
className={styles.testimonialSlider}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeIn}
>
<button className={styles.sliderBtn} onClick={prevTestimonial}>‹</button>
<AnimatePresence mode="wait">
<motion.div
key={currentTestimonial}
className={styles.testimonialCard}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
transition={{ duration: 0.5 }}
>
<p className={styles.testimonialText}>"{testimonialData[currentTestimonial].text}"</p>
<div className={styles.testimonialAuthor}>
<div className={styles.authorImageWrapper}>
<Image
src={testimonialData[currentTestimonial].image}
alt={testimonialData[currentTestimonial].name}
fill
className={styles.authorImage}
/>
</div>
<div className={styles.authorInfo}>
<p className={styles.authorName}>{testimonialData[currentTestimonial].name}</p>
<p className={styles.authorRole}>{testimonialData[currentTestimonial].role}</p>
</div>
</div>
</motion.div>
</AnimatePresence>
<button className={styles.sliderBtn} onClick={nextTestimonial}>›</button>
</motion.div>
{/* Slider dots */}
<div className={styles.sliderDots}>
{testimonialData.map((_, index) => (
<button
key={index}
className={`${styles.dot} ${index === currentTestimonial ? styles.activeDot : ''}`}
onClick={() => setCurrentTestimonial(index)}
/>
))}
</div>
</section>
{/* FAQ Section - Image Left, FAQ Right */}
<section className={styles.faqSection}>
<motion.div
className={styles.faqContainer}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
>
<motion.div className={styles.faqImageBlock} variants={slideInLeft}>
<Image
src="/images/restaurant-interior.png"
alt="Frequently Asked Questions"
width={600}
height={700}
className={styles.faqImage}
/>
</motion.div>
<motion.div className={styles.faqContentBlock} variants={slideInRight}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
<p className={styles.faqSubtitle}>
Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
</p>
<div className={styles.faqAccordion}>
{aboutFaqData.map((faq, index) => (
<FaqItem key={index} question={faq.q} answer={faq.a} />
))}
</div>
</motion.div>
</motion.div>
</section>
{/* Call to Action */}
<motion.section
className={styles.ctaSection}
style={{ backgroundImage: `url(${ctaData.backgroundImage})` }}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeIn}
>
<div className={styles.ctaOverlay}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<motion.h2
className={styles.ctaTitle}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
>
{ctaData.title}
</motion.h2>
<motion.p
className={styles.ctaSubtitle}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
>
{ctaData.subtitle}
</motion.p>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.6 }}
>
<Link href={ctaData.buttonLink} className={styles.ctaButton}>
{ctaData.buttonText}
</Link>
</motion.div>
</div>
</motion.section>
<Footer />
</main>
);
}
// FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className={styles.faqItem}>
<button
className={`${styles.faqQuestion} ${isOpen ? styles.faqQuestionActive : ''}`}
onClick={() => setIsOpen(!isOpen)}
>
<span>{question}</span>
<span className={styles.faqIcon}>{isOpen ? '−' : '+'}</span>
</button>
{isOpen && (
<div className={styles.faqAnswer}>
<p>{answer}</p>
</div>
)}
</div>
);
} }

122
src/app/blog/BlogContent.tsx Normal file
View File

@ -0,0 +1,122 @@
'use client'
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./blog.module.css";
import { blogData } from "@/utils/constant";
import { motion } from "framer-motion";
export default function BlogContent() {
// Animation variants
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
delayChildren: 0.2
}
}
};
const cardVariants = {
hidden: {
opacity: 0,
y: 30
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6
}
}
};
const heroVariants = {
hidden: { opacity: 0, y: -20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.8
}
}
};
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={heroVariants}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Our Blog</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Blog
</p>
</div>
</motion.section>
<section className={styles.sectionHeading}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
<p className={styles.description}>
Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
</p>
</section>
<section className={styles.blogSection}>
<motion.div
className={styles.grid}
initial="hidden"
animate="visible"
variants={containerVariants}
>
{blogData.map((blog) => (
<motion.div
key={blog.id}
className={styles.card}
variants={cardVariants}
whileHover={{
y: -8,
transition: { duration: 0.3 }
}}
>
<div className={styles.imageContainer}>
<Image
src={blog.image}
alt={blog.title}
fill
style={{ objectFit: 'cover' }}
/>
</div>
<div className={styles.cardContent}>
<h3 className={styles.blogTitle}>
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
</h3>
<p className={styles.date}>{blog.date}</p>
<p className={styles.excerpt}>{blog.excerpt}</p>
<Link href={`/blog/${blog.slug}`} className={styles.button}>
Read More
</Link>
</div>
</motion.div>
))}
</motion.div>
</section>
<Footer />
</main>
);
}

4
src/app/blog/[id]/blogDetail.module.css
View File

@ -5,7 +5,7 @@
} }
.hero { .hero {
padding: 10rem 2rem; padding: 200px 0px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
text-align: center; text-align: center;
@ -19,7 +19,7 @@
.heroTitle { .heroTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: 4rem; font-size: 4rem;
color: #c49c5c; color: #F5E6D3;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;

31
src/app/blog/[id]/page.tsx
View File

@ -5,6 +5,37 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import styles from "./blogDetail.module.css"; import styles from "./blogDetail.module.css";
import { blogData } from "@/utils/constant"; import { blogData } from "@/utils/constant";
import { Metadata } from "next";
// Generate metadata for each blog post
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
const { id } = await params;
const blog = blogData.find((b) => b.slug === id);
if (!blog) {
return {
title: "Blog Post Not Found | Antalya Restaurant",
description: "The requested blog post could not be found.",
};
}
return {
title: `${blog.title} | Antalya Restaurant`,
description: blog.excerpt,
openGraph: {
title: blog.title,
description: blog.excerpt,
images: [
{
url: blog.image,
width: 1200,
height: 630,
alt: blog.title,
},
],
},
};
}
// Generate static paths for all blog posts // Generate static paths for all blog posts
export function generateStaticParams() { export function generateStaticParams() {

4
src/app/blog/blog.module.css
View File

@ -6,7 +6,7 @@
} }
.hero { .hero {
padding: 10rem 2rem; padding: 200px 0px;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/dish-2.png'); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/dish-2.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -21,7 +21,7 @@
.heroTitle { .heroTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: var(--hero-title-size); font-size: var(--hero-title-size);
color: #c49c5c; color: #F5E6D3;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;

125
src/app/blog/page.tsx
View File

@ -1,122 +1,11 @@
'use client' import { Metadata } from "next";
import BlogContent from "./BlogContent";
import Navbar from "@/components/Navbar/Navbar"; export const metadata: Metadata = {
import Footer from "@/components/Footer/Footer"; title: "Blog | Antalya Restaurant",
import Image from "next/image"; description: "Read our latest stories, recipes, and news from Antalya Restaurant. Discover the secrets of Turkish cuisine.",
import Link from "next/link"; };
import styles from "./blog.module.css";
import { blogData } from "@/utils/constant";
import { motion } from "framer-motion";
export default function BlogPage() { export default function BlogPage() {
// Animation variants return <BlogContent />;
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
delayChildren: 0.2
}
}
};
const cardVariants = {
hidden: {
opacity: 0,
y: 30
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6
}
}
};
const heroVariants = {
hidden: { opacity: 0, y: -20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.8
}
}
};
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={heroVariants}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Our Blog</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Blog
</p>
</div>
</motion.section>
<section className={styles.sectionHeading}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
<p className={styles.description}>
Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
</p>
</section>
<section className={styles.blogSection}>
<motion.div
className={styles.grid}
initial="hidden"
animate="visible"
variants={containerVariants}
>
{blogData.map((blog) => (
<motion.div
key={blog.id}
className={styles.card}
variants={cardVariants}
whileHover={{
y: -8,
transition: { duration: 0.3 }
}}
>
<div className={styles.imageContainer}>
<Image
src={blog.image}
alt={blog.title}
fill
style={{ objectFit: 'cover' }}
/>
</div>
<div className={styles.cardContent}>
<h3 className={styles.blogTitle}>
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
</h3>
<p className={styles.date}>{blog.date}</p>
<p className={styles.excerpt}>{blog.excerpt}</p>
<Link href={`/blog/${blog.slug}`} className={styles.button}>
Read More
</Link>
</div>
</motion.div>
))}
</motion.div>
</section>
<Footer />
</main>
);
} }

403
src/app/contact/ContactContent.tsx Normal file
View File

@ -0,0 +1,403 @@
'use client'
import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./contact.module.css";
import { motion } from "framer-motion";
interface FormErrors {
name?: string;
email?: string;
phone?: string;
date?: string;
time?: string;
captcha?: string;
}
export default function ContactContent() {
const [email, setEmail] = useState("");
useEffect(() => {
const user = "hello";
const domain = "antalyarestaurant.ca";
setEmail(`${user}@${domain}`);
}, []);
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
guests: "2 Guests",
date: "",
time: "",
requests: "",
});
const [formErrors, setFormErrors] = useState<FormErrors>({});
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
const [charCount, setCharCount] = useState(0);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
if (name === "requests") {
setCharCount(value.length);
}
};
const handleCaptchaChange = (token: string | null) => {
setCaptchaToken(token);
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const errors: FormErrors = {};
if (!formData.name.trim()) errors.name = "Name is required.";
if (!formData.email.trim()) errors.email = "Email is required.";
if (!formData.phone.trim()) errors.phone = "Phone is required.";
if (!formData.date.trim()) errors.date = "Date is required.";
if (!formData.time.trim()) errors.time = "Time is required.";
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
setFormErrors(errors);
if (Object.keys(errors).length > 0) return;
const emailData = {
name: formData.name,
phone: formData.phone,
email: formData.email,
subject: `Table Reservation - ${formData.guests} on ${formData.date}`,
message: `
<strong>Reservation Details:</strong><br/>
Name: ${formData.name}<br/>
Email: ${formData.email}<br/>
Phone: ${formData.phone}<br/>
Guests: ${formData.guests}<br/>
Date: ${formData.date}<br/>
Time: ${formData.time}<br/><br/>
<strong>Special Requests:</strong><br/>
${formData.requests || "None"}
`,
to: email,
senderName: "Antalya Restaurant - Table Reservation",
recaptchaToken: captchaToken,
};
try {
const res = await axios.post(
"https://mailserver.metatronnest.com/send",
emailData,
{ headers: { "Content-Type": "application/json" } }
);
setAlert({
show: true,
type: "success",
message: res?.data?.message || "Reservation request sent successfully! We'll contact you soon.",
});
setFormData({
name: "",
email: "",
phone: "",
guests: "2 Guests",
date: "",
time: "",
requests: "",
});
setCaptchaToken(null);
setFormErrors({});
setCharCount(0);
} catch (error) {
setAlert({
show: true,
type: "danger",
message: "Failed to send reservation request. Please try again later.",
});
}
};
useEffect(() => {
if (alert.show) {
const timer = setTimeout(() => {
setAlert((prev) => ({ ...prev, show: false }));
}, 5000);
return () => clearTimeout(timer);
}
}, [alert.show]);
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Contact Us</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Contact
</p>
</div>
</motion.section>
<section className={styles.contactSection}>
<motion.div
className={styles.container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
transition={{ staggerChildren: 0.3 }}
>
{/* Left Side - Book a Table Form */}
<motion.div
className={styles.formBlock}
initial={{ opacity: 0, x: -60 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.title}>Book a Table</h2>
<p className={styles.subtitle}>
Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine.
</p>
{alert.show && (
<div className={`${styles.alert} ${styles[`alert${alert.type.charAt(0).toUpperCase() + alert.type.slice(1)}`]}`}>
{alert.message}
</div>
)}
<form className={styles.form} onSubmit={handleSubmit}>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="name" className={styles.formLabel}>Name *</label>
<input
type="text"
id="name"
name="name"
className={styles.input}
placeholder="Your Full Name"
value={formData.name}
onChange={handleChange}
required
/>
{formErrors.name && <small className={styles.errorText}>{formErrors.name}</small>}
</div>
<div className={styles.formGroup}>
<label htmlFor="email" className={styles.formLabel}>Email *</label>
<input
type="email"
id="email"
name="email"
className={styles.input}
placeholder="your@email.com"
value={formData.email}
onChange={handleChange}
required
/>
{formErrors.email && <small className={styles.errorText}>{formErrors.email}</small>}
</div>
</div>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="phone" className={styles.formLabel}>Phone *</label>
<input
type="tel"
id="phone"
name="phone"
className={styles.input}
placeholder="(519) 000-0000"
value={formData.phone}
onChange={handleChange}
required
/>
{formErrors.phone && <small className={styles.errorText}>{formErrors.phone}</small>}
</div>
<div className={styles.formGroup}>
<label htmlFor="guests" className={styles.formLabel}>Guests</label>
<select
id="guests"
name="guests"
className={styles.input}
value={formData.guests}
onChange={handleChange}
>
<option>1 Guest</option>
<option>2 Guests</option>
<option>3 Guests</option>
<option>4 Guests</option>
<option>5 Guests</option>
<option>6+ Guests</option>
</select>
</div>
</div>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="date" className={styles.formLabel}>Date *</label>
<input
type="date"
id="date"
name="date"
className={styles.input}
value={formData.date}
onChange={handleChange}
required
/>
{formErrors.date && <small className={styles.errorText}>{formErrors.date}</small>}
</div>
<div className={styles.formGroup}>
<label htmlFor="time" className={styles.formLabel}>Time *</label>
<input
type="time"
id="time"
name="time"
className={styles.input}
value={formData.time}
onChange={handleChange}
required
/>
{formErrors.time && <small className={styles.errorText}>{formErrors.time}</small>}
</div>
</div>
<div className={styles.formGroup}>
<label htmlFor="requests" className={styles.formLabel}>Special Requests</label>
<textarea
id="requests"
name="requests"
className={styles.textarea}
placeholder="Any special dietary requirements or requests..."
rows={4}
maxLength={500}
value={formData.requests}
onChange={handleChange}
></textarea>
<span className={styles.charCount}>{charCount}/500 characters</span>
</div>
<div className={styles.recaptchaWrapper}>
<ReCAPTCHA
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
onChange={handleCaptchaChange}
/>
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
</div>
<button type="submit" className={styles.submitButton}>
Reserve Table
</button>
</form>
</motion.div>
{/* Right Side - Location Info & Map */}
<motion.div
className={styles.infoBlock}
initial={{ opacity: 0, x: 60 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className={styles.locationCard}>
<div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div className={styles.locationInfo}>
<h3 className={styles.locationTitle}>Call Us</h3>
<div className={styles.phoneFlex}>
<a href="tel:5195816363" className={styles.locationSubtitle}>
Kitchener : 519-581-6363
</a>
<a href="tel:2893139838" className={styles.locationSubtitle}>
Burlington : 289-313-9838
</a>
</div>
</div>
</div>
{/* Location Cards */}
<div className={styles.locationCard}>
<div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div className={styles.locationInfo}>
<h3 className={styles.locationTitle}>Contact Us</h3>
<a href="mailto:hello@antalyarestaurant.ca" className={styles.locationSubtitle}>
hello@antalyarestaurant.ca
</a>
</div>
</div>
<div className={styles.locationCard}>
<div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div className={styles.locationInfo}>
<h3 className={styles.locationTitle}>Location</h3>
<p className={styles.locationSubtitle}>1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9</p>
<p className={styles.locationSubtitle}>
1860 Appleby Line, Burlington, ON L7L 7H7
</p>
</div>
</div>
{/* Map */}
<div className={styles.mapContainer}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d11603.157684992676!2d-79.89907629708574!3d43.417739917762866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x882bf4df1b8fa34d%3A0x9cb41f8ef1c4e9ac!2s1187%20Fischer-Hallman%20Rd%20%23435%2C%20Kitchener%2C%20ON%20N2E%204H9%2C%20Canada!3m2!1d43.4477606!2d-80.4809184!4m5!1s0x882b5fcd79165b0f%3A0x9d76a7bc4fd95533!2s1860%20Appleby%20Line%2C%20Burlington%2C%20ON%20L7L%207H7%2C%20Canada!3m2!1d43.3870284!2d-79.7771573!5e0!3m2!1sen!2sca!4v1700000123456!5m2!1sen!2sca"
width="100%"
height="900"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
</motion.div>
</motion.div>
</section>
<Footer />
</main>
);
}

4
src/app/contact/contact.module.css
View File

@ -5,7 +5,7 @@
} }
.hero { .hero {
padding: 10rem 2rem; padding: 200px 0px;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/hero-2.png'); background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/hero-2.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -20,7 +20,7 @@
.heroTitle { .heroTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: var(--hero-title-size); font-size: var(--hero-title-size);
color: #c49c5c; color: #F5E6D3;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;

406
src/app/contact/page.tsx
View File

@ -1,403 +1,11 @@
'use client' import { Metadata } from "next";
import ContactContent from "./ContactContent";
import { useState, useEffect } from "react"; export const metadata: Metadata = {
import ReCAPTCHA from "react-google-recaptcha"; title: "Contact Us | Antalya Restaurant",
import axios from "axios"; description: "Get in touch with Antalya Restaurant. Find our location, opening hours, and contact details. Book your table today!",
import Navbar from "@/components/Navbar/Navbar"; };
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./contact.module.css";
import { motion } from "framer-motion";
interface FormErrors {
name?: string;
email?: string;
phone?: string;
date?: string;
time?: string;
captcha?: string;
}
export default function ContactPage() { export default function ContactPage() {
const [email, setEmail] = useState(""); return <ContactContent />;
useEffect(() => {
const user = "hello";
const domain = "antalyarestaurant.ca";
setEmail(`${user}@${domain}`);
}, []);
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
guests: "2 Guests",
date: "",
time: "",
requests: "",
});
const [formErrors, setFormErrors] = useState<FormErrors>({});
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
const [charCount, setCharCount] = useState(0);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
if (name === "requests") {
setCharCount(value.length);
}
};
const handleCaptchaChange = (token: string | null) => {
setCaptchaToken(token);
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const errors: FormErrors = {};
if (!formData.name.trim()) errors.name = "Name is required.";
if (!formData.email.trim()) errors.email = "Email is required.";
if (!formData.phone.trim()) errors.phone = "Phone is required.";
if (!formData.date.trim()) errors.date = "Date is required.";
if (!formData.time.trim()) errors.time = "Time is required.";
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
setFormErrors(errors);
if (Object.keys(errors).length > 0) return;
const emailData = {
name: formData.name,
phone: formData.phone,
email: formData.email,
subject: `Table Reservation - ${formData.guests} on ${formData.date}`,
message: `
<strong>Reservation Details:</strong><br/>
Name: ${formData.name}<br/>
Email: ${formData.email}<br/>
Phone: ${formData.phone}<br/>
Guests: ${formData.guests}<br/>
Date: ${formData.date}<br/>
Time: ${formData.time}<br/><br/>
<strong>Special Requests:</strong><br/>
${formData.requests || "None"}
`,
to: email,
senderName: "Antalya Restaurant - Table Reservation",
recaptchaToken: captchaToken,
};
try {
const res = await axios.post(
"https://mailserver.metatronnest.com/send",
emailData,
{ headers: { "Content-Type": "application/json" } }
);
setAlert({
show: true,
type: "success",
message: res?.data?.message || "Reservation request sent successfully! We'll contact you soon.",
});
setFormData({
name: "",
email: "",
phone: "",
guests: "2 Guests",
date: "",
time: "",
requests: "",
});
setCaptchaToken(null);
setFormErrors({});
setCharCount(0);
} catch (error) {
setAlert({
show: true,
type: "danger",
message: "Failed to send reservation request. Please try again later.",
});
}
};
useEffect(() => {
if (alert.show) {
const timer = setTimeout(() => {
setAlert((prev) => ({ ...prev, show: false }));
}, 5000);
return () => clearTimeout(timer);
}
}, [alert.show]);
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Contact Us</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Contact
</p>
</div>
</motion.section>
<section className={styles.contactSection}>
<motion.div
className={styles.container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
transition={{ staggerChildren: 0.3 }}
>
{/* Left Side - Book a Table Form */}
<motion.div
className={styles.formBlock}
initial={{ opacity: 0, x: -60 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.title}>Book a Table</h2>
<p className={styles.subtitle}>
Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine.
</p>
{alert.show && (
<div className={`${styles.alert} ${styles[`alert${alert.type.charAt(0).toUpperCase() + alert.type.slice(1)}`]}`}>
{alert.message}
</div>
)}
<form className={styles.form} onSubmit={handleSubmit}>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="name" className={styles.formLabel}>Name *</label>
<input
type="text"
id="name"
name="name"
className={styles.input}
placeholder="Your Full Name"
value={formData.name}
onChange={handleChange}
required
/>
{formErrors.name && <small className={styles.errorText}>{formErrors.name}</small>}
</div>
<div className={styles.formGroup}>
<label htmlFor="email" className={styles.formLabel}>Email *</label>
<input
type="email"
id="email"
name="email"
className={styles.input}
placeholder="your@email.com"
value={formData.email}
onChange={handleChange}
required
/>
{formErrors.email && <small className={styles.errorText}>{formErrors.email}</small>}
</div>
</div>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="phone" className={styles.formLabel}>Phone *</label>
<input
type="tel"
id="phone"
name="phone"
className={styles.input}
placeholder="(519) 000-0000"
value={formData.phone}
onChange={handleChange}
required
/>
{formErrors.phone && <small className={styles.errorText}>{formErrors.phone}</small>}
</div>
<div className={styles.formGroup}>
<label htmlFor="guests" className={styles.formLabel}>Guests</label>
<select
id="guests"
name="guests"
className={styles.input}
value={formData.guests}
onChange={handleChange}
>
<option>1 Guest</option>
<option>2 Guests</option>
<option>3 Guests</option>
<option>4 Guests</option>
<option>5 Guests</option>
<option>6+ Guests</option>
</select>
</div>
</div>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="date" className={styles.formLabel}>Date *</label>
<input
type="date"
id="date"
name="date"
className={styles.input}
value={formData.date}
onChange={handleChange}
required
/>
{formErrors.date && <small className={styles.errorText}>{formErrors.date}</small>}
</div>
<div className={styles.formGroup}>
<label htmlFor="time" className={styles.formLabel}>Time *</label>
<input
type="time"
id="time"
name="time"
className={styles.input}
value={formData.time}
onChange={handleChange}
required
/>
{formErrors.time && <small className={styles.errorText}>{formErrors.time}</small>}
</div>
</div>
<div className={styles.formGroup}>
<label htmlFor="requests" className={styles.formLabel}>Special Requests</label>
<textarea
id="requests"
name="requests"
className={styles.textarea}
placeholder="Any special dietary requirements or requests..."
rows={4}
maxLength={500}
value={formData.requests}
onChange={handleChange}
></textarea>
<span className={styles.charCount}>{charCount}/500 characters</span>
</div>
<div className={styles.recaptchaWrapper}>
<ReCAPTCHA
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
onChange={handleCaptchaChange}
/>
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
</div>
<button type="submit" className={styles.submitButton}>
Reserve Table
</button>
</form>
</motion.div>
{/* Right Side - Location Info & Map */}
<motion.div
className={styles.infoBlock}
initial={{ opacity: 0, x: 60 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className={styles.locationCard}>
<div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div className={styles.locationInfo}>
<h3 className={styles.locationTitle}>Call Us</h3>
<div className={styles.phoneFlex}>
<a href="tel:5195816363" className={styles.locationSubtitle}>
Kitchener : 519-581-6363
</a>
<a href="tel:2893139838" className={styles.locationSubtitle}>
Burlington : 289-313-9838
</a>
</div>
</div>
</div>
{/* Location Cards */}
<div className={styles.locationCard}>
<div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div className={styles.locationInfo}>
<h3 className={styles.locationTitle}>Contact Us</h3>
<a href="mailto:hello@antalyarestaurant.ca" className={styles.locationSubtitle}>
hello@antalyarestaurant.ca
</a>
</div>
</div>
<div className={styles.locationCard}>
<div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div className={styles.locationInfo}>
<h3 className={styles.locationTitle}>Location</h3>
<p className={styles.locationSubtitle}>1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9</p>
<p className={styles.locationSubtitle}>
1860 Appleby Line, Burlington, ON L7L 7H7
</p>
</div>
</div>
{/* Map */}
<div className={styles.mapContainer}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d11603.157684992676!2d-79.89907629708574!3d43.417739917762866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x882bf4df1b8fa34d%3A0x9cb41f8ef1c4e9ac!2s1187%20Fischer-Hallman%20Rd%20%23435%2C%20Kitchener%2C%20ON%20N2E%204H9%2C%20Canada!3m2!1d43.4477606!2d-80.4809184!4m5!1s0x882b5fcd79165b0f%3A0x9d76a7bc4fd95533!2s1860%20Appleby%20Line%2C%20Burlington%2C%20ON%20L7L%207H7%2C%20Canada!3m2!1d43.3870284!2d-79.7771573!5e0!3m2!1sen!2sca!4v1700000123456!5m2!1sen!2sca"
width="100%"
height="900"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
</motion.div>
</motion.div>
</section>
<Footer />
</main>
);
} }

221
src/app/gallery/GalleryContent.tsx Normal file
View File

@ -0,0 +1,221 @@
'use client'
import { useState } from 'react';
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./gallery.module.css";
import { galleryData } from "@/utils/constant";
import { motion, AnimatePresence } from "framer-motion";
const categories = ['All', 'Food', 'Interior'];
export default function GalleryContent() {
const [activeTab, setActiveTab] = useState('All');
const [lightboxOpen, setLightboxOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
// Animation variants
const heroVariants = {
hidden: { opacity: 0, y: -20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.8 }
}
};
const tabsVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6,
staggerChildren: 0.1
}
}
};
const tabVariants = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4 }
}
};
const gridVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.08,
delayChildren: 0.1
}
}
};
const imageVariants = {
hidden: { opacity: 0, scale: 0.9 },
visible: {
opacity: 1,
scale: 1,
transition: { duration: 0.5 }
}
};
const filteredImages = activeTab === 'All'
? galleryData
: galleryData.filter(img => img.category === activeTab);
const openLightbox = (index: number) => {
setCurrentIndex(index);
setLightboxOpen(true);
};
const closeLightbox = () => {
setLightboxOpen(false);
};
const nextImage = (e: React.MouseEvent) => {
e.stopPropagation();
setCurrentIndex((prev) => (prev + 1) % filteredImages.length);
};
const prevImage = (e: React.MouseEvent) => {
e.stopPropagation();
setCurrentIndex((prev) => (prev - 1 + filteredImages.length) % filteredImages.length);
};
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={heroVariants}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Our Gallery</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Gallery
</p>
</div>
</motion.section>
<section className={styles.sectionHeading}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish</h2>
<p className={styles.description}>
Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
</p>
</section>
<section className={styles.section}>
<motion.div
className={styles.tabs}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={tabsVariants}
>
{categories.map(category => (
<motion.button
key={category}
className={`${styles.tab} ${activeTab === category ? styles.activeTab : ''}`}
onClick={() => setActiveTab(category)}
variants={tabVariants}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{category}
</motion.button>
))}
</motion.div>
<motion.div
className={styles.grid}
key={activeTab}
initial="hidden"
animate="visible"
variants={gridVariants}
>
{filteredImages.map((img, index) => (
<motion.div
key={img.id}
className={styles.imageWrapper}
onClick={() => openLightbox(index)}
variants={imageVariants}
whileHover={{
scale: 1.05,
transition: { duration: 0.3 }
}}
>
<Image
src={img.src}
alt={img.alt}
fill
className={styles.image}
/>
<div className={styles.overlay}>
<span className={styles.viewText}>View</span>
</div>
</motion.div>
))}
</motion.div>
</section>
<AnimatePresence>
{lightboxOpen && (
<motion.div
className={styles.lightbox}
onClick={closeLightbox}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
<motion.div
className={styles.lightboxContent}
onClick={(e) => e.stopPropagation()}
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
transition={{ duration: 0.3 }}
>
<button className={styles.closeBtn} onClick={closeLightbox}>×</button>
<button className={`${styles.navBtn} ${styles.prevBtn}`} onClick={prevImage}>‹</button>
<motion.div
className={styles.lightboxImageWrapper}
key={currentIndex}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
transition={{ duration: 0.3 }}
>
<Image
src={filteredImages[currentIndex].src}
alt={filteredImages[currentIndex].alt}
fill
style={{ objectFit: 'contain' }}
/>
</motion.div>
<button className={`${styles.navBtn} ${styles.nextBtn}`} onClick={nextImage}>›</button>
</motion.div>
</motion.div>
)}
</AnimatePresence>
<Footer />
</main>
);
}

5
src/app/gallery/gallery.module.css
View File

@ -6,7 +6,7 @@
} }
.hero { .hero {
padding: 10rem 2rem; padding: 200px 0px;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-2.png'); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-2.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -21,7 +21,7 @@
.heroTitle { .heroTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: var(--hero-title-size); font-size: var(--hero-title-size);
color: #c49c5c; color: #F5E6D3;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
@ -103,6 +103,7 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 600; font-weight: 600;
border-radius: 10px;
} }
.tab:hover, .tab:hover,

224
src/app/gallery/page.tsx
View File

@ -1,221 +1,11 @@
'use client' import { Metadata } from "next";
import GalleryContent from "./GalleryContent";
import { useState } from 'react'; export const metadata: Metadata = {
import Navbar from "@/components/Navbar/Navbar"; title: "Gallery | Antalya Restaurant",
import Footer from "@/components/Footer/Footer"; description: "Explore our gallery to see our delicious dishes, elegant interior, and happy customers. Experience the visual delight of Antalya Restaurant.",
import Image from "next/image"; };
import Link from "next/link";
import styles from "./gallery.module.css";
import { galleryData } from "@/utils/constant";
import { motion, AnimatePresence } from "framer-motion";
const categories = ['All', 'Food', 'Interior'];
export default function GalleryPage() { export default function GalleryPage() {
const [activeTab, setActiveTab] = useState('All'); return <GalleryContent />;
const [lightboxOpen, setLightboxOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
// Animation variants
const heroVariants = {
hidden: { opacity: 0, y: -20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.8 }
}
};
const tabsVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6,
staggerChildren: 0.1
}
}
};
const tabVariants = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4 }
}
};
const gridVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.08,
delayChildren: 0.1
}
}
};
const imageVariants = {
hidden: { opacity: 0, scale: 0.9 },
visible: {
opacity: 1,
scale: 1,
transition: { duration: 0.5 }
}
};
const filteredImages = activeTab === 'All'
? galleryData
: galleryData.filter(img => img.category === activeTab);
const openLightbox = (index: number) => {
setCurrentIndex(index);
setLightboxOpen(true);
};
const closeLightbox = () => {
setLightboxOpen(false);
};
const nextImage = (e: React.MouseEvent) => {
e.stopPropagation();
setCurrentIndex((prev) => (prev + 1) % filteredImages.length);
};
const prevImage = (e: React.MouseEvent) => {
e.stopPropagation();
setCurrentIndex((prev) => (prev - 1 + filteredImages.length) % filteredImages.length);
};
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={heroVariants}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Our Gallery</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Gallery
</p>
</div>
</motion.section>
<section className={styles.sectionHeading}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish</h2>
<p className={styles.description}>
Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
</p>
</section>
<section className={styles.section}>
<motion.div
className={styles.tabs}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={tabsVariants}
>
{categories.map(category => (
<motion.button
key={category}
className={`${styles.tab} ${activeTab === category ? styles.activeTab : ''}`}
onClick={() => setActiveTab(category)}
variants={tabVariants}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{category}
</motion.button>
))}
</motion.div>
<motion.div
className={styles.grid}
key={activeTab}
initial="hidden"
animate="visible"
variants={gridVariants}
>
{filteredImages.map((img, index) => (
<motion.div
key={img.id}
className={styles.imageWrapper}
onClick={() => openLightbox(index)}
variants={imageVariants}
whileHover={{
scale: 1.05,
transition: { duration: 0.3 }
}}
>
<Image
src={img.src}
alt={img.alt}
fill
className={styles.image}
/>
<div className={styles.overlay}>
<span className={styles.viewText}>View</span>
</div>
</motion.div>
))}
</motion.div>
</section>
<AnimatePresence>
{lightboxOpen && (
<motion.div
className={styles.lightbox}
onClick={closeLightbox}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
<motion.div
className={styles.lightboxContent}
onClick={(e) => e.stopPropagation()}
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
transition={{ duration: 0.3 }}
>
<button className={styles.closeBtn} onClick={closeLightbox}>×</button>
<button className={`${styles.navBtn} ${styles.prevBtn}`} onClick={prevImage}>‹</button>
<motion.div
className={styles.lightboxImageWrapper}
key={currentIndex}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
transition={{ duration: 0.3 }}
>
<Image
src={filteredImages[currentIndex].src}
alt={filteredImages[currentIndex].alt}
fill
style={{ objectFit: 'contain' }}
/>
</motion.div>
<button className={`${styles.navBtn} ${styles.nextBtn}`} onClick={nextImage}>›</button>
</motion.div>
</motion.div>
)}
</AnimatePresence>
<Footer />
</main>
);
} }

20
src/app/globals.css
View File

@ -22,7 +22,7 @@
--font-cormorant: 'Canva Sans', sans-serif; --font-cormorant: 'Canva Sans', sans-serif;
/* Responsive Font Size Variables - Desktop Optimized */ /* Responsive Font Size Variables - Desktop Optimized */
--hero-title-size: 64px; --hero-title-size: 56px;
--section-heading-size: 42px; --section-heading-size: 42px;
--main-heading-size: 36px; --main-heading-size: 36px;
--subheading-size: 22px; --subheading-size: 22px;
@ -88,7 +88,7 @@ button {
/* Extra Large Desktop: 1920px+ */ /* Extra Large Desktop: 1920px+ */
@media (min-width: 1920px) { @media (min-width: 1920px) {
:root { :root {
--hero-title-size: 68px; --hero-title-size: 56px;
--section-heading-size: 44px; --section-heading-size: 44px;
--main-heading-size: 38px; --main-heading-size: 38px;
--subheading-size: 24px; --subheading-size: 24px;
@ -100,7 +100,7 @@ button {
/* Large Desktop: 1600px */ /* Large Desktop: 1600px */
@media (max-width: 1919px) and (min-width: 1600px) { @media (max-width: 1919px) and (min-width: 1600px) {
:root { :root {
--hero-title-size: 64px; --hero-title-size: 56px;
--section-heading-size: 42px; --section-heading-size: 42px;
--main-heading-size: 36px; --main-heading-size: 36px;
--subheading-size: 22px; --subheading-size: 22px;
@ -112,7 +112,7 @@ button {
/* Desktop: 1540px */ /* Desktop: 1540px */
@media (max-width: 1599px) and (min-width: 1540px) { @media (max-width: 1599px) and (min-width: 1540px) {
:root { :root {
--hero-title-size: 62px; --hero-title-size: 56px;
--section-heading-size: 40px; --section-heading-size: 40px;
--main-heading-size: 35px; --main-heading-size: 35px;
--subheading-size: 22px; --subheading-size: 22px;
@ -124,7 +124,7 @@ button {
/* Desktop: 1440px */ /* Desktop: 1440px */
@media (max-width: 1539px) and (min-width: 1440px) { @media (max-width: 1539px) and (min-width: 1440px) {
:root { :root {
--hero-title-size: 60px; --hero-title-size: 56px;
--section-heading-size: 39px; --section-heading-size: 39px;
--main-heading-size: 34px; --main-heading-size: 34px;
--subheading-size: 21px; --subheading-size: 21px;
@ -136,7 +136,7 @@ button {
/* Desktop: 1360px */ /* Desktop: 1360px */
@media (max-width: 1439px) and (min-width: 1360px) { @media (max-width: 1439px) and (min-width: 1360px) {
:root { :root {
--hero-title-size: 58px; --hero-title-size: 47px;
--section-heading-size: 38px; --section-heading-size: 38px;
--main-heading-size: 33px; --main-heading-size: 33px;
--subheading-size: 21px; --subheading-size: 21px;
@ -148,7 +148,7 @@ button {
/* Desktop/Laptop: 1200px */ /* Desktop/Laptop: 1200px */
@media (max-width: 1359px) and (min-width: 1200px) { @media (max-width: 1359px) and (min-width: 1200px) {
:root { :root {
--hero-title-size: 56px; --hero-title-size: 47px;
--section-heading-size: 36px; --section-heading-size: 36px;
--main-heading-size: 32px; --main-heading-size: 32px;
--subheading-size: 20px; --subheading-size: 20px;
@ -162,7 +162,7 @@ button {
/* Laptop: 1024px */ /* Laptop: 1024px */
@media (max-width: 1199px) and (min-width: 1024px) { @media (max-width: 1199px) and (min-width: 1024px) {
:root { :root {
--hero-title-size: 48px; --hero-title-size: 44px;
--section-heading-size: 32px; --section-heading-size: 32px;
--main-heading-size: 28px; --main-heading-size: 28px;
--subheading-size: 19px; --subheading-size: 19px;
@ -174,7 +174,7 @@ button {
/* Tablet Large: 992px */ /* Tablet Large: 992px */
@media (max-width: 1023px) and (min-width: 992px) { @media (max-width: 1023px) and (min-width: 992px) {
:root { :root {
--hero-title-size: 46px; --hero-title-size: 40px;
--section-heading-size: 30px; --section-heading-size: 30px;
--main-heading-size: 26px; --main-heading-size: 26px;
--subheading-size: 18px; --subheading-size: 18px;
@ -186,7 +186,7 @@ button {
/* Tablet: 768px */ /* Tablet: 768px */
@media (max-width: 991px) and (min-width: 768px) { @media (max-width: 991px) and (min-width: 768px) {
:root { :root {
--hero-title-size: 42px; --hero-title-size: 36px;
--section-heading-size: 28px; --section-heading-size: 28px;
--main-heading-size: 24px; --main-heading-size: 24px;
--subheading-size: 17px; --subheading-size: 17px;

125
src/app/layout.tsx
View File

@ -2,6 +2,8 @@ import type { Metadata } from "next";
import { Playfair_Display } from "next/font/google"; import { Playfair_Display } from "next/font/google";
import "./globals.css"; import "./globals.css";
import ScrollToTop from "@/components/ScrollToTop/ScrollToTop"; import ScrollToTop from "@/components/ScrollToTop/ScrollToTop";
import Navbar from '@/components/Navbar/Navbar';
import Script from "next/script";
const playfairDisplay = Playfair_Display({ const playfairDisplay = Playfair_Display({
subsets: ["latin"], subsets: ["latin"],
@ -13,24 +15,139 @@ const playfairDisplay = Playfair_Display({
// We'll use system fonts as fallback in the CSS variables // We'll use system fonts as fallback in the CSS variables
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Antalya Restaurant - Book A Table", metadataBase: new URL("https://antalya.metatronnest.com"),
description: "Experience luxury dining at Antalya Restaurant.", title: {
default: "Antalya Restaurant - Authentic Turkish Cuisine",
template: "%s | Antalya Restaurant"
},
description: "Experience the finest authentic Turkish cuisine at Antalya Restaurant. Enjoy our delicious kebabs, mezes, and desserts in a warm, inviting atmosphere.",
keywords: ["Turkish restaurant", "Antalya restaurant", "Turkish cuisine", "kebabs", "meze", "dining", "authentic food", "halal food", "middle eastern food"],
authors: [{ name: "Antalya Restaurant" }],
creator: "Antalya Restaurant",
publisher: "Antalya Restaurant",
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
},
},
alternates: {
canonical: "./",
},
openGraph: {
title: "Antalya Restaurant - Authentic Turkish Cuisine",
description: "Experience the finest authentic Turkish cuisine at Antalya Restaurant. From charcoal-grilled kebabs to handmade baklava.",
url: "https://antalya.metatronnest.com",
siteName: "Antalya Restaurant",
images: [
{
url: "/images/hero-bg.jpg",
width: 1200,
height: 630,
alt: "Antalya Restaurant Interior",
},
],
locale: "en_CA",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Antalya Restaurant - Authentic Turkish Cuisine",
description: "Experience the finest authentic Turkish cuisine at Antalya Restaurant.",
images: ["/images/hero-bg.jpg"],
},
}; };
import Navbar from '@/components/Navbar/Navbar'
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const jsonLd = {
"@context": "https://schema.org",
"@type": "Restaurant",
name: "Antalya Restaurant",
url: "https://antalya.metatronnest.com",
image: "https://antalya.metatronnest.com/images/hero-bg.jpg",
description: "Authentic Turkish cuisine featuring charcoal-grilled kebabs, fresh mezes, and traditional desserts.",
address: {
"@type": "PostalAddress",
streetAddress: "1187 Fischer-Hallman Rd #435",
addressLocality: "Kitchener",
addressRegion: "ON",
postalCode: "N2E 4H9",
addressCountry: "CA",
},
telephone: "+1-519-581-6363",
servesCuisine: ["Turkish", "Middle Eastern", "Halal"],
priceRange: "$$",
openingHoursSpecification: [
{
"@type": "OpeningHoursSpecification",
dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
opens: "11:00",
closes: "22:00"
}
],
sameAs: [
"https://www.facebook.com/antalyakebabgrill",
// Add other social links if available
],
};
return ( return (
<html lang="en" className={playfairDisplay.variable}> <html lang="en" className={playfairDisplay.variable}>
<head> <head>
<link rel="preconnect" href="https://fonts.cdnfonts.com" /> <link rel="preconnect" href="https://fonts.cdnfonts.com" />
<link href="https://fonts.cdnfonts.com/css/canva-sans" rel="stylesheet" /> <link href="https://fonts.cdnfonts.com/css/canva-sans" rel="stylesheet" />
{/* Preconnect for external scripts */}
<link rel="preconnect" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://connect.facebook.net" />
<link rel="preconnect" href="https://scripts.clarity.ms" />
</head> </head>
<body> <body>
{/* Google Tag Manager */}
<Script
id="gtm-script"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YZNXD8G2Y7');
`,
}}
/>
{/* Clarity Tracking */}
<Script
id="clarity-script"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "tiwefg4i5m");
`,
}}
/>
{/* Schema.org JSON-LD */}
<Script
id="schema-restaurant"
type="application/ld+json"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd),
}}
/>
<Navbar /> <Navbar />
{children} {children}
<ScrollToTop /> <ScrollToTop />

186
src/app/menu/MenuContent.tsx Normal file
View File

@ -0,0 +1,186 @@
'use client'
import { useState } from 'react';
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./menu.module.css";
import { menuData } from "@/utils/constant";
import { motion } from "framer-motion";
export default function MenuPage() {
const [activeCategory, setActiveCategory] = useState(-1); // -1 means "All"
// Get all items when "All" is selected
const getAllItems = () => {
return menuData.flatMap(section => section.items);
};
const displayItems = activeCategory === -1
? getAllItems()
: menuData[activeCategory].items;
// Animation variants
const heroVariants = {
hidden: { opacity: 0, y: -20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.8 }
}
};
const tabsVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};
const tabVariants = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4 }
}
};
const gridVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.5 }
}
};
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={heroVariants}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Our Menu</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Menu
</p>
</div>
</motion.section>
<section className={styles.sectionHeading}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.mainHeading}>Delicious Turkish, Mezze, And More</h2>
<p className={styles.description}>
Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
</p>
</section>
<section className={styles.menuSection}>
{/* Category Tabs */}
<motion.div
className={styles.tabs}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={tabsVariants}
>
{/* All Tab */}
<motion.button
className={`${styles.tab} ${activeCategory === -1 ? styles.activeTab : ''}`}
onClick={() => setActiveCategory(-1)}
variants={tabVariants}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
All
</motion.button>
{/* Category Tabs */}
{menuData.map((section, index) => (
<motion.button
key={index}
className={`${styles.tab} ${activeCategory === index ? styles.activeTab : ''}`}
onClick={() => setActiveCategory(index)}
variants={tabVariants}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{section.category}
</motion.button>
))}
</motion.div>
{/* Menu Items Grid */}
<motion.div
className={styles.menuGrid}
key={activeCategory}
initial="hidden"
animate="visible"
variants={gridVariants}
>
{displayItems.map((item, itemIndex) => (
<motion.div
key={itemIndex}
className={styles.menuCard}
variants={cardVariants}
whileHover={{
y: -8,
transition: { duration: 0.3 }
}}
>
<div className={styles.imageFrame}>
<div className={styles.imageWrapper}>
<Image
src={item.image}
alt={item.name}
fill
className={styles.dishImage}
/>
</div>
</div>
<div className={styles.cardContent}>
<div className={styles.cardHeader}>
<h3 className={styles.dishName}>{item.name}</h3>
</div>
<p className={styles.description}>{item.description}</p>
</div>
<div className={styles.priceBubble}>
<span className={styles.price}>{item.price}</span>
</div>
</motion.div>
))}
</motion.div>
</section>
<Footer />
</main>
);
}

295
src/app/menu/menu.module.css
View File

@ -5,8 +5,8 @@
} }
.hero { .hero {
padding: 10rem 2rem; padding: 200px 0px;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/hero-3.png'); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-3.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
@ -20,29 +20,31 @@
.heroTitle { .heroTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: var(--hero-title-size); font-size: 3.5rem;
color: #c49c5c; color: #F5E6D3;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 3px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
.breadcrumb { .breadcrumb {
font-size: var(--body-size); font-size: 1.2rem;
color: #c49c5c; color: #c49c5c;
font-family: var(--font-lato); font-family: var(--font-lato);
letter-spacing: 1px;
} }
.breadcrumb a { .breadcrumb a {
color: #fff; color: #fff;
transition: color 0.3s; transition: color 0.3s;
text-decoration: none;
} }
.breadcrumb a:hover { .breadcrumb a:hover {
color: var(--color-gold); color: var(--color-gold);
} }
/* Section Heading Styles */
.sectionHeading { .sectionHeading {
padding: 60px 20px 40px; padding: 60px 20px 40px;
max-width: 900px; max-width: 900px;
@ -78,9 +80,10 @@
} }
.menuSection { .menuSection {
padding: 20px 10px;
padding-bottom: 80px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 20px 20px 80px;
} }
/* Category Tabs */ /* Category Tabs */
@ -88,7 +91,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
margin-bottom: 4rem; margin-bottom: 5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -96,60 +99,112 @@
background: transparent; background: transparent;
border: 2px solid #b07c4b; border: 2px solid #b07c4b;
color: #c49c5c; color: #c49c5c;
padding: 12px 30px; padding: 12px 25px;
font-size: var(--body-size); font-size: 1rem;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
font-family: var(--font-lato); font-family: var(--font-playfair);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 600; font-weight: 600;
border-radius: 10px;
} }
.tab:hover, .tab:hover,
.activeTab { .activeTab {
background-color: #c49c5c; background-color: #c49c5c;
color: #F5E6D3; color: #f5e6d3;
transform: translateY(-2px);
border: 2px solid #b07c4b;
} }
/* Menu Grid */
.menuGrid { .menuGrid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 2.5rem; gap: 4rem 3rem;
padding: 0 2rem;
} }
/* Menu Card - Horizontal Layout */
.menuCard { .menuCard {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
background: white; margin-left: 60px;
padding: 2rem; margin-right: 20px;
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.menuCard:nth-child(1) {
animation-delay: 0.1s;
}
.menuCard:nth-child(2) {
animation-delay: 0.2s;
}
.menuCard:nth-child(3) {
animation-delay: 0.3s;
}
.menuCard:nth-child(4) {
animation-delay: 0.4s;
}
.menuCard:nth-child(5) {
animation-delay: 0.5s;
}
.menuCard:nth-child(6) {
animation-delay: 0.6s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cardContent {
background: #f5f5f5;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 2rem 3rem 2rem 90px;
transition: all 0.4s ease; width: 100%;
position: relative; min-height: 160px;
overflow: visible;
gap: 2rem;
}
.menuCard:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
/* Image Section with Dashed Circle */
.imageFrame {
position: relative;
width: 140px;
height: 140px;
flex-shrink: 0;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
/* Rotating Dashed Border */ .menuCard:hover .cardContent {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.imageFrame {
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%);
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 2;
background: #fff;
overflow: hidden;
}
/* Animated dotted ring around image */
.imageFrame::before { .imageFrame::before {
content: ''; content: '';
position: absolute; position: absolute;
@ -157,30 +212,16 @@
left: -10px; left: -10px;
right: -10px; right: -10px;
bottom: -10px; bottom: -10px;
border: 4px dotted #c49c5c;
border-radius: 50%; border-radius: 50%;
animation: spin 10s linear infinite; border: 3px dotted #000000;
} animation: rotateRing 10s linear infinite;
z-index: -1;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }
.imageWrapper { .imageWrapper {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
border: 4px solid white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
} }
.dishImage { .dishImage {
@ -192,72 +233,126 @@
transform: scale(1.1); transform: scale(1.1);
} }
/* Content Section */
.cardContent {
flex: 1;
text-align: left;
}
.cardHeader { .cardHeader {
margin-bottom: 0.5rem; margin-bottom: 0.8rem;
} }
.dishName { .dishName {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: var(--subheading-size); font-size: 1.5rem;
color: #5d4037; color: #5d4037;
font-weight: 700; font-weight: 700;
margin-bottom: 0.5rem; text-transform: uppercase;
margin: 0;
line-height: 1.2;
}
.description {
font-size: 0.95rem;
color: #c49c5c;
line-height: 1.5;
font-family: var(--font-lato);
margin: 0;
}
.priceBubble {
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
width: 70px;
height: 70px;
background: #c49c5c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #f5e6d3;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 3;
transition: transform 0.3s ease;
}
/* Animated dotted ring around price bubble */
.priceBubble::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border-radius: 50%;
border: 2px dashed #b07c4b;
animation: rotateRing 8s linear infinite;
z-index: -1;
}
@keyframes rotateRing {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.menuCard:hover .priceBubble {
transform: translateY(-50%) scale(1.1);
} }
.price { .price {
display: block; font-size: 1.2rem;
font-size: var(--body-size); color: #fff;
color: #c49c5c; font-weight: bold;
font-weight: 700; font-family: var(--font-playfair);
font-family: var(--font-lato);
margin-bottom: 0.5rem;
} }
.cardContent .description {
font-size: var(--small-text-size);
color: #c49c5c;
line-height: 1.6;
font-family: var(--font-lato);
}
/* Responsive */
@media (max-width: 968px) { @media (max-width: 968px) {
.menuGrid { .menuGrid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} gap: 4rem;
}
@media (max-width: 768px) {
.hero {
padding: 6rem 1rem 4rem;
}
.tabs {
gap: 0.5rem;
}
.tab {
padding: 10px 15px;
} }
.menuCard { .menuCard {
flex-direction: column; margin-left: 50px;
text-align: center; margin-right: 20px;
padding: 1.5rem;
gap: 1.5rem;
} }
}
.cardContent { @media (max-width: 480px) {
text-align: center; .menuCard {
margin-left: 0;
margin-right: 0;
flex-direction: column;
align-items: center;
margin-top: 60px;
} }
.imageFrame { .imageFrame {
margin: 0 auto; left: 50%;
top: -60px;
transform: translateX(-50%);
width: 130px;
height: 130px;
}
.cardContent {
padding: 80px 1.5rem 2rem 1.5rem;
text-align: center;
min-height: auto;
}
.priceBubble {
right: 50%;
top: auto;
bottom: -35px;
transform: translateX(50%);
width: 60px;
height: 60px;
}
.menuCard:hover .priceBubble {
transform: translateX(50%) scale(1.1);
} }
} }

166
src/app/menu/page.tsx
View File

@ -1,163 +1,11 @@
'use client' import { Metadata } from "next";
import MenuContent from "./MenuContent";
import { useState } from 'react'; export const metadata: Metadata = {
import Navbar from "@/components/Navbar/Navbar"; title: "Menu | Antalya Restaurant",
import Footer from "@/components/Footer/Footer"; description: "Browse our extensive menu featuring authentic Turkish kebabs, mezes, seafood, and desserts. Find your favorite dish at Antalya Restaurant.",
import Image from "next/image"; };
import Link from "next/link";
import styles from "./menu.module.css";
import { menuData } from "@/utils/constant";
import { motion } from "framer-motion";
export default function MenuPage() { export default function MenuPage() {
const [activeCategory, setActiveCategory] = useState(0); return <MenuContent />;
// Animation variants
const heroVariants = {
hidden: { opacity: 0, y: -20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.8 }
}
};
const tabsVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};
const tabVariants = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4 }
}
};
const gridVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.5 }
}
};
return (
<main className={styles.main}>
<Navbar />
<motion.section
className={styles.hero}
initial="hidden"
animate="visible"
variants={heroVariants}
>
<div className={styles.heroContent}>
<h1 className={styles.heroTitle}>Our Menu</h1>
<p className={styles.breadcrumb}>
<Link href="/">Home</Link> / Menu
</p>
</div>
</motion.section>
<section className={styles.sectionHeading}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
<span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
</div>
<h2 className={styles.mainHeading}>Delicious Turkish, Mezze, And More</h2>
<p className={styles.description}>
Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
</p>
</section>
<section className={styles.menuSection}>
{/* Category Tabs */}
<motion.div
className={styles.tabs}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={tabsVariants}
>
{menuData.map((section, index) => (
<motion.button
key={index}
className={`${styles.tab} ${activeCategory === index ? styles.activeTab : ''}`}
onClick={() => setActiveCategory(index)}
variants={tabVariants}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{section.category}
</motion.button>
))}
</motion.div>
{/* Menu Items Grid */}
<motion.div
className={styles.menuGrid}
key={activeCategory}
initial="hidden"
animate="visible"
variants={gridVariants}
>
{menuData[activeCategory].items.map((item, itemIndex) => (
<motion.div
key={itemIndex}
className={styles.menuCard}
variants={cardVariants}
whileHover={{
y: -5,
transition: { duration: 0.3 }
}}
>
<div className={styles.imageFrame}>
<div className={styles.imageWrapper}>
<Image
src={item.image}
alt={item.name}
fill
className={styles.dishImage}
/>
</div>
</div>
<div className={styles.cardContent}>
<div className={styles.cardHeader}>
<h3 className={styles.dishName}>{item.name}</h3>
<span className={styles.price}>{item.price}</span>
</div>
<p className={styles.description}>{item.description}</p>
</div>
</motion.div>
))}
</motion.div>
</section>
<Footer />
</main>
);
} }

7
src/app/page.tsx
View File

@ -8,6 +8,13 @@ import Blogs from "@/components/Blogs/Blogs";
import BookTable from "@/components/BookTable/BookTable"; import BookTable from "@/components/BookTable/BookTable";
import Footer from "@/components/Footer/Footer"; import Footer from "@/components/Footer/Footer";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Home | Antalya Restaurant",
description: "Welcome to Antalya Restaurant. Discover our menu, book a table, and experience the best Turkish hospitality.",
};
export default function Home() { export default function Home() {
return ( return (
<main> <main>

8
src/components/Blogs/Blogs.tsx
View File

@ -41,10 +41,10 @@ export default function Blogs() {
return ( return (
<section className={styles.section} id="blog"> <section className={styles.section} id="blog">
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}> <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} /> <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span> <span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} /> <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div> </div>
<h2 className={styles.title}>OUR BLOGS</h2> <h2 className={styles.title}>OUR BLOGS</h2>
<div className={styles.sliderContainer}> <div className={styles.sliderContainer}>

14
src/components/BookTable/BookTable.tsx
View File

@ -132,9 +132,9 @@ export default function BookTable() {
<div className={styles.formContainer}> <div className={styles.formContainer}>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}> <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} /> <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span> <span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} /> <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div> </div>
<h2 className={styles.title}>Book A Table</h2> <h2 className={styles.title}>Book A Table</h2>
@ -210,24 +210,20 @@ export default function BookTable() {
<span className={styles.charCount}>{charCount}/500 characters</span> <span className={styles.charCount}>{charCount}/500 characters</span>
</div> </div>
<div className={styles.recaptchaWrapper}> <div className={styles.recaptchaWrapper}>
<ReCAPTCHA <ReCAPTCHA
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K" sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
onChange={handleCaptchaChange} onChange={handleCaptchaChange}
/> />
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>} {formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
</div> </div>
<button <button
type="submit" type="submit"
className={styles.submitButton} className={styles.submitButton}
> >
Submit Reservation Submit Reservation
</button> </button>
</form> </form>
</div> </div>
</div> </div>

10
src/components/Gallery/Gallery.tsx
View File

@ -39,11 +39,11 @@ export default function Gallery() {
return ( return (
<section className={styles.section}> <section className={styles.section}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}> <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} /> <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span> <span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} /> <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div> </div>
<h2 className={styles.title}>Gallery</h2> <h2 className={styles.title}>Gallery</h2>
<div className={styles.grid}> <div className={styles.grid}>
{images.map((src, index) => ( {images.map((src, index) => (

2
src/components/Hero/Hero.module.css
View File

@ -56,7 +56,7 @@
.title { .title {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: 78px; font-size: 78px;
color: #fff; color: #f5e6d3;
margin-bottom: 1rem; margin-bottom: 1rem;
line-height: 1.2; line-height: 1.2;
text-align: left; text-align: left;

367
src/components/Menu/Menu.module.css
View File

@ -1,39 +1,59 @@
.menuSection {
padding: 6rem 2rem; .sectionHeading {
background-color: #232323; padding: 60px 20px 40px;
background-size: cover; max-width: 900px;
background-position: center; margin: 0 auto;
text-align: center; text-align: center;
} }
.title { .smallHeading {
font-family: var(--font-cinzel), serif; font-size: var(--small-text-size);
font-size: 3.5rem;
color: #c49c5c; color: #c49c5c;
margin-bottom: 3rem; font-family: var(--font-lato);
text-transform: uppercase; font-weight: 600;
letter-spacing: 2px; letter-spacing: 2px;
line-height: 1.2; margin-bottom: 1rem;
text-align: center; }
.mainHeading {
font-family: var(--font-playfair);
font-size: var(--main-heading-size);
color: #f5e6d3;
line-height: 1.3;
font-weight: 700;
margin-bottom: 1.5rem;
}
.description {
font-size: var(--body-size);
color: #c49c5c;
line-height: 1.8;
font-family: var(--font-lato);
max-width: 800px;
margin: 0 auto;
}
.menuSection {
padding: 20px 10px;
padding-bottom: 80px;
max-width: 1200px;
margin: 0 auto;
} }
/* Category Tabs */ /* Category Tabs */
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 1.5rem; gap: 1rem;
margin-bottom: 3rem; margin-bottom: 5rem;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
} }
.tab { .tab {
background: transparent; background: transparent;
border: 2px solid #b07c4b; border: 2px solid #b07c4b;
color: #c49c5c; color: #fff;
padding: 12px 30px; padding: 12px 25px;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -41,32 +61,32 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 600; font-weight: 600;
border-radius: 10px;
} }
.tab:hover, .tab:hover,
.activeTab { .activeTab {
background-color: #c49c5c; background-color: #c49c5c;
color: #F5E6D3; color: #f5e6d3;
transform: translateY(-2px); transform: translateY(-2px);
border: 2px solid #b07c4b;
} }
.menuGrid { .menuGrid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 2rem; gap: 4rem 3rem;
max-width: 1200px; padding: 0 2rem;
margin: 0 auto;
} }
.menuCard { .menuCard {
position: relative;
display: flex; display: flex;
gap: 1.2rem; align-items: center;
background: #c49c5c; margin-left: 60px;
padding: 1.2rem; margin-right: 20px;
border: 1px solid rgba(197, 160, 89, 0.2);
transition: all 0.4s ease;
animation: fadeInUp 0.6s ease forwards;
opacity: 0; opacity: 0;
animation: fadeInUp 0.6s ease forwards;
} }
.menuCard:nth-child(1) { .menuCard:nth-child(1) {
@ -105,28 +125,57 @@
} }
} }
.menuCard:hover { .cardContent {
background: #c49c5c; background: #f5e6d3;
border-color: #F5E6D3; border-radius: 20px;
padding: 2rem 3rem 2rem 90px;
width: 100%;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menuCard:hover .cardContent {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
} }
.imageFrame { .imageFrame {
position: relative; position: absolute;
width: 130px; left: -70px;
height: 130px; top: 50%;
flex-shrink: 0; transform: translateY(-50%);
padding: 6px; width: 150px;
background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.05)); height: 150px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 2;
background: #fff;
overflow: hidden;
}
/* Animated dotted ring around image */
.imageFrame::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
border: 3px dotted #000000;
animation: rotateRing 10s linear infinite;
z-index: -1;
} }
.imageWrapper { .imageWrapper {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 2px solid #F5E6D3;
overflow: hidden;
} }
.dishImage { .dishImage {
@ -138,166 +187,126 @@
transform: scale(1.1); transform: scale(1.1);
} }
/* Corner decorations */
.cornerTL,
.cornerTR,
.cornerBL,
.cornerBR {
position: absolute;
width: 15px;
height: 15px;
border: 2px solid #F5E6D3;
}
.cornerTL {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
.cornerTR {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
}
.cornerBL {
bottom: 0;
left: 0;
border-right: none;
border-top: none;
}
.cornerBR {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
.smallHeading {
font-size: var(--small-text-size);
color: #c49c5c;
font-family: var(--font-lato);
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.cardContent {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.cardHeader { .cardHeader {
display: flex; margin-bottom: 0.8rem;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.6rem;
} }
.dishName { .dishName {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: 1.3rem; font-size: 1.5rem;
color: #F5E6D3; color: #5d4037;
text-transform: capitalize; font-weight: 700;
transition: color 0.3s; text-transform: uppercase;
margin: 0;
line-height: 1.2;
} }
.menuCard:hover .dishName { .description {
color: #F5E6D3; font-size: 0.95rem;
color: #c49c5c;
line-height: 1.5;
font-family: var(--font-lato);
margin: 0;
}
.priceBubble {
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
width: 70px;
height: 70px;
background: #c49c5c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #f5e6d3;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 3;
transition: transform 0.3s ease;
}
/* Animated dotted ring around price bubble */
.priceBubble::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border-radius: 50%;
border: 2px dashed #b07c4b;
animation: rotateRing 8s linear infinite;
z-index: -1;
}
@keyframes rotateRing {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.menuCard:hover .priceBubble {
transform: translateY(-50%) scale(1.1);
} }
.price { .price {
font-size: 1.2rem; font-size: 1.2rem;
color: #F5E6D3; color: #fff;
font-weight: bold; font-weight: bold;
font-family: var(--font-playfair); font-family: var(--font-playfair);
} }
.description {
font-size: 0.9rem;
color: #F5E6D3;
line-height: 1.6;
font-family: var(--font-lato);
opacity: 0.85;
text-align: start;
}
/* View More Button */
.viewMoreContainer {
margin-top: 3rem;
text-align: center;
}
.button {
display: inline-block;
padding: 0.8rem 2rem;
border: 1px solid #b07c4b;
color: #c49c5c;
font-family: var(--font-lato);
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
background: transparent;
cursor: pointer;
font-weight: 600;
}
.button:hover {
background-color: #c49c5c;
color: #fff;
border-color: #c49c5c;
}
@media (max-width: 968px) { @media (max-width: 968px) {
.menuGrid { .menuGrid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr;
} gap: 4rem;
}
@media (max-width: 768px) {
.title {
font-size: 2.5rem;
}
.menuSection {
padding: 40px 20px 60px;
}
.tabs {
gap: 1rem;
}
.tab {
padding: 10px 20px;
font-size: 0.9rem;
} }
.menuCard { .menuCard {
flex-direction: column; margin-left: 50px;
align-items: center; margin-right: 20px;
text-align: center;
}
.imageFrame {
width: 150px;
height: 150px;
}
.cardHeader {
flex-direction: column;
gap: 0.5rem;
align-items: center;
} }
} }
@media (max-width: 767px) and (min-width: 200px) { @media (max-width: 480px) {
.menuGrid { .menuCard {
grid-template-columns: 1fr; margin-left: 0;
margin-right: 0;
flex-direction: column;
align-items: center;
margin-top: 60px;
}
.imageFrame {
left: 50%;
top: -60px;
transform: translateX(-50%);
width: 130px;
height: 130px;
}
.cardContent {
padding: 80px 1.5rem 2rem 1.5rem;
text-align: center;
min-height: auto;
}
.priceBubble {
right: 50%;
top: auto;
bottom: -35px;
transform: translateX(50%);
width: 60px;
height: 60px;
}
.menuCard:hover .priceBubble {
transform: translateX(50%) scale(1.1);
} }
} }

114
src/components/Menu/Menu.tsx
View File

@ -1,37 +1,17 @@
'use client' 'use client';
import { useState } from 'react';
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import styles from "./Menu.module.css";
import { menuData } from "@/utils/constant";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import styles from "@/components/Menu/Menu.module.css";
import { menuData } from "@/utils/constant";
export default function Menu() { export default function HomeMenu() {
const [activeCategory, setActiveCategory] = useState(0);
// Show only first few menu items (change 6 as needed)
const displayItems = menuData.flatMap(section => section.items).slice(0, 6);
// Animation variants // Animation variants
const tabsVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};
const tabVariants = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4 }
}
};
const gridVariants = { const gridVariants = {
hidden: { opacity: 0 }, hidden: { opacity: 0 },
visible: { visible: {
@ -54,53 +34,33 @@ export default function Menu() {
return ( return (
<section className={styles.menuSection}> <section className={styles.menuSection}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} /> {/* Heading Section (same structure) */}
<section className={styles.sectionHeading}>
<div
className={styles.smallHeading}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}
>
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span> <span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} /> <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div> </div>
{/* Section Title */} <h2 className={styles.mainHeading}>Delicious Turkish, Mezze, And More</h2>
<motion.h2 <p className={styles.description}>
className={styles.title} Looking for authentic Turkish dining? At Antalya, we offer a wide variety of
initial={{ opacity: 0, y: 30 }} traditional dishes, from crispy appetizers to charcoal-grilled kebabs.
whileInView={{ opacity: 1, y: 0 }} </p>
viewport={{ once: true }} </section>
transition={{ duration: 0.6 }}
>
OUR MENU
</motion.h2>
{/* Category Tabs */} {/* Menu Items Grid - EXACT SAME STRUCTURE */}
<motion.div <motion.div
className={styles.tabs} className={styles.menuGrid}
initial="hidden" initial="hidden"
whileInView="visible" whileInView="visible"
viewport={{ once: true }} viewport={{ once: true }}
variants={tabsVariants}
>
{menuData.map((section, index) => (
<motion.button
key={index}
className={`${styles.tab} ${activeCategory === index ? styles.activeTab : ''}`}
onClick={() => setActiveCategory(index)}
variants={tabVariants}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{section.category}
</motion.button>
))}
</motion.div>
{/* Menu Items Grid */}
<motion.div
className={styles.menuGrid}
key={activeCategory}
initial="hidden"
animate="visible"
variants={gridVariants} variants={gridVariants}
> >
{menuData[activeCategory].items.map((item, itemIndex) => ( {displayItems.map((item, itemIndex) => (
<motion.div <motion.div
key={itemIndex} key={itemIndex}
className={styles.menuCard} className={styles.menuCard}
@ -119,35 +79,29 @@ export default function Menu() {
className={styles.dishImage} className={styles.dishImage}
/> />
</div> </div>
<div className={styles.cornerTL}></div>
<div className={styles.cornerTR}></div>
<div className={styles.cornerBL}></div>
<div className={styles.cornerBR}></div>
</div> </div>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<div className={styles.cardHeader}> <div className={styles.cardHeader}>
<h3 className={styles.dishName}>{item.name}</h3> <h3 className={styles.dishName}>{item.name}</h3>
<span className={styles.price}>{item.price}</span>
</div> </div>
<p className={styles.description}>{item.description}</p> <p className={styles.description}>{item.description}</p>
</div> </div>
<div className={styles.priceBubble}>
<span className={styles.price}>{item.price}</span>
</div>
</motion.div> </motion.div>
))} ))}
</motion.div> </motion.div>
{/* View More Button */} {/* View More Button */}
<motion.div <div style={{ textAlign: "center", marginTop: "40px" }}>
className={styles.viewMoreContainer} <Link href="/menu" className={styles.tab}>
initial={{ opacity: 0, y: 20 }} View Full Menu
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
>
<Link href="/menu" className={styles.button}>
View More
</Link> </Link>
</motion.div> </div>
</section> </section>
); );
} }

4
src/components/PopularDishes/PopularDishes.tsx
View File

@ -51,9 +51,9 @@ export default function PopularDishes() {
return ( return (
<section className={styles.section} id="menu"> <section className={styles.section} id="menu">
<motion.div className={styles.smallHeading}> <motion.div className={styles.smallHeading}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} /> <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span> <span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} /> <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</motion.div> </motion.div>
<motion.h2 <motion.h2
className={styles.title} className={styles.title}

8
src/components/Testimonials/Testimonials.tsx
View File

@ -84,10 +84,10 @@ export default function Testimonials() {
return ( return (
<section className={styles.section}> <section className={styles.section}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}> <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
<Image src="/images/dinner.png" alt="icon" width={24} height={24} /> <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
<span>ANTALYA</span> <span>ANTALYA</span>
<Image src="/images/eat.png" alt="icon" width={24} height={24} /> <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
</div> </div>
<h2 className={styles.title}>TESTIMONIALS</h2> <h2 className={styles.title}>TESTIMONIALS</h2>
<div className={styles.sliderContainer}> <div className={styles.sliderContainer}>

138
src/utils/constant.ts
View File

@ -174,30 +174,138 @@ export const galleryData = [
export const menuData = [ export const menuData = [
{ {
category: 'Starters', category: 'Kebabs',
image: '/images/dish-1.png', image: '/images/hero-3.png',
items: [ items: [
{ name: 'Hummus', price: '$8', description: 'Creamy chickpea dip with tahini, lemon, and garlic.', image: '/images/dish-1.png' }, { name: 'Adana (Mild)', price: '$23.99', description: 'Two skewers of ground veal & lamb grilled on charcoal', image: '/images/hero-3.png', alt: 'Adana Kebab - Grilled ground veal and lamb skewers' },
{ name: 'Ezme', price: '$7', description: 'Spicy tomato and pepper salad with walnuts.', image: '/images/dish-2.png' }, { name: 'Veal Shish', price: '$29.99', description: 'Two skewers of veal tenderloin marinated in Turkish spices', image: '/images/dish-1.png', alt: 'Veal Shish Kebab - Marinated veal tenderloin skewers' },
{ name: 'Cacik', price: '$6', description: 'Yogurt with cucumber, garlic, and mint.', image: '/images/hero-1.png' } { name: 'Lamb Chops', price: '$37.99', description: 'Four pieces of Ontario lamb chops', image: '/images/dish-2.png', alt: 'Lamb Chops - Grilled Ontario lamb chops' },
{ name: 'Lamb Shish', price: '$28.99', description: 'Two skewers of marinated lamb meat charcoal grilled', image: '/images/hero-1.png', alt: 'Lamb Shish Kebab - Charcoal grilled lamb skewers' },
{ name: 'Kofta', price: '$23.99', description: 'Two skewers of ground veal and lamb, with parsley and onion, charcoal grill', image: '/images/hero-2.png', alt: 'Kofta Kebab - Ground veal and lamb with herbs' },
{ name: 'Chicken Shish', price: '$22.99', description: 'Two skewers of cubed chicken breast meat marinated over 24 hours', image: '/images/dish-1.png', alt: 'Chicken Shish Kebab - Marinated chicken breast skewers' },
{ name: 'Chicken Wings', price: '$21.99', description: 'Eight pieces of chicken wings marinated in spices and grilled over charcoal', image: '/images/dish-2.png', alt: 'Grilled Chicken Wings - Charcoal grilled spiced wings' },
{ name: 'Chicken Adana', price: '$22.99', description: 'Two skewers of ground chicken marinated with Turkish spices, bell peppers, garlic, onion and parsley grilled on charcoal', image: '/images/hero-3.png', alt: 'Chicken Adana Kebab - Spiced ground chicken skewers' }
] ]
}, },
{ {
category: 'Main Courses', category: 'Doner',
image: '/images/dish-1.png',
items: [
{ name: 'Mixed Doner', price: '$23.99', description: 'Meat doner and chicken doner, served with salad, grilled tomato & pepper, white rice or bulgur and served with freshly baked bread', image: '/images/dish-1.png', alt: 'Mixed Doner Platter - Combination of meat and chicken doner' },
{ name: 'Meat Doner', price: '$23.99', description: 'Veal and Lamb cooked on rotating spit, served with salad, bbq tomato & peppers, white rice or bulgur and served with freshly baked bread', image: '/images/dish-2.png', alt: 'Meat Doner Platter - Veal and lamb doner' },
{ name: 'Chicken Doner', price: '$22.99', description: 'Mediterranean style sliced chicken meat, served with salad, grilled tomato & pepper, white rice or bulgur and served with freshly baked bread', image: '/images/hero-1.png', alt: 'Chicken Doner Platter - Mediterranean style chicken' },
{ name: 'Iskender Kebab', price: '$26.99', description: 'Veal doner served on a bed of freshly baked bread, topped with special tomato sauce, served with grilled tomato, pepper and yogurt', image: '/images/hero-2.png', alt: 'Iskender Kebab - Veal doner with tomato sauce and yogurt' },
{ name: 'Chicken Iskender', price: '$25.99', description: 'Chicken Doner served on a bed of freshly baked bread, topped with special tomato sauce, served with grilled tomato, pepper and yogurt', image: '/images/hero-3.png', alt: 'Chicken Iskender - Chicken doner with tomato sauce' }
]
},
{
category: 'Pides',
image: '/images/dish-2.png',
items: [
{ name: 'Lahmacun', price: '$18.99', description: 'Ground beef blended with pepper, onion, tomato, parsley and herbs on a thin crust dough, serving with parsley, sumac onion, lemon', image: '/images/dish-2.png', alt: 'Lahmacun - Turkish flatbread with ground beef' },
{ name: 'Sujuk Pide', price: '$20.99', description: 'Turkish style sausage with mozzarella cheese, served with parsley, onion, lemon (* add mozzarella cheese 3.00)', image: '/images/hero-1.png', alt: 'Sujuk Pide - Turkish sausage flatbread' },
{ name: 'Cheese Pide', price: '$18.99', description: 'High quality mozzarella cheese in a thing crust pide dough, served with parsley, onion, lemon', image: '/images/hero-2.png', alt: 'Cheese Pide - Mozzarella cheese flatbread' },
{ name: 'Veal Doner Pide with Mozzarella Cheese', price: '$18.99', description: 'Veal doner with mozzarella cheese on pide dough', image: '/images/hero-3.png', alt: 'Veal Doner Pide - Doner meat with cheese' },
{ name: 'Veggie Pide', price: '$18.99', description: 'Red bell pepper, mushroom, onion with mozzarella cheese on a thin crust pide dough, served with parsley, sumac onion and lemon', image: '/images/dish-1.png', alt: 'Veggie Pide - Vegetable flatbread with cheese' },
{ name: 'Ground Beef Pide', price: '$19.99', description: 'Ground beef, onion, tomato, parsley and red pepper on a thin crust pide dough (* add mozzarella cheese 3.00, * add egg 3.00)', image: '/images/dish-2.png', alt: 'Ground Beef Pide - Beef flatbread' },
{ name: 'Spinach Cheese Pide', price: '$18.99', description: 'Spinach with mozzarella cheese on a thin crust pide dough, served with parsley, sumac onion and lemon', image: '/images/hero-1.png', alt: 'Spinach Cheese Pide - Spinach and cheese flatbread' },
{ name: 'Mixed Pide', price: '$20.99', description: 'Sujuk, Ground Beef, Mozzarella Cheese', image: '/images/hero-2.png', alt: 'Mixed Pide - Combination flatbread with sausage and beef' },
{ name: 'Chicken Doner Pide with Mozzarella Cheese', price: '$18.99', description: 'Chicken doner with mozzarella cheese on pide dough', image: '/images/hero-3.png', alt: 'Chicken Doner Pide - Chicken doner with cheese' }
]
},
{
category: 'Sandwiches & Wraps',
image: '/images/hero-1.png',
items: [
{ name: 'Meat Doner Sandwich', price: '$13.99', description: 'Freshly baked bread stuffed with veal & lamb doner, lettuce, tomato, onion and doner sauce', image: '/images/hero-1.png', alt: 'Meat Doner Sandwich - Veal and lamb doner in fresh bread' },
{ name: 'Meat Doner Wrap', price: '$12.99', description: 'Veal and lamb doner wrap with tomato, lettuce, onion and doner sauce', image: '/images/dish-1.png', alt: 'Meat Doner Wrap - Wrapped veal and lamb doner' },
{ name: 'Chicken Doner Wrap', price: '$12.99', description: 'Chicken doner wrap with tomato, lettuce, onion and doner sauce', image: '/images/dish-2.png', alt: 'Chicken Doner Wrap - Wrapped chicken doner' },
{ name: 'Chicken Doner Sandwich', price: '$12.99', description: 'Freshly baked bread stuffed with chicken doner, lettuce, tomato, onion and doner sauce', image: '/images/hero-2.png', alt: 'Chicken Doner Sandwich - Chicken doner in fresh bread' },
{ name: 'Adana Wrap', price: '$13.99', description: 'Adana kebab wrap with lettuce, tomato, onion and doner sauce', image: '/images/hero-3.png', alt: 'Adana Wrap - Wrapped Adana kebab' },
{ name: 'Kofta Wrap', price: '$13.99', description: 'Kofta kebab wrap with lettuce, tomato, onion and doner sauce', image: '/images/dish-1.png', alt: 'Kofta Wrap - Wrapped kofta kebab' }
]
},
{
category: 'Special Mix Platters',
image: '/images/hero-2.png',
items: [
{ name: 'Kebab Mix', price: '$84.99', description: 'All inclusive charcoal grilled mix platter, includes: Adana Kebab (1 skw), Kofta Kebab (1 skw), Chicken Shish (1 skw), Veal Shish (1 skw), Lamb Chops (2 pcs), Chicken Wings(4 pcs), Veal and Chicken Doner served with grilled tomato & pepper, house salad, white rice & bulgur topped with freshly baked bread ( Serves 2-3 People )', image: '/images/hero-2.png', alt: 'Kebab Mix Platter - Assorted grilled meats for 2-3 people' },
{ name: 'Chicken Lovers Mix', price: '$64.99', description: 'All inclusive charcoal grilled mix platter, includes: Chicken Adana Kebab (2 skw), Chicken Shish (1 skw), Chicken Wings(4 pcs) and Chicken Doner (2 portions) served with grilled tomato & pepper, house salad, white rice & bulgur topped with freshly baked bread ( Serves 2-3 People )', image: '/images/dish-1.png', alt: 'Chicken Lovers Mix - Assorted chicken dishes for 2-3 people' },
{ name: 'The Antalya Special', price: '$149.99', description: 'All inclusive charcoal grilled mix platter, includes: Adana Kebab (2 skw), Kofta Kebab (2 skw), Chicken Shish (2 skw), Lamb Chops (4 pcs), Chicken Wings(8 pcs), Veal and Chicken Doner served with grilled tomato & pepper, house salad, white rice & bulgur topped with three freshly baked bread ( Serves 5-6 People )', image: '/images/hero-3.png', alt: 'The Antalya Special - Grand mixed platter for 5-6 people' }
]
},
{
category: 'Specialty Dishes',
image: '/images/hero-3.png', image: '/images/hero-3.png',
items: [ items: [
{ name: 'Adana Kebab', price: '$18', description: 'Spicy minced lamb grilled on a skewer.', image: '/images/hero-3.png' }, { name: 'Manti', price: '$23.99', description: 'Hand crafted dumplings, filled with beef, spices topped with garlic yogurt and red manti sauce', image: '/images/dish-2.png', alt: 'Manti - Turkish beef dumplings with yogurt' },
{ name: 'Lamb Chops', price: '$24', description: 'Tender lamb chops grilled to perfection.', image: '/images/dish-1.png' }, { name: 'Ali Nazik', price: '$29.99', description: 'Charcoal grilled Veal tenderloin over a bed of creamy roasted eggplant. Topped with melted butter, BBQ tomato and pepper.', image: '/images/hero-1.png', alt: 'Ali Nazik - Veal on roasted eggplant' },
{ name: 'Chicken Shish', price: '$16', description: 'Marinated chicken cubes grilled on skewers.', image: '/images/hero-2.png' } { name: 'Adana Ali Nazik', price: '$29.99', description: 'Charcoal grilled adana kebab over a bed of creamy roasted eggplant, topped with melted butter, BBQ tomato and pepper', image: '/images/hero-2.png', alt: 'Adana Ali Nazik - Adana kebab on roasted eggplant' },
{ name: 'Yogurtlu Kuzu', price: '$23.99', description: 'Charcoal-grilled lamb on yogurt bread with sautéed red peppers and onions.', image: '/images/hero-3.png', alt: 'Yogurtlu Kuzu - Grilled lamb with yogurt' }
]
},
{
category: 'Appetizers',
image: '/images/dish-1.png',
items: [
{ name: 'Babaganoush', price: '$9.99', description: 'Roasted eggplant, yogurt, garlic, olive oil and served with freshly baked bread', image: '/images/dish-1.png', alt: 'Babaganoush - Roasted eggplant dip' },
{ name: 'Spicy Mashed Salad ( Ezme )', price: '$9.99', description: 'Fresh tomato, onion, bell pepper, parsley, seasoning and served with freshly baked bread', image: '/images/dish-2.png', alt: 'Ezme - Spicy tomato and pepper salad' },
{ name: 'Mixed Appetizer Plate', price: '$22.99', description: 'Babaganoush, Ezme, Hummus, Haydari and served with freshly baked bread', image: '/images/hero-1.png', alt: 'Mixed Appetizer Plate - Assorted Turkish appetizers' },
{ name: 'Sigara Boregi (5 pcs)', price: '$9.99', description: 'Fried cigar shaped phyllo dough pastries stuffed with feta cheese and parsley', image: '/images/hero-2.png', alt: 'Sigara Boregi - Fried cheese rolls' },
{ name: 'Haydari', price: '$9.99', description: 'Yogurt, mint, feta, olive oil, garlic, sea salt and served with freshly baked bread', image: '/images/hero-3.png', alt: 'Haydari - Yogurt dip with herbs' },
{ name: 'Hummus', price: '$9.99', description: 'Mashed chickpeas, tahini, lemon, olive oil and served with freshly baked bread', image: '/images/dish-1.png', alt: 'Hummus - Chickpea dip' },
{ name: 'Lentil Soup', price: '$8.99', description: 'Lentil, onion, carrot, mix of spicy and served with freshly baked bread', image: '/images/dish-2.png', alt: 'Lentil Soup - Turkish red lentil soup' }
]
},
{
category: 'Sides',
image: '/images/hero-2.png',
items: [
{ name: 'Rice', price: '$6.99', description: 'Turkish style white rice', image: '/images/hero-2.png', alt: 'Turkish Rice - White rice side dish' },
{ name: 'Yogurt', price: '$4.99', description: 'Fresh Turkish yogurt', image: '/images/dish-1.png', alt: 'Turkish Yogurt - Fresh yogurt' },
{ name: 'Kofta ( 1 skw )', price: '$8.99', description: 'Single skewer of kofta kebab', image: '/images/dish-2.png', alt: 'Kofta Skewer - Single kofta kebab' },
{ name: 'Lamb Chops ( 4 pcs )', price: '$27.99', description: 'Four pieces of grilled lamb chops', image: '/images/hero-1.png', alt: 'Lamb Chops Side - Four grilled lamb chops' },
{ name: 'Veal Shish ( 1 skw )', price: '$9.99', description: 'Single skewer of veal shish', image: '/images/hero-3.png', alt: 'Veal Shish Skewer - Single veal kebab' },
{ name: 'French Fries', price: '$6.99 - $8.99', description: 'Regular & Large crispy french fries', image: '/images/dish-1.png', alt: 'French Fries - Crispy golden fries' },
{ name: 'Bulgur', price: '$6.99', description: 'Turkish style bulgur wheat', image: '/images/dish-2.png', alt: 'Bulgur - Turkish wheat side dish' },
{ name: 'Bread', price: '$1.99', description: 'Freshly baked Turkish bread', image: '/images/hero-1.png', alt: 'Turkish Bread - Fresh baked bread' },
{ name: 'Adana ( 1 skw )', price: '$8.99', description: 'Single skewer of Adana kebab', image: '/images/hero-2.png', alt: 'Adana Skewer - Single Adana kebab' }
]
},
{
category: 'Salads',
image: '/images/dish-2.png',
items: [
{ name: 'Green Salad', price: '$10.99', description: 'Lettuce, onions, cucumber, feta, tomatoes', image: '/images/dish-2.png', alt: 'Green Salad - Fresh garden salad' },
{ name: 'Greek Salad', price: '$12.99', description: 'Tomato, onion, cucumber, lettuce, feta, black olives, olive oil', image: '/images/hero-1.png', alt: 'Greek Salad - Traditional Greek salad' },
{ name: 'Shepherd Salad', price: '$10.99', description: 'Tomato, cucumber, onion, olive oil, lemon', image: '/images/hero-2.png', alt: 'Shepherd Salad - Turkish choban salad' },
{ name: 'Caesar Salad', price: '$12.99', description: 'Romaine lettuce mixed with creamy Cesar dressing, topped with cherry tomatoes, Parmesan cheese & croutons', image: '/images/hero-3.png', alt: 'Caesar Salad - Classic Caesar salad' }
]
},
{
category: 'Drinks',
image: '/images/hero-1.png',
items: [
{ name: 'Soda', price: '$2.99', description: '(Iced tea, Coke, Diet Coke, Coke Zero, Gingerale, Sprite, Sparkling Water)', image: '/images/hero-1.png', alt: 'Soft Drinks - Assorted sodas' },
{ name: 'Bottle of Water', price: '$1.49', description: 'Bottled water', image: '/images/dish-1.png', alt: 'Bottled Water' },
{ name: 'Uludag (orange / white)', price: '$3.99', description: 'Turkish sparkling fruit drink', image: '/images/dish-2.png', alt: 'Uludag - Turkish sparkling drink' },
{ name: 'Ayran ( Yogurt Drink )', price: '$3.99', description: 'Traditional Turkish yogurt drink', image: '/images/hero-2.png', alt: 'Ayran - Turkish yogurt drink' },
{ name: 'Turkish Tea Pot', price: '$6.99', description: 'Traditional Turkish tea pot', image: '/images/hero-3.png', alt: 'Turkish Tea Pot - Traditional tea service' },
{ name: 'Parrier ( Carbonated Water )', price: '$3.99', description: 'Sparkling mineral water', image: '/images/dish-1.png', alt: 'Perrier - Sparkling water' },
{ name: 'Turkish Tea', price: '$1.99', description: 'Traditional Turkish black tea', image: '/images/dish-2.png', alt: 'Turkish Tea - Traditional black tea' },
{ name: 'Turkish Coffee', price: '$3.99', description: 'Authentic Turkish coffee', image: '/images/hero-1.png', alt: 'Turkish Coffee - Traditional coffee' },
{ name: 'Shalgam', price: '$2.99', description: 'Turkish turnip juice', image: '/images/hero-2.png', alt: 'Shalgam - Turkish turnip juice' },
{ name: 'Dimes Juice', price: '$2.99', description: 'Turkish fruit juice', image: '/images/hero-3.png', alt: 'Dimes Juice - Turkish fruit juice' }
] ]
}, },
{ {
category: 'Desserts', category: 'Desserts',
image: '/images/dish-2.png', image: '/images/dish-2.png',
items: [ items: [
{ name: 'Baklava', price: '$9', description: 'Layers of filo pastry filled with pistachios and syrup.', image: '/images/dish-2.png' }, { name: 'Baklava ( 3 pieces )', price: '$8.99', description: 'Traditional Turkish baklava with pistachios', image: '/images/dish-2.png', alt: 'Baklava - Traditional pistachio baklava' },
{ name: 'Künefe', price: '$10', description: 'Shredded pastry with cheese, soaked in syrup.', image: '/images/dish-1.png' }, { name: 'Trilice (Milk Cake)', price: '$9.99', description: 'Turkish three milk cake', image: '/images/hero-1.png', alt: 'Trilice - Turkish milk cake' },
{ name: 'Turkish Delight', price: '$5', description: 'Assorted traditional gelatin sweets.', image: '/images/hero-1.png' } { name: 'Sutlac', price: '$7.99', description: 'Turkish rice pudding', image: '/images/hero-2.png', alt: 'Sutlac - Turkish rice pudding' },
{ name: 'Cold Baklava ( 3 pieces )', price: '$9.99', description: 'Chilled baklava with cream', image: '/images/hero-3.png', alt: 'Cold Baklava - Chilled baklava dessert' }
] ]
} }
]; ];
@ -224,21 +332,21 @@ export const testimonialData = [
image: '/images/avatar-emily.png', image: '/images/avatar-emily.png',
text: 'A hidden gem! The charcoal-grilled kebabs are to die for, and the service is impeccable.' text: 'A hidden gem! The charcoal-grilled kebabs are to die for, and the service is impeccable.'
}, },
{ {
id: 4, id: 4,
name: 'Emma Williams', name: 'Emma Williams',
role: 'Travel Blogger', role: 'Travel Blogger',
image: '/images/avatar-emily.png', image: '/images/avatar-emily.png',
text: 'A hidden gem! The charcoal-grilled kebabs are to die for, and the service is impeccable.' text: 'A hidden gem! The charcoal-grilled kebabs are to die for, and the service is impeccable.'
}, },
{ {
id: 5, id: 5,
name: 'Emma Williams', name: 'Emma Williams',
role: 'Travel Blogger', role: 'Travel Blogger',
image: '/images/avatar-emily.png', image: '/images/avatar-emily.png',
text: 'A hidden gem! The charcoal-grilled kebabs are to die for, and the service is impeccable.' text: 'A hidden gem! The charcoal-grilled kebabs are to die for, and the service is impeccable.'
}, },
{ {
id: 6, id: 6,
name: 'Emma Williams', name: 'Emma Williams',
role: 'Travel Blogger', role: 'Travel Blogger',