[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/api-usage-table.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Badge } from "@/components/ui/badge" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface ApiData { id: number pathname: string domain: string api: string isError: boolean payload: { method: string status: number queryParams: Record } createdAt: Date updatedAt: Date } interface ApiUsageTableProps { data: ApiData[] } export function ApiUsageTable({ data }: ApiUsageTableProps) { const getStatusColor = (status: number) => { if (status >= 200 && status < 300) return "bg-green-500/10 text-green-500 border-green-500/20" if (status >= 400 && status < 500) return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" if (status >= 500) return "bg-red-500/10 text-red-500 border-red-500/20" return "bg-muted text-muted-foreground" } const getMethodColor = (method: string) => { switch (method.toLowerCase()) { case "get": return "bg-blue-500/10 text-blue-500 border-blue-500/20" case "post": return "bg-green-500/10 text-green-500 border-green-500/20" case "put": return "bg-orange-500/10 text-orange-500 border-orange-500/20" case "delete": return "bg-red-500/10 text-red-500 border-red-500/20" default: return "bg-muted text-muted-foreground" } } const groupedData = data.reduce( (acc, item) => { if (!acc[item.pathname]) { acc[item.pathname] = [] } acc[item.pathname].push(item) return acc }, {} as Record, ) if (data.length === 0) { return (

No API usage data available

) } return (

{Object.entries(groupedData).map(([pathname, items]) => (

{pathname} {items.length} API{items.length !== 1 ? "s" : ""}

API Endpoint Method Status Timestamp {items.map((item) => ( {item.api} {item.payload.method} {item.payload.status} {item.createdAt.toLocaleString()} ))}

))}

) } [V0_FILE]typescriptreact:file="components/api-metrics-cards.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Activity, AlertTriangle, CheckCircle, Globe } from "lucide-react" interface ApiData { id: number pathname: string domain: string api: string isError: boolean payload: { method: string status: number queryParams: Record } createdAt: Date updatedAt: Date } interface ApiMetricsCardsProps { data: ApiData[] } export function ApiMetricsCards({ data }: ApiMetricsCardsProps) { const totalRequests = data.length const errorRequests = data.filter((item) => item.isError).length const successRequests = totalRequests - errorRequests const uniqueDomains = new Set(data.map((item) => item.domain)).size const uniqueApis = new Set(data.map((item) => item.api)).size const errorRate = totalRequests > 0 ? (errorRequests / totalRequests) * 100 : 0 return (

Total Requests

{totalRequests}

Current session data

Success Rate

{successRequests}

{totalRequests > 0 ? `${((successRequests / totalRequests) * 100).toFixed(1)}%` : "0%"} success rate

Error Rate

{errorRequests}

{errorRate.toFixed(1)}% error rate

Active Domains

{uniqueDomains}

{uniqueApis} unique endpoints

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "API Analytics Dashboard", description: "Monitor and analyze API usage across domains", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RefreshCw, Activity } from "lucide-react" import { ApiUsageTable } from "@/components/api-usage-table" import { ApiMetricsCards } from "@/components/api-metrics-cards" // Mock data following the provided schema const mockApiData = [ { id: 1, pathname: "/dashboard", domain: "api.example.com", api: "/v1/users", isError: false, payload: { method: "GET", status: 200, queryParams: { limit: 10 } }, createdAt: new Date("2024-01-15T10:30:00Z"), updatedAt: new Date("2024-01-15T10:30:00Z"), }, { id: 2, pathname: "/dashboard", domain: "api.example.com", api: "/v1/analytics", isError: false, payload: { method: "POST", status: 201, queryParams: {} }, createdAt: new Date("2024-01-15T10:25:00Z"), updatedAt: new Date("2024-01-15T10:25:00Z"), }, { id: 3, pathname: "/profile", domain: "auth.example.com", api: "/v2/auth/verify", isError: true, payload: { method: "POST", status: 401, queryParams: {} }, createdAt: new Date("2024-01-15T10:20:00Z"), updatedAt: new Date("2024-01-15T10:20:00Z"), }, { id: 4, pathname: "/dashboard", domain: "data.example.com", api: "/v1/metrics", isError: false, payload: { method: "GET", status: 200, queryParams: { range: "7d" } }, createdAt: new Date("2024-01-15T10:15:00Z"), updatedAt: new Date("2024-01-15T10:15:00Z"), }, { id: 5, pathname: "/settings", domain: "api.example.com", api: "/v1/config", isError: true, payload: { method: "PUT", status: 500, queryParams: {} }, createdAt: new Date("2024-01-15T10:10:00Z"), updatedAt: new Date("2024-01-15T10:10:00Z"), }, ] export default function Dashboard() { const [selectedDomain, setSelectedDomain] = useState("all") const [apiData, setApiData] = useState(mockApiData) const [isRefreshing, setIsRefreshing] = useState(false) const [lastRefresh, setLastRefresh] = useState(new Date()) // Get unique domains for the selector const domains = ["all", ...Array.from(new Set(mockApiData.map((item) => item.domain)))] // Filter data based on selected domain const filteredData = selectedDomain === "all" ? apiData : apiData.filter((item) => item.domain === selectedDomain) const handleRefresh = async () => { setIsRefreshing(true) // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1000)) setLastRefresh(new Date()) setIsRefreshing(false) } return (

