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

[jon-fern]

Summary

Redesigns the docs-starter landing page (welcome.mdx) to match a modern layout pattern with:

• layout: overview in frontmatter for a wider content area
• Left-right hero section — description text + CTA buttons on the left, a teal gradient illustration box on the right
• Enhanced gradient background — increased opacity from 3% → 8% with a wider spread
• 2×2 card grid — "What you can do" section with 4 navigation cards
• Concepts section — brief glossary of key Plant Store concepts
• Responsive design — hero stacks vertically on mobile (≤768px)
• Dark mode support — hero image box and gradient adjust for dark theme

The previous getting-started tutorial content (clone, install, preview, publish steps) has been replaced with this new layout. The hero illustration is an inline SVG placeholder (plant-themed with green stems/leaves growing from boxes).

Implementation notes

• CTA buttons use <span> wrappers — Fern's MDX renderer strips className from <a> tags (adding its own fern-mdx-link class instead). To style the buttons, the links are wrapped in <span className="cta-primary"> / <span className="cta-secondary">, and CSS targets .hero-cta-group .cta-primary a.fern-mdx-link to override Fern's link styles.
• Hardcoded button colors — The primary CTA uses hardcoded #008700 (light) / #70E155 (dark) instead of var(--accent-primary), because the accent variable's resolved color made the white link text invisible. If someone changes the accent color in docs.yml, the CTA button color will not update automatically.

Local testing

Tested locally with fern docs dev — both CTA buttons render correctly and the hero layout, card grid, and concepts section all display as expected in light mode.

Review & Testing Checklist for Human

• Verify dark mode rendering — dark mode was not tested locally. Toggle dark mode and confirm the hero image box, CTA button colors/text, gradient, and card grid all look correct.
• Evaluate removed onboarding content — the original page had a full tutorial (clone → install → preview → customize → publish). Consider whether this content should be preserved elsewhere or if the new layout is sufficient for FTUX.
• Check CTA button fragility — the button styling relies on !important overrides and targeting Fern's internal .fern-mdx-link class. Confirm buttons still render correctly if the Fern CLI version is upgraded.
• Assess SVG illustration quality — the hero illustration is a hand-coded SVG placeholder. Decide if it's appropriate for the starter template or should be replaced with a designed asset.

Recommended test plan: Run fern docs dev, open localhost:3000, and visually compare the landing page against the reference screenshot. Toggle dark mode. Resize to mobile width. Click both CTA buttons to verify navigation works.

Notes

• Requested by: @jon-fern
• Devin session

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[github-actions]

🌿 Preview your docs: https://plantstore-preview-38af0e90-ac48-489b-9b48-e555e660a484.docs.buildwithfern.com