From 8676e3e118e30d40516479dd52eefacc8e4815d8 Mon Sep 17 00:00:00 2001
From: rebelchris <chrisbongers@gmail.com>
Date: Mon, 2 Feb 2026 12:47:30 +0000
Subject: [PATCH 1/3] feat(tools): add frontend mock pages for AI tools
 directory

Add a new frontend-only mock implementation for AI tools visualization:

- Create mock data structure with hierarchical AI tools (Anthropic/Claude/Opus-4.5, OpenAI/GPT/GPT-4o, Google/Gemini/Ultra)
- Add tools index page displaying all top-level AI tool categories
- Add dynamic route [...slug] for hierarchical tool navigation
- Create ToolCard, ToolHeader, ToolBreadcrumb components for navigation
- Create ToolSentimentChart component with Recharts for sentiment visualization
- Create ToolRelatedContent and ToolDiscussion components for engagement

Each tool displays sentiment over time, related posts, upvoting capability, and discussion features. State is managed locally (not persisted) for this mock visualization.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/tools/ToolBreadcrumb.tsx   |  73 ++++
 .../shared/src/components/tools/ToolCard.tsx  |  56 +++
 .../src/components/tools/ToolDiscussion.tsx   | 110 +++++
 .../src/components/tools/ToolHeader.tsx       |  59 +++
 .../components/tools/ToolRelatedContent.tsx   |  49 +++
 .../components/tools/ToolSentimentChart.tsx   | 113 +++++
 packages/shared/src/lib/toolsMockData.ts      | 388 ++++++++++++++++++
 packages/webapp/pages/tools/[...slug].tsx     | 128 ++++++
 packages/webapp/pages/tools/index.tsx         |  54 +++
 9 files changed, 1030 insertions(+)
 create mode 100644 packages/shared/src/components/tools/ToolBreadcrumb.tsx
 create mode 100644 packages/shared/src/components/tools/ToolCard.tsx
 create mode 100644 packages/shared/src/components/tools/ToolDiscussion.tsx
 create mode 100644 packages/shared/src/components/tools/ToolHeader.tsx
 create mode 100644 packages/shared/src/components/tools/ToolRelatedContent.tsx
 create mode 100644 packages/shared/src/components/tools/ToolSentimentChart.tsx
 create mode 100644 packages/shared/src/lib/toolsMockData.ts
 create mode 100644 packages/webapp/pages/tools/[...slug].tsx
 create mode 100644 packages/webapp/pages/tools/index.tsx