API Analytics Dashboard

Monitor and analyze API usage across your domains

{/* Metrics Cards */} {/* API Usage Table */} API Usage Details

) } [V0_FILE]typescriptreact:file="components/error-stats.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AlertTriangle, AlertCircle, XCircle } from "lucide-react" interface ErrorStatsProps { totalErrors: number criticalErrors: number clientErrors: number } export function ErrorStats({ totalErrors, criticalErrors, clientErrors }: ErrorStatsProps) { return (

Total Errors

{totalErrors}

Across all endpoints

Server Errors

{criticalErrors}

5xx errors (critical)

Client Errors

{clientErrors}

4xx errors

) } [V0_FILE]typescriptreact:file="components/error-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { useState } from "react" import { ChevronDown } from "lucide-react" interface ErrorItem { id: number code: number message: string method: string endpoint: string timestamp: Date domain: string count: number } interface ErrorListProps { errors: ErrorItem[] } export function ErrorList({ errors }: ErrorListProps) { const [expandedError, setExpandedError] = useState(null) const getErrorColor = (code: number) => { if (code >= 500) return "bg-red-500/10 text-red-500 border-red-500/20" if (code >= 400) return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" return "bg-muted text-muted-foreground" } const getMethodColor = (method: string) => { switch (method.toUpperCase()) { case "GET": return "bg-blue-500/10 text-blue-500 border-blue-500/20" case "POST": return "bg-green-500/10 text-green-500 border-green-500/20" case "PUT": return "bg-orange-500/10 text-orange-500 border-orange-500/20" case "DELETE": return "bg-red-500/10 text-red-500 border-red-500/20" case "PATCH": return "bg-purple-500/10 text-purple-500 border-purple-500/20" default: return "bg-muted text-muted-foreground" } } // Sort errors by count (most frequent first) const sortedErrors = [...errors].sort((a, b) => b.count - a.count) return ( All Errors ({errors.length})

