509 lines
24 KiB
TypeScript
509 lines
24 KiB
TypeScript
'use client'
|
||
|
||
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, ctaData, aboutFaqData } from "@/utils/constant";
|
||
import Testimonials from "@/components/Testimonials/Testimonials";
|
||
import { useState, useEffect } from "react";
|
||
import { motion } from "framer-motion";
|
||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
import { Autoplay, Navigation } from 'swiper/modules';
|
||
import 'swiper/css';
|
||
import 'swiper/css/navigation';
|
||
import { FaStar, FaChevronLeft, FaChevronRight } from 'react-icons/fa';
|
||
|
||
interface Review {
|
||
text?: string;
|
||
description?: string;
|
||
snippet?: string;
|
||
review_text?: string;
|
||
body?: string;
|
||
content?: string;
|
||
rating: number;
|
||
profile_photo_url?: string;
|
||
author_profile_photo_url?: string;
|
||
user?: {
|
||
thumbnail?: string;
|
||
name?: string;
|
||
};
|
||
author_name?: string;
|
||
}
|
||
|
||
export default function AboutContent() {
|
||
const [reviews, setReviews] = useState<Review[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [expandedReview, setExpandedReview] = useState<number | null>(null);
|
||
const [swiperInstance, setSwiperInstance] = useState<any>(null);
|
||
|
||
// Auto-collapse expanded review after 10 seconds and handle autoplay
|
||
useEffect(() => {
|
||
if (expandedReview !== null) {
|
||
// Stop autoplay when a review is expanded
|
||
if (swiperInstance && swiperInstance.autoplay) {
|
||
swiperInstance.autoplay.stop();
|
||
}
|
||
|
||
const timer = setTimeout(() => {
|
||
setExpandedReview(null);
|
||
}, 5000); // 10 seconds
|
||
|
||
return () => {
|
||
clearTimeout(timer);
|
||
};
|
||
} else {
|
||
// Resume autoplay when reviews are collapsed
|
||
if (swiperInstance && swiperInstance.autoplay) {
|
||
swiperInstance.autoplay.start();
|
||
}
|
||
}
|
||
}, [expandedReview, swiperInstance]);
|
||
|
||
// 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, y: 30 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
duration: 0.7
|
||
}
|
||
}
|
||
};
|
||
|
||
const slideInRight = {
|
||
hidden: { opacity: 0, y: 30 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
duration: 0.7
|
||
}
|
||
}
|
||
};
|
||
|
||
const staggerContainer = {
|
||
hidden: { opacity: 0 },
|
||
visible: {
|
||
opacity: 1,
|
||
transition: {
|
||
staggerChildren: 0.2,
|
||
delayChildren: 0.1
|
||
}
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
async function loadReviews() {
|
||
try {
|
||
const res = await fetch("/api/reviews");
|
||
if (!res.ok) throw new Error("Failed to fetch");
|
||
const data = await res.json();
|
||
const cleaned = (data.reviews || []).filter((r: Review) =>
|
||
(r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
|
||
r.rating >= 4
|
||
);
|
||
setReviews(cleaned);
|
||
} catch (error) {
|
||
console.error("About: Failed to fetch reviews", error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
loadReviews();
|
||
}, []);
|
||
|
||
const displayedReviews = reviews.length > 0 && reviews.length < 3
|
||
? [...reviews, ...reviews, ...reviews]
|
||
: reviews;
|
||
|
||
function renderStars(rating: number) {
|
||
return [...Array(5)].map((_, i) => (
|
||
<FaStar
|
||
key={i}
|
||
style={{ color: i < rating ? '#ffc107' : '#e4e5e9', fontSize: '1.2rem', marginRight: '2px' }}
|
||
/>
|
||
));
|
||
}
|
||
|
||
function getReviewText(r: Review) {
|
||
return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
|
||
}
|
||
|
||
function truncateText(text: string) {
|
||
return text.length > 200 ? text.substring(0, 200) + "..." : text;
|
||
}
|
||
|
||
function getProfileImage(r: Review) {
|
||
const url = r.profile_photo_url || r.author_profile_photo_url || r.user?.thumbnail;
|
||
if (!url) return null;
|
||
return url.startsWith("http") ? url : `https://lh3.googleusercontent.com/${url}`;
|
||
}
|
||
|
||
function getInitials(name: string) {
|
||
if (!name) return "U";
|
||
return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||
}
|
||
|
||
|
||
return (
|
||
<main className={styles.main}>
|
||
|
||
|
||
{/* 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="/" prefetch={false}>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="Our Story Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Our Story Decorative Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.sectionTitle}>Our Story</h2>
|
||
<p className={styles.text}>
|
||
Antalya began with a simple vision - to share the flavours, warmth, and culinary traditions of Turkey with our community. What started as a humble kitchen has grown into a beloved dining destination, celebrated for its hospitality, charcoal-grilled artistry, and authentic taste.
|
||
</p>
|
||
<p className={styles.text}>
|
||
From handcrafted dishes to time-honoured recipes passed through generations, every plate tells a story of heritage and passion. Our chefs blend tradition with refined technique, using the freshest ingredients to create experiences that feel familiar yet unforgettable.
|
||
</p>
|
||
<p className={styles.text}>
|
||
At Antalya, dining is more than a meal - it is a celebration of culture, flavour, and shared moments. We welcome you to discover the essence of Turkish hospitality and the rich culinary legacy we proudly nurture.
|
||
</p>
|
||
<Link href="/antalya-restaurant-menu" className={styles.menuButton} prefetch={false}>
|
||
VIEW OUR MENU
|
||
</Link>
|
||
</motion.div>
|
||
<motion.div className={styles.imageBlock} variants={slideInRight}>
|
||
<Image src="/images/about-us/our-story.webp" 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="Features Section Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Features Section Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<motion.h2
|
||
className={styles.sectionTitleCenter}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
variants={fadeInUp}
|
||
>
|
||
What Sets Antalya Apart
|
||
</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/about-us/why-choose-us.webp" 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="Why Choose Us Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Why Choose Us 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 meals - we curate meaningful dining moments. Our commitment to authenticity ensures that every ingredient, seasoning, and cooking method honours true Turkish culinary heritage.
|
||
</p>
|
||
<p className={styles.text}>
|
||
From our charcoal-grilled kebabs to handcrafted baklava, every dish is made with care to transport you to the bustling streets of Istanbul and the coastal charm of Antalya. We take pride in delivering warmth, flavour, and hospitality that make every visit unforgettable.
|
||
</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="Testimonials Section Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Testimonials Section Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.sectionTitleCenter}>What Our Guests Say</h2>
|
||
|
||
<div className={styles.testimonialSlider}>
|
||
<button className={`${styles.sliderBtn} prev-btn`}>
|
||
<FaChevronLeft />
|
||
</button>
|
||
|
||
<div style={{ flex: 1, width: '100%' }}>
|
||
{loading ? (
|
||
<div className="text-center" style={{ color: '#F5E6D3', padding: '40px' , textAlign: 'center'}}>
|
||
<p>Loading reviews...</p>
|
||
</div>
|
||
) : (
|
||
<Swiper
|
||
spaceBetween={30}
|
||
slidesPerView={1}
|
||
loop={true}
|
||
navigation={{
|
||
prevEl: '.prev-btn',
|
||
nextEl: '.next-btn',
|
||
}}
|
||
autoplay={{
|
||
delay: 4000,
|
||
disableOnInteraction: false,
|
||
}}
|
||
onSwiper={setSwiperInstance}
|
||
modules={[Autoplay, Navigation]}
|
||
className="testimonial_list"
|
||
style={{ paddingBottom: '30px' }}
|
||
>
|
||
{displayedReviews.map((r, index) => {
|
||
const fullText = getReviewText(r);
|
||
const isExpanded = expandedReview === index;
|
||
const profileImg = getProfileImage(r);
|
||
const name = r.user?.name || r.author_name || "Customer";
|
||
|
||
return (
|
||
<SwiperSlide key={index} style={{ height: 'auto' }}>
|
||
<div className={styles.testimonialCard}>
|
||
<div className={styles.testimonialAuthor}>
|
||
<div className={styles.authorImageWrapper}>
|
||
{profileImg ? (
|
||
<img
|
||
src={profileImg}
|
||
alt={name}
|
||
className={styles.authorImage}
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
onError={(e) => ((e.target as HTMLImageElement).src = '/images/placeholder.png')}
|
||
/>
|
||
) : (
|
||
<div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#333', fontSize: '24px', fontWeight: 'bold', color: '#fff' }}>
|
||
{getInitials(name)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={styles.authorInfo}>
|
||
<p className={styles.authorName}>{name}</p>
|
||
<div className={styles.stars} style={{ justifyContent: 'start', marginBottom: 0 }}>
|
||
{renderStars(r.rating)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className={styles.testimonialText}>
|
||
"{isExpanded ? fullText : truncateText(fullText)}"
|
||
</p>
|
||
|
||
{fullText.length > 300 && (
|
||
<button
|
||
style={{ background: 'none', border: 'none', color: '#a67c52', cursor: 'pointer', fontWeight: 'bold', fontSize: '1rem', marginTop: '10px' }}
|
||
onClick={() => setExpandedReview(isExpanded ? null : index)}
|
||
>
|
||
{isExpanded ? "Read Less" : "Read More"}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</SwiperSlide>
|
||
);
|
||
})}
|
||
</Swiper>
|
||
)}
|
||
</div>
|
||
|
||
<button className={`${styles.sliderBtn} next-btn`}>
|
||
<FaChevronRight />
|
||
</button>
|
||
</div>
|
||
|
||
<div className={styles.buttonContainer}>
|
||
<a
|
||
href="https://www.google.com/search?sca_esv=fb3147f266a54277&sxsrf=AE3TifPK9lVB_UK5Mt9ko4Ht65w63RgqUQ:1764431326889&si=AMgyJEtREmoPL4P1I5IDCfuA8gybfVI2d5Uj7QMwYCZHKDZ-E3A-qenJpQm2J1V3Wa6_UKYzIQhT0idJrAopWIgZ0RiDDHrNP0RtPpfTzWgU2637exPDNkEZu0WuVN4TEdgoYqqtQwcWsOUIFi4JvvmrZPyybRzrcg%3D%3D&q=Antalya+Turkish+Restaurant+Reviews&sa=X&ved=2ahUKEwic4uDz2peRAxUbTmwGHWwWBRoQ0bkNegQIJRAE&biw=1528&bih=786&dpr=1.25&zx=1764431335803&no_sw_cr=1#lrd=0x882bf532910f4e25:0x4aee10507689253d,3,,,,"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className={styles.button}
|
||
>
|
||
Review Us on Google
|
||
</a>
|
||
</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/about-us/faq.webp"
|
||
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="FAQ Section Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="FAQ Section Decorative Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.faqTitle}>FAQ – Your Questions Answered</h2>
|
||
<p className={styles.faqSubtitle}>
|
||
Find helpful answers to common questions about dining at Antalya.
|
||
</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="About CTA Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="About CTA 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} prefetch={false}>
|
||
{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>
|
||
);
|
||
}
|