[V0_FILE]typescriptreact:file="components/comet-logo.tsx" isMerged="true" "use client" interface CometLogoProps { width?: number height?: number className?: string } export default function CometLogo({ width = 606, height = 173, className = "" }: CometLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/comet-icon.tsx" isMerged="true" "use client" interface CometIconProps { className?: string } export default function CometIcon({ className = "" }: CometIconProps) { return ( ) } [V0_FILE]typescriptreact:file="components/perplexity-logo.tsx" isMerged="true" "use client" interface PerplexityLogoProps { className?: string } export default function PerplexityLogo({ className = "" }: PerplexityLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/background-dots.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" export default function BackgroundDots() { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const width = container.clientWidth const height = container.clientHeight // Create grid of dots const rows = 20 const cols = 30 const dotSize = 2 for (let i = 0; i < rows * cols; i++) { const dot = document.createElement("div") dot.style.width = `${dotSize}px` dot.style.height = `${dotSize}px` dot.style.borderRadius = "50%" dot.style.margin = "auto" dot.style.background = "rgba(255, 255, 255, 0.5)" dot.style.opacity = (Math.random() * 0.5 + 0.1).toString() dot.style.transform = "scale(var(--motion-scale))" dot.style.setProperty("--motion-scale", "1") // Animate dots setInterval( () => { const scale = 1 + Math.random() * 0.3 dot.style.setProperty("--motion-scale", scale.toString()) dot.style.opacity = (Math.random() * 0.5 + 0.1).toString() dot.style.transition = "transform 4s ease-in-out, opacity 4s ease-in-out" }, 2000 + Math.random() * 3000, ) container.appendChild(dot) } // Arrange in grid container.style.display = "grid" container.style.gridTemplateColumns = `repeat(${cols}, 1fr)` container.style.gridTemplateRows = `repeat(${rows}, 1fr)` container.style.gap = "1px" container.style.width = "100vw" container.style.height = "100vh" container.style.maxWidth = "100%" container.style.margin = "0 auto" }, []) return (

) } [V0_FILE]typescriptreact:file="components/signup-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function SignupForm() { const [email, setEmail] = useState("") const [submitted, setSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { // In a real app, you would send this to your API console.log("Submitting email:", email) setSubmitted(true) } } return (

{/* Outer ring */}

{/* Middle ring */}

{/* Form container */}

) } [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/page.tsx" isEdit="true" isQuickEdit="true" import CometLogo from "@/components/comet-logo" import BackgroundDots from "@/components/background-dots" import SignupForm from "@/components/signup-form" export default function Home() { return (

{/* Background pattern */}

{/* Animated dots background */}

{/* Navigation */} {/* Main content */}

A Browser for Agentic Search by Perplexity

{/* Signup form */}

{/* Footer */}

) }

About

Tags

Share

More from davai7913

More Templates Like This

About

Tags

Share

About

Tags

Share

More from davai7913

More Templates Like This