{sortedErrors.map((error) => (

setExpandedError(expandedError === error.id ? null : error.id)} className="group cursor-pointer rounded-lg border border-border bg-muted/30 p-4 hover:bg-muted/50 transition-colors" >

{error.code}

{error.message}

{error.method}


                        {error.endpoint}

{error.domain}

{error.count}

occurrence{error.count !== 1 ? "s" : ""}

{/* Expanded details */} {expandedError === error.id && (

Last Occurrence

{error.timestamp.toLocaleString()}

Endpoint

{error.method.toUpperCase()} {error.endpoint}

Domain

{error.domain}

Error Code

{error.code}

)}

))}

) } [V0_FILE]typescriptreact:file="app/error/page.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, AlertCircle, Clock, Search, X } from "lucide-react" import Link from "next/link" import { ErrorList } from "@/components/error-list" import { useState, useMemo } from "react" // Mock error data with shared request info const mockRequestInfo = { domain: "admin-dev.nestads.com", internalFrom: "0.0.0.0/0", triggeredFrom: "admin-dev.nestads.com/create", apiUrl: "/api/v1/sku/bulk", } const mockErrors = [ { id: 1, code: 401, message: "Bad Request: Missing required field 'name'", method: "POST", timestamp: new Date("2024-01-15T10:35:00Z"), endpoint: "/api/v1/sku/bulk", domain: "admin-dev.nestads.com", count: 12, }, { id: 2, code: 401, message: "Bad Request: Invalid SKU format", method: "POST", timestamp: new Date("2024-01-15T10:34:00Z"), endpoint: "/api/v1/sku/bulk", domain: "admin-dev.nestads.com", count: 8, }, { id: 3, code: 400, message: "Bad Request: Unexpected field 'category'", method: "POST", timestamp: new Date("2024-01-15T10:33:00Z"), endpoint: "/api/v1/sku/bulk", domain: "admin-dev.nestads.com", count: 5, }, { id: 4, code: 400, message: "Bad Request: Missing required field 'price'", method: "POST", timestamp: new Date("2024-01-15T10:32:00Z"), endpoint: "/api/v1/sku/bulk", domain: "admin-dev.nestads.com", count: 15, }, { id: 5, code: 422, message: "Validation Error: Invalid enum value", method: "POST", timestamp: new Date("2024-01-15T10:31:00Z"), endpoint: "/api/v1/sku/bulk", domain: "admin-dev.nestads.com", count: 3, }, { id: 6, code: 400, message: "Bad Request: Missing required field 'warehouse_code'", method: "POST", timestamp: new Date("2024-01-15T10:30:00Z"), endpoint: "/api/v1/sku/bulk", domain: "admin-dev.nestads.com", count: 22, }, ] export default function ErrorReportPage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCodeFilter, setSelectedCodeFilter] = useState(null) const [selectedMethodFilter, setSelectedMethodFilter] = useState(null) const filteredErrors = useMemo(() => { return mockErrors.filter((error) => { const matchesSearch = error.message.toLowerCase().includes(searchQuery.toLowerCase()) const matchesCode = selectedCodeFilter === null || error.code === selectedCodeFilter const matchesMethod = selectedMethodFilter === null || error.method === selectedMethodFilter return matchesSearch && matchesCode && matchesMethod }) }, [searchQuery, selectedCodeFilter, selectedMethodFilter]) const totalErrors = mockErrors.length const firstErrorTime = mockErrors[mockErrors.length - 1].timestamp const lastErrorTime = mockErrors[0].timestamp // Get unique error codes and methods for filter options const uniqueCodes = Array.from(new Set(mockErrors.map((e) => e.code))).sort() const uniqueMethods = Array.from(new Set(mockErrors.map((e) => e.method))) const clearFilters = () => { setSearchQuery("") setSelectedCodeFilter(null) setSelectedMethodFilter(null) } const hasActiveFilters = searchQuery || selectedCodeFilter !== null || selectedMethodFilter !== null return (

{/* Back Button */} {/* Header */}

Error Report

{totalErrors} errors found for this API endpoint

Request Information

Domain

{mockRequestInfo.domain}

Internal From

{mockRequestInfo.internalFrom}

Triggered From

{mockRequestInfo.triggeredFrom}

API URL

{mockRequestInfo.apiUrl}

First Triggered

{firstErrorTime.toLocaleString()}

Last Updated

{lastErrorTime.toLocaleString()}

setSearchQuery(e.target.value)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-border bg-muted/30 text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0" />

Error Code

Method

{hasActiveFilters && (

)}

{hasActiveFilters && (

Showing {filteredErrors.length} of {totalErrors} errors

)}

