[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Archive *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/shared-8867s-projects/v0-archive) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/7OBKdWwIbzR) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/shared-8867s-projects/v0-archive](https://vercel.com/shared-8867s-projects/v0-archive)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/7OBKdWwIbzR](https://v0.app/chat/projects/7OBKdWwIbzR)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @font-face { font-family: 'Sentient'; src: url('/Sentient-Extralight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Sentient'; src: url('/Sentient-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } :root { --background: #000000; --foreground: #ffffff; --primary: #FFC700; --primary-foreground: #ffffff; --border: #424242; } @utility container { margin-inline: auto; padding-inline: 1rem; @media (width >= 768px) { padding-inline: 2rem; } @media (width >= 1280px) { padding-inline: 3rem; } } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-border: var(--border); --font-mono: var(--font-geist-mono); --font-sentient: 'Sentient', sans-serif; --shadow-glow: 0 0 8px 2px var(--tw-shadow-color); } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } #webgl { top: 0; left: 0; position: fixed; height: 100svh; width: 100%; } #webgl canvas { width: 100%; height: 100%; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next"; import { Geist_Mono } from "next/font/google"; import localFont from "next/font/local"; import "./globals.css"; import { Header } from "@/components/header"; const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Skal Ventures", description: "Investment strategies that outperform the market", generator: 'v0.app' }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (

{children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" 'use client' import { Hero } from "@/components/hero"; import { Leva } from "leva"; export default function Home() { return ( <> ); } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/gl/index.tsx" import { Perf } from "r3f-perf"; import { Effects } from "@react-three/drei"; import { Canvas } from "@react-three/fiber"; import { useControls } from "leva"; import { Particles } from "./particles"; import { VignetteShader } from "./shaders/vignetteShader"; export const GL = ({ hovering }: { hovering: boolean }) => { const { speed, focus, aperture, size, noiseScale, noiseIntensity, timeScale, pointSize, opacity, planeScale, vignetteDarkness, vignetteOffset, useManualTime, manualTime, } = useControls("Particle System", { speed: { value: 1.0, min: 0, max: 2, step: 0.01 }, noiseScale: { value: 0.6, min: 0.1, max: 5, step: 0.1 }, noiseIntensity: { value: 0.52, min: 0, max: 2, step: 0.01 }, timeScale: { value: 1, min: 0, max: 2, step: 0.01 }, focus: { value: 3.8, min: 0.1, max: 20, step: 0.1 }, aperture: { value: 1.79, min: 0, max: 2, step: 0.01 }, pointSize: { value: 10.0, min: 0.1, max: 10, step: 0.1 }, opacity: { value: 0.8, min: 0, max: 1, step: 0.01 }, planeScale: { value: 10.0, min: 0.1, max: 10, step: 0.1 }, size: { value: 512, options: [256, 512, 1024], }, showDebugPlane: { value: false }, vignetteDarkness: { value: 1.5, min: 0, max: 2, step: 0.1 }, vignetteOffset: { value: 0.4, min: 0, max: 2, step: 0.1 }, useManualTime: { value: false }, manualTime: { value: 0, min: 0, max: 50, step: 0.01 }, }); return (

); }; [V0_FILE]typescriptreact:file="components/gl/particles.tsx" import * as THREE from "three"; import { useMemo, useState, useRef, useEffect } from "react"; import { createPortal, useFrame } from "@react-three/fiber"; import { useFBO } from "@react-three/drei"; import { DofPointsMaterial } from "./shaders/pointMaterial"; import { SimulationMaterial } from "./shaders/simulationMaterial"; import * as easing from "maath/easing"; export function Particles({ speed, aperture, focus, size = 512, noiseScale = 1.0, noiseIntensity = 0.5, timeScale = 0.5, pointSize = 2.0, opacity = 1.0, planeScale = 1.0, useManualTime = false, manualTime = 0, introspect = false, ...props }: { speed: number; // fov: number aperture: number; focus: number; size: number; noiseScale?: number; noiseIntensity?: number; timeScale?: number; pointSize?: number; opacity?: number; planeScale?: number; useManualTime?: boolean; manualTime?: number; introspect?: boolean; }) { // Reveal animation state const revealStartTime = useRef(null); const [isRevealing, setIsRevealing] = useState(true); const revealDuration = 3.5; // seconds // Create simulation material with scale parameter const simulationMaterial = useMemo(() => { return new SimulationMaterial(planeScale); }, [planeScale]); const target = useFBO(size, size, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType, }); const dofPointsMaterial = useMemo(() => { const m = new DofPointsMaterial(); m.uniforms.positions.value = target.texture; m.uniforms.initialPositions.value = simulationMaterial.uniforms.positions.value; return m; }, [simulationMaterial]); const [scene] = useState(() => new THREE.Scene()); const [camera] = useState( () => new THREE.OrthographicCamera(-1, 1, 1, -1, 1 / Math.pow(2, 53), 1) ); const [positions] = useState( () => new Float32Array([ -1, -1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, 1, 1, 0, -1, 1, 0, ]) ); const [uvs] = useState( () => new Float32Array([0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0]) ); const particles = useMemo(() => { const length = size * size; const particles = new Float32Array(length * 3); for (let i = 0; i < length; i++) { const i3 = i * 3; particles[i3 + 0] = (i % size) / size; particles[i3 + 1] = i / size / size; } return particles; }, [size]); useFrame((state, delta) => { if (!dofPointsMaterial || !simulationMaterial) return; state.gl.setRenderTarget(target); state.gl.clear(); // @ts-ignore state.gl.render(scene, camera); state.gl.setRenderTarget(null); // Use manual time if enabled, otherwise use elapsed time const currentTime = useManualTime ? manualTime : state.clock.elapsedTime; // Initialize reveal start time on first frame if (revealStartTime.current === null) { revealStartTime.current = currentTime; } // Calculate reveal progress const revealElapsed = currentTime - revealStartTime.current; const revealProgress = Math.min(revealElapsed / revealDuration, 1.0); // Ease out the reveal animation const easedProgress = 1 - Math.pow(1 - revealProgress, 3); // Map progress to reveal factor (0 = fully hidden, higher values = more revealed) // We want to start from center (0) and expand outward (higher values) const revealFactor = easedProgress * 4.0; // Doubled the radius for larger coverage if (revealProgress >= 1.0 && isRevealing) { setIsRevealing(false); } dofPointsMaterial.uniforms.uTime.value = currentTime; dofPointsMaterial.uniforms.uFocus.value = focus; dofPointsMaterial.uniforms.uBlur.value = aperture; easing.damp( dofPointsMaterial.uniforms.uTransition, "value", introspect ? 1.0 : 0.0, introspect ? 0.35 : 0.2, delta ); simulationMaterial.uniforms.uTime.value = currentTime; simulationMaterial.uniforms.uNoiseScale.value = noiseScale; simulationMaterial.uniforms.uNoiseIntensity.value = noiseIntensity; simulationMaterial.uniforms.uTimeScale.value = timeScale * speed; // Update point material uniforms dofPointsMaterial.uniforms.uPointSize.value = pointSize; dofPointsMaterial.uniforms.uOpacity.value = opacity; dofPointsMaterial.uniforms.uRevealFactor.value = revealFactor; dofPointsMaterial.uniforms.uRevealProgress.value = easedProgress; }); return ( <> {createPortal( // @ts-ignore , // @ts-ignore scene )} {/* @ts-ignore */} {/* Plane showing simulation texture */} {/* */} ); } [V0_FILE]typescript:file="components/gl/shaders/pointMaterial.ts" import * as THREE from 'three' import { periodicNoiseGLSL } from './utils' export class DofPointsMaterial extends THREE.ShaderMaterial { constructor() { super({ vertexShader: /* glsl */ ` uniform sampler2D positions; uniform sampler2D initialPositions; uniform float uTime; uniform float uFocus; uniform float uFov; uniform float uBlur; uniform float uPointSize; varying float vDistance; varying float vPosY; varying vec3 vWorldPosition; varying vec3 vInitialPosition; void main() { vec3 pos = texture2D(positions, position.xy).xyz; vec3 initialPos = texture2D(initialPositions, position.xy).xyz; vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0); gl_Position = projectionMatrix * mvPosition; vDistance = abs(uFocus - -mvPosition.z); vPosY = pos.y; vWorldPosition = pos; vInitialPosition = initialPos; gl_PointSize = max(vDistance * uBlur * uPointSize, 3.0); }`, fragmentShader: /* glsl */ ` uniform float uOpacity; uniform float uRevealFactor; uniform float uRevealProgress; uniform float uTime; varying float vDistance; varying float vPosY; varying vec3 vWorldPosition; varying vec3 vInitialPosition; uniform float uTransition; ${periodicNoiseGLSL} // Sparkle noise function for subtle brightness variations float sparkleNoise(vec3 seed, float time) { // Use initial position as seed for consistent per-particle variation float hash = sin(seed.x * 127.1 + seed.y * 311.7 + seed.z * 74.7) * 43758.5453; hash = fract(hash); // Slow time variation (time / 10) for gentle sparkle effect float slowTime = time * 1.0; // Create sparkle pattern using multiple sine waves with the hash as phase offset float sparkle = 0.0; sparkle += sin(slowTime + hash * 6.28318) * 0.5; sparkle += sin(slowTime * 1.7 + hash * 12.56636) * 0.3; sparkle += sin(slowTime * 0.8 + hash * 18.84954) * 0.2; // Create a different noise pattern to reduce sparkle frequency // Using different hash for uncorrelated pattern float hash2 = sin(seed.x * 113.5 + seed.y * 271.9 + seed.z * 97.3) * 37849.3241; hash2 = fract(hash2); // Static spatial mask to create sparse sparkles (no time dependency) float sparkleMask = sin(hash2 * 6.28318) * 0.7; sparkleMask += sin(hash2 * 12.56636) * 0.3; // Only allow sparkles when mask is positive (reduces frequency by ~70%) if (sparkleMask < 0.3) { sparkle *= 0.05; // Heavily dampen sparkle when mask is low } // Map sparkle to brightness with smooth exponential emphasis on high peaks only float normalizedSparkle = (sparkle + 1.0) * 0.5; // Convert [-1,1] to [0,1] // Create smooth curve: linear for low values, exponential for high values // Using pow(x, n) where n > 1 creates a curve that's nearly linear at low end, exponential at high end float smoothCurve = pow(normalizedSparkle, 4.0); // High exponent = dramatic high-end emphasis // Blend between linear (for low values) and exponential (for high values) float blendFactor = normalizedSparkle * normalizedSparkle; // Smooth transition weight float finalBrightness = mix(normalizedSparkle, smoothCurve, blendFactor); // Map to brightness range [0.7, 2.0] - conservative range with exponential peaks return 0.7 + finalBrightness * 1.3; } float sdCircle(vec2 p, float r) { return length(p) - r; } void main() { vec2 cxy = 2.0 * gl_PointCoord - 1.0; // Define triangle vertices (equilateral triangle) vec2 p0 = vec2(0.0, -0.8); // top tip (flipped Y) vec2 p1 = vec2(-0.7, 0.4); // bottom left (flipped Y) vec2 p2 = vec2(0.7, 0.4); // bottom right (flipped Y) float sdf = sdCircle(cxy, 0.5); if (sdf > 0.0) discard; // Calculate distance from center for reveal effect float distanceFromCenter = length(vWorldPosition.xz); // Add noise to the reveal threshold for organic edge float noiseValue = periodicNoise(vInitialPosition * 4.0, 0.0); float revealThreshold = uRevealFactor + noiseValue * 0.3; // Create reveal mask based on distance from center (inverted for proper reveal) float revealMask = 1.0 - smoothstep(revealThreshold - 0.2, revealThreshold + 0.1, distanceFromCenter); // Calculate sparkle brightness multiplier float sparkleBrightness = sparkleNoise(vInitialPosition, uTime); float alpha = (1.04 - clamp(vDistance, 0.0, 1.0)) * clamp(smoothstep(-0.5, 0.25, vPosY), 0.0, 1.0) * uOpacity * revealMask * uRevealProgress * sparkleBrightness; gl_FragColor = vec4(vec3(1.0), mix(alpha, sparkleBrightness - 1.1, uTransition)); }`, uniforms: { positions: { value: null }, initialPositions: { value: null }, uTime: { value: 0 }, uFocus: { value: 5.1 }, uFov: { value: 50 }, uBlur: { value: 30 }, uTransition: { value: 0.0 }, uPointSize: { value: 2.0 }, uOpacity: { value: 1.0 }, uRevealFactor: { value: 0.0 }, uRevealProgress: { value: 0.0 } }, transparent: true, // blending: THREE.AdditiveBlending, depthWrite: false }) } } [V0_FILE]typescript:file="components/gl/shaders/simulationMaterial.ts" import * as THREE from 'three' import { periodicNoiseGLSL } from './utils' // Function to generate equally distributed points on a plane function getPlane(count: number, components: number, size: number = 512, scale: number = 1.0) { const length = count * components const data = new Float32Array(length) for (let i = 0; i < count; i++) { const i4 = i * components // Calculate grid position const x = (i % size) / (size - 1) // Normalize to [0, 1] const z = Math.floor(i / size) / (size - 1) // Normalize to [0, 1] // Convert to centered coordinates [-0.5, 0.5] and apply scale data[i4 + 0] = (x - 0.5) * 2 * scale // X position: scaled range data[i4 + 1] = 0 // Y position: flat plane at y=0 data[i4 + 2] = (z - 0.5) * 2 * scale // Z position: scaled range data[i4 + 3] = 1.0 // W component (for RGBA texture) } return data } export class SimulationMaterial extends THREE.ShaderMaterial { constructor(scale: number = 10.0) { const positionsTexture = new THREE.DataTexture(getPlane(512 * 512, 4, 512, scale), 512, 512, THREE.RGBAFormat, THREE.FloatType) positionsTexture.needsUpdate = true super({ vertexShader: /* glsl */`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: /* glsl */`uniform sampler2D positions; uniform float uTime; uniform float uNoiseScale; uniform float uNoiseIntensity; uniform float uTimeScale; uniform float uLoopPeriod; varying vec2 vUv; ${periodicNoiseGLSL} void main() { // Get the original particle position vec3 originalPos = texture2D(positions, vUv).rgb; // Use continuous time that naturally loops through sine/cosine periodicity float continuousTime = uTime * uTimeScale * (6.28318530718 / uLoopPeriod); // float continuousTime = 0.0; // Scale position for noise input vec3 noiseInput = originalPos * uNoiseScale; // Generate periodic displacement for each axis using different phase offsets float displacementX = periodicNoise(noiseInput + vec3(0.0, 0.0, 0.0), continuousTime); float displacementY = periodicNoise(noiseInput + vec3(50.0, 0.0, 0.0), continuousTime + 2.094); // +120° float displacementZ = periodicNoise(noiseInput + vec3(0.0, 50.0, 0.0), continuousTime + 4.188); // +240° // Apply distortion to original position vec3 distortion = vec3(displacementX, displacementY, displacementZ) * uNoiseIntensity; vec3 finalPos = originalPos + distortion; gl_FragColor = vec4(finalPos, 1.0); }`, uniforms: { positions: { value: positionsTexture }, uTime: { value: 0 }, uNoiseScale: { value: 1.0 }, uNoiseIntensity: { value: 0.5 }, uTimeScale: { value: 1 }, uLoopPeriod: { value: 24.0 } } }) } } [V0_FILE]typescript:file="components/gl/shaders/utils.ts" // Shader utility functions export const periodicNoiseGLSL = /* glsl */ ` // Periodic noise function using sine and cosine waves float periodicNoise(vec3 p, float time) { // Create multiple frequency components for more complex movement // All time multipliers are integer values to ensure perfect 2π periodicity float noise = 0.0; // Primary wave - period = 2π noise += sin(p.x * 2.0 + time) * cos(p.z * 1.5 + time); // Secondary wave - period = π (time * 2) noise += sin(p.x * 3.2 + time * 2.0) * cos(p.z * 2.1 + time) * 0.6; // Tertiary wave - period = 2π/3 (time * 3) noise += sin(p.x * 1.7 + time) * cos(p.z * 2.8 + time * 3.0) * 0.4; // Cross-frequency interaction - period = π (time * 2) noise += sin(p.x * p.z * 0.5 + time * 2.0) * 0.3; return noise * 0.3; // Scale down the result } `; [V0_FILE]typescript:file="components/gl/shaders/vignetteShader.ts" export const VignetteShader = { uniforms: { tDiffuse: { value: null }, // provided by ShaderPass darkness: { value: 1.0 }, // strength of the vignette effect offset: { value: 1.0 }, // vignette offset }, vertexShader: /* glsl */` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } `, fragmentShader: /* glsl */` uniform sampler2D tDiffuse; uniform float darkness; uniform float offset; varying vec2 vUv; void main() { vec4 texel = texture2D(tDiffuse, vUv); // Calculate distance from center vec2 uv = (vUv - 0.5) * 2.0; float dist = dot(uv, uv); // Create vignette effect float vignette = 1.0 - smoothstep(offset, offset + darkness, dist); gl_FragColor = vec4(texel.rgb * vignette, texel.a); } ` }; [V0_FILE]typescriptreact:file="components/header.tsx" import Link from "next/link"; import { Logo } from "./logo"; import { MobileMenu } from "./mobile-menu"; export const Header = () => { return (

); }; [V0_FILE]typescriptreact:file="components/hero.tsx" "use client"; import Link from "next/link"; import { GL } from "./gl"; import { Pill } from "./pill"; import { Button } from "./ui/button"; import { useState } from "react"; export function Hero() { const [hovering, setHovering] = useState(false); return (

BETA RELEASE

Unlock your
future growth

Through perpetual investment strategies that outperform the market

); } [V0_FILE]typescriptreact:file="components/logo.tsx" export const Logo = (props: React.SVGProps) => { return ( ); }; [V0_FILE]typescriptreact:file="components/mobile-menu.tsx" "use client"; import { cn } from "@/lib/utils"; import * as Dialog from "@radix-ui/react-dialog"; import { Menu, X } from "lucide-react"; import Link from "next/link"; import { useState } from "react"; interface MobileMenuProps { className?: string; } export const MobileMenu = ({ className }: MobileMenuProps) => { const [isOpen, setIsOpen] = useState(false); const menuItems = [ { name: "About", href: "#about" }, { name: "Portfolio", href: "#portfolio" }, { name: "Insights", href: "#insights" }, { name: "Contact", href: "#contact" }, ]; const handleLinkClick = () => { setIsOpen(false); }; return (

{ if ( e.target instanceof HTMLElement && e.target.dataset.overlay !== "true" ) { e.preventDefault(); } }} className="fixed top-0 left-0 w-full z-40 py-28 md:py-40" > Menu ); }; [V0_FILE]typescriptreact:file="components/pill.tsx" import { cn } from "@/lib/utils"; import { px } from "./utils"; export const Pill = ({ children, className }: { children: React.ReactNode, className?: string }) => { const polyRoundness = 6 const hypotenuse = polyRoundness * 2 const hypotenuseHalf = polyRoundness / 2 - 1.5 return (

{children}

); }; [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot, Slottable } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { px } from "../utils" const buttonVariants = cva( "inline-flex relative uppercase border font-mono cursor-pointer items-center font-medium has-[>svg]:px-3 justify-center gap-2 whitespace-nowrap font-medium ease-out transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [clip-path:polygon(var(--poly-roundness)_0,calc(100%_-_var(--poly-roundness))_0,100%_0,100%_calc(100%_-_var(--poly-roundness)),calc(100%_-_var(--poly-roundness))_100%,0_100%,0_calc(100%_-_var(--poly-roundness)),0_var(--poly-roundness))]", { variants: { variant: { default: "bg-background border-primary text-primary-foreground [&>[data-border]]:bg-primary [box-shadow:inset_0_0_54px_0px_var(--tw-shadow-color)] shadow-[#EBB800] hover:shadow-[#EBB800]/80", }, size: { default: "h-16 px-6 text-base", sm: "h-14 px-6 text-sm", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant, size, children, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" const polyRoundness = 16 const hypotenuse = polyRoundness * 2 const hypotenuseHalf = polyRoundness / 2 - 1.5 return ( {children} ) } export { Button, buttonVariants } [V0_FILE]typescript:file="components/utils.ts" export const px = (value: number) => `${value}px` [V0_FILE]javascript:file="eslint.config.mjs" import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals", "next/typescript"), { ignores: [ "node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts", ], }, ]; export default eslintConfig; [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="next.config.ts" import type { NextConfig } from "next"; const nextConfig: NextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, }; export default nextConfig; [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@eslint/eslintrc": "latest", "@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": "latest", "@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": "latest", "@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", "@react-three/drei": "latest", "@react-three/fiber": "latest", "@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", "expo": "latest", "expo-asset": "latest", "expo-file-system": "latest", "expo-gl": "latest", "geist": "^1.3.1", "input-otp": "1.4.1", "leva": "latest", "lucide-react": "^0.454.0", "maath": "latest", "next": "15.2.4", "next-themes": "latest", "path": "latest", "r3f-perf": "latest", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-native": "latest", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "three": "latest", "url": "latest", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "@types/three": "^0.180.0", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" const config = { plugins: ["@tailwindcss/postcss"], }; export default config; [V0_FILE]css:file="styles/globals.css" @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.625rem; --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); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.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"] } [V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/OBeuqNFllvzcOxAfozDcmk/app/favicon.ico" [V0_FILE]plaintext:file="public/Sentient-Extralight.woff" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/Fg8usO42TB5JYHzNkhgnEW/public/Sentient-Extralight.woff" [V0_FILE]plaintext:file="public/Sentient-LightItalic.woff" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/gRC2uDePZdC4QIPRJShc_t/public/Sentient-LightItalic.woff" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LnvsTXbDGJ4MXGWJ4V9wUbTiIqQl/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"

About

Tags

Share

About

Tags

Share

More from joyco

More Templates Like This

About

Tags

Share

About

Tags

Share

More from joyco

More Templates Like This