update

.gitignore

@@ -35,6 +35,7 @@ yarn-error.log*
 
 # vercel
 .vercel
+.duckdb
 
 # typescript
 *.tsbuildinfo

bun/.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

bun/README.md

@@ -0,0 +1,15 @@
+# bun
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.2.21. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

bun/bun.lock

@@ -0,0 +1,42 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "bun",
+      "dependencies": {
+        "@duckdb/node-api": "^1.4.4-r.1",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@duckdb/node-api": ["@duckdb/node-api@1.4.4-r.1", "", { "dependencies": { "@duckdb/node-bindings": "1.4.4-r.1" } }, "sha512-oqaH9DXTJNwyLkd2FgJwmSnWVqjB5irbESeTeNVMBnM03iRaNY545BhfBDumu1TnOV2koIdG1mNsmjgq/ZTIkA=="],
+
+    "@duckdb/node-bindings": ["@duckdb/node-bindings@1.4.4-r.1", "", { "optionalDependencies": { "@duckdb/node-bindings-darwin-arm64": "1.4.4-r.1", "@duckdb/node-bindings-darwin-x64": "1.4.4-r.1", "@duckdb/node-bindings-linux-arm64": "1.4.4-r.1", "@duckdb/node-bindings-linux-x64": "1.4.4-r.1", "@duckdb/node-bindings-win32-x64": "1.4.4-r.1" } }, "sha512-NFm0AMrK3kiVLQhgnGUEjX5c8Elm93dYePZ9BUCvvd0AVVTKEBeRhBp9afziuzP3Sl5+7XQ1TyaBLsZJKKBDBQ=="],
+
+    "@duckdb/node-bindings-darwin-arm64": ["@duckdb/node-bindings-darwin-arm64@1.4.4-r.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/NtbkCgCAOJDxw41XvSGV/mxQAlsx+2xUvhIVUj6fxoOfTG4jTttRhuphwE3EXNoWzJOjZxCZ5LwhC/qb6ZwLg=="],
+
+    "@duckdb/node-bindings-darwin-x64": ["@duckdb/node-bindings-darwin-x64@1.4.4-r.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-lzFRDrZwc1EoV513vmKufasiAQ2WlhEb0O6guRBarbvOKKVhRb8tQ5H7LPVTrIewjTI3XDgHrnK+vfh9L+xQcA=="],
+
+    "@duckdb/node-bindings-linux-arm64": ["@duckdb/node-bindings-linux-arm64@1.4.4-r.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-wq92/EcTiOTRW1RSDOwjeLyMMXWwNVNwU21TQdfu3sgS86+Ih3raaK68leDgY5cWgf72We3J2W7HYz8GwxcMYw=="],
+
+    "@duckdb/node-bindings-linux-x64": ["@duckdb/node-bindings-linux-x64@1.4.4-r.1", "", { "os": "linux", "cpu": "x64" }, "sha512-fjYNc+t4/T7mhzZ57oJoIQaWvbYVvxhidcNNansQFiWnd6/JMLCULd4qnt8XI3Tt2BrZsraH690KSBIS3QPt0w=="],
+
+    "@duckdb/node-bindings-win32-x64": ["@duckdb/node-bindings-win32-x64@1.4.4-r.1", "", { "os": "win32", "cpu": "x64" }, "sha512-+J+MUYGvYWfX0balWToDIy3CBYg7hHI0KQUQ39+SniinXlMF8+puRW6ebyQ+AXrcrKkwuj4wzJuEBD0AdhHGtw=="],
+
+    "@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="],
+
+    "@types/node": ["@types/node@25.2.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-BkmoP5/FhRYek5izySdkOneRyXYN35I860MFAGupTdebyE66uZaR+bXLHq8k4DirE5DwQi3NuhvRU1jqTVwUrQ=="],
+
+    "bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+  }
+}

bun/database.ts

@@ -0,0 +1,4 @@
+import { DuckDBConnection, DuckDBInstance } from '@duckdb/node-api';
+
+const instance = await DuckDBInstance.create('./jkhsakha.duckdb');
+export const connection = await DuckDBConnection.create(instance)

bun/index.ts

@@ -0,0 +1,297 @@
+import { connection } from "./database";
+
+const server = Bun.serve({
+    port: 3490,
+    routes: {
+        "/api/post-grids/:id": async req => {
+            const gridId = Number(req.params.id);
+            if (!gridId) {
+                return Response.json({ error: "Invalid grid id" }, { status: 400 });
+            }
+
+            // pagination params
+            const url = new URL(req.url);
+            const page = Math.max(1, Number(url.searchParams.get("page") ?? 1));
+
+            // 1. Load grid config post
+            const gridPost = await connection.run(`
+                SELECT ID, post_title
+                FROM wp_posts
+                WHERE ID = $id
+                LIMIT 1;
+            `, { id: gridId });
+
+            const [grid] = await gridPost.getRowObjectsJson();
+            if (!grid) {
+                return Response.json(null, { status: 404 });
+            }
+
+            // 2. Load grid meta
+            const metaRes = await connection.run(`
+        SELECT meta_key, meta_value
+        FROM wp_postmeta
+        WHERE post_id = $id;
+    `, { id: gridId });
+
+            const meta = Object.fromEntries(
+                (await metaRes.getRowObjectsJson())
+                    .map(m => [m.meta_key, m.meta_value])
+            );
+
+            const postType = meta._rt_tp_post_type ?? "post";
+            const perPage = Math.max(1, Number(meta._rt_tp_posts_per_page ?? 6));
+            const orderBy = meta._rt_tp_orderby ?? "post_date";
+            const order = meta._rt_tp_order === "ASC" ? "ASC" : "DESC";
+
+            const offset = (page - 1) * perPage;
+
+            // 3. Total count (for pagination)
+            const totalRes = await connection.run(`
+        SELECT COUNT(*)::int AS total
+        FROM wp_posts
+        WHERE post_status = 'publish'
+          AND post_type = $postType;
+    `, { postType });
+
+            const [{ total }] = await totalRes.getRowObjectsJson();
+            const totalPages = Math.max(1, Math.ceil(total / perPage));
+
+            // clamp page if out of range
+            const safePage = Math.min(page, totalPages);
+            const safeOffset = (safePage - 1) * perPage;
+
+            // 4. Fetch paginated posts
+            const postsRes = await connection.run(`
+        SELECT
+            ID,
+            post_title,
+            post_name,
+            post_excerpt,
+            post_date
+        FROM wp_posts
+        WHERE post_status = 'publish'
+          AND post_type = $postType
+        ORDER BY ${orderBy} ${order}
+        LIMIT $perPage OFFSET $offset;
+    `, {
+                postType,
+                perPage,
+                offset: safeOffset
+            });
+
+            const posts = await postsRes.getRowObjectsJson();
+
+            return Response.json({
+                id: grid.ID,
+                title: grid.post_title,
+                page: safePage,
+                perPage,
+                total,
+                totalPages,
+                posts
+            });
+        },
+        "/api/posts/slugs": async req => {
+            const res = await connection.run(`
+            SELECT post_name, post_type 
+            FROM wp_posts
+            WHERE post_status = 'publish' 
+            AND post_type IN ('post', 'page')
+            ORDER BY post_date DESC;
+        `);
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data[0]);
+        },
+        "/api/posts/id/:id": async req => {
+            const res = await connection.run(`
+            SELECT p.* 
+        FROM wp_posts p
+        WHERE p.ID = $id
+        LIMIT 1;
+        `, { slug: Number(req.params.id) });
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data[0]);
+        },
+        "/api/posts/:slug": async req => {
+            const res = await connection.run(`
+            SELECT 
+                *
+            FROM wp_posts 
+            WHERE post_name = $slug
+            AND post_status = 'publish'
+            AND post_type IN ('post', 'page')
+            LIMIT 1;
+        `, { slug: req.params.slug.toString() });
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data[0], { status: 200 });
+        },
+        "/api/pages/:slug": async req => {
+            const res = await connection.run(`
+            SELECT 
+                *
+            FROM wp_posts 
+            WHERE post_name = $slug
+            AND post_status = 'publish'
+            AND post_type IN ('post', 'page')
+            LIMIT 1;
+        `, { slug: req.params.slug.toString() });
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data[0]);
+        },
+        "/api/pages/id/:id": async req => {
+            const res = await connection.run(`
+        SELECT p.* 
+        FROM wp_posts p
+        WHERE p.ID = $id
+        LIMIT 1;`, { id: Number(req.params.id) });
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data[0]);
+        },
+        "/api/home": async req => {
+            const res = await connection.run(`
+        SELECT p.* 
+        FROM wp_posts p
+        WHERE p.ID = (
+            SELECT option_value 
+            FROM wp_options 
+            WHERE option_name = 'page_on_front'
+            LIMIT 1
+        )
+        LIMIT 1;`);
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data);
+        },
+        "/api/menu/footer": async req => {
+            const res = await connection.run(`
+            SELECT 
+          menu_item.ID AS menu_item_id,
+          menu_item.post_title AS menu_title,
+          menu_item.menu_order,
+          menu_item.post_parent,
+          -- Get the actual page/post content
+          actual_post.ID AS actual_post_id,
+          actual_post.post_title AS actual_post_title,
+          actual_post.post_type,
+          actual_post.post_status,
+          actual_post.post_name AS slug,
+          -- Get the URL (for custom links)
+          url_meta.meta_value AS custom_url,
+          -- Get the object type (post, page, category, custom, etc.)
+          object_type_meta.meta_value AS object_type,
+          -- Get parent menu item info
+          menu_parent_meta.meta_value AS parent_menu_item_id,
+      FROM wp_posts AS menu_item
+      INNER JOIN wp_term_relationships r ON menu_item.ID = r.object_id
+      -- Join to get the actual post ID
+      INNER JOIN wp_postmeta AS object_id_meta ON menu_item.ID = object_id_meta.post_id 
+          AND object_id_meta.meta_key = '_menu_item_object_id'
+      -- Join to get the actual post content
+      INNER JOIN wp_posts AS actual_post ON object_id_meta.meta_value = actual_post.ID
+      -- Left joins for additional info
+      LEFT JOIN wp_postmeta AS url_meta ON menu_item.ID = url_meta.post_id 
+          AND url_meta.meta_key = '_menu_item_url'
+      LEFT JOIN wp_postmeta AS object_type_meta ON menu_item.ID = object_type_meta.post_id 
+          AND object_type_meta.meta_key = '_menu_item_object'
+      LEFT JOIN wp_postmeta AS menu_parent_meta ON menu_item.ID = menu_parent_meta.post_id 
+          AND menu_parent_meta.meta_key = '_menu_item_menu_item_parent'
+      WHERE r.term_taxonomy_id = 10
+        AND menu_item.post_type = 'nav_menu_item'
+        AND menu_item.post_status = 'publish'
+      ORDER BY menu_item.menu_order;
+        `);
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data);
+        },
+        "/api/menu/navbar": async req => {
+            const res = await connection.run(`
+            SELECT 
+          menu_item.ID AS menu_item_id,
+          menu_item.post_title AS menu_title,
+          menu_item.menu_order,
+          menu_item.post_parent,
+          -- Get the actual page/post content
+          actual_post.ID AS actual_post_id,
+          actual_post.post_title AS actual_post_title,
+          actual_post.post_type,
+          actual_post.post_status,
+          actual_post.post_name AS slug,
+          -- Get the URL (for custom links)
+          url_meta.meta_value AS custom_url,
+          -- Get the object type (post, page, category, custom, etc.)
+          object_type_meta.meta_value AS object_type,
+          -- Get parent menu item info
+          menu_parent_meta.meta_value AS parent_menu_item_id,
+      FROM wp_posts AS menu_item
+      INNER JOIN wp_term_relationships r ON menu_item.ID = r.object_id
+      -- Join to get the actual post ID
+      INNER JOIN wp_postmeta AS object_id_meta ON menu_item.ID = object_id_meta.post_id 
+          AND object_id_meta.meta_key = '_menu_item_object_id'
+      -- Join to get the actual post content
+      INNER JOIN wp_posts AS actual_post ON object_id_meta.meta_value = actual_post.ID
+      -- Left joins for additional info
+      LEFT JOIN wp_postmeta AS url_meta ON menu_item.ID = url_meta.post_id 
+          AND url_meta.meta_key = '_menu_item_url'
+      LEFT JOIN wp_postmeta AS object_type_meta ON menu_item.ID = object_type_meta.post_id 
+          AND object_type_meta.meta_key = '_menu_item_object'
+      LEFT JOIN wp_postmeta AS menu_parent_meta ON menu_item.ID = menu_parent_meta.post_id 
+          AND menu_parent_meta.meta_key = '_menu_item_menu_item_parent'
+      WHERE r.term_taxonomy_id = 24
+        AND menu_item.post_type = 'nav_menu_item'
+        AND menu_item.post_status = 'publish'
+      ORDER BY menu_item.menu_order;
+        `);
+
+            const data = await res.getRowObjectsJson()
+
+            if (data.length === 0) {
+                return Response.json(null, { status: 404 });
+            }
+
+            return Response.json(data);
+        },
+    }
+})
+
+console.log(`Server running at ${server.url}`);

