diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 189655a..76d0704 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -3,22 +3,29 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 
 export default function BlogPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Galereya", id: "/gallery" }, { name: "Blog", id: "/blog" }, { name: "Aloqa", id: "/contact" }]} brandName="OSHTONCHA" />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Galereya", id: "/gallery" }, { name: "Blog", id: "/blog" }, { name: "Aloqa", id: "/contact" }]} />
+      </div>
       <main className="container mx-auto py-20">
-        <BlogCardTwo 
-          title="Blog va Yangiliklar"
-          description="Restoranimizdagi eng so'nggi yangiliklar va maqolalar."
-          animationType="slide-up"
-          textboxLayout="default"
-          blogs={[]}
-        />
+        <div id="blog" data-section="blog">
+          <BlogCardOne 
+            title="Blog va Yangiliklar"
+            description="Restoranimizdagi eng so'nggi yangiliklar va maqolalar."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            blogs={[]}
+          />
+        </div>
       </main>
-      <FooterBase columns={[{ title: "Sahifalar", items: [{ label: "Galereya", href: "/gallery" }, { label: "Blog", href: "/blog" }] }, { title: "Biz haqimizda", items: [{ label: "Haqimizda", href: "/about" }, { label: "Aloqa", href: "/contact" }] }]} logoText="OSHTONCHA" />
+      <div id="footer" data-section="footer">
+        <FooterBase columns={[{ title: "Sahifalar", items: [{ label: "Galereya", href: "/gallery" }, { label: "Blog", href: "/blog" }] }, { title: "Biz haqimizda", items: [{ label: "Haqimizda", href: "/about" }, { label: "Aloqa", href: "/contact" }] }]} logoText="OSHTONCHA" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 556b562..dfb4c74 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,25 +3,28 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Galereya", id: "/gallery" }, { name: "Blog", id: "/blog" }, { name: "Aloqa", id: "/contact" }]} brandName="OSHTONCHA" />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Galereya", id: "/gallery" }, { name: "Blog", id: "/blog" }, { name: "Aloqa", id: "/contact" }]} />
+      </div>
       <main className="container mx-auto py-20">
-        <ContactCenter 
-          title="Biz bilan bog'laning"
-          description="Savollaringiz bo'lsa, bizga yozing yoki manzillarga tashrif buyuring."
-          tag="Aloqa"
-          background={{ variant: "plain" }}
-        />
-        <div className="mt-12 p-8 bg-gray-100 rounded-xl text-center">
-           <h2 className="text-2xl font-semibold">Manzil</h2>
-           <p>Toshkent shahar, Amir Temur ko'chasi, 12-uy</p>
+        <div id="contact" data-section="contact">
+          <ContactSplit 
+            title="Biz bilan bog'laning"
+            description="Savollaringiz bo'lsa, bizga yozing yoki manzillarga tashrif buyuring."
+            tag="Aloqa"
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
         </div>
       </main>
-      <FooterBase columns={[{ title: "Sahifalar", items: [{ label: "Galereya", href: "/gallery" }, { label: "Blog", href: "/blog" }] }, { title: "Biz haqimizda", items: [{ label: "Haqimizda", href: "/about" }, { label: "Aloqa", href: "/contact" }] }]} logoText="OSHTONCHA" />
+      <div id="footer" data-section="footer">
+        <FooterBase columns={[{ title: "Sahifalar", items: [{ label: "Galereya", href: "/gallery" }, { label: "Blog", href: "/blog" }] }, { title: "Biz haqimizda", items: [{ label: "Haqimizda", href: "/about" }, { label: "Aloqa", href: "/contact" }] }]} logoText="OSHTONCHA" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index e64ccf9..a10815c 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -6,17 +6,16 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function GalleryPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Galereya", id: "/gallery" }, { name: "Blog", id: "/blog" }, { name: "Aloqa", id: "/contact" }]} brandName="OSHTONCHA" />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Galereya", id: "/gallery" }, { name: "Blog", id: "/blog" }, { name: "Aloqa", id: "/contact" }]} />
+      </div>
       <main className="container mx-auto py-20">
         <h1 className="text-4xl font-bold mb-10 text-center">Restoran Galereyasi</h1>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div className="aspect-square bg-gray-200 rounded-lg"></div>
