For a long time, a website for a small farm or food brand came out one of three ways:
- a WordPress theme with a page builder and a dozen plugins,
- a Webflow site the agency keeps paying for,
- a Framer page that looks great until the client wants a blog with 200 posts.
When I designed Krishi, a website template for farms, regenerative growers, agritech companies and food producers, I wanted to see if a headless stack could beat all three. Not only for developers, but for the farm team that has to update the site every week.
Here's what I built, why I picked Next.js, Astro and Sanity, and what I gave up for it.
👉 Live demo: Krishi Live
What Krishi is
Krishi is a premium, editorial website: a deep forest green, a paper-coloured background, one bright lime accent, a Newsreader serif for headings and Geist for body text. It has full-screen aerial photos and video and slow, quiet motion.
Under the hood:
- Next.js 16 (App Router) and an Astro version with the same design
- Sanity Studio as the content editor, shared by both versions
- Tailwind CSS v4 design tokens
- GSAP + ScrollTrigger for animation, Lenis for smooth scrolling
- TypeScript everywhere
It ships with 17 sections (hero, services list, stats, timeline, journal, FAQ, video, testimonials, contact and more) and 7 page designs: Home, About, Solutions, Journal, Journal article, Contact and 404.
The problem with the usual options
I've built client sites on all three. They're good tools. But for a brand site like Krishi, each one hits a wall.
WordPress: the plugin tax
WordPress can do anything, but on a typical brochure site "anything" means a theme, a page builder, a slider plugin, an SEO plugin, a forms plugin, a cache plugin and a security plugin. Each one adds weight to every page and needs updates. A cinematic design with scroll animation ends up as a fight with the page builder's markup.
The editor experience isn't as simple as it looks either. Give a client a page builder and they can move any pixel, which is exactly how a carefully designed site drifts off-brand in six months.
Webflow: great designer tool, rented home
Webflow is the closest to what I wanted visually. But the site lives on Webflow's platform and plans, CMS item limits depend on the plan, and custom logic means working around the platform. If the client ever wants to leave, they get exported HTML without the CMS.
Framer: fast to launch, hard to grow
Framer is wonderful for a landing page. It's less comfortable when the farm wants a proper journal, reusable FAQs and testimonials across pages, and a content model that more than one person edits.
Why headless worked better for Krishi
1. Editors get sections, not a blank canvas
In Krishi, every page is a list of sections in Sanity Studio. An editor adds a "Stats" or "Testimonials" section, drags it into place and publishes. Each field says where it shows up on the page ("Shown under the heading on the left").
What editors can't do is break the layout. Colours, spacing and type are in the code. The farm team controls the content; the design stays the design.
page
└─ sections[] → Hero | Statement | Services list | Stats | Journal posts | FAQ | …
Things that appear in more than one place, like services, testimonials, FAQs and journal posts, are their own documents. You write a testimonial once and pick it in any section. Leave the picker empty and the section shows all of them.
2. You pick the framework, not the platform
This is the part I like most. One purchase includes two websites:
- Next.js for a site that refreshes from Sanity every minute, without a redeploy.
- Astro for a fully static site that's fast and cheap to host and rebuilds when you publish.
Both use the same Sanity Studio and the same queries. You can start on one and switch to the other later without moving your content. The content was never locked into a framework, let alone a platform.
3. Performance is the default, not a plugin
Pages are pre-rendered. Images come from Sanity's CDN at the size each screen needs, cropped around the hotspot the editor chose, with a blur-up preview. There's no page-builder markup, no jQuery and no plugin scripts. The JavaScript that ships is the JavaScript the design needs.
The Astro version goes further: it has no UI framework at all. The menu, journal slider, FAQ and video player are small <script> tags inside their components.
4. Motion you can't get from a page builder
The design leans on scroll motion:
- a statement paragraph that fills in word by word as you scroll,
- a services list where the photo follows your cursor,
- stats that count up when they come into view,
- testimonials in two marquees moving in opposite directions,
- photos with gentle parallax.
All of it is GSAP ScrollTrigger, wrapped in gsap.matchMedia() so visitors who prefer reduced motion get a calm, static page:
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
// scroll animation here
});
return () => mm.revert();
Doing this cleanly in a page builder is somewhere between painful and impossible.
5. One place to change the brand
All colours, font sizes and radii are Tailwind v4 tokens in one @theme block. Change forest-700 and every dark section, the footer and the menu follow. A rebrand from "farm" to "coffee roaster" is an afternoon, not a rebuild.
6. It's friendly to AI coding tools
Krishi ships with a CLAUDE.md file that explains the content model, where files go and how to build a new section. With Claude Code, you can point it at a Figma frame and get a new section with its schema, query, type and component that follows the same rules as the rest of the template. Having the whole site as plain, typed code makes this possible.
What you give up (honestly)
Headless isn't free. Here's the trade-off:
-
Setup needs a developer. It's
npm install, a Sanity login and a deploy to Vercel or Netlify, but it's a terminal, not a "Publish" button. After that, editors never touch code. -
No plugin marketplace. Krishi is a front-end template. The contact form and newsletter sign-up are designed and ready, but you connect them to your provider (Resend, Mailchimp, your CRM). They're marked
TODO(dev)in the code. - Two services instead of one. The site is on your host; the content is in Sanity. Both have free tiers that cover a typical brand site.
If your client needs a webshop with 40 extensions next week, WordPress + WooCommerce may still be the right call. For a brand site that has to look premium, load fast and stay easy to edit, headless wins.
Getting started
npm install
cd studio && npx sanity login && npx sanity init --bare && cd ..
npm run seed # imports the demo pages, posts, images and videos
npm run dev # starts the website and the Studio
The demo content reads like a real regenerative farm, so the site feels finished on the first run. Replace the words and photos, and you have a launch-ready website.
Wrapping up
WordPress, Webflow and Framer aren't going anywhere, and they shouldn't. But for brand sites like Krishi, a headless stack gives you:
- a design that editors can't break,
- a framework you choose (Next.js or Astro) and content you own,
- performance without plugins,
- motion that page builders can't match.
If you build sites for farms, food brands or any business that wants an editorial look, give Krishi a try.
- Live demo: Krishi Live
- Get Krishi: Download Krishi
I'd love to hear how you build client sites today. Still on WordPress, or already headless? Tell me in the comments.
Top comments (1)
Interesting that you designed around the farm team updating weekly. Did you test the editing side with someone non-technical on the team? That's usually where the headless vs WordPress argument gets decided for our clients.