feat: add Astro landing page home UI (#905)

* feat: add Astro landing page home UI

* docs: add AI Skills content to the LLMs documentation

* fix: modify the static-image folder path

* fix: astro.config build error

* chore: pnpm-lock update

* fix: branding static-image path issue

* fix: lint issue

* refactor: rename _home to _pages for FSD consistency, use PascalCase for Astro components

- Rename src/pages/_home → src/pages/_pages for FSD layer naming consistency
- Rename Astro component files from kebab-case to PascalCase (hero-banner.astro → HeroBanner.astro, etc.)

Made-with: Cursor

* fix: move ThemeProvider out of static-image, rename static-image components to PascalCase

- Move ThemeProvider.astro from static-image/ to shared/ui/ (was placed there accidentally)
- Rename static-image.astro → StaticImage.astro
- Rename static-image-download.astro → StaticImageDownload.astro

Made-with: Cursor

* chore: update config and content paths after refactoring

- Update astro.config.mjs and tsconfig.astro.json for _pages path
- Update import paths in content docs (branding, layers, public-api, slices-segments across all locales)

Made-with: Cursor

* fix: astro.config lint error

* fix: use relative imports in docs index to avoid alias resolution error

* fix: replace forced line break with responsive wrapping in HeroBanner

* fix: make HeroBanner summary wrap naturally

* fix: HeroBanner lint issue

* fix: use relative imports for static image components in docs

Author: Gaic4o

.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: [
                 {

pnpm-lock.yaml

@@ -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/branding.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/get-started/overview.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/llms.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/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';
 
 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/public-api.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/docs/reference/slices-segments.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>