diff --git a/public/images/antalya-logo.png b/public/images/antalya-logo.png
new file mode 100644
index 0000000..650b408
Binary files /dev/null and b/public/images/antalya-logo.png differ
diff --git a/public/images/avatar-anya.png b/public/images/avatar-anya.png
new file mode 100644
index 0000000..fd6e876
Binary files /dev/null and b/public/images/avatar-anya.png differ
diff --git a/public/images/avatar-emily.png b/public/images/avatar-emily.png
new file mode 100644
index 0000000..138a0ca
Binary files /dev/null and b/public/images/avatar-emily.png differ
diff --git a/public/images/avatar-michael.png b/public/images/avatar-michael.png
new file mode 100644
index 0000000..d32cdc6
Binary files /dev/null and b/public/images/avatar-michael.png differ
diff --git a/public/images/avatar-sarah.png b/public/images/avatar-sarah.png
new file mode 100644
index 0000000..11a27e3
Binary files /dev/null and b/public/images/avatar-sarah.png differ
diff --git a/public/images/avatar-tariq.png b/public/images/avatar-tariq.png
new file mode 100644
index 0000000..ebbdf2a
Binary files /dev/null and b/public/images/avatar-tariq.png differ
diff --git a/public/images/avatar-tuest.png b/public/images/avatar-tuest.png
new file mode 100644
index 0000000..787fd89
Binary files /dev/null and b/public/images/avatar-tuest.png differ
diff --git a/public/images/logo-header.png b/public/images/logo-header.png
index 0af3bf3..532f135 100644
Binary files a/public/images/logo-header.png and b/public/images/logo-header.png differ
diff --git a/public/images/testimonial.png b/public/images/testimonial.png
new file mode 100644
index 0000000..be9fa9f
Binary files /dev/null and b/public/images/testimonial.png differ
diff --git a/public/images/testimonials-bg.png b/public/images/testimonials-bg.png
new file mode 100644
index 0000000..b006892
Binary files /dev/null and b/public/images/testimonials-bg.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d20c86b..f16f831 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import Header from "@/components/Header/Header";
+import Navbar from "@/components/Navbar/Navbar";
 import Hero from "@/components/Hero/Hero";
 import PopularDishes from "@/components/PopularDishes/PopularDishes";
 import About from "@/components/About/About";
