Next.js
React
Tailwind CSS
Supabase
TypeScript
The Karvision Technologies site is a Next.js App Router application styled with Tailwind CSS v4, with case studies stored in Supabase.
Brand colors, type and motion are defined once as design tokens in src/app/globals.css, and page copy lives in src/app/api/data.tsx — change those two files and the rest of the site follows.
karvision-technologies ├── supabase │ └── schema.sql Case studies table, RLS policies ├── public/images/brand Logo assets (symbol, white symbol, app mark) ├── src │ ├── app │ │ ├── (site) Public site — marketing header and footer │ │ │ ├── page.tsx Home │ │ │ ├── case-studies │ │ │ │ ├── page.tsx Index │ │ │ │ └── [slug]/page.tsx Article │ │ │ └── documentation │ │ ├── (studio) Private editor — no marketing chrome │ │ │ ├── signin Supabase email + password │ │ │ └── admin List, create, edit case studies │ │ ├── api/data.tsx Section content and project list │ │ ├── globals.css Design tokens, utilities, motion │ │ ├── icon.svg Favicon │ │ ├── layout.tsx Fonts and metadata │ │ ├── opengraph-image.tsx │ │ ├── robots.ts · sitemap.ts │ │ └── not-found.tsx │ ├── components │ │ ├── CaseStudy Cover artwork │ │ ├── Common Icon set, loader │ │ ├── Documentation This page │ │ ├── Home Page sections, in narrative order │ │ ├── Layout Header, footer, navigation, logo │ │ ├── Studio Sign-in form, editor │ │ └── NotFound · ScrollToTop │ ├── lib │ │ ├── caseStudies.ts Server queries │ │ ├── caseStudy.ts Types and pure helpers │ │ ├── site.ts WhatsApp number, site URL │ │ └── supabase Browser, server and public clients │ ├── middleware.ts Session refresh, /admin guard │ ├── types · utils ├── next.config.mjs ├── package.json └── tsconfig.json
Before proceeding, you need to have the latest stable node.js
Open package folder and install its dependencies. We recommanded yarn or npm.
cd project-folder
npm install
cd project-folder
yarn install
Once npm install is done now you an run the app.
npm run dev or yarn run dev
This command will start a local webserver http://localhost:3000:
> karvision-technologies@2.0.0 dev
> next dev
-Next.js 14.2.4
-Local: http://localhost:3000
After adding url run below command for build a app.
npm run build or yarn build
Finally, Your webiste is ready to be deployed.🥳
1. Brand tokens
Colors are defined as design tokens in the @theme block of src/app/globals.css.
--color-ink: #0B1F5E;
Deep royal blue — primary surface & headings
--color-primary: #155EEF;
Electric blue — interactive & brand accent
--color-accent: #FF8A00;
Amber — controlled highlight only
--color-canvas: #F7F8FB;
Section ground
--color-line: #E4E7F0;
Hairline borders
--color-muted: #5A6478;
Body copy
2. Usage
Blue carries the brand; amber is an accent, never a background. Use bg-ink for deep panels, bg-canvas for alternating sections and border-line for every hairline.
1. The typeface is set in src/app/layout.tsx.
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter" });
2. Display headings use the .text-display utility (tight tracking, 1.04 line-height) defined in src/app/globals.css.
1. The logo lives here:src/components/Layout/Header/Logo/index.tsx
<Logo /> // symbol + wordmark
<Logo tone="white" /> // for deep blue surfaces
<Logo symbolOnly /> // standalone symbol
<KarvisionSymbol /> // the mark on its own
2. Static assets (favicon, social preview, external use):
public/images/brand/ — karvision-symbol.svg, karvision-symbol-white.svg, karvision-mark.svg