[V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "src/index.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]javascript:file="eslint.config.js" isMerged="true" import js from '@eslint/js'; import globals from 'globals'; import reactHooks from 'eslint-plugin-react-hooks'; import reactRefresh from 'eslint-plugin-react-refresh'; import tseslint from 'typescript-eslint'; export default tseslint.config( { ignores: ['dist'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], '@typescript-eslint/no-unused-vars': 'off', }, } ); [V0_FILE]json:file="package.json" isMerged="true" { "name": "component-forge", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", "format": "prettier --write .", "format:check": "prettier --check ." }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@headless-tree/core": "^1.4.0", "@headless-tree/react": "^1.4.0", "@hookform/resolvers": "^5.2.1", "@react-three/drei": "^10.0.6", "@react-three/fiber": "^9.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "embla-carousel-react": "^8.6.0", "framer-motion": "^12.4.10", "input-otp": "^1.4.2", "lucide-react": "^0.542.0", "next": "^15.5.0", "next-themes": "^0.4.6", "radix-ui": "^1.4.3", "react": "^19.0.0", "react-day-picker": "^9.9.0", "react-dom": "^19.0.0", "react-hook-form": "^7.62.0", "react-resizable-panels": "^3.0.5", "recharts": "2.15.4", "sonner": "^2.0.7", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "three": "^0.175.0", "uuid": "^11.1.0", "vaul": "^1.1.2", "zod": "^4.1.5", "path": "0.12.7", "@vercel/analytics": "1.5.0" }, "devDependencies": { "@eslint/js": "^9.21.0", "@tailwindcss/vite": "^4.0.9", "@types/node": "^22.13.9", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", "prettier": "3.5.3", "tailwindcss": "^4.0.9", "tw-animate-css": "^1.3.7", "typescript": "~5.7.2", "typescript-eslint": "^8.24.1", "vite": "^6.2.0", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="src/components/generated/BillingCycleToggle.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; interface BillingCycleToggleProps { isYearly: boolean; onToggle: (isYearly: boolean) => void; } // @component: BillingCycleToggle export const BillingCycleToggle = ({ isYearly, onToggle }: BillingCycleToggleProps) => { // @return return ; }; [V0_FILE]typescriptreact:file="src/components/generated/DashboardPreview_dupe_1.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { BarChart3, TrendingUp, Users, DollarSign, Activity, Calendar, Settings, Bell } from 'lucide-react'; // @component: DashboardPreview export const DashboardPreview = () => { const chartData = [{ month: 'Jan', value: 65 }, { month: 'Feb', value: 78 }, { month: 'Mar', value: 52 }, { month: 'Apr', value: 84 }, { month: 'May', value: 91 }, { month: 'Jun', value: 76 }] as any[]; const metrics = [{ icon: DollarSign, label: 'Revenue', value: '$124,592', change: '+12.5%', positive: true }, { icon: Users, label: 'Active Users', value: '8,429', change: '+8.2%', positive: true }, { icon: Activity, label: 'Conversion', value: '3.24%', change: '-2.1%', positive: false }, { icon: TrendingUp, label: 'Growth', value: '23.1%', change: '+15.3%', positive: true }] as any[]; // @return return

Analytics Dashboard

Real-time business insights

{metrics.map((metric, index) =>

{metric.change}

{metric.value}

{metric.label}

)}

Revenue Trend

Last 6 months

{chartData.map((item, index) =>

{item.month}

)}

Top Performing

{['Product Analytics', 'User Engagement', 'Sales Funnel'].map((item, index) =>

{item}

{85 - index * 15}%

)}

Recent Activity

{['New user registered', 'Payment processed', 'Report generated'].map((activity, index) =>

{activity}

)}

; }; [V0_FILE]typescriptreact:file="src/components/generated/DashboardPreview_dupe_2.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { BarChart3, TrendingUp, Users, DollarSign, Activity, Calendar, Settings, Bell } from 'lucide-react'; // @component: DashboardPreview export const DashboardPreview = () => { const chartData = [{ month: 'Jan', value: 65 }, { month: 'Feb', value: 78 }, { month: 'Mar', value: 52 }, { month: 'Apr', value: 84 }, { month: 'May', value: 91 }, { month: 'Jun', value: 76 }] as any[]; const metrics = [{ icon: DollarSign, label: 'Revenue', value: '$124,592', change: '+12.5%', positive: true }, { icon: Users, label: 'Active Users', value: '8,429', change: '+8.2%', positive: true }, { icon: Activity, label: 'Conversion', value: '3.24%', change: '-2.1%', positive: false }, { icon: TrendingUp, label: 'Growth', value: '23.1%', change: '+15.3%', positive: true }] as any[]; // @return return

