diff --git a/ecosystem-explorer/src/App.tsx b/ecosystem-explorer/src/App.tsx
index 47e25505..96ac6e8d 100644
--- a/ecosystem-explorer/src/App.tsx
+++ b/ecosystem-explorer/src/App.tsx
@@ -13,10 +13,61 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BrowserRouter } from "react-router-dom";
-import { LegacyApp } from "@/LegacyApp";
-import { V1App } from "@/v1";
+import { lazy, Suspense } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
 import { isEnabled } from "@/lib/feature-flags";
+import { ErrorBoundary } from "@/components/ui/error-boundary";
+
+const HomePage = lazy(() =>
+  import("@/features/home/home-page").then((m) => ({ default: m.HomePage }))
+);
+const JavaAgentPage = lazy(() =>
+  import("@/features/java-agent/java-agent-page").then((m) => ({ default: m.JavaAgentPage }))
+);
+const CollectorPage = lazy(() => import("@/features/collector/collector-page"));
+const CollectorComponentsPage = lazy(() =>
+  import("@/features/collector/collector-components-page").then((m) => ({
+    default: m.CollectorComponentsPage,
+  }))
+);
+const CollectorDetailPage = lazy(() =>
+  import("@/features/collector/collector-detail-page").then((m) => ({
+    default: m.CollectorDetailPage,
+  }))
+);
+const NotFoundPage = lazy(() =>
+  import("@/features/not-found/not-found-page").then((m) => ({ default: m.NotFoundPage }))
+);
+const JavaInstrumentationListPage = lazy(() =>
+  import("@/features/java-agent/java-instrumentation-list-page").then((m) => ({
+    default: m.JavaInstrumentationListPage,
+  }))
+);
+const JavaConfigurationListPage = lazy(() =>
+  import("@/features/java-agent/java-configuration-list-page").then((m) => ({
+    default: m.JavaConfigurationListPage,
+  }))
+);
+const JavaReleaseComparisonPage = lazy(() =>
+  import("@/features/java-agent/java-release-comparison-page").then((m) => ({
+    default: m.JavaReleaseComparisonPage,
+  }))
+);
+const InstrumentationDetailPage = lazy(() =>
+  import("@/features/java-agent/instrumentation-detail-page").then((m) => ({
+    default: m.InstrumentationDetailPage,
+  }))
+);
+const ConfigurationBuilderPage = lazy(() =>
+  import("@/features/java-agent/configuration/configuration-builder-page").then((m) => ({
+    default: m.ConfigurationBuilderPage,
+  }))
+);
+const AboutPage = lazy(() =>
+  import("@/features/about/about-page").then((m) => ({ default: m.AboutPage }))
+);
 
 /*
  * Single V1_REDESIGN boundary read. See
@@ -25,5 +76,70 @@ import { isEnabled } from "@/lib/feature-flags";
  * bundle selection is driven by netlify.toml's `feat/84-*` branch pattern.
  */
 export default function App() {
-  return <BrowserRouter>{isEnabled("V1_REDESIGN") ? <V1App /> : <LegacyApp />}</BrowserRouter>;
+  return (
+    <BrowserRouter>
+      <div className="bg-background flex min-h-screen flex-col">
+        <Header />
+        <main className="flex-1 pt-16">
+          <ErrorBoundary>
+            <Suspense
+              fallback={
+                <div
+                  className="flex min-h-[400px] items-center justify-center"
+                  role="status"
+                  aria-live="polite"
+                >
+                  <div className="text-muted-foreground text-sm font-medium">Loading...</div>
+                </div>
+              }
+            >
+              <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/java-agent" element={<JavaAgentPage />} />
+                <Route
+                  path="/java-agent/instrumentation"
+                  element={<JavaInstrumentationListPage />}
+                />
+                <Route
+                  path="/java-agent/instrumentation/:version"
+                  element={<JavaInstrumentationListPage />}
+                />
+                <Route
+                  path="/java-agent/instrumentation/:version/:name"
+                  element={<InstrumentationDetailPage />}
+                />
+                <Route
+                  path="/java-agent/configuration"
+                  element={<JavaConfigurationListPage />}
+                />
+                {isEnabled("JAVA_RELEASE_COMPARISON") && (
+                  <Route
+                    path="/java-agent/releases"
+                    element={<JavaReleaseComparisonPage />}
+                  />
+                )}
+                <Route
+                  path="/java-agent/configuration/builder"
+                  element={<ConfigurationBuilderPage />}
+                />
+                <Route path="/collector" element={<CollectorPage />} />
+                <Route path="/collector/components" element={<CollectorComponentsPage />} />
+                <Route
+                  path="/collector/components/:version"
+                  element={<CollectorComponentsPage />}
+                />
+                <Route
+                  path="/collector/components/:version/:id"
+                  element={<CollectorDetailPage />}
+                />
+                <Route path="/about" element={<AboutPage />} />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </Suspense>
+          </ErrorBoundary>
+        </main>
+        <Footer />
+      </div>
+    </BrowserRouter>
+  );
 }
