Vekto Studio is a complete Next.js 15 digital agency template built for developers and freelancers who want to launch fast without sacrificing quality. Dark, sharp, and production-ready — neon green accent on near-black, heavy typography, and intentional animations. Every page is included: Home with 8 sections, About, Services (listing + detail), Blog (listing + full MDX post), Contact with Resend integration, and a custom 404. Zero placeholder pages, zero unfinished sections.

The code is written the way a senior engineer would write it. Server Components by default, Server Actions for forms, fully typed with TypeScript, Tailwind CSS v4, and shadcn/ui CSS variables throughout. Change the accent color by editing one line in globals.css and the entire site updates. SEO is centralized in a single file with Open Graph, Twitter Card, and JSON-LD structured data for every page — including dynamic blog and service routes.

The blog runs on MDX stored locally — no CMS, no API keys, no monthly fee. Drop an .mdx file in content/blog/ and it appears automatically with full Tailwind Typography styling, prev/next navigation, and BlogPosting schema. The contact form sends two branded dark-mode emails via Resend: a full inquiry to your inbox and an auto-reply to the sender. If you've been searching for a Next.js agency template, a Tailwind CSS studio template, or a Next.js 15 starter — Vekto Studio is exactly that.

What's inside

Video demo en X

A complete Next.js 15 digital agency site — every page, every section, production-ready code you can ship the same week you buy it.

Pages included:

• / Home — Hero, Services, Work, About strip, Process, Testimonials, Blog preview, CTA
• /about — Story, team, stats with animated counters, values, CTA
• /services — All services grid with filtering
• /services/[slug] — Individual service detail — deliverables, process, related services
• /blog — MDX-powered listing with featured post layout
• /blog/[slug] — Full post page with typography, prev/next navigation
• /contact — Form with Server Action + Resend integration, sidebar with response info
• 404 — Custom not-found page

Tech stack

• Next.js 15 App Router — file-based routing, Server Components, Server Actions
• TypeScript — fully typed throughout
• Tailwind CSS v4 — utility-first, zero config drift
• shadcn/ui — design system with oklch color variables
• Motion (Framer Motion) — scroll-driven animations, marquee, staggered reveals
• MDX + next-mdx-remote — local blog with frontmatter, zero CMS required
• Resend — contact form sends two emails: one to you, one auto-reply to the sender

Design decisions that convert

• Neon green accent on near-black — the same palette used by Linear, Vercel, and Raycast. Immediately communicates premium
• Scroll-driven vertical line on Process — the neon line grows as you scroll through the steps. Buyers always screenshot this
• Infinite marquee Testimonials — two rows, opposite directions, pause on hover
• Card hover glows — every card has a radial gradient that activates on hover. Subtle, but buyers notice
• CountUp stats — numbers animate from 0 when they enter the viewport. Works in About and AboutStrip
• CTA shimmer button — a light sweep crosses the button on hover. 3 lines of CSS, strong visual signal

Built for real use

• Zero hardcoded colors — everything uses CSS variables from your design system. Change the accent color in one line
• SEO-ready out of the box — metadata, Open Graph, Twitter Card, JSON-LD structured data (Organization, WebSite, Service, BlogPosting) — all centralized in lib/metadata.ts
• Fully responsive — every section, every page, every component. Mobile-first where it matters
• Accessible — skip-to-content link, proper aria labels, keyboard navigation, focus states, prefers-reduced-motion support
• Fast — Server Components by default, next/image with correct sizes, no unnecessary client bundles

Who this is for

• Freelancers launching or relaunching their agency site
• Developers who want a premium starting point they can customize and ship fast
• Buyers building client sites who need a template that holds up under scrutiny

What you get

• Full source code (Next.js project, ready to run)
• .env.example with all required variables
• README with setup guide, customization docs, deployment instructions
• Free updates for 6 months after purchase

Requirements

• Node.js 18+
• A Resend account (free tier works)
• Vercel or any Node-compatible host

Not included

• Sanity CMS integration (ships with MDX blog instead)
• Work/case study inner pages (home Work section included — inner pages left for your real projects)
• Authentication

Getting Started with Vekto Studio

Thanks for purchasing Vekto Studio. Here's everything you need to go from zip file to live site.

1. Unzip and install

unzip vekto-studio.zip
cd vekto-studio
npm install

2. Set up environment variables

cp .env.example .env.local

Open .env.local and fill in:

RESEND_API_KEY=          # From resend.com — free tier works
CONTACT_EMAIL=           # Where you want contact emails delivered
NEXT_PUBLIC_SITE_URL=    # Your production URL e.g. https://yourstudio.com

3. Run locally

npm run dev

Visit http://localhost:3000.

4. Customize

Your name and brand:

• Site name → src/lib/metadata.ts → SITE_NAME
• Accent color → src/app/globals.css → --primary oklch value
• Nav links → src/components/layout/Navbar.tsx → NAV_LINKS

Your services:

• All content → src/lib/services-data.tsx → SERVICES array

Your team:

• src/app/about/page.tsx → TEAM array

Your testimonials:

• src/components/sections/Testimonials.tsx → TESTIMONIALS array

5. Add blog posts

Create MDX files in content/blog/:

content/blog/your-post-title.mdx

With frontmatter:

---
title: "Post Title"
excerpt: "Short description."
category: "Development"
date: "Jan 15, 2025"
readTime: "5 min read"
---

Content here...

6. Deploy

Vercel (easiest):

1. Push to GitHub
2. Import repo in vercel.com
3. Add environment variables in Vercel dashboard
4. Deploy

Detailed docs in README.md inside the project.