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
38 lines
1,004 B
TypeScript
38 lines
1,004 B
TypeScript
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>
|
|
);
|
|
}
|