"use client"; import { animate, motion } from "motion/react"; import React, { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { GoCopilot } from "react-icons/go"; export default function CardDemo() { return ( Damn good card A card that showcases a set of tools that you use to create your product. ); } const Skeleton = () => { const scale = [1, 1.1, 1]; const transform = ["translateY(0px)", "translateY(-4px)", "translateY(0px)"]; const sequence = [ [ ".circle-1", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-2", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-3", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-4", { scale, transform, }, { duration: 0.8 }, ], [ ".circle-5", { scale, transform, }, { duration: 0.8 }, ], ]; useEffect(() => { animate(sequence, { // @ts-ignore repeat: Infinity, repeatDelay: 1, }); }, []); return (

); }; const Sparkles = () => { const randomMove = () => Math.random() * 2 - 1; const randomOpacity = () => Math.random(); const random = () => Math.random(); return (

{[...Array(12)].map((_, i) => ( ))}

); }; export const Card = ({ className, children, }: { className?: string; children: React.ReactNode; }) => { return (

{children}

); }; export const CardTitle = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

{children}

); }; export const CardDescription = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

{children}

); }; export const CardSkeletonContainer = ({ className, children, showGradient = true, }: { className?: string; children: React.ReactNode; showGradient?: boolean; }) => { return (

{children}

); }; const Container = ({ className, children, }: { className?: string; children: React.ReactNode; }) => { return (

{children}

); }; export const ClaudeLogo = ({ className }: { className?: string }) => { return ( ); }; export const OpenAILogo = ({ className }: { className?: string }) => { return ( ); }; export const GeminiLogo = ({ className }: { className?: string }) => { return ( ); }; export const MetaIconOutline = ({ className }: { className?: string }) => { return ( ); };

Cards Demo 3

Instalação