aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/src/components/StatsCard.tsx
diff options
context:
space:
mode:
authorLofiSu <163713803+LofiSu@users.noreply.github.com>2025-01-26 04:27:57 +0000
committerLofiSu <163713803+LofiSu@users.noreply.github.com>2025-01-26 04:27:57 +0000
commit60f54181d6d5e21d3140953dece51fee7a0d40c5 (patch)
tree6cb9cd1ff43125126f06a09aab95ab7bf108f61d /src/components/StatsCard.tsx
parent2a65ec749b0b1974b757ecf175b3d638d1025aef (diff)
downloadHydroRollSite-60f54181d6d5e21d3140953dece51fee7a0d40c5.tar.gz
HydroRollSite-60f54181d6d5e21d3140953dece51fee7a0d40c5.zip
home components
Diffstat (limited to 'src/components/StatsCard.tsx')
-rw-r--r--src/components/StatsCard.tsx26
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>
+ );
+};