From a19d2d0db79dc1e2e75a066910845ca7867de71b Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Thu, 25 Sep 2025 11:36:04 -0400
Subject: [PATCH 1/3] created features.md file

---
 features.md           | 20 ++++++++++++++++++++
 src/content/config.ts | 19 +++++++++++++------
 2 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 features.md

diff --git a/features.md b/features.md
new file mode 100644
index 0000000..12450b9
--- /dev/null
+++ b/features.md
@@ -0,0 +1,20 @@
+# Features
+
+Astro template for Markket storefronts
+
+## 2025
+
+### September
+
+- [ ] Display receipt page
+- [ ] Display products list, component, index page, pagination
+- [ ] Display individual product
+- [ ] Display individual page
+- [ ] Display individual article
+- [ ] Display pages list, component, index page
+- [ ] Display articles list, component, index page, pagination
+- [ ] Layout, with SEO components, postghog
+- [x] Github action build scripts
+- [x] homepage structure
+- [x] Cafecito, connects with markket api
+- [x] Astro build and configuration
diff --git a/src/content/config.ts b/src/content/config.ts
index d1dea87..2d0a29e 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -13,6 +13,10 @@ const config: StrapiConfig = {
   sync_interval: 6000,
 };
 
+// @TODO: Find a better type to avoid excessively deep and possibly infinite errors
+type Loader = any;
+
+
 /**
  * Creates a Strapi content loader for Astro
  * @param contentType The Strapi content type to load
@@ -43,9 +47,10 @@ function strapiLoader(query: StrapiQueryOptions) {
 const pages = defineCollection({
   loader: strapiLoader({
     contentType: "page",
+    sort: 'slug:DESC',
     filter: `filters[store][slug][$eq]=${config.store_slug}`,
     populate: 'SEO.socialImage,albums,albums.tracks,albums.cover'
-  }),
+  }) as Loader,
 });
 
 
@@ -54,7 +59,7 @@ const store = defineCollection({
     contentType: "store",
     filter: `filters[slug][$eq]=${config.store_slug}`,
     populate: 'SEO.socialImage,Logo,URLS,Favicon,Cover'
-  }),
+  }) as Loader,
 });
 
 const stores = defineCollection({
@@ -62,15 +67,16 @@ const stores = defineCollection({
     contentType: "store",
     filter: `filters[active]=true`,
     populate: 'SEO.socialImage,Logo,URLS,Favicon'
-  }),
+  }) as Loader,
 });
 
 const products = defineCollection({
   loader: strapiLoader({
     contentType: "product",
     filter: `filters[stores][slug][$eq]=${config.store_slug}`,
+    sort: 'slug:DESC',
     populate: 'SEO,SEO.socialImage,Thumbnail,Slides,PRICES'
-  }),
+  }) as Loader,
 });
 
 const posts = defineCollection({
@@ -78,10 +84,11 @@ const posts = defineCollection({
     contentType: "article",
     filter: `filters[store][slug][$eq]=${config.store_slug}`,
     populate: 'SEO.socialImage,Tags,store,cover',
+    sort: 'createdAt:DESC',
     paginate: {
       limit: 100,
     }
-  }),
+  }) as Loader,
 });
 
 const events = defineCollection({
@@ -89,7 +96,7 @@ const events = defineCollection({
     contentType: "event",
     filter: `filters[stores][slug][$eq]=${config.store_slug}`,
     populate: 'SEO,SEO.socialImage,Tag,Thumbnail,Slides,stores'
-  }),
+  }) as Loader,
 });
 
 export const collections = { posts, pages, stores, products, events, store };

From b65d6a04f749ee4be544afee053da474eea75e10 Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Thu, 25 Sep 2025 13:41:36 -0400
Subject: [PATCH 2/3] including tailwind, block content component

---
 .github/workflows/test_pr.yml      |  60 +++
 astro.config.mjs                   |   4 +
 package-lock.json                  | 607 ++++++++++++++++++++++++++++-
 package.json                       |   4 +-
 src/components/BlocksContent.astro | 335 ++++++++++++++++
 src/styles/base.css                | 285 ++++++++++++++
 src/types.d.ts                     |  39 ++
 7 files changed, 1331 insertions(+), 3 deletions(-)
 create mode 100644 .github/workflows/test_pr.yml
 create mode 100644 src/components/BlocksContent.astro
 create mode 100644 src/styles/base.css
 create mode 100644 src/types.d.ts

diff --git a/.github/workflows/test_pr.yml b/.github/workflows/test_pr.yml
new file mode 100644
index 0000000..9a1130d
--- /dev/null
+++ b/.github/workflows/test_pr.yml
@@ -0,0 +1,60 @@
+name: Test Pull Request
+
+on:
+  # Runs on pull requests
+  pull_request:
+    branches: ["main"]
+    types: [opened, synchronize, reopened]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Basic permissions for testing
+permissions:
+  contents: read
+
+env:
+  BUILD_PATH: "." # default value when not using subfolders
+
+jobs:
+  test:
+    name: Test Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: ${{ env.BUILD_PATH }}/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ${{ env.BUILD_PATH }}
+
+      - name: Create environment file
+        run: |
+          echo "PUBLIC_STRAPI_URL=${{ secrets.PUBLIC_STRAPI_URL }}" >> .env
+          echo "PUBLIC_STORE_SLUG=${{ secrets.PUBLIC_STORE_SLUG }}" >> .env
+          echo "PUBLIC_POSTHOG_KEY=${{ secrets.PUBLIC_POSTHOG_KEY }}" >> .env
+          echo "PUBLIC_URL=https://sell.markket.place" >> .env
+        working-directory: ${{ env.BUILD_PATH }}
+
+      - name: Test Build with Astro
+        run: |
+          npm run build
+        working-directory: ${{ env.BUILD_PATH }}
+
+      - name: Test build output
+        run: |
+          if [ -d "dist" ]; then
+            echo "✅ Build successful - dist folder created"
+            ls -la dist/
+          else
+            echo "❌ Build failed - no dist folder found"
+            exit 1
+          fi
+        working-directory: ${{ env.BUILD_PATH }}
diff --git a/astro.config.mjs b/astro.config.mjs
index 8cf28de..b1b3bb5 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,8 +1,12 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://sell.markket.place',
   // Remove base path since you're using a custom domain
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });
diff --git a/package-lock.json b/package-lock.json
index 704d94f..b30fa67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
       "name": "markket-sell",
       "version": "0.0.1",
       "dependencies": {
+        "@tailwindcss/vite": "^4.1.13",
         "astro": "^5.13.9",
-        "cafecito": "^0.12.2"
+        "cafecito": "^0.12.2",
+        "tailwindcss": "^4.1.13"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -934,11 +936,57 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@oslojs/encoding": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
@@ -1290,6 +1338,253 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
+      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.5.1",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.18",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
+      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-x64": "4.1.13",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
+      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
+      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
+      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
+      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
+      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
+      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
+      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
+      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
+      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
+      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.5",
+        "@emnapi/runtime": "^1.4.5",
+        "@emnapi/wasi-threads": "^1.0.4",
+        "@napi-rs/wasm-runtime": "^0.2.12",
+        "@tybys/wasm-util": "^0.10.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
+      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
+      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.13.tgz",
+      "integrity": "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.13",
+        "@tailwindcss/oxide": "4.1.13",
+        "tailwindcss": "4.1.13"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1731,6 +2026,14 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ci-info": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz",
@@ -1888,7 +2191,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
       "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -1952,6 +2254,18 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.5.0.tgz",
       "integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg=="
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -2120,6 +2434,11 @@
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
     "node_modules/h3": {
       "version": "1.15.4",
       "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.4.tgz",
@@ -2412,6 +2731,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
+      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2431,6 +2758,223 @@
         "node": ">=6"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -3224,6 +3768,25 @@
         }
       ]
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -3915,6 +4478,38 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
+      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w=="
+    },
+    "node_modules/tapable": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
+      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -4477,6 +5072,14 @@
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-1.1.0.tgz",
       "integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA=="
     },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
diff --git a/package.json b/package.json
index c222fa7..7ff7d47 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.13.9",
-    "cafecito": "^0.12.2"
+    "cafecito": "^0.12.2",
+    "tailwindcss": "^4.1.13"
   }
 }
diff --git a/src/components/BlocksContent.astro b/src/components/BlocksContent.astro
new file mode 100644
index 0000000..b11b56c
--- /dev/null
+++ b/src/components/BlocksContent.astro
@@ -0,0 +1,335 @@
+---
+import { type ContentBlock } from '../types.d';
+
+export interface Props {
+  content?: ContentBlock[];
+  className?: string;
+}
+
+const { content, className = '' } = Astro.props;
+---
+
+{content && content.length > 0 && (
+  <div class={`blocks-content ${className}`}>
+    {content.map((block) => (
+      <Fragment>
+        {/* Paragraph blocks */}
+        {block.type === 'paragraph' && (
+          <p class="mb-4 leading-relaxed">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code && (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                )}
+                {child.type === 'link' && !child.code && (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                )}
+                {!child.code && child.type !== 'link' && (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </p>
+        )}
+
+        {/* Heading blocks */}
+        {block.type === 'heading' && block.level === 1 && (
+          <h1 class="text-4xl font-bold my-6 text-gray-900">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code ? (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                ) : child.type === 'link' ? (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                ) : (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </h1>
+        )}
+
+        {block.type === 'heading' && block.level === 2 && (
+          <h2 class="text-3xl font-bold my-5 text-gray-900">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code ? (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                ) : child.type === 'link' ? (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                ) : (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </h2>
+        )}
+
+        {block.type === 'heading' && block.level === 3 && (
+          <h3 class="text-2xl font-bold my-4 text-gray-900">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code ? (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                ) : child.type === 'link' ? (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                ) : (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </h3>
+        )}
+
+        {block.type === 'heading' && (block.level === 4 || !block.level) && (
+          <h4 class="text-xl font-bold my-3 text-gray-900">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code ? (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                ) : child.type === 'link' ? (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                ) : (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </h4>
+        )}
+
+        {block.type === 'heading' && block.level === 5 && (
+          <h5 class="text-lg font-bold my-2 text-gray-900">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code ? (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                ) : child.type === 'link' ? (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                ) : (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </h5>
+        )}
+
+        {block.type === 'heading' && block.level === 6 && (
+          <h6 class="text-base font-bold my-2 text-gray-900">
+            {block.children.map((child) => (
+              <Fragment>
+                {child.code ? (
+                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                    {child.text}
+                  </code>
+                ) : child.type === 'link' ? (
+                  <a
+                    href={child.url}
+                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                  >
+                    {child.children?.[0]?.text || child.text}
+                  </a>
+                ) : (
+                  <span>{child.text}</span>
+                )}
+              </Fragment>
+            ))}
+          </h6>
+        )}
+
+        {/* Code blocks */}
+        {block.type === 'code' && (
+          <div class="my-6">
+            <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto">
+              <code class="font-mono text-sm leading-relaxed">
+                {block.children
+                  .map(child => child.code ? child.text : '')
+                  .filter(Boolean)
+                  .join('\n')}
+              </code>
+            </pre>
+          </div>
+        )}
+
+        {/* List blocks */}
+        {block.type === 'list' && (
+          <ul class="list-disc pl-6 my-4 space-y-2">
+            {block.children
+              .filter(child => child.type === 'list-item')
+              .map((child) => (
+                <li class="leading-relaxed">
+                  {child.children?.map((grandChild) => (
+                    <Fragment>
+                      {grandChild.type === 'link' ? (
+                        <a
+                          href={grandChild.url}
+                          target={grandChild.url?.startsWith('/') ? '_self' : '_blank'}
+                          rel="noopener noreferrer"
+                          class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                        >
+                          {grandChild.text}
+                        </a>
+                      ) : (
+                        <span>{grandChild.text}</span>
+                      )}
+                    </Fragment>
+                  ))}
+                </li>
+              ))}
+          </ul>
+        )}
+
+        {/* Quote blocks */}
+        {block.type === 'quote' && (
+          <blockquote class="border-l-4 border-blue-500 pl-6 my-6 italic text-gray-700 bg-gray-50 py-4 rounded-r-lg">
+            <div class="leading-relaxed">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code ? (
+                    <code class="bg-gray-200 text-gray-800 px-2 py-1 rounded text-sm font-mono not-italic">
+                      {child.text}
+                    </code>
+                  ) : child.type === 'link' ? (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  ) : (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
+              ))}
+            </div>
+          </blockquote>
+        )}
+
+        {/* Image blocks */}
+        {block.type === 'image' && block.image?.url && (
+          <figure class="my-8">
+            <div class="rounded-lg overflow-hidden shadow-lg">
+              <img
+                src={block.image.url}
+                alt={block.image.alternativeText || ''}
+                class="w-full h-auto object-cover"
+                width={block.image.width}
+                height={block.image.height}
+                loading="lazy"
+              />
+            </div>
+            {(block.image.caption || block.image.alternativeText) && (
+              <figcaption class="text-center text-sm text-gray-500 mt-3 italic">
+                {block.image.caption || block.image.alternativeText}
+              </figcaption>
+            )}
+          </figure>
+        )}
+      </Fragment>
+    ))}
+  </div>
+)}
+
+<style>
+  .blocks-content {
+    max-width: none;
+    line-height: 1.7;
+  }
+
+  .blocks-content p {
+    margin-bottom: 1rem;
+  }
+
+  .blocks-content pre {
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+
+  .blocks-content code {
+    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+  }
+
+  .blocks-content img {
+    transition: transform 0.3s ease;
+  }
+
+  .blocks-content img:hover {
+    transform: scale(1.02);
+  }
+
+  .blocks-content a {
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+  }
+
+  .blocks-content blockquote {
+    position: relative;
+  }
+
+  .blocks-content blockquote::before {
+    content: '"';
+    position: absolute;
+    left: -0.5rem;
+    top: -0.5rem;
+    font-size: 3rem;
+    color: #3b82f6;
+    opacity: 0.3;
+  }
+</style>
\ No newline at end of file
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..c952510
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,285 @@
+   @import "tailwindcss";
+
+   /* Reset and Base Styles */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      :root {
+        --primary: #ec4899;
+        --primary-dark: #db2777;
+        --secondary: #6366f1;
+        --text: #111827;
+        --text-muted: #6b7280;
+        --bg: #ffffff;
+        --bg-alt: #f9fafb;
+        --border: #e5e7eb;
+        --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+      }
+
+      body {
+        font-family:
+          "Inter",
+          -apple-system,
+          BlinkMacSystemFont,
+          sans-serif;
+        line-height: 1.6;
+        color: var(--text);
+        background: var(--bg);
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 1rem;
+      }
+
+      /* Header */
+      header {
+        background: var(--bg);
+        border-bottom: 1px solid var(--border);
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        backdrop-filter: blur(10px);
+      }
+
+      nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 0;
+      }
+
+      .logo {
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: var(--primary);
+        text-decoration: none;
+      }
+
+      .nav-button {
+        background: var(--primary);
+        color: white;
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: 0.5rem;
+        font-weight: 600;
+        text-decoration: none;
+        transition: background 0.2s;
+        cursor: pointer;
+      }
+
+      .nav-button:hover {
+        background: var(--primary-dark);
+      }
+
+      /* Hero Section */
+      .hero {
+        padding: 4rem 0 6rem;
+        text-align: center;
+        background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
+      }
+
+      .hero h1 {
+        font-size: 3.5rem;
+        font-weight: 800;
+        margin-bottom: 1rem;
+        background: linear-gradient(135deg, var(--primary), var(--secondary));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .hero-subtitle {
+        font-size: 1.25rem;
+        color: var(--text-muted);
+        margin-bottom: 2rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .cta-primary {
+        background: var(--primary);
+        color: white;
+        padding: 1rem 2rem;
+        border-radius: 0.75rem;
+        font-size: 1.125rem;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.2s;
+        box-shadow: var(--shadow);
+      }
+
+      .cta-primary:hover {
+        background: var(--primary-dark);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+      }
+
+      /* Features Section */
+      .features {
+        padding: 4rem 0;
+        background: var(--bg);
+      }
+
+      .features h2 {
+        text-align: center;
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 3rem;
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 2rem;
+      }
+
+      .feature-card {
+        background: var(--bg-alt);
+        padding: 2rem;
+        border-radius: 1rem;
+        text-align: center;
+        border: 1px solid var(--border);
+        transition: transform 0.2s;
+      }
+
+      .feature-card:hover {
+        transform: translateY(-4px);
+      }
+
+      .feature-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+      }
+
+      .feature-card h3 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+      }
+
+      .feature-card p {
+        color: var(--text-muted);
+      }
+
+      /* Store Info Section */
+      .store-info {
+        padding: 4rem 0;
+        background: var(--bg-alt);
+      }
+
+      .store-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 3rem;
+        align-items: center;
+      }
+
+      .store-details h2 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+      }
+
+      .store-details p {
+        font-size: 1.125rem;
+        color: var(--text-muted);
+        margin-bottom: 2rem;
+      }
+
+      .store-image {
+        text-align: center;
+      }
+
+      .store-image img {
+        width: 100%;
+        max-width: 400px;
+        height: 300px;
+        object-fit: cover;
+        border-radius: 1rem;
+        box-shadow: var(--shadow-lg);
+      }
+
+      /* CTA Section */
+      .cta-section {
+        padding: 4rem 0;
+        background: var(--primary);
+        color: white;
+        text-align: center;
+      }
+
+      .cta-section h2 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+      }
+
+      .cta-section p {
+        font-size: 1.25rem;
+        margin-bottom: 2rem;
+        opacity: 0.9;
+      }
+
+      .cta-secondary {
+        background: white;
+        color: var(--primary);
+        padding: 1rem 2rem;
+        border-radius: 0.75rem;
+        font-size: 1.125rem;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.2s;
+      }
+
+      .cta-secondary:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+      }
+
+      /* Footer */
+      footer {
+        background: var(--text);
+        color: white;
+        padding: 2rem 0;
+        text-align: center;
+      }
+
+      footer p {
+        margin-bottom: 0.5rem;
+        opacity: 0.8;
+      }
+
+      /* Responsive Design */
+      @media (max-width: 768px) {
+        .hero h1 {
+          font-size: 2.5rem;
+        }
+
+        .hero-subtitle {
+          font-size: 1.125rem;
+        }
+
+        .store-content {
+          grid-template-columns: 1fr;
+          gap: 2rem;
+        }
+
+        .features h2,
+        .store-details h2,
+        .cta-section h2 {
+          font-size: 2rem;
+        }
+
+        nav {
+          flex-direction: column;
+          gap: 1rem;
+        }
+      }
\ No newline at end of file
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..a1b2960
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,39 @@
+interface BlockText {
+  text: string;
+  type?: 'text';
+  bold?: boolean;
+}
+
+interface BlockLink {
+  type: 'link';
+  url: string;
+  children: BlockText[];
+}
+
+type BlockChild = BlockText | BlockLink;
+
+export interface ContentBlock {
+  type: 'paragraph' | 'heading' | 'list' | 'list-item' | 'image' | 'link' | 'quote' | 'code';
+  type: string;
+  level?: number;
+  image?: {
+    url: string;
+    formats?: {
+      thumbnail?: { url: string };
+      small?: { url: string };
+      medium?: { url: string };
+      large?: { url: string };
+    };
+    width: number;
+    height: number;
+    name: string;
+  },
+  children: Array<{
+    type: string;
+    code?: boolean;
+    text?: string;
+    bold?: boolean;
+    url?: string;
+    children?: Array<{ text: string; type: string; }>;
+  }>;
+}

