Initial commit for iiEasy: all files included

components/BoldIdeasCarousel.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ArrowTopRightIcon } from './icons';
+
+interface BoldIdeasCarouselProps {
+  ideas: string[];
+  direction?: 'normal' | 'reverse';
+  duration?: string;
+}
+
+const BoldIdeasCarousel: React.FC<BoldIdeasCarouselProps> = ({ ideas, direction = 'normal', duration = '72s' }) => {
+  return (
+    <div className="w-full overflow-hidden">
+      <div 
+        className="flex w-fit" 
+        style={{ animation: `auto-scroll ${duration} linear infinite`, animationDirection: direction }}
+      >
+        {/* Render the list twice for seamless loop */}
+        {[...ideas, ...ideas].map((idea, index) => (
+          <div key={`${direction}-idea-${index}`} className="group relative mx-1 flex w-72 items-center justify-center self-stretch rounded-md bg-slate-50 p-4 transition-all hover:bg-slate-100">
+            <a href="#" onClick={(e) => e.preventDefault()} className="text-sm text-center text-slate-700 font-medium cursor-default">
+              {idea}
+              <ArrowTopRightIcon className="ml-1.5 inline-block h-3 w-3 -translate-y-px transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-1" />
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BoldIdeasCarousel;