0 ? filteredErrors : mockErrors} />

) } [V0_FILE]typescriptreact:file="app/error/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --brand: oklch(75% 0.183 55.934); } .dark { /* Updated to match Vercel's dark theme colors */ --background: oklch(0.08 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.16 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.16 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.16 0 0); --accent-foreground: oklch(0.95 0 0); --destructive: oklch(0.55 0.15 15); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.2 0 0); --input: oklch(0.16 0 0); --ring: oklch(0.4 0 0); --chart-1: oklch(0.6 0.2 240); --chart-2: oklch(0.7 0.15 160); --chart-3: oklch(0.75 0.18 70); --chart-4: oklch(0.6 0.25 300); --chart-5: oklch(0.65 0.2 20); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.6 0.2 240); --sidebar-primary-foreground: oklch(0.95 0 0); --sidebar-accent: oklch(0.16 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.4 0 0); --brand: oklch(75% 0.183 55.934); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-brand: var(--brand); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Add infinite sliding animation for companies carousel */ @keyframes slide-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .slide-animation { animation: slide-left 20s linear infinite; } } [V0_FILE]typescriptreact:file="app/sdk/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Code2, Download, BookOpen, ArrowRight, Smartphone, Globe, Apple } from "lucide-react" import Link from "next/link" export default function SDKGuidePage() { const [activeTab, setActiveTab] = useState("web") const platforms = [ { id: "web", name: "Web", icon: Globe, description: "JavaScript/TypeScript SDK for browser and Node.js", features: ["TypeScript support", "Real-time tracking", "Automatic error reporting", "Performance monitoring"], codeExample: `import { NestadsSDK } from '@nestads/web'; const sdk = new NestadsSDK({ apiKey: 'your-api-key', domain: 'api.example.com' }); // Track API calls sdk.trackRequest({ method: 'GET', endpoint: '/api/users', status: 200 });`, installCommand: "npm install @nestads/web", }, { id: "ios", name: "iOS", icon: Apple, description: "Native Swift SDK for iOS applications", features: ["Swift 5.5+", "Async/await support", "Background tracking", "Battery efficient"], codeExample: `import NestadsSDK let sdk = NestadsSDK( apiKey: "your-api-key", domain: "api.example.com" ) // Track requests sdk.trackRequest( method: "GET", endpoint: "/api/data", status: 200 )`, installCommand: "pod install Nestads", }, { id: "android", name: "Android", icon: Smartphone, description: "Native Kotlin SDK for Android applications", features: ["Kotlin-first design", "Coroutines support", "Background tracking", "Memory efficient"], codeExample: `import com.nestads.sdk.NestadsSDK val sdk = NestadsSDK.Builder() .apiKey("your-api-key") .domain("api.example.com") .build() // Track requests sdk.trackRequest( method = "GET", endpoint = "/api/data", status = 200 )`, installCommand: 'implementation "com.nestads:sdk:1.0.0"', }, ] const currentPlatform = platforms.find((p) => p.id === activeTab) const Icon = currentPlatform?.icon || Globe return (

{/* Navigation */}

Nestads SDK

{/* Hero Section */}

SDK Integration Guides

Integrate Nestads API tracking into your application in minutes. Choose your platform and follow our comprehensive guides.

{/* Trusted Companies Section */}

Trusted by fast-growing companies worldwide

{[ { name: "Company 1", width: "w-24" }, { name: "Company 2", width: "w-28" }, { name: "Company 3", width: "w-24" }, { name: "Company 4", width: "w-32" }, { name: "Company 5", width: "w-24" }, { name: "Company 6", width: "w-28" }, { name: "Company 1", width: "w-24" }, { name: "Company 2", width: "w-28" }, { name: "Company 3", width: "w-24" }, { name: "Company 4", width: "w-32" }, { name: "Company 5", width: "w-24" }, { name: "Company 6", width: "w-28" }, ].map((company, idx) => (

{company.name}

))}

{/* Platform Tabs */}

Choose Your Platform

Web iOS Android {platforms.map((platform) => (

{/* Left: Features and Info */}

{platform.name}

{platform.description}

{/* Install Command */} Installation

{platform.installCommand}

{/* Features */}

Key Features

{feature}

{/* CTA Buttons */}

{/* Right: Code Example */} Quick Start Example

                        
                          {platform.codeExample}

))}

{/* Features Section */}

Why Choose Nestads SDK

{[ { title: "Easy Integration", description: "Get up and running in minutes with our simple and intuitive APIs", }, { title: "Comprehensive Tracking", description: "Track all your API calls, errors, and performance metrics automatically", }, { title: "Production Ready", description: "Battle-tested SDKs used by thousands of developers in production", }, ].map((feature, idx) => (

{feature.title}

{feature.description}

))}

{/* CTA Section */}

Ready to Get Started?

Choose your platform above and follow the integration guide to start tracking your API usage today.

) }