From a9b939e5e07e24995764eb1de64c92dc16c50d5d Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 27 Sep 2025 13:38:10 -0400
Subject: [PATCH 3/3] created landing and base layout for better organization

---
 astro.config.mjs                   |   4 +-
 features.md                        |   2 +-
 package-lock.json                  | 553 +++++++++++++++++
 package.json                       |   5 +
 src/components/BlocksContent.astro | 516 ++++++++--------
 src/components/posthog.astro       |  12 +
 src/layouts/BaseLayout.astro       | 386 ++++++++++++
 src/layouts/LandingLayout.astro    | 581 ++++++++++++++++++
 src/pages/index.astro              | 922 +++++++++++++++--------------
 src/styles/base.css                |  37 +-
 10 files changed, 2315 insertions(+), 703 deletions(-)
 create mode 100644 src/components/posthog.astro
 create mode 100644 src/layouts/BaseLayout.astro
 create mode 100644 src/layouts/LandingLayout.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index b1b3bb5..0daaf65 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,11 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 import tailwindcss from "@tailwindcss/vite";
+import react from '@astrojs/react';
 
-// https://astro.build/config
 export default defineConfig({
   site: 'https://sell.markket.place',
-  // Remove base path since you're using a custom domain
+  integrations: [react()],
   vite: {
     plugins: [tailwindcss()],
   },
diff --git a/features.md b/features.md
index 12450b9..cf9a741 100644
--- a/features.md
+++ b/features.md
@@ -13,7 +13,7 @@ Astro template for Markket storefronts
 - [ ] Display individual article
 - [ ] Display pages list, component, index page
 - [ ] Display articles list, component, index page, pagination
-- [ ] Layout, with SEO components, postghog
+- [x] Layout, with SEO components, postghog
 - [x] Github action build scripts
 - [x] homepage structure
 - [x] Cafecito, connects with markket api
diff --git a/package-lock.json b/package-lock.json
index b30fa67..222b04a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,14 @@
       "name": "markket-sell",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/react": "^4.4.0",
+        "@tabler/icons-react": "^3.35.0",
         "@tailwindcss/vite": "^4.1.13",
         "astro": "^5.13.9",
         "cafecito": "^0.12.2",
+        "marked": "^16.3.0",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
         "tailwindcss": "^4.1.13"
       }
     },
