Evandro Fonseca Junior
b791b7de9e
Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface RotatingTextProps {
|
|
words: string[];
|
|
className?: string;
|
|
interval?: number; // Intervalo em milissegundos para a rotação
|
|
}
|
|
|
|
export function RotatingText({
|
|
words,
|
|
className,
|
|
interval = 3000,
|
|
}: RotatingTextProps) {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
|
|
}, interval);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [words, interval]);
|
|
|
|
return (
|
|
<div className={cn("relative inline-block min-h-[1.5em]", className)}>
|
|
<AnimatePresence mode="wait">
|
|
<motion.span
|
|
key={currentIndex}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="block text-center"
|
|
>
|
|
{words[currentIndex]}
|
|
</motion.span>
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|