import { Card, CardContent } from "@/components/ui/card"; import { motion } from "framer-motion"; import { Heart, Sun, Car, Users, Sparkles } from "lucide-react";

export default function IntroducingRagesh() { const slides = [ { icon: <Users className="w-10 h-10 text-pink-600" />, title: "Family & Culture", caption: "My roots, culture, and family keep me grounded.", image: "https://cdn.pixabay.com/photo/2016/11/29/03/53/india-1867845_1280.jpg", }, { icon: <Heart className="w-10 h-10 text-red-500" />, title: "Love & Relationship", caption: "Love inspires me – Jashmitha is a big part of my life.", image: "https://cdn.pixabay.com/photo/2016/11/29/12/54/heart-1869811_1280.jpg", }, { icon: <Car className="w-10 h-10 text-blue-600" />, title: "Passions", caption: "Cars and technology fuel my passion.", image: "https://cdn.pixabay.com/photo/2017/01/06/19/15/car-1957037_1280.jpg", }, { icon: <Sparkles className="w-10 h-10 text-yellow-500" />, title: "Personality", caption: "I value loyalty, care, and supporting others.", image: "https://cdn.pixabay.com/photo/2017/08/30/07/58/hands-2692453_1280.jpg", }, { icon: <Sun className="w-10 h-10 text-orange-500" />, title: "Future & Dreams", caption: "Focused on growth, success, and building a bright future.", image: "https://cdn.pixabay.com/photo/2015/07/17/22/43/road-849796_1280.jpg", }, ];

return ( <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 bg-gray-50 min-h-screen"> {slides.map((slide, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: index * 0.2 }} > <Card className="rounded-2xl shadow-lg overflow-hidden"> <img src={slide