images updated

src/app/about/page.tsx

@@ -87,7 +87,7 @@ export default function AboutPage() {
         {/* ══════════════════════════════════════════
           SECTION 1 — Welcome & Features (Image match)
       ══════════════════════════════════════════ */}
-      <div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-16 pb-24">
+        <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" />
@@ -101,7 +101,7 @@ export default function AboutPage() {
               <AnimatedSection variant="fadeLeft" delay={0.1}>
                 <div className="w-full lg:w-[400px] select-text z-20 relative">
                   <div className="flex items-center gap-2 mb-2">
-                  <svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
+                    <svg className="w-8 h-8 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>
                     <p className="font-sans text-[11px] tracking-[0.2em] text-[#bc9e65] uppercase font-bold">
@@ -193,7 +193,7 @@ export default function AboutPage() {
                     </AnimatedSection>
 
                     {/* Right Card — only at lg+ where two-column layout provides horizontal space */}
-                  <AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-35 lg:-right-20 z-20 hidden md:block">
+                    <AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-25 -right-35 lg:-right-20 z-20 hidden md:block">
                       <div className="bg-[#fdfaf4] border border-[#bc9e65] rounded-3xl p-8 w-[260px] shadow-2xl relative">
                         <div className="absolute inset-1.5 border border-[#bc9e65]/30 rounded-[20px] pointer-events-none" />
 
@@ -214,15 +214,15 @@ export default function AboutPage() {
 
                           <ul className="w-full flex flex-col gap-4 text-left">
                             <li className="flex items-center gap-4">
-                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
+                              <svg className="w-8 h-8 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
                               <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every meal.</span>
                             </li>
                             <li className="flex items-center gap-4">
-                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
+                              <svg className="w-8 h-8 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                               <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every guest.</span>
                             </li>
                             <li className="flex items-center gap-4">
-                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
+                              <svg className="w-8 h-8 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                               <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every time.</span>
                             </li>
                           </ul>
@@ -480,17 +480,17 @@ export default function AboutPage() {
         {/* ══════════════════════════════════════════
           SECTION 3 — FAQ  (dark green & gold ornate split layout)
       ══════════════════════════════════════════ */}
-      <div className="relative w-full bg-[#04120a] overflow-hidden pt-10 pb-40">
+        <div className="relative w-full bg-[#04120a] overflow-hidden pt-24 pb-24">
 
           {/* Background texture for the whole section */}
-        <div className="absolute inset-0 pointer-events-none opacity-30">
+          <div className="absolute inset-0 pointer-events-none">
-          <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
+            <Image src="/images/faq-bg.png" 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">
 
             {/* ── LEFT: Ornate dark green panel ── */}
-          <div className="relative flex-[1.2] lg:flex-none lg:w-[60%] bg-[#062013] z-20 p-6 sm:p-10 lg:p-16 flex flex-col justify-center">
+            <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" />
@@ -641,21 +641,19 @@ export default function AboutPage() {
             </div>
 
             {/* ── RIGHT: photo full height ── */}
-          <div className="relative w-full lg:w-[40%] min-h-[400px] lg:min-h-0 z-0 bg-[#062013]">
+            {/* <div className="relative w-full lg:w-[40%] min-h-[400px] lg:min-h-0 z-0 bg-[#062013]">
               <Image
                 src="/images/my_dosa_place_interior.png"
                 alt="My Dosa Place interior"
                 fill
                 className="object-cover object-center"
               />
-            {/* Dark gradient overlay matching reference */}
               <div className="absolute inset-0 bg-gradient-to-l from-transparent via-[#062013]/20 to-[#062013] opacity-90" />
 
-            {/* Hanging lights accents in the photo side */}
               <div className="absolute top-10 right-10 flex items-center justify-center w-8 h-8 rounded-full border border-[#bc9e65] text-[#bc9e65]">
                 <div className="w-2 h-2 rounded-full bg-[#bc9e65]" />
               </div>
-          </div>
+            </div> */}
 
           </div>
 

src/app/blog/[slug]/page.tsx

@@ -20,10 +20,21 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     notFound();
   }
 
-  // Split content into paragraphs for custom structural rendering
+  // Replace the 2-image grid in content with the actual small images for this post
-  const paragraphs = post.content.split('\n\n').filter(p => p.trim() !== '');
+  let processedContent = post.content;
-  const firstParagraph = paragraphs[0] || "";
+  if (post.smallImages && post.smallImages.length >= 2) {
-  const remainingParagraphs = paragraphs.slice(1) || [];
+    // Replace first and second <img src="..." in the grid div
+    let count = 0;
+    processedContent = processedContent.replace(
+      /<img src=\"([^\"]+)\"/g,
+      (_match: string, _src: string) => {
+        count++;
+        if (count === 1) return `<img src="${post.smallImages![0]}"`;
+        if (count === 2) return `<img src="${post.smallImages![1]}"`;
+        return _match;
+      }
+    );
+  }
 
   return (
     <SubpageLayout>
@@ -40,7 +51,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
           <AnimatedSection variant="scaleUp" delay={0}>
           <div className="relative w-full h-[500px] rounded-2xl overflow-hidden shadow-lg mb-10 border border-[#e8e0ce]">
             <Image
-              src={post.image}
+              src={post.bigImage || post.image}
               alt={post.title}
               fill
               priority
@@ -67,7 +78,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
           <AnimatedSection variant="fadeUp" delay={0.25}>
           <div 
             className="prose prose-stone max-w-none prose-p:font-sans prose-p:text-stone-700 prose-p:leading-[1.8] prose-p:text-[15px] prose-p:mb-6"
-            dangerouslySetInnerHTML={{ __html: post.content }}
+            dangerouslySetInnerHTML={{ __html: processedContent }}
           />
           
           <AnimatedSection variant="fadeUp" delay={0.35}>
@@ -98,7 +109,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
                 <Link key={related.id} href={`/blog/${related.slug}`} className="group flex flex-col gap-3">
                   <div className="relative w-full aspect-video rounded-xl overflow-hidden shadow-sm">
                     <Image
-                      src={related.image}
+                      src={related.cardImage || related.image}
                       alt={related.title}
                       fill
                       className="object-cover group-hover:scale-105 transition-transform duration-700"

src/app/blog/page.tsx

@@ -44,7 +44,7 @@ export default function BlogPage() {
               {/* Image Container with fade out */}
               <div className="relative w-full aspect-[4/3] overflow-hidden border-b-1 border-[#0a4a2b]">
                 <Image
-                  src={post.image}
+                  src={post.cardImage || post.image}
                   alt={post.title}
                   fill
                   sizes="(max-width: 768px) 100vw, 30vw"

src/app/contact/page.tsx

@@ -135,11 +135,19 @@ export default function ContactPage() {
 
             {/* Right Column: Form — Dark green theme card */}
             <AnimatedSection variant="fadeRight" delay={0.2}>
-              <div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_20px_50px_rgba(0,0,0,0.5)] rounded-xl border-[4px] border-[#082418]">
+              <div className="relative p-8 sm:p-12 overflow-hidden">
+                {/* Background Image */}
+                <div className="absolute inset-0 z-0 pointer-events-none select-none">
+                  <Image
+                    src="/images/contact/contact.webp"
+                    alt=""
+                    fill
+                    className="object-cover object-center"
+                  />
+                </div>
                 {/* Ornate Gold Border inside */}
-                <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
+                {/* <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
 
-                {/* Corner Ornaments */}
                 <div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
                   <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                     <path d="M0,0 L40,0 Q40,40 0,40 Z" />
@@ -165,7 +173,6 @@ export default function ContactPage() {
                   </svg>
                 </div>
 
-                {/* Faint mandala watermark at bottom */}
                 <div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-64 h-40 overflow-hidden pointer-events-none opacity-5">
                   <svg viewBox="0 0 100 50" fill="currentColor" className="w-full h-full text-[#bc9e65]">
                     <path d="M50 50 C50 20 20 0 0 0 L100 0 C80 0 50 20 50 50 Z" />
@@ -173,7 +180,7 @@ export default function ContactPage() {
                     <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="2" />
                     <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" strokeWidth="2" />
                   </svg>
-                </div>
+                </div> */}
 
                 <div className="relative z-10 flex flex-col items-center">
                   <svg className="w-10 h-10 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">

src/app/reservation/page.tsx

@@ -34,19 +34,18 @@ 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/story_bg.png"
+            src="/images/about/bg/reservation-bg.webp"
             alt="Royal Background"
             fill
             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">
+        {/* <div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">
-          {/* Corner Ornaments */}
           <div className="absolute top-0 left-0 w-16 h-16 transform">
              <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" />
@@ -71,18 +70,25 @@ export default function ReservationPage() {
                <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
              </svg>
           </div>
-        </div>
+        </div> */}
 
         <div className="relative z-20 max-w-2xl mx-auto w-full px-4 sm:px-8">
           
           {/* Form Card */}
           <div className="w-full">
             <AnimatedSection variant="fadeUp" delay={0.1}>
-              <div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_30px_60px_rgba(0,0,0,0.6)] rounded-xl border-[4px] border-[#082418]">
+              <div className="relative p-8 sm:p-14  overflow-hidden">
-                {/* Ornate Gold Border inside */}
+                {/* Background Image */}
-                <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
+                <div className="absolute inset-0 z-0 pointer-events-none select-none">
+                  <Image
+                    src="/images/contact/contact.webp"
+                    alt=""
+                    fill
+                    className="object-cover object-center"
+                  />
+                </div>
+                {/* <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
                 
-                {/* Corner Ornaments */}
                 <div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
                    <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                      <path d="M0,0 L40,0 Q40,40 0,40 Z" />
@@ -106,7 +112,7 @@ export default function ReservationPage() {
                      <path d="M0,0 L40,0 Q40,40 0,40 Z" />
                      <path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
                    </svg>
-                </div>
+                </div> */}
 
                 <div className="relative z-10 flex flex-col items-center">
                   <svg className="w-10 h-10 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">

src/components/ChefShowcase.tsx

@@ -205,7 +205,7 @@ export default function ChefShowcase() {
           >
 
             {/* 30+ Years Experience Badge Overlay */}
-            <div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
+            <div className="hidden lg:flex absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
               <div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
               {/* Gold Flower Icon */}
               <svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
@@ -217,17 +217,17 @@ export default function ChefShowcase() {
             </div>
 
             {/* Seamless Image Wrapper */}
-            <div className="relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">
+            <div className="hidden lg:block relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">
 
               {/* Portrait Image */}
-              <Image
+              {/* <Image
                 src="/images/home/chef/chef-right-img.webp"
                 alt="Chef Mendia Juxef Cooking with Fire"
                 fill
                 priority
                 sizes="(max-width: 768px) 100vw, 35vw"
                 className="object-cover group-hover:scale-103 transition-transform duration-[2s] brightness-[0.9] contrast-[1.03]"
-              />
+              /> */}
 
               {/* Sparks/Embers Canvas Overlay */}
               <canvas

src/components/EntranceExperience.tsx

@@ -68,9 +68,9 @@ function LoaderNotifier({ onLoad }: { onLoad: () => void }) {
 
 // 3D Cinematic flight renderer
 function CinematicFlight({ progress }: { progress: number }) {
-  const exteriorTex = useTexture("/images/my_dosa_place_exterior_webgl.jpg");
+  const exteriorTex = useTexture("/images/home/hero/banner-1.png");
-  const interiorTex = useTexture("/images/my_dosa_place_interior_webgl.jpg");
+  const interiorTex = useTexture("/images/home/hero/banner-2.png");
-  const foodTex = useTexture("/images/my_dosa_place_food_webgl.jpg");
+  const foodTex = useTexture("/images/home/hero/banner-3.png");
 
   const leftDoorRef = useRef<THREE.Group>(null);
   const rightDoorRef = useRef<THREE.Group>(null);