bun/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "bun",
+  "module": "index.ts",
+  "type": "module",
+  "private": true,
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@duckdb/node-api": "^1.4.4-r.1"
+  }
+}

bun/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

database.json

@@ -0,0 +1 @@
+{"/":{"root":{"props":{"title":""}},"content":[{"type":"HeadingBlock","props":{"title":"Hello world!","id":"HeadingBlock-1694032984497"}},{"type":"RichText","props":{"id":"RichText-8aeea952-786d-4f9e-a8fc-5dce53285112","content":"asdlmlaksmdlkasd"}}],"zones":{}}}

package.json

@@ -9,19 +9,32 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@puckeditor/core": "^0.21.1",
+    "@tabler/icons-react": "^3.36.1",
+    "@wordpress/block-serialization-default-parser": "^5.39.0",
+    "axios": "^1.13.2",
+    "daisyui": "^5.5.14",
+    "html-react-parser": "^5.2.17",
+    "interweave": "^13.1.1",
     "next": "16.1.3",
+    "next-themes": "^0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.3",
+    "interweave-ssr": "^2.0.0",
     "tailwindcss": "^4",
     "typescript": "^5"
+  },
+  "optionalDependencies": {
+    "@duckdb/node-api": "^1.4.3-r.3"
   }
 }

puck.config.tsx

@@ -0,0 +1,34 @@
+import type { Config } from "@puckeditor/core";
+
+type Props = {
+    HeadingBlock: { title: string };
+    RichText: { content: string };
+};
+
+const puckConfig: Config<Props> = {
+    components: {
+        HeadingBlock: {
+            fields: {
+                title: { type: "text" },
+            },
+            defaultProps: {
+                title: "Heading",
+            },
+            render: ({ title }) => (
+                <div style={{ padding: 64 }}>
+                    <h1>{title}</h1>
+                </div>
+            ),
+        },
+        RichText: {
+            fields: {
+                content: { type: "textarea" },
+            },
+            render: ({ content }) => (
+                <div dangerouslySetInnerHTML={{ __html: content }} />
+            ),
+        },
+    },
+};
+
+export default puckConfig;

src/app/[slug]/error.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+export default function Error() {
+    return (
+        <div className="container mx-auto py-16 max-w-3xl text-center">
+            <h1 className="text-2xl font-semibold mb-4">
+                500 — Сервер временно недоступен
+            </h1>
+            <p className="text-gray-600">
+                Страница не может быть загружена прямо сейчас.
+                Пожалуйста, попробуйте позже.
+            </p>
+        </div>
+    );
+}

src/app/[slug]/page.tsx

@@ -0,0 +1,47 @@
+// app/[slug]/page.tsx
+import { renderPostContent } from '@/components/WPRenderer/WPRenderer';
+
+// ISR: regenerate every 60 seconds
+export const revalidate = 60;
+
+interface PageProps {
+    params: {
+        slug: string;
+    };
+}
+
+export default async function PostPage({ params }: PageProps) {
+    const { slug } = await params;
+    const baseUrl =
+        process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+
+    const res = await fetch(`${baseUrl}/api/posts/${slug}`, {
+        next: { revalidate: 60 },
+    });
+
+    if (!res.ok) {
+        console.log(`${baseUrl}/api/posts/${slug}`)
+        // 🚨 THROW — this is critical
+        throw new Error('Failed to fetch post');
+    }
+
+    const post = await res.json();
+
+    return (
+        <div className="container mx-auto py-8 max-w-5xl">
+            <article className="prose lg:prose-xl max-w-none">
+                <h1>{post.post_title}</h1>
+
+                {post.post_type === 'post' && (
+                    <div className="text-gray-600 mb-6">
+                        <time>
+                            {new Date(post.post_date).toLocaleString('ru-RU')}
+                        </time>
+                    </div>
+                )}
+
+                {renderPostContent(post.post_content)}
+            </article>
+        </div>
+    );
+}

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

