Staging (#68)

* refactor: lol gpt 5 refactored ts for me

* refactor: website card, mini chart route caching, database indexing / keys

* fix: UI consistencies, icon colors, organization improvements

* fix: clean up organization selector

* fix: clean up organization dialog

* feat: landing revamp (#56)

* feat: navbar

* feat: hero

* feat: trusted by

* feat: cards

* feat: desc & faq

* feat: footer svg

* feat: footer & testimonials

* feat: landing

* fix: on click btns

* fix: responsive

* feat: light mode, dark mode, some icon fixes

* feat: pricing page

* feat: better pricing page

* trusted by more people bro

* feat: cleanup

---------

Co-authored-by: Hyteq <[email protected]>

* fix: layout t estimonials

---------

Co-authored-by: dazai <[email protected]>

Author: izadoesdev

.cursor/rules/01-MUST-DO.mdc

@@ -1,8 +1,9 @@
 ---
 description: Basic guidelines for the project so vibe coders don't fuck it up
-globs: 
+globs:
 alwaysApply: true
 ---
+
 Always ensure type-safety, don't use type: any unless needed, when creating APIs, responses, or components, create proper interfaces and make them in the shared types folders where it fits best, not in the same file
 
 When working on anything, try to split off components, utils, anything reusable to ensure better loading speed and less complexity
@@ -39,10 +40,8 @@ use console properly, like console.error, console.time, console.json, console.ta
 
 Use Dayjs NEVER date-fns, and Tanstack query for hooks, NEVER SWR
 
-Use ONLY Zod V4 from zod/v4 never zod 3 from zod
-
 use Icon at the end of phosphor react icons, like CaretIcon not Caret
 
 use json.stringify() when adding debugging
 
-Almost NEVER use useEffect unless it's critical
+Almost NEVER use useEffect unless it's critical

apps/api/src/query/screen-resolution-to-device-type.ts

@@ -13,25 +13,69 @@ interface Resolution {
 	aspect: number;
 }
 
+// Orientation-agnostic key (longSide x shortSide)
+const makeKey = (w: number, h: number) => {
+	const longSide = Math.max(w, h);
+	const shortSide = Math.min(w, h);
+	return `${longSide}x${shortSide}`;
+};
+
+// Curated common resolutions mapped to device types (orientation-agnostic)
+// Keep this list intentionally small to avoid bloat while covering popular cases
+const COMMON_RESOLUTION_DEVICE_TYPE: Record<string, DeviceType> = {
+	// Mobile (portrait long x short)
+	'896x414': 'mobile', // iPhone XR/11
+	'844x390': 'mobile', // iPhone 12/13/14
+	'932x430': 'mobile', // iPhone 14/15 Pro Max
+	'800x360': 'mobile', // Many Android
+	'780x360': 'mobile',
+	'736x414': 'mobile',
+	'667x375': 'mobile',
+	'640x360': 'mobile',
+	'568x320': 'mobile',
+
+	// Tablets
+	'1366x1024': 'tablet', // iPad Pro (CSS logical)
+	'1280x800': 'tablet',
+	'1180x820': 'tablet', // iPad Air
+	'1024x768': 'tablet',
+	'1280x720': 'tablet',
+
+	// Laptops (common)
+	'1366x768': 'laptop',
+	'1440x900': 'laptop',
+	'1536x864': 'laptop',
+
+	// Desktop (16:9 standard)
+	'1920x1080': 'desktop',
+	'2560x1440': 'desktop',
+	'3840x2160': 'desktop', // 4K UHD
+
+	// Ultrawide
+	'3440x1440': 'ultrawide',
+	'3840x1600': 'ultrawide',
+	'5120x1440': 'ultrawide',
+};
+
 function parseResolution(screenResolution: string): Resolution | null {
 	if (!screenResolution || typeof screenResolution !== 'string') {
 		return null;
 	}
 
-	const parts = screenResolution.split('x');
-	if (parts.length !== 2) {
-		return null;
-	}
-
-	const widthStr = parts[0];
-	const heightStr = parts[1];
+	// Normalize: trim, remove spaces, unify delimiter to 'x'
+	const normalized = screenResolution
+		.trim()
+		.replace(/\s+/g, '')
+		.replace(/[X×✕]/gi, 'x')
+		.toLowerCase();
 
-	if (typeof widthStr !== 'string' || typeof heightStr !== 'string') {
+	const parts = normalized.split('x');
+	if (parts.length !== 2) {
 		return null;
 	}
 
-	const width = Number.parseInt(widthStr, 10);
-	const height = Number.parseInt(heightStr, 10);
+	const width = Number.parseInt(parts[0] || '', 10);
+	const height = Number.parseInt(parts[1] || '', 10);
 
 	if (
 		Number.isNaN(width) ||
@@ -46,28 +90,44 @@ function parseResolution(screenResolution: string): Resolution | null {
 }
 
 function determineDeviceType(resolution: Resolution): DeviceType {
-	const { width, aspect } = resolution;
+	const w = Math.max(resolution.width, resolution.height);
+	const h = Math.min(resolution.width, resolution.height);
+	const aspect = w / h;
+
+	// Exact/common matches first
+	const key = makeKey(w, h);
+	if (COMMON_RESOLUTION_DEVICE_TYPE[key]) {
+		return COMMON_RESOLUTION_DEVICE_TYPE[key];
+	}
 
-	if (width <= 400 && aspect >= 0.9 && aspect <= 1.1) {
+	// Watches: very small and near-square
+	if (w <= 400 && aspect >= 0.85 && aspect <= 1.15) {
 		return 'watch';
 	}
-	if (width <= 800 && (aspect < 0.9 || (aspect >= 1.8 && aspect <= 2.5))) {
+
+	// Ultrawide: very wide aspect and sufficiently large
+	if (aspect >= 2.0 && w >= 2560) {
+		return 'ultrawide';
+	}
+
+	// Heuristics based primarily on the short side (portrait CSS width proxy)
+	if (h <= 480) {
 		return 'mobile';
 	}
-	if (width > 800 && width <= 1280 && aspect >= 1.1 && aspect <= 1.7) {
+	if (h <= 900) {
 		return 'tablet';
 	}
-	if (width > 1280 && width <= 1920 && aspect >= 1.3 && aspect <= 1.8) {
+
+	// Above tablet short-side: distinguish laptop vs desktop by long side
+	if (w <= 1600) {
 		return 'laptop';
 	}
-	if (aspect > 2.0 && width > 1920) {
-		return 'ultrawide';
-	}
-	if (width > 1920 && width <= 2560 && aspect >= 1.3 && aspect <= 2.0) {
+	if (w <= 3000) {
 		return 'desktop';
 	}
 
-	return 'unknown';
+	// Very large (e.g., 4k+) default to desktop
+	return 'desktop';
 }
 
 /**

apps/api/src/query/types.ts

@@ -38,7 +38,9 @@ export interface SimpleQueryConfig {
 	plugins?: {
 		parseReferrers?: boolean;
 		normalizeUrls?: boolean;
-		[key: string]: unknown;
+		normalizeGeo?: boolean;
+		deduplicateGeo?: boolean;
+		mapDeviceTypes?: boolean;
 	};
 	customSql?: (
 		websiteId: string,