Analytics Dashboard

Real-time business insights

{metrics.map((metric, index) =>

{metric.change}

{metric.value}

{metric.label}

)}

Revenue Trend

Last 6 months

{chartData.map((item, index) =>

{item.month}

)}

Top Performing

{['Product Analytics', 'User Engagement', 'Sales Funnel'].map((item, index) =>

{item}

{85 - index * 15}%

)}

Recent Activity

{['New user registered', 'Payment processed', 'Report generated'].map((activity, index) =>

{activity}

)}

; }; [V0_FILE]typescriptreact:file="src/components/generated/DashboardPreview_dupe_3.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { BarChart3, TrendingUp, Users, DollarSign, Activity, Calendar, Settings, Bell } from 'lucide-react'; // @component: DashboardPreview export const DashboardPreview = () => { const chartData = [{ month: 'Jan', value: 65 }, { month: 'Feb', value: 78 }, { month: 'Mar', value: 52 }, { month: 'Apr', value: 84 }, { month: 'May', value: 91 }, { month: 'Jun', value: 76 }] as any[]; const metrics = [{ icon: DollarSign, label: 'Revenue', value: '$124,592', change: '+12.5%', positive: true }, { icon: Users, label: 'Active Users', value: '8,429', change: '+8.2%', positive: true }, { icon: Activity, label: 'Conversion', value: '3.24%', change: '-2.1%', positive: false }, { icon: TrendingUp, label: 'Growth', value: '23.1%', change: '+15.3%', positive: true }] as any[]; // @return return

Analytics Dashboard

Real-time business insights

{metrics.map((metric, index) =>

{metric.change}

{metric.value}

{metric.label}

)}

Revenue Trend

Last 6 months

{chartData.map((item, index) =>

{item.month}

)}

Top Performing

{['Product Analytics', 'User Engagement', 'Sales Funnel'].map((item, index) =>

{item}

{85 - index * 15}%

)}

Recent Activity

{['New user registered', 'Payment processed', 'Report generated'].map((activity, index) =>

{activity}

)}

; }; [V0_FILE]typescriptreact:file="src/components/generated/DashboardPreview.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { BarChart3, TrendingUp, Users, DollarSign, Activity, Calendar, Settings, Bell } from 'lucide-react'; // @component: DashboardPreview export const DashboardPreview = () => { const chartData = [{ month: 'Jan', value: 65 }, { month: 'Feb', value: 78 }, { month: 'Mar', value: 52 }, { month: 'Apr', value: 84 }, { month: 'May', value: 91 }, { month: 'Jun', value: 76 }] as any[]; const metrics = [{ icon: DollarSign, label: 'Revenue', value: '$124,592', change: '+12.5%', positive: true }, { icon: Users, label: 'Active Users', value: '8,429', change: '+8.2%', positive: true }, { icon: Activity, label: 'Conversion', value: '3.24%', change: '-2.1%', positive: false }, { icon: TrendingUp, label: 'Growth', value: '23.1%', change: '+15.3%', positive: true }] as any[]; // @return return

Analytics Dashboard

Real-time business insights

{metrics.map((metric, index) =>

{metric.change}

{metric.value}

{metric.label}

)}

Revenue Trend

Last 6 months

{chartData.map((item, index) =>

{item.month}

)}

Top Performing

{['Product Analytics', 'User Engagement', 'Sales Funnel'].map((item, index) =>

{item}

{85 - index * 15}%

)}

Recent Activity

{['New user registered', 'Payment processed', 'Report generated'].map((activity, index) =>

{activity}

)}

; }; [V0_FILE]typescriptreact:file="src/components/generated/Footer.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { Logo } from './Logo'; import { NavigationLinks } from './NavigationLinks'; import { SocialMediaLinks } from './SocialMediaLinks'; import { CopyrightText } from './CopyrightText'; // @component: Footer export const Footer = () => { // @return return ; }; [V0_FILE]typescriptreact:file="src/components/generated/HeroWithPeekingDashboard_dupe_1.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { ArrowRight, Play } from 'lucide-react'; import { DashboardPreview } from './DashboardPreview'; // @component: HeroWithPeekingDashboard export const HeroWithPeekingDashboard = () => { // @return return

Transform Your Business
With Intelligent Analytics

