From 268de203eb9d695d03a901b3ed540459ed3c9d05 Mon Sep 17 00:00:00 2001 From: akash Date: Fri, 28 Nov 2025 18:45:52 +0530 Subject: [PATCH] new menu page structure updated , all page meta tag layout updated & all menu list are updated --- public/robots.txt | 2 +- scripts/generate-sitemap.cjs | 2 +- scripts/image_alt_issues.csv | 12 +- scripts/seo-test-selenium.cjs | 2 +- src/app/about-us/AboutContent.tsx | 382 ++++++++++++++++ src/app/about-us/about.module.css | 4 +- src/app/about-us/page.tsx | 385 +---------------- src/app/blog/BlogContent.tsx | 122 ++++++ src/app/blog/[id]/blogDetail.module.css | 4 +- src/app/blog/[id]/page.tsx | 31 ++ src/app/blog/blog.module.css | 4 +- src/app/blog/page.tsx | 125 +----- src/app/contact/ContactContent.tsx | 403 +++++++++++++++++ src/app/contact/contact.module.css | 4 +- src/app/contact/page.tsx | 406 +----------------- src/app/gallery/GalleryContent.tsx | 221 ++++++++++ src/app/gallery/gallery.module.css | 5 +- src/app/gallery/page.tsx | 224 +--------- src/app/globals.css | 20 +- src/app/layout.tsx | 125 +++++- src/app/menu/MenuContent.tsx | 186 ++++++++ src/app/menu/menu.module.css | 295 ++++++++----- src/app/menu/page.tsx | 166 +------ src/app/page.tsx | 7 + src/components/Blogs/Blogs.tsx | 8 +- src/components/BookTable/BookTable.tsx | 14 +- src/components/Gallery/Gallery.tsx | 10 +- src/components/Hero/Hero.module.css | 2 +- src/components/Menu/Menu.module.css | 367 ++++++++-------- src/components/Menu/Menu.tsx | 114 ++--- .../PopularDishes/PopularDishes.tsx | 4 +- src/components/Testimonials/Testimonials.tsx | 8 +- src/utils/constant.ts | 138 +++++- 33 files changed, 2104 insertions(+), 1698 deletions(-) create mode 100644 src/app/about-us/AboutContent.tsx create mode 100644 src/app/blog/BlogContent.tsx create mode 100644 src/app/contact/ContactContent.tsx create mode 100644 src/app/gallery/GalleryContent.tsx create mode 100644 src/app/menu/MenuContent.tsx diff --git a/public/robots.txt b/public/robots.txt index 3bf2014..4d8c695 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -3,4 +3,4 @@ User-agent: * Disallow: # Sitemap -Sitemap: http://localhost:3000/sitemap.xml +Sitemap: https://antalya.metatronnest.com/sitemap.xml diff --git a/scripts/generate-sitemap.cjs b/scripts/generate-sitemap.cjs index c7aa71c..8df9558 100644 --- a/scripts/generate-sitemap.cjs +++ b/scripts/generate-sitemap.cjs @@ -3,7 +3,7 @@ const path = require("path"); const { SitemapStream, streamToPromise } = require("sitemap"); 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 // Utility to format URLs based on config diff --git a/scripts/image_alt_issues.csv b/scripts/image_alt_issues.csv index eed7e97..1777dad 100644 --- a/scripts/image_alt_issues.csv +++ b/scripts/image_alt_issues.csv @@ -1,10 +1,20 @@ Page URL,Image Src,Alt Text,Issue Type "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/","","Phone","Duplicate Alt (2 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/","","Phone","Duplicate Alt (2 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/","","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/","","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/","","Phone","Duplicate Alt (2 times)" diff --git a/scripts/seo-test-selenium.cjs b/scripts/seo-test-selenium.cjs index dd1c342..14080b0 100644 --- a/scripts/seo-test-selenium.cjs +++ b/scripts/seo-test-selenium.cjs @@ -222,7 +222,7 @@ async function checkSEO(url, siteDomain) { // ========================== (async () => { const sitemapUrl = "http://localhost:3000/sitemap.xml"; - const siteDomain = "http://localhost:3000"; + const siteDomain = "https://antalya.metatronnest.com"; console.log("📄 Fetching URLs from sitemap..."); const urls = await getUrlsFromSitemap(sitemapUrl); diff --git a/src/app/about-us/AboutContent.tsx b/src/app/about-us/AboutContent.tsx new file mode 100644 index 0000000..084ed03 --- /dev/null +++ b/src/app/about-us/AboutContent.tsx @@ -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 ( +
+ + + {/* Hero Banner */} + +
+

