Sebastian Krüger
a400f694fe
- Create lib/tools.tsx as single source of truth for all tool metadata (title, shortTitle, navTitle, description, summary, icon, etc.) - Update AppSidebar to render nav from centralized tools list with descriptions, remove collapse footer button - Update AppHeader with sidebar collapse toggle, tool short title, and app logo; remove breadcrumbs - Update AppPage to auto-resolve tool icon from pathname - Update ToolsGrid/ToolCard to use shared tools data, remove per-card gradients for uniform styling - Add per-tool HTML title via metadata exports (title template in root layout) - Style landing page and 404 headings with primary theme color - Add Toolbox icon to hero CTA, GitFork icon link in footer - Remove footer from error page and "View on Dev" buttons - Extract ColorPage client component for RSC metadata compatibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import ToolCard from './ToolCard';
|
|
import { tools } from '@/lib/tools';
|
|
|
|
export default function ToolsGrid() {
|
|
return (
|
|
<section id="tools" className="relative py-20 px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Section heading */}
|
|
<motion.div
|
|
className="text-center mb-16"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
|
|
Available Tools
|
|
</h2>
|
|
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
|
Explore our collection of carefully crafted tools designed to boost your productivity and creativity
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Tools grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{tools.map((tool, index) => {
|
|
const Icon = tool.icon;
|
|
return (
|
|
<ToolCard
|
|
key={tool.href}
|
|
title={tool.title}
|
|
description={tool.summary}
|
|
icon={<Icon className="w-12 h-12" />}
|
|
url={tool.href}
|
|
badges={tool.badges}
|
|
index={index}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|