Unlock powerful insights and drive growth with our comprehensive dashboard platform. Make data-driven decisions that propel your business forward.

; }; [V0_FILE]typescriptreact:file="src/components/generated/HeroWithPeekingDashboard_dupe_2.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { ArrowRight, Play } from 'lucide-react'; import { DashboardPreview } from './DashboardPreview'; // @component: HeroWithPeekingDashboard export const HeroWithPeekingDashboard = () => { // @return return

Transform Your Business
With Intelligent Analytics

Unlock powerful insights and drive growth with our comprehensive dashboard platform. Make data-driven decisions that propel your business forward.

; }; [V0_FILE]typescriptreact:file="src/components/generated/HeroWithPeekingDashboard_dupe_3.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { ArrowRight, Play } from 'lucide-react'; import { DashboardPreview } from './DashboardPreview'; // @component: HeroWithPeekingDashboard export const HeroWithPeekingDashboard = () => { // @return return

Transform Your Business
With Intelligent Analytics

Unlock powerful insights and drive growth with our comprehensive dashboard platform. Make data-driven decisions that propel your business forward.

; }; [V0_FILE]typescriptreact:file="src/components/generated/HeroWithPeekingDashboard.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { ArrowRight, Play } from 'lucide-react'; import { DashboardPreview } from './DashboardPreview'; // @component: HeroWithPeekingDashboard export const HeroWithPeekingDashboard = () => { // @return return

Transform Your Business
With Intelligent Analytics

Unlock powerful insights and drive growth with our comprehensive dashboard platform. Make data-driven decisions that propel your business forward.

; }; [V0_FILE]typescriptreact:file="src/components/generated/InfiniteTestimonialTicker.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { TestimonialCard } from './TestimonialCard'; interface Testimonial { id: string; quote: string; author: string; title: string; avatar: string; } interface InfiniteTestimonialTickerProps { testimonials: Testimonial[]; } // @component: InfiniteTestimonialTicker export const InfiniteTestimonialTicker = ({ testimonials }: InfiniteTestimonialTickerProps) => { const duplicatedTestimonials = [...testimonials, ...testimonials, ...testimonials]; // @return return

{duplicatedTestimonials.map((testimonial, index) =>

)}

; }; [V0_FILE]typescriptreact:file="src/components/generated/NavigationLinks.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; const navigationItems = [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'Resources', href: '#resources' }, { label: 'Support', href: '#support' }] as any[]; // @component: NavigationLinks export const NavigationLinks = () => { // @return return ; }; [V0_FILE]typescriptreact:file="src/components/generated/PricingCard.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { Check, LucideIcon } from 'lucide-react'; interface Feature { icon: LucideIcon; text: string; } interface PricingCardProps { name: string; description: string; monthlyPrice: number; yearlyPrice: number; features: Feature[]; popular: boolean; isYearly: boolean; index: number; } // @component: PricingCard export const PricingCard = ({ name, description, monthlyPrice, yearlyPrice, features, popular, isYearly, index }: PricingCardProps) => { // @return return {popular &&

{name}

{description}

${isYearly ? Math.floor(yearlyPrice / 12) : monthlyPrice} /month

{isYearly &&

Billed annually (${yearlyPrice}/year)

}

Everything included:

{feature.text}

; }; [V0_FILE]typescriptreact:file="src/components/generated/SocialMediaLinks.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { Twitter, Instagram, Facebook, Youtube, Music, MessageCircle } from 'lucide-react'; const socialMediaItems = [{ icon: Twitter, label: 'Twitter', href: 'https://twitter.com' }, { icon: Instagram, label: 'Instagram', href: 'https://instagram.com' }, { icon: Facebook, label: 'Facebook', href: 'https://facebook.com' }, { icon: Youtube, label: 'YouTube', href: 'https://youtube.com' }, { icon: Music, label: 'TikTok', href: 'https://tiktok.com' }, { icon: MessageCircle, label: 'Discord', href: 'https://discord.com' }] as any[]; // @component: SocialMediaLinks export const SocialMediaLinks = () => { // @return return

{socialMediaItems.map(item => )}

; }; [V0_FILE]typescriptreact:file="src/components/generated/TestimonialCard.tsx" isMerged="true" import React from 'react'; import { motion } from 'framer-motion'; import { Quote } from 'lucide-react'; interface TestimonialCardProps { quote: string; author: string; title: string; avatar: string; } // @component: TestimonialCard export const TestimonialCard = ({ quote, author, title, avatar }: TestimonialCardProps) => { // @return return

