OpesFlux Marketing Website

The official marketing website for OpesFlux — the UK-built ERP and POS system from Devs and Visuals.

Live URL: https://opesflux.devsandvisuals.com
Tech stack: Next.js 16 · TypeScript · Tailwind CSS v4 · Framer Motion · shadcn/ui primitives
Deployment: Vercel

---

Development

pnpm install
pnpm dev        # http://localhost:3000
pnpm build      # production build
pnpm start      # serve production build

---

How to publish a blog post

1. Create a new file: src/content/blog/your-post-slug.mdx
2. Add frontmatter at the top (copy from template below)
3. Write your post in Markdown below the frontmatter
4. Drop cover image in public/blog/your-post-slug-cover.jpg (1200x630px)
5. Commit and push: git add . && git commit -m "Publish: Post title" && git push
6. Vercel auto-deploys in ~60 seconds

Frontmatter template

---
title: "Your Post Title (under 60 chars)"
description: "Compelling 150-160 char meta description with the primary keyword."
date: "2026-04-30"
author:
  name: "Author Name"
  role: "Their role"
  avatar: "/team/author.jpg"
coverImage: "/blog/your-post-slug-cover.jpg"
coverImageAlt: "Descriptive alt text for the cover image"
tags: ["Tag1", "Tag2", "Tag3"]
category: "MTD & VAT"
featured: false
seoKeywords: ["primary keyword", "secondary keyword"]
---

Supported categories

MTD & VAT · Payroll · POS · Inventory · Growth · Compliance · Company News

---

Environment variables

Copy .env.example to .env.local and fill in:

Variable	Purpose
NEXT_PUBLIC_SITE_URL	Production URL
NEXT_PUBLIC_APP_URL	App URL (app.devsandvisuals.com)
RESEND_API_KEY	Email delivery for contact form
CONTACT_EMAIL_TO	Where demo requests are sent
SLACK_WEBHOOK_URL	Slack notifications for new leads
NEXT_PUBLIC_CALENDLY_URL	Calendly booking link

---

Deployment (Vercel)

1. Push to GitHub
2. Import repo at vercel.com — New Project
3. Framework preset: Next.js (auto-detected)
4. Add all env vars from .env.local
5. Custom domain: opesflux.devsandvisuals.com
6. DNS: CNAME opesflux to cname.vercel-dns.com

---

Project structure

src/
  app/           Pages (App Router — Next.js 16)
  components/
    layout/      Header, Footer, CookieBanner
    sections/    Homepage section components
    blog/        Blog-specific components
    forms/       ContactForm
    ui/          shadcn/ui primitives (Tailwind v4 syntax)
    visual/      Animated dashboard mockup, flow lines
    seo/         JSON-LD structured data components
  config/        site.ts, nav.ts, pricing.ts, industries.ts
  content/blog/  MDX blog posts
  lib/           blog.ts, seo.ts, analytics.ts, utils.ts
  types/         TypeScript types

Notes for developers

• Tailwind v4 is used. CSS variable classes use bg-(--color-name) syntax, not bg-[var(--color-name)].
• Next.js 16 — params and searchParams in page/layout components are Promise<{...}> and must be awaited.
• All pages are statically generated at build time except /api/contact and /contact (dynamic due to searchParams).

OpesFlux-Frontend