Skip to content

feat: redesign landing page with overview layout, hero section, and card grid #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jon-fern wants to merge 2 commits into from
Closed

feat: redesign landing page with overview layout, hero section, and card grid #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2c7376
feat: redesign landing page with overview layout, hero section, and c…
devin-ai-integration[bot] Mar 6, 2026
0398484
fix: CTA button styling - use span wrappers and specific selectors fo…
devin-ai-integration[bot] Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 56 additions & 92 deletions fern/docs/pages/welcome.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,63 @@
---
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:

<Files>
<File name="docs.yml" comment="Configures navigation, theme, and hosting" />
<File name="fern.config.json" comment="Sets your organization name and CLI version" />
<File name="openapi.yaml" comment="Sample Plant Store API specification" />
<Folder name="docs" defaultOpen>
<Folder name="pages" comment="Markdown content for your documentation" />
<Folder name="assets" comment="Logos, favicon, and other assets" />
</Folder>
</Files>

## Getting started

<Steps>
<Step title="Clone this repository">

```bash
git clone <your-template-repo.git>
cd docs-starter
```

</Step>

<Step title="Install the Fern CLI">

```bash
npm install -g fern-api
```

</Step>

<Step title="Preview locally">

Start a local development server with hot-reloading:

```bash
fern docs dev
```

Open [http://localhost:3000](http://localhost:3000) to see your docs.

</Step>

<Step title="Make it yours">

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
```

</Step>

<Step title="Publish">

When you're ready to go live:

```bash
fern generate --docs
```

</Step>
</Steps>

## 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).
<div className="hero-container">
<div className="hero-content">

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.

<div className="hero-cta-group">
<span className="cta-primary"><a href="/editing-your-docs">Quickstart</a></span>
<span className="cta-secondary"><a href="/api-reference">Explore the API</a></span>
</div>

</div>
<div className="hero-image-wrapper">
<div className="hero-image-box">
<div className="hero-image-content">
<svg viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg" className="hero-illustration">
<rect x="30" y="90" width="40" height="50" rx="4" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
<rect x="80" y="70" width="40" height="70" rx="4" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
<rect x="130" y="80" width="40" height="60" rx="4" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
<path d="M50 90 C50 70, 50 50, 45 35 M50 90 C50 75, 55 55, 60 40 M50 90 C50 78, 43 60, 38 45" stroke="#4ade80" strokeWidth="2" fill="none" strokeLinecap="round"/>
<circle cx="45" cy="32" r="5" fill="#4ade80" opacity="0.8"/>
<circle cx="60" cy="37" r="4" fill="#22c55e" opacity="0.8"/>
<circle cx="38" cy="42" r="4" fill="#86efac" opacity="0.8"/>
<path d="M100 70 C100 50, 100 35, 95 20 M100 70 C100 55, 105 40, 110 25 M100 70 C100 58, 93 42, 88 30" stroke="#4ade80" strokeWidth="2" fill="none" strokeLinecap="round"/>
<circle cx="95" cy="17" r="6" fill="#22c55e" opacity="0.8"/>
<circle cx="110" cy="22" r="5" fill="#4ade80" opacity="0.8"/>
<circle cx="88" cy="27" r="4" fill="#86efac" opacity="0.8"/>
<path d="M150 80 C150 65, 150 50, 145 38 M150 80 C150 68, 155 55, 158 42" stroke="#4ade80" strokeWidth="2" fill="none" strokeLinecap="round"/>
<circle cx="145" cy="35" r="5" fill="#4ade80" opacity="0.8"/>
<circle cx="158" cy="39" r="4" fill="#22c55e" opacity="0.8"/>
<circle cx="170" cy="60" r="10" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.3)" strokeWidth="1.5"/>
<path d="M167 60 L170 57 L173 60 M170 57 L170 64" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
</div>
</div>
</div>

## What you can do

<CardGroup cols={2}>
<Card
title="Edit your docs"
icon="duotone pen-to-square"
href="/editing-your-docs"
>
Learn how to preview and publish changes using the CLI or Fern Editor
Preview and publish changes using the CLI or Fern Editor
</Card>
<Card
title="Write content"
icon="duotone file-lines"
href="/writing-content"
>
Author documentation pages with Markdown and MDX components
</Card>
<Card
title="Set up navigation"
Expand All @@ -109,12 +73,12 @@ Replace the sample Plant Store API with your own OpenAPI specification, update t
>
Brand your documentation with colors, logos, and layouts
</Card>
<Card
title="API reference"
icon="duotone code"
href="/api-reference"
>
See how Fern generates interactive API documentation
</Card>
</CardGroup>

## 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`

133 changes: 130 additions & 3 deletions fern/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}