diff --git a/ecosystem-explorer/src/features/collector/collector-components-page.tsx b/ecosystem-explorer/src/features/collector/collector-components-page.tsx
new file mode 100644
index 00000000..07dca774
--- /dev/null
+++ b/ecosystem-explorer/src/features/collector/collector-components-page.tsx
@@ -0,0 +1,408 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useMemo, useState } from "react";
+import { useParams, useNavigate, Link, useSearchParams } from "react-router-dom";
+import {
+  Search,
+  Loader2,
+  ChevronRight,
+  Box,
+  Layers,
+  Send,
+  Plug,
+  Workflow,
+  ChevronDown,
+  AlertCircle,
+} from "lucide-react";
+
+import { PageContainer } from "@/components/layout/page-container";
+import { GlowBadge } from "@/components/ui/glow-badge";
+import { DetailCard } from "@/components/ui/detail-card";
+import { useCollectorVersions, useCollectorComponents } from "@/hooks/use-collector-data";
+
+type ComponentTypeFilter =
+  | "all"
+  | "receiver"
+  | "processor"
+  | "exporter"
+  | "extension"
+  | "connector";
+type DistributionFilter = "all" | "core" | "contrib";
+
+function getTypeFilter(value: string | null): ComponentTypeFilter {
+  switch (value) {
+    case "receiver":
+    case "processor":
+    case "exporter":
+    case "extension":
+    case "connector":
+      return value;
+    default:
+      return "all";
+  }
+}
+
+function getDistributionFilter(value: string | null): DistributionFilter {
+  switch (value) {
+    case "core":
+    case "contrib":
+      return value;
+    default:
+      return "all";
+  }
+}
+
+const getIcon = (type: string) => {
+  switch (type) {
+    case "receiver":
+      return <Box className="h-4 w-4" aria-hidden="true" />;
+    case "processor":
+      return <Layers className="h-4 w-4" aria-hidden="true" />;
+    case "exporter":
+      return <Send className="h-4 w-4" aria-hidden="true" />;
+    case "extension":
+      return <Plug className="h-4 w-4" aria-hidden="true" />;
+    case "connector":
+      return <Workflow className="h-4 w-4" aria-hidden="true" />;
+    default:
+      return <Box className="h-4 w-4" aria-hidden="true" />;
+  }
+};
+
+function CollectorComponentsContent({ urlVersion }: { urlVersion?: string }) {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const typeQuery = searchParams.get("type");
+  const distributionQuery = searchParams.get("distribution");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const typeFilter = useMemo(
+    () => getTypeFilter(typeQuery),
+    [typeQuery]
+  );
+
+  const distributionFilter = useMemo(
+    () => getDistributionFilter(distributionQuery),
+    [distributionQuery]
+  );
+
+  const {
+    data: versionData,
+    loading: versionsLoading,
+    error: versionsError,
+  } = useCollectorVersions();
+
+  const currentVersion = useMemo(() => {
+    if (urlVersion) return urlVersion;
+    return versionData?.versions.find((v) => v.is_latest)?.version || "";
+  }, [urlVersion, versionData]);
+
+  const {
+    data: components,
+    loading: componentsLoading,
+    error: componentsError,
+  } = useCollectorComponents(currentVersion);
+
+  const filteredComponents = useMemo(() => {
+    if (!components) return [];
+
+    return components.filter((comp) => {
+      const matchesSearch =
+        comp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        comp.display_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        comp.description?.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesType = typeFilter === "all" || comp.type === typeFilter;
+      const matchesDistribution =
+        distributionFilter === "all" || comp.distribution === distributionFilter;
+      return matchesSearch && matchesType && matchesDistribution;
+    });
+  }, [components, distributionFilter, searchQuery, typeFilter]);
+
+  const handleVersionChange = (val: string) => {
+    navigate(`/collector/components/${val}`);
+  };
+
+  const handleTypeFilterChange = (newType: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (newType === "all") {
+      params.delete("type");
+    } else {
+      params.set("type", newType);
+    }
+    setSearchParams(params);
+  };
+
+  const handleDistributionFilterChange = (newDistribution: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (newDistribution === "all") {
+      params.delete("distribution");
+    } else {
+      params.set("distribution", newDistribution);
+    }
+    setSearchParams(params);
+  };
+
+  return (
+    <>
+      <div className="border-border/60 bg-card/80 relative overflow-hidden rounded-xl border p-6">
+        <div className="bg-gradient-radial from-secondary/5 via-primary/2 absolute inset-0 to-transparent opacity-50" />
+
+        <div className="relative z-10 flex flex-col gap-6 md:flex-row md:items-end">
+          <div className="flex-1 space-y-2">
+            <label htmlFor="search" className="text-muted-foreground text-sm font-medium">
+              Search
+            </label>
+            <div className="relative">
+              <Search
+                className="text-muted-foreground/60 absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+              <input
+                id="search"
+                type="text"
+                placeholder="Filter by name or description..."
+                className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-full rounded-lg border py-2.5 pr-4 pl-10 text-sm backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-4">
+            <div className="space-y-2">
+              <label htmlFor="type-filter" className="text-muted-foreground text-sm font-medium">
+                Type
+              </label>
+              <div className="relative">
+                <select
+                  id="type-filter"
+                  value={typeFilter}
+                  onChange={(e) => handleTypeFilterChange(e.target.value)}
+                  className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-[160px] cursor-pointer appearance-none rounded-lg border py-2.5 pr-10 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+                >
+                  <option value="all">All Types</option>
+                  <option value="receiver">Receivers</option>
+                  <option value="processor">Processors</option>
+                  <option value="exporter">Exporters</option>
+                  <option value="extension">Extensions</option>
+                  <option value="connector">Connectors</option>
+                </select>
+                <ChevronDown
+                  className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="version-select" className="text-muted-foreground text-sm font-medium">
+                Version
+              </label>
+              <div className="relative">
+                <select
+                  id="version-select"
+                  value={currentVersion}
+                  onChange={(e) => handleVersionChange(e.target.value)}
+                  disabled={versionsLoading}
+                  className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-[160px] cursor-pointer appearance-none rounded-lg border py-2.5 pr-10 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none disabled:opacity-50"
+                >
+                  {versionData?.versions.map((v) => (
+                    <option key={v.version} value={v.version}>
+                      v{v.version} {v.is_latest ? "(latest)" : ""}
+                    </option>
+                  ))}
+                </select>
+                <ChevronDown
+                  className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label
+                htmlFor="distribution-filter"
+                className="text-muted-foreground text-sm font-medium"
+              >
+                Distribution
+              </label>
+              <div className="relative">
+                <select
+                  id="distribution-filter"
+                  value={distributionFilter}
+                  onChange={(e) => handleDistributionFilterChange(e.target.value)}
+                  className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-[160px] cursor-pointer appearance-none rounded-lg border py-2.5 pr-10 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+                >
+                  <option value="all">All Distributions</option>
+                  <option value="core">Core</option>
+                  <option value="contrib">Contrib</option>
+                </select>
+                <ChevronDown
+                  className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {componentsError || versionsError ? (
+        <div className="flex flex-col items-center justify-center space-y-4 py-32 text-center text-red-500">
+          <AlertCircle className="mx-auto h-12 w-12 opacity-50" aria-hidden="true" />
+          <h3 className="text-xl font-semibold">Error loading data</h3>
+          <p className="text-muted-foreground">Please try refreshing the page.</p>
+        </div>
+      ) : componentsLoading || versionsLoading || !currentVersion ? (
+        <div className="flex flex-col items-center justify-center space-y-4 py-32">
+          <div className="inline-flex animate-pulse rounded-full p-4 shadow-[0_0_60px_hsl(var(--primary-hsl)/0.2)]">
+            <Loader2 className="text-primary h-10 w-10 animate-spin" aria-hidden="true" />
+          </div>
+          <p className="text-muted-foreground text-sm font-medium">Loading components...</p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          <div className="border-border/40 flex items-center justify-between border-b pb-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Showing <span className="text-foreground">{filteredComponents.length}</span>{" "}
+              components
+            </div>
+          </div>
+
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {filteredComponents.length > 0 ? (
+              filteredComponents.map((comp) => (
+                <Link
+                  key={comp.id}
+                  to={`/collector/components/${currentVersion}/${comp.id}`}
+                  className="group focus-visible:ring-primary block rounded-xl outline-none focus-visible:ring-2"
+                >
+                  <DetailCard
+                    withHoverEffect
+                    className="border-border/50 group-hover:border-primary/30 h-full transition-colors"
+                  >
+                    <div className="flex h-full flex-col space-y-4">
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-center gap-3">
+                          <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110">
+                            {getIcon(comp.type)}
+                          </div>
+                          <div className="space-y-1">
+                            <GlowBadge
+                              variant="muted"
+                              className="text-[10px] font-bold tracking-widest uppercase"
+                            >
+                              {comp.type}
+                            </GlowBadge>
+                          </div>
+                        </div>
+                        <ChevronRight
+                          className="text-muted-foreground/40 h-5 w-5 opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:opacity-100"
+                          aria-hidden="true"
+                        />
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <h3 className="group-hover:text-primary text-lg leading-tight font-bold transition-colors">
+                          {comp.display_name || comp.name}
+                        </h3>
+                        <div className="flex items-center gap-2">
+                          <code className="text-muted-foreground bg-muted/50 rounded px-1.5 py-0.5 font-mono text-[11px]">
+                            {comp.name}
+                          </code>
+                          <span className="text-muted-foreground/60 text-[10px] font-medium tracking-tighter uppercase">
+                            {comp.distribution}
+                          </span>
+                        </div>
+                      </div>
+
+                      <p className="text-muted-foreground/80 line-clamp-3 flex-1 text-sm leading-relaxed">
+                        {comp.description ||
+                          "Browse technical details and configuration options for this component."}
+                      </p>
+
+                      <div className="border-border/10 flex items-center gap-2 border-t pt-2">
+                        {comp.status?.stability &&
+                          Object.keys(comp.status.stability).length > 0 && (
+                            <GlowBadge
+                              variant={
+                                Object.keys(comp.status.stability)[0] === "stable"
+                                  ? "success"
+                                  : "info"
+                              }
+                              className="px-2 py-0 text-[9px]"
+                            >
+                              {Object.keys(comp.status.stability)[0]}
+                            </GlowBadge>
+                          )}
+                      </div>
+                    </div>
+                  </DetailCard>
+                </Link>
+              ))
+            ) : (
+              <div className="border-border/40 col-span-full rounded-2xl border-2 border-dashed py-32 text-center">
+                <div className="bg-muted/10 mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full">
+                  <Search className="text-muted-foreground/30 h-8 w-8" aria-hidden="true" />
+                </div>
+                <h3 className="text-foreground text-xl font-semibold">No components found</h3>
+                <p className="text-muted-foreground mx-auto mt-2 max-w-xs">
+                  We couldn't find any components matching your search criteria.
+                </p>
+                <button
+                  onClick={() => {
+                    setSearchQuery("");
+                    setSearchParams(new URLSearchParams());
+                  }}
+                  className="text-primary mt-6 text-sm font-semibold hover:underline"
+                >
+                  Clear all filters
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function CollectorComponentsPage() {
+  const { version: urlVersion } = useParams<{ version: string }>();
+
+  return (
+    <PageContainer>
+      <div className="space-y-8">
+        <header className="space-y-4">
+          <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
+            Collector{" "}
+            <span className="from-secondary to-primary bg-gradient-to-r bg-clip-text text-transparent">
+              Components
+            </span>
+          </h1>
+          <p className="text-muted-foreground max-w-2xl text-lg leading-relaxed">
+            Navigate the OpenTelemetry Collector ecosystem. Discover receivers, processors,
+            exporters, and extensions across different distributions.
+          </p>
+        </header>
+
+        <CollectorComponentsContent urlVersion={urlVersion} />
+      </div>
+    </PageContainer>
+  );
+}
+
+export default CollectorComponentsPage;
diff --git a/ecosystem-explorer/src/features/collector/collector-page.test.tsx b/ecosystem-explorer/src/features/collector/collector-page.test.tsx
index 99d537eb..fb6f7273 100644
--- a/ecosystem-explorer/src/features/collector/collector-page.test.tsx
+++ b/ecosystem-explorer/src/features/collector/collector-page.test.tsx
@@ -14,210 +14,24 @@
  * limitations under the License.
  */
 import { render, screen } from "@testing-library/react";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { describe, it, expect, vi } from "vitest";
 import { CollectorPage } from "@/features/collector/collector-page.tsx";
 
-vi.mock("@/hooks/use-collector-data", () => ({
-  useCollectorVersions: vi.fn(),
-  useCollectorComponents: vi.fn(),
+vi.mock("@/features/collector/components/collector-explore-landing.tsx", () => ({
+  CollectorExploreLanding: () => <div>Collector explore landing</div>,
 }));
 
-vi.mock("@/lib/feature-flags", () => ({
-  isEnabled: vi.fn(() => true),
-}));
-
-import { useCollectorVersions, useCollectorComponents } from "@/hooks/use-collector-data";
-import type { CollectorComponent } from "@/types/collector";
-
-const mockVersionsData = {
-  versions: [
-    { version: "0.100.0", is_latest: true },
-    { version: "0.99.0", is_latest: false },
-  ],
-};
-
-const mockComponents: CollectorComponent[] = [
-  {
-    id: "receiver-otlp",
-    name: "otlpreceiver",
-    display_name: "OTLP Receiver",
-    description: "Receives data via OTLP.",
-    ecosystem: "collector",
-    type: "receiver",
-    distribution: "core",
-    status: {
-      class: "receiver",
-      stability: { stable: ["traces", "metrics", "logs"] },
-      distributions: ["core"],
-    },
-  },
-  {
-    id: "processor-batch",
-    name: "batchprocessor",
-    display_name: "Batch Processor",
-    description: "Batches telemetry data.",
-    ecosystem: "collector",
-    type: "processor",
-    distribution: "core",
-    status: {
-      class: "processor",
-      stability: { stable: ["traces", "metrics", "logs"] },
-      distributions: ["core"],
-    },
-  },
-];
-
-function renderAtRoute(path: string) {
-  return render(
-    <MemoryRouter initialEntries={[path]}>
-      <Routes>
-        <Route path="/collector/components" element={<CollectorPage />} />
-        <Route path="/collector/components/:version" element={<CollectorPage />} />
-        <Route path="/collector/components/:version/:id" element={<CollectorPage />} />
-      </Routes>
-    </MemoryRouter>
-  );
-}
-
 describe("CollectorPage", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
   it("renders the page title", () => {
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: mockVersionsData,
-      loading: false,
-      error: null,
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: mockComponents,
-      loading: false,
-      error: null,
-    });
-
-    renderAtRoute("/collector/components");
+    render(
+      <MemoryRouter>
+        <CollectorPage />
+      </MemoryRouter>
+    );
 
     const heading = screen.getByRole("heading", { level: 1 });
-    expect(heading).toHaveTextContent(/Collector/);
-    expect(heading).toHaveTextContent(/Components/);
-  });
-
-  it("shows loading state while versions are loading", () => {
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: null,
-      loading: true,
-      error: null,
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: null,
-      loading: true,
-      error: null,
-    });
-
-    renderAtRoute("/collector/components");
-
-    expect(screen.getByText("Loading components...")).toBeInTheDocument();
-  });
-
-  it("shows error state when versions fail to load", () => {
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: null,
-      loading: false,
-      error: new Error("Network error"),
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: null,
-      loading: false,
-      error: null,
-    });
-
-    renderAtRoute("/collector/components");
-
-    expect(screen.getByRole("heading", { name: "Error loading data" })).toBeInTheDocument();
-    expect(screen.getByText("Please try refreshing the page.")).toBeInTheDocument();
-  });
-
-  it("shows error state when components fail to load", () => {
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: mockVersionsData,
-      loading: false,
-      error: null,
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: null,
-      loading: false,
-      error: new Error("Failed to load collector-manifest-0.100.0: 404 Not Found"),
-    });
-
-    renderAtRoute("/collector/components");
-
-    expect(screen.getByRole("heading", { name: "Error loading data" })).toBeInTheDocument();
-    expect(screen.getByText("Please try refreshing the page.")).toBeInTheDocument();
-  });
-
-  it("shows error state for an invalid version route instead of a misleading empty list", () => {
-    // Regression guard: /collector/components/9.9.9 must show an error,
-    // not "Showing 0 components" which implies a valid but empty filter result.
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: mockVersionsData,
-      loading: false,
-      error: null,
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: null,
-      loading: false,
-      error: new Error("Failed to load collector-manifest-9.9.9: 404 Not Found"),
-    });
-
-    renderAtRoute("/collector/components/9.9.9");
-
-    expect(useCollectorComponents).toHaveBeenCalledWith("9.9.9");
-    expect(screen.getByRole("heading", { name: "Error loading data" })).toBeInTheDocument();
-    expect(
-      screen.queryByText(
-        (_content, element) =>
-          element?.textContent?.replace(/\s+/g, " ").trim() === "Showing 0 components"
-      )
-    ).not.toBeInTheDocument();
-    expect(screen.queryByText("No components found")).not.toBeInTheDocument();
-  });
-
-  it("renders component cards when data loads successfully", () => {
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: mockVersionsData,
-      loading: false,
-      error: null,
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: mockComponents,
-      loading: false,
-      error: null,
-    });
-
-    renderAtRoute("/collector/components");
-
-    expect(screen.getByText("OTLP Receiver")).toBeInTheDocument();
-    expect(screen.getByText("Batch Processor")).toBeInTheDocument();
-    expect(screen.getByText(/Showing/)).toHaveTextContent("Showing 2 components");
-  });
-
-  it("renders version selector with available versions", () => {
-    vi.mocked(useCollectorVersions).mockReturnValue({
-      data: mockVersionsData,
-      loading: false,
-      error: null,
-    });
-    vi.mocked(useCollectorComponents).mockReturnValue({
-      data: mockComponents,
-      loading: false,
-      error: null,
-    });
-
-    renderAtRoute("/collector/components");
-
-    expect(screen.getByRole("option", { name: /0\.100\.0/ })).toBeInTheDocument();
-    expect(screen.getByRole("option", { name: /0\.99\.0/ })).toBeInTheDocument();
+    expect(heading).toHaveTextContent("OpenTelemetry Collector");
+    expect(screen.getByText("Collector explore landing")).toBeInTheDocument();
   });
 });
