From 4c5ce6a1bfea6fc965ab6ed60b6a63419e4117b6 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Mon, 20 Jul 2026 20:50:53 +0530
Subject: [PATCH] about page images updated

---
 src/app/about/page.tsx       | 104 +++++++++++++----------------------
 src/app/reservation/page.tsx |   4 +-
 2 files changed, 39 insertions(+), 69 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 6690c11..bf2ce2d 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -90,7 +90,7 @@ export default function AboutPage() {
         <div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-24 pb-24">
           {/* Faint temple sketch background */}
           <div className="absolute inset-0 z-0 pointer-events-none select-none">
-            <Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
+            <Image src="/images/about/bg/abt-bg.webp" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
           </div>
 
           <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6">
@@ -154,31 +154,31 @@ export default function AboutPage() {
               </AnimatedSection>
 
               {/* CENTER & RIGHT ARCH/CARD COMPOSITION */}
-              <div className="flex-1 flex justify-center items-center mt-12 lg:mt-0 w-full">
+              <div className="hidden lg:flex flex-1 justify-center items-center mt-12 lg:mt-0 w-full">
 
                 {/* px buffer on mobile/tablet so absolute badges don't overflow viewport */}
                 <div className="relative px-[70px] lg:px-0">
                   <div className="relative overflow-visible"> {/* The Arch Group Container */}
 
                     {/* Outer arch line decoration */}
-                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />
+                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full z-0 pointer-events-none" />
 
                     {/* The Arch Image container */}
                     <AnimatedSection variant="scaleUp" delay={0.2}>
-                      <div className="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden border-[6px] border-[#fdfaf4] shadow-[0_0_40px_rgba(0,0,0,0.1)] z-10">
-                        <div className="absolute inset-0 rounded-t-full border border-[#bc9e65]/30 z-20 pointer-events-none" />
-                        <Image
+                      <div className="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden z-10">
+                        <div className="absolute inset-0 rounded-t-full pointer-events-none" />
+                        {/* <Image
                           src="/images/story_arch.png"
                           alt="My Dosa Place"
                           fill
                           className="object-cover"
-                        />
+                        /> */}
                       </div>
                     </AnimatedSection>
 
                     {/* Made With Love Badge (Overlapping left of arch) */}
                     <AnimatedSection variant="fadeRight" delay={0.4} className="absolute top-1/2 -translate-y-1/2 -left-6 sm:-left-16 lg:-left-16 z-20">
-                      <div className="bg-[#0a4a2b] border border-[#bc9e65] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
+                      <div className="bg-[#0a4a2b] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
                         <div className="absolute inset-1.5 border border-[#bc9e65]/40 rounded-xl pointer-events-none" />
                         <svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
                           <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
@@ -308,7 +308,7 @@ export default function AboutPage() {
         <div className="relative w-full overflow-hidden">
           {/* Background image overlay */}
           <div className="absolute inset-0 z-0 pointer-events-none select-none mix-blend-multiply opacity-50">
-            <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
+            <Image src="/images/about/bg/our-values-bg.webp" alt="" fill className="object-cover object-center" />
           </div>
 
           {/* Intricate Gold Border */}
@@ -484,23 +484,23 @@ export default function AboutPage() {
 
           {/* Background texture for the whole section */}
           <div className="absolute inset-0 pointer-events-none">
-            <Image src="/images/faq-bg.png" alt="" fill className="object-cover object-center" />
+            <Image src="/images/about/bg/faq-bg.webp" alt="" fill className="object-cover object-center" />
           </div>
 
-          <div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
+          <div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row rounded-xl lg:rounded-3xl overflow-hidden mb-12">
 
             {/* ── LEFT: Ornate dark green panel ── */}
             <div className="relative flex-[1.2] lg:flex-none lg:w-[60%] z-20 flex flex-col justify-center">
 
               {/* The Inset Gold Ornate Border */}
-              <div className="absolute inset-4 lg:inset-6 border-[1.5px] border-[#bc9e65] rounded-xl lg:rounded-tr-[100px] lg:rounded-br-[100px] pointer-events-none" />
+              <div className="absolute inset-4 lg:inset-6 rounded-xl lg:rounded-tr-[100px] lg:rounded-br-[100px] pointer-events-none" />
 
               {/* Corner flourishes */}
-              <div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-[#bc9e65] pointer-events-none" />
-              <div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-[#bc9e65] pointer-events-none" />
+              {/* <div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-[#bc9e65] pointer-events-none" />
+              <div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-[#bc9e65] pointer-events-none" /> */}
 
               {/* Hanging Lamp graphic (top left) */}
-              <div className="absolute top-4 left-16 sm:left-24 w-12 h-32 pointer-events-none flex flex-col items-center">
+              {/* <div className="absolute top-4 left-16 sm:left-24 w-12 h-32 pointer-events-none flex flex-col items-center">
                 <div className="w-[1.5px] h-16 bg-[#bc9e65]" />
                 <svg className="w-8 h-12 text-[#bc9e65]" viewBox="0 0 24 36" fill="currentColor">
                   <path d="M4 12 L20 12 L16 20 L8 20 Z" />
@@ -509,20 +509,20 @@ export default function AboutPage() {
                   <circle cx="12" cy="10" r="2" />
                   <circle cx="12" cy="22" r="2" />
                 </svg>
-              </div>
+              </div> */}
 
               {/* Overlapping Lotus Emblem on the right edge */}
-              <div className="absolute top-1/2 -right-10 -translate-y-1/2 w-20 h-20 bg-[#062013] rounded-full border-[1.5px] border-[#bc9e65] flex items-center justify-center z-30 hidden lg:flex shadow-xl">
+              {/* <div className="absolute top-1/2 -right-10 -translate-y-1/2 w-20 h-20 bg-[#062013] rounded-full border-[1.5px] border-[#bc9e65] flex items-center justify-center z-30 hidden lg:flex shadow-xl">
                 <svg className="w-10 h-10 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 2C12 2 15 7 15 11C15 15 12 18 12 18C12 18 9 15 9 11C9 7 12 2 12 2Z" />
                   <path d="M12 2C12 2 18 7 20 11C22 15 18 18 18 18C18 18 16 15 15 11C14 7 12 2 12 2Z" opacity="0.7" />
                   <path d="M12 2C12 2 6 7 4 11C2 15 6 18 6 18C6 18 8 15 9 11C10 7 12 2 12 2Z" opacity="0.7" />
                 </svg>
-              </div>
+              </div> */}
 
-              <AnimatedSection variant="fadeUp" delay={0.1} className="relative z-10 flex flex-col items-center text-center mt-12">
+              <AnimatedSection variant="fadeUp" delay={0.1} className="relative z-10 flex flex-col items-start text-left mt-12">
                 {/* Header */}
-                <div className="flex flex-col items-center mb-10 w-full max-w-2xl mx-auto">
+                <div className="flex flex-col items-start mb-10 w-full max-w-2xl">
                   <div className="flex items-center gap-4 mb-3">
                     <div className="w-10 h-[1.5px] bg-[#bc9e65]" />
                     <span className="font-sans text-[10px] sm:text-xs tracking-[0.3em] text-[#bc9e65] uppercase font-bold">We're Here To Help</span>
@@ -531,18 +531,18 @@ export default function AboutPage() {
                   <h2 className="font-serif text-4xl sm:text-5xl lg:text-[54px] text-white tracking-wide mb-4 leading-tight">
                     Frequently Asked Questions
                   </h2>
-                  <div className="flex items-center justify-center mb-6">
+                  <div className="flex items-center justify-start mb-6">
                     <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                       <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                     </svg>
                   </div>
-                  <p className="font-sans text-[#e8dcb5] text-sm sm:text-base max-w-md mx-auto">
+                  <p className="font-sans text-[#e8dcb5] text-sm sm:text-base max-w-md">
                     Find answers to common questions about our food, services and more.
                   </p>
                 </div>
 
                 {/* FAQ accordion */}
-                <div className="space-y-4 w-full max-w-2xl mx-auto">
+                <div className="space-y-4 w-full max-w-2xl">
                   {[
                     {
                       q: "Do you offer vegan options?",
@@ -554,16 +554,16 @@ export default function AboutPage() {
                       a: "We source our ingredients locally whenever possible and import authentic spices directly from South India.",
                       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M4 12c0-4.418 3.582-8 8-8s8 3.582 8 8M3 14h18M6 14v4a2 2 0 002 2h8a2 2 0 002-2v-4" /></svg>
                     },
-                  {
-                    q: "Do you provide catering services?",
-                    a: "Yes, we offer catering for events of all sizes. Contact us for our specialized catering menu.",
-                    icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M8 9h8m-8 4h6m-3-9v4a5 5 0 00-5 5H4a7 7 0 017-7V4a1 1 0 011-1h2a1 1 0 011 1v4a7 7 0 017 7h-2a5 5 0 00-5-5V4" /></svg>
-                  },
-                  {
-                    q: "What are your opening hours?",
-                    a: "We are open from 11:30 AM to 10:00 PM from Tuesday to Sunday. We are closed on Mondays.",
-                    icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                  }
+                    {
+                      q: "Do you provide catering services?",
+                      a: "Yes, we offer catering for events of all sizes. Contact us for our specialized catering menu.",
+                      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M8 9h8m-8 4h6m-3-9v4a5 5 0 00-5 5H4a7 7 0 017-7V4a1 1 0 011-1h2a1 1 0 011 1v4a7 7 0 017 7h-2a5 5 0 00-5-5V4" /></svg>
+                    },
+                    {
+                      q: "What are your opening hours?",
+                      a: "We are open from 11:30 AM to 10:00 PM from Tuesday to Sunday. We are closed on Mondays.",
+                      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                    }
                   ].map((f, i) => {
                     const isOpen = openFaq === i;
                     return (
@@ -708,44 +708,14 @@ export default function AboutPage() {
         {/* ══════════════════════════════════════════
           SECTION 4 — CTA  (sandstone bg, ornate border)
       ══════════════════════════════════════════ */}
-        <div className="relative w-full bg-[#fdfaf4] p-4 sm:p-6 lg:p-8">
+        <div className="relative w-full overflow-hidden">
 
           {/* The Outer Ornate Gold Border Container */}
-          <div className="relative w-full border-[1.5px] border-[#bc9e65] min-h-[700px] flex flex-col justify-between overflow-visible">
+          <div className="relative w-full min-h-[700px] flex flex-col justify-between overflow-hidden">
 
-            {/* Corner ornaments */}
-            {/* Top Left */}
-            <div className="absolute top-0 left-0 w-16 h-16 pointer-events-none">
-              <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
-                <path d="M0,0 L50,0 Q50,50 0,50 Z" />
-                <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
-              </svg>
-            </div>
-            {/* Top Right */}
-            <div className="absolute top-0 right-0 w-16 h-16 pointer-events-none transform rotate-90">
-              <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
-                <path d="M0,0 L50,0 Q50,50 0,50 Z" />
-                <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
-              </svg>
-            </div>
-            {/* Bottom Left */}
-            <div className="absolute bottom-0 left-0 w-16 h-16 pointer-events-none transform -rotate-90">
-              <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
-                <path d="M0,0 L50,0 Q50,50 0,50 Z" />
-                <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
-              </svg>
-            </div>
-            {/* Bottom Right */}
-            <div className="absolute bottom-0 right-0 w-16 h-16 pointer-events-none transform rotate-180">
-              <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
-                <path d="M0,0 L50,0 Q50,50 0,50 Z" />
-                <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
-              </svg>
-            </div>
-
-            {/* Background Image: story_bg.png has the pots and leaves and temple/palace */}
+            {/* Background Image: cta-bg.webp */}
             <div className="absolute inset-0 pointer-events-none z-0">
-              <Image src="/images/story_bg.png" alt="" fill className="object-cover object-bottom opacity-80 mix-blend-multiply" />
+              <Image src="/images/about/bg/cta-bg.webp" alt="" fill priority className="object-cover object-center" />
             </div>
 
             {/* Center Content */}
diff --git a/src/app/reservation/page.tsx b/src/app/reservation/page.tsx
index 0c2495c..4dfb122 100644
--- a/src/app/reservation/page.tsx
+++ b/src/app/reservation/page.tsx
@@ -34,7 +34,7 @@ export default function ReservationPage() {
       <div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
         
         {/* Full Page Background with Pots and Temple */}
-        {/* <div className="absolute inset-0 z-0 pointer-events-none select-none">
+        <div className="absolute inset-0 z-0 pointer-events-none select-none">
           <Image
             src="/images/about/bg/reservation-bg.webp"
             alt="Royal Background"
@@ -42,7 +42,7 @@ export default function ReservationPage() {
             priority
             className="object-cover object-bottom opacity-90 mix-blend-multiply"
           />
-        </div> */}
+        </div>
 
         {/* Ornate Page Border */}
         {/* <div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">