Marketing website and landing page for ACTA, the infrastructure for digital trust: the simplest way to issue blockchain-based verifiable credentials, encrypted and anchored on Stellar / Soroban, and verifiable by anyone.
This is a single-page marketing site built with the Next.js App Router, a dark "cosmic" theme with subtle gold accents, and lightweight scroll/entrance animations.
- Next.js 16 (App Router, Turbopack) + React 19 with the React Compiler
- TypeScript
- Tailwind CSS v4 (CSS-first config, theme tokens in
globals.css) - Motion (
motion/react) for animations - lucide-react for icons
- PostHog for product analytics (via a same-origin reverse proxy)
- ESLint + Prettier + Husky + lint-staged for code quality
- Geist Sans / Mono fonts
- Node.js 20+ (developed on Node 24)
- npm
npm installCopy the example file and fill in the values:
cp .env.example .env.local| Variable | Required | Description |
|---|---|---|
NEXT_PUBLIC_POSTHOG_KEY |
optional | PostHog project API key (enables analytics). |
NEXT_PUBLIC_POSTHOG_HOST |
optional | PostHog host (e.g. https://us.i.posthog.com). |
Analytics are sent through a same-origin reverse proxy under /ingest
(configured in next.config.ts) to avoid ad-blockers; if the keys are unset,
tracking is simply a no-op.
npm run dev # start the dev server at http://localhost:3000
npm run build # production build
npm run start # serve the production build| Script | What it does |
|---|---|
npm run dev |
Start the development server |
npm run build |
Production build |
npm run start |
Serve the production build |
npm run lint |
ESLint with --fix (fails on warnings) |
npm run lint:check |
ESLint without fixing (CI-friendly) |
npm run format |
Format the repo with Prettier |
npm run format:check |
Check formatting without writing |
src/
├── app/
│ ├── layout.tsx # Root layout (fonts, metadata, dark theme, PostHog)
│ ├── page.tsx # Landing page — composes the sections
│ ├── not-found.tsx # Branded 404 page
│ └── globals.css # Tailwind v4 theme tokens + animations
├── components/
│ ├── header.tsx # Sticky header / navbar
│ ├── mobile-nav.tsx # Mobile menu
│ ├── logo.tsx, portal.tsx, infinite-slider.tsx
│ ├── sections/ # Landing sections (see below)
│ └── ui/ # Reusable primitives (button, card, badge,
│ # accordion, reveal, logo-carousel, terminal-animation)
├── providers/
│ └── PostHogProvider.tsx # Client analytics provider + pageview tracking
├── hooks/
│ └── use-scroll.ts
└── lib/
├── constants.ts # ACTA_OFFICIAL_LINKS (dapp, docs, socials, …)
├── posthog.ts # Server-side PostHog client
└── utils.ts # cn() helper
Hero · TrustedBy · ValueProps · HowItWorks · DeveloperSdk ·
UseCases · FAQ · FinalCTA · Footer
They are composed in order inside src/app/page.tsx.
- The site is dark by default (
.darkis forced on<html>). - Theme tokens live in
src/app/globals.cssas CSS variables mapped into Tailwind v4 via@theme inline. The base is a deep "cosmic" navy/black with a subtle gold accent (#ffd21f) used sparingly for highlights. - The body uses a soft top spotlight + vertical gradient for depth.
- Utility effects:
.text-shine(animated title sheen),.bg-grid, and aRevealcomponent for scroll-in fade/rise (respectsprefers-reduced-motion).
Git hooks are managed by Husky:
- pre-commit →
npm run format - pre-push →
npm run lint+npm run build
lint-staged is configured for staged files; run npm run lint / npm run format
manually anytime.
Optimized for Vercel. Push to the default branch (or open a PR) and Vercel
builds with npm run build. Set NEXT_PUBLIC_POSTHOG_KEY and
NEXT_PUBLIC_POSTHOG_HOST in the project's environment variables if you want
analytics in production.
- Website: https://acta.build
- App (dApp): https://dapp.acta.build
- Docs: https://docs.acta.build
- Repo: https://github.com/ACTA-Team/website
© ACTA. The new infrastructure for digital trust.