-            <div className="aspect-square bg-gray-200 rounded-lg"></div>
-            <div className="aspect-square bg-gray-200 rounded-lg"></div>
-        </div>
       </main>
-      <FooterBase columns={[{ title: "Sahifalar", items: [{ label: "Galereya", href: "/gallery" }, { label: "Blog", href: "/blog" }] }, { title: "Biz haqimizda", items: [{ label: "Haqimizda", href: "/about" }, { label: "Aloqa", href: "/contact" }] }]} logoText="OSHTONCHA" />
+      <div id="footer" data-section="footer">
+        <FooterBase columns={[{ title: "Sahifalar", items: [{ label: "Galereya", href: "/gallery" }, { label: "Blog", href: "/blog" }] }, { title: "Biz haqimizda", items: [{ label: "Haqimizda", href: "/about" }, { label: "Aloqa", href: "/contact" }] }]} logoText="OSHTONCHA" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6ef1e8d..53eb823 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,8 +11,8 @@ import { Montserrat } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Oshtoncha Restoran | Premium Ta\'mlar',
-  description: 'Oshtoncha - O\'zbekistondagi eng sara restoran.',
+  title: 'OSHTONCHA Restorani',
+  description: 'Eng mazali o\'zbek va yevropa taomlari markazi.',
   openGraph: {
     "title": "Oshtoncha Restoran",
     "siteName": "OSHTONCHA"
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index b8d4a0d..5cc7944 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -1,27 +1,30 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 
 export default function MenuPage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
-        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Menyu", id: "/menu" }, { name: "Band qilish", id: "/reservations" }, { name: "Haqimizda", id: "/about" }, { name: "Aloqa", id: "/contact" }]} brandName="OSHTONCHA" />
-        <ProductCardTwo
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Menyu", id: "/menu" }, { name: "Band qilish", id: "/reservations" }, { name: "Haqimizda", id: "/about" }, { name: "Aloqa", id: "/contact" }]} />
+      </div>
+      <div id="menu" data-section="menu">
+        <ProductCardThree
           title="Bizning Menyu"
           description="O'zbek va Yevropa taomlari."
           gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
           products={[
-            { id: "m1", brand: "O'zbek", name: "Palov", price: "65,000 UZS", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/grilled-cheeseburger-rustic-bun-with-fries-generative-ai_188544-36959.jpg?_wi=1" },
-            { id: "m2", brand: "Yevropa", name: "Steak", price: "150,000 UZS", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/homemade-sliced-pizza-brown-plate-black-surface_114579-89029.jpg?_wi=1" }
+            { id: "m1", name: "Palov", price: "65,000 UZS", imageSrc: "http://img.b2bpic.net/free-photo/grilled-cheeseburger-rustic-bun-with-fries-generative-ai_188544-36959.jpg?_wi=1" },
+            { id: "m2", name: "Steak", price: "150,000 UZS", imageSrc: "http://img.b2bpic.net/free-photo/homemade-sliced-pizza-brown-plate-black-surface_114579-89029.jpg?_wi=1" },
+            { id: "m3", name: "Salad", price: "40,000 UZS", imageSrc: "http://img.b2bpic.net/free-photo/fresh-vegetable-salad-with-cheese_114579-89029.jpg?_wi=1" }
           ]}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/reservations/page.tsx b/src/app/reservations/page.tsx
index 9b044b4..c443a28 100644
--- a/src/app/reservations/page.tsx
+++ b/src/app/reservations/page.tsx
@@ -1,22 +1,24 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 
 export default function ReservationsPage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
-        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Menyu", id: "/menu" }, { name: "Band qilish", id: "/reservations" }, { name: "Haqimizda", id: "/about" }, { name: "Aloqa", id: "/contact" }]} brandName="OSHTONCHA" />
-        <ContactCenter
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{ name: "Bosh Sahifa", id: "/" }, { name: "Menyu", id: "/menu" }, { name: "Band qilish", id: "/reservations" }, { name: "Haqimizda", id: "/about" }, { name: "Aloqa", id: "/contact" }]} />
+      </div>
+      <div id="reservations" data-section="reservations">
+        <ContactSplit
           tag="Band qilish"
           title="Stol buyurtma qiling"
           description="Sizni kutamiz!"
           background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file