Live preview
Test Jenya
Test Jenya
Published
import { useEffect, useMemo, useState } from "react";
import { motion } from "framer-motion";
import { MoveRight, PhoneCall } from "lucide-react";
import { Button } from "@/components/ui/button";
function Hero() {
const [titleNumber, setTitleNumber] = useState(0);
const titles = useMemo(
() => ["amazing", "new", "wonderful", "beautiful", "smart"],
[]
);
useEffect(() => {
const timeoutId = setTimeout(() => {
if (titleNumber === titles.length - 1) {
setTitleNumber(0);
} else {
setTitleNumber(titleNumber + 1);
}
}, 2000);
return () => clearTimeout(timeoutId);
}, [titleNumber, titles]);
return (
);
}
export { Hero };
This is something {titles.map((title, index) => ( index ? -150 : 150, opacity: 0, } } > {title} ))}
Managing a small business today is already tough. Avoid further complications by ditching outdated, tedious trade methods. Our goal is to streamline SMB trade, making it easier and faster than ever.
Media
Type: gif
Source: https://cdn.mos.cms.futurecdn.net/se4zHDiwnrQn5zHttUAAbK-1920-80.jpg.webp
Click "Show code" to inspect how this component works.