feat(docs): update private pricing on website (#4846)

docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md

@@ -5,7 +5,7 @@ description: This article thoroughly examines the advantages of using Kubernetes
 authors: [fanux]
 tags: [Kubernetes, Sealos, Database]
 keywords: [Cloud Operating System, Sealos, K8s, Cloud Native, Cloud Computing, Cloud OS, PaaS, Database, Container]
-image: images/feature.jpg
+image: ./images/feature.jpg
 date: 2023-12-06T10:00
 ---
 

docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md

@@ -5,7 +5,7 @@ description: Discover how Meilisearch, the lightning-fast open-source search eng
 authors: [Carson Yang]
 tags: [Developer Tools, Sealos, Meilisearch, Flarum]
 keywords: [Meilisearch, search engine, fast search, open-source, Flarum, Meilisearch vs Elasticsearch, search engine comparison]
-image: images/feature.jpg
+image: ./images/feature.jpg
 date: 2024-07-01T10:00
 ---
 

docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md

@@ -5,7 +5,7 @@ description: 本文深入分析了 K8s 在数据库管理上的优势，包括
 authors: [fanux]
 tags: [Kubernetes, Sealos, 数据库]
 keywords: [云操作系统, Sealos, K8s, 云原生, 数据库, 容器,]
-image: images/feature.jpg
+image: ./images/feature.jpg
 date: 2023-12-06T10:00
 ---
 

docs/website/src/constants/platform.ts

@@ -1 +1,36 @@
 export const PC_MIN_WIDTH = 1000;
+
+export const cpuPriceMonth = 6;
+
+export const memoryPriceMonth = 3;
+
+export const CpuSlideMarkList = [
+  { label: 8, value: 8 },
+  { label: 256, value: 256 },
+  { label: 512, value: 512 },
+  { label: 1024, value: 1024 },
+  { label: 2048, value: 2048 }
+];
+
+export const MemorySlideMarkList = [
+  { label: 16, value: 16 },
+  { label: 512, value: 512 },
+  { label: 1024, value: 1024 },
+  { label: 2048, value: 2048 },
+  { label: 4096, value: 4096 }
+];
+
+export const MonthMapList = [
+  // unit month
+  { label: '3个月', value: '3' },
+  { label: '6个月', value: '6' },
+  { label: '1年', value: '12' },
+  { label: '2年', value: '24' },
+  { label: '3年', value: '36' }
+];
+
+export const freeValues = {
+  cpu: 8,
+  memory: 16,
+  months: '3'
+};

docs/website/src/pages/self-hosting/index.scss

@@ -115,3 +115,81 @@
     list-style-type: none;
   }
 }
+
+.input-slider {
+  --c: white; /* active color */
+  --g: 0px; /* the gap */
+  --l: 5px; /* line thickness*/
+  --s: 14px; /* thumb size*/
+
+  width: 100%;
+  height: var(--s); /* needed for Firefox*/
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+
+  &:focus-visible,
+  &:hover {
+    --p: 25%;
+  }
+  &:active,
+  &:focus-visible {
+    --_b: var(--s);
+  }
+
+  /* chromium */
+  &[type='range' i]::-webkit-slider-thumb {
+    height: var(--s);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    box-shadow: 0 0 0 var(--s) inset var(--c);
+    border-image: linear-gradient(90deg, var(--c) 50%, #f4f4f71a 0) 0 1 / calc(50% - var(--l) / 2)
+      100vw/0 calc(100vw + var(--g));
+    -webkit-appearance: none;
+    appearance: none;
+    transition: 0.3s;
+  }
+  /* Firefox */
+  &[type='range']::-moz-range-thumb {
+    height: var(--s);
+    width: var(--s);
+    background: none;
+    border-radius: 50%;
+    box-shadow: 0 0 0 var(--s) inset var(--c);
+    border-image: linear-gradient(90deg, var(--c) 50%, #f4f4f71a 0) 0 1 / calc(50% - var(--l) / 2)
+      100vw/0 calc(100vw + var(--g));
+    -moz-appearance: none;
+    appearance: none;
+    transition: 0.3s;
+  }
+}
+
+.input-number {
+  width: 145px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid rgba(232, 235, 240, 0.1);
+  background: rgba(247, 248, 250, 0.1);
+  color: white;
+  font-size: 12px;
+  font-weight: 400;
+  &:focus {
+    outline: none;
+  }
+  padding-left: 12px;
+}
+
+.custom-border-left {
+  border-left: 1px solid rgba(232, 235, 240, 0.05);
+  border-top: 1px solid rgba(232, 235, 240, 0.05);
+}
+
+.input-select {
+  padding-left: 12px;
+  padding-right: 12px;
+  appearance: none;
+}