Refactor code structure for improved readability and maintainability

apps/landing/src/app.tsx

@@ -1,5 +1,6 @@
 import { ThemeProvider } from '@repo/ui/provider';
 import { Button } from '@repo/ui/components';
+import LandingSample from './features/public-content/presentation/LandingSample';
 
 export default function App() {
   return (
@@ -31,7 +32,11 @@ export default function App() {
             ✅ @repo/ui workspace link verified — Button component rendered successfully.
           </p>
         </div>
+      <div className="p-8">
+      <h1 className="text-2xl font-bold mb-4">Enterprise Web App</h1>
+      <LandingSample />
       </div>
+    </div>
     </ThemeProvider>
   );
 }

apps/landing/src/features/public-content/data/public.data-services.ts

@@ -0,0 +1,40 @@
+import { CommonRemoteDataServices } from '@repo/core-api/data-services';
+import type { BaseEntity } from '@repo/core-api/data-services';
+import { publicClient } from '../../../lib/api-client';
+
+// ─── Domain Entity ──────────────────────────────────────────────
+
+/**
+ * Public content entity for the landing page.
+ *
+ * Represents promotional content, blog posts, or announcements
+ * served from a public API without authentication.
+ */
+export interface PublicContentEntity extends BaseEntity {
+  title: string;
+  slug: string;
+  excerpt: string;
+  imageUrl: string;
+  publishedAt: string;
+}
+
+// ─── Data Services Instance ─────────────────────────────────────
+
+/**
+ * Public content data services — wired to the lightweight `publicClient`.
+ *
+ * No auth, no OTel — pure zero-overhead HTTP calls.
+ *
+ * @example
+ * ```ts
+ * const { data } = await publicContentServices.getMany();
+ * const { data: post } = await publicContentServices.getOne('hello-world');
+ * ```
+ */
+export const publicContentServices = new CommonRemoteDataServices<PublicContentEntity>(
+  publicClient,
+  {
+    apiUrl: '/content',
+    moduleKey: 'PUBLIC_CONTENT',
+  },
+);

apps/landing/src/features/public-content/presentation/LandingSample.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { publicContentServices } from '../data/public.data-services';
+import type { PublicContentEntity } from '../data/public.data-services';
+import type { ApiResponse } from '@repo/core-api/http-client';
+import { ApiError } from '@repo/core-api/errors';
+
+/**
+ * Sample component demonstrating the `@repo/core-api` integration
+ * for the Landing App with TelemetryContext escape hatch.
+ *
+ * Pipeline: Faro auto-instrumentation → No Auth → GET /content
+ *           + Custom span "public.content.fetch" with enriched tags
+ */
+export default function LandingSample() {
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<ApiResponse<PublicContentEntity[]> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFetch = async () => {
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await publicContentServices.getMany<PublicContentEntity[]>({
+        // ── Telemetry Escape Hatch ──────────────────────────────
+        // Even the lightweight landing app can push custom spans
+        // and business events when needed.
+        telemetryContext: {
+          customSpanName: 'public.content.fetch',
+          tags: {
+            'feature': 'landing',
+            'ui.component': 'LandingSample',
+            'ui.action': 'content_fetch',
+          },
+          pushEventOnSuccess: 'public_content_loaded',
+        },
+      });
+      setResult(response);
+      console.log('[LandingSample] Response:', response);
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(`[${err.code}] ${err.message} (HTTP ${err.status})`);
+        console.error('[LandingSample] ApiError:', err.toJSON());
+      } else {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ padding: 24, fontFamily: 'monospace' }}>
+      <h2>🧪 Public Content Services — Integration Test</h2>
+      <p style={{ color: '#888', fontSize: 14 }}>
+        Pipeline: Faro + Custom Span &quot;public.content.fetch&quot; → No Auth → GET /content
+      </p>
+
+      <button
+        onClick={handleFetch}
+        disabled={loading}
+        style={{
+          padding: '10px 20px',
+          fontSize: 16,
+          cursor: loading ? 'wait' : 'pointer',
+          background: loading ? '#555' : '#059669',
+          color: '#fff',
+          border: 'none',
+          borderRadius: 6,
+          marginTop: 12,
+        }}
+      >
+        {loading ? 'Fetching…' : 'Test Public Fetch'}
+      </button>
+
+      {error && (
+        <pre style={{ color: '#ef4444', marginTop: 16, whiteSpace: 'pre-wrap' }}>
+          ❌ {error}
+        </pre>
+      )}
+
+      {result && (
+        <pre style={{ marginTop: 16, background: '#1e1e2e', color: '#a6e3a1', padding: 16, borderRadius: 8, overflow: 'auto' }}>
+          {JSON.stringify(result, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}

apps/landing/src/lib/api-client.ts

@@ -0,0 +1,17 @@
+import { createHttpClient } from '@repo/core-api/http-client';
+import { faroAdapter } from '@repo/core-api/observability';
+
+/**
+ * Lightweight public HTTP client for `apps/landing`.
+ *
+ * - Uses the shared Faro adapter (initialized via `initTelemetry()` in main.tsx)
+ * - No auth token injection
+ * - Minimal config for maximum performance
+ *
+ * Designed for public-facing content that requires no authentication.
+ */
+export const publicClient = createHttpClient({
+  baseURL: import.meta.env.VITE_API_URL ?? 'https://api.eigen.co/public/v1',
+  timeout: 10000,
+  observability: faroAdapter,
+});

apps/landing/src/main.tsx

@@ -1,3 +1,17 @@
+// ─── Optional Telemetry Bootstrap ───────────────────────────────
+// Landing app uses minimal telemetry. Remove this block entirely
+// if you want zero observability overhead.
+import { initTelemetry } from '@repo/core-api/observability/setup';
+
+initTelemetry({
+  appName: import.meta.env.VITE_APP_NAME || 'fe-monorepo-landing',
+  appVersion: import.meta.env.VITE_APP_VERSION || '0.0.0',
+  telemetryUrl: import.meta.env.VITE_FARO_URL || 'https://telemetry.eigen.co.id/collect',
+  environment: import.meta.env.VITE_ENV || 'development',
+  // No otlpTraceUrl — only Faro collector, minimal overhead
+});
+
+// ─── Application Bootstrap ──────────────────────────────────────
 import './main.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';

apps/landing/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />