232 lines
9.9 KiB
TypeScript
232 lines
9.9 KiB
TypeScript
|
import { motion } from "framer-motion";
|
|||
|
|
|
|||
|
|
export const MobileAppVector = () => {
|
|||
|
|
return (
|
|||
|
|
<div className="relative w-full h-96 flex items-center justify-center overflow-hidden">
|
|||
|
|
{/* Subtle Background */}
|
|||
|
|
<div className="absolute inset-0 opacity-10">
|
|||
|
|
<svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
|
|||
|
|
<defs>
|
|||
|
|
<radialGradient id="bgGradient" cx="50%" cy="50%" r="40%">
|
|||
|
|
<stop offset="0%" stopColor="#E5195E" stopOpacity="0.08" />
|
|||
|
|
<stop offset="100%" stopColor="#3B82F6" stopOpacity="0.04" />
|
|||
|
|
</radialGradient>
|
|||
|
|
</defs>
|
|||
|
|
<circle cx="200" cy="200" r="120" fill="url(#bgGradient)" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Main iPhone Device */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 30 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|||
|
|
className="relative z-20"
|
|||
|
|
>
|
|||
|
|
<div className="relative">
|
|||
|
|
{/* iPhone Frame */}
|
|||
|
|
<div className="w-40 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-[2rem] p-1.5 shadow-2xl">
|
|||
|
|
{/* Screen */}
|
|||
|
|
<div className="w-full h-full bg-black rounded-[1.5rem] relative overflow-hidden">
|
|||
|
|
{/* Dynamic Island */}
|
|||
|
|
<div className="absolute top-2 left-1/2 transform -translate-x-1/2 w-20 h-5 bg-black rounded-full z-30"></div>
|
|||
|
|
|
|||
|
|
{/* App Interface */}
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700 rounded-[1.5rem]">
|
|||
|
|
{/* Status Bar */}
|
|||
|
|
<div className="flex justify-between items-center px-4 pt-8 pb-3">
|
|||
|
|
<div className="text-white text-xs font-manrope">9:41</div>
|
|||
|
|
<div className="flex space-x-1">
|
|||
|
|
<div className="w-3 h-1.5 bg-white/80 rounded-sm"></div>
|
|||
|
|
<div className="w-3 h-1.5 bg-white/60 rounded-sm"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* App Content */}
|
|||
|
|
<div className="px-4 space-y-3">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="h-3 bg-white/90 rounded w-24 mx-auto mb-2"></div>
|
|||
|
|
<div className="h-2 bg-white/70 rounded w-32 mx-auto"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Feature Cards */}
|
|||
|
|
<div className="space-y-2.5">
|
|||
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={i}
|
|||
|
|
initial={{ x: -15, opacity: 0 }}
|
|||
|
|
animate={{ x: 0, opacity: 1 }}
|
|||
|
|
transition={{ duration: 0.4, delay: 0.6 + i * 0.1 }}
|
|||
|
|
className="bg-white/15 backdrop-blur-sm rounded-lg p-2.5 border border-white/20"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<div className="w-6 h-6 bg-white/30 rounded-md"></div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className={`h-1.5 bg-white/70 rounded mb-1 ${i === 0 ? 'w-20' : i === 1 ? 'w-16' : 'w-18'}`}></div>
|
|||
|
|
<div className={`h-1 bg-white/50 rounded ${i === 0 ? 'w-12' : i === 1 ? 'w-14' : 'w-10'}`}></div>
|
|||
|
|
</div>
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ scale: [1, 1.1, 1] }}
|
|||
|
|
transition={{ duration: 2, repeat: Infinity, delay: i * 0.7 }}
|
|||
|
|
className="w-4 h-4 bg-white/40 rounded-full"
|
|||
|
|
></motion.div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Bottom Navigation */}
|
|||
|
|
<div className="absolute bottom-6 left-4 right-4">
|
|||
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-2 border border-white/20">
|
|||
|
|
<div className="flex justify-around">
|
|||
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={i}
|
|||
|
|
animate={{
|
|||
|
|
backgroundColor: i === 1 ? "rgba(255,255,255,0.6)" : "rgba(255,255,255,0.2)",
|
|||
|
|
}}
|
|||
|
|
transition={{ duration: 0.3 }}
|
|||
|
|
className="w-6 h-6 rounded-lg flex items-center justify-center"
|
|||
|
|
>
|
|||
|
|
<div className="w-3 h-3 bg-white/70 rounded"></div>
|
|||
|
|
</motion.div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* React Native Icon */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, scale: 0 }}
|
|||
|
|
animate={{ opacity: 1, scale: 1 }}
|
|||
|
|
transition={{ duration: 0.5, delay: 1 }}
|
|||
|
|
className="absolute top-16 left-24 z-25"
|
|||
|
|
>
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ y: [0, -6, 0] }}
|
|||
|
|
transition={{ duration: 2.5, repeat: Infinity }}
|
|||
|
|
className="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg border border-white/20"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-sm font-manrope">⚛️</span>
|
|||
|
|
</motion.div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* Code Window */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, x: 20 }}
|
|||
|
|
animate={{ opacity: 1, x: 0 }}
|
|||
|
|
transition={{ duration: 0.6, delay: 1.2 }}
|
|||
|
|
className="absolute top-20 right-16 z-25"
|
|||
|
|
>
|
|||
|
|
<div className="bg-gray-900/80 backdrop-blur-sm rounded-lg p-2 border border-gray-700 shadow-lg w-24">
|
|||
|
|
<div className="flex items-center space-x-1 mb-1">
|
|||
|
|
<div className="w-1.5 h-1.5 bg-red-500 rounded-full"></div>
|
|||
|
|
<div className="w-1.5 h-1.5 bg-yellow-500 rounded-full"></div>
|
|||
|
|
<div className="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ width: 0 }}
|
|||
|
|
animate={{ width: "70%" }}
|
|||
|
|
transition={{ duration: 0.8, delay: 1.5 }}
|
|||
|
|
className="h-0.5 bg-blue-400 rounded"
|
|||
|
|
></motion.div>
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ width: 0 }}
|
|||
|
|
animate={{ width: "50%" }}
|
|||
|
|
transition={{ duration: 0.8, delay: 1.7 }}
|
|||
|
|
className="h-0.5 bg-green-400 rounded"
|
|||
|
|
></motion.div>
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ width: 0 }}
|
|||
|
|
animate={{ width: "80%" }}
|
|||
|
|
transition={{ duration: 0.8, delay: 1.9 }}
|
|||
|
|
className="h-0.5 bg-purple-400 rounded"
|
|||
|
|
></motion.div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* App Store & Google Play */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 15 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.6, delay: 1.4 }}
|
|||
|
|
className="absolute bottom-12 left-20 z-25"
|
|||
|
|
>
|
|||
|
|
<div className="flex space-x-2">
|
|||
|
|
<motion.div
|
|||
|
|
whileHover={{ scale: 1.05 }}
|
|||
|
|
animate={{ rotate: [0, 2, -2, 0] }}
|
|||
|
|
transition={{ duration: 4, repeat: Infinity }}
|
|||
|
|
className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center shadow-lg"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-sm font-manrope">📱</span>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
whileHover={{ scale: 1.05 }}
|
|||
|
|
animate={{ rotate: [0, -2, 2, 0] }}
|
|||
|
|
transition={{ duration: 4, repeat: Infinity, delay: 2 }}
|
|||
|
|
className="w-10 h-10 bg-gradient-to-br from-green-600 to-green-700 rounded-lg flex items-center justify-center shadow-lg"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-sm font-manrope">🤖</span>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* Technology Labels */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
transition={{ duration: 0.8, delay: 2 }}
|
|||
|
|
className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-30"
|
|||
|
|
>
|
|||
|
|
{[
|
|||
|
|
{ name: "iOS", color: "from-blue-500 to-blue-600" },
|
|||
|
|
{ name: "Android", color: "from-green-500 to-green-600" },
|
|||
|
|
{ name: "React Native", color: "from-cyan-500 to-cyan-600" }
|
|||
|
|
].map((tech, index) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={tech.name}
|
|||
|
|
initial={{ scale: 0 }}
|
|||
|
|
animate={{ scale: 1 }}
|
|||
|
|
transition={{ duration: 0.3, delay: 2.2 + index * 0.1 }}
|
|||
|
|
whileHover={{ scale: 1.05 }}
|
|||
|
|
className={`px-2 py-1 bg-gradient-to-r ${tech.color} bg-opacity-20 text-white border border-white/20 rounded-full text-xs font-manrope backdrop-blur-sm`}
|
|||
|
|
>
|
|||
|
|
{tech.name}
|
|||
|
|
</motion.div>
|
|||
|
|
))}
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{/* Subtle Connecting Line */}
|
|||
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20 z-5">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stopColor="#E5195E" stopOpacity="0.4" />
|
|||
|
|
<stop offset="100%" stopColor="#3B82F6" stopOpacity="0.4" />
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<motion.path
|
|||
|
|
d="M 30% 40% Q 50% 30% 70% 50%"
|
|||
|
|
stroke="url(#connectionGradient)"
|
|||
|
|
strokeWidth="1"
|
|||
|
|
fill="none"
|
|||
|
|
strokeDasharray="3,3"
|
|||
|
|
initial={{ pathLength: 0 }}
|
|||
|
|
animate={{ pathLength: 1 }}
|
|||
|
|
transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", delay: 2.5 }}
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|