About Us

+

+ Home / About +

+
+ + + {/* About Section - No boxed structure */} +
+ + +
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+

Our Story

+

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

+

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

+ + View Our Menu + + + + Our Story + + +
+ + {/* Features Section - With real images */} +
+
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+ + What Makes Us Special + + + {featuresData.map((feature) => ( + +
+ {feature.title} +
+

{feature.title}

+

{feature.description}

+ + ))} + +
+ + {/* Why Choose Us Section */} +
+ + + Why Choose Us + + +
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+

Why Choose Us

+

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

+

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

+ + +
+ + {/* Testimonials Section - Auto Slider */} +
+
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+ + What Our Guests Say + + + + + + +

"{testimonialData[currentTestimonial].text}"

+
+
+ {testimonialData[currentTestimonial].name} +
+
+

{testimonialData[currentTestimonial].name}

+

{testimonialData[currentTestimonial].role}

+
+
+ + + + + + + {/* Slider dots */} +
+ {testimonialData.map((_, index) => ( +
+
+ + {/* FAQ Section - Image Left, FAQ Right */} +
+ + + Frequently Asked Questions + + +
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+

Frequently Asked Questions

+

+ Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below. +

+
+ {aboutFaqData.map((faq, index) => ( + + ))} +
+ + +
+ + {/* Call to Action */} + +
+
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+ + {ctaData.title} + + + {ctaData.subtitle} + + + + {ctaData.buttonText} + + +
+ + +
+
+ ); +} + +// FAQ Item Component +function FaqItem({ question, answer }: { question: string; answer: string }) { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ + {isOpen && ( +
+

{answer}

+
+ )} +
+ ); +} diff --git a/src/app/about-us/about.module.css b/src/app/about-us/about.module.css index 1437207..35c3831 100644 --- a/src/app/about-us/about.module.css +++ b/src/app/about-us/about.module.css @@ -5,7 +5,7 @@ } .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-size: cover; background-position: center; @@ -22,7 +22,7 @@ .heroTitle { font-family: var(--font-playfair); font-size: 4rem; - color: var(--color-gold); + color: #F5E6D3; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx index 3a7dcd4..ad281a9 100644 --- a/src/app/about-us/page.tsx +++ b/src/app/about-us/page.tsx @@ -1,382 +1,11 @@ -'use client' +import { Metadata } from "next"; +import AboutContent from "./AboutContent"; -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 const metadata: Metadata = { + title: "About Us | Antalya Restaurant", + description: "Learn about the rich history and culinary traditions of Antalya Restaurant. Meet our chefs and discover our passion for authentic Turkish food.", +}; export default function AboutPage() { - 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 ( -
- - - {/* Hero Banner */} - -
-

About Us

-

- Home / About -

-
- - - {/* About Section - No boxed structure */} -
- - -
- icon - ANTALYA - icon -
-

Our Story

-

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

-

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

- - View Our Menu - - - - Our Story - - -
- - {/* Features Section - With real images */} -
-
- icon - ANTALYA - icon -
- - What Makes Us Special - - - {featuresData.map((feature) => ( - -
- {feature.title} -
-

{feature.title}

-

{feature.description}

- - ))} - -
- - {/* Why Choose Us Section */} -
- - - Why Choose Us - - -
- icon - ANTALYA - icon -
-

Why Choose Us

-

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

-

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

- - -
- - {/* Testimonials Section - Auto Slider */} -
-
- icon - ANTALYA - icon -
- - What Our Guests Say - - - - - - -

"{testimonialData[currentTestimonial].text}"

-
-
- {testimonialData[currentTestimonial].name} -
-
-

{testimonialData[currentTestimonial].name}

-

{testimonialData[currentTestimonial].role}

-
-
- - - - - - - {/* Slider dots */} -
- {testimonialData.map((_, index) => ( -
-
- - {/* FAQ Section - Image Left, FAQ Right */} -
- - - Frequently Asked Questions - - -
- icon - ANTALYA - icon -
-

Frequently Asked Questions

-

- Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below. -

-
- {aboutFaqData.map((faq, index) => ( - - ))} -
- - -
- - {/* Call to Action */} - -
-
- icon - ANTALYA - icon -
- - {ctaData.title} - - - {ctaData.subtitle} - - - - {ctaData.buttonText} - - -
- - -
-
- ); -} - -// FAQ Item Component -function FaqItem({ question, answer }: { question: string; answer: string }) { - const [isOpen, setIsOpen] = useState(false); - - return ( -
- - {isOpen && ( -
-

{answer}

-
- )} -
- ); + return ; } diff --git a/src/app/blog/BlogContent.tsx b/src/app/blog/BlogContent.tsx new file mode 100644 index 0000000..17be4f0 --- /dev/null +++ b/src/app/blog/BlogContent.tsx @@ -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 ( +
+ + + +
+

Our Blog

+

+ Home / Blog +

+
+ + +
+
+ icon + ANTALYA + icon +
+

Stories From Our Kitchen, And Traditions

+

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

+
+ +
+ + {blogData.map((blog) => ( + +
+ {blog.title} +
+
+

+ {blog.title} +

+

{blog.date}

+

{blog.excerpt}

+ + Read More + +
+ + ))} + +
+ +
+
+ ); +} diff --git a/src/app/blog/[id]/blogDetail.module.css b/src/app/blog/[id]/blogDetail.module.css index cc79fdd..6b06eef 100644 --- a/src/app/blog/[id]/blogDetail.module.css +++ b/src/app/blog/[id]/blogDetail.module.css @@ -5,7 +5,7 @@ } .hero { - padding: 10rem 2rem; + padding: 200px 0px; background-size: cover; background-position: center; text-align: center; @@ -19,7 +19,7 @@ .heroTitle { font-family: var(--font-playfair); font-size: 4rem; - color: #c49c5c; + color: #F5E6D3; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; diff --git a/src/app/blog/[id]/page.tsx b/src/app/blog/[id]/page.tsx index b6ff9c3..f82b2c7 100644 --- a/src/app/blog/[id]/page.tsx +++ b/src/app/blog/[id]/page.tsx @@ -5,6 +5,37 @@ import Image from "next/image"; import Link from "next/link"; import styles from "./blogDetail.module.css"; 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 { + 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 export function generateStaticParams() { diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css index 6ac1516..1d0aee6 100644 --- a/src/app/blog/blog.module.css +++ b/src/app/blog/blog.module.css @@ -6,7 +6,7 @@ } .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-size: cover; background-position: center; @@ -21,7 +21,7 @@ .heroTitle { font-family: var(--font-playfair); font-size: var(--hero-title-size); - color: #c49c5c; + color: #F5E6D3; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index 834211a..1bbe31c 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -1,122 +1,11 @@ -'use client' +import { Metadata } from "next"; +import BlogContent from "./BlogContent"; -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 const metadata: Metadata = { + title: "Blog | Antalya Restaurant", + description: "Read our latest stories, recipes, and news from Antalya Restaurant. Discover the secrets of Turkish cuisine.", +}; export default function BlogPage() { - // 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 ( -
- - - -
-

Our Blog

-

- Home / Blog -

-
- - -
-
- icon - ANTALYA - icon -
-

Stories From Our Kitchen, And Traditions

-

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

-
- -
- - {blogData.map((blog) => ( - -
- {blog.title} -
-
-

- {blog.title} -

-

{blog.date}

-

{blog.excerpt}

- - Read More - -
- - ))} - -
- -
-
- ); + return ; } diff --git a/src/app/contact/ContactContent.tsx b/src/app/contact/ContactContent.tsx new file mode 100644 index 0000000..c53ca27 --- /dev/null +++ b/src/app/contact/ContactContent.tsx @@ -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({}); + const [captchaToken, setCaptchaToken] = useState(null); + const [alert, setAlert] = useState({ show: false, type: "", message: "" }); + const [charCount, setCharCount] = useState(0); + + const handleChange = (e: React.ChangeEvent) => { + 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) => { + 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: ` + Reservation Details:
+ Name: ${formData.name}
+ Email: ${formData.email}
+ Phone: ${formData.phone}
+ Guests: ${formData.guests}
+ Date: ${formData.date}
+ Time: ${formData.time}

+ Special Requests:
+ ${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 ( +
+ + + +
+

Contact Us

+

+ Home / Contact +

+
+ + +
+ + {/* Left Side - Book a Table Form */} + +
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+

Book a Table

+ +

+ Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine. +

+ + {alert.show && ( +
+ {alert.message} +
+ )} + +
+
+
+ + + {formErrors.name && {formErrors.name}} +
+ +
+ + + {formErrors.email && {formErrors.email}} +
+
+ +
+
+ + + {formErrors.phone && {formErrors.phone}} +
+ +
+ + +
+
+ +
+
+ + + {formErrors.date && {formErrors.date}} +
+ +
+ + + {formErrors.time && {formErrors.time}} +
+
+ +
+ + + {charCount}/500 characters +
+ +
+ + {formErrors.captcha && {formErrors.captcha}} +
+ + +
+ + + {/* Right Side - Location Info & Map */} + +
+
+ + + +
+ + + +
+ {/* Location Cards */} + + +
+
+ + + + +
+ + +
+ +
+
+ + + + +
+
+

Location

+

1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9

+

+ 1860 Appleby Line, Burlington, ON L7L 7H7 +

+
+
+ + + + {/* Map */} +
+ +
+ + + +
+ +
+
+ ); +} diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css index fc30665..0f724aa 100644 --- a/src/app/contact/contact.module.css +++ b/src/app/contact/contact.module.css @@ -5,7 +5,7 @@ } .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-size: cover; background-position: center; @@ -20,7 +20,7 @@ .heroTitle { font-family: var(--font-playfair); font-size: var(--hero-title-size); - color: #c49c5c; + color: #F5E6D3; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 72b4436..49997ee 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -1,403 +1,11 @@ -'use client' +import { Metadata } from "next"; +import ContactContent from "./ContactContent"; -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 const metadata: Metadata = { + title: "Contact Us | Antalya Restaurant", + description: "Get in touch with Antalya Restaurant. Find our location, opening hours, and contact details. Book your table today!", +}; export default function ContactPage() { - 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({}); - const [captchaToken, setCaptchaToken] = useState(null); - const [alert, setAlert] = useState({ show: false, type: "", message: "" }); - const [charCount, setCharCount] = useState(0); - - const handleChange = (e: React.ChangeEvent) => { - 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) => { - 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: ` - Reservation Details:
- Name: ${formData.name}
- Email: ${formData.email}
- Phone: ${formData.phone}
- Guests: ${formData.guests}
- Date: ${formData.date}
- Time: ${formData.time}

- Special Requests:
- ${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 ( -
- - - -
-

Contact Us

-

- Home / Contact -

-
- - -
- - {/* Left Side - Book a Table Form */} - -
- icon - ANTALYA - icon -
-

Book a Table

- -

- Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine. -

- - {alert.show && ( -
- {alert.message} -
- )} - -
-
-
- - - {formErrors.name && {formErrors.name}} -
- -
- - - {formErrors.email && {formErrors.email}} -
-
- -
-
- - - {formErrors.phone && {formErrors.phone}} -
- -
- - -
-
- -
-
- - - {formErrors.date && {formErrors.date}} -
- -
- - - {formErrors.time && {formErrors.time}} -
-
- -
- - - {charCount}/500 characters -
- -
- - {formErrors.captcha && {formErrors.captcha}} -
- - -
- - - {/* Right Side - Location Info & Map */} - -
-
- - - -
- - - -
- {/* Location Cards */} - - -
-
- - - - -
- - -
- -
-
- - - - -
-
-

Location

-

1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9

-

- 1860 Appleby Line, Burlington, ON L7L 7H7 -

-
-
- - - - {/* Map */} -
- -
- - - -
- -
-
- ); + return ; } diff --git a/src/app/gallery/GalleryContent.tsx b/src/app/gallery/GalleryContent.tsx new file mode 100644 index 0000000..4964124 --- /dev/null +++ b/src/app/gallery/GalleryContent.tsx @@ -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 ( +
+ + + +
+

Our Gallery

+

+ Home / Gallery +

+
+ + +
+
+ Antalya Dinner Icon + ANTALYA + Antalya Cutlery Icon +
+

A Visual Journey Through Authentic Turkish

+

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

+
+ +
+ + {categories.map(category => ( + setActiveTab(category)} + variants={tabVariants} + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + > + {category} + + ))} + + + + {filteredImages.map((img, index) => ( + openLightbox(index)} + variants={imageVariants} + whileHover={{ + scale: 1.05, + transition: { duration: 0.3 } + }} + > + {img.alt} +
+ View +
+ + ))} + +
+ + + {lightboxOpen && ( + + e.stopPropagation()} + initial={{ scale: 0.8, opacity: 0 }} + animate={{ scale: 1, opacity: 1 }} + exit={{ scale: 0.8, opacity: 0 }} + transition={{ duration: 0.3 }} + > + + + + {filteredImages[currentIndex].alt} + + + + + )} + + +
+
+ ); +} diff --git a/src/app/gallery/gallery.module.css b/src/app/gallery/gallery.module.css index 541eecd..c92d7cb 100644 --- a/src/app/gallery/gallery.module.css +++ b/src/app/gallery/gallery.module.css @@ -6,7 +6,7 @@ } .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-size: cover; background-position: center; @@ -21,7 +21,7 @@ .heroTitle { font-family: var(--font-playfair); font-size: var(--hero-title-size); - color: #c49c5c; + color: #F5E6D3; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; @@ -103,6 +103,7 @@ text-transform: uppercase; letter-spacing: 1px; font-weight: 600; + border-radius: 10px; } .tab:hover, diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index c913d6c..954450e 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -1,221 +1,11 @@ -'use client' +import { Metadata } from "next"; +import GalleryContent from "./GalleryContent"; -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 const metadata: Metadata = { + title: "Gallery | Antalya Restaurant", + description: "Explore our gallery to see our delicious dishes, elegant interior, and happy customers. Experience the visual delight of Antalya Restaurant.", +}; export default function GalleryPage() { - 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 ( -
- - - -
-

Our Gallery

-

- Home / Gallery -

-
- - -
-
- icon - ANTALYA - icon -
-

A Visual Journey Through Authentic Turkish

-

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

-
- -
- - {categories.map(category => ( - setActiveTab(category)} - variants={tabVariants} - whileHover={{ scale: 1.05 }} - whileTap={{ scale: 0.95 }} - > - {category} - - ))} - - - - {filteredImages.map((img, index) => ( - openLightbox(index)} - variants={imageVariants} - whileHover={{ - scale: 1.05, - transition: { duration: 0.3 } - }} - > - {img.alt} -
- View -
- - ))} - -
- - - {lightboxOpen && ( - - e.stopPropagation()} - initial={{ scale: 0.8, opacity: 0 }} - animate={{ scale: 1, opacity: 1 }} - exit={{ scale: 0.8, opacity: 0 }} - transition={{ duration: 0.3 }} - > - - - - {filteredImages[currentIndex].alt} - - - - - )} - - -
-
- ); + return ; } diff --git a/src/app/globals.css b/src/app/globals.css index e0cd8e1..8b68c30 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -22,7 +22,7 @@ --font-cormorant: 'Canva Sans', sans-serif; /* Responsive Font Size Variables - Desktop Optimized */ - --hero-title-size: 64px; + --hero-title-size: 56px; --section-heading-size: 42px; --main-heading-size: 36px; --subheading-size: 22px; @@ -88,7 +88,7 @@ button { /* Extra Large Desktop: 1920px+ */ @media (min-width: 1920px) { :root { - --hero-title-size: 68px; + --hero-title-size: 56px; --section-heading-size: 44px; --main-heading-size: 38px; --subheading-size: 24px; @@ -100,7 +100,7 @@ button { /* Large Desktop: 1600px */ @media (max-width: 1919px) and (min-width: 1600px) { :root { - --hero-title-size: 64px; + --hero-title-size: 56px; --section-heading-size: 42px; --main-heading-size: 36px; --subheading-size: 22px; @@ -112,7 +112,7 @@ button { /* Desktop: 1540px */ @media (max-width: 1599px) and (min-width: 1540px) { :root { - --hero-title-size: 62px; + --hero-title-size: 56px; --section-heading-size: 40px; --main-heading-size: 35px; --subheading-size: 22px; @@ -124,7 +124,7 @@ button { /* Desktop: 1440px */ @media (max-width: 1539px) and (min-width: 1440px) { :root { - --hero-title-size: 60px; + --hero-title-size: 56px; --section-heading-size: 39px; --main-heading-size: 34px; --subheading-size: 21px; @@ -136,7 +136,7 @@ button { /* Desktop: 1360px */ @media (max-width: 1439px) and (min-width: 1360px) { :root { - --hero-title-size: 58px; + --hero-title-size: 47px; --section-heading-size: 38px; --main-heading-size: 33px; --subheading-size: 21px; @@ -148,7 +148,7 @@ button { /* Desktop/Laptop: 1200px */ @media (max-width: 1359px) and (min-width: 1200px) { :root { - --hero-title-size: 56px; + --hero-title-size: 47px; --section-heading-size: 36px; --main-heading-size: 32px; --subheading-size: 20px; @@ -162,7 +162,7 @@ button { /* Laptop: 1024px */ @media (max-width: 1199px) and (min-width: 1024px) { :root { - --hero-title-size: 48px; + --hero-title-size: 44px; --section-heading-size: 32px; --main-heading-size: 28px; --subheading-size: 19px; @@ -174,7 +174,7 @@ button { /* Tablet Large: 992px */ @media (max-width: 1023px) and (min-width: 992px) { :root { - --hero-title-size: 46px; + --hero-title-size: 40px; --section-heading-size: 30px; --main-heading-size: 26px; --subheading-size: 18px; @@ -186,7 +186,7 @@ button { /* Tablet: 768px */ @media (max-width: 991px) and (min-width: 768px) { :root { - --hero-title-size: 42px; + --hero-title-size: 36px; --section-heading-size: 28px; --main-heading-size: 24px; --subheading-size: 17px; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f9e770e..bbb95a1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from "next"; import { Playfair_Display } from "next/font/google"; import "./globals.css"; import ScrollToTop from "@/components/ScrollToTop/ScrollToTop"; +import Navbar from '@/components/Navbar/Navbar'; +import Script from "next/script"; const playfairDisplay = Playfair_Display({ subsets: ["latin"], @@ -13,24 +15,139 @@ const playfairDisplay = Playfair_Display({ // We'll use system fonts as fallback in the CSS variables export const metadata: Metadata = { - title: "Antalya Restaurant - Book A Table", - description: "Experience luxury dining at Antalya Restaurant.", + metadataBase: new URL("https://antalya.metatronnest.com"), + 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({ children, }: { 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 ( + + {/* Preconnect for external scripts */} + + + + {/* Google Tag Manager */} +