@@ -63,6 +68,25 @@
         "node": "18.20.8 || ^20.3.0 || >=22.0.0"
       }
     },
+    "node_modules/@astrojs/react": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-4.4.0.tgz",
+      "integrity": "sha512-RzblkVImAFdV1C0AWsSWzS70Z0FMtW2p0XXkNYu3QePfyVJta3JIy8m8jY8271etaCZtpFjsE2UaiHGZIBm6nw==",
+      "dependencies": {
+        "@vitejs/plugin-react": "^4.7.0",
+        "ultrahtml": "^1.6.0",
+        "vite": "^6.3.6"
+      },
+      "engines": {
+        "node": "18.20.8 || ^20.3.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.50 || ^18.0.21 || ^19.0.0",
+        "@types/react-dom": "^17.0.17 || ^18.0.6 || ^19.0.0",
+        "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@astrojs/telemetry": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
@@ -80,6 +104,159 @@
         "node": "18.20.8 || ^20.3.0 || >=22.0.0"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz",
+      "integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
+      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -96,6 +273,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
@@ -110,6 +307,64 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
+      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
@@ -992,6 +1247,11 @@
       "resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA=="
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
@@ -1338,6 +1598,30 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.35.0.tgz",
+      "integrity": "sha512-yYXe+gJ56xlZFiXwV9zVoe3FWCGuZ/D7/G4ZIlDtGxSx5CGQK110wrnT29gUj52kEZoxqF7oURTk97GQxELOFQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.35.0.tgz",
+      "integrity": "sha512-XG7t2DYf3DyHT5jxFNp5xyLVbL4hMJYJhiSdHADzAjLRYfL7AnjlRfiHDHeXxkb2N103rEIvTsBRazxXtAUz2g==",
+      "dependencies": {
+        "@tabler/icons": "3.35.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
@@ -1585,6 +1869,43 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1643,6 +1964,24 @@
         "undici-types": "~7.12.0"
       }
     },
+    "node_modules/@types/react": {
+      "version": "19.1.13",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
+      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
+      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "peer": true,
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -1653,6 +1992,25 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1901,6 +2259,14 @@
         }
       ]
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.7.tgz",
+      "integrity": "sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/blob-to-buffer": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/blob-to-buffer/-/blob-to-buffer-1.2.9.tgz",
@@ -1949,6 +2315,38 @@
         "base64-js": "^1.1.2"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.26.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz",
+      "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.3",
+        "caniuse-lite": "^1.0.30001741",
+        "electron-to-chromium": "^1.5.218",
+        "node-releases": "^2.0.21",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/cafecito": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/cafecito/-/cafecito-0.12.2.tgz",
@@ -1965,6 +2363,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001745",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz",
+      "integrity": "sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -2089,6 +2506,11 @@
       "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
       "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w=="
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+    },
     "node_modules/cookie": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
@@ -2141,6 +2563,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2249,6 +2677,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.224",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.224.tgz",
+      "integrity": "sha512-kWAoUu/bwzvnhpdZSIc6KUyvkI1rbRXMT0Eq8pKReyOyaPZcctMli+EgvcN1PAvwVc7Tdo4Fxi2PsLNDU05mdg=="
+    },
     "node_modules/emoji-regex": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.5.0.tgz",
@@ -2322,6 +2755,14 @@
         "@esbuild/win32-x64": "0.25.10"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
@@ -2418,6 +2859,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
@@ -2739,6 +3188,11 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2750,6 +3204,28 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -3016,6 +3492,17 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.3.0.tgz",
+      "integrity": "sha512-K3UxuKu6l6bmA5FUwYho8CfJBlsUWAooKtdGgMcERSpF7gcBUrCGsLH7wDaaNOzwq18JzSUDyoEb/YsrqMac3w==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/mdast-util-definitions": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz",
@@ -3866,6 +4353,11 @@
       "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.3.tgz",
       "integrity": "sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog=="
     },
+    "node_modules/node-releases": {
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw=="
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4067,6 +4559,33 @@
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
       "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="
     },
+    "node_modules/react": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -4334,6 +4853,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -4881,6 +5405,35 @@
         }
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
diff --git a/package.json b/package.json
index 7ff7d47..7eb0d50 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,14 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/react": "^4.4.0",
+    "@tabler/icons-react": "^3.35.0",
     "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.13.9",
     "cafecito": "^0.12.2",
+    "marked": "^16.3.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.13"
   }
 }
diff --git a/src/components/BlocksContent.astro b/src/components/BlocksContent.astro
index b11b56c..2e785e5 100644
--- a/src/components/BlocksContent.astro
+++ b/src/components/BlocksContent.astro
@@ -1,253 +1,185 @@
 ---
-import { type ContentBlock } from '../types.d';
+import { type ContentBlock } from "../types.d";
 
 export interface Props {
   content?: ContentBlock[];
   className?: string;
 }
 
-const { content, className = '' } = Astro.props;
+const { content, className = "" } = Astro.props;
 ---
 
