232 lines
10 KiB
TypeScript
232 lines
10 KiB
TypeScript
|
import { motion } from "framer-motion";
|
|||
|
|
|
|||
|
|
export const DashboardVector = () => {
|
|||
|
|
return (
|
|||
|
|
<div className="relative w-full h-96 flex items-center justify-center">
|
|||
|
|
{/* Main Mobile Device */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 30 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|||
|
|
className="relative z-10"
|
|||
|
|
>
|
|||
|
|
{/* Phone Frame */}
|
|||
|
|
<div className="w-40 h-80 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl p-2 shadow-2xl">
|
|||
|
|
{/* Screen */}
|
|||
|
|
<div className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl relative overflow-hidden">
|
|||
|
|
{/* Top Status Bar */}
|
|||
|
|
<div className="absolute top-0 left-0 right-0 h-8 bg-gradient-to-r from-gray-800 to-gray-700 flex items-center justify-between px-4">
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="w-1 h-1 bg-green-400 rounded-full"></div>
|
|||
|
|
<div className="w-1 h-1 bg-yellow-400 rounded-full"></div>
|
|||
|
|
<div className="w-1 h-1 bg-red-400 rounded-full"></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-white text-xs font-manrope">9:41</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="w-3 h-2 bg-white/60 rounded-sm"></div>
|
|||
|
|
<div className="w-4 h-2 bg-white/80 rounded-sm"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Main Dashboard Content */}
|
|||
|
|
<div className="absolute inset-4 top-12 space-y-3">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<div>
|
|||
|
|
<div className="text-gray-800 text-sm font-bold font-manrope">Hey Balazs!</div>
|
|||
|
|
<div className="text-gray-600 text-xs font-manrope">Good morning</div>
|
|||
|
|
</div>
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ rotate: 360 }}
|
|||
|
|
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
|||
|
|
className="w-6 h-6 bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] rounded-full flex items-center justify-center"
|
|||
|
|
>
|
|||
|
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Weather Card */}
|
|||
|
|
<div className="bg-gradient-to-r from-blue-400 to-blue-500 rounded-2xl p-3 text-white">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<div>
|
|||
|
|
<div className="text-lg font-bold font-manrope">17°</div>
|
|||
|
|
<div className="text-xs opacity-80 font-manrope">New York</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-2xl">☀️</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Stats Row */}
|
|||
|
|
<div className="grid grid-cols-2 gap-2">
|
|||
|
|
<div className="bg-white rounded-xl p-2 shadow-sm">
|
|||
|
|
<div className="text-gray-500 text-xs font-manrope">Revenue</div>
|
|||
|
|
<div className="text-gray-800 text-sm font-bold font-manrope">$67k</div>
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ width: 0 }}
|
|||
|
|
animate={{ width: "70%" }}
|
|||
|
|
transition={{ duration: 2, delay: 1 }}
|
|||
|
|
className="h-1 bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] rounded-full mt-1"
|
|||
|
|
></motion.div>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white rounded-xl p-2 shadow-sm">
|
|||
|
|
<div className="text-gray-500 text-xs font-manrope">Orders</div>
|
|||
|
|
<div className="text-gray-800 text-sm font-bold font-manrope">1,284</div>
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ width: 0 }}
|
|||
|
|
animate={{ width: "85%" }}
|
|||
|
|
transition={{ duration: 2, delay: 1.2 }}
|
|||
|
|
className="h-1 bg-gradient-to-r from-green-400 to-green-500 rounded-full mt-1"
|
|||
|
|
></motion.div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Chart Area */}
|
|||
|
|
<div className="bg-white rounded-xl p-3 shadow-sm">
|
|||
|
|
<div className="text-gray-500 text-xs mb-2 font-manrope">Analytics</div>
|
|||
|
|
<div className="flex items-end justify-between h-16">
|
|||
|
|
{[40, 65, 45, 80, 55, 90, 70].map((height, index) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={index}
|
|||
|
|
initial={{ height: 0 }}
|
|||
|
|
animate={{ height: `${height}%` }}
|
|||
|
|
transition={{ duration: 1, delay: 1.5 + index * 0.1 }}
|
|||
|
|
className="w-2 bg-gradient-to-t from-[#E5195E] to-[#FF6B9D] rounded-full"
|
|||
|
|
></motion.div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Activity Indicator */}
|
|||
|
|
<div className="bg-white rounded-xl p-3 shadow-sm">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="text-gray-500 text-xs font-manrope">Activity</div>
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ scale: [1, 1.2, 1] }}
|
|||
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|||
|
|
className="w-2 h-2 bg-green-400 rounded-full"
|
|||
|
|
></motion.div>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-2">
|
|||
|
|
<svg className="w-full h-6" viewBox="0 0 100 20">
|
|||
|
|
<motion.path
|
|||
|
|
d="M0,15 Q25,5 50,10 T100,8"
|
|||
|
|
stroke="url(#activityGradient)"
|
|||
|
|
strokeWidth="2"
|
|||
|
|
fill="none"
|
|||
|
|
initial={{ pathLength: 0 }}
|
|||
|
|
animate={{ pathLength: 1 }}
|
|||
|
|
transition={{ duration: 2, delay: 2 }}
|
|||
|
|
/>
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="activityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|||
|
|
<stop offset="0%" stopColor="#E5195E" />
|
|||
|
|
<stop offset="100%" stopColor="#FF6B9D" />
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Bottom Navigation */}
|
|||
|
|
<div className="absolute bottom-0 left-0 right-0 h-12 bg-white border-t border-gray-200 flex items-center justify-around">
|
|||
|
|
{['🏠', '📊', '💬', '⚙️'].map((icon, index) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={index}
|
|||
|
|
whileHover={{ scale: 1.2 }}
|
|||
|
|
className={`text-lg ${index === 1 ? 'text-[#E5195E]' : 'text-gray-400'}`}
|
|||
|
|
>
|
|||
|
|
{icon}
|
|||
|
|
</motion.div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* Floating Data Points */}
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ y: [0, -10, 0] }}
|
|||
|
|
transition={{ duration: 3, repeat: Infinity }}
|
|||
|
|
className="absolute top-20 left-16 w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-sm font-bold font-manrope">98%</span>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ y: [0, -15, 0] }}
|
|||
|
|
transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
|
|||
|
|
className="absolute top-24 right-20 w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-lg"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-xs font-bold font-manrope">+24</span>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ y: [0, -12, 0] }}
|
|||
|
|
transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
|
|||
|
|
className="absolute bottom-24 left-20 w-11 h-11 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-xs font-bold font-manrope">📈</span>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ y: [0, -8, 0] }}
|
|||
|
|
transition={{ duration: 2.5, repeat: Infinity, delay: 1.5 }}
|
|||
|
|
className="absolute bottom-20 right-16 w-9 h-9 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-xs font-bold font-manrope">⚡</span>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* Connection Lines */}
|
|||
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="dashboardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stopColor="#E5195E" stopOpacity="0.6" />
|
|||
|
|
<stop offset="50%" stopColor="#3B82F6" stopOpacity="0.4" />
|
|||
|
|
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<motion.path
|
|||
|
|
d="M 25% 35% Q 50% 15% 75% 40%"
|
|||
|
|
stroke="url(#dashboardGradient)"
|
|||
|
|
strokeWidth="2"
|
|||
|
|
fill="none"
|
|||
|
|
strokeDasharray="4,4"
|
|||
|
|
initial={{ pathLength: 0 }}
|
|||
|
|
animate={{ pathLength: 1 }}
|
|||
|
|
transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<motion.path
|
|||
|
|
d="M 20% 65% Q 50% 85% 80% 60%"
|
|||
|
|
stroke="url(#dashboardGradient)"
|
|||
|
|
strokeWidth="2"
|
|||
|
|
fill="none"
|
|||
|
|
strokeDasharray="4,4"
|
|||
|
|
initial={{ pathLength: 0 }}
|
|||
|
|
animate={{ pathLength: 1 }}
|
|||
|
|
transition={{ duration: 2.5, repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
{/* Technology Labels */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
transition={{ duration: 1, delay: 2.5 }}
|
|||
|
|
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4"
|
|||
|
|
>
|
|||
|
|
<div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
|
|||
|
|
React Native
|
|||
|
|
</div>
|
|||
|
|
<div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
|
|||
|
|
Dashboard
|
|||
|
|
</div>
|
|||
|
|
<div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
|
|||
|
|
Analytics
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|