Components
Loading preview...
This code implements a reusable React component that displays a visually appealing support card. The card features a concise support tag, a main text message encouraging users to contact support, and a dynamically cycling list of example questions. The cycling effect uses Framer Motion for smooth, animated transitions. The component solves the problem of creating an engaging and informative support section on a website or application. It enhances user experience by providing easily digestible information and a clear call to action. The component works by first rendering a main card with a header (tag), a descriptive text, and a button to contact support. Below the text is a dynamically updated example question that uses Framer Motion to simulate a typewriter effect. This animation is achieved by sequentially displaying each letter with a short delay, creating a visually engaging experience. The example questions are cycled through at a set interval using `setInterval` and `useState`. Framer Motion is used to handle the animations, providing smooth transitions for the text and visual effects. The component uses standard HTML elements like `<div>`, `<p>`, and `<button>`, styled with a presumed CSS framework (inferred from class names like `flex`, `items-center`, and `bg-neutral-100`). This component could be applied in various scenarios, such as help centers, FAQ sections, landing pages, or any part of a web application where a clear and visually appealing support prompt is needed. For instance, it could be integrated into an e-commerce checkout process, a SaaS dashboard, or a help section within a mobile app. The animation adds an element of dynamism and visual interest, making the support information more memorable and engaging.
npx shadcn@latest add https://21st.dev/r/uniquesonu/animated-support-card-componentimport { Example } from "@/components/ui/animated-support-card-component";
export default function DemoOne() {
return <Example />;
}