import { useState } from 'react' import { motion } from 'framer-motion' import { Button } from "/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "/components/ui/card" import { ArrowLeft, ArrowRight } from "lucide-react" const stepsData = [ { id: 1, title: "Requirements Gathering", description: "Collect and analyze the requirements for the application. This includes understanding the user needs, business goals, and technical constraints.", image:

, }, { id: 2, title: "Design", description: "Create the design for the application, including wireframes, mockups, and user interface designs. This step ensures the application is user-friendly and visually appealing.", image:

, }, { id: 3, title: "Development", description: "Build the application using the chosen technologies and frameworks. This involves writing code, integrating APIs, and creating the backend and frontend components.", image:

, }, { id: 4, title: "Testing", description: "Test the application to ensure it meets the requirements and functions correctly. This includes unit testing, integration testing, and user acceptance testing.", image:

, }, { id: 5, title: "Deployment", description: "Deploy the application to a production environment. This involves setting up servers, configuring databases, and ensuring the application is accessible to users.", image:

, }, { id: 6, title: "Maintenance", description: "Maintain and update the application to fix bugs, add new features, and improve performance. This ensures the application remains reliable and up-to-date.", image:

, }, ] export default function AppDevStepsCarousel() { const [currentIndex, setCurrentIndex] = useState(0) const handleNext = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % stepsData.length) } const handlePrev = () => { setCurrentIndex((prevIndex) => (prevIndex - 1 + stepsData.length) % stepsData.length) } return (

{stepsData[currentIndex].image} {stepsData[currentIndex].title} {stepsData[currentIndex].description}

) }