[V0_FILE]typescriptreact:file="layout.tsx" isEdit="true" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"], weight: ["300", "400", "500", "700"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( Varti Studio {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isMerged="true" 'use client' import { useEffect, useRef, useState } from 'react' import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight } from 'lucide-react' import { motion, AnimatePresence } from "framer-motion" export default function Home() { const [isLoaded, setIsLoaded] = useState(false) const gradientRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (gradientRef.current) { const rect = gradientRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top gradientRef.current.style.setProperty('--mouse-x', `${x}px`) gradientRef.current.style.setProperty('--mouse-y', `${y}px`) } } document.addEventListener('mousemove', handleMouseMove) setIsLoaded(true) return () => { document.removeEventListener('mousemove', handleMouseMove) } }, []) return ( {isLoaded && (

Create habit
Challenges
with Friends

Transform your life through shared goals and mutual support. Join Varti Studio and start your journey to better habits today.

)} ) } [V0_FILE]typescriptreact:file="public/noise.png" isMerged="true" [A noise texture image file should be added to the public folder] [V0_FILE]typescriptreact:file="styles/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --neon-green: #00ff00; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } body { background-color: black; color: white; cursor: none; } .cursor-spotlight { width: 300px; height: 300px; position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: screen; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } .cursor-spotlight::before, .cursor-spotlight::after, .cursor-spotlight .inner-circle { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); } .cursor-spotlight::before, .cursor-spotlight::after { width: 100%; height: 100%; border: 2px solid rgba(0, 255, 0, 0.5); } .cursor-spotlight::before { animation: ripple 1.5s cubic-bezier(0, 0.5, 0.5, 1) infinite; } .cursor-spotlight::after { animation: ripple 1.5s cubic-bezier(0, 0.5, 0.5, 1) infinite 0.75s; } .cursor-spotlight .inner-circle { width: 20px; height: 20px; background-color: rgba(0, 255, 0, 0.5); box-shadow: 0 0 20px rgba(0, 255, 0, 0.7); } @keyframes ripple { 0% { width: 20%; height: 20%; opacity: 0.8; } 100% { width: 100%; height: 100%; opacity: 0; } } .cursor-spotlight.hovering { transform: scale(1.2); } .cursor-spotlight.hovering .inner-circle { background-color: rgba(0, 255, 0, 0.8); box-shadow: 0 0 30px rgba(0, 255, 0, 0.9); } /* Improved hover effects */ a:hover, button:hover, [role="button"]:hover { position: relative; z-index: 1; } a, button, [role="button"] { transition: all 0.3s ease-out; } a:hover, button:hover, [role="button"]:hover { text-shadow: 0 0 10px rgba(0, 255, 0, 0.7); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Link from "next/link" import { Menu } from "lucide-react" export default function Home() { return (

{/* Background with integrated image */}

{/* Navigation */}

{/* Main Content */}

CHALLENGE YOURSELF™

HAB IT HUNT ER

" CHASE YOUR POTENTIAL "

21 DAYS TO TRANSFORM YOUR LIFE

