DEV Community: Sushmitha S

How I Built a Construction Website Template with Next.js 16 + GSAP Scroll Animations

Sushmitha S — Mon, 17 Aug 2026 06:17:52 +0000

I recently shipped BuildVox, a fully responsive Next.js template built specifically for construction companies, contractors, and renovation businesses — and I wanted to share how it's put together, because a few of the decisions turned out to matter a lot more than I expected going in.

Live demo: https://buildvox-co.vercel.app/
Get it on Gumroad: https://uicraftedstudio.gumroad.com/l/buildvox

The problem I was solving
Every contractor or freelance dev who's built a construction site knows the drill: the client wants a hero video, a services grid, project photos, testimonials, a team section, an FAQ, and a contact form that actually sends email — and they want it to look premium, not like a WordPress theme from 2014.

Rebuilding that from scratch every time is a waste of billable hours. So I built the version I wished existed: 11 ready-made sections, wired together, that you can reskin in minutes instead of days.

The architecture: one file to rule them all

The single biggest design decision was centralizing every piece of copy, stat, image path, and link into one file: data/data.ts.

No hunting through a dozen components to change a headline. No digging into JSX to swap a testimonial. You open one file, edit the object, and the entire site — hero copy, service descriptions, team bios, footer links — updates. This is the thing that makes rebranding the whole site for a new client take minutes, not hours.

If you're building templates for resale (or even just for repeat client work), I'd genuinely recommend this pattern over scattering content across components. It's the difference between "customize this" being a chore and being trivial.

Scroll and motion: Lenis + GSAP + Framer Motion

Smooth scrolling is powered by Lenis, synchronized with GSAP's ScrollTrigger for scroll-based reveal animations — sections fade and slide in as you scroll, staggered just enough to feel intentional without being distracting. Framer Motion handles the smaller component-level interactions (hover states, menu transitions).

Getting Lenis and GSAP's ScrollTrigger to agree with each other is one of those things that looks simple in a demo GIF and is genuinely fiddly to get right — mismatched scroll positions, jumpy triggers, that kind of thing. Once it's synced properly though, it's the detail that makes a template feel "premium" versus "template-y."

The stack

Next.js 16 (App Router)
React 19
Tailwind CSS 4
shadcn/ui (built on Radix/Base UI primitives, so components stay accessible)
Framer Motion + GSAP + ScrollTrigger
Lenis for smooth scroll
Swiper for the testimonial carousel and marquee
100% TypeScript

The contact form problem

Contact forms are usually the part that forces a backend, which is overkill for a static marketing site. I wired this one up with EmailJS instead — drop in your own service ID, template ID, and public key, and the form sends real email with zero backend code. For a contractor who just needs leads landing in their inbox, that's the whole requirement, solved.

SEO and legal pages, done once

Metadata, sitemap.ts, and robots.ts are already configured, and I included Terms & Privacy Policy pages built on the same content pattern as everything else — so they pull from data.ts too instead of being static walled-off pages.

Who this is actually for

I built it with three people in mind:

Freelance developers who need a fast, credible starting point for a construction-industry client site
Agencies that want a repeatable base instead of rebuilding this vertical from zero every time
Contractors themselves who want something they can deploy and edit without hiring a dev for every copy change

Try it

The live demo is at https://buildvox-co.vercel.app/ — scroll through it to see the Lenis/GSAP sync in action. If it's useful to you, it's available on Gumroad: https://uicraftedstudio.gumroad.com/l/buildvox

Happy to answer questions about the data.ts pattern, the Lenis/GSAP setup, or anything else in the comments.

How to Build a High-Converting SaaS Landing Page with Next.js 16 (App Router Guide)

Sushmitha S — Tue, 03 Mar 2026 11:46:15 +0000

Most founders spend weeks designing their SaaS landing page before launching.

The real problem isn’t design — it’s structure.

In this guide, I’ll break down how to build a clean, high-converting SaaS landing page using Next.js 16, App Router, TypeScript, and Tailwind CSS.

Let’s build it the right way.

🧠 1. Start With Structure, Not Design

Before touching colors or animations, define the core sections.

A high-converting SaaS landing page typically includes:

Hero Section
Social Proof
Features Grid
How It Works
Pricing
FAQ
Strong Call-To-Action

Most people skip this planning step and start designing randomly.

That’s where time gets wasted.

🏗 2. Project Setup (Next.js 16 + App Router)

Create a new project:

npx create-next-app@latest saas-landing

Enable:

TypeScript
App Router
ESLint Folder structure example:

src/
  app/
  components/
  utils/

Keep things modular from the beginning.

🎯 3. Centralize Your Content

Instead of hardcoding text everywhere, create a single data file:
src/utils/data.ts

export const heroData = {
  title: "Manage Your SaaS Smarter",
  description: "All-in-one dashboard for modern startups.",
  cta: "Get Started"
};

Now your content is easy to update.

This is extremely useful if you're iterating fast.

🎨 4. Build Sections with Tailwind CSS

Use utility-first styling for speed and consistency.

Example Hero section:

<section className="text-center py-24">
  <h1 className="text-4xl font-bold">
    {heroData.title}
  </h1>
  <p className="mt-4 text-gray-600">
    {heroData.description}
  </p>
  <button className="mt-6 bg-black text-white px-6 py-3 rounded-lg">
    {heroData.cta}
  </button>
</section>

Keep spacing consistent.
Use max-width containers.
Avoid visual clutter.

💰 5. Pricing Section Psychology

Your pricing section should:

Show 2–3 tiers max
Highlight one “Recommended” plan
Keep feature comparison simple

Don’t overwhelm users with 20 bullet points.

Clarity converts better than complexity.

✨ 6. Add Subtle Animations

Use Framer Motion for small interactions:

Fade-in sections
Button hover animations
Smooth transitions Keep it subtle. Over-animating reduces trust.

🚀 7. Deployment (Fastest Way)

Push to GitHub.

Then import the repo into Vercel.

No complex configuration needed.
Deployment takes minutes.

Now your SaaS landing page is live.

⚡ Launch Faster

If you don’t want to build this entire structure from scratch, I created a production-ready SaaS landing page template using:

Next.js 16 (App Router)
React 19
TypeScript v5
Tailwind CSS v4
Framer Motion
One-click Vercel deployment

It includes all sections mentioned above and is fully customizable from a single data file.

You can check it out here:

uicrafted.gumroad.com

Building SaaS products is hard.

Your landing page shouldn’t slow you down.

Launch faster. Iterate faster.

I Struggled With My Portfolio, So I Built a Next.js Template — Here’s What I Learned

Sushmitha S — Tue, 20 Jan 2026 05:35:42 +0000

I spent weeks tweaking my portfolio and still wasn’t confident sending it to recruiters. So I decided to build my own Next.js portfolio template — and learned a lot in the process.

As a developer, your portfolio is often the first impression recruiters or clients get. I wanted something that looks modern, professional, and is easy to customize — so I built my own.

After weeks of design, development, and testing, I released a premium Next.js portfolio template built with Tailwind CSS.

✨ What you get:

Clean, modern UI designed for developers
Fully responsive layout (mobile, tablet, desktop)
Easy setup & customization
Optimized performance with Next.js
Well-structured codebase

🎯 Perfect for:

Students applying for their first developer roles
Junior & mid-level developers
Freelancers showcasing client projects

If you’re serious about presenting your work professionally, you can check it out here:
👉 Gumroad: uicraftedstudio.gumroad.com/l/ovyjwp

I’d love feedback from the community — and I’m happy to answer any questions!