[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" 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: "Crop Studio - Protect Your Privacy, Share What Matters", description: "Advanced screen sharing and workflow optimization tool", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); --gradient-purple: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); } .hero-gradient { background: radial-gradient( circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 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; } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" export function Header() { return (

Crop Studio

) } [V0_FILE]typescriptreact:file="components/partners-section.tsx" isEdit="true" isMerged="true" 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/features-section.tsx" isEdit="true" isMerged="true" import { GradientCard } from "@/components/ui/gradient-card" import Image from "next/image" export function FeaturesSection() { const features = [ { title: "Save Time, Share Faster", description: "Quick and efficient screen sharing", image: "/placeholder.svg?height=200&width=300", }, { title: "Seamless Integration", description: "Works with your favorite tools", image: "/placeholder.svg?height=200&width=300", }, { title: "Low CPU Usage", description: "Optimized performance", image: "/placeholder.svg?height=200&width=300", }, ] return (

Advanced Screen Sharing

Effortlessly share specific sections of your screen during calls without revealing unnecessary information. Our innovative cropping feature ensures that you can focus on what matters most without compromising privacy or security.

{features.map((feature) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/integration-section.tsx" isFixed="true" isQuickEdit="true" isMerged="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="app/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { HeroSection } from "@/components/hero-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/announcement-bar.tsx" isMerged="true" 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" isMerged="true" 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" isMerged="true" 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" isMerged="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" isMerged="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" isMerged="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" isEdit="true" isMerged="true" "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" isEdit="true" isMerged="true" "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="components/hero-section.tsx" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { InteractiveGrid } from "@/components/ui/interactive-grid" import { ShineBorder } from "@/components/ui/shine-border" import { Play } from "lucide-react" import Image from "next/image" export function HeroSection() { return (

Protect Your Privacy, Share What
Matters

Easily crop out sensitive information on your screen during work calls. Keep your focus on what you want to share while maintaining full control over your privacy.

) }