[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Hero from "@/components/hero" import Features from "@/components/features" import Modes from "@/components/modes" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [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}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, 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="app/layout.tsx" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lockin - Stop Scrolling, Start Learning", description: "Replace your scrolling addiction with productive studying through interactive questions, flashcards, and more.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/3d/phone.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef } from "react" import { useFrame } from "@react-three/fiber" import * as THREE from "three" export function Phone(props) { const group = useRef() useFrame((state) => { const t = state.clock.getElapsedTime() group.current.rotation.y = THREE.MathUtils.lerp(group.current.rotation.y, Math.sin(t / 2) / 10, 0.05) group.current.position.y = THREE.MathUtils.lerp(group.current.position.y, Math.sin(t) / 10, 0.05) }) return ( {/* Phone body /} {/ Phone screen /} {/ App content on screen /} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 210 100% 50%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 210 100% 50%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 210 100% 50%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 210 100% 50%; } } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } .animate-blob { animation: blob 7s infinite; } } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Canvas } from "@react-three/fiber" import { useSpring, animated } from "@react-spring/web" import { PresentationControls, Float } from "@react-three/drei" import { Phone } from "@/components/3d/phone" import { Button } from "@/components/ui/button" export default function Hero() { const [hovered, setHovered] = useState(false) const buttonSpring = useSpring({ scale: hovered ? 1.1 : 1, boxShadow: hovered ? "0 0 25px 5px rgba(0, 80, 179, 0.6)" : "0 0 5px 2px rgba(0, 80, 179, 0.3)", config: { tension: 300, friction: 10 }, }) return (
{/* Background gradient circles */}

Stop Scrolling. Start Locking In.

Replace your scrolling addiction with productive studying through interactive questions, flashcards, and more.

) } [V0_FILE]typescriptreact:file="components/features.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef } from "react" import { useInView } from "framer-motion" import { Brain, BarChart3, Smartphone } from "lucide-react" export default function Features() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) const features = [ { icon: , title: "Scrolling Interface", description: "Replace your scrolling addiction with productive studying.", }, { icon: , title: "Competitive Learning", description: "Healthy leaderboard competition to accelerate your growth.", }, { icon: , title: "Mode Selection", description: "Different modes to tailor to your needs: Multiple choice, Flashcards, and Written Form.", }, ] return (

Transform Your Learning Habits

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

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/modes.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { CheckCircle2, BookOpen, PenLine } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" export default function Modes() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) const modes = [ { id: "multiple-choice", icon: , title: "Multiple Choice", description: "Test your knowledge with carefully crafted multiple choice questions.", image: "/placeholder.svg?height=300&width=500", }, { id: "flashcards", icon: , title: "Flashcards", description: "Quickly review key concepts with interactive flashcards.", image: "/placeholder.svg?height=300&width=500", }, { id: "written", icon: , title: "Written Form", description: "Deepen your understanding by writing out complete answers.", image: "/placeholder.svg?height=300&width=500", }, ] return (

Choose Your Learning Mode

Different ways to engage with content based on your learning style and goals

{modes.map((mode) => ( {mode.icon} {mode.title} ))} {modes.map((mode) => (

{mode.title}

{mode.description}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" import { Instagram, Twitter, Facebook } from "lucide-react" export default function Footer() { return (

Lockin

Replace your scrolling addiction with productive studying. Join thousands of learners who have transformed their digital habits.

Product

Features

Pricing

Download

Updates

Support

Help Center

Contact Us

Privacy Policy

Terms of Service

© {new Date().getFullYear()} Lockin. All rights reserved.

) }