"{quote}"

{avatar}

{author}

{title}

; }; [V0_FILE]typescript:file="src/hooks/use-mobile.ts" isMerged="true" import * as React from 'react'; const MOBILE_BREAKPOINT = 768; export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined); React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); }; mql.addEventListener('change', onChange); setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); return () => mql.removeEventListener('change', onChange); }, []); return !!isMobile; } [V0_FILE]typescript:file="src/lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } /** * Ensures light mode is always used by removing the dark class from the document element. * This can be called from any component that needs to ensure light mode. */ export function ensureLightMode() { if (typeof document !== 'undefined') { // Always set dark mode to false document.documentElement.classList.toggle('dark', false); } } /** * Removes any dark mode classes from a className string * @param className The class string to process * @returns The class string with dark mode classes removed */ export function removeDarkClasses(className: string): string { return className .split(' ') .filter(cls => !cls.startsWith('dark:')) .join(' '); } [V0_FILE]typescript:file="src/settings/theme.ts" isMerged="true" import { Theme, Container } from './types'; const injectedTheme: string = '%INJECTED_THEME%'; const injectedContainer: string = '%INJECTED_CONTAINER%'; let theme: Theme = 'light'; let container: Container = 'none'; if (injectedTheme === 'light' || injectedTheme === 'dark') { theme = injectedTheme; } if (injectedContainer === 'centered' || injectedContainer === 'none') { container = injectedContainer; } export default { theme, container, }; [V0_FILE]typescript:file="src/settings/types.d.ts" isMerged="true" export type Theme = 'light' | 'dark'; export type Container = 'centered' | 'none'; [V0_FILE]typescript:file="src/vite-env.d.ts" isMerged="true" /// [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import App from "../src/App" export default function Page() { return } [V0_FILE]json:file="tsconfig.app.json" isEdit="true" isMerged="true" { "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": false, "noUnusedParameters": false, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true, "noImplicitAny": false, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src"] } [V0_FILE]json:file="tsconfig.node.json" isEdit="true" isMerged="true" { "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "strict": true, "noUnusedLocals": false, "noUnusedParameters": false, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, "include": ["vite.config.ts"] } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { Plus_Jakarta_Sans, Geist_Mono } from "next/font/google" // Initialize fonts const _plusJakartaSans = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["200", "300", "400", "500", "600", "700", "800"], }) const _geistMono = Geist_Mono({ subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="src/components/generated/FeaturesGrid.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { Brain, Calendar, Zap, Heart, Moon, Sparkles } from "lucide-react" type FeatureCardProps = { icon: React.ReactNode title: string description: string } const FeatureCard = ({ icon, title, description }: FeatureCardProps) => { return (

{icon}

{title}

{description}

) } type FeaturesGridProps = { className?: string } // @component: FeaturesGrid export const FeaturesGrid = ({ className = "" }: FeaturesGridProps) => { const features = [ { icon: , title: "Daily Intentions", description: "Start each day by choosing what truly matters", }, { icon: , title: "Energy-Based Planning", description: "Plan your work around your energy, not just time", }, { icon: , title: "Focus Sessions", description: "Deep work blocks with mindful transitions", }, { icon: , title: "Balance Reminders", description: "Gentle nudges toward rest and reflection", }, { icon: , title: "Evening Reflection", description: "End your day with gratitude, not exhaustion", }, { icon: , title: "Calm Interface", description: "Uncluttered design that respects your attention", }, ] as any[] // @return return (

Discover Nebra

Every element designed to help you work with intention and live with balance.

{features.map((feature, index) => ( ))}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; /* Removed @import 'tw-animate-css' as it causes PostCSS plugin errors in browser build */ @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); /* Updated primary to Deep Nebra Indigo #5B4BFF */ --primary: oklch(0.55 0.25 275); --primary-foreground: oklch(1 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); /* Updated accent to Electric Violet #9B8FFF */ --accent: oklch(0.7 0.2 275); --accent-foreground: oklch(1 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); /* Updated sidebar primary to match new primary color */ --sidebar-primary: oklch(0.55 0.25 275); --sidebar-primary-foreground: oklch(1 0 0); /* Updated sidebar accent to match new accent color */ --sidebar-accent: oklch(0.7 0.2 275); --sidebar-accent-foreground: oklch(1 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); /* Updated dark mode primary to Deep Nebra Indigo */ --primary: oklch(0.6 0.25 275); --primary-foreground: oklch(1 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); /* Updated dark mode accent to Electric Violet */ --accent: oklch(0.75 0.2 275); --accent-foreground: oklch(0.145 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); /* Updated dark mode sidebar colors to match new brand colors */ --sidebar-primary: oklch(0.6 0.25 275); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.75 0.2 275); --sidebar-accent-foreground: oklch(0.145 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; /* Added Plus Jakarta Sans for headings */ --font-serif: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback"; --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; } /* Apply Plus Jakarta Sans with specific sizes and weights to all headings */ h1 { @apply font-sans text-6xl font-semibold; } h2 { @apply font-sans text-5xl font-medium; } /* Reduced h3 from text-4xl to text-3xl and changed from font-medium to font-normal */ h3 { @apply font-sans text-3xl font-normal; } /* Reduced h4 from text-3xl to text-2xl and changed from font-medium to font-normal */ h4 { @apply font-sans text-2xl font-normal; } /* Reduced h5 from text-2xl to text-xl and changed from font-medium to font-normal */ h5 { @apply font-sans text-xl font-normal; } /* Reduced h6 from text-xl to text-lg and changed from font-medium to font-normal */ h6 { @apply font-sans text-lg font-normal; } } [V0_FILE]png:file="public/images/brain-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%2053-z4VsmTmd48djHWuyqa9QWyY4y1kBaZ.png" isMerged="true" [V0_FILE]png:file="public/images/heart-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%2055-Y3cjBhIEgSliOpMAeouoSeHV9m7ynQ.png" isMerged="true" [V0_FILE]png:file="public/images/activity-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%2054-DCTT9oM6wMCD6klG2HPAOIB5Vrx1ft.png" isMerged="true" [V0_FILE]png:file="public/images/moon-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%2056-TwEsgVmNf2QeZBt32NIopXhWnCdW0R.png" isMerged="true" [V0_FILE]typescript:file="vite.config.ts" isMerged="true" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import tailwindcss from "@tailwindcss/vite" import path from "path" // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }) [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES2020", "useDefineForClassFields": true, "skipLibCheck": true, "strict": true, "esModuleInterop": true, "module": "ESNext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "noEmit": true, "incremental": true, "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="src/App.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useMemo } from "react" import type { Container, Theme } from "./settings/types" // %IMPORT_STATEMENT import { PortfolioNavbar } from "./components/generated/PortfolioNavbar" import { InnovateAIHero } from "./components/generated/InnovateAIHero" import { PhilosophySection } from "./components/generated/PhilosophySection" import { FeaturesGrid } from "./components/generated/FeaturesGrid" import { FeaturesSection } from "./components/generated/FeaturesSection" import { TestimonialsSection } from "./components/generated/TestimonialsSection" import { PricingSection } from "./components/generated/PricingSection" import { FAQSection } from "./components/generated/FAQSection" import { Footer } from "./components/generated/Footer" const theme: Theme = "light" // only use 'centered' container for standalone components, never for full page apps or websites. const container: Container = "none" function App() { function setTheme(theme: Theme) { if (theme === "dark") { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } } setTheme(theme) const generatedComponent = useMemo(() => { // THIS IS WHERE THE TOP LEVEL GENRATED COMPONENT WILL BE RETURNED! return ( <>

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Transform Your Business
With Intelligent Analytics

Transform Your Business
With Intelligent Analytics

Transform Your Business
With Intelligent Analytics

Transform Your Business
With Intelligent Analytics

{name}

Everything included:

{author}

Discover Nebra

Mindful by Design

Sustainable Productivity

Nebra

{faq.question}

Focus on what matters

Work in rhythm with
your life

{feature.title}

Nebra

Choose Your Plan

{plan.name}

Everything included:

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Analytics Dashboard

Revenue Trend

Top Performing

Recent Activity

Transform Your Business With Intelligent Analytics

Transform Your Business With Intelligent Analytics

Transform Your Business With Intelligent Analytics

Transform Your Business With Intelligent Analytics

{name}

Everything included:

{author}

Discover Nebra

Nebra

Work in rhythm with your life

{feature.title}

Choose Your Plan

{plan.name}

Everything included:

Transform Your Business
With Intelligent Analytics

Transform Your Business
With Intelligent Analytics

Transform Your Business
With Intelligent Analytics

Transform Your Business
With Intelligent Analytics

Work in rhythm with
your life

About

Tags

Share

About

Tags

Share

More from mikeyi2a

More Templates Like This

About

Tags

Share

About

Tags

Share

More from mikeyi2a

More Templates Like This