Components
A modern, animated AI Use Case Explorer section built with React, Framer Motion, and Lucide Icons. Dynamic tab-based navigation with animated cards for use cases (e.g., Healthcare, Finance, Autonomous Systems) .Smooth scroll-based and interactive animations using Framer Motion
Loading preview...
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
Heart,
Car,
Briefcase,
ArrowRight,
} from 'lucide-react';
const UseCases = () => {
const [activeCase, setActiveCase] = useState(0);
const useCases = [
{
icon: Heart,
title: "Healthcare AI",
description: "Revolutionize patient care with diagnostic assistance and treatment optimization systems.",
features: ["Medical image analysis", "Treatment recommendations", "Patient monitoring", "Drug discovery"],
color: "from-green-500 to-emerald-500"
},
{
icon: Car,
title: "Autonomous Systems",
description: "Power the future of transportation with advanced computer vision and decision-making AI.",
features: ["Object detection", "Path planning", "Real-time navigation", "Safety systems"],
color: "from-orange-500 to-red-500"
},
{
icon: Briefcase,
title: "Financial Services",
description: "Enhance risk management and trading strategies with sophisticated financial AI models.",
features: ["Risk assessment", "Fraud detection", "Algorithmic trading", "Compliance monitoring"],
color: "from-indigo-500 to-blue-500"
},
];
return (
<section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50 relative overflow-hidden transition-all duration-700 dark:bg-gradient-to-br dark:from-gray-800 dark:to-gray-950">
{/* Background Pattern */}
<div className={`absolute inset-0 bg-[linear-gradient(45deg,rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(-45deg,rgba(59,130,246,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(45deg,rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(-45deg,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-[size:20px_20px]`} />
{/* Floating Elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(6)].map((_, i) => (
<motion.div
key={i}
className="absolute w-32 h-32 bg-gradient-to-r from-blue-400/10 to-purple-400/10 rounded-full blur-xl"
animate={{
x: [0, 100, 0],
y: [0, -50, 0],
scale: [1, 1.2, 1],
rotate: [0, 180, 360],
}}
transition={{
duration: 10 + i * 2,
repeat: Infinity,
repeatType: "reverse",
}}
style={{
left: `${10 + i * 15}%`,
top: `${20 + i * 10}%`,
}}
/>
))}
</div>
<div className="relative z-10 max-w-7xl mx-auto px-4">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<motion.h2
className={`text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent`}
animate={{
backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
}}
transition={{
duration: 8,
repeat: Infinity,
repeatType: "reverse"
}}
>
Endless Possibilities
</motion.h2>
<motion.p
className={`text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
>
Discover how our AI technology transforms industries and creates new opportunities
</motion.p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Use Case Tabs */}
<div className="space-y-4">
{useCases.map((useCase, index) => {
const IconComponent = useCase.icon;
return (
<motion.button
key={index}
onClick={() => setActiveCase(index)}
whileHover={{
scale: 1.02,
x: 10,
transition: { duration: 0.2 }
}}
whileTap={{ scale: 0.98 }}
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
className={`w-full text-left p-6 rounded-xl border transition-all duration-300 backdrop-blur-sm ${
activeCase === index
? "dark:bg-gray-700 border-blue-500 shadow-lg shadow-blue-500/25 bg-white dark:border-blue-400 dark:shadow-lg dark:shadow-blue-400/25"
: "dark:bg-gray-800/50 dark:border-gray-600 dark:hover:border-gray-500 bg-white/70 border-gray-300 hover:border-gray-400"
}`}
>
<div className="flex items-center space-x-4">
<motion.div
className={`p-3 rounded-lg bg-gradient-to-r ${useCase.color}`}
animate={activeCase === index ? {
scale: [1, 1.1, 1],
rotate: [0, 5, -5, 0]
} : {}}
transition={{ duration: 0.5 }}
>
<IconComponent className="w-6 h-6 text-white" />
</motion.div>
<div className="flex-1">
<h3 className={`text-xl font-bold text-gray-900 dark:text-white mb-2`}>
{useCase.title}
</h3>
<p className={`text-gray-600 dark:text-gray-400 text-sm`}>
{useCase.description}
</p>
</div>
<motion.div
animate={activeCase === index ? { rotate: 90 } : { rotate: 0 }}
transition={{ duration: 0.3 }}
>
<ArrowRight className={`w-5 h-5 transition-colors ${
activeCase === index ? 'text-blue-400' : "text-gray-600 dark:text-gray-400"
}`} />
</motion.div>
</div>
</motion.button>
);
})}
</div>
{/* Active Use Case Details */}
<div className="relative">
<AnimatePresence mode="wait">
<motion.div
key={activeCase}
initial={{ opacity: 0, x: 50, rotateY: 90 }}
animate={{ opacity: 1, x: 0, rotateY: 0 }}
exit={{ opacity: 0, x: -50, rotateY: -90 }}
transition={{ duration: 0.2, stiffness: 100}}
className={`bg-white/80 border-gray-200 dark:bg-gray-800/80 dark:border-gray-700 backdrop-blur-sm rounded-xl p-8 border shadow-xl`}
>
<motion.div
initial={{ scale: 0, rotate: -180 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
className={`inline-flex p-4 rounded-lg bg-gradient-to-r ${useCases[activeCase].color} mb-6`}
>
{(() => {
const CurrentIcon = useCases[activeCase].icon;
return <CurrentIcon className="w-8 h-8 text-white" />;
})()}
</motion.div>
<motion.h3
className={`text-2xl font-bold text-gray-900 dark:text-white mb-4`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
{useCases[activeCase].title}
</motion.h3>
<motion.p
className={`text-gray-600 dark:text-gray-400 mb-6 leading-relaxed`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4 }}
>
{useCases[activeCase].description}
</motion.p>
<div className="space-y-3">
<motion.h4
className={`text-lg font-semibold text-gray-900 dark:text-white`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5 }}
>
Key Features:
</motion.h4>
{useCases[activeCase].features.map((feature: string, index: number) => (
<motion.div
key={index}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.6 + index * 0.1 }}
className="flex items-center space-x-3"
>
<motion.div
className="w-2 h-2 bg-blue-400 rounded-full"
animate={{
scale: [1, 1.5, 1],
opacity: [0.7, 1, 0.7]
}}
transition={{
duration: 2,
repeat: Infinity,
delay: index * 0.2
}}
/>
<span className="text-gray-600 dark:text-gray-400">{feature}</span>
</motion.div>
))}
</div>
</motion.div>
</AnimatePresence>
</div>
</div>
</div>
</section>
);
};
export default UseCases;