@@ -0,0 +1,71 @@
+import PostGrid from "@/components/WP/PostGrid/PostGrid.server";
+import { renderPostContent } from "@/components/WPRenderer/WPRenderer";
+import parse, { DOMNode } from 'html-react-parser'
+
+interface PageProps {
+    params: { slug: string; page: string };
+}
+
+export function extractPostGridId(content: string): number | null {
+    let gridId: number | null = null;
+
+    parse(content, {
+        replace: (domNode: DOMNode) => {
+            // Only check text nodes
+            if ("data" in domNode && typeof domNode.data === "string") {
+                const match = domNode.data.match(/\[the-post-grid\s+id="(\d+)"/);
+                if (match) {
+                    gridId = Number(match[1]);
+                    return; // stop parsing
+                }
+            }
+        },
+    });
+
+    return gridId;
+}
+
+
+export default async function PostPage({ params }: PageProps) {
+    const { slug, page } = await params;
+    const pageNum = Number(page) || 1;
+
+    // 1. Fetch the WP page content (same as page 1)
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/pages/${slug}`, {
+        next: { revalidate: 60 },
+    });
+    const pageData = await res.json();
+
+    if (!pageData) return <p>Page not found</p>;
+
+    // 2. Extract grid ID from shortcode
+    const gridId = extractPostGridId(pageData.post_content);
+
+    return (
+        <div className="container mx-auto py-8 max-w-5xl">
+            <article className="prose lg:prose-xl max-w-none">
+                <h1>{pageData.post_title}</h1>
+
+                {pageData.post_type === 'post' && (
+                    <div className="text-gray-600 mb-6">
+                        <time>
+                            {new Date(pageData.post_date).toLocaleString('ru-RU')}
+                        </time>
+                    </div>
+                )}
+
+                {renderPostContent(pageData.post_content, { page: pageNum })}
+            </article>
+        </div>
+    )
+
+    return (
+        <article>
+            <h1>{pageData.title}</h1>
+
+            {/* {gridId && <PostGrid id={gridId} page={pageNum} />} */}
+            {renderPostContent(pageData.post_content, { page: pageNum })}
+
+        </article>
+    );
+}

src/app/error.tsx

@@ -0,0 +1,16 @@
+// app/error.tsx
+'use client';
+
+export default function Error() {
+    return (
+        <div className="container mx-auto py-16 text-center">
+            <h1 className="text-2xl font-semibold mb-4">
+                500 — Сервис временно недоступен
+            </h1>
+            <p className="text-gray-600">
+                Главная страница временно недоступна.
+                Пожалуйста, попробуйте позже.
+            </p>
+        </div>
+    );
+}

src/app/layout.tsx

@@ -0,0 +1,38 @@
+import Header from "@/components/Blocks/Header/Header";
+import Footer from "@/components/Footer/Footer";
+import "@/styles/globals.css";
+import { Montserrat, Roboto, Roboto_Condensed } from 'next/font/google'
+
+export const montserratFont = Montserrat({
+    subsets: ['latin', 'cyrillic'],
+})
+
+const mainFont = Roboto({
+    subsets: ['latin', 'cyrillic'],
+})
+
+export const condensedFont = Roboto_Condensed({
+    subsets: ['latin', 'cyrillic'],
+})
+
+export const revalidate = 10
+
+export default function GlobalLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en" className={mainFont.className}>
+            <body className="relative min-h-screen flex flex-col overflow-auto">
+                <Header />
+
+                <main className="flex-1 px-4 sm:px-0 overflow-x-auto">
+                    {children}
+                </main>
+
+                <Footer />
+            </body>
+        </html>
+    );
+}

src/app/nothing[...puckPath]/client.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import type { Data } from "@puckeditor/core";
+import { Render } from "@puckeditor/core";
+import puckConfig from "../../../puck.config";
+
+export function Client({ data }: { data: Data }) {
+  return <Render config={puckConfig} data={data} />
+}

src/app/nothing[...puckPath]/page.tsx

@@ -0,0 +1,50 @@
+/**
+ * This file implements a catch-all route that renders the user-facing pages
+ * generated by Puck. For any route visited (with exception of other hardcoded
+ * pages in /app), it will check your database (via `getPage`) for a Puck page
+ * and render it using <Render>.
+ *
+ * All routes produced by this page are statically rendered using incremental
+ * static site generation. After the first visit, the page will be cached as
+ * a static file. Subsequent visits will receive the cache. Publishing a page
+ * will invalidate the cache as the page is written in /api/puck/route.ts
+ */
+
+import { Client } from "./client";
+import { notFound } from "next/navigation";
+import { Metadata } from "next";
+import { getPage } from "@/lib/get-page";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ puckPath: string[] }>;
+}): Promise<Metadata> {
+  const { puckPath = [] } = await params;
+  const path = `/${puckPath.join("/")}`;
+
+  const data = getPage(path)
+  return {
+    title: data?.root.props?.title,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ puckPath: string[] }>;
+}) {
+  const { puckPath = [] } = await params;
+  const path = `/${puckPath.join("/")}`;
+  const data = await getPage(path);
+
+  if (!data) {
+    return notFound();
+  }
+
+  return <Client data={data} />;
+}
+
+// Force Next.js to produce static pages: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
+// Delete this if you need dynamic rendering, such as access to headers or cookies
+export const dynamic = "force-static";

src/app/page.tsx

@@ -0,0 +1,28 @@
+// app/page.tsx
+import { renderPostContent } from '@/components/WPRenderer/WPRenderer';
+import { PostData } from '@/types/entities';
+
+export const revalidate = 10;
+
+export default async function HomePage() {
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+
+    const res = await fetch(`${baseUrl}/api/home`, { next: { revalidate: 10 }, });
+
+    if (!res.ok) {
+        // 🚨 REQUIRED for stale reuse
+        throw new Error('Failed to fetch home posts');
+    }
+
+    const posts: PostData[] = await res.json();
+
+    return (
+        <div className="w-full flex flex-col items-center">
+            {posts.map(post => (
+                <div key={post.ID} className="max-w-5xl">
+                    {renderPostContent(post.post_content)}
+                </div>
+            ))}
+        </div>
+    );
+}

src/app/proxy.txt

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+import type { NextRequest } from "next/server";
+
+export async function proxy(req: NextRequest) {
+    const res = NextResponse.next({ request: req });
+
+    if (req.method === "GET") {
+        // Rewrite routes that match "/[...puckPath]/edit" to "/puck/[...puckPath]"
+        if (req.nextUrl.pathname.endsWith("/edit")) {
+            const pathWithoutEdit = req.nextUrl.pathname.slice(
+                0,
+                req.nextUrl.pathname.length - 5
+            );
+            const pathWithEditPrefix = `/puck${pathWithoutEdit}`;
+
+            return NextResponse.rewrite(new URL(pathWithEditPrefix, req.url));
+        }
+
+        // Disable "/puck/[...puckPath]"
+        if (req.nextUrl.pathname.startsWith("/puck")) {
+            return NextResponse.redirect(new URL("/", req.url));
+        }
+    }
+
+    return res;
+}

src/app/puck/[...puckPath]/client.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { Data } from "@puckeditor/core";
+import { Puck } from "@puckeditor/core";
+import puckConfig from "../../../../puck.config";
+
+export function Client({ path, data }: { path: string; data: Partial<Data> }) {
+  return (
+    <Puck
+      config={puckConfig}
+      data={data}
+      onPublish={async (data) => {
+        await fetch("/puck/api", {
+          method: "post",
+          body: JSON.stringify({ data, path }),
+        });
+      }}
+    />
+  );
+}

src/app/puck/[...puckPath]/page.tsx

@@ -0,0 +1,44 @@
+/**
+ * This file implements a *magic* catch-all route that renders the Puck editor.
+ *
+ * This route exposes /puck/[...puckPath], but is disabled by middleware.ts. The middleware
+ * then rewrites all URL requests ending in `/edit` to this route, allowing you to visit any
+ * page in your application and add /edit to the end to spin up a Puck editor.
+ *
+ * This approach enables public pages to be statically rendered whilst the /puck route can
+ * remain dynamic.
+ *
+ * NB this route is public, and you will need to add authentication
+ */
+
+import "@puckeditor/core/puck.css";
+import { Client } from "./client";
+import { Metadata } from "next";
+import { getPage } from "@/lib/get-page";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ puckPath: string[] }>;
+}): Promise<Metadata> {
+  const { puckPath = [] } = await params;
+  const path = `/${puckPath.join("/")}`;
+
+  return {
+    title: "Puck: " + path,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ puckPath: string[] }>;
+}) {
+  const { puckPath = [] } = await params;
+  const path = `/${puckPath.join("/")}`;
+  const data = getPage(path);
+
+  return <Client path={path} data={data || {}} />;
+}
+
+export const dynamic = "force-dynamic";

src/app/puck/api/route.ts

@@ -0,0 +1,25 @@
+import { revalidatePath } from "next/cache";
+import { NextResponse } from "next/server";
+import fs from "fs";
+
+export async function POST(request: Request) {
+  const payload = await request.json();
+
+  const existingData = JSON.parse(
+    fs.existsSync("database.json")
+      ? fs.readFileSync("database.json", "utf-8")
+      : "{}"
+  );
+
+  const updatedData = {
+    ...existingData,
+    [payload.path]: payload.data,
+  };
+
+  fs.writeFileSync("database.json", JSON.stringify(updatedData));
+
+  // Purge Next.js cache
+  revalidatePath(payload.path);
+
+  return NextResponse.json({ status: "ok" });
+}

src/app/puck/page.tsx

@@ -0,0 +1,3 @@
+export { default, generateMetadata } from "./[...puckPath]/page";
+
+export const dynamic = "force-dynamic";

src/components/Blocks/Banner/Banner.tsx

@@ -0,0 +1,44 @@
+import { condensedFont } from "@/app/layout";
+import ButtonLink from "@/components/UI/ButtonLink";
+import { BannerProps } from "@/types/elements";
+import { IconFilePencil, IconId, IconUser } from "@tabler/icons-react";
+
+export const revalidate = 60;
+
+export default async function Banner({ title, subtitle, backgroundImage, logoImage }: BannerProps) {
+    return (
+        <section className="relative w-full">
+            <div className="hero bg-base-200 min-h-8 h-min overflow-hidden" >
+                <div className="absolute inset-0 overflow-hidden">
+                    <div className="w-full h-full blur-xs scale-[1.1]" style={{
+                        backgroundImage: `url(${backgroundImage})`
+                    }}></div>
+                </div>
+
+                <div className="absolute inset-0 bg-black opacity-40"></div>
+
+                <div className="hero-content px-0 gap-8 max-w-5xl py-8 flex flex-col lg:flex-row justify-center">
+                    <a role="button" href="/" className="flex justify-center items-center max-w-48 w-full">
+                        <img
+                            src={logoImage}
+                            className="object-cover w-auto h-full"
+                        />
+                    </a>
+
+                    <div className="space-y-2">
+                        <p className="text-white text-xl text-center sm:text-left">
+                            {subtitle}
+                        </p>
+                        <h1 className={`text-3xl font-semibold text-white ${condensedFont.className} text-center sm:text-left`}>{title}</h1>
+                    </div>
+
+                    <div className="flex flex-col space-y-4">
+                        <ButtonLink href="https://lk.jkhsakha.ru" label="Личный кабинет" iconLeft={<IconUser />} />
+                        <ButtonLink href="/uznat-licevoj-schet-po-adresu" label="Узнать лицевой счет" iconLeft={<IconId />} />
+                        <ButtonLink href="/obrashhenie-grazhdan" label="Подать обращение" iconLeft={<IconFilePencil />} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

src/components/Blocks/Banner/BannerCompact.tsx

@@ -0,0 +1,53 @@
+import { condensedFont, montserratFont } from '@/app/layout';
+import ButtonLink from '@/components/UI/ButtonLink';
+import { IconBrandOkRu, IconBrandTelegram, IconBrandVk, IconMail, IconPhone } from '@tabler/icons-react';
+
+export const revalidate = 60;
+
+const BannerCompact = () => {
+    return (
+        <section className="p-2 relative w-full bg-white min-h-14 h-min flex justify-center">
+            <div className='w-full max-w-5xl space-y-2 sm:space-y-0 flex flex-col sm:flex-row justify-between items-center'>
+                <div className='flex flex-col sm:flex-row grow flex-wrap'>
+                    <a role="button" className={`btn btn-ghost flex justify-start text-xs text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href={'/'}>
+                        <span className="justify-self-start w-4 h-4 flex justify-center items-center"><IconPhone /></span>
+                        Единый номер +7 (924) 461-23-13
+                    </a>
+
+                    <a role="button" className={`btn btn-ghost flex justify-start text-xs text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href='mailto:uorodok@jkhsakha.ru'>
+                        <span className="justify-self-start w-4 h-4 flex justify-center items-center"><IconMail /></span>
+                        uordok@jkhsakha.ru
+                    </a>
+
+                    <a role="button" className={`btn btn-ghost sm:btn-wide max-w-96 w-fit text-left justify-start text-xs text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href={'/'}>
+                        <span className="justify-self-start w-4 h-4 flex justify-center items-center">
+                            <IconPhone />
+                        </span>
+                        «Телефон доверия» по вопросам противодействия коррупции +7 924-461-28-27
+                    </a>
+
+                </div>
+
+                <div className='flex flex-row space-x-2'>
+                    <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
+                        <span className="justify-self-start flex justify-center items-center">
+                            <IconBrandTelegram />
+                        </span>
+                    </a>
+                    <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
+                        <span className="justify-self-start flex justify-center items-center">
+                            <IconBrandVk stroke={0} fill='white' />
+                        </span>
+                    </a>
+                    <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
+                        <span className="justify-self-start flex justify-center items-center">
+                            <IconBrandOkRu />
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default BannerCompact

src/components/Blocks/Carousel/Carousel.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface CarouselProps {
+    
+}
+
+const Carousel = () => {
+    return (
+        <div>Carousel</div>
+    )
+}
+
+export default Carousel

src/components/Blocks/Header/Header.tsx

@@ -0,0 +1,109 @@
+import Centered from '@/components/Layout/Centered';
+import { buildNestedMenu } from '@/lib/menu';
+import Navbar from '../Navbar/Navbar';
+import Banner from '../Banner/Banner';
+import BannerCompact from '../Banner/BannerCompact';
+import { ContentScheme } from '@/types/elements';
+
+export const revalidate = 60;
+
+async function Header() {
+    const baseUrl =
+        process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+
+    const res = await fetch(`${baseUrl}/api/menu/navbar`, {
+        next: { revalidate: 60 },
+    });
+
+    if (!res.ok) {
+        // 🚨 MUST throw to allow stale ISR reuse
+        throw new Error('Failed to fetch navbar');
+    }
+
+    const data = await res.json();
+    const menuData = buildNestedMenu(data);
+
+    const scheme: ContentScheme = {
+        content: [
+            {
+                type: 'BannerCompact',
+                order: 1,
+                props: { id: 0 },
+            },
+            {
+                type: 'Banner',
+                order: 0,
+                props: {
+                    title:
+                        '«ЖИЛИЩНО-КОММУНАЛЬНОЕ ХОЗЯЙСТВО РЕСПУБЛИКИ САХА (ЯКУТИЯ)»',
+                    subtitle: 'Государственное унитарное предприятие',
+                    backgroundImage: '/bckgrnd2-scaled.jpg',
+                    logoImage: '/лого-без-надписи-300x300.png',
+                },
+            },
+            {
+                type: 'Center',
+                order: 0,
+                props: {
+                    id: 0,
+                    content: [
+                        {
+                            type: 'Navbar',
+                            order: 1,
+                            props: { id: 0 },
+                        },
+                    ],
+                },
+            },
+        ],
+    };
+
+    const renderElements = (element: any) => {
+        switch (element.type) {
+            case 'Navbar':
+                return (
+                    <Navbar
+                        key={`${element.type}-${element.props.id}`}
+                        menuData={menuData}
+                    />
+                );
+
+            case 'Banner':
+                return (
+                    <Banner
+                        key={`${element.type}-${element.props.id}`}
+                        {...element.props}
+                    />
+                );
+
+            case 'Center':
+                return (
+                    <Centered key={`${element.type}-${element.props.id}`}>
+                        {element.props.content
+                            .sort((a: any, b: any) => b.order - a.order)
+                            .map(renderElements)}
+                    </Centered>
+                );
+
+            case 'BannerCompact':
+                return (
+                    <BannerCompact
+                        key={`${element.type}-${element.props.id}`}
+                    />
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <header className="relative flex flex-col items-center bg-[#0063A7]">
+            {scheme.content
+                .sort((a, b) => b.order - a.order)
+                .map(renderElements)}
+        </header>
+    );
+}
+
+export default Header;

src/components/Blocks/Navbar/Navbar.tsx

@@ -0,0 +1,163 @@
+import { montserratFont } from '@/app/layout'
+import { Tab, VerticalTabs } from '@/components/Tabs/VerticalTabs'
+import { toRelativePath } from '@/lib/utils'
+import { IconMenu2, IconMenu3, IconX } from '@tabler/icons-react'
+
+export const revalidate = 10
+
+const Navbar = ({ menuData }: { menuData: any }) => {
+    return (
+        <div className={`max-w-5xl drawer ${montserratFont.className}`}>
+            <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
+            <div className="drawer-content flex flex-col">
+                {/* Navbar */}
+                <div className="navbar p-0! w-full">
+                    <div className="lg:hidden p-2 space-x-4 flex items-center w-full">
+                        <div className='h-8 w-auto flex justify-center items-center'>
+                            <img className='h-full w-full object-cover' src={'/лого-без-надписи-300x300.png'} />
+                        </div>
+                        <span className='text-base font-bold text-white'>ГУП «ЖКХ РС(Я)»</span>
+
+                        <label htmlFor="my-drawer-2" aria-label="open sidebar" className="ml-auto btn btn-square btn-ghost text-white">
+                            <IconMenu2 />
+                        </label>
+                    </div>
+
+                    <div className="hidden flex-none lg:block">
+                        <ul className="menu menu-horizontal">
+                            <ul className='menu menu-horizontal relative w-full sm:p-0!'>
+                                {menuData.length > 0 && menuData.map((menu: Tab) => {
+                                    if (menu.items.length === 0) {
+                                        return (
+                                            <li key={menu.menu_item_id} tabIndex={0} className='text-white'>
+                                                <a href={(menu.custom_url && toRelativePath(menu.custom_url)) || menu.slug}>
+                                                    {menu.menu_title || menu.actual_post_title}
+                                                </a>
+                                            </li>
+                                        )
+                                    } else {
+                                        return (
+                                            <div key={menu.menu_item_id} className="dropdown dropdown-hover">
+                                                <li tabIndex={0} className='text-white'>
+                                                    <a>
+                                                        <span className='w-4 h-4 flex justify-center items-center'>
+                                                            <IconMenu3 className='' />
+                                                        </span>
+                                                        {menu.actual_post_title}
+                                                    </a>
+                                                </li>
+
+                                                <ul tabIndex={0} className="dropdown-content menu z-1 min-w-[calc(100vw/2)] mt-0 p-0 py-2">
+                                                    <VerticalTabs tabs={menu.items} defaultTab={menu.items[0].menu_item_id} />
+                                                </ul>
+                                            </div>
+                                        )
+                                    }
+
+                                })}
+                            </ul>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div className="drawer-side">
+                <label htmlFor="my-drawer-2" aria-label="close sidebar" className="drawer-overlay">
+                </label>
+                <ul className="text-[#0063A7] menu bg-base-200 min-h-full w-full sm:max-w-80 p-2 text-base">
+                    {/* Sidebar content here */}
+                    <div className='p-2 space-x-4 flex items-center'>
+                        <div className='h-8 w-auto flex justify-center items-center'>
+                            <img className='h-full w-full object-cover' src={'/gup_2022_jemblema.png'} />
+                        </div>
+                        <span className='text-base font-bold'>ГУП «ЖКХ РС(Я)»</span>
+                        <label htmlFor='my-drawer-2' aria-label="close sidebar" className='btn btn-ghost btn-square ml-auto'>
+                            <IconX />
+                        </label>
+                    </div>
+                    {menuData.length > 0 && menuData.map((menu: Tab) => {
+                        if (menu.items.length === 0) {
+                            return (
+                                <li key={menu.menu_item_id} tabIndex={0} className='border-b border-base-300 rounded-none'>
+                                    <a className='py-3 font-semibold' href={(menu.custom_url && toRelativePath(menu.custom_url)) || menu.slug}>{menu.menu_title || menu.actual_post_title}</a>
+                                </li>
+                            )
+                        } else {
+                            return (
+                                <details key={menu.menu_item_id} className="collapse collapse-arrow border-b border-base-300 rounded-none" name={`${menu.menu_item_id}-root`}>
+                                    <summary className="collapse-title p-3 uppercase font-semibold">
+                                        {menu.actual_post_title}
+                                    </summary>
+
+                                    <div className="collapse-content flex flex-col">
+                                        {menu.items.map((item: Tab) => (
+                                            <details key={item.menu_item_id} className="collapse collapse-arrow border-b border-base-300 rounded-none" name={menu.menu_item_id} open>
+                                                <summary className="collapse-title uppercase font-semibold">
+                                                    {item.actual_post_title}
+                                                </summary>
+                                                <div className="collapse-content flex flex-col menu w-full">
+                                                    {item.items.map((subItem: Tab) => (
+                                                        <li key={subItem.menu_item_id} className='border-b border-base-300 rounded-none'>
+                                                            <a href={(subItem.custom_url && toRelativePath(subItem.custom_url)) || subItem.slug} className="py-3 text-base font-medium">
+                                                                {subItem.menu_title || subItem.actual_post_title}
+                                                            </a>
+                                                        </li>
+                                                    ))}
+                                                </div>
+                                            </details>
+                                        ))}
+                                    </div>
+
+                                </details>
+                            )
+                        }
+
+                    })}
+                </ul>
+            </div>
+        </div>
+    )
+
+    return (
+        <div className={`${montserratFont.className} text-white relative max-w-5xl w-full px-0 py-2`}>
+            <label className="btn btn-ghost btn-square swap swap-rotate">
+                {/* this hidden checkbox controls the state */}
+                <input type="checkbox" />
+
+                <IconMenu2 className='swap-off fill-current' />
+
+                <IconX className='swap-on fill-current' />
+            </label>
+        </div>
+    )
+
+    return (
+        <div className={`navbar max-w-5xl relative w-full ${montserratFont.className} sm:p-0!`}>
+            <ul className='menu menu-horizontal relative w-full sm:p-0!'>
+                {menuData.length > 0 && menuData.map((menu: Tab) => {
+                    if (menu.items.length === 0) {
+                        return (
+                            <li key={menu.menu_item_id} tabIndex={0} className='text-white'>
+                                <a href={(menu.custom_url && toRelativePath(menu.custom_url)) || menu.slug}>{menu.menu_title || menu.actual_post_title}</a>
+                            </li>
+                        )
+                    } else {
+                        return (
+                            <div key={menu.menu_item_id} className="dropdown dropdown-hover">
+                                <li tabIndex={0} className='text-white'>
+                                    <a>{menu.actual_post_title}</a>
+                                </li>
+
+                                <ul tabIndex={0} className="dropdown-content menu z-1 min-w-[calc(100vw/2)] mt-0 p-0 py-2">
+                                    <VerticalTabs tabs={menu.items} defaultTab={menu.items[0].menu_item_id} />
+                                </ul>
+                            </div>
+                        )
+                    }
+
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default Navbar

src/components/Footer/Footer.tsx

@@ -0,0 +1,58 @@
+import { montserratFont } from '@/app/layout'
+import Centered from '../Layout/Centered'
+import { IconBrandOkRu, IconBrandTelegram, IconBrandVk } from '@tabler/icons-react'
+
+const Footer = () => {
+    return (
+        <div className='border-t border-t-gray-300'>
+            <Centered>
+                <footer className={`${montserratFont.className} footer sm:footer-horizontal text-base-content py-10 max-w-5xl space-x-4`}>
+                    <nav>
+                        <h6 className="footer-title">О предприятии</h6>
+                        <a className="link link-hover" href='/rukovodstvo/'>Руководство</a>
+                        <a className="link link-hover" href='/obespechenie-nadezhnosti-teplosnabzhen/'>Стратегия</a>
+                        <a className="link link-hover" href='/antikorrupcionnaja-dejatelnost/'>Антикоррупционная деятельность</a>
+                        <a className="link link-hover" href='/#'>Пресс-центр</a>
+                        <a className="link link-hover" href='/simvolika-predprijatija/'>Наша символика</a>
+                    </nav>
+                    <nav>
+                        <h6 className="footer-title">Филиалы</h6>
+                        <a className="link link-hover" href='/dochernie-predprijatija/'>Дочерние предприятия</a>
+                        <a className="link link-hover" href='/filialy/'>Производственные филиалы и участки «Коммунтеплосбыт»</a>
+                        <a className="link link-hover" href='/filialy-2/'>Филиалы</a>
+                        <a className="link link-hover" href='/politika-obrabotki-personalnyh-gup-zhkh-rs-ja/'>Политика обработки персональных данных ГУП ЖКХ РС(Я)</a>
+                    </nav>
+                    <nav>
+                        <h6 className="footer-title">Оплата ЖКУ</h6>
+                        <a className="link link-hover" href='/uvazhaemye-potrebiteli/'>Способы оплаты</a>
+                        <a className="link link-hover" href='https://lk.jkhsakha.ru/'>Банковской картой</a>
+                    </nav>
+                    <nav>
+                        <h6 className="footer-title">Социальные сети</h6>
+                        <div className="w-full flex flex-row justify-center gap-4">
+                            <div className='flex flex-row justify-center space-x-2'>
+                                <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
+                                    <span className="justify-self-start flex justify-center items-center">
+                                        <IconBrandTelegram />
+                                    </span>
+                                </a>
+                                <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
+                                    <span className="justify-self-start flex justify-center items-center">
+                                        <IconBrandVk stroke={0} fill='white' />
+                                    </span>
+                                </a>
+                                <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
+                                    <span className="justify-self-start flex justify-center items-center">
+                                        <IconBrandOkRu />
+                                    </span>
+                                </a>
+                            </div>
+                        </div>
+                    </nav>
+                </footer>
+            </Centered>
+        </div>
+    )
+}
+
+export default Footer

src/components/Hero/Hero.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const Hero = () => {
+    return (
+        <div className="hero bg-base-200">
+            <div className="hero-content flex-col lg:flex-row">
+                <img
+                    src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
+                    className="max-w-sm rounded-lg shadow-2xl"
+                />
+                <div>
+                    <h1 className="text-5xl font-bold">Box Office News!</h1>
+                    <p className="py-6">
+                        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+                        quasi. In deleniti eaque aut repudiandae et a id nisi.
+                    </p>
+                    <button className="btn btn-primary">Get Started</button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Hero

src/components/Layout/Centered.tsx

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react'
+
+interface CenteredProps extends PropsWithChildren { }
+
+const Centered = ({ children }: CenteredProps) => {
+    return (
+        <div className='w-full flex flex-col items-center px-4 sm:px-10'>
+            {children}
+        </div>
+    )
+}
+
+export default Centered

src/components/Layout/MainLayout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+import Footer from '../Footer/Footer';
+import Header from '../Blocks/Header/Header';
+
+interface LayoutProps {
+    children: ReactNode;
+}
+
+export default function MainLayout({ children }: LayoutProps) {
+    return (
+        <div className="min-h-screen flex flex-col">
+            <Header />
+
+            <main className="flex-1 px-6 py-4">
+                {children}
+            </main>
+
+            <Footer />
+        </div>
+    );
+}

src/components/Menu/MegaMenu.tsx

@@ -0,0 +1,117 @@
+import Link from "next/link"
+
+type MenuItem = {
+    menu_item_id: string
+    menu_title: string
+    parent_menu_item_id: string
+    custom_url: string
+    actual_post_title: string
+    slug: string
+}
+
+type Props = {
+    items: MenuItem[]
+}
+
+export function MegaMenu({ items }: Props) {
+    // Build children map: parentId -> MenuItem[]
+    const childrenMap: Record<string, MenuItem[]> = {}
+    items.forEach(item => {
+        const parent = item.parent_menu_item_id
+        if (!childrenMap[parent]) childrenMap[parent] = []
+        childrenMap[parent].push(item)
+    })
+
+    // First level
+    const level1 = childrenMap["0"] || []
+
+    function getPathFromUrl(url: string): string {
+        console.log(url)
+        try {
+            const urlObj = new URL(url);
+            return urlObj.pathname;
+        } catch (error) {
+            // Handle invalid URLs
+            //console.error('Invalid URL:', error);
+            return url;
+        }
+    }
+
+    return (
+        <>
+            {level1.map((l1, l1index) => {
+                const level2 = childrenMap[l1.menu_item_id] || []
+                const hasChildren = level2.length > 0
+
+                return (
+                    <ul tabIndex={0} key={l1.menu_item_id} className="menu dropdown dropdown-hover">
+                        {/* Level 1 link */}
+                        <Link
+                            //tabIndex={0}
+                            href={l1.custom_url ? getPathFromUrl(l1.custom_url) : l1.slug}
+                            className="btn m-1"
+                        >
+                            {l1.menu_title || l1.actual_post_title}
+                        </Link>
+
+                        {/* Mega menu */}
+
+
+                        {hasChildren && (
+                            <div tabIndex={0} className="dropdown-content card card-sm bg-base-100 z-1 w-full max-w-5xl shadow-md max-h-svh overflow-y-auto">
+                                <div className="flex flex-row">
+                                    <li tabIndex={-1} className="col-start-1 col-end-1 col-span-1 bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
+                                        {level2.map(l2 => (
+                                            <div key={l2.menu_item_id} className="dropdown dropdown-right group/l2">
+                                                <span className="">
+                                                    {l2.menu_title || l2.actual_post_title}
+                                                </span>
+
+                                                {/* Right pane (level 3) */}
+                                                {/* <div className="right-0 col-start-2 col-end-2 row-start-1 row-end-1 top-0 hidden h-full w-2/3 bg-white p-6 group-hover/l2:block">
+                                                <ul className="grid grid-cols-2 gap-4">
+                                                    {(childrenMap[l2.menu_item_id] || []).map(l3 => (
+                                                        <li key={l3.menu_item_id}>
+                                                            <a
+                                                                href={l3.custom_url}
+                                                                className="hover:text-blue-600"
+                                                            >
+                                                                {l3.menu_title || l3.actual_post_title}
+                                                            </a>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </div> */}
+                                            </div>
+                                        ))}
+                                    </li>
+
+                                    <div className="col-start-2 col-end-2">
+                                        {level2.map(l2 => (
+                                            <div className="right-0 col-start-2 col-end-2 row-start-1 row-end-1 top-0 h-full w-2/3 bg-white p-6 group-hover/l2:block">
+                                                <ul className="grid grid-cols-2 gap-4">
+                                                    {(childrenMap[l2.menu_item_id] || []).map(l3 => (
+                                                        <li key={l3.menu_item_id}>
+                                                            <a
+                                                                href={l3.custom_url}
+                                                                className="hover:text-blue-600"
+                                                            >
+                                                                {l3.menu_title || l3.actual_post_title}
+                                                            </a>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        )}
+                    </ul>
+                )
+            })}
+        </>
+    )
+}

src/components/Menu/NavigationMenu.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useEffect } from 'react';
+
+interface MenuItem {
+    menu_item_id: string;
+    menu_title: string;
+    menu_order: string;
+    post_parent: string;
+    actual_post_id: string;
+    actual_post_title: string;
+    post_type: string;
+    post_status: string;
+    slug: string;
+    custom_url: string;
+    object_type: string;
+    parent_menu_item_id: string;
+}
+
+interface NestedMenuItem extends MenuItem {
+    children?: NestedMenuItem[];
+}
+
+interface NavigationMenuProps {
+    menuData: MenuItem[];
+}
+
+const NavigationMenu: React.FC<NavigationMenuProps> = ({ menuData }) => {
+    const [nestedMenu, setNestedMenu] = useState<NestedMenuItem[]>([]);
+    const [currentMenu, setCurrentMenu] = useState<string | null>(null);
+    const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+
+    // Transform flat array into nested structure
+    useEffect(() => {
+        const buildNestedMenu = (items: MenuItem[]): NestedMenuItem[] => {
+            const itemMap = new Map<string, NestedMenuItem>();
+            const rootItems: NestedMenuItem[] = [];
+
+            // Create map of all items
+            items.forEach(item => {
+                itemMap.set(item.menu_item_id, { ...item, children: [] });
+            });
+
+            // Build hierarchy
+            items.forEach(item => {
+                const currentItem = itemMap.get(item.menu_item_id);
+                if (!currentItem) return;
+
+                if (item.parent_menu_item_id === "0") {
+                    rootItems.push(currentItem);
+                } else {
+                    const parent = itemMap.get(item.parent_menu_item_id);
+                    if (parent) {
+                        if (!parent.children) parent.children = [];
+                        parent.children.push(currentItem);
+                    }
+                }
+            });
+
+            // Sort by menu_order
+            const sortByOrder = (items: NestedMenuItem[]): NestedMenuItem[] => {
+                return items.sort((a, b) => parseInt(a.menu_order) - parseInt(b.menu_order));
+            };
+
+            const sortedRoots = sortByOrder(rootItems);
+            sortedRoots.forEach(item => {
+                if (item.children) {
+                    item.children = sortByOrder(item.children);
+                }
+            });
+
+            return sortedRoots;
+        };
+
+        setNestedMenu(buildNestedMenu(menuData));
+    }, [menuData]);
+
+    // Close menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (!(event.target as Element).closest('.nav-menu-container')) {
+                setCurrentMenu(null);
+                setActiveSubmenu(null);
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+
+    const handleMenuEnter = (menuId: string, hasChildren: boolean) => {
+        if (hasChildren) {
+            setCurrentMenu(menuId);
+            setActiveSubmenu(null);
+        }
+    };
+
+    const handleMenuLeave = (item_id: string) => {
+        // Small delay to allow moving to submenu
+        if (item_id === currentMenu) {
+            setCurrentMenu(null)
+            setActiveSubmenu(null)
+        }
+        // setTimeout(() => {
+        //     if (!document.querySelector('.nav-menu-container:hover')) {
+        //         setCurrentMenu(null);
+        //         setActiveSubmenu(null);
+        //     }
+        // }, 100);
+    };
+
+    const handleSubmenuEnter = (submenuId: string) => {
+        setActiveSubmenu(submenuId);
+    };
+
+    const renderMenuItems = (items: NestedMenuItem[], level = 0) => {
+        return items.map(item => {
+            const hasChildren = item.children && item.children.length > 0;
+            const isActive = currentMenu === item.menu_item_id;
+
+            if (!hasChildren) {
+                return (
+                    <a
+                        key={item.menu_item_id}
+                        href={item.custom_url === "#" ? `/${item.slug}` : item.custom_url}
+                        className="px-4 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors duration-200 whitespace-nowrap"
+                    >
+                        {item.actual_post_title}
+                    </a>
+                );
+            }
+
+            return (
+                <div
+                    key={item.menu_item_id}
+                    className="relative menu"
+                    onMouseEnter={() => handleMenuEnter(item.menu_item_id, true)}
+                    onMouseLeave={() => handleMenuLeave(item.menu_item_id)}
+                >
+                    <button
+                        className="px-4 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors duration-200 flex items-center gap-1 whitespace-nowrap"
+                    >
+                        {item.actual_post_title}
+                        <svg
+                            className={`w-4 h-4 transition-transform duration-200 ${isActive ? 'rotate-180' : ''}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </button>
+
+                    {/* First level dropdown */}
+                    {isActive && (
+                        <div className="menu absolute left-0 top-full mt-1 w-64 bg-white shadow-lg rounded-lg py-2 z-50 border border-gray-100">
+                            {item.children?.map(child => {
+                                const childHasChildren = child.children && child.children.length > 0;
+                                const isChildActive = activeSubmenu === child.menu_item_id;
+
+                                return (
+                                    <div
+                                        key={child.menu_item_id}
+                                        className="relative group"
+                                        onMouseEnter={() => handleSubmenuEnter(child.menu_item_id)}
+                                        onMouseLeave={() => setActiveSubmenu(null)}
+                                    >
+                                        {!childHasChildren ? (
+                                            <a
+                                                href={child.custom_url === "#" ? `/${child.slug}` : child.custom_url}
+                                                className="block px-4 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors duration-200"
+                                            >
+                                                {child.actual_post_title}
+                                            </a>
+                                        ) : (
+                                            <>
+                                                <div className="flex items-center justify-between px-4 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors duration-200 cursor-pointer">
+                                                    <span>{child.actual_post_title}</span>
+                                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                                                    </svg>
+                                                </div>
+
+                                                {/* Second level dropdown - appears to the right */}
+                                                {isChildActive && (
+                                                    <div className="absolute left-full top-0 ml-1 w-64 bg-white shadow-lg rounded-lg py-2 z-50 border border-gray-100">
+                                                        {child.children?.map(grandChild => (
+                                                            <a
+                                                                key={grandChild.menu_item_id}
+                                                                href={grandChild.custom_url === "#" ? `/${grandChild.slug}` : grandChild.custom_url}
+                                                                className="block px-4 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors duration-200"
+                                                            >
+                                                                {grandChild.actual_post_title}
+                                                            </a>
+                                                        ))}
+                                                    </div>
+                                                )}
+                                            </>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            );
+        });
+    };
+
+    return (
+        <nav className="nav-menu-container relative bg-white shadow-sm">
+            <div className="container mx-auto px-4">
+                <div className="flex items-center space-x-1">
+                    {renderMenuItems(nestedMenu)}
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default NavigationMenu;

src/components/Tabs/VerticalTabs.tsx

@@ -0,0 +1,61 @@
+'use client'
+import { useState } from "react";
+
+export interface Tab {
+    menu_item_id: string;
+    menu_title?: string
+    actual_post_title: string;
+    items: Tab[]
+    custom_url: string
+    slug: string
+}
+
+interface VerticalTabsProps {
+    tabs: Tab[];
+    defaultTab?: string;
+}
+
+export function VerticalTabs({ tabs, defaultTab }: VerticalTabsProps) {
+    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.menu_item_id);
+
+    return (
+        <div className="flex h-full min-h-100 w-full rounded-lg border border-gray-200 bg-white shadow-sm">
+            {/* Tabs on the left */}
+            <ul className="flex w-auto menu flex-col border-r border-gray-200">
+                {tabs.map((tab) => (
+                    <li
+                        key={tab.menu_item_id}
+                        tabIndex={0}
+                        onClick={() => setActiveTab(tab.menu_item_id)}
+                        onMouseEnter={() => setActiveTab(tab.menu_item_id)}
+                    >
+                        <a>{tab.actual_post_title}</a>
+                    </li>
+                ))}
+            </ul>
+
+            {/* Content on the right */}
+            <div className="flex-1 overflow-auto">
+                {tabs.map((tab) => (
+                    <div
+                        key={tab.menu_item_id}
+                        className={`transition-opacity duration-200 ${activeTab === tab.menu_item_id ? 'visible opacity-100' : 'invisible absolute opacity-0'}`}
+                    >
+                        <ul className="w-full h-auto menu bg-base-200 rounded-box">
+                            <li className="menu-title">
+                                {tab.actual_post_title}
+                            </li>
+                            {tab.items.map((item: Tab) => (
+                                <li key={item.menu_item_id}>
+                                    <a href={item.custom_url || item.slug}>
+                                        {item.actual_post_title}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

src/components/Theme/ThemeToggle.tsx

@@ -0,0 +1,63 @@
+'use client'
+import { useState, useEffect } from 'react';
+
+const ThemeToggle = () => {
+    const [theme, setTheme] = useState(() => {
+        // Check localStorage first, then system preference
+        if (typeof window !== 'undefined') {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) return savedTheme;
+
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+        }
+        return 'light';
+    });
+
+    const [checked, setChecked] = useState(false)
+
+    useEffect(() => {
+        setChecked(theme === 'dark')
+    }, [theme])
+
+    useEffect(() => {
+        const html = document.documentElement;
+        html.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === 'light' ? 'dark' : 'light');
+    };
+
+    return (
+        <label className="toggle text-base-content cursor-pointer">
+            <input
+                type="checkbox"
+                checked={checked}
+                onChange={toggleTheme}
+            />
+            <svg aria-label="dark mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                {/* Moon icon */}
+                <circle cx="12" cy="12" r="5" />
+                <line x1="12" y1="1" x2="12" y2="3" />
+                <line x1="12" y1="21" x2="12" y2="23" />
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                <line x1="1" y1="12" x2="3" y2="12" />
+                <line x1="21" y1="12" x2="23" y2="12" />
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
+
+            <svg aria-label="light mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                {/* Sun icon */}
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
+        </label>
+    );
+};
+
+export default ThemeToggle;

src/components/UI/ButtonLink.tsx

@@ -0,0 +1,14 @@
+import { montserratFont } from "@/app/layout"
+import { ButtonLinkProps } from "@/types/elements"
+
+const ButtonLink = ({ href, label, iconLeft, iconRight, variant }: ButtonLinkProps) => {
+    return (
+        <a role="button" className={`btn ${variant === 'ghost' ? 'btn-ghost' : ''} flex justify-start text-sm text-nowrap text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href={href}>
+            {iconLeft && <span className="justify-self-start">{iconLeft}</span>}
+            {label}
+            {iconRight && <span className="ml-auto">{iconRight}</span>}
+        </a>
+    )
+}
+
+export default ButtonLink

src/components/WP/ContactForm/ContactForm.tsx

@@ -0,0 +1,45 @@
+// components/forms/ContactForm.tsx
+type ContactForm7Props = {
+    formId: string
+    title?: string
+}
+
+export function ContactForm({ formId, title }: ContactForm7Props) {
+    return (
+        <section className="my-12">
+            {title && <h2 className="mb-4 text-2xl font-semibold">{title}</h2>}
+
+            <form
+                className="grid gap-4 max-w-xl"
+                data-form-id={formId}
+            >
+                <input
+                    type="text"
+                    name="name"
+                    placeholder="Your name"
+                    className="input input-bordered"
+                    required
+                />
+
+                <input
+                    type="email"
+                    name="email"
+                    placeholder="Email"
+                    className="input input-bordered"
+                    required
+                />
+
+                <textarea
+                    name="message"
+                    placeholder="Message"
+                    className="textarea textarea-bordered"
+                    required
+                />
+
+                <button className="btn btn-primary">
+                    Send
+                </button>
+            </form>
+        </section>
+    )
+}

src/components/WP/PostGrid/PostGrid.server.tsx

@@ -0,0 +1,23 @@
+import { getPostGrid } from "@/lib/get-post-grid";
+import { PostData } from "@/types/entities";
+
+export default async function PostGrid({ id, page }: { id: number; page?: number }) {
+    const data = await getPostGrid(id, page || 1);
+    if (!data) return null;
+
+    return (
+        <section className="post-grid">
+            <div className="grid">
+                {data.posts.map((post: PostData) => (
+                    <article key={post.ID}>
+                        <h3>
+                            <a href={`/${post.post_name}`}>{post.post_title}</a>
+                        </h3>
+                        {post.post_excerpt && <p>{post.post_excerpt}</p>}
+                    </article>
+                ))}
+            </div>
+            {/* optional WP-style pagination component */}
+        </section>
+    );
+}

src/components/WP/PostGrid/PostGridClient.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useState } from "react";
+
+interface Post {
+    ID: string | number;
+    post_title: string;
+    post_name: string;
+    post_excerpt: string | null;
+    post_date: string;
+}
+
+interface GridData {
+    id: string | number;
+    title: string;
+    page: number;
+    perPage: number;
+    total: number;
+    totalPages: number;
+    posts: Post[];
+}
+
+function getPageRange(current: number, total: number) {
+    const range: (number | "...")[] = [];
+    const delta = 2;
+
+    const left = Math.max(2, current - delta);
+    const right = Math.min(total - 1, current + delta);
+
+    range.push(1);
+
+    if (left > 2) range.push("...");
+
+    for (let i = left; i <= right; i++) range.push(i);
+
+    if (right < total - 1) range.push("...");
+
+    if (total > 1) range.push(total);
+
+    return range;
+}
+
+export default function PostGridClient({ initialData }: { initialData: GridData }) {
+    const [data, setData] = useState(initialData);
+    const [loading, setLoading] = useState(false);
+
+    async function goToPage(page: number) {
+        if (page === data.page || page < 1 || page > data.totalPages) return;
+
+        setLoading(true);
+        const res = await fetch(
+            `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3490"}/api/post-grids/${data.id}?page=${page}`
+        );
+
+        const json = await res.json();
+        setData(json);
+        setLoading(false);
+    }
+
+    const pages = getPageRange(data.page, data.totalPages);
+
+    return (
+        <section className="post-grid">
+            <div className="grid">
+                {data.posts.map(post => (
+                    <article key={post.ID}>
+                        <h3>
+                            <a href={`/${post.post_name}`}>{post.post_title}</a>
+                        </h3>
+                        {post.post_excerpt && <p>{post.post_excerpt}</p>}
+                    </article>
+                ))}
+            </div>
+
+            {data.totalPages > 1 && (
+                <nav className="pagination" aria-label="Pagination">
+                    <button
+                        disabled={data.page === 1 || loading}
+                        onClick={() => goToPage(data.page - 1)}
+                    >
+                        ← Prev
+                    </button>
+
+                    {pages.map((p, i) =>
+                        p === "..." ? (
+                            <span key={`ellipsis-${i}`} className="ellipsis">
+                                …
+                            </span>
+                        ) : (
+                            <button
+                                key={`page-${p}-${i}`}
+                                disabled={p === data.page || loading}
+                                aria-current={p === data.page ? "page" : undefined}
+                                onClick={() => goToPage(p as number)}
+                            >
+                                {p}
+                            </button>
+                        )
+                    )}
+
+
+                    <button
+                        disabled={data.page === data.totalPages || loading}
+                        onClick={() => goToPage(data.page + 1)}
+                    >
+                        Next →
+                    </button>
+                </nav>
+            )}
+        </section>
+    );
+}

src/components/WPRenderer/SmartSlider.tsx

@@ -0,0 +1,34 @@
+import { montserratFont } from "@/app/layout";
+
+export const SmartSlider = ({ sliderId }: { sliderId: string }) => {
+    return (
+        <div className="smart-slider">
+            <div className="carousel w-full">
+                <a role="button" href="https://lk.jkhsakha.ru" id="item1" className="carousel-item w-full relative overflow-hidden">
+                    <div className="flex justify-center items-center w-full h-full absolute bg-black/50">
+                        <span className={`text-xl ${montserratFont.className} text-white`} >Личный кабинет</span>
+                    </div>
+                    <img
+                        src="/Личный-кабинет.jpg"
+                        className="w-full" />
+
+                </a>
+                <div id="item2" className="carousel-item w-full">
+                    <img
+                        src="/Способ-оплаты.jpg"
+                        className="w-full" />
+                </div>
+                <div id="item3" className="carousel-item w-full">
+                    <img
+                        src="/first_slide2.jpg"
+                        className="w-full" />
+                </div>
+            </div>
+            <div className="flex w-full justify-center gap-2 py-2">
+                <a href="#item1" className="btn btn-xs">1</a>
+                <a href="#item2" className="btn btn-xs">2</a>
+                <a href="#item3" className="btn btn-xs">3</a>
+            </div>
+        </div>
+    );
+};

src/components/WPRenderer/WPRenderer.tsx

@@ -0,0 +1,98 @@
+import parse, { HTMLReactParserOptions } from 'html-react-parser';
+import { SmartSlider } from './SmartSlider';
+import PostGrid from '../WP/PostGrid/PostGrid.server';
+import { PagePayload } from '@/types/entities';
+
+const options: HTMLReactParserOptions = {
+    replace: (domNode) => {
+        if (domNode.type === 'text') {
+            // Parse custom [tags] in text nodes
+            const text = domNode.data;
+            const parts = text.split(/(\[.*?\])/);
+            if (parts.length > 1) {
+                return parts.map((part, i) => {
+                    if (part.startsWith('[') && part.endsWith(']')) {
+                        // Handle your custom bracket tag
+                        return <div>{JSON.stringify(part)}</div>;
+                    }
+                    return part;
+                });
+            }
+        }
+    }
+};
+
+const replaceShortcodes = (html: string) => {
+    return html
+        .replace(
+            /\[the-post-grid\s+id="(\d+)"(?:\s+title="[^"]*")?\s*\]/g,
+            (_m, gridId) =>
+                `<div data-shortcode="post-grid" data-grid-id="${gridId}"></div>`
+        )
+        .replace(
+            /\[smartslider3\s+slider="(\d+)"\s*\]/g,
+            (_match, sliderId) =>
+                `<div data-shortcode="smartslider3" data-slider-id="${sliderId}"></div>`
+        );
+};
+
+const transformLinks = (html: string) => {
+    // Regex to match https://specificdomain.com/?page_id= followed by numbers
+    // Using a more specific pattern to avoid matching other domains
+    const regex = /(https?:\/\/)?(www\.)?new.jkhsakha\.ru\/(?!wp-content)(\/[^\s"']*)/g
+
+    // Replace only the specific domain links with relative paths
+    return html.replace(regex, '$3');
+};
+
+
+export const renderPostContent = (content: string, payload?: PagePayload) => {
+
+    const transformedContent = replaceShortcodes(
+        transformLinks(content)
+    )
+
+    return (
+        <div>
+            {parse(transformedContent, {
+                replace(domNode) {
+                    if (
+                        domNode &&
+                        domNode.type === 'tag' && domNode.attribs?.['data-shortcode'] === 'smartslider3'
+                    ) {
+                        return (
+                            <SmartSlider
+                                sliderId={(domNode as any).attribs['data-slider-id']}
+                            />
+                        );
+                    } else if (
+                        domNode &&
+                        domNode.type === 'tag' && domNode.attribs?.['data-shortcode'] === 'post-grid'
+                    ) {
+                        const gridId = Number(domNode.attribs["data-grid-id"]);
+                        if (!gridId) return null;
+                        return (
+                            <PostGrid id={gridId} page={payload?.page}/>
+                        );
+                    } else if (
+                        domNode &&
+                        domNode.type === 'tag' && domNode.tagName === 'table'
+                    ) {
+                        domNode.attribs.class = (domNode.attribs.class || '') + ' table table-bordered w-full';
+                        return (
+                            domNode
+                        );
+                    }
+                },
+            })}
+        </div>
+    )
+
+
+    // Basic HTML sanitization - you might want to use a library like DOMPurify in production
+    const createMarkup = () => {
+        return { __html: transformedContent };
+    };
+
+    return <div dangerouslySetInnerHTML={createMarkup()} />;
+}

src/lib/duckdb.ts

@@ -0,0 +1,4 @@
+import { DuckDBConnection, DuckDBInstance } from '@duckdb/node-api';
+
+const instance = await DuckDBInstance.create('../public/jkhsakha.duckdb');
+export const connection = await DuckDBConnection.create(instance)

src/lib/get-page.ts

@@ -0,0 +1,11 @@
+import { Data } from "@puckeditor/core";
+import fs from "fs";
+
+// Replace with call to your database
+export const getPage = (path: string) => {
+    const allData: Record<string, Data> | null = fs.existsSync("database.json")
+        ? JSON.parse(fs.readFileSync("database.json", "utf-8"))
+        : null;
+
+    return allData ? allData[path] : null;
+};

src/lib/get-post-grid.ts

@@ -0,0 +1,9 @@
+export async function getPostGrid(id: number, page = 1) {
+    const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3490"}/api/post-grids/${id}?page=${page}`,
+        { next: { revalidate: 60 } } // ISR
+    );
+
+    if (!res.ok) return null;
+    return res.json();
+}

src/lib/menu.ts

@@ -0,0 +1,36 @@
+export function buildNestedMenu(menuItems: any) {
+    // Create a map for quick lookup by menu_item_id
+    const itemsMap = new Map();
+    const rootItems: any = [];
+
+    // First pass: add all items to the map and initialize items array
+    menuItems.forEach((item: any) => {
+        // Ensure we don't mutate the original object by creating a new one with items array
+        itemsMap.set(item.menu_item_id, {
+            ...item,
+            items: []
+        });
+    });
+
+    // Second pass: build the hierarchy
+    menuItems.forEach((item: any) => {
+        const menuItem = itemsMap.get(item.menu_item_id);
+        const parentId = item.parent_menu_item_id;
+
+        if (parentId === "0") {
+            // This is a root-level item
+            rootItems.push(menuItem);
+        } else {
+            // This is a child item
+            const parentItem = itemsMap.get(parentId);
+            if (parentItem) {
+                parentItem.items.push(menuItem);
+            } else {
+                // Orphaned item - add to root as fallback
+                rootItems.push(menuItem);
+            }
+        }
+    });
+
+    return rootItems;
+}

src/lib/utils.ts

@@ -0,0 +1,20 @@
+export const transformLinks = (html: string) => {
+    // Regex to match https://specificdomain.com/?page_id= followed by numbers
+    // Using a more specific pattern to avoid matching other domains
+    const regex = /(https?:\/\/)?(www\.)?new.jkhsakha\.ru\/(?!wp-content)(\/[^\s"']*)/g
+
+    // Replace only the specific domain links with relative paths
+    return html.replace(regex, '$3');
+};
+
+export function toRelativePath(input: string): string {
+    try {
+        // Handles absolute URLs
+        const url = new URL(input);
+        return url.pathname + url.search + url.hash;
+    } catch {
+        // Already relative (or invalid URL)
+        if (input.startsWith('/')) return input;
+        return '/' + input;
+    }
+}

src/pages/_app.tsx

@@ -1,6 +0,0 @@
-import "@/styles/globals.css";
-import type { AppProps } from "next/app";
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}

src/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}

src/pages/api/home.ts

@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// Gets the page that is set as home page
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const result = await connection.run(`
+        SELECT p.* 
+        FROM wp_posts p
+        WHERE p.ID = (
+            SELECT option_value 
+            FROM wp_options 
+            WHERE option_name = 'page_on_front'
+            LIMIT 1
+        )
+        LIMIT 1;`)
+    const rows = await result.getRowObjectsJson()
+    res.status(200).json(rows);
+}

src/pages/api/menu/footer.ts

@@ -0,0 +1,47 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const result = await connection.run(`
+        SELECT 
+          menu_item.ID AS menu_item_id,
+          menu_item.post_title AS menu_title,
+          menu_item.menu_order,
+          menu_item.post_parent,
+          -- Get the actual page/post content
+          actual_post.ID AS actual_post_id,
+          actual_post.post_title AS actual_post_title,
+          actual_post.post_type,
+          actual_post.post_status,
+          actual_post.post_name AS slug,
+          -- Get the URL (for custom links)
+          url_meta.meta_value AS custom_url,
+          -- Get the object type (post, page, category, custom, etc.)
+          object_type_meta.meta_value AS object_type,
+          -- Get parent menu item info
+          menu_parent_meta.meta_value AS parent_menu_item_id,
+      FROM wp_posts AS menu_item
+      INNER JOIN wp_term_relationships r ON menu_item.ID = r.object_id
+      -- Join to get the actual post ID
+      INNER JOIN wp_postmeta AS object_id_meta ON menu_item.ID = object_id_meta.post_id 
+          AND object_id_meta.meta_key = '_menu_item_object_id'
+      -- Join to get the actual post content
+      INNER JOIN wp_posts AS actual_post ON object_id_meta.meta_value = actual_post.ID
+      -- Left joins for additional info
+      LEFT JOIN wp_postmeta AS url_meta ON menu_item.ID = url_meta.post_id 
+          AND url_meta.meta_key = '_menu_item_url'
+      LEFT JOIN wp_postmeta AS object_type_meta ON menu_item.ID = object_type_meta.post_id 
+          AND object_type_meta.meta_key = '_menu_item_object'
+      LEFT JOIN wp_postmeta AS menu_parent_meta ON menu_item.ID = menu_parent_meta.post_id 
+          AND menu_parent_meta.meta_key = '_menu_item_menu_item_parent'
+      WHERE r.term_taxonomy_id = 10
+        AND menu_item.post_type = 'nav_menu_item'
+        AND menu_item.post_status = 'publish'
+      ORDER BY menu_item.menu_order;`)
+    const rows = await result.getRowObjectsJson()
+    res.status(200).json(rows);
+}

src/pages/api/menu/navbar.ts

@@ -0,0 +1,47 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  const result = await connection.run(`
+        SELECT 
+          menu_item.ID AS menu_item_id,
+          menu_item.post_title AS menu_title,
+          menu_item.menu_order,
+          menu_item.post_parent,
+          -- Get the actual page/post content
+          actual_post.ID AS actual_post_id,
+          actual_post.post_title AS actual_post_title,
+          actual_post.post_type,
+          actual_post.post_status,
+          actual_post.post_name AS slug,
+          -- Get the URL (for custom links)
+          url_meta.meta_value AS custom_url,
+          -- Get the object type (post, page, category, custom, etc.)
+          object_type_meta.meta_value AS object_type,
+          -- Get parent menu item info
+          menu_parent_meta.meta_value AS parent_menu_item_id,
+      FROM wp_posts AS menu_item
+      INNER JOIN wp_term_relationships r ON menu_item.ID = r.object_id
+      -- Join to get the actual post ID
+      INNER JOIN wp_postmeta AS object_id_meta ON menu_item.ID = object_id_meta.post_id 
+          AND object_id_meta.meta_key = '_menu_item_object_id'
+      -- Join to get the actual post content
+      INNER JOIN wp_posts AS actual_post ON object_id_meta.meta_value = actual_post.ID
+      -- Left joins for additional info
+      LEFT JOIN wp_postmeta AS url_meta ON menu_item.ID = url_meta.post_id 
+          AND url_meta.meta_key = '_menu_item_url'
+      LEFT JOIN wp_postmeta AS object_type_meta ON menu_item.ID = object_type_meta.post_id 
+          AND object_type_meta.meta_key = '_menu_item_object'
+      LEFT JOIN wp_postmeta AS menu_parent_meta ON menu_item.ID = menu_parent_meta.post_id 
+          AND menu_parent_meta.meta_key = '_menu_item_menu_item_parent'
+      WHERE r.term_taxonomy_id = 24
+        AND menu_item.post_type = 'nav_menu_item'
+        AND menu_item.post_status = 'publish'
+      ORDER BY menu_item.menu_order;`)
+  const rows = await result.getRowObjectsJson()
+  res.status(200).json(rows);
+}

src/pages/api/pages/id/[id].ts

@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// Gets the page that is set as home page
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const { id } = req.query
+
+    const result = await connection.run(`
+        SELECT p.* 
+        FROM wp_posts p
+        WHERE p.ID = $id
+        LIMIT 1;`, { id: Number(id) })
+    const rows = await result.getRowObjectsJson()
+    res.status(200).json(rows);
+}

src/pages/api/posts/id/[id].ts

@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// Gets the page that is set as home page
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const { id } = req.query
+
+    const result = await connection.run(`
+        SELECT p.* 
+        FROM wp_posts p
+        WHERE p.ID = $id
+        LIMIT 1;`, { id: Number(id) })
+    const rows = await result.getRowObjectsJson()
+    res.status(200).json(rows);
+}

src/pages/api/posts/slug/[slug].ts

@@ -0,0 +1,36 @@
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const { slug } = req.query;
+
+    if (!slug || Array.isArray(slug)) {
+        return res.status(400).json({ error: 'Invalid slug parameter' });
+    }
+
+    try {
+        const result = await connection.run(`
+            SELECT 
+                *
+            FROM wp_posts 
+            WHERE post_name = $slug
+            AND post_status = 'publish'
+            AND post_type IN ('post', 'page')
+            LIMIT 1;
+        `, { slug: slug.toString() });
+
+        const rows = await result.getRowObjectsJson();
+
+        if (rows.length === 0) {
+            return res.status(404).json({ error: 'Post not found' });
+        }
+
+        res.status(200).json(rows[0]);
+    } catch (error) {
+        console.error('Error fetching post:', error);
+        res.status(500).json({ error: 'Failed to fetch post' });
+    }
+}

src/pages/api/posts/slugs.ts

@@ -0,0 +1,22 @@
+import { connection } from "@/lib/duckdb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    try {
+        const result = await connection.run(`
+            SELECT post_name, post_type 
+            FROM wp_posts
+            WHERE post_status = 'publish' 
+            AND post_type IN ('post', 'page')
+            ORDER BY post_date DESC;
+        `);
+        const rows = await result.getRowObjectsJson();
+        res.status(200).json(rows);
+    } catch (error) {
+        console.error('Error fetching slugs:', error);
+        res.status(500).json({ error: 'Failed to fetch slugs' });
+    }
+}

src/pages/index.tsx

@@ -1,78 +0,0 @@
-import Image from "next/image";
-import { Geist, Geist_Mono } from "next/font/google";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export default function Home() {
-  return (
-    <div
-      className={`${geistSans.className} ${geistMono.className} flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black`}
-    >
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the index.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs/pages/getting-started?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}

src/pagesBackup/[slug].txt

@@ -0,0 +1,99 @@
+import { renderPostContent } from '@/components/WPRenderer/WPRenderer';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { useRouter } from 'next/router';
+
+interface Post {
+    ID: string;
+    post_title: string;
+    post_content: string;
+    post_name: string;
+    post_type: string;
+    post_date: string;
+    post_modified: string;
+    post_excerpt: string | null;
+    post_author: string;
+}
+
+interface PageProps {
+    post: Post | null;
+}
+
+export default function PostPage({ post }: PageProps) {
+    const router = useRouter();
+
+    if (!post) {
+        return <div>Публикация не найдена</div>;
+    }
+
+    return (
+        <div className="container mx-auto py-8 max-w-5xl">
+            <article className="prose lg:prose-xl max-w-none">
+                <h1>{post.post_title}</h1>
+                <div className="text-gray-600 mb-6">
+                    <time>
+                        {post.post_date}
+                    </time>
+                </div>
+                {/* Render WordPress content */}
+                {renderPostContent(post.post_content)}
+            </article>
+        </div>
+    );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+    // Fetch all slugs from API
+    console.log("getting all slugs")
+    try {
+        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/posts/slugs`);
+        const posts = await response.json();
+
+        const paths = posts.map((post: { post_name: string }) => ({
+            params: { slug: post.post_name },
+        }));
+
+        console.log("fetched all slugs")
+        return {
+            paths: paths,
+            fallback: true, // or 'true' if you want to generate on-demand
+        };
+    } catch (error) {
+        console.log("couldn't fetch all slugs")
+
+        return {
+            paths: [],
+            fallback: true, // or 'true' if you want to generate on-demand
+        };
+    }
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+    const { slug } = context.params!;
+    console.log("fetching post", slug)
+
+    try {
+        // Fetch post data from API
+
+        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/posts/slug/${slug}`);
+
+        if (!response.ok) {
+            return {
+                notFound: true,
+            };
+        }
+
+        const post = await response.json();
+
+        return {
+            props: {
+                post,
+            },
+            revalidate: 60, // Revalidate every 60 seconds (ISR)
+        };
+    } catch (error) {
+        console.error('Error fetching post:', error);
+        return {
+            notFound: true,
+        };
+    }
+};

src/pagesBackup/_app.tsx

@@ -0,0 +1,14 @@
+import MainLayout from "@/components/Layout/MainLayout";
+import { buildNestedMenu } from "@/lib/menu";
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+
+
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <MainLayout>
+      <Component {...pageProps} />
+    </MainLayout>
+  )
+}

src/pagesBackup/index.txt

@@ -0,0 +1,84 @@
+// pages/index.tsx
+import { renderPostContent } from '@/components/WPRenderer/WPRenderer';
+import { buildNestedMenu } from '@/lib/menu';
+import axios from 'axios';
+import { GetStaticProps } from 'next';
+import { useRouter } from 'next/router';
+import { ReactElement, useEffect } from 'react';
+
+interface PostData {
+  ID: string;
+  post_author: string;
+  post_date: string;
+  post_date_gmt: string;
+  post_content: string;
+}
+
+interface HomePageProps {
+  posts: PostData[];
+  lastUpdated: string;
+}
+
+export default function HomePage({ posts, lastUpdated }: HomePageProps) {
+  const router = useRouter();
+
+  if (router.isFallback) {
+    return (
+      <div>Loading...</div>
+    )
+  }
+
+  const { page_id } = router.query
+
+  useEffect(() => {
+    if (page_id) {
+      axios.get(`/api/pages/id/${page_id}`).then(res => router.push(res.data[0].post_name))
+    }
+  }, [page_id])
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <div key={post.ID} className="post">
+          <div className="post-content">
+            {renderPostContent(post.post_content)}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ISR Implementation
+export const getStaticProps: GetStaticProps = async () => {
+  try {
+    // Fetch data from your API route
+    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'}/api/home`);
+
+    if (!res.ok) {
+      throw new Error('Failed to fetch data from API');
+    }
+
+    const posts = await res.json();
+
+    return {
+      props: {
+        posts,
+        lastUpdated: new Date().toISOString(),
+      },
+      // Revalidate every 60 seconds (ISR)
+      revalidate: 10,
+    };
+  } catch (error) {
+    console.error('Error fetching data:', error);
+
+    // Return empty props or fallback data
+    return {
+      props: {
+        posts: [],
+        lastUpdated: new Date().toISOString(),
+      },
+      revalidate: 10, // Still try to revalidate even if there's an error
+    };
+  }
+};

src/styles/globals.css

@@ -1,26 +1,13 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@plugin "daisyui" {
+  themes: light --default, dark;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
+@plugin "@tailwindcss/typography";
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* Override default h1 styles */
+h1 {
+  @apply text-3xl;
+  /* Or any size you prefer */
 }

src/types/elements.ts

@@ -0,0 +1,59 @@
+export interface ContentScheme {
+    content: ElementTypes[]
+}
+
+export type ElementTypes = Banner | Center | Navbar | BannerCompact
+
+export type ElementBase = {
+    order: number
+}
+
+export interface ButtonLinkProps {
+    size?: 'small' | 'default';
+    variant?: 'default' | 'ghost';
+    href: string;
+    label: string;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+}
+
+export interface BannerProps {
+    title: string;
+    subtitle: string;
+    backgroundImage: string;
+    logoImage: string;
+}
+
+export interface BannerCompactProps {
+    id: number
+}
+
+export interface BannerCompact extends ElementBase {
+    type: 'BannerCompact',
+    props: BannerCompactProps
+}
+
+export interface Banner extends ElementBase {
+    type: 'Banner',
+    props: BannerProps,
+}
+
+export interface CenterProps {
+    content: ElementTypes[]
+    id: number
+}
+
+export interface Center extends ElementBase {
+    type: 'Center',
+    props: CenterProps
+}
+
+export interface NavbarProps {
+    id: number
+}
+
+export interface Navbar extends ElementBase {
+    type: 'Navbar',
+    props: NavbarProps
+}
+

src/types/entities.ts

@@ -0,0 +1,15 @@
+export interface PostData {
+    ID: string;
+    post_author: string;
+    post_name: string;
+    post_title: string;
+    post_excerpt: string;
+    post_date: string;
+    post_date_gmt: string;
+    post_modified: string;
+    post_content: string;
+}
+
+export interface PagePayload {
+    page: number;
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -14,8 +18,15 @@
     "jsx": "react-jsx",
     "incremental": true,
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "next-env.d.ts",
@@ -25,5 +36,8 @@
     ".next/dev/types/**/*.ts",
     "**/*.mts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules",
+    "bun"
+  ]
 }