feat: add Astro landing page home UI

.gitignore

@@ -6,7 +6,7 @@
 
 # Dependencies
 node_modules
-
+.pnpm-store
 # Production
 build
 

astro.config.mjs

@@ -8,9 +8,16 @@ import starlightLinksValidator from "starlight-links-validator";
 // https://astro.build/config
 export default defineConfig({
     outDir: "./build",
+    publicDir: "./static",
     site: "https://fsd.how",
+    vite: {
+        resolve: {
+            alias: {
+                "@": new URL("./src", import.meta.url).pathname,
+            },
+        },
+    },
     redirects: {
-        "/": "/docs/get-started/overview",
         "/ru": "/ru/docs/get-started/overview",
         "/uz": "/uz/docs/get-started/overview",
         "/kr": "/kr/docs/get-started/overview",
@@ -29,7 +36,7 @@ export default defineConfig({
             defaultLocale: "root",
             customCss: ["./src/styles/custom.css"],
             components: {
-                ThemeProvider: "./src/components/ThemeProvider.astro",
+                ThemeProvider: "./src/shared/ui/ThemeProvider.astro",
             },
             head: [
                 {

src/content/docs/docs/branding.mdx

@@ -4,7 +4,7 @@ title: Branding Guidelines
 
 import { Aside } from '@astrojs/starlight/components';
 
-import StaticImageDownload from '../../../components/StaticImageDownload.astro';
+import StaticImageDownload from '@/shared/ui/static-image/StaticImageDownload.astro';
 
 FSD's visual identity is based on its core-concepts: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`.
 But also we tend to design simple, pretty identity, which should convey the FSD philisophy and be easy to recognize.

src/content/docs/docs/get-started/overview.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, LinkCard, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 **Feature-Sliced Design** (FSD) is an architectural methodology for scaffolding front-end applications. Simply put, it's a compilation of rules and conventions on organizing code. The main purpose of this methodology is to make the project more understandable and stable in the face of ever-changing business requirements.
 

src/content/docs/docs/llms.mdx

@@ -16,3 +16,15 @@ This page provides links and guidance for LLM crawlers.
 
 - Files are served from the site root, regardless of the current page path.
 - In deployments with a non-root base URL (e.g., `/documentation/`), the links above are automatically prefixed.
+
+### AI Skills
+
+[Skills](https://vercel.com/docs/agent-resources/skills) are reusable instruction packages for AI coding agents. Unlike the static llms.txt files above, a Skill can be installed in your project and used when relevant.
+
+- [Feature-Sliced Design Skill](https://skills.sh/feature-sliced/skills/feature-sliced-design) — A community-maintained Skill based on the official FSD documentation, available for agents that support the Skills standard.
+
+```bash
+npx skills add https://github.com/feature-sliced/skills --skill feature-sliced-design
+```
+
+These resources can help AI systems apply FSD concepts more effectively, but final architectural and design decisions should still be made by your team in the context of your project.

src/content/docs/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Layers are the first level of organisational hierarchy in Feature-Sliced Design. Their purpose is to separate code based on how much responsibility it needs and how many other modules in the app it depends on. Every layer carries special semantic meaning to help you determine how much responsibility you should allocate to your code.
 

src/content/docs/docs/reference/public-api.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 A public API is a _contract_ between a group of modules, like a slice, and the code that uses it. It also acts as a gate, only allowing access to certain objects, and only through that public API.
 

src/content/docs/docs/reference/slices-segments.mdx

@@ -4,7 +4,7 @@ sidebar:
   order: 2
 ---
 
-import StaticImage from '../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 ## Slices
 

src/content/docs/index.mdx

@@ -2,11 +2,16 @@
 title: Feature-Sliced Design
 template: splash
 hero:
-  tagline:
-    Architectural methodology for frontend projects
-  actions:
-    - text: Get started
-      link: /docs/get-started/overview
-      icon: right-arrow
-      variant: primary
+  tagline: ""
 ---
+
+import HeroBanner from "../../pages/_pages/ui/HeroBanner.astro";
+import Products from "../../pages/_pages/ui/Products.astro";
+import PopularGuides from "../../pages/_pages/ui/PopularGuides.astro";
+import "../../pages/_pages/ui/index.css";
+
+<div class="HomePage__container">
+  <HeroBanner />
+  <Products />
+  <PopularGuides />
+</div>

src/content/docs/ja/docs/branding.mdx

@@ -4,7 +4,7 @@ title: ブランドガイドライン
 
 import { Aside } from '@astrojs/starlight/components';
 
-import StaticImageDownload from '../../../../components/StaticImageDownload.astro';
+import StaticImageDownload from '@/shared/ui/static-image/StaticImageDownload.astro';
 
 FSDのビジュアルアイデンティティは、そのコアコンセプトである `Layered`、`Sliced self-contained parts`、`Parts & Compose`、`Segmented` に基づいています。しかし、私たちはFSDの哲学を反映し、簡単に認識できる美しいアイデンティティを目指しています。
 

src/content/docs/ja/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 レイヤーは、Feature-Sliced Designにおける組織階層の最初のレベルです。その目的は、コードを責任の程度やアプリ内の他のモジュールへの依存度に基づいて分離することです。各レイヤーは、コードにどれだけの責任を割り当てるべきかを判断するための特別な意味を持っています。
 

src/content/docs/ja/docs/reference/public-api.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 公開APIは、モジュールのグループ（スライスなど）とそれを使用するコードとの間の**契約**です。また、特定のオブジェクトへのアクセスを制限し、その公開APIを通じてのみアクセスを許可します。
 

src/content/docs/ja/docs/reference/slices-segments.mdx

@@ -4,7 +4,7 @@ sidebar:
   order: 2
 ---
 
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 ## スライス
 

src/content/docs/kr/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Layer는 Feature-Sliced Design에서 코드를 나눌 때 사용하는 **가장 큰 구분 단위**입니다.
 코드를 나눌 때는 각 부분이 **어떤 역할을 맡는지**, 그리고 **다른 코드에 얼마나 의존하는지**를 기준으로 합니다.

src/content/docs/kr/docs/reference/public-api.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Public API는 **Slice 기능을 외부에서 사용할 수 있는 공식 경로**입니다.
 외부 코드는 반드시 이 경로를 통해서만 Slice 내부의 특정 객체에 접근할 수 있습니다.

src/content/docs/kr/docs/reference/slices-segments.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
 
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 ## Slice
 

src/content/docs/ru/docs/branding.mdx

@@ -4,7 +4,7 @@ title: Рекомендации по брендингу
 
 import { Aside } from '@astrojs/starlight/components';
 
-import StaticImageDownload from '../../../../components/StaticImageDownload.astro';
+import StaticImageDownload from '@/shared/ui/static-image/StaticImageDownload.astro';
 
 # Рекомендации по брендингу
 

src/content/docs/ru/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Слои - это первый уровень организационной иерархии в Feature-Sliced Design. Их цель - разделить код на основе того, сколько ответственности ему требуется и от скольких других модулей в приложении он зависит. Каждый слой несет особое семантическое значение, чтобы помочь вам определить, сколько ответственности следует выделить вашему коду.
 

src/content/docs/ru/docs/reference/public-api.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Публичный API — это _контракт_ между группой модулей, например, слайсом, и кодом, который его использует. Он также действует как ворота, разрешая доступ только к определенным объектам и только через этот публичный API.
 

src/content/docs/ru/docs/reference/slices-segments.mdx

@@ -6,7 +6,7 @@ sidebar:
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
 
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 ## Слайсы
 

src/content/docs/uz/docs/branding.mdx

@@ -4,7 +4,7 @@ title: Brending bo'yicha tavsiyalar
 
 import { Aside } from '@astrojs/starlight/components';
 
-import StaticImageDownload from '../../../../components/StaticImageDownload.astro';
+import StaticImageDownload from '@/shared/ui/static-image/StaticImageDownload.astro';
 
 FSD ning vizual identifikatsiyasi uning asosiy tushunchalariga asoslanadi: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`.
 

src/content/docs/uz/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Qatlamlar - Xususiyatlar bilan kesilgan dizayndagi tashkiliy ierarxiyaning birinchi darajasi. Ularning maqsadi kodni qanchalik mas'uliyatga muhtojligi va dasturda qancha boshqa modullarga bog'liqligi asosida ajratishdir.
 <Aside>

src/content/docs/vi/docs/branding.mdx

@@ -4,7 +4,7 @@ title: Hướng dẫn Thương hiệu
 
 import { Aside } from '@astrojs/starlight/components';
 
-import StaticImageDownload from '../../../../components/StaticImageDownload.astro';
+import StaticImageDownload from '@/shared/ui/static-image/StaticImageDownload.astro';
 
 Bản sắc thị giác của FSD dựa trên các khái niệm cốt lõi: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`.
 Nhưng chúng tôi cũng có xu hướng thiết kế bản sắc đơn giản, đẹp mắt, thể hiện triết lý FSD và dễ nhận biết.

src/content/docs/vi/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Layer là cấp độ đầu tiên của hệ thống phân cấp tổ chức trong Feature-Sliced Design. Mục đích của chúng là phân tách code dựa trên mức độ trách nhiệm cần thiết và số lượng module khác trong app mà nó phụ thuộc vào. Mỗi layer mang ý nghĩa ngữ nghĩa đặc biệt để giúp bạn xác định mức độ trách nhiệm mà bạn nên phân bổ cho code của mình.
 

src/content/docs/vi/docs/reference/public-api.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Public API là một _hợp đồng_ giữa một nhóm module, như một slice, và code sử dụng nó. Nó cũng hoạt động như một cổng kiểm soát, chỉ cho phép truy cập đến các đối tượng nhất định và chỉ thông qua public API đó.
 

src/content/docs/vi/docs/reference/slices-segments.mdx

@@ -4,7 +4,7 @@ sidebar:
   order: 2
 ---
 
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 ## Slice
 

src/content/docs/zh/docs/branding.mdx

@@ -4,7 +4,7 @@ title: 品牌指南
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
 
-import StaticImageDownload from '../../../../components/StaticImageDownload.astro';
+import StaticImageDownload from '@/shared/ui/static-image/StaticImageDownload.astro';
 
 FSD 的视觉身份基于其核心概念：`分层`、`切片式自包含部分`、`部分和组合`、`分段`。
 但我们也倾向于设计简单、美丽的身份，它应该传达 FSD 的哲学并易于识别。

src/content/docs/zh/docs/reference/layers.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 层是 Feature-Sliced Design 中组织层次结构的第一级。它们的目的是根据代码需要的责任程度以及它依赖应用程序中其他模块的程度来分离代码。每一层都承载着特殊的语义意义，帮助您确定应该为您的代码分配多少责任。
 

src/content/docs/zh/docs/reference/public-api.mdx

@@ -5,7 +5,7 @@ sidebar:
 ---
 
 import { FileTree, Aside } from '@astrojs/starlight/components';
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 Public API 是一组模块（如 slice）与使用它的代码之间的_契约_。它也充当网关，只允许访问某些对象，并且只能通过该 public API 访问。
 

src/content/docs/zh/docs/reference/slices-segments.mdx

@@ -4,7 +4,7 @@ sidebar:
   order: 2
 ---
 
-import StaticImage from '../../../../../components/StaticImage.astro';
+import StaticImage from '@/shared/ui/static-image/StaticImage.astro';
 
 ## Slices