diff --git a/ecosystem-explorer/src/features/collector/collector-page.tsx b/ecosystem-explorer/src/features/collector/collector-page.tsx
index 6200af82..4ba36615 100644
--- a/ecosystem-explorer/src/features/collector/collector-page.tsx
+++ b/ecosystem-explorer/src/features/collector/collector-page.tsx
@@ -13,339 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  Box,
-  ChevronDown,
-  ChevronRight,
-  Layers,
-  Loader2,
-  Plug,
-  Search,
-  Send,
-  Workflow,
-} from "lucide-react";
-import { useMemo, useState } from "react";
-import { Link, useSearchParams, useParams } from "react-router-dom";
-
 import { PageContainer } from "@/components/layout/page-container";
 import { BackButton } from "@/components/ui/back-button";
-import { GlowBadge } from "@/components/ui/glow-badge";
-import { DetailCard } from "@/components/ui/detail-card";
-import { useCollectorComponents, useCollectorVersions } from "@/hooks/use-collector-data";
-import { isEnabled } from "@/lib/feature-flags";
-
-const getIcon = (type: string) => {
-  switch (type) {
-    case "receiver":
-      return <Box className="h-4 w-4" aria-hidden="true" />;
-    case "processor":
-      return <Layers className="h-4 w-4" aria-hidden="true" />;
-    case "exporter":
-      return <Send className="h-4 w-4" aria-hidden="true" />;
-    case "extension":
-      return <Plug className="h-4 w-4" aria-hidden="true" />;
-    case "connector":
-      return <Workflow className="h-4 w-4" aria-hidden="true" />;
-    default:
-      return <Box className="h-4 w-4" aria-hidden="true" />;
-  }
-};
-
-function CollectorPageInner() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { version: versionParam } = useParams();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [typeFilter, setTypeFilter] = useState<string>("all");
-
-  const {
-    data: versionData,
-    loading: versionsLoading,
-    error: versionsError,
-  } = useCollectorVersions();
-
-  const currentVersion = useMemo(() => {
-    // Priority: URL param > search param > latest version
-    if (versionParam) return versionParam;
-    const urlVersion = searchParams.get("version");
-    if (urlVersion) return urlVersion;
-    return versionData?.versions.find((v) => v.is_latest)?.version || "";
-  }, [versionParam, searchParams, versionData]);
-
-  const {
-    data: components,
-    loading: componentsLoading,
-    error: componentsError,
-  } = useCollectorComponents(currentVersion);
-
-  // Check for errors
-  const hasError = versionsError || componentsError;
-
-  const filteredComponents = useMemo(() => {
-    if (!components) return [];
-
-    return components.filter((comp) => {
-      const matchesSearch =
-        comp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        comp.display_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        comp.description?.toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesType = typeFilter === "all" || comp.type === typeFilter;
-      return matchesSearch && matchesType;
-    });
-  }, [components, searchQuery, typeFilter]);
-
-  const handleVersionChange = (val: string) => {
-    const latestVersion = versionData?.versions.find((v) => v.is_latest)?.version;
-    if (val === latestVersion) {
-      setSearchParams({});
-    } else {
-      setSearchParams({ version: val });
-    }
-  };
-  return (
-    <>
-      <div className="border-border/60 bg-card/80 relative overflow-hidden rounded-xl border p-6">
-        <div className="bg-gradient-radial from-secondary/5 via-primary/2 absolute inset-0 to-transparent opacity-50" />
-
-        <div className="relative z-10 flex flex-col gap-6 md:flex-row md:items-end">
-          <div className="flex-1 space-y-2">
-            <label htmlFor="search" className="text-muted-foreground text-sm font-medium">
-              Search
-            </label>
-            <div className="relative">
-              <Search
-                className="text-muted-foreground/60 absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-                aria-hidden="true"
-              />
-              <input
-                id="search"
-                type="text"
-                placeholder="Filter by name or description..."
-                className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-full rounded-lg border py-2.5 pr-4 pl-10 text-sm backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="flex flex-wrap gap-4">
-            <div className="space-y-2">
-              <label htmlFor="type-filter" className="text-muted-foreground text-sm font-medium">
-                Type
-              </label>
-              <div className="relative">
-                <select
-                  id="type-filter"
-                  value={typeFilter}
-                  onChange={(e) => setTypeFilter(e.target.value)}
-                  className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-40 cursor-pointer appearance-none rounded-lg border py-2.5 pr-10 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
-                >
-                  <option value="all">All Types</option>
-                  <option value="receiver">Receivers</option>
-                  <option value="processor">Processors</option>
-                  <option value="exporter">Exporters</option>
-                  <option value="extension">Extensions</option>
-                  <option value="connector">Connectors</option>
-                </select>
-                <ChevronDown
-                  className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
-                  aria-hidden="true"
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <label htmlFor="version-select" className="text-muted-foreground text-sm font-medium">
-                Version
-              </label>
-              <div className="relative">
-                <select
-                  id="version-select"
-                  value={currentVersion}
-                  onChange={(e) => handleVersionChange(e.target.value)}
-                  disabled={versionsLoading}
-                  className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 w-40 cursor-pointer appearance-none rounded-lg border py-2.5 pr-10 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none disabled:opacity-50"
-                >
-                  {versionData?.versions.map((v) => (
-                    <option key={v.version} value={v.version}>
-                      v{v.version} {v.is_latest ? "(latest)" : ""}
-                    </option>
-                  ))}
-                </select>
-                <ChevronDown
-                  className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
-                  aria-hidden="true"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {componentsLoading ? (
-        <div className="flex flex-col items-center justify-center space-y-4 py-32">
-          <div className="inline-flex animate-pulse rounded-full p-4 shadow-[0_0_60px_hsl(var(--primary-hsl)/0.2)]">
-            <Loader2 className="text-primary h-10 w-10 animate-spin" aria-hidden="true" />
-          </div>
-          <p className="text-muted-foreground text-sm font-medium">Loading components...</p>
-        </div>
-      ) : hasError ? (
-        <div className="flex flex-col items-center justify-center space-y-4 py-32">
-          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-100/10 text-red-500">
-            <Box className="h-8 w-8" aria-hidden="true" />
-          </div>
-          <h2 className="text-foreground text-2xl font-bold">Error loading data</h2>
-          <p className="text-muted-foreground max-w-xs text-center">
-            Please try refreshing the page.
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-6">
-          <div className="border-border/40 flex items-center justify-between border-b pb-4">
-            <div className="text-muted-foreground text-sm font-medium">
-              Showing <span className="text-foreground">{filteredComponents.length}</span>{" "}
-              components
-            </div>
-          </div>
-
-          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {filteredComponents.length > 0 ? (
-              filteredComponents.map((comp) => {
-                const latestVersion = versionData?.versions.find((v) => v.is_latest)?.version;
-                const detailUrl =
-                  currentVersion && currentVersion !== latestVersion
-                    ? `/collector/components/${comp.distribution}/${comp.name}?version=${currentVersion}`
-                    : `/collector/components/${comp.distribution}/${comp.name}`;
-
-                return (
-                  <Link
-                    key={comp.id}
-                    to={detailUrl}
-                    className="group focus-visible:ring-primary block rounded-xl outline-none focus-visible:ring-2"
-                  >
-                    <DetailCard
-                      withHoverEffect
-                      className="border-border/50 group-hover:border-primary/30 h-full transition-colors"
-                    >
-                      <div className="flex h-full flex-col space-y-4">
-                        <div className="flex items-start justify-between">
-                          <div className="flex items-center gap-3">
-                            <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110">
-                              {getIcon(comp.type)}
-                            </div>
-                            <div className="space-y-1">
-                              <GlowBadge
-                                variant="muted"
-                                className="text-[10px] font-bold tracking-widest uppercase"
-                              >
-                                {comp.type}
-                              </GlowBadge>
-                            </div>
-                          </div>
-                          <ChevronRight
-                            className="text-muted-foreground/40 h-5 w-5 opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:opacity-100"
-                            aria-hidden="true"
-                          />
-                        </div>
-
-                        <div className="space-y-1.5">
-                          <h3 className="group-hover:text-primary text-lg leading-tight font-bold transition-colors">
-                            {comp.display_name || comp.name}
-                          </h3>
-                          <div className="flex items-center gap-2">
-                            <code className="text-muted-foreground bg-muted/50 rounded px-1.5 py-0.5 font-mono text-[11px]">
-                              {comp.name}
-                            </code>
-                            <span className="text-muted-foreground/60 text-[10px] font-medium tracking-tighter uppercase">
-                              {comp.distribution}
-                            </span>
-                          </div>
-                        </div>
-
-                        <p className="text-muted-foreground/80 line-clamp-3 flex-1 text-sm leading-relaxed">
-                          {comp.description ||
-                            "Browse technical details and configuration options for this component."}
-                        </p>
-
-                        <div className="border-border/10 flex items-center gap-2 border-t pt-2">
-                          {comp.status?.stability &&
-                            Object.keys(comp.status.stability).length > 0 && (
-                              <GlowBadge
-                                variant={
-                                  Object.keys(comp.status.stability)[0] === "stable"
-                                    ? "success"
-                                    : "info"
-                                }
-                                className="px-2 py-0 text-[9px]"
-                              >
-                                {Object.keys(comp.status.stability)[0]}
-                              </GlowBadge>
-                            )}
-                        </div>
-                      </div>
-                    </DetailCard>
-                  </Link>
-                );
-              })
-            ) : (
-              <div className="border-border/40 col-span-full rounded-2xl border-2 border-dashed py-32 text-center">
-                <div className="bg-muted/10 mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full">
-                  <Search className="text-muted-foreground/30 h-8 w-8" aria-hidden="true" />
-                </div>
-                <h3 className="text-foreground text-xl font-semibold">No components found</h3>
-                <p className="text-muted-foreground mx-auto mt-2 max-w-xs">
-                  We couldn't find any components matching your search criteria.
-                </p>
-                <button
-                  onClick={() => {
-                    setSearchQuery("");
-                    setTypeFilter("all");
-                  }}
-                  className="text-primary mt-6 text-sm font-semibold hover:underline"
-                >
-                  Clear all filters
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
+import { CollectorExploreLanding } from "@/features/collector/components/collector-explore-landing.tsx";
 export function CollectorPage() {
   return (
     <PageContainer>
       <div className="space-y-6">
         <BackButton />
-        <header className="space-y-4">
-          <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
-            Collector{" "}
-            <span className="from-otel-orange to-otel-blue bg-linear-to-r bg-clip-text text-transparent">
-              Components
+        <div>
+          <h1 className="mb-2 text-3xl font-bold md:text-4xl">
+            <span className="bg-gradient-to-r from-[hsl(var(--secondary-hsl))] to-[hsl(var(--primary-hsl))] bg-clip-text text-transparent">
+              OpenTelemetry Collector
             </span>
           </h1>
-          <p className="text-muted-foreground max-w-2xl text-lg leading-relaxed">
-            Navigate the OpenTelemetry Collector ecosystem. Discover receivers, processors,
-            exporters, and extensions across different distributions.
+          <p className="text-muted-foreground">
+            A vendor-agnostic implementation for receiving, processing, and exporting telemetry
+            data.
           </p>
-        </header>
-
-        {!isEnabled("COLLECTOR_PAGE") ? (
-          <div className="border-border/40 bg-card/30 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed py-24 text-center backdrop-blur-sm">
-            <div className="bg-secondary/10 mb-6 inline-flex h-20 w-20 items-center justify-center rounded-full">
-              <Box className="text-secondary h-10 w-10 animate-pulse" aria-hidden="true" />
-            </div>
-            <h2 className="text-foreground text-2xl font-bold tracking-tight">Coming Soon</h2>
-            <p className="text-muted-foreground mx-auto mt-3 max-w-md text-lg leading-relaxed">
-              We're currently building the Collector component explorer. Stay tuned for a
-              comprehensive view of receivers, processors, and more!
-            </p>
-          </div>
-        ) : (
-          <CollectorPageInner />
-        )}
+        </div>
+        <CollectorExploreLanding />
       </div>
     </PageContainer>
   );
 }
+
+export default CollectorPage;
diff --git a/ecosystem-explorer/src/features/collector/components/collector-explore-landing.test.tsx b/ecosystem-explorer/src/features/collector/components/collector-explore-landing.test.tsx
new file mode 100644
index 00000000..b4247f36
--- /dev/null
+++ b/ecosystem-explorer/src/features/collector/components/collector-explore-landing.test.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CollectorExploreLanding } from "./collector-explore-landing";
+import { loadVersions } from "@/lib/api/collector-data";
+
+vi.mock("@/lib/api/collector-data", () => ({
+  loadVersions: vi.fn(),
+}));
+
+const collectorIndex = {
+  components: [
+    {
+      id: "core-receiver-otlpreceiver",
+      name: "otlpreceiver",
+      display_name: "OTLP Receiver",
+      description: "Receives OTLP telemetry.",
+      distribution: "core",
+      type: "receiver",
+      stability: "stable",
+    },
+    {
+      id: "contrib-receiver-prometheusreceiver",
+      name: "prometheusreceiver",
+      display_name: "Prometheus Receiver",
+      description: "Receives Prometheus metrics.",
+      distribution: "contrib",
+      type: "receiver",
+      stability: "stable",
+    },
+    {
+      id: "core-processor-batchprocessor",
+      name: "batchprocessor",
+      display_name: "Batch Processor",
+      description: "Batches telemetry.",
+      distribution: "core",
+      type: "processor",
+      stability: "stable",
+    },
+    {
+      id: "contrib-exporter-kafkaexporter",
+      name: "kafkaexporter",
+      display_name: "Kafka Exporter",
+      description: "Exports to Kafka.",
+      distribution: "contrib",
+      type: "exporter",
+      stability: "beta",
+    },
+    {
+      id: "contrib-extension-healthcheckextension",
+      name: "healthcheckextension",
+      display_name: "Health Check Extension",
+      description: "Reports collector health.",
+      distribution: "contrib",
+      type: "extension",
+      stability: "stable",
+    },
+  ],
+};
+
+function mockCollectorIndexResponse(response: Response) {
+  vi.stubGlobal("fetch", vi.fn<typeof fetch>(async () => response));
+}
+
+describe("CollectorExploreLanding", () => {
+  beforeEach(() => {
+    vi.mocked(loadVersions).mockResolvedValue({
+      versions: [
+        { version: "0.150.0", is_latest: true },
+        { version: "0.149.0", is_latest: false },
+      ],
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("renders counts, links, and the latest version from Collector data", async () => {
+    mockCollectorIndexResponse(
+      new Response(JSON.stringify(collectorIndex), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+
+    render(
+      <MemoryRouter>
+        <CollectorExploreLanding />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Loading Collector ecosystem data...")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: "Component Types" })).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Latest Collector data: v0.150.0")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Explore Components/i })).toHaveAttribute(
+      "href",
+      "/collector/components"
+    );
+    expect(screen.getByRole("link", { name: /Receiver/i })).toHaveAttribute(
+      "href",
+      "/collector/components?type=receiver"
+    );
+    expect(screen.getByRole("link", { name: /View Core Components/i })).toHaveAttribute(
+      "href",
+      "/collector/components?distribution=core"
+    );
+
+    const stats = screen.getByLabelText("Collector summary statistics");
+    expect(within(stats).getAllByText("5")).toHaveLength(2);
+    expect(within(stats).getByText("2")).toBeInTheDocument();
+
+    expect(screen.getByRole("link", { name: /Official Documentation/i })).toHaveAttribute(
+      "href",
+      "https://opentelemetry.io/docs/collector/"
+    );
+  });
+
+  it("renders an error state when the Collector index request fails", async () => {
+    mockCollectorIndexResponse(new Response("Not found", { status: 404 }));
+
+    render(
+      <MemoryRouter>
+        <CollectorExploreLanding />
+      </MemoryRouter>
+    );
+
+    expect(await screen.findByRole("alert")).toHaveTextContent("Error loading Collector data");
+    expect(screen.getByText("Collector index request failed with 404.")).toBeInTheDocument();
+  });
+});
diff --git a/ecosystem-explorer/src/features/collector/components/collector-explore-landing.tsx b/ecosystem-explorer/src/features/collector/components/collector-explore-landing.tsx
new file mode 100644
index 00000000..71097d9b
--- /dev/null
+++ b/ecosystem-explorer/src/features/collector/components/collector-explore-landing.tsx
@@ -0,0 +1,440 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  AlertCircle,
+  ArrowRight,
+  Box,
+  ExternalLink,
+  Layers,
+  Loader2,
+  Plug,
+  Send,
+  Workflow,
+} from "lucide-react";
+
+import { loadVersions } from "@/lib/api/collector-data";
+
+const COMPONENT_TYPES = [
+  {
+    type: "receiver",
+    label: "Receiver",
+    description:
+      "Collect telemetry data from various sources including OTLP, Prometheus, Jaeger, and many others",
+    icon: Box,
+  },
+  {
+    type: "processor",
+    label: "Processor",
+    description: "Transform, filter, batch, and enrich telemetry data before export",
+    icon: Layers,
+  },
+  {
+    type: "exporter",
+    label: "Exporter",
+    description: "Send telemetry data to observability backends and storage systems",
+    icon: Send,
+  },
+  {
+    type: "extension",
+    label: "Extension",
+    description: "Provide additional capabilities like health checks, profiling, and authentication",
+    icon: Plug,
+  },
+  {
+    type: "connector",
+    label: "Connector",
+    description: "Connect multiple pipelines and enable data flow between signal types",
+    icon: Workflow,
+  },
+] as const;
+
+const DISTRIBUTIONS = [
+  {
+    distribution: "core",
+    label: "Core",
+    description:
+      "Officially maintained components with stable APIs. Minimal dependencies, production-ready.",
+    buttonLabel: "View Core Components",
+  },
+  {
+    distribution: "contrib",
+    label: "Contrib",
+    description:
+      "Community-contributed components. May have varying stability levels. Broader ecosystem coverage.",
+    buttonLabel: "View Contrib Components",
+  },
+] as const;
+
+const RESOURCES = [
+  {
+    label: "Official Documentation",
+    href: "https://opentelemetry.io/docs/collector/",
+  },
+  {
+    label: "Getting Started Guide",
+    href: "https://opentelemetry.io/docs/collector/getting-started/",
+  },
+  {
+    label: "Configuration Reference",
+    href: "https://opentelemetry.io/docs/collector/configuration/",
+  },
+  {
+    label: "GitHub (Core)",
+    href: "https://github.com/open-telemetry/opentelemetry-collector",
+  },
+  {
+    label: "GitHub (Contrib)",
+    href: "https://github.com/open-telemetry/opentelemetry-collector-contrib",
+  },
+] as const;
+
+type CollectorComponentType = (typeof COMPONENT_TYPES)[number]["type"];
+type CollectorDistribution = (typeof DISTRIBUTIONS)[number]["distribution"];
+
+interface CollectorIndexComponent {
+  id: string;
+  name: string;
+  display_name?: string | null;
+  description?: string | null;
+  distribution: CollectorDistribution;
+  type: CollectorComponentType;
+  stability?: string | null;
+}
+
+interface CollectorLandingStats {
+  byDistribution: Record<CollectorDistribution, number>;
+  byType: Record<CollectorComponentType, number>;
+  latestVersion: string | null;
+  total: number;
+}
+
+type CollectorLandingState =
+  | { status: "loading" }
+  | { status: "error"; error: Error }
+  | { status: "ready"; stats: CollectorLandingStats };
+
+function emptyTypeCounts(): Record<CollectorComponentType, number> {
+  return {
+    receiver: 0,
+    processor: 0,
+    exporter: 0,
+    extension: 0,
+    connector: 0,
+  };
+}
+
+function emptyDistributionCounts(): Record<CollectorDistribution, number> {
+  return {
+    core: 0,
+    contrib: 0,
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isComponentType(value: unknown): value is CollectorComponentType {
+  return typeof value === "string" && COMPONENT_TYPES.some(({ type }) => type === value);
+}
+
+function isDistribution(value: unknown): value is CollectorDistribution {
+  return (
+    typeof value === "string" &&
+    DISTRIBUTIONS.some(({ distribution }) => distribution === value)
+  );
+}
+
+function isCollectorIndexComponent(value: unknown): value is CollectorIndexComponent {
+  if (!isRecord(value)) {
+    return false;
+  }
+
+  return (
+    typeof value.id === "string" &&
+    typeof value.name === "string" &&
+    isComponentType(value.type) &&
+    isDistribution(value.distribution)
+  );
+}
+
+function readCollectorComponents(payload: unknown): CollectorIndexComponent[] {
+  const componentEntries = Array.isArray(payload)
+    ? payload
+    : isRecord(payload) && Array.isArray(payload.components)
+      ? payload.components
+      : null;
+
+  if (!componentEntries) {
+    throw new Error("Collector index did not include a components array.");
+  }
+
+  return componentEntries.map((entry) => {
+    if (!isCollectorIndexComponent(entry)) {
+      throw new Error("Collector index contains an invalid component entry.");
+    }
+    return entry;
+  });
+}
+
+async function loadCollectorLandingStats(): Promise<CollectorLandingStats> {
+  const [indexResponse, versionData] = await Promise.all([
+    fetch("/data/collector/index.json"),
+    loadVersions(),
+  ]);
+
+  if (!indexResponse.ok) {
+    throw new Error(`Collector index request failed with ${indexResponse.status}.`);
+  }
+
+  const payload: unknown = await indexResponse.json();
+  const components = readCollectorComponents(payload);
+  const byType = emptyTypeCounts();
+  const byDistribution = emptyDistributionCounts();
+
+  for (const component of components) {
+    byType[component.type] += 1;
+    byDistribution[component.distribution] += 1;
+  }
+
+  return {
+    byDistribution,
+    byType,
+    latestVersion:
+      versionData.versions.find((version) => version.is_latest)?.version ??
+      versionData.versions[0]?.version ??
+      null,
+    total: components.length,
+  };
+}
+
+export function CollectorExploreLanding() {
+  const [state, setState] = useState<CollectorLandingState>({ status: "loading" });
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(), []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadStats() {
+      try {
+        const stats = await loadCollectorLandingStats();
+        if (!cancelled) {
+          setState({ status: "ready", stats });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            status: "error",
+            error: error instanceof Error ? error : new Error(String(error)),
+          });
+        }
+      }
+    }
+
+    loadStats();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (state.status === "loading") {
+    return (
+      <section
+        aria-live="polite"
+        className="border-border/60 bg-card/80 flex min-h-72 flex-col items-center justify-center rounded-lg border p-8 text-center"
+      >
+        <Loader2 className="text-primary h-10 w-10 animate-spin" aria-hidden="true" />
+        <p className="text-muted-foreground mt-4 text-sm font-medium">
+          Loading Collector ecosystem data...
+        </p>
+      </section>
+    );
+  }
+
+  if (state.status === "error") {
+    return (
+      <section
+        role="alert"
+        className="border-border/60 bg-card/80 flex min-h-72 flex-col items-center justify-center rounded-lg border p-8 text-center"
+      >
+        <AlertCircle className="text-primary h-10 w-10" aria-hidden="true" />
+        <h2 className="text-foreground mt-4 text-lg font-semibold">Error loading Collector data</h2>
+        <p className="text-muted-foreground mt-2 max-w-xl text-sm">{state.error.message}</p>
+      </section>
+    );
+  }
+
+  const { stats } = state;
+
+  return (
+    <section className="bg-background relative px-0 py-2">
+      <div className="mx-auto max-w-6xl space-y-10">
+        <section className="border-border/60 bg-card/80 rounded-lg border p-8 md:p-10">
+          <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+            <div className="max-w-3xl space-y-3">
+              <h2 className="text-foreground text-2xl font-bold md:text-3xl">
+                OpenTelemetry Collector
+              </h2>
+              <p className="text-muted-foreground text-base leading-relaxed md:text-lg">
+                A vendor-agnostic implementation for receiving, processing, and exporting telemetry
+                data.
+              </p>
+              {stats.latestVersion && (
+                <p className="text-muted-foreground text-sm font-medium">
+                  Latest Collector data: v{stats.latestVersion}
+                </p>
+              )}
+            </div>
+            <Link
+              to="/collector/components"
+              className="border-primary/40 bg-primary/10 text-foreground hover:bg-primary/20 focus-visible:ring-primary inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            >
+              Explore Components
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
+            </Link>
+          </div>
+        </section>
+
+        <section aria-labelledby="collector-component-types" className="space-y-4">
+          <div>
+            <h2 id="collector-component-types" className="text-foreground text-2xl font-bold">
+              Component Types
+            </h2>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {COMPONENT_TYPES.map(({ type, label, description, icon: Icon }) => (
+              <Link
+                key={type}
+                to={`/collector/components?type=${type}`}
+                className="group focus-visible:ring-primary block rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+              >
+                <article className="border-border/60 bg-card/80 hover:border-primary/40 h-full rounded-lg border p-6 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card">
+                  <div className="flex h-full flex-col gap-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="bg-primary/10 text-primary flex h-11 w-11 items-center justify-center rounded-lg">
+                        <Icon className="h-5 w-5" aria-hidden="true" />
+                      </div>
+                      <ArrowRight
+                        className="text-muted-foreground/50 group-hover:text-primary h-5 w-5 transition-all duration-200 group-hover:translate-x-1"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <h3 className="text-foreground group-hover:text-primary text-lg font-semibold transition-colors">
+                        {label}
+                      </h3>
+                      <p className="text-3xl font-bold">
+                        {numberFormatter.format(stats.byType[type])}
+                      </p>
+                    </div>
+                    <p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
+                  </div>
+                </article>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section aria-labelledby="collector-distributions" className="space-y-4">
+          <div>
+            <h2 id="collector-distributions" className="text-foreground text-2xl font-bold">
+              Distributions
+            </h2>
+          </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            {DISTRIBUTIONS.map(({ distribution, label, description, buttonLabel }) => (
+              <article
+                key={distribution}
+                className="border-border/60 bg-card/80 flex h-full flex-col rounded-lg border p-6"
+              >
+                <div className="flex flex-1 flex-col gap-4">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <h3 className="text-foreground text-xl font-semibold">{label}</h3>
+                      <p className="text-muted-foreground mt-1 text-sm">
+                        {numberFormatter.format(stats.byDistribution[distribution])} components
+                      </p>
+                    </div>
+                  </div>
+                  <p className="text-muted-foreground flex-1 text-sm leading-relaxed">
+                    {description}
+                  </p>
+                  <Link
+                    to={`/collector/components?distribution=${distribution}`}
+                    className="border-border bg-background text-foreground hover:border-primary/40 hover:bg-card-secondary focus-visible:ring-primary inline-flex w-fit items-center gap-2 rounded-md border px-3 py-2 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                  >
+                    {buttonLabel}
+                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section
+          aria-label="Collector summary statistics"
+          className="border-border/60 bg-card/80 rounded-lg border p-6"
+        >
+          <dl className="grid gap-4 text-center sm:grid-cols-3">
+            <div className="sm:border-border/60 sm:border-r">
+              <dt className="text-muted-foreground text-sm font-medium">Components</dt>
+              <dd className="text-foreground mt-1 text-3xl font-bold">
+                {numberFormatter.format(stats.total)}
+              </dd>
+            </div>
+            <div className="sm:border-border/60 sm:border-r">
+              <dt className="text-muted-foreground text-sm font-medium">Types</dt>
+              <dd className="text-foreground mt-1 text-3xl font-bold">{COMPONENT_TYPES.length}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground text-sm font-medium">Distributions</dt>
+              <dd className="text-foreground mt-1 text-3xl font-bold">{DISTRIBUTIONS.length}</dd>
+            </div>
+          </dl>
+        </section>
+
+        <section aria-labelledby="collector-resources" className="space-y-4">
+          <div>
+            <h2 id="collector-resources" className="text-foreground text-2xl font-bold">
+              Resources
+            </h2>
+          </div>
+          <div className="grid gap-3 md:grid-cols-2">
+            {RESOURCES.map(({ label, href }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="border-border/60 bg-card/80 hover:border-primary/40 hover:bg-card focus-visible:ring-primary group flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+              >
+                <span className="text-foreground font-medium">{label}</span>
+                <ExternalLink
+                  className="text-muted-foreground group-hover:text-primary h-4 w-4 flex-shrink-0"
+                  aria-hidden="true"
+                />
+              </a>
+            ))}
+          </div>
+        </section>
+      </div>
+    </section>
+  );
+}