Update src/app/blog/page.tsx

src/app/blog/page.tsx

@@ -15,6 +15,7 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
+    const navItems = [{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }];
 
     return (
         <ThemeProvider
@@ -30,26 +31,19 @@ export default function BlogPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                {/* NAVBAR: Using NavbarStyleApple as required */}
+                <div id="nav" data-section="nav">
                     <NavbarStyleApple
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Menu", id: "/menu" },
-                        { name: "Peking Duck", id: "/peking-duck" },
-                        { name: "About", id: "/about" },
-                        { name: "Visit", id: "/visit" },
-                        { name: "Order", id: "/order" },
-                    ]}
+                        navItems={navItems}
                         brandName="Moys Chinese Restaurant"
                     />
+                </div>
 
-                {/* POSTS LOGIC: Preserved exactly as is */}
                 {isLoading ? (
                     <div className="w-content-width mx-auto py-20 text-center">
                         <p className="text-foreground">Loading posts...</p>
                     </div>
                 ) : (
-                    /* BLOG SECTION: Using BlogCardOne with generated props, except for 'posts' */
+                    <div id="blog-posts" data-section="blog-posts">
                         <BlogCardOne
                             blogs={posts}
                             title="Latest Articles"
@@ -59,9 +53,10 @@ export default function BlogPage() {
                             useInvertedBackground={false}
                             carouselMode="buttons"
                         />
+                    </div>
                 )}
 
-                {/* FOOTER: Using FooterLogoReveal as required */}
+                <div id="footer" data-section="footer">
                     <FooterLogoReveal
                         logoText="Moys Chinese Restaurant"
                         leftLink={{ text: "Privacy Policy", href: "/privacy" }}
@@ -69,6 +64,7 @@ export default function BlogPage() {
                         className="bg-ink-black"
                         linkClassName="text-porcelain-cream/80 hover:text-warm-gold"
                     />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );