Crea un sitio tipo BFDI que muestra algunos episodios (tomados de YouTube) e intenta desactivar el menú

Crea una landing page premium, moderna y orientada a conversiones para deevork, dirigida a freelancers, estudiantes y profesionales

Create a premium, modern, conversion-focused landing page for deevork targeting freelancers, coleege student, professional worker,, and business, with the goal of allow freelancer to post about their work(like fiverr ) and artwork like ( pinterest ). Design it with the polish of leading brands using soft and squaer based button.—clean typography, generous whitespace, refined gradients, subtle glassmorphism, premium visuals, and smooth, elegant animations including scroll reveals, staggered entrances, hover effects, ambient motion, and interactive microinteractions. Include a complete landing page structure (sticky navbar, hero, social proof, features, product showcase, benefits, testimonials, pricing, FAQ, CTA, and footer), ensuring it is fully responsive, accessible, mobile-first, visually stunning, and production-ready with compelling copy tailored to the brand.

Hazme un sistema operativo de pesadilla, con centro de descargas de apps y motor de búsqueda listo

bana dehşet ül vahset bir işletim sistemi yap hazır aramaları olan rama motoru uygulama indirme merkezi ve daha fazla dehset şey olsun flappy bird cross road simulator gibi oyunlar soundboard gibi şeyler olsun html kodu olsun

Componente React con entrada OTP y contador de verificación

import { useState, useEffect, useCallback, useRef } from "react"; import OTPInput from "./components/OTPInput"; import CountdownTimer from "./components/CountdownTimer"; import Confetti from "./components/Confetti"; import MethodSelector, { VerifyMethod, METHODS } from "./components/MethodSelector"; import { cn } from "./utils/cn"; /* ─── Constants ───────────────────────────────────────────── */ const CORRECT_OTP = "123456"; const TIMER_DURATION = 30; type VerifyState = "idle" | "verifying" | "error" | "success"; /* ─── Tiny helpers ────────────────────────────────────────── */ function SuccessCheckIcon() { return ( <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"> <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" className="animate-success-check" /> </svg> ); } function LockIcon({ pulse }: { pulse?: boolean }) { return ( <svg className={cn("w-8 h-8 text-[#F15A24]", pulse && "animate-pulse")} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" > <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /> </svg> ); } /* ─── Main App ────────────────────────────────────────────── */ export default function App() { const [state, setState] = useState<VerifyState>("idle"); const [method, setMethod] = useState<VerifyMethod>("email"); const [countdown, setCountdown] = useState(TIMER_DURATION); const [canResend, setCanResend] = useState(false); const [resending, setResending] = useState(false); const [otpKey, setOtpKey] = useState(0); const [attempts, setAttempts] = useState(0); const timerRef = useRef<ReturnType<typeof setInterval> | null>(null); /* ── Timer ── */ const startTimer = useCallback(() => { setCountdown(TIMER_DURATION); setCanResend(false); if (timerRef.current) clearInterval(timerRef.current); timerRef.current = setInterval(() => { setCountdown(prev => { if (prev <= 1) { clearInterval(timerRef.current!); setCanResend(true); return 0; } return prev - 1; }); }, 1000); }, []); useEffect(() => { startTimer(); return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [startTimer]); /* ── OTP submit ── */ const handleOTPComplete = useCallback((otp: string) => { setState("verifying"); setTimeout(() => { if (otp === CORRECT_OTP) { setState("success"); if (timerRef.current) clearInterval(timerRef.current); } else { setState("error"); setAttempts(a => a + 1); setTimeout(() => { setState("idle"); setOtpKey(k => k + 1); }, 820); } }, 1300); }, []); /* ── Method change ── */ const handleMethodChange = useCallback((m: VerifyMethod) => { if (state === "verifying" || state === "success") return; setMethod(m); setState("idle"); setOtpKey(k => k + 1); setAttempts(0); startTimer(); }, [state, startTimer]); /* ── Resend ── */ const handleResend = useCallback(() => { if (!canResend || resending) return; setResending(true); setAttempts(0); setTimeout(() => { setResending(false); setOtpKey(k => k + 1); setState("idle"); startTimer(); }, 1600); }, [canResend, resending, startTimer]); const isDisabled = state === "verifying" || state === "success"; const activeMethod = METHODS.find(m => m.id === method)!; return ( <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden" style={{ backgroundColor: "#FAF8F5", fontFamily: "'Inter', system-ui, sans-serif" }} > {/* Subtle background texture blobs */} <div className="absolute inset-0 pointer-events-none overflow-hidden"> <div className="absolute -top-32 -right-32 w-[500px] h-[500px] rounded-full opacity-30" style={{ background: "radial-gradient(circle, #F8E8E0 0%, transparent 70%)" }} /> <div className="absolute -bottom-40 -left-40 w-[600px] h-[600px] rounded-full opacity-20" style={{ background: "radial-gradient(circle, #EDE9E2 0%, transparent 70%)" }} /> </div> {/* Confetti */} <Confetti show={state === "success"} /> {/* ── Card ── */} <div className="relative w-full max-w-[440px] animate-fade-in-up" style={{ animationDuration: "0.5s" }} > {/* Brand strip at top */} <div className="flex items-center justify-center mb-8"> <div className="flex items-center gap-2.5"> <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#111111" }} > <svg viewBox="0 0 20 20" fill="none" className="w-4 h-4"> <path d="M10 2L2 7v6l8 5 8-5V7L10 2z" fill="#F15A24" /> </svg> </div> <span className="text-sm font-semibold tracking-tight" style={{ color: "#111111" }}> Vertex </span> </div> </div> {/* Main floating card */} <div className="rounded-[28px] bg-white p-8 sm:p-10" style={{ boxShadow: "0 4px 6px rgba(0,0,0,0.03), 0 12px 36px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.02)", }} > {/* ── Icon badge ── */} <div className="flex justify-center mb-7"> <div className={cn( "relative w-16 h-16 rounded-[20px] flex items-center justify-center transition-all duration-400", state === "success" ? "bg-green-50" : state === "error" ? "bg-red-50" : "bg-[#FFF3EE]" )} > {state === "verifying" && ( <div className="absolute inset-0 rounded-[20px] border-2 border-[#F15A24] border-t-transparent animate-spin-slow opacity-40" /> )} {state === "success" ? <SuccessCheckIcon /> : state === "error" ? ( <svg className="w-8 h-8 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"> <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /> </svg> ) : <LockIcon pulse={state === "verifying"} />} </div> </div> {/* ── Headline ── */} <div className="text-center mb-8"> <h1 className="text-[1.6rem] font-bold leading-tight tracking-tight mb-1.5" style={{ color: "#111111" }} > {state === "success" ? "You're verified" : "Verify your identity"} </h1> <p className="text-sm leading-relaxed" style={{ color: "#7D7D7D" }} > {state === "success" ? ( "Authentication successful. Welcome back." ) : state === "verifying" ? ( <span className="inline-flex items-center gap-2"> <span className="w-1.5 h-1.5 rounded-full bg-[#F15A24] animate-pulse inline-block" /> Checking your code… </span> ) : ( <> Enter the 6-digit code sent to{" "} <span className="font-medium" style={{ color: "#111111" }}> {activeMethod.destination} </span> </> )} </p> </div> {/* ── Method selector ── */} {state !== "success" && ( <div className="mb-8 animate-slide-in-tab"> <MethodSelector