Automated Tasks Panel

1"use client";
2 
3import * as React from "react";
4import { Card, CardContent } from "@/components/ui/card";
5import { Badge } from "@/components/ui/badge";
6import { motion } from "motion/react";
7import { Bell, DollarSign, Users, Share2, FileBarChart } from "lucide-react";
8 
9const tasks = [
10  {
11    title: "AI-powered notifications",
12    subtitle: "Smart alerts for critical events",
13    icon: <Bell className="w-4 h-4" />,
14  },
15  {
16    title: "Automated payroll",
17    subtitle: "Error-free salary processing",
18    icon: <DollarSign className="w-4 h-4" />,
19  },
20  {
21    title: "Employee insights",
22    subtitle: "Track productivity in real-time",
23    icon: <Users className="w-4 h-4" />,
24  },
25  {
26    title: "Social campaigns",
27    subtitle: "AI-curated content suggestions",
28    icon: <Share2 className="w-4 h-4" />,
29  },
30  {
31    title: "AI-driven reports",
32    subtitle: "Weekly insights & performance",
33    icon: <FileBarChart className="w-4 h-4" />,
34  },
35];
36 
37export default function AutomatedTasksPanel() {
38  return (
39    <section className="relative w-full py-20 bg-background text-foreground">
40      <div className="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-2 items-center gap-12">
41        {/* LEFT SIDE - Task Loop with Vertical Bar */}
42        <div className="relative w-full max-w-sm">
43          <Card className="overflow-hidden bg-muted/30 dark:bg-muted/20 backdrop-blur-md shadow-xl rounded-lg">
44            <CardContent className="relative h-[320px] p-0 overflow-hidden">
45              {/* Scrollable Container */}
46              <div className="relative h-full overflow-hidden">
47                {/* Motion list */}
48                <motion.div
49                  className="flex flex-col gap-2 absolute w-full"
50                  animate={{ y: ["0%", "-50%"] }}
51                  transition={{
52                    repeat: Infinity,
53                    repeatType: "loop",
54                    duration: 14,
55                    ease: "linear",
56                  }}
57                >
58                  {[...tasks, ...tasks].map((task, i) => (
59                    <div
60                      key={i}
61                      className="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700 relative"
62                    >
63                      {/* Icon + Content */}
64                      <div className="flex items-center justify-between flex-1">
65                        <div className="flex items-center gap-2">
66// … truncated