diff --git a/fern/docs/pages/welcome.mdx b/fern/docs/pages/welcome.mdx index 8e965b2..e993156 100644 --- a/fern/docs/pages/welcome.mdx +++ b/fern/docs/pages/welcome.mdx @@ -1,91 +1,48 @@ --- -title: Welcome to Fern! -subtitle: Everything you need to build the best developer experience +title: Welcome to Plant Store +subtitle: The complete platform for managing your plant inventory +layout: overview slug: welcome --- -This repository is a starter template for building documentation with [Fern](https://buildwithfern.com). It includes a sample Plant Store API to demonstrate how Fern generates interactive API reference documentation from an OpenAPI specification. - -Use this template to get started quickly, then replace the sample content with your own API and documentation. - -## What's included - -This starter template contains everything you need to publish documentation: - - - - - - - - - - - -## Getting started - - - - -```bash -git clone -cd docs-starter -``` - - - - - -```bash -npm install -g fern-api -``` - - - - - -Start a local development server with hot-reloading: - -```bash -fern docs dev -``` - -Open [http://localhost:3000](http://localhost:3000) to see your docs. - - - - - -Update `fern.config.json` with your organization name and `docs.yml` with your desired URL. The `version` refers to [the Fern CLI](https://buildwithfern.com/learn/cli-api-reference/cli-reference/overview): - -```json title="fern.config.json" -{ - "organization": "your-org-name", - "version": "0.46.15" -} -``` - -```yaml title="docs.yml" -instances: - - url: your-org.docs.buildwithfern.com -``` - - - - - -When you're ready to go live: - -```bash -fern generate --docs -``` - - - - -## Next steps - -Replace the sample Plant Store API with your own OpenAPI specification, update the Markdown pages with your content, and customize the theme to match your brand. For detailed guidance, explore the pages in this documentation or visit the [Fern documentation](https://buildwithfern.com/learn). +
+
+ +Plant Store is a platform for managing and tracking your plant inventory. It provides a RESTful API for browsing plants, managing users, and tracking availability. Plants are defined with a rich schema, queried through the API, and monitored in real time via WebSocket events. + +
+ Quickstart + Explore the API +
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ +## What you can do - Learn how to preview and publish changes using the CLI or Fern Editor + Preview and publish changes using the CLI or Fern Editor + + + Author documentation pages with Markdown and MDX components Brand your documentation with colors, logos, and layouts - - See how Fern generates interactive API documentation - +## Concepts + +- **Plant Store API** — RESTful API defined in `openapi.yaml` for managing plants and users with full CRUD operations +- **WebSocket events** — Real-time plant status updates via `asyncapi.yaml`, supporting subscribe and unsubscribe actions +- **Documentation pages** — Markdown content in `docs/pages/` for guides, tutorials, and reference material +- **Configuration** — Site navigation, theming, and hosting settings defined in `docs.yml` + diff --git a/fern/styles.css b/fern/styles.css index 154c7a8..7bcd9ae 100644 --- a/fern/styles.css +++ b/fern/styles.css @@ -1,10 +1,137 @@ /* Custom styles for Fern Docs Starter */ -/* Subtle linear gradient background */ +/* Gradient background */ .fern-background-image { - background-image: linear-gradient(180deg, rgba(0, 135, 0, 0.03) 0%, transparent 50%); + background-image: linear-gradient(180deg, rgba(0, 135, 0, 0.08) 0%, rgba(0, 135, 0, 0.02) 40%, transparent 70%); } :root.dark .fern-background-image { - background-image: linear-gradient(180deg, rgba(112, 225, 85, 0.03) 0%, transparent 50%); + background-image: linear-gradient(180deg, rgba(112, 225, 85, 0.06) 0%, rgba(112, 225, 85, 0.015) 40%, transparent 70%); +} + +/* Hero section - left/right layout */ +.hero-container { + display: flex; + align-items: center; + gap: 3rem; + margin-bottom: 2rem; +} + +.hero-content { + flex: 1; + min-width: 0; +} + +.hero-content p { + font-size: 1.05rem; + line-height: 1.7; + color: var(--grayscale-a11); + margin-bottom: 1.5rem; +} + +.hero-image-wrapper { + flex: 0 0 auto; + width: 340px; +} + +.hero-image-box { + background: linear-gradient(135deg, #0d9488 0%, #047857 50%, #065f46 100%); + border-radius: 16px; + padding: 2rem; + aspect-ratio: 4 / 3; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 8px 32px rgba(0, 135, 0, 0.12); +} + +:root.dark .hero-image-box { + background: linear-gradient(135deg, #134e4a 0%, #064e3b 50%, #022c22 100%); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +.hero-image-content { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-illustration { + width: 100%; + height: auto; +} + +/* CTA buttons */ +.hero-cta-group { + display: flex; + gap: 0.75rem; + margin-top: 1.5rem; +} + +.cta-primary { + display: inline-flex !important; + align-items: center; + padding: 0.6rem 1.25rem; + background-color: #008700 !important; + border-radius: 8px; + font-weight: 500; + font-size: 0.9rem; + transition: opacity 0.15s ease; +} + +:root.dark .cta-primary { + background-color: #70E155 !important; +} + +.hero-cta-group .cta-primary a, +.hero-cta-group .cta-primary a.fern-mdx-link { + color: white !important; + text-decoration: none !important; +} + +:root.dark .hero-cta-group .cta-primary a, +:root.dark .hero-cta-group .cta-primary a.fern-mdx-link { + color: #111113 !important; +} + +.cta-primary:hover { + opacity: 0.9; +} + +.cta-secondary { + display: inline-flex !important; + align-items: center; + padding: 0.6rem 1.25rem; + background-color: transparent !important; + color: var(--grayscale-a11) !important; + border: 1px solid var(--grayscale-a6) !important; + border-radius: 8px; + font-weight: 500; + font-size: 0.9rem; + text-decoration: none !important; + transition: border-color 0.15s ease; +} + +.cta-secondary a { + color: var(--grayscale-a11) !important; + text-decoration: none !important; +} + +.cta-secondary:hover { + border-color: var(--grayscale-a8); +} + +/* Responsive hero */ +@media (max-width: 768px) { + .hero-container { + flex-direction: column; + gap: 2rem; + } + + .hero-image-wrapper { + width: 100%; + max-width: 340px; + } }