feat: add interactive tutorial slideshow app
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
This commit is contained in:
Ajax Davis
parent
f86794e463
commit
29e1b9d9ac
24 changed files with 1712 additions and 4 deletions
6
apps/tutorial/next-env.d.ts
vendored
Normal file
6
apps/tutorial/next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
8
apps/tutorial/next.config.ts
Normal file
8
apps/tutorial/next.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import type { NextConfig } from 'next';
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
transpilePackages: ['@tpmjs/ui', '@tpmjs/utils'],
|
||||
reactStrictMode: true,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
35
apps/tutorial/package.json
Normal file
35
apps/tutorial/package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "@tpmjs/tutorial",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --port 3001",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint .",
|
||||
"type-check": "tsc --noEmit",
|
||||
"clean": "rm -rf .next .turbo"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tpmjs/ui": "workspace:*",
|
||||
"@tpmjs/utils": "workspace:*",
|
||||
"framer-motion": "^11.15.0",
|
||||
"next": "^16.0.8",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tpmjs/eslint-config": "workspace:*",
|
||||
"@tpmjs/tailwind-config": "workspace:*",
|
||||
"@tpmjs/tsconfig": "workspace:*",
|
||||
"@types/node": "^22.10.2",
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-config-next": "^16.0.4",
|
||||
"postcss": "^8.5.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.9.3"
|
||||
}
|
||||
}
|
||||
6
apps/tutorial/postcss.config.js
Normal file
6
apps/tutorial/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
133
apps/tutorial/src/app/globals.css
Normal file
133
apps/tutorial/src/app/globals.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Dark mode by default for dramatic slideshow */
|
||||
--background: 210 10% 5%;
|
||||
--surface: 210 10% 8%;
|
||||
--surface-elevated: 210 10% 12%;
|
||||
--foreground: 210 10% 90%;
|
||||
--foreground-secondary: 210 8% 60%;
|
||||
--foreground-tertiary: 210 6% 40%;
|
||||
--foreground-muted: 210 6% 30%;
|
||||
--border: 210 10% 20%;
|
||||
--border-strong: 210 12% 30%;
|
||||
--border-subtle: 210 8% 15%;
|
||||
|
||||
/* Accent colors - cyan and purple */
|
||||
--accent-cyan: 186 100% 50%;
|
||||
--accent-purple: 260 80% 60%;
|
||||
--accent-gradient: linear-gradient(135deg, hsl(186 100% 50%) 0%, hsl(260 80% 60%) 100%);
|
||||
|
||||
--primary: 210 10% 98%;
|
||||
--primary-foreground: 210 10% 5%;
|
||||
|
||||
/* Radii and shadows */
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html, body, #__next {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-gradient {
|
||||
background: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.bg-gradient-accent {
|
||||
background: var(--accent-gradient);
|
||||
}
|
||||
|
||||
.glow-cyan {
|
||||
box-shadow: 0 0 20px hsl(var(--accent-cyan) / 0.3),
|
||||
0 0 40px hsl(var(--accent-cyan) / 0.2),
|
||||
0 0 60px hsl(var(--accent-cyan) / 0.1);
|
||||
}
|
||||
|
||||
.glow-purple {
|
||||
box-shadow: 0 0 20px hsl(var(--accent-purple) / 0.3),
|
||||
0 0 40px hsl(var(--accent-purple) / 0.2),
|
||||
0 0 60px hsl(var(--accent-purple) / 0.1);
|
||||
}
|
||||
|
||||
/* Animated background gradient */
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 15s ease infinite;
|
||||
}
|
||||
|
||||
/* Floating animation */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Pulse glow */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Stagger delays */
|
||||
.delay-100 { animation-delay: 100ms; }
|
||||
.delay-200 { animation-delay: 200ms; }
|
||||
.delay-300 { animation-delay: 300ms; }
|
||||
.delay-400 { animation-delay: 400ms; }
|
||||
.delay-500 { animation-delay: 500ms; }
|
||||
|
||||
/* Motion Preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
apps/tutorial/src/app/layout.tsx
Normal file
38
apps/tutorial/src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import type { Metadata } from 'next';
|
||||
import { Space_Grotesk, Space_Mono } from 'next/font/google';
|
||||
import './globals.css';
|
||||
|
||||
const spaceGrotesk = Space_Grotesk({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-sans',
|
||||
display: 'swap',
|
||||
});
|
||||
|
||||
const spaceMono = Space_Mono({
|
||||
subsets: ['latin'],
|
||||
weight: ['400', '700'],
|
||||
variable: '--font-mono',
|
||||
display: 'swap',
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'TPMJS Tutorial - Learn How It Works',
|
||||
description: 'Interactive tutorial explaining TPMJS - the Tool Package Manager for AI Agents',
|
||||
openGraph: {
|
||||
title: 'TPMJS Tutorial',
|
||||
description: 'Interactive tutorial explaining TPMJS - the Tool Package Manager for AI Agents',
|
||||
type: 'website',
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<html lang="en" className={`${spaceGrotesk.variable} ${spaceMono.variable}`}>
|
||||
<body className={spaceGrotesk.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
11
apps/tutorial/src/app/page.tsx
Normal file
11
apps/tutorial/src/app/page.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
'use client';
|
||||
|
||||
import { Slideshow } from '@/components/Slideshow';
|
||||
|
||||
export default function TutorialPage(): React.ReactElement {
|
||||
return (
|
||||
<main className="h-screen w-screen overflow-hidden">
|
||||
<Slideshow />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
46
apps/tutorial/src/components/Slide.tsx
Normal file
46
apps/tutorial/src/components/Slide.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
'use client';
|
||||
|
||||
import { type Variants, motion } from 'framer-motion';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface SlideProps {
|
||||
children: ReactNode;
|
||||
isActive: boolean;
|
||||
direction: 'left' | 'right' | null;
|
||||
}
|
||||
|
||||
const variants: Variants = {
|
||||
enter: (direction: 'left' | 'right') => ({
|
||||
x: direction === 'right' ? '100%' : '-100%',
|
||||
opacity: 0,
|
||||
}),
|
||||
center: {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
exit: (direction: 'left' | 'right') => ({
|
||||
x: direction === 'right' ? '-100%' : '100%',
|
||||
opacity: 0,
|
||||
}),
|
||||
};
|
||||
|
||||
export function Slide({ children, isActive, direction }: SlideProps): React.ReactElement | null {
|
||||
if (!isActive) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
variants={variants}
|
||||
initial="enter"
|
||||
animate="center"
|
||||
exit="exit"
|
||||
transition={{
|
||||
x: { type: 'spring', stiffness: 300, damping: 30 },
|
||||
opacity: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
69
apps/tutorial/src/components/SlideNavigation.tsx
Normal file
69
apps/tutorial/src/components/SlideNavigation.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface SlideNavigationProps {
|
||||
onNext: () => void;
|
||||
onPrev: () => void;
|
||||
isFirst: boolean;
|
||||
isLast: boolean;
|
||||
}
|
||||
|
||||
export function SlideNavigation({
|
||||
onNext,
|
||||
onPrev,
|
||||
isFirst,
|
||||
isLast,
|
||||
}: SlideNavigationProps): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
{/* Previous button */}
|
||||
<motion.button
|
||||
onClick={onPrev}
|
||||
disabled={isFirst}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: isFirst ? 0.3 : 1, x: 0 }}
|
||||
whileHover={!isFirst ? { scale: 1.1 } : undefined}
|
||||
whileTap={!isFirst ? { scale: 0.95 } : undefined}
|
||||
className={`
|
||||
fixed left-8 top-1/2 -translate-y-1/2 z-50
|
||||
w-12 h-12 rounded-full
|
||||
bg-white/10 backdrop-blur-sm
|
||||
border border-white/20
|
||||
flex items-center justify-center
|
||||
transition-colors
|
||||
${isFirst ? 'cursor-not-allowed' : 'hover:bg-white/20 cursor-pointer'}
|
||||
`}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
|
||||
{/* Next button */}
|
||||
<motion.button
|
||||
onClick={onNext}
|
||||
disabled={isLast}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: isLast ? 0.3 : 1, x: 0 }}
|
||||
whileHover={!isLast ? { scale: 1.1 } : undefined}
|
||||
whileTap={!isLast ? { scale: 0.95 } : undefined}
|
||||
className={`
|
||||
fixed right-8 top-1/2 -translate-y-1/2 z-50
|
||||
w-12 h-12 rounded-full
|
||||
bg-white/10 backdrop-blur-sm
|
||||
border border-white/20
|
||||
flex items-center justify-center
|
||||
transition-colors
|
||||
${isLast ? 'cursor-not-allowed' : 'hover:bg-white/20 cursor-pointer'}
|
||||
`}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
46
apps/tutorial/src/components/SlideProgress.tsx
Normal file
46
apps/tutorial/src/components/SlideProgress.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
'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>
|
||||
);
|
||||
}
|
||||
73
apps/tutorial/src/components/Slideshow.tsx
Normal file
73
apps/tutorial/src/components/Slideshow.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
'use client';
|
||||
|
||||
import { useSlideshow } from '@/hooks/useSlideshow';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { Slide } from './Slide';
|
||||
import { SlideNavigation } from './SlideNavigation';
|
||||
import { SlideProgress } from './SlideProgress';
|
||||
import { DiscoverySlide } from './slides/DiscoverySlide';
|
||||
import { GetStartedSlide } from './slides/GetStartedSlide';
|
||||
import { HowItWorksSlide } from './slides/HowItWorksSlide';
|
||||
import { IntegrationSlide } from './slides/IntegrationSlide';
|
||||
import { ProblemSlide } from './slides/ProblemSlide';
|
||||
import { QualitySlide } from './slides/QualitySlide';
|
||||
import { SolutionSlide } from './slides/SolutionSlide';
|
||||
import { ToolDetailSlide } from './slides/ToolDetailSlide';
|
||||
import { WelcomeSlide } from './slides/WelcomeSlide';
|
||||
|
||||
const SLIDES = [
|
||||
WelcomeSlide,
|
||||
ProblemSlide,
|
||||
SolutionSlide,
|
||||
HowItWorksSlide,
|
||||
DiscoverySlide,
|
||||
IntegrationSlide,
|
||||
QualitySlide,
|
||||
ToolDetailSlide,
|
||||
GetStartedSlide,
|
||||
];
|
||||
|
||||
export function Slideshow(): React.ReactElement {
|
||||
const { currentSlide, totalSlides, next, prev, goTo, direction, isFirst, isLast } = useSlideshow({
|
||||
totalSlides: SLIDES.length,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full bg-[#0a0a0f] overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f]" />
|
||||
|
||||
{/* Subtle grid pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Slides */}
|
||||
<AnimatePresence mode="wait" custom={direction}>
|
||||
{SLIDES.map((SlideContent, index) => (
|
||||
<Slide key={index} isActive={index === currentSlide} direction={direction}>
|
||||
<SlideContent />
|
||||
</Slide>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Navigation */}
|
||||
<SlideNavigation onNext={next} onPrev={prev} isFirst={isFirst} isLast={isLast} />
|
||||
|
||||
{/* Progress */}
|
||||
<SlideProgress currentSlide={currentSlide} totalSlides={totalSlides} goTo={goTo} />
|
||||
|
||||
{/* Keyboard hint */}
|
||||
<div className="fixed bottom-8 right-8 z-50 text-white/30 text-xs font-mono">
|
||||
Use arrow keys or click to navigate
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
apps/tutorial/src/components/slides/DiscoverySlide.tsx
Normal file
114
apps/tutorial/src/components/slides/DiscoverySlide.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
'use client';
|
||||
|
||||
import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
function AnimatedCounter({ value, delay = 0 }: { value: number; delay?: number }) {
|
||||
const count = useMotionValue(0);
|
||||
const rounded = useTransform(count, (latest) => Math.round(latest));
|
||||
const [displayValue, setDisplayValue] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
const controls = animate(count, value, {
|
||||
duration: 2,
|
||||
ease: 'easeOut',
|
||||
});
|
||||
return () => controls.stop();
|
||||
}, delay * 1000);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [count, value, delay]);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = rounded.on('change', (v) => setDisplayValue(v));
|
||||
return unsubscribe;
|
||||
}, [rounded]);
|
||||
|
||||
return <span>{displayValue}</span>;
|
||||
}
|
||||
|
||||
export function DiscoverySlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Background pulse */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-cyan-900/20 via-transparent to-blue-900/20 pointer-events-none"
|
||||
animate={{ opacity: [0.3, 0.5, 0.3] }}
|
||||
transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-4xl"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
|
||||
className="text-6xl mb-8"
|
||||
>
|
||||
🔍
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-4">Automatic Discovery</h2>
|
||||
<p className="text-xl text-white/40 mb-12">
|
||||
npm changes feed synced every{' '}
|
||||
<span className="text-cyan-400 font-semibold">2 minutes</span>
|
||||
</p>
|
||||
|
||||
{/* Stats grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="p-6 rounded-2xl bg-white/5 border border-white/10"
|
||||
>
|
||||
<div className="text-5xl md:text-6xl font-bold text-cyan-400 font-mono">
|
||||
<AnimatedCounter value={78} delay={0.8} />+
|
||||
</div>
|
||||
<div className="text-white/40 mt-2">Tools Registered</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
className="p-6 rounded-2xl bg-white/5 border border-white/10"
|
||||
>
|
||||
<div className="text-5xl md:text-6xl font-bold text-purple-400 font-mono">2m</div>
|
||||
<div className="text-white/40 mt-2">Sync Interval</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="p-6 rounded-2xl bg-white/5 border border-white/10"
|
||||
>
|
||||
<div className="text-5xl md:text-6xl font-bold text-emerald-400 font-mono">24/7</div>
|
||||
<div className="text-white/40 mt-2">Always Running</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Animated sync indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.2 }}
|
||||
className="mt-12 flex items-center justify-center gap-3"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY }}
|
||||
className="w-3 h-3 rounded-full bg-emerald-400"
|
||||
/>
|
||||
<span className="text-emerald-400/60 font-mono text-sm">Live sync active</span>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
128
apps/tutorial/src/components/slides/GetStartedSlide.tsx
Normal file
128
apps/tutorial/src/components/slides/GetStartedSlide.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const links = [
|
||||
{
|
||||
label: 'Browse Tools',
|
||||
href: 'https://tpmjs.com/tool-search',
|
||||
description: 'Explore the registry',
|
||||
icon: '🔍',
|
||||
gradient: 'from-cyan-500 to-blue-500',
|
||||
},
|
||||
{
|
||||
label: 'Publish Your Tool',
|
||||
href: 'https://tpmjs.com/publish',
|
||||
description: 'Share with the community',
|
||||
icon: '📦',
|
||||
gradient: 'from-purple-500 to-pink-500',
|
||||
},
|
||||
{
|
||||
label: 'Read the Docs',
|
||||
href: 'https://tpmjs.com/docs',
|
||||
description: 'Learn everything',
|
||||
icon: '📚',
|
||||
gradient: 'from-emerald-500 to-teal-500',
|
||||
},
|
||||
];
|
||||
|
||||
export function GetStartedSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Celebratory background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-[800px] h-[800px] rounded-full bg-gradient-to-r from-cyan-500/10 to-purple-500/10 blur-[150px]"
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 180, 360],
|
||||
}}
|
||||
transition={{
|
||||
duration: 20,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'linear',
|
||||
}}
|
||||
style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-4xl w-full"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
|
||||
className="text-7xl mb-8"
|
||||
>
|
||||
🚀
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-5xl md:text-7xl font-bold text-white mb-4">Get Started</h2>
|
||||
<p className="text-xl md:text-2xl text-white/40 mb-16">Join the future of AI tooling</p>
|
||||
|
||||
{/* CTA buttons */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-6">
|
||||
{links.map((link, index) => (
|
||||
<motion.a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 + index * 0.15 }}
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`
|
||||
group relative w-full md:w-auto
|
||||
px-8 py-6 rounded-2xl
|
||||
bg-gradient-to-br ${link.gradient}
|
||||
text-white font-semibold text-lg
|
||||
shadow-lg shadow-black/20
|
||||
transition-shadow hover:shadow-xl hover:shadow-black/30
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-3xl">{link.icon}</span>
|
||||
<div className="text-left">
|
||||
<div className="font-bold">{link.label}</div>
|
||||
<div className="text-sm text-white/70">{link.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hover arrow */}
|
||||
<motion.div
|
||||
className="absolute right-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
initial={{ x: -10 }}
|
||||
whileHover={{ x: 0 }}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.2 }}
|
||||
className="mt-16 text-white/30 text-sm"
|
||||
>
|
||||
Made with ❤️ for the AI community
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
90
apps/tutorial/src/components/slides/HowItWorksSlide.tsx
Normal file
90
apps/tutorial/src/components/slides/HowItWorksSlide.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const steps = [
|
||||
{ icon: '📦', label: 'npm publish', description: 'Publish your tool to npm' },
|
||||
{ icon: '🔍', label: 'Discovery', description: 'Automatic detection' },
|
||||
{ icon: '📋', label: 'Registry', description: 'Added to TPMJS' },
|
||||
{ icon: '🤖', label: 'AI Agent', description: 'Ready to use' },
|
||||
];
|
||||
|
||||
export function HowItWorksSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-transparent to-purple-900/10 pointer-events-none" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-5xl w-full"
|
||||
>
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-4">How It Works</h2>
|
||||
<p className="text-xl text-white/40 mb-16">From npm to AI in 4 simple steps</p>
|
||||
|
||||
{/* Flow diagram */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-0">
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
{/* Step card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 + index * 0.2 }}
|
||||
className="flex flex-col items-center"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{
|
||||
delay: 0.5 + index * 0.2,
|
||||
type: 'spring',
|
||||
stiffness: 300,
|
||||
}}
|
||||
className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 flex items-center justify-center text-4xl md:text-5xl mb-4 hover:from-white/15 hover:to-white/10 transition-colors"
|
||||
>
|
||||
{step.icon}
|
||||
</motion.div>
|
||||
<span className="text-white font-semibold text-lg">{step.label}</span>
|
||||
<span className="text-white/40 text-sm mt-1">{step.description}</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Arrow */}
|
||||
{index < steps.length - 1 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scaleX: 0 }}
|
||||
animate={{ opacity: 1, scaleX: 1 }}
|
||||
transition={{ delay: 0.8 + index * 0.2 }}
|
||||
className="hidden md:flex items-center mx-6"
|
||||
>
|
||||
<div className="w-12 h-px bg-gradient-to-r from-cyan-500/50 to-purple-500/50" />
|
||||
<svg
|
||||
className="w-4 h-4 text-purple-500/50 -ml-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Animated highlight line */}
|
||||
<motion.div
|
||||
initial={{ scaleX: 0, opacity: 0 }}
|
||||
animate={{ scaleX: 1, opacity: 1 }}
|
||||
transition={{ delay: 1.8, duration: 1 }}
|
||||
className="mt-16 h-1 bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent rounded-full max-w-md mx-auto"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
apps/tutorial/src/components/slides/IntegrationSlide.tsx
Normal file
130
apps/tutorial/src/components/slides/IntegrationSlide.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const codeLines = [
|
||||
{ text: "import { tool } from '@tpmjs/sdk';", delay: 0.5 },
|
||||
{ text: '', delay: 0.8 },
|
||||
{ text: '// Get any tool from the registry', delay: 1.0 },
|
||||
{ text: "const webSearch = await tool('web-search');", delay: 1.3 },
|
||||
{ text: '', delay: 1.6 },
|
||||
{ text: '// Use it with your AI agent', delay: 1.8 },
|
||||
{ text: 'const result = await webSearch.execute({', delay: 2.1 },
|
||||
{ text: " query: 'latest AI news'", delay: 2.4 },
|
||||
{ text: '});', delay: 2.7 },
|
||||
];
|
||||
|
||||
function TypewriterLine({ text, delay }: { text: string; delay: number }) {
|
||||
const [displayText, setDisplayText] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!text) {
|
||||
setDisplayText('');
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
let i = 0;
|
||||
const interval = setInterval(() => {
|
||||
if (i <= text.length) {
|
||||
setDisplayText(text.slice(0, i));
|
||||
i++;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 30);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, delay * 1000);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [text, delay]);
|
||||
|
||||
// Syntax highlighting
|
||||
const highlightedText = displayText
|
||||
.replace(/(import|from|const|await)/g, '<span class="text-purple-400">$1</span>')
|
||||
.replace(/('.*?')/g, '<span class="text-emerald-400">$1</span>')
|
||||
.replace(/(\/\/.*)/g, '<span class="text-white/30">$1</span>')
|
||||
.replace(/(\{|\}|\(|\))/g, '<span class="text-yellow-300">$1</span>');
|
||||
|
||||
return (
|
||||
<div
|
||||
className="font-mono text-sm md:text-base text-white/80 leading-relaxed"
|
||||
dangerouslySetInnerHTML={{ __html: highlightedText || ' ' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function IntegrationSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/10 via-transparent to-pink-900/10 pointer-events-none" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-4xl w-full"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
|
||||
className="text-6xl mb-8"
|
||||
>
|
||||
🔌
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-4">Simple Integration</h2>
|
||||
<p className="text-xl text-white/40 mb-12">Three lines of code. That's it.</p>
|
||||
|
||||
{/* Code block */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="relative max-w-2xl mx-auto"
|
||||
>
|
||||
{/* Window chrome */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-[#1e1e2e] rounded-t-xl border-b border-white/5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
||||
<span className="ml-4 text-xs text-white/30 font-mono">agent.ts</span>
|
||||
</div>
|
||||
|
||||
{/* Code content */}
|
||||
<div className="bg-[#1e1e2e] p-6 rounded-b-xl text-left overflow-x-auto">
|
||||
{codeLines.map((line, index) => (
|
||||
<TypewriterLine key={index} text={line.text} delay={line.delay} />
|
||||
))}
|
||||
<motion.span
|
||||
animate={{ opacity: [1, 0, 1] }}
|
||||
transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY }}
|
||||
className="inline-block w-2 h-5 bg-cyan-400 ml-0.5"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Framework badges */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 3 }}
|
||||
className="mt-8 flex flex-wrap justify-center gap-3"
|
||||
>
|
||||
{['Vercel AI SDK', 'LangChain', 'Claude', 'OpenAI'].map((framework) => (
|
||||
<span
|
||||
key={framework}
|
||||
className="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/50 text-sm"
|
||||
>
|
||||
Works with {framework}
|
||||
</span>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
apps/tutorial/src/components/slides/ProblemSlide.tsx
Normal file
105
apps/tutorial/src/components/slides/ProblemSlide.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const floatingIcons = [
|
||||
{ icon: '🔧', x: '15%', y: '20%', delay: 0 },
|
||||
{ icon: '⚙️', x: '75%', y: '15%', delay: 0.2 },
|
||||
{ icon: '🔌', x: '85%', y: '60%', delay: 0.4 },
|
||||
{ icon: '📦', x: '10%', y: '70%', delay: 0.6 },
|
||||
{ icon: '🛠️', x: '60%', y: '80%', delay: 0.8 },
|
||||
{ icon: '🔗', x: '25%', y: '45%', delay: 1 },
|
||||
{ icon: '📡', x: '80%', y: '35%', delay: 1.2 },
|
||||
{ icon: '💾', x: '40%', y: '25%', delay: 1.4 },
|
||||
];
|
||||
|
||||
export function ProblemSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Floating chaotic icons */}
|
||||
{floatingIcons.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="absolute text-4xl md:text-5xl opacity-20"
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{
|
||||
opacity: 0.2,
|
||||
scale: 1,
|
||||
x: [0, Math.random() * 40 - 20, 0],
|
||||
y: [0, Math.random() * 40 - 20, 0],
|
||||
rotate: [0, Math.random() * 30 - 15, 0],
|
||||
}}
|
||||
transition={{
|
||||
opacity: { duration: 0.5, delay: item.delay },
|
||||
scale: { duration: 0.5, delay: item.delay },
|
||||
x: {
|
||||
duration: 4 + Math.random() * 2,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
y: {
|
||||
duration: 3 + Math.random() * 2,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
rotate: {
|
||||
duration: 5 + Math.random() * 2,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
}}
|
||||
style={{ left: item.x, top: item.y }}
|
||||
>
|
||||
{item.icon}
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Red warning gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-900/10 via-transparent to-orange-900/10 pointer-events-none" />
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="relative z-10 max-w-4xl"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
|
||||
className="text-6xl mb-8"
|
||||
>
|
||||
😵
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-6">The Problem</h2>
|
||||
|
||||
<p className="text-xl md:text-2xl text-white/60 leading-relaxed">
|
||||
AI tools are <span className="text-red-400 font-semibold">everywhere</span>.
|
||||
<br />
|
||||
Finding and trusting them is <span className="text-orange-400 font-semibold">hard</span>.
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="mt-12 flex flex-wrap justify-center gap-4"
|
||||
>
|
||||
{['Scattered', 'Inconsistent', 'Unverified', 'Fragmented'].map((word, i) => (
|
||||
<motion.span
|
||||
key={word}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.2 + i * 0.1 }}
|
||||
className="px-4 py-2 rounded-full border border-red-500/30 text-red-400/60 text-sm font-mono"
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
135
apps/tutorial/src/components/slides/QualitySlide.tsx
Normal file
135
apps/tutorial/src/components/slides/QualitySlide.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
'use client';
|
||||
|
||||
import { animate, motion, useMotionValue } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
function AnimatedGauge({ value, delay = 0 }: { value: number; delay?: number }) {
|
||||
const progress = useMotionValue(0);
|
||||
const [displayValue, setDisplayValue] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
animate(progress, value, {
|
||||
duration: 1.5,
|
||||
ease: 'easeOut',
|
||||
});
|
||||
}, delay * 1000);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [progress, value, delay]);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = progress.on('change', (v) => setDisplayValue(Math.round(v)));
|
||||
return unsubscribe;
|
||||
}, [progress]);
|
||||
|
||||
const circumference = 2 * Math.PI * 45;
|
||||
const strokeDashoffset = circumference - (displayValue / 100) * circumference;
|
||||
|
||||
return (
|
||||
<div className="relative w-32 h-32">
|
||||
<svg className="w-full h-full transform -rotate-90">
|
||||
{/* Background circle */}
|
||||
<circle cx="64" cy="64" r="45" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="8" />
|
||||
{/* Progress circle */}
|
||||
<circle
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="url(#gradient)"
|
||||
strokeWidth="8"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#22d3ee" />
|
||||
<stop offset="100%" stopColor="#a855f7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-2xl font-bold text-white">{displayValue}%</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const qualityFactors = [
|
||||
{ name: 'Schema Completeness', icon: '📋', score: 95, color: 'cyan' },
|
||||
{ name: 'npm Downloads', icon: '📈', score: 78, color: 'purple' },
|
||||
{ name: 'Documentation', icon: '📚', score: 88, color: 'emerald' },
|
||||
{ name: 'Type Safety', icon: '🛡️', score: 100, color: 'yellow' },
|
||||
];
|
||||
|
||||
export function QualitySlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-yellow-900/10 via-transparent to-emerald-900/10 pointer-events-none" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-4xl w-full"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
|
||||
className="text-6xl mb-8"
|
||||
>
|
||||
⭐
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-4">Quality Scoring</h2>
|
||||
<p className="text-xl text-white/40 mb-12">Every tool is scored for reliability</p>
|
||||
|
||||
{/* Main gauge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="flex justify-center mb-12"
|
||||
>
|
||||
<AnimatedGauge value={92} delay={0.6} />
|
||||
</motion.div>
|
||||
|
||||
{/* Quality factors */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{qualityFactors.map((factor, index) => (
|
||||
<motion.div
|
||||
key={factor.name}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1 + index * 0.15 }}
|
||||
className="p-4 rounded-xl bg-white/5 border border-white/10"
|
||||
>
|
||||
<div className="text-3xl mb-2">{factor.icon}</div>
|
||||
<div className="text-sm text-white/60 mb-2">{factor.name}</div>
|
||||
<div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${factor.score}%` }}
|
||||
transition={{ delay: 1.5 + index * 0.15, duration: 1 }}
|
||||
className={`h-full rounded-full ${
|
||||
factor.color === 'cyan'
|
||||
? 'bg-cyan-400'
|
||||
: factor.color === 'purple'
|
||||
? 'bg-purple-400'
|
||||
: factor.color === 'emerald'
|
||||
? 'bg-emerald-400'
|
||||
: 'bg-yellow-400'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
apps/tutorial/src/components/slides/SolutionSlide.tsx
Normal file
86
apps/tutorial/src/components/slides/SolutionSlide.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const gridItems = Array.from({ length: 12 }, (_, i) => ({
|
||||
icon: ['🔧', '⚙️', '📦', '🔌', '🛠️', '📡', '💾', '🔗', '🎯', '⚡', '🌐', '🔐'][i],
|
||||
delay: i * 0.05,
|
||||
}));
|
||||
|
||||
export function SolutionSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Green success gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-900/10 via-transparent to-cyan-900/10 pointer-events-none" />
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-4xl"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
|
||||
className="text-6xl mb-8"
|
||||
>
|
||||
✨
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-6">The Solution</h2>
|
||||
|
||||
<p className="text-xl md:text-2xl text-white/60 leading-relaxed mb-12">
|
||||
<span className="text-cyan-400 font-semibold">One registry</span>.
|
||||
<br />
|
||||
Curated tools. <span className="text-emerald-400 font-semibold">Quality guaranteed</span>.
|
||||
</p>
|
||||
|
||||
{/* Organized grid of icons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="grid grid-cols-4 md:grid-cols-6 gap-4 max-w-lg mx-auto"
|
||||
>
|
||||
{gridItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.8 + item.delay,
|
||||
type: 'spring',
|
||||
stiffness: 300,
|
||||
damping: 20,
|
||||
}}
|
||||
className="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-2xl hover:bg-white/10 hover:border-white/20 transition-colors cursor-default"
|
||||
>
|
||||
{item.icon}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.5 }}
|
||||
className="mt-12 flex flex-wrap justify-center gap-4"
|
||||
>
|
||||
{['Organized', 'Consistent', 'Verified', 'Unified'].map((word, i) => (
|
||||
<motion.span
|
||||
key={word}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.7 + i * 0.1 }}
|
||||
className="px-4 py-2 rounded-full border border-emerald-500/30 text-emerald-400/60 text-sm font-mono"
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
109
apps/tutorial/src/components/slides/ToolDetailSlide.tsx
Normal file
109
apps/tutorial/src/components/slides/ToolDetailSlide.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export function ToolDetailSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-indigo-900/10 via-transparent to-cyan-900/10 pointer-events-none" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 max-w-4xl w-full"
|
||||
>
|
||||
<h2 className="text-5xl md:text-6xl font-bold text-white mb-4">Rich Tool Data</h2>
|
||||
<p className="text-xl text-white/40 mb-12">Everything you need to know about each tool</p>
|
||||
|
||||
{/* Mock tool card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="max-w-xl mx-auto p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 text-left"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.5, type: 'spring' }}
|
||||
className="w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center text-2xl"
|
||||
>
|
||||
🔍
|
||||
</motion.div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">webSearch</h3>
|
||||
<span className="text-sm text-white/40 font-mono">@tpmjs/web-tools</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
className="px-2 py-1 rounded bg-emerald-500/20 text-emerald-400 text-xs font-medium"
|
||||
>
|
||||
Verified
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="text-white/60 mb-6"
|
||||
>
|
||||
Search the web and return structured results. Supports query filtering, result limits,
|
||||
and domain restrictions.
|
||||
</motion.p>
|
||||
|
||||
{/* Metadata grid */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.8 }}
|
||||
className="grid grid-cols-3 gap-4 mb-6"
|
||||
>
|
||||
<div className="p-3 rounded-lg bg-white/5">
|
||||
<div className="text-xs text-white/40 mb-1">Downloads</div>
|
||||
<div className="text-lg font-bold text-white">12.4k</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-white/5">
|
||||
<div className="text-xs text-white/40 mb-1">Quality</div>
|
||||
<div className="text-lg font-bold text-cyan-400">94%</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-white/5">
|
||||
<div className="text-xs text-white/40 mb-1">Category</div>
|
||||
<div className="text-lg font-bold text-purple-400">Search</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Schema preview */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="p-4 rounded-lg bg-black/30 font-mono text-sm"
|
||||
>
|
||||
<div className="text-white/40 mb-2">// Input Schema</div>
|
||||
<div className="text-cyan-400">
|
||||
query: <span className="text-white/60">string</span>
|
||||
</div>
|
||||
<div className="text-cyan-400">
|
||||
limit?: <span className="text-white/60">number</span>
|
||||
</div>
|
||||
<div className="text-cyan-400">
|
||||
domains?: <span className="text-white/60">string[]</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
apps/tutorial/src/components/slides/WelcomeSlide.tsx
Normal file
95
apps/tutorial/src/components/slides/WelcomeSlide.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export function WelcomeSlide(): React.ReactElement {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full px-8 text-center">
|
||||
{/* Animated background orbs */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-[600px] h-[600px] rounded-full bg-cyan-500/10 blur-[120px]"
|
||||
animate={{
|
||||
x: [0, 100, 0],
|
||||
y: [0, -50, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
style={{ top: '10%', left: '20%' }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute w-[500px] h-[500px] rounded-full bg-purple-500/10 blur-[100px]"
|
||||
animate={{
|
||||
x: [0, -80, 0],
|
||||
y: [0, 60, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 12,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
style={{ bottom: '20%', right: '15%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Logo / Title */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="relative z-10"
|
||||
>
|
||||
<h1 className="text-8xl md:text-9xl font-bold tracking-tighter">
|
||||
<span className="bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
TPMJS
|
||||
</span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
{/* Tagline */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="mt-6 text-2xl md:text-3xl text-white/60 font-light max-w-2xl"
|
||||
>
|
||||
Tool Package Manager for AI Agents
|
||||
</motion.p>
|
||||
|
||||
{/* Decorative line */}
|
||||
<motion.div
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 1, delay: 0.8 }}
|
||||
className="mt-12 w-32 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"
|
||||
/>
|
||||
|
||||
{/* CTA hint */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2 }}
|
||||
className="mt-8 flex flex-col items-center"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }}
|
||||
className="text-white/40"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</motion.div>
|
||||
<span className="mt-2 text-sm text-white/30 font-mono">Press any key to begin</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
apps/tutorial/src/hooks/useSlideshow.ts
Normal file
129
apps/tutorial/src/hooks/useSlideshow.ts
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
export interface UseSlideshowOptions {
|
||||
totalSlides: number;
|
||||
autoPlay?: boolean;
|
||||
autoPlayInterval?: number;
|
||||
loop?: boolean;
|
||||
}
|
||||
|
||||
export interface UseSlideshowReturn {
|
||||
currentSlide: number;
|
||||
totalSlides: number;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
goTo: (index: number) => void;
|
||||
progress: number;
|
||||
direction: 'left' | 'right' | null;
|
||||
isFirst: boolean;
|
||||
isLast: boolean;
|
||||
isAutoPlaying: boolean;
|
||||
toggleAutoPlay: () => void;
|
||||
}
|
||||
|
||||
export function useSlideshow({
|
||||
totalSlides,
|
||||
autoPlay = false,
|
||||
autoPlayInterval = 5000,
|
||||
loop = false,
|
||||
}: UseSlideshowOptions): UseSlideshowReturn {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [direction, setDirection] = useState<'left' | 'right' | null>(null);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(autoPlay);
|
||||
|
||||
const isFirst = currentSlide === 0;
|
||||
const isLast = currentSlide === totalSlides - 1;
|
||||
const progress = totalSlides > 1 ? currentSlide / (totalSlides - 1) : 0;
|
||||
|
||||
const next = useCallback(() => {
|
||||
if (isLast && !loop) return;
|
||||
setDirection('right');
|
||||
setCurrentSlide((prev) => (prev + 1) % totalSlides);
|
||||
}, [isLast, loop, totalSlides]);
|
||||
|
||||
const prev = useCallback(() => {
|
||||
if (isFirst && !loop) return;
|
||||
setDirection('left');
|
||||
setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
|
||||
}, [isFirst, loop, totalSlides]);
|
||||
|
||||
const goTo = useCallback(
|
||||
(index: number) => {
|
||||
if (index < 0 || index >= totalSlides) return;
|
||||
setDirection(index > currentSlide ? 'right' : 'left');
|
||||
setCurrentSlide(index);
|
||||
},
|
||||
[currentSlide, totalSlides]
|
||||
);
|
||||
|
||||
const toggleAutoPlay = useCallback(() => {
|
||||
setIsAutoPlaying((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Pause auto-play on any key press
|
||||
if (isAutoPlaying) {
|
||||
setIsAutoPlaying(false);
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowRight':
|
||||
case ' ':
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
next();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
prev();
|
||||
break;
|
||||
case 'Home':
|
||||
e.preventDefault();
|
||||
goTo(0);
|
||||
break;
|
||||
case 'End':
|
||||
e.preventDefault();
|
||||
goTo(totalSlides - 1);
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
setIsAutoPlaying(false);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [next, prev, goTo, totalSlides, isAutoPlaying]);
|
||||
|
||||
// Auto-play
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
if (isLast && !loop) {
|
||||
setIsAutoPlaying(false);
|
||||
return;
|
||||
}
|
||||
next();
|
||||
}, autoPlayInterval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [isAutoPlaying, autoPlayInterval, next, isLast, loop]);
|
||||
|
||||
return {
|
||||
currentSlide,
|
||||
totalSlides,
|
||||
next,
|
||||
prev,
|
||||
goTo,
|
||||
progress,
|
||||
direction,
|
||||
isFirst,
|
||||
isLast,
|
||||
isAutoPlaying,
|
||||
toggleAutoPlay,
|
||||
};
|
||||
}
|
||||
11
apps/tutorial/tailwind.config.ts
Normal file
11
apps/tutorial/tailwind.config.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import baseConfig from '@tpmjs/tailwind-config/base';
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
export default {
|
||||
...baseConfig,
|
||||
content: [
|
||||
'./src/app/**/*.{ts,tsx}',
|
||||
'./src/components/**/*.{ts,tsx}',
|
||||
'../../packages/ui/src/**/*.ts',
|
||||
],
|
||||
} satisfies Config;
|
||||
12
apps/tutorial/tsconfig.json
Normal file
12
apps/tutorial/tsconfig.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": "@tpmjs/tsconfig/nextjs.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
101
pnpm-lock.yaml
generated
101
pnpm-lock.yaml
generated
|
|
@ -134,10 +134,10 @@ importers:
|
|||
version: 10.4.22(postcss@8.5.6)
|
||||
eslint:
|
||||
specifier: ^9.39.1
|
||||
version: 9.39.1(jiti@2.6.1)
|
||||
version: 9.39.1(jiti@1.21.7)
|
||||
eslint-config-next:
|
||||
specifier: ^16.0.4
|
||||
version: 16.0.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
|
||||
version: 16.0.4(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
|
||||
postcss:
|
||||
specifier: ^8.5.1
|
||||
version: 8.5.6
|
||||
|
|
@ -157,6 +157,64 @@ importers:
|
|||
specifier: ^4.18.2
|
||||
version: 4.22.1
|
||||
|
||||
apps/tutorial:
|
||||
dependencies:
|
||||
'@tpmjs/ui':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/ui
|
||||
'@tpmjs/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
framer-motion:
|
||||
specifier: ^11.15.0
|
||||
version: 11.18.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
next:
|
||||
specifier: ^16.0.8
|
||||
version: 16.0.8(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
react:
|
||||
specifier: ^19.0.0
|
||||
version: 19.2.0
|
||||
react-dom:
|
||||
specifier: ^19.0.0
|
||||
version: 19.2.0(react@19.2.0)
|
||||
devDependencies:
|
||||
'@tpmjs/eslint-config':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/config/eslint
|
||||
'@tpmjs/tailwind-config':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/config/tailwind
|
||||
'@tpmjs/tsconfig':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/config/tsconfig
|
||||
'@types/node':
|
||||
specifier: ^22.10.2
|
||||
version: 22.19.1
|
||||
'@types/react':
|
||||
specifier: ^19.0.2
|
||||
version: 19.2.7
|
||||
'@types/react-dom':
|
||||
specifier: ^19.0.2
|
||||
version: 19.2.3(@types/react@19.2.7)
|
||||
autoprefixer:
|
||||
specifier: ^10.4.20
|
||||
version: 10.4.22(postcss@8.5.6)
|
||||
eslint:
|
||||
specifier: ^9.39.1
|
||||
version: 9.39.1(jiti@2.6.1)
|
||||
eslint-config-next:
|
||||
specifier: ^16.0.4
|
||||
version: 16.0.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
|
||||
postcss:
|
||||
specifier: ^8.5.1
|
||||
version: 8.5.6
|
||||
tailwindcss:
|
||||
specifier: ^3.4.17
|
||||
version: 3.4.18(tsx@4.21.0)
|
||||
typescript:
|
||||
specifier: ^5.9.3
|
||||
version: 5.9.3
|
||||
|
||||
apps/web:
|
||||
dependencies:
|
||||
'@ai-sdk/openai':
|
||||
|
|
@ -267,10 +325,10 @@ importers:
|
|||
version: 17.2.3
|
||||
eslint:
|
||||
specifier: ^9.39.1
|
||||
version: 9.39.1(jiti@1.21.7)
|
||||
version: 9.39.1(jiti@2.6.1)
|
||||
eslint-config-next:
|
||||
specifier: ^16.0.4
|
||||
version: 16.0.4(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
|
||||
version: 16.0.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
|
||||
postcss:
|
||||
specifier: ^8.5.1
|
||||
version: 8.5.6
|
||||
|
|
@ -4010,6 +4068,20 @@ packages:
|
|||
fraction.js@5.3.4:
|
||||
resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
|
||||
|
||||
framer-motion@11.18.2:
|
||||
resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
|
||||
peerDependencies:
|
||||
'@emotion/is-prop-valid': '*'
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@emotion/is-prop-valid':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
fresh@0.5.2:
|
||||
resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
|
@ -4952,6 +5024,12 @@ packages:
|
|||
mlly@1.8.0:
|
||||
resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
|
||||
|
||||
motion-dom@11.18.1:
|
||||
resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
|
||||
|
||||
motion-utils@11.18.1:
|
||||
resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
|
||||
|
||||
mri@1.2.0:
|
||||
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -10131,6 +10209,15 @@ snapshots:
|
|||
|
||||
fraction.js@5.3.4: {}
|
||||
|
||||
framer-motion@11.18.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
||||
dependencies:
|
||||
motion-dom: 11.18.1
|
||||
motion-utils: 11.18.1
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
react: 19.2.0
|
||||
react-dom: 19.2.0(react@19.2.0)
|
||||
|
||||
fresh@0.5.2: {}
|
||||
|
||||
fs-extra@7.0.1:
|
||||
|
|
@ -11359,6 +11446,12 @@ snapshots:
|
|||
pkg-types: 1.3.1
|
||||
ufo: 1.6.1
|
||||
|
||||
motion-dom@11.18.1:
|
||||
dependencies:
|
||||
motion-utils: 11.18.1
|
||||
|
||||
motion-utils@11.18.1: {}
|
||||
|
||||
mri@1.2.0: {}
|
||||
|
||||
ms@2.0.0: {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue