mintel.me/apps/web/app/(site)/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: "Next.js 14", slug: "next-js-14" },
    ],
  },

  "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" },
    ],
  },
};