/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import anime from "https://esm.sh/animejs@3.2.1"; function App() { return (

); } function BackgroundAnimation() { const svgRef = useRef(null); useEffect(() => { const path = anime.path('path'); anime({ targets: '.moving-shape', translateX: path('x'), translateY: path('y'), rotate: path('angle'), easing: 'linear', duration: 10000, loop: true }); }, []); return ( ); } function Header() { const headerRef = useRef(null); useEffect(() => { anime({ targets: headerRef.current.querySelectorAll('.animate-header'), translateY: [-50, 0], opacity: [0, 1], duration: 1000, delay: anime.stagger(100), easing: 'easeOutElastic(1, .8)' }); }, []); return (

Talash

); } function Hero() { const heroRef = useRef(null); const [text, setText] = useState("Discover the Future of Search"); const [isHovered, setIsHovered] = useState(false); useEffect(() => { anime({ targets: heroRef.current.querySelectorAll('.animate-hero'), translateY: [50, 0], opacity: [0, 1], duration: 1500, delay: anime.stagger(200), easing: 'easeOutExpo' }); }, []); const handleMouseEnter = () => { setIsHovered(true); setText("Experience AI-Powered Search"); }; const handleMouseLeave = () => { setIsHovered(false); setText("Discover the Future of Search"); }; return (

{text}

Unleash the power of AI-driven search to revolutionize your data exploration.

Talash AI

The next generation of search technology

); } function Features() { const featuresRef = useRef(null); const [activeFeature, setActiveFeature] = useState(null); useEffect(() => { anime({ targets: featuresRef.current.querySelectorAll('.feature-card'), translateY: [100, 0], opacity: [0, 1], duration: 1000, delay: anime.stagger(200), easing: 'easeOutCubic' }); }, []); const features = [ { icon: "🧠", title: "AI-Powered Algorithms", description: "Cutting-edge search technology powered by advanced artificial intelligence." }, { icon: "🎯", title: "Precision Search", description: "Find exactly what you're looking for with pinpoint accuracy." }, { icon: "⚡", title: "Lightning Fast", description: "Blazing quick results that keep pace with your thoughts." }, ]; const handleFeatureHover = (index) => { setActiveFeature(index); }; return (

Features

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

handleFeatureHover(index)} onMouseLeave={() => handleFeatureHover(null)} >

{feature.icon}

{feature.title}

{feature.description}

))}

); } function Footer() { return ( ); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Talash - Futuristic AI Search

`, { headers: { "content-type": "text/html", }, }); } const css = ` :root { --primary: #3a86ff; --secondary: #ff006e; --background: #000000; --text: #ffffff; --glass: rgba(255, 255, 255, 0.1); } body { margin: 0; font-family: 'Inter', sans-serif; background-color: var(--background); color: var(--text); line-height: 1.6; overflow-x: hidden; } .app { max-width: 1200px; margin: 0 auto; padding: 20px; position: relative; } .background-svg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } h1, h2, h3, h4 { font-family: 'Orbitron', sans-serif; color: var(--primary); text-shadow: 0 0 10px rgba(58, 134, 255, 0.5); } .glassmorphism { background: var(--glass); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); } header { display: flex; justify-content: space-between; align-items: center; padding: 20px; margin-bottom: 40px; } h1 { font-size: 3em; margin: 0; } nav ul { display: flex; list-style-type: none; padding: 0; } nav li { margin-left: 30px; } nav a { color: var(--text); text-decoration: none; font-weight: bold; font-size: 1.1em; transition: color 0.3s ease; } nav a:hover { color: var(--secondary); } .hero { display: flex; align-items: center; justify-content: space-between; padding: 60px 40px; margin-bottom: 80px; } .hero-content { flex: 1; padding-right: 50px; } .hero-title { font-size: 3.5em; margin-bottom: 20px; line-height: 1.2; cursor: pointer; transition: color 0.3s ease; } .hero-title:hover { color: var(--secondary); } .hero p { font-size: 1.2em; margin-bottom: 30px; color: var(--text); } .glow-effect { position: relative; overflow: hidden; background-color: var(--primary); color: var(--text); border: none; padding: 10px 20px; font-size: 1.1em; cursor: pointer; font-family: 'Orbitron', sans-serif; font-weight: bold; border-radius: 5px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .glow-effect:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(58, 134, 255, 0.3); } .glow-effect::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); transform: rotate(45deg); pointer-events: none; z-index: 1; transition: all 0.6s ease; } .glow-effect:hover::before { left: -100%; top: -100%; } .hero-image { flex: 1; display: flex; justify-content: center; align-items: center; } .background-gradient { background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 22px; padding: 20px; max-width: 300px; position: relative; overflow: hidden; transition: transform 0.3s ease; } .background-gradient.pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .sparkles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 15px 15px; opacity: 0.5; } .features { padding: 80px 0; } .features h3 { font-size: 2.5em; text-align: center; margin-bottom: 50px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; } .feature-card { padding: 30px; text-align: center; transition: all 0.3s ease; cursor: pointer; } .feature-card:hover, .feature-card.active { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(58, 134, 255, 0.2); } .feature-icon { font-size: 3em; margin-bottom: 20px; } .feature-card h4 { font-size: 1.5em; margin-bottom: 15px; } footer { text-align: center; padding: 30px 0; margin-top: 80px; font-size: 0.9em; color: var(--text); } footer a { color: var(--primary); text-decoration: none; margin-left: 10px; transition: color 0.3s ease; } footer a:hover { color: var(--secondary); } @media (max-width: 768px) { .hero { flex-direction: column; text-align: center; padding: 40px 20px; } .hero-content { padding-right: 0; margin-bottom: 40px; } .hero-title { font-size: 2.5em; } header { flex-direction: column; } nav ul { margin-top: 20px; } nav li { margin: 0 15px; } } `;

faseeu