[V0_FILE]typescriptreact:file="components/partners-section.tsx" import { Marquee } from "@/components/ui/marquee" import Image from "next/image" export function PartnersSection() { const partners = [ { name: "Microsoft", width: 120 }, { name: "Bettermarks", width: 120 }, { name: "Titanom", width: 120 }, { name: "Shift Nexus", width: 120 }, ] return (

{partners.map((partner) => (

))}

) } [V0_FILE]typescriptreact:file="components/integration-section.tsx" isFixed="true" isQuickEdit="true" import Image from "next/image" import { Button } from "@/components/ui/button" export function IntegrationSection() { const integrations = Array(15) .fill(null) .map((_, i) => ({ name: `Integration ${i + 1}`, icon: `/placeholder.svg?height=48&width=48`, })) return (

Seamless Integration for Any Workflow

Whether you use Notion, Slack, or any other collaboration tool, Crop Studio seamlessly integrates with your existing workflow to enhance your screen sharing experience.

{integrations.map((integration, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/announcement-bar.tsx" export function AnnouncementBar() { return (

✨ Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes. →

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" import { Button } from "@/components/ui/button" import { Github } from "lucide-react" import Link from "next/link" export function Navbar() { return ( ) } [V0_FILE]typescriptreact:file="components/showcase-section.tsx" export function ShowcaseSection() { return (

Showcase

Companies choose Magic UI to build their landing pages.

{Array.from({ length: 6 }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/ui/spotlight.tsx" isFixed="true" isQuickEdit="true" "use client" import { useRef, type MouseEvent, type ReactNode } from "react" interface SpotlightProps { children: ReactNode className?: string } export function Spotlight({ children, className = "" }: SpotlightProps) { const divRef = useRef(null) const handleMouseMove = (e: MouseEvent) => { if (!divRef.current) return const { left, top, width, height } = divRef.current.getBoundingClientRect() const x = (e.clientX - left) / width const y = (e.clientY - top) / height divRef.current.style.setProperty("--mouse-x", `${x}`) divRef.current.style.setProperty("--mouse-y", `${y}`) } return (

{children}

) } [V0_FILE]typescriptreact:file="components/ui/marquee.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" import type React from "react" // Added import for React interface MarqueeProps { children: React.ReactNode direction?: "left" | "right" pauseOnHover?: boolean speed?: number } export function Marquee({ children, direction = "left", pauseOnHover = false, speed = 20 }: MarqueeProps) { const [start, setStart] = useState(false) const scroller = useRef(null) const [scrollerWidth, setScrollerWidth] = useState(0) useEffect(() => { if (!scroller.current) return setScrollerWidth(scroller.current.offsetWidth) setStart(true) }, []) return (

{children} {children}

) } [V0_FILE]typescriptreact:file="components/ui/gradient-card.tsx" isFixed="true" isQuickEdit="true" import type React from "react" interface GradientCardProps { children: React.ReactNode className?: string } export function GradientCard({ children, className = "" }: GradientCardProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/ui/interactive-grid.tsx" "use client" import { useEffect, useRef } from "react" interface Point { x: number y: number translateX: number translateY: number minX: number minY: number maxX: number maxY: number rotate: number } interface InteractiveGridProps { className?: string containerClassName?: string points?: number } export function InteractiveGrid({ className = "", containerClassName = "", points = 40 }: InteractiveGridProps) { const canvasRef = useRef(null) const containerRef = useRef(null) const pointsRef = useRef([]) const mousePosition = useRef({ x: 0, y: 0 }) useEffect(() => { const canvas = canvasRef.current const container = containerRef.current if (!canvas || !container) return const ctx = canvas.getContext("2d") if (!ctx) return const resizeCanvas = () => { const { width, height } = container.getBoundingClientRect() const dpr = window.devicePixelRatio || 1 canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) canvas.style.width = `${width}px` canvas.style.height = `${height}px` return { width, height } } const initPoints = () => { const { width, height } = resizeCanvas() const cols = Math.floor(Math.sqrt(points)) const rows = Math.floor(points / cols) const cellWidth = width / cols const cellHeight = height / rows pointsRef.current = Array.from({ length: points }, (_, i) => { const col = i % cols const row = Math.floor(i / cols) const x = cellWidth * col + cellWidth / 2 const y = cellHeight * row + cellHeight / 2 const angle = Math.random() * Math.PI * 2 return { x, y, translateX: 0, translateY: 0, minX: cellWidth * col, minY: cellHeight * row, maxX: cellWidth * (col + 1), maxY: cellHeight * (row + 1), rotate: angle, } }) } const draw = () => { if (!ctx || !canvas) return ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.strokeStyle = "rgba(255, 255, 255, 0.1)" ctx.lineWidth = 1 pointsRef.current.forEach((point) => { const distance = Math.sqrt( Math.pow(mousePosition.current.x - point.x, 2) + Math.pow(mousePosition.current.y - point.y, 2), ) const maxDistance = 120 if (distance < maxDistance) { const force = (1 - distance / maxDistance) * 0.2 const angle = Math.atan2(mousePosition.current.y - point.y, mousePosition.current.x - point.x) point.translateX = Math.cos(angle) * force * 20 point.translateY = Math.sin(angle) * force * 20 point.rotate = angle } else { point.translateX *= 0.8 point.translateY *= 0.8 } ctx.save() ctx.translate(point.x + point.translateX, point.y + point.translateY) ctx.rotate(point.rotate) ctx.beginPath() ctx.moveTo(-4, 0) ctx.lineTo(4, 0) ctx.stroke() ctx.restore() }) requestAnimationFrame(draw) } const handleMouseMove = (event: MouseEvent) => { const rect = canvas.getBoundingClientRect() mousePosition.current = { x: event.clientX - rect.left, y: event.clientY - rect.top, } } initPoints() draw() window.addEventListener("resize", initPoints) window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("resize", initPoints) window.removeEventListener("mousemove", handleMouseMove) } }, [points]) return (

) } [V0_FILE]typescriptreact:file="components/ui/shine-border.tsx" "use client" import type React from "react" import { useRef, useEffect } from "react" interface ShineBorderProps { children: React.ReactNode className?: string borderClassName?: string duration?: number } export function ShineBorder({ children, className = "", borderClassName = "", duration = 2000 }: ShineBorderProps) { const containerRef = useRef(null) useEffect(() => { const container = containerRef.current if (!container) return const handleMouseMove = (e: MouseEvent) => { const { left, top, width, height } = container.getBoundingClientRect() const x = (e.clientX - left) / width const y = (e.clientY - top) / height container.style.setProperty("--mouse-x", `${x * 100}%`) container.style.setProperty("--mouse-y", `${y * 100}%`) } container.addEventListener("mousemove", handleMouseMove) return () => container.removeEventListener("mousemove", handleMouseMove) }, []) return (

{children}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FocusTimer - Boost Your Productivity with Pomodoro Technique", description: "Simple, effective Pomodoro timer app to enhance your focus and productivity", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --gradient-primary: linear-gradient(135deg, #ef4444 0%, #f97316 100%); --gradient-secondary: linear-gradient(135deg, #f97316 0%, #eab308 100%); } .hero-gradient { background: radial-gradient( circle at 50% 0%, rgba(239, 68, 68, 0.15) 0%, rgba(249, 115, 22, 0.05) 30%, rgba(0, 0, 0, 0) 70% ); } .dotted-grid { background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 24px 24px; opacity: 0.1; } .timer-progress { stroke-dasharray: 283; transform-origin: center; transform: rotate(-90deg); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } [V0_FILE]typescriptreact:file="components/header.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" export function Header() { return (

FocusTimer

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Button } from "@/components/ui/button" import { InteractiveGrid } from "@/components/ui/interactive-grid" import { ShineBorder } from "@/components/ui/shine-border" import { Play, Download } from "lucide-react" import { PomodoroTimer } from "@/components/pomodoro-timer" export function HeroSection() { return (

Boost Your Productivity
One Pomodoro at a Time

FocusTimer helps you stay productive with the proven Pomodoro technique. Work in focused sprints, take regular breaks, and track your progress to achieve more every day.

Today's Progress

Pomodoros

Focus Time

Tasks Done

Current Task

Complete landing page design

) } [V0_FILE]typescriptreact:file="components/pomodoro-timer.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Play, Pause, RotateCcw } from "lucide-react" export function PomodoroTimer() { const [mode, setMode] = useState<"focus" | "break">("focus") const [time, setTime] = useState(25 * 60) // 25 minutes in seconds const [isActive, setIsActive] = useState(false) const [progress, setProgress] = useState(100) // Calculate minutes and seconds const minutes = Math.floor(time / 60) const seconds = time % 60 // Calculate progress for the circle useEffect(() => { const totalTime = mode === "focus" ? 25 * 60 : 5 * 60 setProgress((time / totalTime) * 100) }, [time, mode]) // Timer logic useEffect(() => { let interval: NodeJS.Timeout | null = null if (isActive && time > 0) { interval = setInterval(() => { setTime((prevTime) => prevTime - 1) }, 1000) } else if (time === 0) { // Switch modes when timer ends if (mode === "focus") { setMode("break") setTime(5 * 60) // 5 minute break } else { setMode("focus") setTime(25 * 60) // 25 minute focus } setIsActive(false) } return () => { if (interval) clearInterval(interval) } }, [isActive, time, mode]) // Toggle timer const toggleTimer = () => { setIsActive(!isActive) } // Reset timer const resetTimer = () => { setIsActive(false) setTime(mode === "focus" ? 25 * 60 : 5 * 60) } // Switch mode const switchMode = (newMode: "focus" | "break") => { setMode(newMode) setIsActive(false) setTime(newMode === "focus" ? 25 * 60 : 5 * 60) } // Calculate stroke-dashoffset for the progress circle const circumference = 2 * Math.PI * 45 const strokeDashoffset = circumference - (progress / 100) * circumference return (

{/* Background circle */} {/* Timer display */}

{minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")}

{mode} Time

{/* Controls */}

{/* Mode selector */}

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" import { GradientCard } from "@/components/ui/gradient-card" import { Clock, BarChart2, Bell, CheckCircle, Calendar, Settings } from "lucide-react" export function FeaturesSection() { const features = [ { title: "Customizable Timers", description: "Set your own focus and break durations to match your personal productivity rhythm", icon: , }, { title: "Productivity Analytics", description: "Track your focus sessions and productivity trends over time with detailed statistics", icon: , }, { title: "Smart Notifications", description: "Get gentle reminders when it's time to focus or take a break", icon: , }, { title: "Task Management", description: "Organize your work with an integrated task list that syncs with your Pomodoro sessions", icon: , }, { title: "Daily Goals", description: "Set daily focus goals and track your progress toward achieving them", icon: , }, { title: "Distraction Blocker", description: "Optional website and app blocking during focus sessions to help you stay on track", icon: , }, ] return (

Features Designed for Focus

FocusTimer combines the proven Pomodoro technique with modern features to help you achieve deep focus and maximize your productivity.

{features.map((feature) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/how-it-works-section.tsx" import { ShineBorder } from "@/components/ui/shine-border" export function HowItWorksSection() { const steps = [ { number: "01", title: "Set Your Timer", description: "Choose a task and set the timer for 25 minutes (a standard Pomodoro)", color: "from-red-500 to-red-600", }, { number: "02", title: "Focus Deeply", description: "Work on your task with complete focus until the timer rings", color: "from-orange-500 to-orange-600", }, { number: "03", title: "Take a Break", description: "Take a short 5-minute break to rest your mind", color: "from-yellow-500 to-yellow-600", }, { number: "04", title: "Repeat & Track", description: "Repeat the cycle and track your productivity over time", color: "from-red-500 to-red-600", }, ] return (

How the Pomodoro Technique Works

The Pomodoro Technique is a time management method developed by Francesco Cirillo that uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks.

{steps.map((step, index) => (

{step.number}

{step.title}

{step.description}

{index < steps.length - 1 && (

)}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" import { Marquee } from "@/components/ui/marquee" import Image from "next/image" export function TestimonialsSection() { const testimonials = [ { name: "Sarah Johnson", role: "UX Designer", quote: "FocusTimer has completely transformed my workday. I'm getting more done in less time and feeling less stressed.", avatar: "/placeholder.svg?height=64&width=64", }, { name: "Michael Chen", role: "Software Developer", quote: "As a developer, staying in flow state is crucial. The Pomodoro technique with FocusTimer helps me maintain deep focus when coding.", avatar: "/placeholder.svg?height=64&width=64", }, { name: "Emily Rodriguez", role: "Content Writer", quote: "I've tried many productivity apps, but FocusTimer is the only one that's stuck. The simple interface and powerful analytics keep me motivated.", avatar: "/placeholder.svg?height=64&width=64", }, { name: "David Kim", role: "Marketing Manager", quote: "Managing multiple projects is easier with FocusTimer. I can dedicate focused time to each task and track my productivity across projects.", avatar: "/placeholder.svg?height=64&width=64", }, ] return (

Loved by Productive People

Join thousands of professionals who have boosted their productivity with FocusTimer

{testimonials.map((testimonial) => (

{testimonial.name}

{testimonial.role}

"{testimonial.quote}"

{[1, 2, 3, 4, 5].map((star) => ( ))}

))}

) } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" import { Button } from "@/components/ui/button" import { Check } from "lucide-react" import { ShineBorder } from "@/components/ui/shine-border" export function PricingSection() { const plans = [ { name: "Free", price: "$0", description: "Perfect for getting started with the Pomodoro technique", features: ["Basic Pomodoro timer", "Task management", "Daily statistics", "Mobile and desktop apps"], buttonText: "Download Free", buttonVariant: "outline", }, { name: "Pro", price: "$4.99", period: "per month", description: "Advanced features for serious productivity enthusiasts", features: [ "Everything in Free", "Custom timer durations", "Advanced analytics", "Calendar integration", "Website blocker", "Priority support", ], buttonText: "Get Pro", buttonVariant: "default", highlight: true, }, ] return (

Simple, Transparent Pricing

Choose the plan that fits your productivity needs

{plans.map((plan) => (

{plan.name}

{plan.price} {plan.period && {plan.period}}

{plan.description}

{feature}

))}

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" "use client" import { useState } from "react" import { ChevronDown } from "lucide-react" export function FaqSection() { const faqs = [ { question: "What is the Pomodoro Technique?", answer: "The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. These intervals are known as 'pomodoros'.", }, { question: "How does FocusTimer help with productivity?", answer: "FocusTimer implements the Pomodoro Technique with additional features like task management, productivity analytics, and customizable timers. By working in focused sprints and taking regular breaks, you can maintain high concentration levels and avoid burnout.", }, { question: "Can I customize the timer durations?", answer: "Yes! With the Pro version, you can fully customize both your focus session and break durations to match your personal productivity rhythm.", }, { question: "Is FocusTimer available on mobile devices?", answer: "Yes, FocusTimer is available for iOS and Android, as well as desktop applications for Windows and macOS. Your data syncs across all your devices.", }, { question: "How does the website blocker work?", answer: "The website blocker (available in Pro) allows you to create a list of distracting websites that will be automatically blocked during your focus sessions, helping you stay on task.", }, { question: "Can I export my productivity data?", answer: "Yes, Pro users can export their productivity data in CSV format for further analysis or record-keeping.", }, ] const [openIndex, setOpenIndex] = useState(null) const toggleFaq = (index: number) => { setOpenIndex(openIndex === index ? null : index) } return (

Frequently Asked Questions

Have questions about FocusTimer? Find answers to common questions below.

{faqs.map((faq, index) => (

{openIndex === index &&

{faq.answer}

}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Github, Twitter, Instagram } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Header } from "@/components/header" import { HeroSection } from "@/components/hero-section" import { FeaturesSection } from "@/components/features-section" import { HowItWorksSection } from "@/components/how-it-works-section" import { TestimonialsSection } from "@/components/testimonials-section" import { PricingSection } from "@/components/pricing-section" import { FaqSection } from "@/components/faq-section" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @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: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#ef4444", foreground: "#ffffff", }, secondary: { DEFAULT: "#f97316", foreground: "#ffffff", }, 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")], }

Seamless Integration for Any Workflow

Showcase

Boost Your Productivity One Pomodoro at a Time

Today's Progress

Current Task

Features Designed for Focus

{feature.title}

How the Pomodoro Technique Works

{step.title}

Loved by Productive People

{testimonial.name}

Simple, Transparent Pricing

{plan.name}

Frequently Asked Questions

Boost Your Productivity
One Pomodoro at a Time

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This