06029fbc60
Create apps/tutorial - a beautiful, animated Next.js slideshow that explains TPMJS concepts from basic to advanced: Slides: - Welcome: Gradient TPMJS title with animated floating orbs - Problem: Chaotic floating icons showing fragmented AI tools - Solution: Icons organizing into a neat grid - How It Works: Flow diagram (npm → Discovery → Registry → AI Agent) - Discovery: Animated counters showing real-time sync stats - Integration: Typewriter code animation showing SDK usage - Quality Scoring: Animated gauge and progress bars - Tool Detail: Mock tool card with all metadata - Get Started: CTA buttons linking to tpmjs.com Features: - Framer Motion animations with spring physics - Keyboard navigation (arrows, space, enter) - Mouse navigation (arrows, progress dots) - Touch-friendly swipe support - Dark theme with cyan/purple gradient accents - Responsive design
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface SlideProgressProps {
|
|
currentSlide: number;
|
|
totalSlides: number;
|
|
goTo: (index: number) => void;
|
|
}
|
|
|
|
export function SlideProgress({
|
|
currentSlide,
|
|
totalSlides,
|
|
goTo,
|
|
}: SlideProgressProps): React.ReactElement {
|
|
return (
|
|
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3">
|
|
{Array.from({ length: totalSlides }).map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => goTo(index)}
|
|
className="group relative p-1"
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
>
|
|
<div
|
|
className={`
|
|
w-2 h-2 rounded-full transition-all duration-300
|
|
${
|
|
index === currentSlide
|
|
? 'bg-white scale-125'
|
|
: 'bg-white/30 group-hover:bg-white/50'
|
|
}
|
|
`}
|
|
/>
|
|
{index === currentSlide && (
|
|
<motion.div
|
|
layoutId="active-dot"
|
|
className="absolute inset-0 m-auto w-4 h-4 rounded-full border border-white/50"
|
|
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
|
/>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|