diff --git a/packages/shared/src/components/tools/ToolBreadcrumb.tsx b/packages/shared/src/components/tools/ToolBreadcrumb.tsx
new file mode 100644
index 0000000000..ef66d86330
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolBreadcrumb.tsx
@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import type { Tool } from '../../lib/toolsMockData';
+import { AiIcon, HomeIcon } from '../icons';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+
+export interface ToolBreadcrumbProps {
+  toolPath: Tool[];
+  className?: string;
+}
+
+export const ToolBreadcrumb = ({
+  toolPath,
+  className,
+}: ToolBreadcrumbProps): ReactElement => {
+  return (
+    <nav
+      aria-label="breadcrumbs"
+      className={classNames(
+        'hidden h-10 items-center gap-0.5 px-1.5 text-surface-secondary laptop:flex',
+        className,
+      )}
+    >
+      <ol className="flex flex-1 items-center gap-0.5">
+        <li className="flex items-center gap-0.5">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            icon={<HomeIcon secondary />}
+            tag="a"
+            href={process.env.NEXT_PUBLIC_WEBAPP_URL}
+            size={ButtonSize.XSmall}
+          />
+          <span aria-hidden>/</span>
+        </li>
+        <li className="flex items-center gap-0.5">
+          <Link href="/tools" passHref>
+            <a className="flex items-center gap-1 rounded-8 px-2 py-1 text-text-tertiary typo-callout hover:bg-surface-hover hover:text-text-primary">
+              <AiIcon className="size-4" />
+              <span>Tools</span>
+            </a>
+          </Link>
+          {toolPath.length > 0 && <span aria-hidden>/</span>}
+        </li>
+        {toolPath.map((tool, index) => {
+          const isLast = index === toolPath.length - 1;
+          return (
+            <li key={tool.id} className="flex items-center gap-0.5">
+              {isLast ? (
+                <span
+                  className="px-2 py-1 font-bold text-text-primary typo-callout"
+                  aria-current="page"
+                >
+                  {tool.name}
+                </span>
+              ) : (
+                <>
+                  <Link href={`/tools/${tool.slug}`} passHref>
+                    <a className="rounded-8 px-2 py-1 text-text-tertiary typo-callout hover:bg-surface-hover hover:text-text-primary">
+                      {tool.name}
+                    </a>
+                  </Link>
+                  <span aria-hidden>/</span>
+                </>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolCard.tsx b/packages/shared/src/components/tools/ToolCard.tsx
new file mode 100644
index 0000000000..4417e810fe
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolCard.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import type { Tool } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolCardProps {
+  tool: Tool;
+  className?: string;
+}
+
+export const ToolCard = ({ tool, className }: ToolCardProps): ReactElement => {
+  const hasChildren = tool.children.length > 0;
+
+  return (
+    <Link href={`/tools/${tool.slug}`} passHref>
+      <a
+        className={classNames(
+          'flex flex-col rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 transition-colors hover:border-border-subtlest-secondary',
+          className,
+        )}
+      >
+        <div className="flex items-start gap-3">
+          <Image
+            className="size-12 rounded-12 object-cover"
+            src={tool.image}
+            alt={`${tool.name} logo`}
+          />
+          <div className="min-w-0 flex-1">
+            <h3 className="truncate font-bold text-text-primary typo-title3">
+              {tool.name}
+            </h3>
+            <div className="mt-1 flex items-center gap-2 text-text-tertiary typo-footnote">
+              <span className="flex items-center gap-1">
+                <UpvoteIcon className="size-4" />
+                {largeNumberFormat(tool.upvotes)}
+              </span>
+              {hasChildren && (
+                <>
+                  <span aria-hidden>·</span>
+                  <span>{tool.children.length} tools</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <p className="mt-3 line-clamp-2 text-text-secondary typo-callout">
+          {tool.description}
+        </p>
+      </a>
+    </Link>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolDiscussion.tsx b/packages/shared/src/components/tools/ToolDiscussion.tsx
new file mode 100644
index 0000000000..c7389f1fa5
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolDiscussion.tsx
@@ -0,0 +1,110 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { MockComment } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  ButtonColor,
+} from '../buttons/Button';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolDiscussionProps {
+  comments: MockComment[];
+  upvotedComments: Set<string>;
+  onUpvoteComment: (commentId: string) => void;
+  className?: string;
+}
+
+const formatTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) {
+    return 'Today';
+  }
+  if (diffDays === 1) {
+    return 'Yesterday';
+  }
+  if (diffDays < 7) {
+    return `${diffDays} days ago`;
+  }
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  });
+};
+
+export const ToolDiscussion = ({
+  comments,
+  upvotedComments,
+  onUpvoteComment,
+  className,
+}: ToolDiscussionProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Discussion
+      </h2>
+      <div className="mb-4 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-3">
+        <textarea
+          className="w-full resize-none bg-transparent text-text-primary typo-body placeholder:text-text-quaternary focus:outline-none"
+          placeholder="Share your thoughts about this tool..."
+          rows={3}
+        />
+        <div className="mt-2 flex justify-end">
+          <Button variant={ButtonVariant.Primary} size={ButtonSize.Small}>
+            Post comment
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        {comments.map((comment) => {
+          const isUpvoted = upvotedComments.has(comment.id);
+          return (
+            <article
+              key={comment.id}
+              className="flex gap-3 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+            >
+              <Image
+                className="size-10 rounded-full object-cover"
+                src={comment.avatar}
+                alt={`${comment.username}'s avatar`}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-bold text-text-primary typo-callout">
+                    {comment.username}
+                  </span>
+                  <span className="text-text-quaternary typo-footnote">
+                    {formatTimestamp(comment.timestamp)}
+                  </span>
+                </div>
+                <p className="mt-2 text-text-secondary typo-body">
+                  {comment.content}
+                </p>
+                <div className="mt-3">
+                  <Button
+                    variant={ButtonVariant.Tertiary}
+                    color={isUpvoted ? ButtonColor.Avocado : undefined}
+                    size={ButtonSize.XSmall}
+                    pressed={isUpvoted}
+                    onClick={() => onUpvoteComment(comment.id)}
+                    icon={<UpvoteIcon secondary={isUpvoted} />}
+                  >
+                    {largeNumberFormat(comment.upvotes + (isUpvoted ? 1 : 0))}
+                  </Button>
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolHeader.tsx b/packages/shared/src/components/tools/ToolHeader.tsx
new file mode 100644
index 0000000000..85e21d4169
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolHeader.tsx
@@ -0,0 +1,59 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Tool } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import { Button, ButtonVariant, ButtonColor } from '../buttons/Button';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolHeaderProps {
+  tool: Tool;
+  isUpvoted: boolean;
+  onUpvote: () => void;
+  className?: string;
+}
+
+export const ToolHeader = ({
+  tool,
+  isUpvoted,
+  onUpvote,
+  className,
+}: ToolHeaderProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <div className="flex items-start gap-4">
+        <Image
+          className="size-16 rounded-16 object-cover laptop:size-20"
+          src={tool.image}
+          alt={`${tool.name} logo`}
+        />
+        <div className="min-w-0 flex-1">
+          <h1 className="font-bold text-text-primary typo-title1">
+            {tool.name}
+          </h1>
+          <p className="mt-2 text-text-secondary typo-body">
+            {tool.description}
+          </p>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center gap-4">
+        <Button
+          variant={ButtonVariant.Secondary}
+          color={isUpvoted ? ButtonColor.Avocado : undefined}
+          pressed={isUpvoted}
+          onClick={onUpvote}
+          icon={<UpvoteIcon secondary={isUpvoted} />}
+        >
+          {largeNumberFormat(tool.upvotes + (isUpvoted ? 1 : 0))}
+        </Button>
+        <span className="text-text-tertiary typo-callout">
+          {tool.relatedPosts.length} related posts
+        </span>
+        <span className="text-text-tertiary typo-callout">
+          {tool.comments.length} discussions
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolRelatedContent.tsx b/packages/shared/src/components/tools/ToolRelatedContent.tsx
new file mode 100644
index 0000000000..498760ccd6
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolRelatedContent.tsx
@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { MockPost } from '../../lib/toolsMockData';
+import { UpvoteIcon, DiscussIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolRelatedContentProps {
+  posts: MockPost[];
+  className?: string;
+}
+
+export const ToolRelatedContent = ({
+  posts,
+  className,
+}: ToolRelatedContentProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Related posts
+      </h2>
+      <div className="flex flex-col gap-3">
+        {posts.map((post) => (
+          <article
+            key={post.id}
+            className="flex flex-col gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+          >
+            <h3 className="font-bold text-text-primary typo-callout">
+              {post.title}
+            </h3>
+            <div className="flex items-center gap-3 text-text-tertiary typo-footnote">
+              <span>{post.source}</span>
+              <span aria-hidden>·</span>
+              <span>{post.date}</span>
+              <span className="flex items-center gap-1">
+                <UpvoteIcon className="size-3" />
+                {largeNumberFormat(post.upvotes)}
+              </span>
+              <span className="flex items-center gap-1">
+                <DiscussIcon className="size-3" />
+                {largeNumberFormat(post.comments)}
+              </span>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolSentimentChart.tsx b/packages/shared/src/components/tools/ToolSentimentChart.tsx
new file mode 100644
index 0000000000..710425da74
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolSentimentChart.tsx
@@ -0,0 +1,113 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import classNames from 'classnames';
+import type { SentimentDataPoint } from '../../lib/toolsMockData';
+
+export interface ToolSentimentChartProps {
+  data: SentimentDataPoint[];
+  className?: string;
+}
+
+const tickStyle = {
+  fill: 'var(--theme-text-tertiary)',
+  fontSize: '0.6875rem',
+};
+
+export const ToolSentimentChart = ({
+  data,
+  className,
+}: ToolSentimentChartProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Sentiment over time
+      </h2>
+      <div className="h-64 w-full">
+        <ResponsiveContainer>
+          <AreaChart
+            data={data}
+            margin={{
+              top: 10,
+              right: 10,
+              left: -20,
+              bottom: 0,
+            }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--theme-border-subtlest-tertiary)"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="date"
+              axisLine={false}
+              tickLine={false}
+              tick={tickStyle}
+              interval="preserveStartEnd"
+            />
+            <YAxis axisLine={false} tickLine={false} tick={tickStyle} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'var(--theme-background-subtle)',
+                border: '1px solid var(--theme-border-subtlest-tertiary)',
+                borderRadius: '8px',
+              }}
+              labelStyle={{ color: 'var(--theme-text-primary)' }}
+              itemStyle={{ color: 'var(--theme-text-secondary)' }}
+            />
+            <Area
+              type="monotone"
+              dataKey="positive"
+              stackId="1"
+              stroke="var(--theme-accent-avocado-default)"
+              fill="var(--theme-accent-avocado-default)"
+              fillOpacity={0.6}
+              name="Positive"
+            />
+            <Area
+              type="monotone"
+              dataKey="neutral"
+              stackId="1"
+              stroke="var(--theme-accent-cheese-default)"
+              fill="var(--theme-accent-cheese-default)"
+              fillOpacity={0.6}
+              name="Neutral"
+            />
+            <Area
+              type="monotone"
+              dataKey="negative"
+              stackId="1"
+              stroke="var(--theme-accent-ketchup-default)"
+              fill="var(--theme-accent-ketchup-default)"
+              fillOpacity={0.6}
+              name="Negative"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+      <div className="mt-4 flex items-center justify-center gap-6">
+        <div className="flex items-center gap-2">
+          <div className="size-3 rounded-full bg-accent-avocado-default" />
+          <span className="text-text-tertiary typo-footnote">Positive</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="size-3 rounded-full bg-accent-cheese-default" />
+          <span className="text-text-tertiary typo-footnote">Neutral</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="size-3 rounded-full bg-accent-ketchup-default" />
+          <span className="text-text-tertiary typo-footnote">Negative</span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/lib/toolsMockData.ts b/packages/shared/src/lib/toolsMockData.ts
new file mode 100644
index 0000000000..95244cf684
--- /dev/null
+++ b/packages/shared/src/lib/toolsMockData.ts
@@ -0,0 +1,388 @@
+export interface SentimentDataPoint {
+  date: string;
+  positive: number;
+  negative: number;
+  neutral: number;
+}
+
+export interface MockPost {
+  id: string;
+  title: string;
+  source: string;
+  date: string;
+  upvotes: number;
+  comments: number;
+}
+
+export interface MockComment {
+  id: string;
+  userId: string;
+  username: string;
+  avatar: string;
+  content: string;
+  timestamp: string;
+  upvotes: number;
+}
+
+export interface Tool {
+  id: string;
+  name: string;
+  slug: string;
+  parentSlug: string | null;
+  description: string;
+  image: string;
+  upvotes: number;
+  children: Tool[];
+  sentimentData: SentimentDataPoint[];
+  relatedPosts: MockPost[];
+  comments: MockComment[];
+}
+
+const generateSentimentData = (
+  basePositive: number,
+  baseNegative: number,
+  baseNeutral: number,
+): SentimentDataPoint[] => {
+  const now = new Date();
+
+  return Array.from({ length: 30 }, (_, index) => {
+    const dayOffset = 29 - index;
+    const date = new Date(now);
+    date.setDate(date.getDate() - dayOffset);
+
+    const variance = () => Math.floor(Math.random() * 20) - 10;
+    return {
+      date: date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      }),
+      positive: Math.max(0, basePositive + variance()),
+      negative: Math.max(0, baseNegative + variance()),
+      neutral: Math.max(0, baseNeutral + variance()),
+    };
+  });
+};
+
+const generateMockPosts = (toolName: string): MockPost[] => [
+  {
+    id: '1',
+    title: `Getting Started with ${toolName}: A Comprehensive Guide`,
+    source: 'Dev.to',
+    date: '2024-01-15',
+    upvotes: 342,
+    comments: 45,
+  },
+  {
+    id: '2',
+    title: `${toolName} vs Competitors: An In-Depth Comparison`,
+    source: 'Medium',
+    date: '2024-01-12',
+    upvotes: 256,
+    comments: 78,
+  },
+  {
+    id: '3',
+    title: `10 Things I Wish I Knew Before Using ${toolName}`,
+    source: 'Hacker News',
+    date: '2024-01-10',
+    upvotes: 189,
+    comments: 34,
+  },
+  {
+    id: '4',
+    title: `Building Production Apps with ${toolName}`,
+    source: 'daily.dev',
+    date: '2024-01-08',
+    upvotes: 421,
+    comments: 92,
+  },
+];
+
+const generateMockComments = (): MockComment[] => [
+  {
+    id: 'c1',
+    userId: 'u1',
+    username: 'techdev42',
+    avatar: 'https://avatar.vercel.sh/techdev42',
+    content:
+      'This tool has completely changed my workflow. Highly recommend it!',
+    timestamp: '2024-01-15T10:30:00Z',
+    upvotes: 24,
+  },
+  {
+    id: 'c2',
+    userId: 'u2',
+    username: 'airesearcher',
+    avatar: 'https://avatar.vercel.sh/airesearcher',
+    content:
+      "I've been using this for 3 months now. The recent updates are impressive.",
+    timestamp: '2024-01-14T15:45:00Z',
+    upvotes: 18,
+  },
+  {
+    id: 'c3',
+    userId: 'u3',
+    username: 'devops_ninja',
+    avatar: 'https://avatar.vercel.sh/devops_ninja',
+    content:
+      'Great for prototyping, but I found some edge cases that need work.',
+    timestamp: '2024-01-13T09:20:00Z',
+    upvotes: 12,
+  },
+];
+
+export const mockTools: Tool[] = [
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    slug: 'anthropic',
+    parentSlug: null,
+    description:
+      'AI safety company building reliable, interpretable, and steerable AI systems.',
+    image: 'https://img.icons8.com/color/96/anthropic.png',
+    upvotes: 15420,
+    sentimentData: generateSentimentData(85, 8, 45),
+    relatedPosts: generateMockPosts('Anthropic'),
+    comments: generateMockComments(),
+    children: [
+      {
+        id: 'anthropic-claude',
+        name: 'Claude',
+        slug: 'anthropic/claude',
+        parentSlug: 'anthropic',
+        description:
+          'AI assistant trained by Anthropic to be helpful, harmless, and honest.',
+        image: 'https://img.icons8.com/color/96/anthropic.png',
+        upvotes: 12350,
+        sentimentData: generateSentimentData(90, 5, 40),
+        relatedPosts: generateMockPosts('Claude'),
+        comments: generateMockComments(),
+        children: [
+          {
+            id: 'anthropic-claude-opus-4-5',
+            name: 'Opus 4.5',
+            slug: 'anthropic/claude/opus-4-5',
+            parentSlug: 'anthropic/claude',
+            description:
+              "Anthropic's most capable model with extended thinking abilities.",
+            image: 'https://img.icons8.com/color/96/anthropic.png',
+            upvotes: 8920,
+            sentimentData: generateSentimentData(92, 3, 35),
+            relatedPosts: generateMockPosts('Claude Opus 4.5'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'anthropic-claude-sonnet',
+            name: 'Sonnet',
+            slug: 'anthropic/claude/sonnet',
+            parentSlug: 'anthropic/claude',
+            description:
+              'Balanced model offering great performance at a lower cost.',
+            image: 'https://img.icons8.com/color/96/anthropic.png',
+            upvotes: 7650,
+            sentimentData: generateSentimentData(88, 6, 42),
+            relatedPosts: generateMockPosts('Claude Sonnet'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'anthropic-claude-haiku',
+            name: 'Haiku',
+            slug: 'anthropic/claude/haiku',
+            parentSlug: 'anthropic/claude',
+            description:
+              'Fast and efficient model for quick tasks and high throughput.',
+            image: 'https://img.icons8.com/color/96/anthropic.png',
+            upvotes: 5430,
+            sentimentData: generateSentimentData(82, 10, 48),
+            relatedPosts: generateMockPosts('Claude Haiku'),
+            comments: generateMockComments(),
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    slug: 'openai',
+    parentSlug: null,
+    description:
+      'AI research company developing safe artificial general intelligence.',
+    image: 'https://img.icons8.com/color/96/chatgpt.png',
+    upvotes: 18750,
+    sentimentData: generateSentimentData(80, 12, 50),
+    relatedPosts: generateMockPosts('OpenAI'),
+    comments: generateMockComments(),
+    children: [
+      {
+        id: 'openai-gpt',
+        name: 'GPT',
+        slug: 'openai/gpt',
+        parentSlug: 'openai',
+        description:
+          'Generative Pre-trained Transformer models for natural language processing.',
+        image: 'https://img.icons8.com/color/96/chatgpt.png',
+        upvotes: 16200,
+        sentimentData: generateSentimentData(78, 14, 52),
+        relatedPosts: generateMockPosts('GPT'),
+        comments: generateMockComments(),
+        children: [
+          {
+            id: 'openai-gpt-4o',
+            name: 'GPT-4o',
+            slug: 'openai/gpt/gpt-4o',
+            parentSlug: 'openai/gpt',
+            description:
+              'Multimodal model with vision, audio, and text capabilities.',
+            image: 'https://img.icons8.com/color/96/chatgpt.png',
+            upvotes: 9870,
+            sentimentData: generateSentimentData(85, 8, 45),
+            relatedPosts: generateMockPosts('GPT-4o'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'openai-gpt-4',
+            name: 'GPT-4',
+            slug: 'openai/gpt/gpt-4',
+            parentSlug: 'openai/gpt',
+            description:
+              'Advanced language model with improved reasoning abilities.',
+            image: 'https://img.icons8.com/color/96/chatgpt.png',
+            upvotes: 12450,
+            sentimentData: generateSentimentData(82, 10, 48),
+            relatedPosts: generateMockPosts('GPT-4'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'openai-gpt-o1',
+            name: 'o1',
+            slug: 'openai/gpt/o1',
+            parentSlug: 'openai/gpt',
+            description:
+              'Reasoning-focused model designed for complex problem solving.',
+            image: 'https://img.icons8.com/color/96/chatgpt.png',
+            upvotes: 7230,
+            sentimentData: generateSentimentData(75, 15, 55),
+            relatedPosts: generateMockPosts('o1'),
+            comments: generateMockComments(),
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'google',
+    name: 'Google',
+    slug: 'google',
+    parentSlug: null,
+    description:
+      'AI research division of Google developing cutting-edge models.',
+    image: 'https://img.icons8.com/color/96/google-logo.png',
+    upvotes: 14320,
+    sentimentData: generateSentimentData(75, 15, 55),
+    relatedPosts: generateMockPosts('Google AI'),
+    comments: generateMockComments(),
+    children: [
+      {
+        id: 'google-gemini',
+        name: 'Gemini',
+        slug: 'google/gemini',
+        parentSlug: 'google',
+        description:
+          'Multimodal AI model family built from the ground up for multimodality.',
+        image: 'https://img.icons8.com/color/96/google-gemini.png',
+        upvotes: 11890,
+        sentimentData: generateSentimentData(77, 13, 52),
+        relatedPosts: generateMockPosts('Gemini'),
+        comments: generateMockComments(),
+        children: [
+          {
+            id: 'google-gemini-ultra',
+            name: 'Ultra',
+            slug: 'google/gemini/ultra',
+            parentSlug: 'google/gemini',
+            description:
+              "Google's most capable Gemini model for highly complex tasks.",
+            image: 'https://img.icons8.com/color/96/google-gemini.png',
+            upvotes: 6540,
+            sentimentData: generateSentimentData(72, 18, 58),
+            relatedPosts: generateMockPosts('Gemini Ultra'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'google-gemini-pro',
+            name: 'Pro',
+            slug: 'google/gemini/pro',
+            parentSlug: 'google/gemini',
+            description: 'Best performing model for a wide range of tasks.',
+            image: 'https://img.icons8.com/color/96/google-gemini.png',
+            upvotes: 8920,
+            sentimentData: generateSentimentData(80, 12, 50),
+            relatedPosts: generateMockPosts('Gemini Pro'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'google-gemini-flash',
+            name: 'Flash',
+            slug: 'google/gemini/flash',
+            parentSlug: 'google/gemini',
+            description: 'Lightweight and fast model optimized for speed.',
+            image: 'https://img.icons8.com/color/96/google-gemini.png',
+            upvotes: 5670,
+            sentimentData: generateSentimentData(78, 14, 52),
+            relatedPosts: generateMockPosts('Gemini Flash'),
+            comments: generateMockComments(),
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const searchInTools = (tools: Tool[], slug: string): Tool | null => {
+  let found: Tool | null = null;
+  tools.some((tool) => {
+    if (tool.slug === slug) {
+      found = tool;
+      return true;
+    }
+    if (tool.children.length > 0) {
+      found = searchInTools(tool.children, slug);
+      if (found) {
+        return true;
+      }
+    }
+    return false;
+  });
+  return found;
+};
+
+export const findToolBySlug = (slug: string): Tool | null => {
+  return searchInTools(mockTools, slug);
+};
+
+export const getToolPath = (slug: string): Tool[] => {
+  const parts = slug.split('/');
+  return parts.reduce<{ path: Tool[]; currentSlug: string }>(
+    (acc, part) => {
+      const nextSlug = acc.currentSlug ? `${acc.currentSlug}/${part}` : part;
+      const tool = findToolBySlug(nextSlug);
+      if (tool) {
+        acc.path.push(tool);
+      }
+      return { ...acc, currentSlug: nextSlug };
+    },
+    { path: [], currentSlug: '' },
+  ).path;
+};
+
+export const getAllTopLevelTools = (): Tool[] => mockTools;
diff --git a/packages/webapp/pages/tools/[...slug].tsx b/packages/webapp/pages/tools/[...slug].tsx
new file mode 100644
index 0000000000..688e1dd17f
--- /dev/null
+++ b/packages/webapp/pages/tools/[...slug].tsx
@@ -0,0 +1,128 @@
+import type { ReactElement } from 'react';
+import React, { useState, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import dynamic from 'next/dynamic';
+import { PageWrapperLayout } from '@dailydotdev/shared/src/components/layout/PageWrapperLayout';
+import {
+  findToolBySlug,
+  getToolPath,
+} from '@dailydotdev/shared/src/lib/toolsMockData';
+import { ToolBreadcrumb } from '@dailydotdev/shared/src/components/tools/ToolBreadcrumb';
+import { ToolHeader } from '@dailydotdev/shared/src/components/tools/ToolHeader';
+import { ToolCard } from '@dailydotdev/shared/src/components/tools/ToolCard';
+import { ToolRelatedContent } from '@dailydotdev/shared/src/components/tools/ToolRelatedContent';
+import { ToolDiscussion } from '@dailydotdev/shared/src/components/tools/ToolDiscussion';
+import Custom404 from '../404';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { defaultOpenGraph } from '../../next-seo';
+import { getTemplatedTitle } from '../../components/layouts/utils';
+
+const ToolSentimentChart = dynamic(
+  () =>
+    import('@dailydotdev/shared/src/components/tools/ToolSentimentChart').then(
+      (mod) => mod.ToolSentimentChart,
+    ),
+  { ssr: false },
+);
+
+const ToolPage = (): ReactElement => {
+  const router = useRouter();
+  const { slug } = router.query;
+
+  const [upvotedTools, setUpvotedTools] = useState<Set<string>>(new Set());
+  const [upvotedComments, setUpvotedComments] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const slugString = Array.isArray(slug) ? slug.join('/') : slug || '';
+  const tool = useMemo(() => findToolBySlug(slugString), [slugString]);
+  const toolPath = useMemo(() => getToolPath(slugString), [slugString]);
+
+  const handleUpvoteTool = (toolId: string) => {
+    setUpvotedTools((prev) => {
+      const next = new Set(prev);
+      if (next.has(toolId)) {
+        next.delete(toolId);
+      } else {
+        next.add(toolId);
+      }
+      return next;
+    });
+  };
+
+  const handleUpvoteComment = (commentId: string) => {
+    setUpvotedComments((prev) => {
+      const next = new Set(prev);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+      } else {
+        next.add(commentId);
+      }
+      return next;
+    });
+  };
+
+  if (router.isFallback) {
+    return <></>;
+  }
+
+  if (!tool) {
+    return <Custom404 />;
+  }
+
+  const hasChildren = tool.children.length > 0;
+
+  return (
+    <PageWrapperLayout className="py-6">
+      <ToolBreadcrumb toolPath={toolPath} className="mb-4" />
+
+      <ToolHeader
+        tool={tool}
+        isUpvoted={upvotedTools.has(tool.id)}
+        onUpvote={() => handleUpvoteTool(tool.id)}
+        className="mb-8"
+      />
+
+      {hasChildren && (
+        <section className="mb-8">
+          <h2 className="mb-4 font-bold text-text-primary typo-title3">
+            Available tools
+          </h2>
+          <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2 laptop:grid-cols-3">
+            {tool.children.map((child) => (
+              <ToolCard key={child.id} tool={child} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      <div className="grid grid-cols-1 gap-8 laptop:grid-cols-2">
+        <ToolSentimentChart data={tool.sentimentData} />
+        <ToolRelatedContent posts={tool.relatedPosts} />
+      </div>
+
+      <ToolDiscussion
+        comments={tool.comments}
+        upvotedComments={upvotedComments}
+        onUpvoteComment={handleUpvoteComment}
+        className="mt-8"
+      />
+    </PageWrapperLayout>
+  );
+};
+
+const getToolPageLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+ToolPage.getLayout = getToolPageLayout;
+ToolPage.layoutProps = {
+  screenCentered: false,
+  seo: {
+    title: getTemplatedTitle('AI Tool'),
+    openGraph: { ...defaultOpenGraph },
+  } as NextSeoProps,
+};
+
+export default ToolPage;
diff --git a/packages/webapp/pages/tools/index.tsx b/packages/webapp/pages/tools/index.tsx
new file mode 100644
index 0000000000..f10fa577c6
--- /dev/null
+++ b/packages/webapp/pages/tools/index.tsx
@@ -0,0 +1,54 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import { AiIcon } from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { BreadCrumbs } from '@dailydotdev/shared/src/components/header/BreadCrumbs';
+import { PageWrapperLayout } from '@dailydotdev/shared/src/components/layout/PageWrapperLayout';
+import { getAllTopLevelTools } from '@dailydotdev/shared/src/lib/toolsMockData';
+import { ToolCard } from '@dailydotdev/shared/src/components/tools/ToolCard';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { defaultOpenGraph } from '../../next-seo';
+import { getTemplatedTitle } from '../../components/layouts/utils';
+
+const seo: NextSeoProps = {
+  title: getTemplatedTitle('AI Tools Directory'),
+  openGraph: { ...defaultOpenGraph },
+  description:
+    'Explore and discover the best AI tools for developers. Find sentiment analysis, discussions, and community insights for tools like Claude, GPT, Gemini, and more.',
+};
+
+const ToolsPage = (): ReactElement => {
+  const tools = getAllTopLevelTools();
+
+  return (
+    <PageWrapperLayout className="py-6">
+      <div className="mb-6 flex justify-between">
+        <BreadCrumbs>
+          <AiIcon size={IconSize.XSmall} secondary /> Tools
+        </BreadCrumbs>
+      </div>
+      <h1 className="mb-2 typo-title1">AI Tools</h1>
+      <p className="mb-6 text-text-secondary typo-body">
+        Explore AI tools, see community sentiment, and join discussions.
+      </p>
+      <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2 laptop:grid-cols-3">
+        {tools.map((tool) => (
+          <ToolCard key={tool.id} tool={tool} />
+        ))}
+      </div>
+    </PageWrapperLayout>
+  );
+};
+
+const getToolsPageLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+ToolsPage.getLayout = getToolsPageLayout;
+ToolsPage.layoutProps = {
+  screenCentered: false,
+  seo,
+};
+
+export default ToolsPage;

From a71d96b1fd1813a1ba78b5e3e7d99744eeda6ad4 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 2 Feb 2026 16:43:03 +0200
Subject: [PATCH 2/3] fix: styling

---
 .../webapp/components/ai-tools/ToolCard.tsx   | 318 +++++++++++++
 .../components/ai-tools/TrendingSection.tsx   |  45 ++
 .../webapp/components/ai-tools/mockData.ts    | 437 ++++++++++++++++++
 packages/webapp/components/ai-tools/types.ts  |  63 +++
 packages/webapp/pages/ai-tools/index.tsx      | 153 ++++++
 5 files changed, 1016 insertions(+)
 create mode 100644 packages/webapp/components/ai-tools/ToolCard.tsx
 create mode 100644 packages/webapp/components/ai-tools/TrendingSection.tsx
 create mode 100644 packages/webapp/components/ai-tools/mockData.ts
 create mode 100644 packages/webapp/components/ai-tools/types.ts
 create mode 100644 packages/webapp/pages/ai-tools/index.tsx

diff --git a/packages/webapp/components/ai-tools/ToolCard.tsx b/packages/webapp/components/ai-tools/ToolCard.tsx
new file mode 100644
index 0000000000..7beed17b32
--- /dev/null
+++ b/packages/webapp/components/ai-tools/ToolCard.tsx
@@ -0,0 +1,318 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { FlexCol, FlexRow } from '@dailydotdev/shared/src/components/utilities';
+import {
+  Button,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  ArrowIcon,
+  UpvoteIcon,
+  EyeIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { LazyImage } from '@dailydotdev/shared/src/components/LazyImage';
+import type { AITool } from './types';
+
+interface ToolCardProps {
+  tool: AITool;
+  allTools: AITool[];
+}
+
+export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
+  const alternatives = allTools.filter((t) =>
+    tool.alternatives.includes(t.id),
+  );
+
+  return (
+    <div className="flex flex-col gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6 hover:border-border-subtlest-secondary">
+      {/* Header */}
+      <FlexRow className="items-start justify-between">
+        <FlexCol className="flex-1 gap-2">
+          <div className="flex items-center gap-2">
+            <Typography
+              type={TypographyType.Title3}
+              bold
+              color={TypographyColor.Primary}
+            >
+              {tool.name}
+            </Typography>
+            <span className="rounded-6 bg-theme-float px-2 py-0.5 text-xs font-bold text-text-tertiary">
+              v{tool.version}
+            </span>
+          </div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            by {tool.company}
+          </Typography>
+        </FlexCol>
+
+        {/* Sentiment Score */}
+        <div className="flex flex-col items-end gap-1">
+          <div className="flex items-center gap-1">
+            <UpvoteIcon size={IconSize.Small} secondary />
+            <Typography
+              type={TypographyType.Title3}
+              bold
+              color={TypographyColor.Primary}
+            >
+              {tool.sentiment.score}%
+            </Typography>
+          </div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            {tool.sentiment.totalReviews.toLocaleString()} reviews
+          </Typography>
+        </div>
+      </FlexRow>
+
+      {/* TLDR */}
+      <div className="rounded-12 border border-accent-cabbage-default bg-accent-cabbage-subtlest p-3">
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Primary}
+          bold
+        >
+          💡 {tool.tldr}
+        </Typography>
+      </div>
+
+      {/* Description */}
+      <Typography type={TypographyType.Body} color={TypographyColor.Secondary}>
+        {tool.description}
+      </Typography>
+
+      {/* Pricing & Install */}
+      <FlexRow className="gap-4">
+        <div className="flex-1 rounded-12 border border-border-subtlest-tertiary p-3">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-1"
+          >
+            Pricing
+          </Typography>
+          <div className="flex items-center gap-2">
+            {tool.pricing.freeTier && (
+              <span className="rounded-6 bg-theme-color-cabbage px-2 py-0.5 text-xs font-bold text-white">
+                FREE
+              </span>
+            )}
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Primary}
+            >
+              {tool.pricing.startingPrice || 'Free'}
+            </Typography>
+          </div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            className="mt-1"
+          >
+            {tool.pricing.details}
+          </Typography>
+        </div>
+
+        {tool.install && (
+          <div className="flex-1 rounded-12 border border-border-subtlest-tertiary p-3">
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+              bold
+              className="mb-1"
+            >
+              Quick Install
+            </Typography>
+            <code className="block rounded-8 bg-surface-primary p-2 text-xs text-text-primary">
+              {tool.install.command}
+            </code>
+          </div>
+        )}
+      </FlexRow>
+
+      {/* Trending Stats */}
+      <div className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-theme-float p-3">
+        <EyeIcon size={IconSize.Small} className="text-text-tertiary" />
+        <Typography type={TypographyType.Callout} color={TypographyColor.Primary}>
+          <span className="font-bold">{tool.trending.mentions}</span> mentions{' '}
+          <span className="text-text-tertiary">
+            ({tool.trending.timeframe})
+          </span>
+        </Typography>
+        <span
+          className={`ml-2 text-xs font-bold ${
+            tool.trending.change > 0
+              ? 'text-theme-status-success'
+              : 'text-theme-status-error'
+          }`}
+        >
+          {tool.trending.change > 0 ? '+' : ''}
+          {tool.trending.change}%
+        </span>
+      </div>
+
+      {/* Top Users */}
+      <div>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+          bold
+          className="mb-2"
+        >
+          Top contributors
+        </Typography>
+        <FlexRow className="gap-3">
+          {tool.topUsers.map((user) => (
+            <div
+              key={user.id}
+              className="flex items-center gap-2 rounded-10 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-2 hover:border-border-subtlest-secondary"
+            >
+              <LazyImage
+                imgSrc={user.avatar}
+                imgAlt={user.username}
+                className="size-8 rounded-full"
+              />
+              <div className="flex flex-col">
+                <Typography
+                  type={TypographyType.Footnote}
+                  color={TypographyColor.Primary}
+                  bold
+                >
+                  @{user.username}
+                </Typography>
+                <Typography
+                  type={TypographyType.Footnote}
+                  color={TypographyColor.Quaternary}
+                  className="text-xs"
+                >
+                  {user.contributions} posts
+                </Typography>
+              </div>
+            </div>
+          ))}
+        </FlexRow>
+      </div>
+
+      {/* Pros & Cons */}
+      <FlexRow className="gap-4">
+        <div className="flex-1">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-2"
+          >
+            Pros
+          </Typography>
+          <div className="flex flex-wrap gap-2">
+            {tool.pros.map((pro) => (
+              <span
+                key={pro}
+                className="rounded-6 border border-theme-status-success bg-theme-bg-tertiary px-2 py-1 text-xs text-text-secondary"
+              >
+                {pro}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className="flex-1">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-2"
+          >
+            Cons
+          </Typography>
+          <div className="flex flex-wrap gap-2">
+            {tool.cons.map((con) => (
+              <span
+                key={con}
+                className="rounded-6 border border-theme-status-error bg-theme-bg-tertiary px-2 py-1 text-xs text-text-secondary"
+              >
+                {con}
+              </span>
+            ))}
+          </div>
+        </div>
+      </FlexRow>
+
+      {/* Alternatives */}
+      {alternatives.length > 0 && (
+        <div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-2"
+          >
+            Similar tools
+          </Typography>
+          <div className="flex flex-wrap gap-2">
+            {alternatives.map((alt) => (
+              <span
+                key={alt.id}
+                className="cursor-pointer rounded-8 border border-border-subtlest-tertiary bg-theme-bg-tertiary px-3 py-1 text-sm text-text-secondary hover:border-text-tertiary"
+              >
+                {alt.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Metadata & Links */}
+      <FlexRow className="items-center justify-between border-t border-border-subtlest-tertiary pt-4">
+        <div className="flex gap-4">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Updated: {new Date(tool.metadata.lastUpdate).toLocaleDateString()}
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Latest: v{tool.metadata.latestVersion}
+          </Typography>
+        </div>
+        <FlexRow className="gap-2">
+          {tool.links.docs && (
+            <Button
+              variant={ButtonVariant.Tertiary}
+              tag="a"
+              href={tool.links.docs}
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<ArrowIcon className="rotate-[-45deg]" />}
+            >
+              Docs
+            </Button>
+          )}
+          <Button
+            variant={ButtonVariant.Primary}
+            tag="a"
+            href={tool.links.website}
+            target="_blank"
+            rel="noopener noreferrer"
+            icon={<ArrowIcon className="rotate-[-45deg]" />}
+          >
+            Visit
+          </Button>
+        </FlexRow>
+      </FlexRow>
+    </div>
+  );
+};
diff --git a/packages/webapp/components/ai-tools/TrendingSection.tsx b/packages/webapp/components/ai-tools/TrendingSection.tsx
new file mode 100644
index 0000000000..7db3b288c3
--- /dev/null
+++ b/packages/webapp/components/ai-tools/TrendingSection.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { FlexRow } from '@dailydotdev/shared/src/components/utilities';
+import type { TrendingInsight } from './types';
+
+interface TrendingSectionProps {
+  insights: TrendingInsight[];
+}
+
+export const TrendingSection = ({
+  insights,
+}: TrendingSectionProps): ReactElement => {
+  return (
+    <div className="flex flex-col gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6">
+      <Typography
+        type={TypographyType.Title3}
+        bold
+        color={TypographyColor.Primary}
+      >
+        What&apos;s happening now
+      </Typography>
+      <FlexRow className="flex-wrap gap-4">
+        {insights.map((insight) => (
+          <div
+            key={insight.toolId}
+            className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary px-4 py-2"
+          >
+            <span className="text-2xl">{insight.icon}</span>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Secondary}
+            >
+              {insight.message}
+            </Typography>
+          </div>
+        ))}
+      </FlexRow>
+    </div>
+  );
+};
diff --git a/packages/webapp/components/ai-tools/mockData.ts b/packages/webapp/components/ai-tools/mockData.ts
new file mode 100644
index 0000000000..59a1ebef2b
--- /dev/null
+++ b/packages/webapp/components/ai-tools/mockData.ts
@@ -0,0 +1,437 @@
+import type { AITool, TrendingInsight, SocialMention } from './types';
+
+export const mockTools: AITool[] = [
+  {
+    id: 'claude-opus-4-5',
+    name: 'Claude Opus 4.5',
+    version: '4.5',
+    company: 'Anthropic',
+    description:
+      'Most capable Claude model for complex coding tasks, deep technical analysis, and architectural decisions',
+    tldr: 'Best for complex coding tasks and technical architecture',
+    category: 'api',
+    pricing: {
+      freeTier: false,
+      startingPrice: '$15/million tokens',
+      details: 'Pay-as-you-go pricing, volume discounts available',
+    },
+    links: {
+      docs: 'https://docs.anthropic.com/claude/docs',
+      website: 'https://www.anthropic.com/claude',
+      changelog: 'https://docs.anthropic.com/claude/changelog',
+    },
+    sentiment: {
+      score: 96,
+      totalReviews: 3420,
+    },
+    trending: {
+      mentions: 892,
+      timeframe: 'last 24h',
+      change: 23,
+    },
+    topUsers: [
+      {
+        id: 'user1',
+        username: 'alice_dev',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=alice',
+        contributions: 145,
+      },
+      {
+        id: 'user2',
+        username: 'bob_codes',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=bob',
+        contributions: 98,
+      },
+      {
+        id: 'user3',
+        username: 'charlie_tech',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=charlie',
+        contributions: 87,
+      },
+    ],
+    pros: [
+      'Exceptional reasoning',
+      'Large context window',
+      'Strong code understanding',
+      'Detailed explanations',
+    ],
+    cons: ['Higher cost', 'No free tier', 'Rate limits on new accounts'],
+    alternatives: ['gpt-4-turbo', 'gemini-pro-1-5'],
+    metadata: {
+      lastUpdate: '2025-01-15',
+      latestVersion: '4.5',
+    },
+  },
+  {
+    id: 'claude-code',
+    name: 'Claude Code',
+    version: '1.0',
+    company: 'Anthropic',
+    description:
+      'Official CLI tool from Anthropic for AI-powered coding in your terminal with file editing, bash execution, and agentic workflows',
+    tldr: 'AI coding assistant right in your terminal',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      details: 'Free tier available, usage based on Claude API pricing',
+    },
+    install: {
+      command: 'npm install -g @anthropics/claude-code',
+      type: 'npm',
+    },
+    links: {
+      docs: 'https://docs.anthropic.com/claude-code',
+      website: 'https://claude.com/claude-code',
+    },
+    sentiment: {
+      score: 94,
+      totalReviews: 2341,
+    },
+    trending: {
+      mentions: 1456,
+      timeframe: 'last 24h',
+      change: 67,
+    },
+    topUsers: [
+      {
+        id: 'user4',
+        username: 'dev_master',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev',
+        contributions: 234,
+      },
+      {
+        id: 'user5',
+        username: 'code_ninja',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ninja',
+        contributions: 189,
+      },
+      {
+        id: 'user6',
+        username: 'tech_wizard',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wizard',
+        contributions: 156,
+      },
+    ],
+    pros: [
+      'Native terminal integration',
+      'Agentic workflows',
+      'File editing capabilities',
+      'Free tier',
+    ],
+    cons: [
+      'Still in beta',
+      'Limited IDE integrations',
+      'Learning curve for CLI',
+    ],
+    alternatives: ['cursor', 'aider', 'github-copilot'],
+    metadata: {
+      lastUpdate: '2026-01-28',
+      latestVersion: '1.0.0',
+    },
+  },
+  {
+    id: 'gpt-4-turbo',
+    name: 'GPT-4 Turbo',
+    version: '4-turbo',
+    company: 'OpenAI',
+    description:
+      'Fast and capable model optimized for code generation, with vision capabilities and JSON mode',
+    tldr: 'Fast, capable, with vision and structured outputs',
+    category: 'api',
+    pricing: {
+      freeTier: false,
+      startingPrice: '$10/million tokens',
+      details: 'Pay-as-you-go, cheaper than GPT-4',
+    },
+    links: {
+      docs: 'https://platform.openai.com/docs',
+      website: 'https://openai.com/gpt-4',
+    },
+    sentiment: {
+      score: 88,
+      totalReviews: 5621,
+    },
+    trending: {
+      mentions: 678,
+      timeframe: 'last 24h',
+      change: -12,
+    },
+    topUsers: [
+      {
+        id: 'user7',
+        username: 'ai_builder',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=builder',
+        contributions: 201,
+      },
+      {
+        id: 'user8',
+        username: 'prompt_pro',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=pro',
+        contributions: 167,
+      },
+    ],
+    pros: [
+      'Fast response times',
+      'Vision capabilities',
+      'JSON mode',
+      'Lower cost than GPT-4',
+    ],
+    cons: [
+      'Occasional hallucinations',
+      'Less reasoning than Opus',
+      'Rate limits',
+    ],
+    alternatives: ['claude-opus-4-5', 'gemini-pro-1-5'],
+    metadata: {
+      lastUpdate: '2025-12-10',
+      latestVersion: 'gpt-4-turbo-2024-04-09',
+    },
+  },
+  {
+    id: 'cursor',
+    name: 'Cursor',
+    version: '0.43',
+    company: 'Anysphere',
+    description:
+      'AI-first code editor built on VS Code with native AI integration, chat, and inline editing',
+    tldr: 'VS Code fork with built-in AI superpowers',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      startingPrice: '$20/month',
+      details: 'Free tier with limited requests, Pro at $20/mo',
+    },
+    install: {
+      command: 'Download from cursor.sh',
+      type: 'download',
+    },
+    links: {
+      website: 'https://cursor.sh',
+      docs: 'https://docs.cursor.sh',
+    },
+    sentiment: {
+      score: 92,
+      totalReviews: 4123,
+    },
+    trending: {
+      mentions: 2103,
+      timeframe: 'last 24h',
+      change: 156,
+    },
+    topUsers: [
+      {
+        id: 'user9',
+        username: 'cursor_fan',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=fan',
+        contributions: 312,
+      },
+      {
+        id: 'user10',
+        username: 'vscode_migrant',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=migrant',
+        contributions: 245,
+      },
+    ],
+    pros: [
+      'Seamless VS Code experience',
+      'Natural chat interface',
+      'Cmd+K inline editing',
+      'Free tier available',
+    ],
+    cons: [
+      'Mac-first design',
+      'Some VS Code extensions incompatible',
+      'Pricing for teams',
+    ],
+    alternatives: ['claude-code', 'github-copilot', 'windsurf'],
+    metadata: {
+      lastUpdate: '2026-01-20',
+      latestVersion: '0.43.2',
+    },
+  },
+  {
+    id: 'github-copilot',
+    name: 'GitHub Copilot',
+    version: '1.156',
+    company: 'GitHub',
+    description:
+      'AI pair programmer powered by OpenAI Codex, integrated into VS Code, JetBrains, and more',
+    tldr: 'AI autocomplete for code in your favorite editor',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      startingPrice: '$10/month',
+      details: 'Free for students and open source maintainers',
+    },
+    links: {
+      website: 'https://github.com/features/copilot',
+      docs: 'https://docs.github.com/copilot',
+    },
+    sentiment: {
+      score: 85,
+      totalReviews: 8934,
+    },
+    trending: {
+      mentions: 534,
+      timeframe: 'last 24h',
+      change: -5,
+    },
+    topUsers: [
+      {
+        id: 'user11',
+        username: 'gh_user',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=gh',
+        contributions: 456,
+      },
+      {
+        id: 'user12',
+        username: 'copilot_daily',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=daily',
+        contributions: 389,
+      },
+    ],
+    pros: [
+      'Wide IDE support',
+      'Great autocomplete',
+      'Free for students',
+      'GitHub integration',
+    ],
+    cons: [
+      'Can suggest outdated code',
+      'Subscription required',
+      'Privacy concerns',
+    ],
+    alternatives: ['cursor', 'tabnine', 'codeium'],
+    metadata: {
+      lastUpdate: '2026-01-30',
+      latestVersion: '1.156.0',
+    },
+  },
+  {
+    id: 'aider',
+    name: 'Aider',
+    version: '0.61',
+    company: 'Open Source',
+    description:
+      'AI pair programming in your terminal with git integration and support for multiple LLMs',
+    tldr: 'Terminal-based AI coding with git awareness',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      details: 'Open source, BYO API key',
+    },
+    install: {
+      command: 'pip install aider-chat',
+      type: 'pip',
+    },
+    links: {
+      website: 'https://aider.chat',
+      docs: 'https://aider.chat/docs',
+    },
+    sentiment: {
+      score: 91,
+      totalReviews: 1876,
+    },
+    trending: {
+      mentions: 423,
+      timeframe: 'last 24h',
+      change: 34,
+    },
+    topUsers: [
+      {
+        id: 'user13',
+        username: 'terminal_lover',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=terminal',
+        contributions: 178,
+      },
+      {
+        id: 'user14',
+        username: 'git_guru',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=git',
+        contributions: 134,
+      },
+    ],
+    pros: [
+      'Open source',
+      'Git integration',
+      'Multi-LLM support',
+      'Terminal native',
+    ],
+    cons: [
+      'CLI learning curve',
+      'BYO API key',
+      'Less polished than commercial tools',
+    ],
+    alternatives: ['claude-code', 'cursor', 'continue'],
+    metadata: {
+      lastUpdate: '2026-01-25',
+      latestVersion: '0.61.0',
+    },
+  },
+];
+
+export const trendingInsights: TrendingInsight[] = [
+  {
+    type: 'favorite',
+    toolId: 'claude-code',
+    toolName: 'Claude Code',
+    message: 'Community favorite: Claude Code',
+    icon: '⭐',
+  },
+  {
+    type: 'trending',
+    toolId: 'cursor',
+    toolName: 'Cursor',
+    message: 'Trending: Cursor - 2,103 mentions (last 24h)',
+    icon: '🔥',
+  },
+  {
+    type: 'rising',
+    toolId: 'claude-code',
+    toolName: 'Claude Code',
+    message: 'Rising: Claude Code - +67% engagement',
+    icon: '📈',
+  },
+];
+
+export const mockMentions: SocialMention[] = [
+  {
+    id: '1',
+    source: 'twitter',
+    author: '@dev_influencer',
+    content:
+      'Just switched to Claude Code for my terminal workflow. The agentic features are game-changing! 🚀',
+    sentiment: 'positive',
+    timestamp: '2h ago',
+    toolId: 'claude-code',
+  },
+  {
+    id: '2',
+    source: 'reddit',
+    author: 'u/coder123',
+    content:
+      "Cursor's inline editing with Cmd+K is exactly what I needed. Worth every penny.",
+    sentiment: 'positive',
+    timestamp: '4h ago',
+    toolId: 'cursor',
+  },
+  {
+    id: '3',
+    source: 'dailydev',
+    author: 'tech_writer',
+    content:
+      'Compared Claude Opus 4.5 vs GPT-4 Turbo for complex refactoring. Opus won hands down.',
+    sentiment: 'positive',
+    timestamp: '6h ago',
+    toolId: 'claude-opus-4-5',
+  },
+  {
+    id: '4',
+    source: 'twitter',
+    author: '@open_source_fan',
+    content: 'Aider + Claude = perfect terminal coding setup. Open source ftw! 🎉',
+    sentiment: 'positive',
+    timestamp: '8h ago',
+    toolId: 'aider',
+  },
+];
diff --git a/packages/webapp/components/ai-tools/types.ts b/packages/webapp/components/ai-tools/types.ts
new file mode 100644
index 0000000000..b703fc21a5
--- /dev/null
+++ b/packages/webapp/components/ai-tools/types.ts
@@ -0,0 +1,63 @@
+export interface AITool {
+  id: string;
+  name: string;
+  version: string;
+  company: string;
+  description: string;
+  tldr: string;
+  category: 'coding-assistant' | 'chat' | 'api' | 'search' | 'other';
+  pricing: {
+    freeTier: boolean;
+    startingPrice?: string;
+    details: string;
+  };
+  install?: {
+    command: string;
+    type: 'npm' | 'pip' | 'brew' | 'download';
+  };
+  links: {
+    docs?: string;
+    website: string;
+    changelog?: string;
+  };
+  sentiment: {
+    score: number; // 0-100
+    totalReviews: number;
+  };
+  trending: {
+    mentions: number;
+    timeframe: string; // e.g., "last 24h"
+    change: number; // percentage change
+  };
+  topUsers: Array<{
+    id: string;
+    username: string;
+    avatar: string;
+    contributions: number;
+  }>;
+  pros: string[];
+  cons: string[];
+  alternatives: string[]; // IDs of alternative tools
+  metadata: {
+    lastUpdate: string;
+    latestVersion: string;
+  };
+}
+
+export interface TrendingInsight {
+  type: 'trending' | 'favorite' | 'rising';
+  toolId: string;
+  toolName: string;
+  message: string;
+  icon: string;
+}
+
+export interface SocialMention {
+  id: string;
+  source: 'twitter' | 'reddit' | 'dailydev';
+  author: string;
+  content: string;
+  sentiment: 'positive' | 'neutral' | 'negative';
+  timestamp: string;
+  toolId: string;
+}
diff --git a/packages/webapp/pages/ai-tools/index.tsx b/packages/webapp/pages/ai-tools/index.tsx
new file mode 100644
index 0000000000..70987f7d90
--- /dev/null
+++ b/packages/webapp/pages/ai-tools/index.tsx
@@ -0,0 +1,153 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { NextSeoProps } from 'next-seo';
+import {
+  ResponsivePageContainer,
+  pageBorders,
+} from '@dailydotdev/shared/src/components/utilities';
+import { LayoutHeader } from '@dailydotdev/shared/src/components/layout/common';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import ProtectedPage from '../../components/ProtectedPage';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { TrendingSection } from '../../components/ai-tools/TrendingSection';
+import { ToolCard } from '../../components/ai-tools/ToolCard';
+import { mockTools, trendingInsights } from '../../components/ai-tools/mockData';
+
+const AITools = (): ReactElement => {
+  return (
+    <ProtectedPage>
+      <div className="mx-auto w-full max-w-[64rem]">
+        <LayoutHeader
+          className={classNames('!mb-0 gap-2 border-b px-4', pageBorders)}
+        >
+          <div className="flex flex-1 flex-col gap-1">
+            <Typography
+              type={TypographyType.Title2}
+              bold
+              color={TypographyColor.Primary}
+            >
+              AI Coding Tools
+            </Typography>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              Your go-to resource for AI coding assistants, with real-time
+              insights from the developer community
+            </Typography>
+          </div>
+        </LayoutHeader>
+
+        <ResponsivePageContainer className="!mx-0 !w-full !max-w-full gap-8 py-6">
+          {/* Trending Section */}
+          <TrendingSection insights={trendingInsights} />
+
+          {/* Stats Overview */}
+          <div className="grid grid-cols-3 gap-4">
+            <div className="rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-4 text-center">
+              <Typography
+                type={TypographyType.Title1}
+                bold
+                color={TypographyColor.Primary}
+              >
+                {mockTools.length}
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Tools tracked
+              </Typography>
+            </div>
+            <div className="rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-4 text-center">
+              <Typography
+                type={TypographyType.Title1}
+                bold
+                color={TypographyColor.Primary}
+              >
+                5.2K
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Mentions today
+              </Typography>
+            </div>
+            <div className="rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-4 text-center">
+              <Typography
+                type={TypographyType.Title1}
+                bold
+                color={TypographyColor.Primary}
+              >
+                23K+
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Community reviews
+              </Typography>
+            </div>
+          </div>
+
+          {/* Tools Grid */}
+          <div className="flex flex-col gap-6">
+            <div className="flex items-center justify-between">
+              <Typography
+                type={TypographyType.Title3}
+                bold
+                color={TypographyColor.Primary}
+              >
+                All Tools
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Sorted by trending
+              </Typography>
+            </div>
+
+            <div className="flex flex-col gap-4">
+              {mockTools
+                .sort((a, b) => b.trending.mentions - a.trending.mentions)
+                .map((tool) => (
+                  <ToolCard key={tool.id} tool={tool} allTools={mockTools} />
+                ))}
+            </div>
+          </div>
+
+          {/* Footer Note */}
+          <div className="rounded-12 border border-border-subtlest-tertiary bg-surface-float p-6 text-center">
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              🚧 This is a demo preview with mocked data. Real-time data
+              integration coming soon!
+            </Typography>
+          </div>
+        </ResponsivePageContainer>
+      </div>
+    </ProtectedPage>
+  );
+};
+
+const seo: NextSeoProps = {
+  title: 'AI Coding Tools - Real-time insights from developers',
+  description:
+    'Discover the best AI coding tools with real-time insights, community reviews, and detailed comparisons.',
+  nofollow: false,
+  noindex: false,
+};
+
+AITools.getLayout = getLayout;
+AITools.layoutProps = { seo };
+
+export default AITools;

From 673ea9f4513fad85d8cc27e9195e899f2e497a1d Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 2 Feb 2026 16:48:02 +0200
Subject: [PATCH 3/3] fix: styling

---
 .../webapp/components/ai-tools/ToolCard.tsx   | 23 ++++++++++---------
 .../components/ai-tools/TrendingSection.tsx   |  2 +-
 .../webapp/components/ai-tools/mockData.ts    |  3 ++-
 packages/webapp/pages/ai-tools/index.tsx      | 11 +++++----
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/webapp/components/ai-tools/ToolCard.tsx b/packages/webapp/components/ai-tools/ToolCard.tsx
index 7beed17b32..4921919661 100644
--- a/packages/webapp/components/ai-tools/ToolCard.tsx
+++ b/packages/webapp/components/ai-tools/ToolCard.tsx
@@ -25,9 +25,7 @@ interface ToolCardProps {
 }
 
 export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
-  const alternatives = allTools.filter((t) =>
-    tool.alternatives.includes(t.id),
-  );
+  const alternatives = allTools.filter((t) => tool.alternatives.includes(t.id));
 
   return (
     <div className="flex flex-col gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6 hover:border-border-subtlest-secondary">
@@ -42,7 +40,7 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
             >
               {tool.name}
             </Typography>
-            <span className="rounded-6 bg-theme-float px-2 py-0.5 text-xs font-bold text-text-tertiary">
+            <span className="bg-theme-float rounded-6 px-2 py-0.5 text-xs font-bold text-text-tertiary">
               v{tool.version}
             </span>
           </div>
@@ -104,7 +102,7 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
           </Typography>
           <div className="flex items-center gap-2">
             {tool.pricing.freeTier && (
-              <span className="rounded-6 bg-theme-color-cabbage px-2 py-0.5 text-xs font-bold text-white">
+              <span className="bg-theme-color-cabbage rounded-6 px-2 py-0.5 text-xs font-bold text-white">
                 FREE
               </span>
             )}
@@ -142,9 +140,12 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
       </FlexRow>
 
       {/* Trending Stats */}
-      <div className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-theme-float p-3">
+      <div className="bg-theme-float flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary p-3">
         <EyeIcon size={IconSize.Small} className="text-text-tertiary" />
-        <Typography type={TypographyType.Callout} color={TypographyColor.Primary}>
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Primary}
+        >
           <span className="font-bold">{tool.trending.mentions}</span> mentions{' '}
           <span className="text-text-tertiary">
             ({tool.trending.timeframe})
@@ -176,7 +177,7 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
           {tool.topUsers.map((user) => (
             <div
               key={user.id}
-              className="flex items-center gap-2 rounded-10 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-2 hover:border-border-subtlest-secondary"
+              className="bg-theme-bg-tertiary flex items-center gap-2 rounded-10 border border-border-subtlest-tertiary p-2 hover:border-border-subtlest-secondary"
             >
               <LazyImage
                 imgSrc={user.avatar}
@@ -219,7 +220,7 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
             {tool.pros.map((pro) => (
               <span
                 key={pro}
-                className="rounded-6 border border-theme-status-success bg-theme-bg-tertiary px-2 py-1 text-xs text-text-secondary"
+                className="border-theme-status-success bg-theme-bg-tertiary rounded-6 border px-2 py-1 text-xs text-text-secondary"
               >
                 {pro}
               </span>
@@ -239,7 +240,7 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
             {tool.cons.map((con) => (
               <span
                 key={con}
-                className="rounded-6 border border-theme-status-error bg-theme-bg-tertiary px-2 py-1 text-xs text-text-secondary"
+                className="border-theme-status-error bg-theme-bg-tertiary rounded-6 border px-2 py-1 text-xs text-text-secondary"
               >
                 {con}
               </span>
@@ -263,7 +264,7 @@ export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
             {alternatives.map((alt) => (
               <span
                 key={alt.id}
-                className="cursor-pointer rounded-8 border border-border-subtlest-tertiary bg-theme-bg-tertiary px-3 py-1 text-sm text-text-secondary hover:border-text-tertiary"
+                className="bg-theme-bg-tertiary cursor-pointer rounded-8 border border-border-subtlest-tertiary px-3 py-1 text-sm text-text-secondary hover:border-text-tertiary"
               >
                 {alt.name}
               </span>
diff --git a/packages/webapp/components/ai-tools/TrendingSection.tsx b/packages/webapp/components/ai-tools/TrendingSection.tsx
index 7db3b288c3..6745c6ba77 100644
--- a/packages/webapp/components/ai-tools/TrendingSection.tsx
+++ b/packages/webapp/components/ai-tools/TrendingSection.tsx
@@ -28,7 +28,7 @@ export const TrendingSection = ({
         {insights.map((insight) => (
           <div
             key={insight.toolId}
-            className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary px-4 py-2"
+            className="bg-theme-bg-tertiary flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary px-4 py-2"
           >
             <span className="text-2xl">{insight.icon}</span>
             <Typography
diff --git a/packages/webapp/components/ai-tools/mockData.ts b/packages/webapp/components/ai-tools/mockData.ts
index 59a1ebef2b..ba7ee41f2d 100644
--- a/packages/webapp/components/ai-tools/mockData.ts
+++ b/packages/webapp/components/ai-tools/mockData.ts
@@ -429,7 +429,8 @@ export const mockMentions: SocialMention[] = [
     id: '4',
     source: 'twitter',
     author: '@open_source_fan',
-    content: 'Aider + Claude = perfect terminal coding setup. Open source ftw! 🎉',
+    content:
+      'Aider + Claude = perfect terminal coding setup. Open source ftw! 🎉',
     sentiment: 'positive',
     timestamp: '8h ago',
     toolId: 'aider',
diff --git a/packages/webapp/pages/ai-tools/index.tsx b/packages/webapp/pages/ai-tools/index.tsx
index 70987f7d90..090743ff15 100644
--- a/packages/webapp/pages/ai-tools/index.tsx
+++ b/packages/webapp/pages/ai-tools/index.tsx
@@ -16,7 +16,10 @@ import ProtectedPage from '../../components/ProtectedPage';
 import { getLayout } from '../../components/layouts/MainLayout';
 import { TrendingSection } from '../../components/ai-tools/TrendingSection';
 import { ToolCard } from '../../components/ai-tools/ToolCard';
-import { mockTools, trendingInsights } from '../../components/ai-tools/mockData';
+import {
+  mockTools,
+  trendingInsights,
+} from '../../components/ai-tools/mockData';
 
 const AITools = (): ReactElement => {
   return (
@@ -49,7 +52,7 @@ const AITools = (): ReactElement => {
 
           {/* Stats Overview */}
           <div className="grid grid-cols-3 gap-4">
-            <div className="rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-4 text-center">
+            <div className="bg-theme-bg-tertiary rounded-12 border border-border-subtlest-tertiary p-4 text-center">
               <Typography
                 type={TypographyType.Title1}
                 bold
@@ -64,7 +67,7 @@ const AITools = (): ReactElement => {
                 Tools tracked
               </Typography>
             </div>
-            <div className="rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-4 text-center">
+            <div className="bg-theme-bg-tertiary rounded-12 border border-border-subtlest-tertiary p-4 text-center">
               <Typography
                 type={TypographyType.Title1}
                 bold
@@ -79,7 +82,7 @@ const AITools = (): ReactElement => {
                 Mentions today
               </Typography>
             </div>
-            <div className="rounded-12 border border-border-subtlest-tertiary bg-theme-bg-tertiary p-4 text-center">
+            <div className="bg-theme-bg-tertiary rounded-12 border border-border-subtlest-tertiary p-4 text-center">
               <Typography
                 type={TypographyType.Title1}
                 bold