Oddline: Social creative studio landing page template for Next.js.

$39one-time payment

Buy OddlineLive demo

Checkout opens soon.

Next.js 15
CSS
TypeScript
7 sections
Dark
No API keys
Updated Oct 10, 2026

Live demo

The Oddline landing page template on desktop, from the hero to the footer

Overview

A distinctive single-page website for independent creative studios and social agencies. Charcoal, pale chartreuse, bold typography and original photographic campaigns create a confident identity with a focused landing-page scope.

Made for: Social-first creative studios, Independent content and brand agencies, Campaign production and art-direction teams
Highlights: Original creator and campaign imagery with a layered photographic hero
Work-first hierarchy, unequal gallery cards and an editorial studio statement
Keyboard-accessible capabilities and engagement tabs, plus native FAQs
Simple configurable email, booking and optional project links
The look: A left-aligned oversized promise sits beside an uneven creator-and-product collage. A large cobalt campaign card anchors the work gallery, with two smaller stories alongside it. An editorial studio statement and a chartreuse studio note lead into in-place capability views, a slim process rail, two engagement options, FAQs and a solid chartreuse closing. Space Grotesk and Inter bring a sharp typographic rhythm.

Sections

01
Hero and navigation
Original layered photography, scroll depth, a confident two-line heading, restrained sticky navigation and a keyboard-accessible phone menu.
02
Selected directions
Three explicitly labeled concept campaigns in an unequal two-column gallery. Optional project URLs turn the relevant card into a normal link.
03
The studio
A progressive-colour manifesto, tilted chartreuse note and three practical studio principles.
04
Capabilities
Three keyboard-accessible views with original editable SVG drawings, descriptions and discipline tags.
05
Process
A three-step vertical rail with scroll progress, a sticky desktop introduction and normal phone flow.
06
Engagements
Two in-page ways to work together, including scope, example fees and direct email or booking CTAs.
07
FAQ, closing and footer
Five native disclosures, a generous chartreuse CTA, an oversized wordmark and optional social destinations.

Remove a section by deleting its line in app/page.tsx, or move the line to reorder.

Make it yours

Edit site.config.ts for the identity, content, imagery, pricing and every destination. Each landing section and stylesheet is separate.

Where to change each part of Oddline
To change	Edit
Brand, content, campaigns, prices and CTA destinations	site.config.ts
Palette, type, gutters and buttons	styles/base.css
Page hierarchy and composition	app/page.tsx and components/sections/
Identity mark and service illustrations	components/ui.tsx and components/ServiceArt.tsx
Scroll depth and reveal behaviour	components/Motion.tsx and styles/motion.css
Original imagery and prompts	public/images/ and ASSETS.md

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional brand, example fees, concept campaigns and email address. Set a booking URL or keep an ordinary email CTA, and add your own project URLs if needed. There is no form submission, enquiry builder, download flow or application backend.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Space Grotesk, Inter, self-hosted with next/font
Dependencies: next, react, react-dom
Images: Four original generated photographs: one creator portrait and three campaign stills. Optimized WebP assets ship locally, with prompt provenance included.
API keys and environment variables: None
Node.js: 20.9 or newer
Colour scheme: Dark
Responsive: Desktop, tablet and phone
Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 32 source files, about 3,400 lines
Last updated: Oct 10, 2026

License

One license, no tiers. The full text ships as LICENSE.md in the download.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

Questions

What do I get when I buy Oddline?

The complete Oddline project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. The download link arrives right after checkout.

Can I use Oddline for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Oddline are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Oddline isn’t right for you, reply to your receipt within 14 days and you get your money back.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $99 for all 31 templates, including Oddline and every template added later. Three single templates would cost $117.