START CHALLENGE LEARN MORE

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import Link from "next/link" import { ArrowLeft, Eye, EyeOff } from "lucide-react" export default function LoginPage() { const [showPassword, setShowPassword] = useState(false) return (

{/* Background with integrated image */}

Back to Home

Login to VARTI

Password

Remember me

Forgot your password?

Not a member?{" "} Start your 21-day challenge now

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import Link from "next/link" import { ArrowLeft, Eye, EyeOff } from "lucide-react" export default function SignUpPage() { const [showPassword, setShowPassword] = useState(false) return (

{/* Background with integrated image */}

Back to Home

Join the Challenge

Full Name

Password

Choose Your Challenge

I agree to the{" "} Terms and Conditions

Already a member?{" "} Sign in to your account

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import Link from "next/link" import { Plus, ChevronRight, Calendar, Trophy, Users } from "lucide-react" export default function DashboardPage() { const [challenges] = useState([ { id: 1, name: "21-Day Fitness Challenge", progress: 33, participants: 1500 }, { id: 2, name: "Meditation Mastery", progress: 67, participants: 980 }, { id: 3, name: "Productivity Boost", progress: 10, participants: 2200 }, ]) const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) return ( {isLoaded && (

VARTI

Welcome back, Challenger!

Your Active Challenges

Create New Challenge

{challenges.map((challenge) => (

{challenge.name}

{challenge.participants} participants

{challenge.progress}% Complete

View Details ))}

Quick Stats

Current Streak

7 Days

Challenges Completed

Community Rank

#42

)} ) } [V0_FILE]typescriptreact:file="app/create-challenge/page.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import Link from "next/link" import { ArrowLeft } from "lucide-react" export default function CreateChallengePage() { const [challengeName, setChallengeName] = useState("") const [challengeDescription, setChallengeDescription] = useState("") const [challengeDuration, setChallengeDuration] = useState("21") const [challengeType, setChallengeType] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle challenge creation logic here console.log({ challengeName, challengeDescription, challengeDuration, challengeType }) } return (

Back to Dashboard

Create a New Challenge

Challenge Name setChallengeName(e.target.value)} className="w-full px-4 py-2 bg-black/50 border border-[#00FF00]/20 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#00FF00]/50 transition-all" placeholder="Enter challenge name" required />

Challenge Description

Challenge Duration (days) setChallengeDuration(e.target.value)} min="1" max="365" className="w-full px-4 py-2 bg-black/50 border border-[#00FF00]/20 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#00FF00]/50 transition-all" required />

Challenge Type

) } [V0_FILE]typescriptreact:file="components/Loader.tsx" isEdit="true" import { motion } from "framer-motion" import { useState, useEffect } from "react" export const Loader = () => { const [progress, setProgress] = useState(0) useEffect(() => { const interval = setInterval(() => { setProgress((prevProgress) => (prevProgress < 100 ? prevProgress + 1 : prevProgress)) }, 30) return () => clearInterval(interval) }, []) const leafVariants = { hidden: { scale: 0, opacity: 0 }, visible: (i: number) => ({ scale: 1, opacity: 1, transition: { delay: i * 0.2, duration: 0.5, type: "spring", stiffness: 100, }, }), } return (

CULTIVATING HABITS

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" "use client" import { useEffect, useState, useCallback } from "react" import { Poppins } from "next/font/google" import Image from "next/image" import { Loader } from "@/components/Loader" import "@/styles/globals.css" const poppins = Poppins({ subsets: ["latin"], weight: ["300", "400", "500", "700"], variable: "--font-poppins", }) export default function RootLayout({ children, }: { children: React.ReactNode }) { const [cursorPosition, setCursorPosition] = useState({ x: -100, y: -100 }) const [isHovering, setIsHovering] = useState(false) const [isLoading, setIsLoading] = useState(true) const updateCursorPosition = useCallback((e: MouseEvent) => { requestAnimationFrame(() => { setCursorPosition({ x: e.clientX, y: e.clientY }) }) }, []) useEffect(() => { const handleMouseEnter = () => setIsHovering(true) const handleMouseLeave = () => setIsHovering(false) const interactiveElements = document.querySelectorAll('a, button, input, [role="button"]') interactiveElements.forEach((element) => { element.addEventListener("mouseenter", handleMouseEnter) element.addEventListener("mouseleave", handleMouseLeave) }) window.addEventListener("mousemove", updateCursorPosition) // Simulate loading time (remove this in production and use real loading logic) const timer = setTimeout(() => { setIsLoading(false) }, 3000) return () => { clearTimeout(timer) window.removeEventListener("mousemove", updateCursorPosition) interactiveElements.forEach((element) => { element.removeEventListener("mouseenter", handleMouseEnter) element.removeEventListener("mouseleave", handleMouseLeave) }) } }, [updateCursorPosition]) return ( {isLoading && }

{children}

) }

Create habit Challenges with Friends

HAB IT HUNT ER

Login to VARTI

Join the Challenge

Welcome back, Challenger!

Your Active Challenges

{challenge.name}

Quick Stats

Current Streak

Challenges Completed

Community Rank

Create a New Challenge

Create habit
Challenges
with Friends

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This