diff options
| author | 2025-01-26 04:27:57 +0000 | |
|---|---|---|
| committer | 2025-01-26 04:27:57 +0000 | |
| commit | 60f54181d6d5e21d3140953dece51fee7a0d40c5 (patch) | |
| tree | 6cb9cd1ff43125126f06a09aab95ab7bf108f61d /src/components/StatsCard.tsx | |
| parent | 2a65ec749b0b1974b757ecf175b3d638d1025aef (diff) | |
| download | HydroRollSite-60f54181d6d5e21d3140953dece51fee7a0d40c5.tar.gz HydroRollSite-60f54181d6d5e21d3140953dece51fee7a0d40c5.zip | |
home components
Diffstat (limited to 'src/components/StatsCard.tsx')
| -rw-r--r-- | src/components/StatsCard.tsx | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx new file mode 100644 index 0000000..237f5dc --- /dev/null +++ b/src/components/StatsCard.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { Card } from '@nextui-org/react'; + +interface StatsCardProps { + title: string; + value: string; +} + +export const StatsCard: React.FC<StatsCardProps> = ({ title, value }) => { + return ( + <motion.div + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + transition={{ duration: 0.5 }} + viewport={{ once: true }} + > + <Card className="p-6 bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700"> + <div className="text-center"> + <h3 className="text-2xl font-bold text-white mb-2">{value}</h3> + <p className="text-gray-400">{title}</p> + </div> + </Card> + </motion.div> + ); +}; |
