"use client"; import React, { useState, useEffect } from "react"; import { motion, useReducedMotion } from "motion/react"; import { Mic, MessageSquare, PhoneCall, Globe, User, } from "lucide-react"; import Image from "next/image"; import { SpotlightCard } from "@/components/spotlight-card"; export function IndustryTechSection() { const reduce = useReducedMotion(); // Typewriter effect for "Remind me to check..." const fullText = "Remind me to check..."; const [displayedText, setDisplayedText] = useState(""); const [isDeleting, setIsDeleting] = useState(false); useEffect(() => { if (reduce) { return; } const timer = setTimeout( () => { if (!isDeleting) { if (displayedText.length < fullText.length) { setDisplayedText(fullText.slice(0, displayedText.length + 1)); } else { setTimeout(() => setIsDeleting(true), 1600); } } else { if (displayedText.length > 0) { setDisplayedText(fullText.slice(0, displayedText.length - 1)); } else { setIsDeleting(false); } } }, isDeleting ? 40 : 90, ); return () => clearTimeout(timer); }, [displayedText, isDeleting, reduce]); return (
{/* ────────────────────────────────────────────────────────── CARD 1: Global Citizens ────────────────────────────────────────────────────────── */}

Global Citizens

Quto Agents inherently understand 20+ languages, with SOTA accuracy in all.

{/* Animated Multilingual Word Cloud */}
{/* Row 1 */}
Hello Hindi Malayalam
{/* Row 2 (Center Hero Badge) */}
20+ languages வணக்கம் হ্যালো
{/* Row 3 */}
French ಕನ್ನಡ नमस्कार హలో
{/* Row 4 */}
你好 Hola नमस्ते Привет
{/* ────────────────────────────────────────────────────────── CARD 2: Lowest Latency ────────────────────────────────────────────────────────── */}

Lowest latency

Quto's orchestration brings responses in less than 400 ms across modalities.

{/* Animated Waveform + Dark Speech Capsule */}
{/* Subtle Background Audio Waveform with subtle cyan tint */}
{Array.from({ length: 42 }).map((_, i) => { const baseHeight = 12 + Math.sin(i * 0.35) * 22 + ((i * 7) % 18); return ( ); })}
{/* Foreground High-Contrast Audio Capsule Pill */}
{/* Dotted Sound Matrix Equalizer in Bright Cyan */}
{Array.from({ length: 6 }).map((_, col) => (
{Array.from({ length: 4 }).map((_, row) => ( ))}
))}
{/* Live Typing Speech Text */}
{reduce ? fullText : displayedText}
{/* ────────────────────────────────────────────────────────── CARD 3: Maximum Scale ────────────────────────────────────────────────────────── */}

Maximum scale

Always prepared for surges, with no drop in performance.

{/* 3D Perspective Floor Grid with Laser Streaks & Floating 120K+ Card */}
{/* 3D Perspective Lines Floor/Ceiling */}
{/* Floor Perspective Rays converging to center */} {/* Ceiling Perspective Rays */} {/* Grid Horizontal Depth Rings */} {/* Glowing Animated Laser Beams Shooting in Perspective */}
{/* Center Floating Scale Metrics Card */}
120K+ Interactions / Hour
{/* ────────────────────────────────────────────────────────── CARD 4: Unified Context ────────────────────────────────────────────────────────── */}

Unified Context

Agents that remember all your conversations across channels.

{/* Animated Connected Node Network (Matching Screenshot 4) */}
{/* Node 1: User Profile */}
{/* Connecting SVG with Traveling Energy Pulses */} {/* User → Center connector */} {/* Curved connectors, Center → 4 channels */} {/* Pulsing nodes with reference palette accents */} {/* Node 2: Center Quto Unified Brain with subtle glow halo */}
Quto AI Core
{/* Node 3: Channel Endpoints Column with sequenced reference colors */}
); }