### Development Workflow Commands (Shell)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Provides essential commands for managing the Next.js project, including installing dependencies, starting the development server, building for production, and running linters. Uses pnpm as the package manager.

```bash
# Install dependencies
pnpm install

# Start development server at http://localhost:3000
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linter
pnpm lint
```

--------------------------------

### JavaScript: Next.js Build Configuration

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Configures Next.js for static deployment, disabling image optimization and enabling TypeScript checks during the build process. This setup ensures efficient static site generation and robust TypeScript integration.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
```

--------------------------------

### Vercel Deployment Configuration (Bash)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Details the automatic deployment process via Vercel integration. It outlines how the project deploys on Git push and provides information on setting environment variables within the Vercel dashboard.

```bash
# Project automatically deploys on git push via Vercel integration
# Deployment URL: https://vercel.com/maraths1-4773s-projects/v0-derma-vision-xr-landing-page
# Continue building: https://v0.app/chat/nPAzxe2rqwA

# Environment variables (if needed)
# Set in Vercel Dashboard under Project Settings > Environment Variables
# Example:
# NEXT_PUBLIC_API_URL=https://api.example.com
# NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id
```

--------------------------------

### Project Dependencies (package.json)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Defines the project's dependencies, including UI component libraries, development tools, and Next.js. This file manages all packages required for the application's frontend and build processes.

```json
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "latest",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.3",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "recharts": "2.15.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
```

--------------------------------

### JSON: TypeScript Configuration

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Sets up strict TypeScript compilation with ES6 target, DOM manipulation support, and module resolution via bundler. It enables isolated modules, JSX preservation, incremental builds, and defines path aliases for cleaner imports.

```json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```

--------------------------------

### Root Layout Configuration in Next.js (TypeScript/TSX)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Defines the root HTML structure, metadata, and global providers for the entire Next.js application. It includes font loading, CSS imports, metadata configuration for SEO, and Vercel Analytics integration.

```tsx
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const geist = Geist({ subsets: ["latin"] })
const geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "DermaVisionXR - AI-Powered Skin Analysis in Spatial Computing",
  description: "Advanced AI-powered dermatological screening on Apple Vision Pro. Instant camera-based skin lesion capture and analysis with real-time diagnostic insights.",
  generator: "v0.app",
  icons: {
    icon: [
      { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)" },
      { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)" },
      { url: "/icon.svg", type: "image/svg+xml" }
    ],
    apple: "/apple-icon.png"
  }
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
```

--------------------------------

### Theme Provider Component for Next-Themes (React/TypeScript)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

A client-side wrapper component that enables theme switching functionality (dark/light mode) using the `next-themes` library. It's typically used in the main layout file to provide theme context throughout the application.

```tsx
'use client'

import * as React from 'react'
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

// Usage in layout
import { ThemeProvider } from '@/components/theme-provider'

export default function Layout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      {children}
    </ThemeProvider>
  )
}
```

--------------------------------

### CSS: Custom Medical-Grade Dark Theme Configuration

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Defines a custom dark theme using OKLCH color space for precise color control and accessibility. It imports Tailwind CSS and tw-animate-css, defines a custom dark variant, and sets CSS variables for background, foreground, primary, secondary, and other UI elements.

```css
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Custom medical-grade theme colors for DermaVisionXR */
  --background: oklch(0.12 0.01 240);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.18 0.015 240);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.18 0.015 240);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.65 0.19 240);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.22 0.015 240);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.35 0.02 240);
  --muted-foreground: oklch(0.65 0.01 240);
  --accent: oklch(0.65 0.19 240);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.25 0.015 240);
  --input: oklch(0.25 0.015 240);
  --ring: oklch(0.65 0.19 240);
  --warning: oklch(0.7 0.2 40);
  --radius: 0.75rem;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    scroll-behavior: smooth;
  }
}
```

--------------------------------

### Hero Section with Navigation and Animated Elements (React/TypeScript)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

This React and TypeScript component renders the main hero section of the DermaVisionXR landing page. It includes a responsive navigation bar with a logo and a call-to-action button, followed by a prominent title, descriptive text, and action buttons. Animated elements like a pulsing badge and trust indicators are also integrated.

```tsx
export default function Page() {
  return (
    <main className="min-h-screen">
      <section className="relative overflow-hidden border-b border-border">
        {/* Background grid pattern */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:4rem_4rem]" />

        <div className="relative max-w-7xl mx-auto px-6 lg:px-8 py-24 lg:py-32">
          {/* Navigation */}
          <nav className="flex items-center justify-between mb-20">
            <div className="flex items-center gap-2">
              <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
                <svg className="w-6 h-6 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
              </div>
              <span className="text-xl font-semibold">DermaVisionXR</span>
            </div>
            <button className="px-6 py-2.5 bg-card hover:bg-secondary rounded-lg text-sm font-medium transition-colors border border-border">
              Request Access
            </button>
          </nav>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              {/* Animated badge with pulsing indicator */}
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm mb-6">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
                </span>
                Powered by Apple Vision Pro
              </div>

              <h1 className="text-5xl lg:text-6xl font-bold mb-6 leading-tight text-balance">
                AI-Powered Skin Analysis in Spatial Computing
              </h1>

              <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
                DermaVisionXR brings advanced dermatological screening to spatial computing.
                Instant camera-based analysis with AI-driven insights from 10,000+ verified medical cases.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <button className="px-8 py-4 bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg font-medium transition-colors text-lg">
                  Experience the Future
                </button>
                <button className="px-8 py-4 bg-card hover:bg-secondary text-foreground rounded-lg font-medium transition-colors border border-border text-lg">
                  Watch Demo
                </button>
              </div>

              {/* Trust indicators with verification icons */}
              <div className="mt-10 flex flex-wrap gap-6 text-sm text-muted-foreground">
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span>HAM10000 Dataset</span>
                </div>
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
                  </svg>
                </div>
              </div>
            </div>
            {/* Placeholder for graphical elements or 3D models */}
            <div className="lg:flex lg:justify-end">
              {/* This is where visual elements for spatial computing would go */}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
```

--------------------------------

### UI Elements: Medical Cases and Real-time Analysis

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

Displays key performance indicators for the DermaVisionXR landing page, including the total number of medical cases and a real-time analysis status. These elements use SVG icons for visual representation and span elements for text display, styled with Tailwind CSS classes.

```jsx
<div>
                  <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span>10,015 Medical Cases</span>
                </div>
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span>Real-time Analysis</span>
                </div>
```

--------------------------------

### Class Name Utility for Tailwind CSS Merging (TypeScript)

Source: https://context7.com/sanjaymarathe/v0-derma-vision-xr-landing-page/llms.txt

A utility function to efficiently merge Tailwind CSS class names, supporting conditional logic. It uses `clsx` for conditional classes and `twMerge` to resolve conflicts, ensuring clean and optimized class application in components.

```typescript
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Usage example in component
import { cn } from '@/lib/utils'

function Button({ className, variant = "default", ...props }) {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded-lg transition-colors",
        variant === "primary" && "bg-primary text-primary-foreground hover:bg-primary/90",
        variant === "secondary" && "bg-card hover:bg-secondary border border-border",
        className
      )}
      {...props}
    />
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.