Web Application Development

Creating interactive and dynamic applications that can be accessed and used through web browsers for your clients and teams.

Process Automation

Streamline and execute repetitive tasks, reducing manual effort, increasing efficiency, and minimizing errors within various business processes.

Data Management

Organizing, storing, securing, and ensuring the accuracy and accessibility of data to support informed decision-making and business operations.

Visualization & Reporting

Presenting your data in a visually intuitive and useful manner, gain valuable insights and make data-driven decisions with clarity and efficiency.

"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, PanInfo } from "framer-motion"; const SparklesIcon = ({ className }) => ; const ChevronLeftIcon = ({ className }) => ; const ChevronRightIcon = ({ className }) => ; const Badge = ({ children, className }) =>
{children}
; const cardData = [{ id: 1, imageUrl: "https://i.pinimg.com/736x/d6/8a/12/d68a121e960094f99ad8acd37505fb7d.jpg", title: "Crimson Forest" }, { id: 2, imageUrl: "https://i.pinimg.com/736x/21/16/f7/2116f71f9d51d875e44d809f074ff079.jpg", title: "Misty Mountains" }, { id: 3, imageUrl: "https://i.pinimg.com/1200x/fe/c2/0d/fec20d2958059b8463bffb138d4eaac6.jpg", title: "Floating Islands" }, { id: 4, imageUrl: "https://i.pinimg.com/736x/84/dc/62/84dc62de850a34a9d420c97f3a2d58f4.jpg", title: "Crystal Cave" }, { id: 5, imageUrl: "https://i.pinimg.com/1200x/be/c3/7e/bec37e2c43e703f922f887db2578ce2e.jpg", title: "Sunset Peaks" }, { id: 6, imageUrl: "https://i.pinimg.com/736x/47/dd/47/47dd47b0d66c2fa641e03e370bcb5433.jpg", title: "Night Sky" }, { id: 7, imageUrl: "https://i.pinimg.com/736x/05/01/bc/0501bcd327d9df915e83154bbf9456e3.jpg", title: "Ancient Ruins" }, { id: 8, imageUrl: "https://i.pinimg.com/736x/c1/46/be/c146bebffca026d2c4fa76cc85aac917.jpg", title: "Magical Tree" }, { id: 9, imageUrl: "https://i.pinimg.com/736x/91/7a/51/917a51df0d444def3cade8d626305a67.jpg", title: "Celestial Waters" }]; export default function Carousel() { const [activeIndex, setActiveIndex] = useState(Math.floor(cardData.length / 2)); const [isPaused, setIsPaused] = useState(false); const autoplayIntervalRef = useRef(null); const autoplayDelay = 3000; const goToNext = () => { setActiveIndex(prev => (prev + 1) % cardData.length); }; useEffect(() => { if (!isPaused) { autoplayIntervalRef.current = setInterval(goToNext, autoplayDelay); } return () => { if (autoplayIntervalRef.current) { clearInterval(autoplayIntervalRef.current); } }; }, [isPaused, activeIndex]); const changeSlide = newIndex => { const newSafeIndex = (newIndex + cardData.length) % cardData.length; setActiveIndex(newSafeIndex); if (autoplayIntervalRef.current) { clearInterval(autoplayIntervalRef.current); } if (!isPaused) { autoplayIntervalRef.current = setInterval(goToNext, autoplayDelay); } }; const onDragEnd = (event, info) => { const dragThreshold = 75; const dragOffset = info.offset.x; if (dragOffset > dragThreshold) { changeSlide(activeIndex - 1); } else if (dragOffset < -dragThreshold) { changeSlide(activeIndex + 1); } }; return
setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
Enhanced Carousel
{cardData.map((card, index) => )}
{cardData.map((_, index) =>
; } function Card({ card, index, activeIndex, totalCards }) { let offset = index - activeIndex; if (offset > totalCards / 2) { offset -= totalCards; } else if (offset < -totalCards / 2) { offset += totalCards; } const isVisible = Math.abs(offset) <= 1; const animate = { x: `${offset * 50}%`, scale: offset === 0 ? 1 : 0.8, zIndex: totalCards - Math.abs(offset), opacity: isVisible ? 1 : 0, transition: { type: "spring", stiffness: 260, damping: 30 } }; return
{card.title} { const target = e.target; target.onerror = null; target.src = "https://placehold.co/400x600/1e1e1e/ffffff?text=Image+Missing"; }} />

{card.title}

; }