update options grid

Author: amlannandy

components/FrontendMonitoring/WebVitalsGrid.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+  FiBarChart,
+  FiShare2
+} from 'react-icons/fi'
+import IconCardGrid from '../Card/IconCardGrid';
+
+interface IconCardData {
+  name: string
+  href: string
+  icon: React.ReactNode
+  clickName: string
+}
+
+const integrationsData: IconCardData[] = [
+  {
+    name: 'Sending Web Vitals as Metrics',
+    href: '/docs/frontend-monitoring/web-vitals-with-metrics',
+    icon: <FiBarChart className="h-7 w-7 text-red-500" />,
+    clickName: 'Sending Web Vitals as Metrics',
+  },
+  {
+    name: 'Sending Web Vitals as Traces',
+    href: '/docs/frontend-monitoring/web-vitals-with-traces',
+    icon: <FiShare2 className="h-7 w-7 text-blue-600" />,
+    clickName: 'Sending Web Vitals as Traces',
+  },
+]
+
+export default function Integrations() {
+  return (
+    <IconCardGrid
+      title="Web Vitals"
+      description="Send web vitals to SigNoz using OpenTelemetry"
+      cards={integrationsData}
+      sectionName="Web Vitals Section"
+    />
+  )
+}

data/docs/frontend-monitoring/opentelemetry-web-vitals.mdx

@@ -19,7 +19,7 @@ Web vitals are essential metrics to measure the user experience on your website.
 
 Web vitals can be exported as either **metrics** or **traces** in OpenTelemetry, and the choice depends on your specific use case:
 
-### Exporting as Histogram Metrics
+### Exporting as Metrics
 **Best for larger scale deployments where sampling might be required:**
 - Provides aggregated statistical data (percentiles, histograms)
 - More efficient for high-volume applications
@@ -38,18 +38,4 @@ Web vitals can be exported as either **metrics** or **traces** in OpenTelemetry,
 
 Choose the approach that aligns with your monitoring goals and infrastructure requirements. For production environments with high traffic, histogram metrics are often the better choice, while traces provide more detailed insights for development and troubleshooting scenarios.
 
-<DocCardContainer>
-
-<DocCard
-    title="📄️ Sending Web Vitals Metrics"
-    description="Monitor your application's web vitals with metrics using SigNoz"
-    href="/docs/frontend-monitoring/web-vitals-with-metrics"
-/>
-
-<DocCard
-    title="📄️ Sending Web Vitals Traces"
-    description="Monitor your application's web vitals with traces using SigNoz"
-    href="/docs/frontend-monitoring/web-vitals-with-traces"
-/>
-
-</DocCardContainer>
+<WebVitalsGrid />