118 lines
4.1 KiB
TypeScript
118 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
import styles from './Testimonials.module.css'
|
|
|
|
const testimonials = [
|
|
{
|
|
id: 1,
|
|
name: 'Anya Petrova',
|
|
image: '/images/avatar-anya.png',
|
|
text: '"An unforgettable journey of flavors and warmth. The ambiance is exquisite and the Turkish fusion dishes are simply divine."',
|
|
rating: 5
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Tuest Khan',
|
|
image: '/images/avatar-tuest.png',
|
|
text: '"The best Turkish restaurant in town! Every dish is prepared with authentic spices and love. The staff made us feel like family."',
|
|
rating: 5
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Tariq Ahmed',
|
|
image: '/images/avatar-tariq.png',
|
|
text: '"Exceptional quality and presentation. The kebabs were perfectly grilled and the baklava for dessert was heavenly!"',
|
|
rating: 5
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Sarah Jenkins',
|
|
image: '/images/avatar-sarah.png',
|
|
text: '"Amazing service and beautiful atmosphere. The mixed grill platter is a must-try. Highly recommend for special occasions!"',
|
|
rating: 5
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Michael Chen',
|
|
image: '/images/avatar-michael.png',
|
|
text: '"A hidden gem! The fusion of traditional Turkish flavors with modern techniques is incredible. Will definitely come back soon."',
|
|
rating: 5
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Emily Davis',
|
|
image: '/images/avatar-emily.png',
|
|
text: '"The staff was so welcoming and the food was absolutely delicious. From appetizers to dessert, everything was perfect. 10/10 experience!"',
|
|
rating: 5
|
|
}
|
|
]
|
|
|
|
export default function Testimonials() {
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
const nextSlide = () => {
|
|
setCurrentIndex((prev) => (prev + 1) % (testimonials.length - 2))
|
|
}
|
|
|
|
const prevSlide = () => {
|
|
setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 3 : prev - 1))
|
|
}
|
|
|
|
// Auto-slide effect
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
nextSlide()
|
|
}, 5000) // Change slide every 5 seconds
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
// Get the 3 visible testimonials
|
|
const getVisibleTestimonials = () => {
|
|
const items = []
|
|
for (let i = 0; i < 3; i++) {
|
|
const index = (currentIndex + i) % testimonials.length
|
|
items.push(testimonials[index])
|
|
}
|
|
return items
|
|
}
|
|
|
|
const visibleItems = getVisibleTestimonials()
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<h2 className={styles.title}>TESTIMONIALS</h2>
|
|
|
|
<div className={styles.sliderContainer}>
|
|
<button className={`${styles.arrow} ${styles.prevArrow}`} onClick={prevSlide}>←</button>
|
|
|
|
{visibleItems.map((item) => (
|
|
<div key={item.id} className={styles.card}>
|
|
<div className={styles.avatarContainer}>
|
|
<div className={styles.avatar} style={{ overflow: 'hidden' }}>
|
|
<div className={styles.authorImageWrapper}>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.name}
|
|
fill
|
|
className={styles.authorImage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 className={styles.name}>— {item.name}</h3>
|
|
<p className={styles.text}>{item.text}</p>
|
|
<div className={styles.stars}>
|
|
{'★'.repeat(item.rating)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<button className={`${styles.arrow} ${styles.nextArrow}`} onClick={nextSlide}>→</button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|