feat(docs): enhance documentation site with internationalization and layout updates

- Updated the demo API to support locale-based content rendering.
- Refactored the main layout to accommodate language-specific metadata and routing.
- Introduced new components for blog and documentation pages, ensuring proper language handling.
- Added styles for improved UI consistency across different sections.
- Removed deprecated layout files and streamlined the structure for better maintainability.

apps/docs/components/hero/DesktopDemo.module.css

@@ -1,17 +1,36 @@
 .stage {
+  position: relative;
   width: 100%;
   max-width: 960px;
   margin: 64px auto 0;
 }
 
+.halo {
+  position: absolute;
+  inset: -10% -14%;
+  background: radial-gradient(
+    50% 55% at 50% 45%,
+    color-mix(in srgb, var(--color-fd-primary) 9%, transparent),
+    transparent 72%
+  );
+  pointer-events: none;
+}
+
 .viewport {
   position: relative;
   width: 100%;
   aspect-ratio: 960 / 620;
   overflow: hidden;
-  background: #141414;
-  border: 1px solid rgb(255 255 255 / 10%);
+  background: #f5f5f5;
+  border: 1px solid var(--color-fd-border);
   border-radius: 14px;
+  box-shadow:
+    0 42px 90px -34px rgb(0 0 0 / 35%),
+    0 12px 32px -16px rgb(0 0 0 / 28%);
+}
+
+.viewport[data-dark] {
+  background: #141414;
   box-shadow:
     0 42px 90px -34px rgb(0 0 0 / 50%),
     0 12px 32px -16px rgb(0 0 0 / 42%);
@@ -23,15 +42,18 @@
   display: block;
   width: 100%;
   height: 100%;
-  background: #141414;
+  background: transparent;
   border: 0;
 }
 
-.stage p {
-  margin: 14px 0 0;
-  color: var(--color-fd-muted-foreground);
-  font-size: 12px;
-  text-align: center;
+.poster {
+  object-fit: cover;
+  transition: opacity 0.6s ease;
+}
+
+.posterHidden {
+  opacity: 0;
+  pointer-events: none;
 }
 
 @media (max-width: 680px) {