-{content && content.length > 0 && (
-  <div class={`blocks-content ${className}`}>
-    {content.map((block) => (
-      <Fragment>
-        {/* Paragraph blocks */}
-        {block.type === 'paragraph' && (
-          <p class="mb-4 leading-relaxed">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code && (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                )}
-                {child.type === 'link' && !child.code && (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                )}
-                {!child.code && child.type !== 'link' && (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </p>
-        )}
-
-        {/* Heading blocks */}
-        {block.type === 'heading' && block.level === 1 && (
-          <h1 class="text-4xl font-bold my-6 text-gray-900">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code ? (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                ) : child.type === 'link' ? (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                ) : (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </h1>
-        )}
-
-        {block.type === 'heading' && block.level === 2 && (
-          <h2 class="text-3xl font-bold my-5 text-gray-900">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code ? (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                ) : child.type === 'link' ? (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                ) : (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </h2>
-        )}
-
-        {block.type === 'heading' && block.level === 3 && (
-          <h3 class="text-2xl font-bold my-4 text-gray-900">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code ? (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                ) : child.type === 'link' ? (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                ) : (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </h3>
-        )}
+{
+  content && content.length > 0 && (
+    <div class={`blocks-content ${className}`}>
+      {content.map((block) => (
+        <Fragment>
+          {/* Paragraph blocks */}
+          {block.type === "paragraph" && (
+            <p class="mb-4 leading-relaxed">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code && (
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                      {child.text}
+                    </code>
+                  )}
+                  {child.type === "link" && !child.code && (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  )}
+                  {!child.code && child.type !== "link" && (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
+              ))}
+            </p>
+          )}
 
-        {block.type === 'heading' && (block.level === 4 || !block.level) && (
-          <h4 class="text-xl font-bold my-3 text-gray-900">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code ? (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                ) : child.type === 'link' ? (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                ) : (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </h4>
-        )}
+          {/* Heading blocks */}
+          {block.type === "heading" && block.level === 1 && (
+            <h1 class="text-4xl font-bold my-6" style="color: var(--text);">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code ? (
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                      {child.text}
+                    </code>
+                  ) : child.type === "link" ? (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  ) : (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
+              ))}
+            </h1>
+          )}
 
-        {block.type === 'heading' && block.level === 5 && (
-          <h5 class="text-lg font-bold my-2 text-gray-900">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code ? (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                ) : child.type === 'link' ? (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                ) : (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </h5>
-        )}
+          {block.type === "heading" && block.level === 2 && (
+            <h2 class="text-3xl font-bold my-5" style="color: var(--text);">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code ? (
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                      {child.text}
+                    </code>
+                  ) : child.type === "link" ? (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  ) : (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
+              ))}
+            </h2>
+          )}
 
-        {block.type === 'heading' && block.level === 6 && (
-          <h6 class="text-base font-bold my-2 text-gray-900">
-            {block.children.map((child) => (
-              <Fragment>
-                {child.code ? (
-                  <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
-                    {child.text}
-                  </code>
-                ) : child.type === 'link' ? (
-                  <a
-                    href={child.url}
-                    target={child.url?.startsWith('/') ? '_self' : '_blank'}
-                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                  >
-                    {child.children?.[0]?.text || child.text}
-                  </a>
-                ) : (
-                  <span>{child.text}</span>
-                )}
-              </Fragment>
-            ))}
-          </h6>
-        )}
+          {block.type === "heading" && block.level === 3 && (
+            <h3 class="text-2xl font-bold my-4" style="color: var(--text);">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code ? (
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                      {child.text}
+                    </code>
+                  ) : child.type === "link" ? (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  ) : (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
+              ))}
+            </h3>
+          )}
 
-        {/* Code blocks */}
-        {block.type === 'code' && (
-          <div class="my-6">
-            <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto">
-              <code class="font-mono text-sm leading-relaxed">
-                {block.children
-                  .map(child => child.code ? child.text : '')
-                  .filter(Boolean)
-                  .join('\n')}
-              </code>
-            </pre>
-          </div>
-        )}
+          {block.type === "heading" && (block.level === 4 || !block.level) && (
+            <h4 class="text-xl font-bold my-3 ">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code ? (
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                      {child.text}
+                    </code>
+                  ) : child.type === "link" ? (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  ) : (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
+              ))}
+            </h4>
+          )}
 
-        {/* List blocks */}
-        {block.type === 'list' && (
-          <ul class="list-disc pl-6 my-4 space-y-2">
-            {block.children
-              .filter(child => child.type === 'list-item')
-              .map((child) => (
-                <li class="leading-relaxed">
-                  {child.children?.map((grandChild) => (
-                    <Fragment>
-                      {grandChild.type === 'link' ? (
-                        <a
-                          href={grandChild.url}
-                          target={grandChild.url?.startsWith('/') ? '_self' : '_blank'}
-                          rel="noopener noreferrer"
-                          class="text-blue-600 hover:text-pink-600 transition-colors underline"
-                        >
-                          {grandChild.text}
-                        </a>
-                      ) : (
-                        <span>{grandChild.text}</span>
-                      )}
-                    </Fragment>
-                  ))}
-                </li>
+          {block.type === "heading" && block.level === 5 && (
+            <h5 class="text-lg font-bold my-2" style="color: var(--text);">
+              {block.children.map((child) => (
+                <Fragment>
+                  {child.code ? (
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
+                      {child.text}
+                    </code>
+                  ) : child.type === "link" ? (
+                    <a
+                      href={child.url}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                    >
+                      {child.children?.[0]?.text || child.text}
+                    </a>
+                  ) : (
+                    <span>{child.text}</span>
+                  )}
+                </Fragment>
               ))}
-          </ul>
-        )}
+            </h5>
+          )}
 
-        {/* Quote blocks */}
-        {block.type === 'quote' && (
-          <blockquote class="border-l-4 border-blue-500 pl-6 my-6 italic text-gray-700 bg-gray-50 py-4 rounded-r-lg">
-            <div class="leading-relaxed">
+          {block.type === "heading" && block.level === 6 && (
+            <h6 class="text-base font-bold my-2" style="color: var(--text);">
               {block.children.map((child) => (
                 <Fragment>
                   {child.code ? (
-                    <code class="bg-gray-200 text-gray-800 px-2 py-1 rounded text-sm font-mono not-italic">
+                    <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono">
                       {child.text}
                     </code>
-                  ) : child.type === 'link' ? (
+                  ) : child.type === "link" ? (
                     <a
                       href={child.url}
-                      target={child.url?.startsWith('/') ? '_self' : '_blank'}
+                      target={child.url?.startsWith("/") ? "_self" : "_blank"}
                       rel="noopener noreferrer"
                       class="text-blue-600 hover:text-pink-600 transition-colors underline"
                     >
@@ -258,34 +190,108 @@ const { content, className = '' } = Astro.props;
                   )}
                 </Fragment>
               ))}
-            </div>
-          </blockquote>
-        )}
+            </h6>
+          )}
 
-        {/* Image blocks */}
-        {block.type === 'image' && block.image?.url && (
-          <figure class="my-8">
-            <div class="rounded-lg overflow-hidden shadow-lg">
-              <img
-                src={block.image.url}
-                alt={block.image.alternativeText || ''}
-                class="w-full h-auto object-cover"
-                width={block.image.width}
-                height={block.image.height}
-                loading="lazy"
-              />
+          {/* Code blocks */}
+          {block.type === "code" && (
+            <div class="my-6">
+              <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto">
+                <code class="font-mono text-sm leading-relaxed">
+                  {block.children
+                    .map((child) => (child.code ? child.text : ""))
+                    .filter(Boolean)
+                    .join("\n")}
+                </code>
+              </pre>
             </div>
-            {(block.image.caption || block.image.alternativeText) && (
-              <figcaption class="text-center text-sm text-gray-500 mt-3 italic">
-                {block.image.caption || block.image.alternativeText}
-              </figcaption>
-            )}
-          </figure>
-        )}
-      </Fragment>
-    ))}
-  </div>
-)}
+          )}
+
+          {/* List blocks */}
+          {block.type === "list" && (
+            <ul class="list-disc pl-6 my-4 space-y-2">
+              {block.children
+                .filter((child) => child.type === "list-item")
+                .map((child) => (
+                  <li class="leading-relaxed">
+                    {child.children?.map((grandChild) => (
+                      <Fragment>
+                        {grandChild.type === "link" ? (
+                          <a
+                            href={grandChild.url}
+                            target={
+                              grandChild.url?.startsWith("/")
+                                ? "_self"
+                                : "_blank"
+                            }
+                            rel="noopener noreferrer"
+                            class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                          >
+                            {grandChild.text}
+                          </a>
+                        ) : (
+                          <span>{grandChild.text}</span>
+                        )}
+                      </Fragment>
+                    ))}
+                  </li>
+                ))}
+            </ul>
+          )}
+
+          {/* Quote blocks */}
+          {block.type === "quote" && (
+            <blockquote class="border-l-4 border-blue-500 pl-6 my-6 italic text-gray-700 bg-gray-50 py-4 rounded-r-lg">
+              <div class="leading-relaxed">
+                {block.children.map((child) => (
+                  <Fragment>
+                    {child.code ? (
+                      <code class="bg-gray-200 text-gray-800 px-2 py-1 rounded text-sm font-mono not-italic">
+                        {child.text}
+                      </code>
+                    ) : child.type === "link" ? (
+                      <a
+                        href={child.url}
+                        target={child.url?.startsWith("/") ? "_self" : "_blank"}
+                        rel="noopener noreferrer"
+                        class="text-blue-600 hover:text-pink-600 transition-colors underline"
+                      >
+                        {child.children?.[0]?.text || child.text}
+                      </a>
+                    ) : (
+                      <span>{child.text}</span>
+                    )}
+                  </Fragment>
+                ))}
+              </div>
+            </blockquote>
+          )}
+
+          {/* Image blocks */}
+          {block.type === "image" && block.image?.url && (
+            <figure class="my-8">
+              <div class="rounded-lg overflow-hidden shadow-lg">
+                <img
+                  src={block.image.url}
+                  alt={block.image.alternativeText || ""}
+                  class="w-full h-auto object-cover"
+                  width={block.image.width}
+                  height={block.image.height}
+                  loading="lazy"
+                />
+              </div>
+              {(block.image.caption || block.image.alternativeText) && (
+                <figcaption class="text-center text-sm text-gray-500 mt-3 italic">
+                  {block.image.caption || block.image.alternativeText}
+                </figcaption>
+              )}
+            </figure>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  )
+}
 
 <style>
   .blocks-content {
@@ -303,7 +309,7 @@ const { content, className = '' } = Astro.props;
   }
 
   .blocks-content code {
-    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-family: "Fira Code", "Consolas", "Monaco", "Courier New", monospace;
   }
 
   .blocks-content img {
@@ -332,4 +338,4 @@ const { content, className = '' } = Astro.props;
     color: #3b82f6;
     opacity: 0.3;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/posthog.astro b/src/components/posthog.astro
new file mode 100644
index 0000000..82ddeea
--- /dev/null
+++ b/src/components/posthog.astro
@@ -0,0 +1,12 @@
+---
+// src/components/posthog.astro
+const pg_key = import.meta.env.PUBLIC_POSTHOG_KEY || '';
+
+---
+<script is:inline define:vars={{pg_key}}>
+  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+  pg_key && posthog.init(pg_key, {
+    api_host:'https://us.i.posthog.com',
+    defaults: '2025-05-24'
+  })
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..a82ff27
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,386 @@
+---
+import "../styles/base.css";
+import Posthog from '../components/posthog.astro';
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  canonical?: string;
+  noindex?: boolean;
+  type?: 'website' | 'article' | 'product';
+  publishedTime?: string;
+  modifiedTime?: string;
+  author?: string;
+  siteName?: string;
+  locale?: string;
+  alternateLocales?: Array<{ locale: string; url: string }>;
+  structuredData?: any;
+  className?: string;
+  favicon?: string;
+}
+
+const {
+  title = "Markkët Space - Create Your Store",
+  description = "The hub to launch, grow, and thrive. For creators, shopkeepers, and dreamers. Simple ecommerce solutions.",
+  image = "/favicon.svg",
+  canonical,
+  noindex = false,
+  type = 'website',
+  publishedTime,
+  modifiedTime,
+  author,
+  siteName = "Markkët Space",
+  locale = "en",
+  alternateLocales = [],
+  structuredData,
+  className = "",
+  favicon = '/favicon.png'
+} = Astro.props;
+
+// Get the canonical URL - use provided canonical or current URL
+const canonicalURL = canonical || new URL(Astro.url.pathname, Astro.site);
+
+// Ensure image is absolute URL
+const absoluteImage = image?.startsWith('http')
+  ? image
+  : new URL(image, Astro.site);
+
+// Generate structured data for SEO
+const defaultStructuredData = {
+  "@context": "https://schema.org",
+  "@type": type === 'article' ? "Article" : type === 'product' ? "Product" : "WebSite",
+  "name": title,
+  "description": description,
+  "url": canonicalURL,
+  ...(image && { "image": absoluteImage }),
+  ...(author && { "author": { "@type": "Person", "name": author } }),
+  ...(publishedTime && { "datePublished": publishedTime }),
+  ...(modifiedTime && { "dateModified": modifiedTime }),
+  ...(siteName && { "publisher": { "@type": "Organization", "name": siteName } })
+};
+
+const finalStructuredData = structuredData || defaultStructuredData;
+---
+
+<!doctype html>
+<html lang={locale} class={className}>
+  <head>
+    <Posthog />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- Primary Meta Tags -->
+    <title>{title}</title>
+    <meta name="title" content={title} />
+    <meta name="description" content={description} />
+    {canonical && <link rel="canonical" href={canonicalURL} />}
+    {noindex && <meta name="robots" content="noindex, nofollow" />}
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content={type} />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={absoluteImage} />
+    <meta property="og:site_name" content={siteName} />
+    <meta property="og:locale" content={locale} />
+    {alternateLocales.map(({ locale: altLocale, url }) => (
+      <meta property="og:locale:alternate" content={altLocale} />
+    ))}
+    {publishedTime && <meta property="article:published_time" content={publishedTime} />}
+    {modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
+    {author && <meta property="article:author" content={author} />}
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={canonicalURL} />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    <meta property="twitter:image" content={absoluteImage} />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href={favicon} />
+    <link rel="apple-touch-icon" sizes="180x180" href={favicon} />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Alternate Language Links -->
+    {alternateLocales.map(({ locale: altLocale, url }) => (
+      <link rel="alternate" hreflang={altLocale} href={url} />
+    ))}
+
+    <!-- Structured Data -->
+    <script type="application/ld+json" set:html={JSON.stringify(finalStructuredData)} />
+
+    <!-- Additional head content from pages -->
+    <slot name="head" />
+  </head>
+
+  <body>
+    <!-- Skip to main content for accessibility -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    <!-- Header -->
+    <header class="site-header">
+      <slot name="header">
+        <!-- Default header - can be overridden by pages -->
+        <div class="container">
+          <nav class="main-nav">
+            <a href="/" class="logo">{siteName}</a>
+            <div class="nav-links">
+              <!-- <a href="/blocks-demo" class="nav-link">Demo</a> -->
+              <a
+                href="https://de.markket.place/auth/magic"
+                class="nav-button"
+                target="_blank"
+              >
+                Get started
+              </a>
+            </div>
+          </nav>
+        </div>
+      </slot>
+    </header>
+
+    <!-- Main Content -->
+    <main id="main-content" class="main-content">
+      <slot />
+    </main>
+
+    <!-- Footer -->
+    <footer class="site-footer">
+      <slot name="footer">
+        <!-- Default footer - can be overridden by pages -->
+        <div class="container">
+          <div class="footer-content">
+            <div class="footer-section">
+            <h3 class="">{siteName}</h3>
+              <p>A cool, easy ecommerce platform built by artists, for artists</p>
+            </div>
+            <div class="footer-section">
+              <h4>Quick Links</h4>
+              <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="https://github.com/calimania/markket-space" target="_blank">GitHub</a></li>
+              </ul>
+            </div>
+            <div class="footer-section">
+              <h4>Get Started</h4>
+              <ul>
+                <li><a href="https://de.markket.place/auth/magic" target="_blank">Register / login</a></li>
+                <li><a href="https://de.markket.place/store/next/showcase" target="_blank">Templates</a></li>
+                <li><a href="https://de.markket.place/store/dev" target="_blank">Dev store</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-bottom">
+            <p>&copy; 2025 {siteName}. Built with Astro, Strapi, and Markkët</p>
+            <p>Early access • Join the creative community</p>
+          </div>
+        </div>
+      </slot>
+    </footer>
+    <slot name="scripts" />
+  </body>
+</html>
+
+<style>
+  /* Accessibility */
+  .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: var(--primary);
+    color: white;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 0 0 4px 4px;
+    z-index: 1000;
+    transition: top 0.2s;
+  }
+
+  .skip-link:focus {
+    top: 0;
+  }
+
+  /* Header Styles */
+  .site-header {
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--primary) !important;
+    text-decoration: none;
+    transition: transform 0.2s;
+  }
+
+  .logo:hover {
+    transform: scale(1.05);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+  }
+
+  .nav-link:hover {
+    background: var(--bg-alt);
+    color: var(--primary);
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.2s;
+    cursor: pointer;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+  }
+
+  /* Main Content */
+  .main-content {
+    min-height: calc(100vh - 200px);
+  }
+
+  /* Footer Styles */
+  .site-footer {
+    background: var(--color-blue-500) !important;
+    color: white !important;
+    padding: 3rem 0 1rem;
+    margin-top: 4rem;
+  }
+
+  .footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .footer-section h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--text);
+  }
+
+  .footer-section h4 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+
+  .footer-section p {
+    opacity: 0.8;
+    line-height: 1.6;
+    color: white !important;
+  }
+
+  .footer-section ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .footer-section ul li {
+    margin-bottom: 0.5rem;
+  }
+
+  .footer-section ul li a {
+    color: white;
+    text-decoration: none;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+  }
+
+  .footer-section ul li a:hover {
+    opacity: 1;
+    color: var(--primary);
+  }
+
+  .footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 2rem;
+    text-align: center;
+  }
+
+  .footer-bottom p {
+    margin-bottom: 0.5rem;
+    opacity: 0.7;
+    font-size: 0.875rem;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .main-nav {
+      flex-direction: column;
+      gap: 1rem;
+      padding: 1rem 0;
+    }
+
+    .nav-links {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .footer-content {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+  }
+
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #111827;
+      --bg-alt: #1f2937;
+      --text: #f9fafb;
+      --text-muted: #d1d5db;
+      --border: #374151;
+    }
+
+    .site-header {
+      background: rgba(17, 24, 39, 0.95);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
new file mode 100644
index 0000000..0e1b4ca
--- /dev/null
+++ b/src/layouts/LandingLayout.astro
@@ -0,0 +1,581 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import { getCollection } from "astro:content";
+import { IconInfinity, IconPalette, IconSparkles } from '@tabler/icons-react';
+import { marked } from 'marked';
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  heroTitle?: string;
+  heroSubtitle?: string;
+  heroCtaText?: string;
+  heroCtaUrl?: string;
+  showStoreInfo?: boolean;
+  className?: string;
+}
+
+// Get store data for dynamic content
+const storeData = await getCollection("store");
+const store = storeData[0]?.data || {};
+const storeName = store.title || "Markkët Space";
+const storeDescription = store.Description || "The hub to launch, grow, and thrive";
+const parsedDescription = marked.parse(storeDescription);
+
+const {
+  title = store.SEO?.metaTitle || `${storeName} - Create Your Store`,
+  description = store.SEO?.metaDescription || storeDescription,
+  image = store.SEO?.socialImage?.formats?.large?.url || store.SEO?.socialImage?.url || "/favicon.svg",
+  heroTitle = storeName,
+  heroCtaText = "Featured Stores",
+  heroCtaUrl = "https://de.markket.place/stores",
+  showStoreInfo = true,
+  className = "",
+} = Astro.props;
+---
+
+<BaseLayout
+  title={title}
+  description={description}
+  image={image}
+  siteName={storeName}
+  className={className}
+  favicon={store?.Favicon?.url}
+  structuredData={{
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": storeName,
+    "description": storeDescription,
+    "url": Astro.site,
+    "publisher": {
+      "@type": "Organization",
+      "name": "Markkët Space",
+      "logo": {
+        "@type": "ImageObject",
+        "url": new URL("/favicon.svg", Astro.site)
+      }
+    },
+    "potentialAction": {
+      "@type": "SearchAction",
+      "target": {
+        "@type": "EntryPoint",
+        "urlTemplate": `${heroCtaUrl}?q={search_term_string}`
+      },
+      "query-input": "required name=search_term_string"
+    }
+  }}
+>
+  <!-- Custom header for landing pages -->
+  <header class="landing-header" slot="header">
+    <div class="container">
+      <nav class="main-nav">
+        <a href="/" class="logo">
+          {storeName}
+        </a>
+        <div class="nav-links">
+          <a href="/blocks-demo" class="nav-link">Demo</a>
+          <a href="https://github.com/calimania/markket-space" class="nav-link" target="_blank">GitHub</a>
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="nav-button"
+            target="_blank"
+          >
+            Start Selling
+          </a>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <!-- Hero Section -->
+  <section class="hero-section">
+    <div class="container">
+      <div class="hero-content">
+        <div class="hero-badge">keep the internet yours</div>
+        <h1 class="hero-title">{heroTitle}</h1>
+        <p>Simple Ecommerce
+          <br>Add content, products, set prices, and connect Stripe for fast, secure payouts
+        </p>
+        <div class="hero-stats">
+          <div class="stat">
+            <div class="stat-number">Free</div>
+            <div class="stat-label">To get started</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">Quick</div>
+            <div class="stat-label">Setup time</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">
+              <IconInfinity size={48} client:load />
+            </div>
+            <div class="stat-label">Possibilities</div>
+          </div>
+        </div>
+        <div class="hero-actions">
+          <a href="https://de.markket.place/auth/magic" class="cta-primary" target="_blank">
+            Register
+          </a>
+          <a href={heroCtaUrl} class="cta-secondary" target="_blank">
+            {heroCtaText}
+          </a>
+        </div>
+        <div class="hero-community">
+          <p>
+            <IconPalette size={16} client:load /> Join a creative community • Built for flexibility
+            <IconSparkles size={16} client:load /> Sell art, digital downloads, subscriptions, or services
+          </p>
+        </div>
+      </div>
+      {store.Cover && (
+        <div class="hero-image">
+          <img
+            src={(store.Cover as any).formats?.large?.url || store.Cover.url}
+            alt={store.Cover.alternativeText || "Store showcase"}
+            loading="eager"
+          />
+        </div>
+      )}
+    </div>
+  </section>
+
+  <!-- Main Content Slot -->
+  <slot />
+
+  <!-- Store Info Section (optional) -->
+  {showStoreInfo && (
+    <section class="store-info-section">
+      <div class="container">
+        <div class="store-content">
+          <div class="store-details">
+            <h2>About {storeName}</h2>
+            <div set:html={parsedDescription} />
+          </div>
+          {store.Logo && (
+            <div class="store-logo">
+              <img
+                src={(store.Logo as any).formats?.medium?.url || store.Logo.url}
+                alt={store.Logo.alternativeText || "Store logo"}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )}
+
+  <!-- CTA Section -->
+  <section class="final-cta-section">
+    <div class="container">
+      <div class="cta-content">
+        <h2>Ready to Start Selling?</h2>
+        <p>
+          Join thousands of creators who have already launched their stores with
+          our platform. Get started in minutes, not hours.
+        </p>
+        <div class="cta-actions">
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="cta-primary large"
+            target="_blank"
+          >
+            Get Started for Free
+          </a>
+          <a
+            href="https://github.com/calimania/markket-space"
+            class="cta-secondary"
+            target="_blank"
+          >
+            View Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</BaseLayout>
+
+<style>
+  /* Landing Header */
+  .landing-header {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  /* Navigation */
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: var(--primary-dark);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+  }
+
+  .nav-link:hover {
+    color: var(--primary);
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s ease;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+  }
+
+  .hero-community p {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  /* Hero Section */
+  .hero-section {
+    padding: 6rem 0 8rem;
+    background: var(--bg-gradient);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+  .hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .hero-badge {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--text-light);
+    padding: 0.5rem 1.5rem;
+    border-radius: 2rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 2rem;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .hero-title {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 900;
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+    color: var(--text-light);
+    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .hero-subtitle {
+    font-size: 1.4rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 3rem;
+    line-height: 1.6;
+    max-width: 600px;
+  }
+
+  .hero-stats {
+    display: flex;
+    gap: 3rem;
+    margin-bottom: 3rem;
+    justify-content: center;
+  }
+
+  .stat {
+    text-align: center;
+  }
+
+  .stat-number {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--text-light);
+    margin-bottom: 0.5rem;
+  }
+
+  .stat-label {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .hero-community {
+    margin-top: 2rem;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    max-width: 500px;
+  }
+
+  .hero-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .hero-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero-image img {
+    width: 100%;
+    max-width: 500px;
+    height: 400px;
+    object-fit: cover;
+    border-radius: 1.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+  }
+
+  .hero-image img:hover {
+    transform: translateY(-10px) scale(1.02);
+  }
+
+  /* CTA Buttons */
+  .cta-primary {
+    background: rgba(255, 255, 255, 0.95);
+    color: var(--primary);
+    padding: 1.25rem 2.5rem;
+    border-radius: var(--radius-lg);
+    font-size: 1.125rem;
+    font-weight: 700;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-xl);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .cta-primary:hover {
+    background: white;
+    color: var(--primary-dark);
+    transform: translateY(-3px);
+    box-shadow: 0 12px 35px rgba(255, 107, 157, 0.4);
+  }
+
+  .cta-primary.large {
+    padding: 1.5rem 3rem;
+    font-size: 1.25rem;
+  }
+
+  .cta-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.9);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    padding: 1.25rem 2.5rem;
+    border-radius: var(--radius-lg);
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+  }
+
+  .cta-secondary:hover {
+    background: rgba(255, 255, 255, 0.7);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+    color: var(--primary-dark);
+  }
+
+  .cta-outline {
+    background: transparent;
+    color: var(--primary);
+    border: 2px solid var(--primary);
+    padding: 1rem 2rem;
+    border-radius: 0.75rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.2s;
+  }
+
+  .cta-outline:hover {
+    background: var(--primary);
+    color: white;
+  }
+
+  /* Store Info Section */
+  .store-info-section {
+    padding: 4rem 0;
+    background: var(--bg-alt);
+  }
+
+  .store-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 4rem;
+    align-items: center;
+  }
+
+  .store-details h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: var(--text);
+  }
+
+  .store-details p {
+    font-size: 1.125rem;
+    color: var(--text-muted);
+    margin-bottom: 2rem;
+    line-height: 1.7;
+  }
+
+
+  .store-logo {
+    text-align: center;
+  }
+
+  .store-logo img {
+    width: 100%;
+    max-width: 300px;
+    height: 300px;
+    object-fit: contain;
+    border-radius: 1rem;
+    background: white;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Final CTA Section */
+  .final-cta-section {
+    padding: 4rem 0;
+    background: var(--primary);
+    color: white;
+    text-align: center;
+  }
+
+  .cta-content h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+
+  .cta-content p {
+    font-size: 1.25rem;
+    margin-bottom: 2.5rem;
+    opacity: 0.9;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .cta-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .final-cta-section .cta-primary {
+    background: white;
+    color: var(--primary);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
+  }
+
+  .final-cta-section .cta-primary:hover {
+    transform: translateY(-2px);
+  }
+
+  .final-cta-section .cta-secondary {
+    border-color: rgba(255, 255, 255, 0.3);
+    color: white;
+  }
+
+  .final-cta-section .cta-secondary:hover {
+    border-color: white;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .hero-content {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+
+    .hero-title {
+      font-size: 2.5rem;
+    }
+
+    .hero-subtitle {
+      font-size: 1.125rem;
+    }
+
+    .hero-actions {
+      justify-content: center;
+    }
+
+    .store-content {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+
+    .store-details h2,
+    .cta-content h2 {
+      font-size: 2rem;
+    }
+
+    .cta-actions {
+      justify-content: center;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ca9bed4..e347167 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,456 +1,504 @@
 ---
 import { getCollection } from "astro:content";
+import LandingLayout from "../layouts/LandingLayout.astro";
+import BlocksContent from "../components/BlocksContent.astro";
+import {
+  IconPalette,
+  IconCoin,
+  IconUsers,
+  IconDeviceMobile,
+  IconCode,
+} from "@tabler/icons-react";
+import {
+  IconPhoto,
+  IconBook,
+  IconMusic,
+  IconPencil,
+  IconCamera,
+  IconMask,
+  IconArrowRight,
+  IconKey,
+} from "@tabler/icons-react";
 
 const pages = await getCollection("pages");
-const storeData = await getCollection("store");
-const products = await getCollection("products");
+const homePage = pages.find((p) => p.data.slug == "home")?.data;
 
-// Get the first store (should be the 'sell' store)
+// Get store data for dynamic content
+const storeData = await getCollection("store");
 const store = storeData[0]?.data || {};
 const storeName = store.title || "Markkët Space";
-const storeDescription =
-  store.Description || "The hub to launch, grow, and thrive";
-const storeSlug = store.slug || "sell";
-
-console.log("Store data:", JSON.stringify(store, undefined, 2));
+const storeUrls = store.URLS || {};
+const storeUrl =
+  storeUrls.site || "https://de.markket.place/store/next/showcase";
+const storeCover = store.Cover;
 ---
 
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{store.SEO?.metaTitle || storeName}</title>
-    <meta
-      name="description"
-      content={store.SEO?.metaDescription || storeDescription}
-    />
-
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      /* Reset and Base Styles */
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      :root {
-        --primary: #ec4899;
-        --primary-dark: #db2777;
-        --secondary: #6366f1;
-        --text: #111827;
-        --text-muted: #6b7280;
-        --bg: #ffffff;
-        --bg-alt: #f9fafb;
-        --border: #e5e7eb;
-        --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-      }
-
-      body {
-        font-family:
-          "Inter",
-          -apple-system,
-          BlinkMacSystemFont,
-          sans-serif;
-        line-height: 1.6;
-        color: var(--text);
-        background: var(--bg);
-      }
-
-      .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 1rem;
-      }
-
-      /* Header */
-      header {
-        background: var(--bg);
-        border-bottom: 1px solid var(--border);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-        backdrop-filter: blur(10px);
-      }
-
-      nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 0;
-      }
-
-      .logo {
-        font-size: 1.5rem;
-        font-weight: 800;
-        color: var(--primary);
-        text-decoration: none;
-      }
-
-      .nav-button {
-        background: var(--primary);
-        color: white;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 0.5rem;
-        font-weight: 600;
-        text-decoration: none;
-        transition: background 0.2s;
-        cursor: pointer;
-      }
-
-      .nav-button:hover {
-        background: var(--primary-dark);
-      }
-
-      /* Hero Section */
-      .hero {
-        padding: 4rem 0 6rem;
-        text-align: center;
-        background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
-      }
-
-      .hero h1 {
-        font-size: 3.5rem;
-        font-weight: 800;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, var(--primary), var(--secondary));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-      }
-
-      .hero-subtitle {
-        font-size: 1.25rem;
-        color: var(--text-muted);
-        margin-bottom: 2rem;
-        max-width: 600px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .cta-primary {
-        background: var(--primary);
-        color: white;
-        padding: 1rem 2rem;
-        border-radius: 0.75rem;
-        font-size: 1.125rem;
-        font-weight: 600;
-        text-decoration: none;
-        display: inline-block;
-        transition: all 0.2s;
-        box-shadow: var(--shadow);
-      }
-
-      .cta-primary:hover {
-        background: var(--primary-dark);
-        transform: translateY(-2px);
-        box-shadow: var(--shadow-lg);
-      }
-
-      /* Features Section */
-      .features {
-        padding: 4rem 0;
-        background: var(--bg);
-      }
-
-      .features h2 {
-        text-align: center;
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 3rem;
-      }
-
-      .features-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 2rem;
-      }
-
-      .feature-card {
-        background: var(--bg-alt);
-        padding: 2rem;
-        border-radius: 1rem;
-        text-align: center;
-        border: 1px solid var(--border);
-        transition: transform 0.2s;
-      }
-
-      .feature-card:hover {
-        transform: translateY(-4px);
-      }
-
-      .feature-icon {
-        font-size: 3rem;
-        margin-bottom: 1rem;
-      }
-
-      .feature-card h3 {
-        font-size: 1.5rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-      }
-
-      .feature-card p {
-        color: var(--text-muted);
-      }
-
-      /* Store Info Section */
-      .store-info {
-        padding: 4rem 0;
-        background: var(--bg-alt);
-      }
-
-      .store-content {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 3rem;
-        align-items: center;
-      }
-
-      .store-details h2 {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-      }
-
-      .store-details p {
-        font-size: 1.125rem;
-        color: var(--text-muted);
-        margin-bottom: 2rem;
-      }
-
-      .store-image {
-        text-align: center;
-      }
-
-      .store-image img {
-        width: 100%;
-        max-width: 400px;
-        height: 300px;
-        object-fit: cover;
-        border-radius: 1rem;
-        box-shadow: var(--shadow-lg);
-      }
-
-      /* CTA Section */
-      .cta-section {
-        padding: 4rem 0;
-        background: var(--primary);
-        color: white;
-        text-align: center;
-      }
-
-      .cta-section h2 {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-      }
-
-      .cta-section p {
-        font-size: 1.25rem;
-        margin-bottom: 2rem;
-        opacity: 0.9;
-      }
-
-      .cta-secondary {
-        background: white;
-        color: var(--primary);
-        padding: 1rem 2rem;
-        border-radius: 0.75rem;
-        font-size: 1.125rem;
-        font-weight: 600;
-        text-decoration: none;
-        display: inline-block;
-        transition: all 0.2s;
-      }
-
-      .cta-secondary:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--shadow-lg);
-      }
-
-      /* Footer */
-      footer {
-        background: var(--text);
-        color: white;
-        padding: 2rem 0;
-        text-align: center;
-      }
-
-      footer p {
-        margin-bottom: 0.5rem;
-        opacity: 0.8;
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
-        .hero h1 {
-          font-size: 2.5rem;
-        }
-
-        .hero-subtitle {
-          font-size: 1.125rem;
-        }
-
-        .store-content {
-          grid-template-columns: 1fr;
-          gap: 2rem;
-        }
-
-        .features h2,
-        .store-details h2,
-        .cta-section h2 {
-          font-size: 2rem;
-        }
-
-        nav {
-          flex-direction: column;
-          gap: 1rem;
-        }
-      }
-    </style>
-  </head>
-
-  <body>
-    <!-- Header -->
-    <header>
-      <div class="container">
-        <nav>
-          <a href="/" class="logo">🛒 {storeName}</a>
-          <a
-            href="https://de.markket.place/auth/magic"
-            class="nav-button"
-            target="_blank"
-          >
-            Start Selling
-          </a>
-        </nav>
-      </div>
-    </header>
-
-    <!-- Hero Section -->
-    <section class="hero">
-      <div class="container">
-        <h1>{storeName}</h1>
-        <p class="hero-subtitle">{storeDescription}</p>
-        <a
-          href="https://github.com/calimania/markket-space"
-          class="cta-primary"
-          target="_blank"
-        >
-          🚀 Create Your Store
-        </a>
+<LandingLayout
+  title={homePage?.SEO?.metaTitle || store.SEO?.metaTitle}
+  description={homePage?.SEO?.metaDescription || store.SEO?.metaDescription}
+  image={homePage?.SEO?.socialImage?.formats?.large?.url ||
+    homePage?.SEO?.socialImage?.url ||
+    storeCover?.url}
+  heroCtaText="Browse Templates"
+  heroCtaUrl={storeUrl}
+  heroTitle={homePage?.Title}
+>
+  <!-- Features Section -->
+  <section class="features-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>Built for creators, by creators</h2>
+        <p>
+          Everything you need to turn your art into income, built with love by a
+          friendly community
+        </p>
       </div>
-    </section>
-
-    <!-- Features Section -->
-    <section class="features">
-      <div class="container">
-        <h2>Why Choose Our Platform?</h2>
-        <div class="features-grid">
-          <div class="feature-card">
-            <div class="featsure-icon"></div>
-            <h3>Reliable</h3>
-            <p>
-              Built with Astro for optimal performance and lightning-fast
-              loading times
-            </p>
+      <div class="features-grid">
+        <div class="feature-card featured">
+          <div class="feature-icon">
+            <IconPalette size={32} client:load />
           </div>
-          <div class="feature-card">
-            <div class="feature-icon"></div>
-            <h3>Human Assisted Design</h3>
-            <p>
-              Modern, responsive designs that look great on any device and
-              attract customers.
-            </p>
+          <h3>Dynamic Design</h3>
+          <p>Growing set of templates designed specifically for creators</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <IconCoin size={32} client:load />
           </div>
-          <div class="feature-card">
-            <div class="feature-icon"></div>
-            <h3>Easy to Customize</h3>
-            <p>
-              Simple template system that anyone can use to create their perfect
-              storefront.
-            </p>
+          <h3>Free to Start</h3>
+          <p>
+            No upfront costs, no mandatory monthly fees, reasonable commisions
+          </p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <IconUsers size={32} client:load />
           </div>
+          <h3>Early Community</h3>
+          <p>Friendly developers and creators shaping our future</p>
         </div>
-      </div>
-    </section>
-
-    <!-- Store Info Section -->
-    <section class="store-info">
-      <div class="container">
-        <div class="store-content">
-          <div class="store-details">
-            <h2>About {storeName}</h2>
-            <p>{storeDescription}</p>
-            <p>
-              Join our community of creators, shopkeepers, and dreamers who are
-              building amazing online experiences with our simple e-commerce
-              solutions.
-            </p>
-            <a
-              href="https://de.markket.place/store/{storeSlug}"
-              class="cta-primary"
-              target="_blank"
-            >
-              Visit Store
-            </a>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <IconKey size={32} client:load />
           </div>
-          <div class="store-image">
-            {
-              store.Cover && (
-                <img
-                  src={
-                    (store.Cover as any).formats?.medium?.url || store.Cover.url
-                  }
-                  alt={store.Cover.alternativeText || "Store cover image"}
-                />
-              )
-            }
+          <h3>Magic Link Login</h3>
+          <p>Easy login with magic links - safe and convenient</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <IconDeviceMobile size={32} client:load />
           </div>
+          <h3>Mobile Capable</h3>
+          <p>Seller dashboard in mobile web and upcoming ios app</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <IconCode size={32} client:load />
+          </div>
+          <h3>Basic HTML</h3>
+          <p>
+            Easy to customize and deploy blogs, pages, products and collections
+          </p>
         </div>
       </div>
-    </section>
-
-    <!-- CTA Section -->
-    <section class="cta-section">
-      <div class="container">
-        <h2>Ready to Start Selling?</h2>
-        <p>
-          Join thousands of creators who have already launched their stores with
-          our platform.
-        </p>
-        <a
-          href="https://github.com/calimania/markket-space"
-          class="cta-secondary"
-          target="_blank"
-        >
-          Get Started for Free
-        </a>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <footer>
-      <div class="container">
-        <p>
-          &copy; 2025 {storeName}. Built with ❤️ using Astro, Strapi, and
-          Cafecito.
-        </p>
-        <p>Powered by Markkët Space 🤖</p>
+    </div>
+  </section>
+
+  <!-- Social Proof Section -->
+  <section class="social-proof-section">
+    <div class="container">
+      <div class="social-proof-content">
+        <h3>Perfect for all types of creators</h3>
+        <div class="creator-types">
+          <div class="creator-type">
+            <div class="creator-icon">
+              <IconPhoto size={24} client:load />
+            </div>
+            <span>Digital Artists</span>
+          </div>
+          <div class="creator-type">
+            <div class="creator-icon">
+              <IconBook size={24} client:load />
+            </div>
+            <span>Course Creators</span>
+          </div>
+          <div class="creator-type">
+            <div class="creator-icon">
+              <IconMusic size={24} client:load />
+            </div>
+            <span>Musicians</span>
+          </div>
+          <div class="creator-type">
+            <div class="creator-icon">
+              <IconPencil size={24} client:load />
+            </div>
+            <span>Writers</span>
+          </div>
+          <div class="creator-type">
+            <div class="creator-icon">
+              <IconCamera size={24} client:load />
+            </div>
+            <span>Photographers</span>
+          </div>
+          <div class="creator-type">
+            <div class="creator-icon">
+              <IconMask size={24} client:load />
+            </div>
+            <span>Performers</span>
+          </div>
+        </div>
+        <div class="social-proof-cta">
+          <p>Ready to be an early user?</p>
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="cta-primary"
+            target="_blank"
+          >
+            Start Your Store Free <IconArrowRight size={20} client:load />
+          </a>
+          {
+            storeUrl &&
+              storeUrl !== "https://de.markket.place/store/next/showcase" && (
+                <a
+                  href={storeUrl}
+                  class="cta-secondary"
+                  target="_blank"
+                  style="margin-left: 1rem;"
+                >
+                  Visit {storeName} <IconArrowRight size={20} client:load />
+                </a>
+              )
+          }
+        </div>
       </div>
-    </footer>
-  </body>
-</html>
+    </div>
+  </section>
+
+  <!-- Page Content from Strapi -->
+  {
+    homePage?.Content && homePage.Content.length > 0 && (
+      <section class="page-content-section">
+        <div class="container">
+          <BlocksContent content={homePage.Content} className="page-content" />
+        </div>
+      </section>
+    )
+  }
+</LandingLayout>
+
+<style>
+  /* Features Section */
+  .features-section {
+    padding: 6rem 0;
+    background: var(--bg-alt);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .features-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -20%;
+    width: 40%;
+    height: 100%;
+    background: radial-gradient(
+      circle,
+      rgba(255, 107, 157, 0.05) 0%,
+      transparent 70%
+    );
+    pointer-events: none;
+  }
+
+  .section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  .section-header h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    margin-bottom: 1rem;
+    background: var(--bg-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .section-header p {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+
+  .features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+  }
+
+  .feature-card {
+    background: var(--bg);
+    padding: 2.5rem;
+    border-radius: var(--radius-lg);
+    text-align: center;
+    border: 1px solid var(--border-light);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--shadow);
+  }
+
+  .feature-card.featured {
+    background: var(--bg-gradient);
+    color: var(--text-light);
+    transform: scale(1.05);
+  }
+
+  .feature-card.featured .feature-icon {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .feature-card.featured h3 {
+    color: var(--text-light);
+  }
+
+  .feature-card.featured p {
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .feature-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--bg-gradient);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+  }
+
+  .feature-card:not(.featured):hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .feature-card:not(.featured):hover::before {
+    transform: scaleX(1);
+  }
+
+  .feature-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border-radius: 50%;
+    margin: 0 auto 1.5rem;
+    color: white;
+    transition: all 0.3s ease;
+  }
+
+  .feature-card:hover .feature-icon {
+    transform: scale(1.1);
+    box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
+  }
+
+  .feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: var(--text);
+  }
+
+  .feature-card p {
+    color: var(--text-muted);
+    line-height: 1.6;
+    font-size: 1rem;
+  }
+
+  /* Social Proof Section */
+  .social-proof-section {
+    padding: 5rem 0;
+    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .social-proof-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -20%;
+    width: 40%;
+    height: 100%;
+    background: radial-gradient(
+      circle,
+      rgba(79, 70, 229, 0.05) 0%,
+      transparent 70%
+    );
+    pointer-events: none;
+  }
+
+  .social-proof-content {
+    text-align: center;
+  }
+
+  .social-proof-content h3 {
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    font-weight: 700;
+    margin-bottom: 3rem;
+    color: var(--text);
+  }
+
+  .creator-types {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  .creator-type {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.5rem;
+    background: var(--bg-alt);
+    border-radius: var(--radius);
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-light);
+  }
+
+  .creator-type:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    background: white;
+  }
+
+  .creator-type .creator-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    background: var(--bg-gradient);
+    border-radius: 50%;
+    margin-bottom: 1rem;
+    color: white;
+  }
+
+  .creator-type span {
+    font-weight: 500;
+    color: var(--text);
+    font-size: 0.95rem;
+  }
+
+  .social-proof-cta {
+    margin-top: 3rem;
+  }
+
+  .social-proof-cta p {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+  }
+
+  .social-proof-cta .cta-primary,
+  .social-proof-cta .cta-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 5rem 0;
+    background: linear-gradient(135deg, var(--bg-alt), var(--bg));
+    position: relative;
+  }
+
+  .page-content-section .container {
+    max-width: 900px;
+  }
+
+  :global(.page-content) {
+    background: var(--bg);
+    padding: 3rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-light);
+    color: var(--text);
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content p) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content a) {
+    color: var(--primary) !important;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .features-section {
+      padding: 4rem 0;
+    }
+
+    .features-grid {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+
+    .feature-card {
+      padding: 2rem 1.5rem;
+    }
+
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+    }
+
+    .creator-types {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+
+    .creator-type {
+      padding: 1rem;
+    }
+
+    .creator-type .creator-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    :global(.page-content) {
+      padding: 2rem;
+    }
+
+    .social-proof-cta .cta-primary,
+    .social-proof-cta .cta-secondary {
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .creator-types {
+      grid-template-columns: 1fr;
+    }
+
+    .social-proof-section {
+      padding: 3rem 0;
+    }
+  }
+</style>
diff --git a/src/styles/base.css b/src/styles/base.css
index c952510..34b75e1 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -8,16 +8,37 @@
       }
 
       :root {
-        --primary: #ec4899;
-        --primary-dark: #db2777;
-        --secondary: #6366f1;
-        --text: #111827;
-        --text-muted: #6b7280;
+        /* Brand Colors - Vibrant and artistic */
+          --primary: #E4007C;
+          --primary-dark: #e400d7;
+          --primary-light: #ffb3d1;
+          --secondary: #4f46e5;
+          --secondary-dark: #3730a3;
+          --accent: #06d6a0;
+          --accent-dark: #048a61;
+        
+          /* Text Colors - High contrast for readability */
+          --text: #1a1a1a;
+          --text-light: #ffffff;
+          --text-muted: #64748b;
+          --text-on-primary: #ffffff;
+        
+          /* Background Colors */
         --bg: #ffffff;
-        --bg-alt: #f9fafb;
-        --border: #e5e7eb;
+        --bg-alt: #f8fafc;
+          --bg-dark: #0f172a;
+          --bg-gradient: linear-gradient(135deg, #ff6b9d 0%, #4f46e5 100%);
+        
+          /* UI Elements */
+          --border: #e2e8f0;
+          --border-light: #f1f5f9;
         --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+          --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        
+          /* Radius */
+          --radius: 0.75rem;
+          --radius-lg: 1rem;
       }
 
       body {