@@ -11,7 +11,7 @@ import Footer from "@/components/Footer/Footer";
 export default function Home() {
   return (
     <main>
-      <Header />
+      <Navbar />
       <Hero />
       <PopularDishes />
       <About />
diff --git a/src/components/About/About.module.css b/src/components/About/About.module.css
index 66444f0..1e9f28d 100644
--- a/src/components/About/About.module.css
+++ b/src/components/About/About.module.css
@@ -1,5 +1,5 @@
 .section {
-    padding: 80px 20px;
+    /* padding: 80px 20px; */
     background-color: #0a0a0a;
     /* Dark background matching the theme */
     display: flex;
@@ -8,13 +8,13 @@
 }
 
 .container {
-    max-width: 1400px;
+    /* max-width: 1400px; */
     width: 100%;
     display: flex;
-    border: 4px solid #C5A059;
+    border: 14px solid rgb(196, 156, 92);
     /* Main Gold Border */
     position: relative;
-    background-color: #111;
+    background-color: #212121;
     /* Inner border effect handled by padding + background or pseudo-element if needed, 
        but image shows a solid border containing both image and text */
 }
@@ -27,7 +27,7 @@
     left: 10px;
     right: 10px;
     bottom: 10px;
-    border: 1px solid rgba(197, 160, 89, 0.3);
+    border: 5px solid rgb(196, 156, 92);
     pointer-events: none;
     z-index: 10;
 }
@@ -79,7 +79,7 @@
 .subtitle {
     font-family: var(--font-cinzel), serif;
     font-size: 1.4rem;
-    color: #e0e0e0;
+    color: #C5A059;
     margin-bottom: 40px;
     font-weight: 400;
 }
diff --git a/src/components/About/AboutTailwind.tsx b/src/components/About/AboutTailwind.tsx
new file mode 100644
index 0000000..7ab4fbb
--- /dev/null
+++ b/src/components/About/AboutTailwind.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+
+export default function AboutSection() {
+    return (
+        <section className="relative w-full bg-[#0a0a0a] py-20 px-4 sm:px-6 lg:px-8 flex justify-center items-center">
+            {/* Main Container with Gold Border */}
+            <div className="relative w-full max-w-7xl border-4 border-[#C5A059] p-2 sm:p-4">
+
+                {/* Inner Flex Container */}
+                <div className="flex flex-col lg:flex-row w-full h-full">
+
+                    {/* Left: Image Section */}
+                    <div className="relative w-full lg:w-1/2 h-[400px] lg:h-[600px]">
+                        <Image
+                            src="/images/restaurant-interior.png"
+                            alt="Restaurant Interior"
+                            fill
+                            className="object-cover"
+                            priority
+                        />
+                    </div>
+
+                    {/* Right: Content Section */}
+                    <div className="relative w-full lg:w-1/2 bg-[#111] p-8 lg:p-16 flex flex-col justify-center items-center text-center">
+
+                        {/* Background Pattern Overlay (Optional) */}
+                        <div className="absolute inset-0 opacity-5 pointer-events-none bg-[url('/images/pattern-overlay.png')] bg-repeat"></div>
+
+                        {/* Ornamental Icon */}
+                        <div className="mb-6">
+                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="#C5A059" />
+                            </svg>
+                        </div>
+
+                        {/* Title */}
+                        <h2 className="text-[#C5A059] font-serif text-4xl lg:text-6xl uppercase tracking-widest mb-4">
+                            About Antalya
+                        </h2>
+
+                        {/* Subtitle */}
+                        <h3 className="text-[#E0C080] font-serif text-xl lg:text-2xl mb-8 font-light italic">
+                            Experience Unforgettable Turkish Fusion
+                        </h3>
+
+                        {/* Description */}
+                        <p className="text-gray-300 font-sans text-sm lg:text-base leading-relaxed max-w-lg mb-10 opacity-80">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
+                            auctor prid vinds the es numre testur ad auipmot et durs ain a anportos
+                            reda lirdore in agne romraligut.
+                        </p>
+
+                        {/* Button */}
+                        <button className="px-8 py-3 border-2 border-[#C5A059] text-[#C5A059] uppercase tracking-wider hover:bg-[#C5A059] hover:text-black transition-all duration-300 font-medium">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/src/components/Blogs/Blogs.module.css b/src/components/Blogs/Blogs.module.css
index dcf2df6..5662e34 100644
--- a/src/components/Blogs/Blogs.module.css
+++ b/src/components/Blogs/Blogs.module.css
@@ -1,6 +1,6 @@
 .section {
     padding: 80px 20px;
-    background-color: #2a0a0a;
+    background-color: #3a0c08;
     /* Dark red/brown background */
     background-image: url('/images/pattern-overlay.png');
     /* Optional pattern */
diff --git a/src/components/Gallery/Gallery.module.css b/src/components/Gallery/Gallery.module.css
index 3d20add..70239c0 100644
--- a/src/components/Gallery/Gallery.module.css
+++ b/src/components/Gallery/Gallery.module.css
@@ -1,17 +1,18 @@
 .section {
     padding: 6rem 2rem;
-    background-color: #150505;
+    background-color: #3a0c08;
     /* Very dark red/brown */
     text-align: center;
 }
 
 .title {
-    font-family: var(--font-playfair);
-    font-size: 2.5rem;
-    color: var(--color-gold);
-    margin-bottom: 4rem;
+    font-family: var(--font-cinzel), serif;
+    font-size: 3.5rem;
+    color: #C5A059;
+    margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: 2px;
+    line-height: 1.2;
 }
 
 .grid {
@@ -27,8 +28,14 @@
     height: 300px;
     cursor: pointer;
     overflow: hidden;
-    border: 1px solid var(--color-gold);
+    /* Outer golden border */
+    border: 4px solid #C5A059;
+    /* Inner border effect using box-shadow */
+    box-shadow:
+        inset 0 0 0 3px #2a1810,
+        inset 0 0 0 6px #C5A059;
     transition: transform 0.3s ease;
+    background-color: #1a0f08;
 }
 
 .imageWrapper:hover {
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index 2772bef..d2c53ba 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -67,9 +67,11 @@
     color: var(--color-gold);
     font-size: 1.5rem;
     cursor: pointer;
+    position: relative;
+    left: -16px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .nav {
         display: block;
     }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 1b60f7a..6e96ffa 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -8,7 +8,7 @@ export default function Header() {
                 <Link href="/" className={styles.logo}>
                     {/* Placeholder for logo icon if needed */}
                     <div className={styles.logoText}>
-                        ANTALYA <span>RESTAURANT</span>
+                         <span>ANTALYA</span>
                     </div>
                 </Link>
 
diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css
index 6327062..d7bcadc 100644
--- a/src/components/Hero/Hero.module.css
+++ b/src/components/Hero/Hero.module.css
@@ -1,6 +1,6 @@
 .hero {
     position: relative;
-    height: 70vh;
+    height: 100vh;
     width: 100%;
     overflow: hidden;
     margin-top: 0;
@@ -33,16 +33,17 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 0 2rem;
+    align-items: flex-start;
+    text-align: left;
+    padding: 0 4rem 0 6rem;
 }
 
 .content {
-    max-width: 800px;
+    max-width: 900px;
     animation: fadeInUp 1s ease-out 0.5s forwards;
     opacity: 0;
     transform: translateY(20px);
+    text-align: left;
 }
 
 @keyframes fadeInUp {
@@ -58,6 +59,7 @@
     color: #fff;
     margin-bottom: 1rem;
     line-height: 1.2;
+    text-align: left;
 }
 
 .subtitle {
@@ -66,12 +68,13 @@
     color: var(--color-gold);
     margin-bottom: 2rem;
     font-style: italic;
+    text-align: left;
 }
 
 .buttons {
     display: flex;
     gap: 1.5rem;
-    justify-content: center;
+    justify-content: flex-start;
 }
 
 .btn {
@@ -131,6 +134,10 @@
 }
 
 @media (max-width: 768px) {
+    .overlay {
+        padding: 0 2rem;
+    }
+
     .title {
         font-size: 2.5rem;
     }
@@ -138,4 +145,9 @@
     .subtitle {
         font-size: 1.2rem;
     }
+
+    .buttons {
+        flex-direction: row;
+        gap: 1rem;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index f1a975b..23deced 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -10,19 +10,19 @@ const slides = [
         id: 1,
         image: '/images/hero-1.png',
         title: 'Experience Turkish Fusion at Antalya',
-        subtitle: 'An authentic obsession. kebabs, grill & more.'
+        subtitle: 'An authentic charcoal  kebab grill experience.'
     },
     {
         id: 2,
         image: '/images/hero-2.png',
         title: 'Luxury Dining Atmosphere',
-        subtitle: 'Where tradition meets elegance.'
+        subtitle: 'Where tradition meets elegance and flavor.'
     },
     {
         id: 3,
         image: '/images/hero-3.png',
         title: 'Masterfully Crafted Flavors',
-        subtitle: 'Taste the essence of Anatolia.'
+        subtitle: 'Taste the authentic essence of Anatolia.'
     }
 ]
 
diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
index 16572dd..7533449 100644
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -3,20 +3,20 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 80px;
-    background-color: #0a0a0a;
+    height: 70px;
+    background-color: rgba(26, 26, 26, 0.9);
+    backdrop-filter: blur(10px);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 40px;
+    padding: 0 3rem;
     z-index: 1000;
     transition: all 0.3s ease;
 }
 
 .navbarScrolled {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
-    background-color: rgba(10, 10, 10, 0.95);
-    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
+    background-color: rgba(26, 26, 26, 0.95);
 }
 
 .logoContainer {
@@ -27,28 +27,29 @@
 }
 
 .logoImage {
-    height: 60px;
+    height: 50px;
     width: auto;
     object-fit: contain;
 }
 
 .desktopMenu {
     display: flex;
-    gap: 30px;
+    gap: 2.5rem;
+    align-items: center;
 }
 
 .navLink {
-    color: #fff;
+    color: #C9A865;
     text-decoration: none;
-    font-size: 0.95rem;
-    font-weight: 500;
-    text-transform: uppercase;
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: 0.5px;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .navLink:hover {
-    color: #C5A059;
+    color: #E8C88E;
 }
 
 .navLink::after {
@@ -58,7 +59,7 @@
     left: 0;
     width: 0;
     height: 2px;
-    background-color: #C5A059;
+    background-color: #C9A865;
     transition: width 0.3s;
 }
 
@@ -89,9 +90,11 @@
 .hamburgerOpen .bar:nth-child(1) {
     transform: translateY(9px) rotate(45deg);
 }
+
 .hamburgerOpen .bar:nth-child(2) {
     opacity: 0;
 }
+
 .hamburgerOpen .bar:nth-child(3) {
     transform: translateY(-9px) rotate(-45deg);
 }
@@ -151,4 +154,4 @@
     .navbar {
         padding: 0 20px;
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 8c44cf2..a634ab9 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -8,9 +8,9 @@ import styles from './Navbar.module.css'
 const navLinks = [
     { name: 'Home', href: '/' },
     { name: 'About', href: '#about' },
-    { name: 'Services', href: '#services' },
-    { name: 'Menu', href: '#menu' },
     { name: 'Gallery', href: '#gallery' },
+    { name: 'Menu', href: '#menu' },
+    { name: 'Blog', href: '#blog' },
     { name: 'Contact', href: '#contact' },
 ]
 
@@ -78,7 +78,7 @@ export default function Navbar() {
             <div className={styles.logoContainer}>
                 <Link href="/" onClick={closeMenu}>
                     <Image
-                        src="/images/logo-header.png"
+                        src="/images/antalya-logo.png"
                         alt="Antalya Restaurant"
                         width={200}
                         height={60}
diff --git a/src/components/PopularDishes/PopularDishes.module.css b/src/components/PopularDishes/PopularDishes.module.css
index ed9bd85..f64ae12 100644
--- a/src/components/PopularDishes/PopularDishes.module.css
+++ b/src/components/PopularDishes/PopularDishes.module.css
@@ -1,6 +1,6 @@
 .section {
     padding: 80px 20px;
-    background-color: #2a0a0a;
+    background-color: #3a0c08;
     /* Dark red/brown background */
     background-image: url('/images/pattern-overlay.png');
     /* Optional pattern */
@@ -54,7 +54,7 @@
 .dishName {
     font-family: var(--font-cinzel), serif;
     font-size: 1.8rem;
-    color: #3e2723;
+    color: #c5a059;
     /* Dark brown text */
     margin-bottom: 15px;
     font-weight: 600;
@@ -64,7 +64,7 @@
     font-family: var(--font-cinzel), serif;
     /* Using serif as per image look */
     font-size: 1rem;
-    color: #5d4037;
+    color: #836839;
     margin-bottom: 30px;
     line-height: 1.6;
     max-width: 90%;
@@ -75,7 +75,7 @@
     display: inline-block;
     padding: 12px 30px;
     border: 2px solid #C5A059;
-    color: #5d4037;
+    color: #C5A059;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
     font-size: 0.9rem;
diff --git a/src/components/Testimonials/Testimonials.module.css b/src/components/Testimonials/Testimonials.module.css
index c400e53..392d8ad 100644
--- a/src/components/Testimonials/Testimonials.module.css
+++ b/src/components/Testimonials/Testimonials.module.css
@@ -2,11 +2,11 @@
     position: relative;
     padding: 80px 20px;
     background-color: #0a0a0a;
-    /* Fallback dark background */
-    background-image: url('/images/testimonial-bg-luxury.png');
-    /* Placeholder */
+    /* Dark background matching design */
+    background-image: url('/images/testimonials-bg.png');
     background-size: cover;
     background-position: center;
+    background-repeat: no-repeat;
     color: #fff;
     overflow: hidden;
     min-height: 800px;
@@ -46,8 +46,8 @@
 }
 
 .card {
-    background: #1a1a1a;
-    border: 3px solid #C5A059;
+    background: #242323;
+    border: 14px solid rgb(196, 156, 92);
     border-radius: 30px;
     padding: 40px 30px;
     text-align: center;
@@ -73,8 +73,8 @@
     margin: 0 auto 20px;
     position: relative;
     border-radius: 50%;
-    padding: 4px;
-    background: linear-gradient(to bottom, #C5A059, #8A6E36);
+    padding: 7px;
+    background: rgb(196, 156, 92);
     /* Gold gradient border effect */
 }
 
@@ -83,7 +83,6 @@
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
-    border: 4px solid #1a1a1a;
     /* Inner border to separate from gold */
     background-color: #333;
 }
@@ -130,11 +129,11 @@
 }
 
 .prevArrow {
-    left: -25;
+    left: -25px;
 }
 
 .nextArrow {
-    right: -25;
+    right: -25px;
 }
 
 /* Lanterns decoration placeholder */
diff --git a/src/components/Testimonials/Testimonials.tsx b/src/components/Testimonials/Testimonials.tsx
index b4a5e6c..6b35242 100644
--- a/src/components/Testimonials/Testimonials.tsx
+++ b/src/components/Testimonials/Testimonials.tsx
@@ -16,14 +16,14 @@ const testimonials = [
     {
         id: 2,
         name: 'Tuest Khan, [City]',
-        image: '/images/avatar-tuest.png',
+        image: '/images/avatar-anya.png',
         text: '“An unforgettable journey of flavors and warmth. The ambiance is exquisite is Turkish fusion dishes simply divine.”',
         rating: 5
     },
     {
         id: 3,
         name: 'Tariq Name, [City]',
-        image: '/images/avatar-tariq.png',
+        image: '/images/avatar-anya.png',
         text: '“An unforgettable journey of flavors and warmth. The ambiene exquisite, and Turkish fusion dishes simply divine.”',
         rating: 5
     },
@@ -37,14 +37,14 @@ const testimonials = [
     {
         id: 5,
         name: 'Michael Chen, [City]',
-        image: '/images/avatar-tuest.png', // Reusing for now
+        image: '/images/avatar-sarah.png', // Reusing for now
         text: '“A hidden gem! The fusion of flavors is incredible. Will definitely come back.”',
         rating: 5
     },
     {
         id: 6,
         name: 'Emily Davis, [City]',
-        image: '/images/avatar-tariq.png', // Reusing for now
+        image: '/images/avatar-sarah.png', // Reusing for now
         text: '“The staff was so welcoming and the food was absolutely delicious. 10/10 experience.”',
         rating: 5
     }
diff --git a/src/components/Testimonials/TestimonialsTailwind.tsx b/src/components/Testimonials/TestimonialsTailwind.tsx
new file mode 100644
index 0000000..26c3e14
--- /dev/null
+++ b/src/components/Testimonials/TestimonialsTailwind.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface Testimonial {
+    id: number;
+    name: string;
+    city: string;
+    image: string;
+    text: string;
+    rating: number;
+}
+
+const testimonials: Testimonial[] = [
+    {
+        id: 1,
+        name: 'Anya Petrova',
+        city: 'City',
+        image: '/images/testimonials/avatar1.jpg',
+        text: '"An unforgettable journey of flavors and warmt. The ambiance is exquisite is Turkish fusion dishes simply divine.',
+        rating: 5,
+    },
+    {
+        id: 2,
+        name: 'Tuest Khan',
+        city: 'City',
+        image: '/images/testimonials/avatar2.jpg',
+        text: '"An unforgettable journey of flavors and warmt. The ambiance is exquisite is Turkish fusion dishes simply divine.',
+        rating: 5,
+    },
+    {
+        id: 3,
+        name: 'Tariq Name',
+        city: 'City',
+        image: '/images/testimonials/avatar3.jpg',
+        text: '"An unfogettable journey of flavors and warmt. The ambiene exquisite, and Turkish fusion dishes simply divine.',
+        rating: 5,
+    },
+];
+
+const TestimonialsSection: React.FC = () => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const handlePrev = () => {
+        setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 3 : prev - 1));
+    };
+
+    const handleNext = () => {
+        setCurrentIndex((prev) => (prev === testimonials.length - 3 ? 0 : prev + 1));
+    };
+
+    return (
+        <section className="relative w-full bg-[#0a0a0a] py-16 md:py-20 lg:py-24 overflow-hidden">
+            {/* Background Pattern */}
+            <div className="absolute inset-0 opacity-30">
+                <div className="absolute inset-0" style={{
+                    backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255, 215, 0, 0.1) 1px, transparent 1px)',
+                    backgroundSize: '40px 40px'
+                }}></div>
+            </div>
+
+            {/* Decorative Lanterns */}
+            <div className="absolute top-8 right-8 md:right-16 lg:right-24 flex gap-6 z-10">
+                <div className="w-12 h-16 md:w-14 md:h-20 relative">
+                    <svg viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
+                        <rect x="2" y="8" width="44" height="8" rx="2" fill="#8B6914" />
+                        <path d="M8 16 L8 12 L24 4 L40 12 L40 16" fill="#B8860B" />
+                        <rect x="8" y="16" width="32" height="36" rx="4" fill="url(#lanternGradient)" />
+                        <rect x="12" y="20" width="24" height="28" rx="2" fill="#FDB913" opacity="0.9" />
+                        <line x1="24" y1="0" x2="24" y2="8" stroke="#8B6914" strokeWidth="2" />
+                        <defs>
+                            <linearGradient id="lanternGradient" x1="24" y1="16" x2="24" y2="52" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#D4AF37" />
+                                <stop offset="1" stopColor="#8B6914" />
+                            </linearGradient>
+                        </defs>
+                    </svg>
+                </div>
+                <div className="w-10 h-14 md:w-12 md:h-18 relative mt-8">
+                    <svg viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
+                        <rect x="2" y="8" width="44" height="8" rx="2" fill="#8B6914" />
+                        <path d="M8 16 L8 12 L24 4 L40 12 L40 16" fill="#B8860B" />
+                        <rect x="8" y="16" width="32" height="36" rx="4" fill="url(#lanternGradient2)" />
+                        <rect x="12" y="20" width="24" height="28" rx="2" fill="#FDB913" opacity="0.9" />
+                        <line x1="24" y1="0" x2="24" y2="8" stroke="#8B6914" strokeWidth="2" />
+                        <defs>
+                            <linearGradient id="lanternGradient2" x1="24" y1="16" x2="24" y2="52" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#D4AF37" />
+                                <stop offset="1" stopColor="#8B6914" />
+                            </linearGradient>
+                        </defs>
+                    </svg>
+                </div>
+            </div>
+
+            <div className="container mx-auto px-4 relative z-10">
+                {/* Title */}
+                <h2 className="text-center text-4xl md:text-5xl lg:text-6xl font-serif font-bold mb-12 md:mb-16 lg:mb-20 tracking-[0.2em] text-transparent bg-clip-text bg-gradient-to-r from-[#D4AF37] via-[#F4E5A6] to-[#D4AF37]">
+                    TESTIMONIALS
+                </h2>
+
+                {/* Testimonials Container */}
+                <div className="relative max-w-7xl mx-auto">
+                    {/* Navigation Arrows */}
+                    <button
+                        onClick={handlePrev}
+                        className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 md:-translate-x-12 z-20 text-[#D4AF37] hover:text-[#F4E5A6] transition-colors duration-300"
+                        aria-label="Previous testimonial"
+                    >
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M25 30 L15 20 L25 10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                    </button>
+
+                    <button
+                        onClick={handleNext}
+                        className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 md:translate-x-12 z-20 text-[#D4AF37] hover:text-[#F4E5A6] transition-colors duration-300"
+                        aria-label="Next testimonial"
+                    >
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M15 10 L25 20 L15 30" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                    </button>
+
+                    {/* Cards Grid */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+                        {testimonials.map((testimonial) => (
+                            <div
+                                key={testimonial.id}
+                                className="relative group"
+                            >
+                                {/* Card with Gradient Border */}
+                                <div className="relative p-[3px] rounded-[28px] bg-gradient-to-br from-[#D4AF37] via-[#F4E5A6] to-[#D4AF37]">
+                                    <div className="relative bg-[#2a2a2a] rounded-[26px] p-8 md:p-10 h-full flex flex-col items-center">
+                                        {/* Avatar */}
+                                        <div className="relative mb-6">
+                                            <div className="relative p-[3px] rounded-full bg-gradient-to-br from-[#D4AF37] via-[#F4E5A6] to-[#D4AF37]">
+                                                <div className="relative w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden bg-[#2a2a2a]">
+                                                    <Image
+                                                        src={testimonial.image}
+                                                        alt={testimonial.name}
+                                                        fill
+                                                        className="object-cover"
+                                                        sizes="(max-width: 768px) 96px, 112px"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {/* Name and City */}
+                                        <div className="text-center mb-6">
+                                            <p className="text-[#C9C9C9] text-base md:text-lg font-light tracking-wide">
+                                                — {testimonial.name}, <span className="text-[#999999]">[{testimonial.city}]</span>
+                                            </p>
+                                        </div>
+
+                                        {/* Testimonial Text */}
+                                        <div className="flex-grow flex items-center mb-6">
+                                            <p className="text-white text-center text-base md:text-lg leading-relaxed font-light tracking-wide">
+                                                {testimonial.text}
+                                            </p>
+                                        </div>
+
+                                        {/* Star Rating */}
+                                        <div className="flex gap-2">
+                                            {[...Array(testimonial.rating)].map((_, index) => (
+                                                <svg
+                                                    key={index}
+                                                    width="24"
+                                                    height="24"
+                                                    viewBox="0 0 24 24"
+                                                    fill="none"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    className="w-6 h-6 md:w-7 md:h-7"
+                                                >
+                                                    <path
+                                                        d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+                                                        fill="#D4AF37"
+                                                    />
+                                                </svg>
+                                            ))}
+                                        </div>
+                                        <button className="px-8 py-3 border-2 border-[#C5A059] text-[#C5A059] uppercase tracking-wider hover:bg-[#C5A059] hover:text-black transition-all duration-300 font-medium">
+                                            Learn More
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                    
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TestimonialsSection;