mintel.me/apps/web/app/technologies/[slug]/data.tsx

import { Layers, Code, Database, Palette, Terminal } from 'lucide-react';

export interface TechInfo {
    title: string;
    subtitle: string;
    description: string;
    icon: any; // React.ElementType
    benefits: string[];
    customerValue: string;
    color: string;
    related: { name: string; slug: string }[];
}

export const technologies: Record<string, TechInfo> = {
    'next-js-14': {
        title: 'Next.js 14',
        subtitle: 'The React Framework for the Web',
        description: 'Next.js 14 is the latest version of the industry-leading framework for building high-performance web applications. It allows me to create fast, scalable, and search-engine-friendly websites by rendering content on the server before sending it to your users.',
        icon: Layers,
        benefits: [
            'Lightning-fast page loads with Server Components',
            'Automatic image optimization',
            'Instant navigation between pages',
            'Top-tier SEO (Search Engine Optimization) out of the box'
        ],
        customerValue: 'For my clients, Next.js means a website that ranks higher on Google, keeps visitors engaged with instant interactions, and scales effortlessly as your traffic grows.',
        color: 'bg-black text-white',
        related: [
            { name: 'TypeScript', slug: 'typescript' },
            { name: 'React', slug: 'react' }
        ]
    },
    'typescript': {
        title: 'TypeScript',
        subtitle: 'JavaScript with Syntax for Types',
        description: 'TypeScript adds a powerful type system to JavaScript, catching errors before they ever reach production. It acts as a safety net for your code, ensuring that data flows exactly as expected through your entire application.',
        icon: Code,
        benefits: [
            'Eliminates whole categories of common bugs',
            'Makes large codebases easier to maintain',
            'Improves developer productivity and code confidence',
            'Ensures critical data integrity'
        ],
        customerValue: 'Using TypeScript means your application is robust and reliable from day one. It dramatically reduces the risk of "runtime errors" that could crash your site, saving time and money on bug fixes down the line.',
        color: 'bg-blue-600 text-white',
        related: [
            { name: 'Directus CMS', slug: 'directus-cms' },
            { name: 'Next.js 14', slug: 'next-js-14' }
        ]
    },
    'directus-cms': {
        title: 'Directus CMS',
        subtitle: 'The Open Data Platform',
        description: 'Directus is a modern, headless Content Management System (CMS) that instantly turns any database into a beautiful, easy-to-use application for managing your content. Unlike traditional CMSs, it doesn\'t dictate how your website looks.',
        icon: Database,
        benefits: [
            'Intuitive interface for non-technical editors',
            'Complete freedom regarding front-end design',
            'Real-time updates and live previews',
            'Highly secure and role-based access control'
        ],
        customerValue: 'Directus gives you full control over your content without needing a developer for every text change. It separates your data from the design, ensuring your website can evolve visually without rebuilding your entire content library.',
        color: 'bg-purple-600 text-white',
        related: [
            { name: 'Next.js 14', slug: 'next-js-14' },
            { name: 'Tailwind CSS', slug: 'tailwind-css' }
        ]
    },
    'tailwind-css': {
        title: 'Tailwind CSS',
        subtitle: 'Utility-First CSS Framework',
        description: 'Tailwind CSS is a utility-first framework that allows me to build custom designs directly in markup. It eliminates the need for bulky, overriding stylesheets and ensures a consistent design system across every page.',
        icon: Palette,
        benefits: [
            'Rapid UI development and prototyping',
            'Consistent spacing, colors, and typography',
            'Highly optimized final bundle size (only includes used styles)',
            'Responsive design made simple'
        ],
        customerValue: 'Tailwind ensures your brand looks pixel-perfect on every device. It also results in incredibly small CSS files, meaning your site loads faster for users on mobile networks.',
        color: 'bg-cyan-500 text-white',
        related: [
            { name: 'React', slug: 'react' },
            { name: 'Next.js 14', slug: 'next-js-14' }
        ]
    },
    'react': {
        title: 'React',
        subtitle: 'The Library for Web and Native User Interfaces',
        description: 'React is the core library powering Next.js. It lets me build encapsulated components that manage their own state, then compose them to make complex UIs.',
        icon: Terminal,
        benefits: [
            'Component-based architecture for reuse',
            'Efficient updates and rendering',
            'Rich ecosystem of libraries and tools',
            'Strong community support'
        ],
        customerValue: 'React enables rich, app-like interactions on your website. Whether it\'s a complex dashboard or a smooth animation, React makes it possible to build dynamic experiences that feel instantaneous.',
        color: 'bg-blue-400 text-white',
        related: [
            { name: 'Next.js 14', slug: 'next-js-14' },
            { name: 'Tailwind CSS', slug: 'tailwind-css' }
        ]
    }
};