public: updates of content

apps/public/content/compare/amplitude-alternative.json

@@ -47,7 +47,7 @@
       "Large enterprises with dedicated analytics teams",
       "Organizations that need advanced experimentation and feature flags",
       "Teams requiring sophisticated behavioral cohorts and predictive analytics",
-      "Companies wanting an all-in-one platform with session replay and guides"
+      "Companies wanting an all-in-one platform with guides, surveys, and advanced experimentation"
     ]
   },
   "highlights": {
@@ -184,9 +184,9 @@
           },
           {
             "name": "Session replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": "Included in Amplitude platform"
+            "notes": "Both platforms include session replay"
           },
           {
             "name": "Custom dashboards",
@@ -423,7 +423,7 @@
       },
       {
         "title": "Simpler analytics needs",
-        "description": "If you don't need predictive ML models, feature flags, or session replay, OpenPanel gives you core analytics without the bloat.",
+        "description": "If you don't need predictive ML models or feature flags, OpenPanel gives you core analytics — including session replay — without the enterprise bloat.",
         "icon": "target"
       }
     ]
@@ -484,7 +484,7 @@
       },
       {
         "question": "What Amplitude features will I lose?",
-        "answer": "OpenPanel doesn't have feature flags, session replay, predictive cohorts, or the Guides & Surveys product. If you rely heavily on these enterprise features, Amplitude may still be the better fit."
+        "answer": "OpenPanel doesn't have feature flags, predictive cohorts, or the Guides & Surveys product. OpenPanel does include session replay. If you rely heavily on Amplitude's enterprise experimentation or ML-powered features, Amplitude may still be the better fit."
       },
       {
         "question": "How does the SDK size affect my app?",

apps/public/content/compare/fullstory-alternative.json

@@ -353,7 +353,7 @@
       },
       {
         "title": "Remove FullStory script",
-        "description": "Once verified, remove the FullStory snippet. Note: You'll lose access to session replay and heatmaps."
+        "description": "Once verified, remove the FullStory snippet. Note: You'll lose access to FullStory's advanced heatmaps, frustration signals, and pixel-perfect replay. OpenPanel includes basic session replay."
       }
     ],
     "sdk_compatibility": {

apps/public/content/compare/mixpanel-alternative.json

@@ -45,7 +45,7 @@
     ],
     "best_for_competitor": [
       "Enterprise teams needing advanced experimentation and feature flags",
-      "Organizations requiring session replay across web and mobile",
+      "Teams needing Metric Trees for organizational goal alignment",
       "Companies with complex data warehouse integration needs",
       "Teams that need Metric Trees for organizational alignment"
     ]
@@ -184,9 +184,15 @@
           },
           {
             "name": "Session replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": "Mixpanel supports web, iOS, and Android"
+            "notes": "Mixpanel supports web, iOS, and Android. OpenPanel also offers session replay."
+          },
+          {
+            "name": "Group analytics",
+            "openpanel": true,
+            "competitor": true,
+            "notes": "Both support group/company-level analytics"
           },
           {
             "name": "Revenue tracking",
@@ -441,7 +447,7 @@
     "items": [
       {
         "question": "Does OpenPanel have all the features I use in Mixpanel?",
-        "answer": "OpenPanel covers the core features most teams actually use: event tracking, funnels, retention, cohorts, user profiles, and A/B testing. If you rely heavily on Mixpanel's session replay, feature flags, or Metric Trees, those aren't available in OpenPanel yet."
+        "answer": "OpenPanel covers the core features most teams actually use: event tracking, funnels, retention, cohorts, user profiles, A/B testing, session replay, and group analytics. If you rely heavily on Mixpanel's feature flags or Metric Trees, those aren't available in OpenPanel."
       },
       {
         "question": "Can I import my historical Mixpanel data?",

apps/public/content/compare/mouseflow-alternative.json

@@ -139,9 +139,9 @@
         "features": [
           {
             "name": "Session replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": null
+            "notes": "Mouseflow's session replay is more advanced with friction scoring and form analytics"
           },
           {
             "name": "Click heatmaps",

apps/public/content/compare/posthog-alternative.json

@@ -28,7 +28,7 @@
     "title": "Why consider OpenPanel over PostHog?",
     "paragraphs": [
       "PostHog has built an impressive all-in-one platform with product analytics, feature flags, session replay, surveys, A/B testing, and more \u2014 over 10 products under one roof. It's a popular choice among developer-led teams who want everything in a single tool. But that breadth comes with trade-offs: a 52+ KB SDK, complex multi-product pricing, and a self-hosted setup that requires ClickHouse, Kafka, Redis, and PostgreSQL.",
-      "OpenPanel takes a focused approach. Instead of trying to be everything, it delivers excellent analytics \u2014 events, funnels, retention, cohorts, user profiles, and web analytics \u2014 with a dramatically smaller footprint. The SDK is just 2.3 KB (over 20x lighter than PostHog), which directly translates to faster page loads and better Core Web Vitals for your users.",
+      "OpenPanel takes a focused approach. Instead of trying to be everything, it delivers excellent analytics \u2014 events, funnels, retention, cohorts, user profiles, session replay, and web analytics \u2014 with a dramatically smaller footprint. The SDK is just 2.3 KB (over 20x lighter than PostHog), which directly translates to faster page loads and better Core Web Vitals for your users.",
       "Cookie-free tracking is another key difference. PostHog uses cookies by default and requires configuration to go cookieless, while OpenPanel is cookie-free out of the box \u2014 no consent banners needed. Self-hosting is also far simpler: OpenPanel runs in a single Docker container compared to PostHog's multi-service architecture.",
       "If you need focused analytics without the feature bloat, want a lighter SDK that doesn't impact performance, and prefer simple event-based pricing over multi-product metering \u2014 OpenPanel gives you exactly what you need without the overhead."
     ]
@@ -38,13 +38,13 @@
     "intro": "Both are open-source analytics platforms. PostHog is an all-in-one platform with many products. OpenPanel focuses on analytics with simplicity.",
     "one_liner": "PostHog is an all-in-one platform with 10+ products; OpenPanel focuses on analytics with a lighter footprint.",
     "best_for_openpanel": [
-      "Teams wanting focused analytics without feature flags, session replay, or surveys",
+      "Teams wanting focused analytics without feature flags or surveys",
       "Privacy-conscious products needing cookie-free tracking by default",
       "Performance-conscious applications (2.3KB SDK vs 52KB+)",
       "Teams preferring simple Docker deployment over multi-service architecture"
     ],
     "best_for_competitor": [
-      "Teams needing all-in-one platform (analytics, feature flags, session replay, surveys)",
+      "Teams needing all-in-one platform (analytics, feature flags, surveys, A/B experiments)",
       "Developers wanting SQL access (HogQL) for custom queries",
       "Y Combinator companies leveraging PostHog's ecosystem",
       "Teams requiring extensive CDP capabilities with 60+ connectors"
@@ -176,9 +176,9 @@
           },
           {
             "name": "Session Replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": "PostHog includes session replay for web, Android (beta), iOS (alpha)"
+            "notes": "Both platforms offer session replay."
           },
           {
             "name": "Surveys",
@@ -391,7 +391,7 @@
     "items": [
       {
         "title": "Teams Who Want Analytics Without Feature Bloat",
-        "description": "If you need product analytics but don't use PostHog's feature flags, session replay, surveys, or experiments, OpenPanel gives you exactly what you need without the overhead.",
+        "description": "If you need product analytics and session replay but don't need PostHog's feature flags, surveys, or experiments, OpenPanel gives you exactly what you need without the overhead.",
         "icon": "target"
       },
       {
@@ -430,7 +430,7 @@
       },
       {
         "question": "What features will I lose switching from PostHog?",
-        "answer": "PostHog includes feature flags, session replay, surveys, and A/B experiments in their platform. If you actively use these, you'd need separate tools. If you primarily use PostHog for analytics, OpenPanel provides everything you need with less complexity."
+        "answer": "PostHog includes feature flags, surveys, and A/B experiments in their platform. If you actively use these, you'd need separate tools. OpenPanel now includes session replay, so you won't lose that. If you primarily use PostHog for analytics, OpenPanel provides everything you need with less complexity."
       },
       {
         "question": "How does OpenPanel compare on privacy?",
@@ -442,7 +442,7 @@
       },
       {
         "question": "Is PostHog more feature-rich than OpenPanel?",
-        "answer": "PostHog offers more products (10+ including feature flags, session replay, surveys, A/B testing, data warehouse). However, this comes with added complexity. OpenPanel focuses on doing analytics exceptionally well with a simpler, more focused experience."
+        "answer": "PostHog offers more products (10+ including feature flags, surveys, A/B testing, data warehouse). However, this comes with added complexity. OpenPanel now includes session replay alongside its core analytics, while staying focused on simplicity and performance."
       },
       {
         "question": "How do SDK sizes compare?",

apps/public/content/compare/smartlook-alternative.json

@@ -3,12 +3,12 @@
   "page_type": "alternative",
   "seo": {
     "title": "5 Best Smartlook Alternatives in 2026 (Free & Open Source)",
-    "description": "Replace Smartlook's session recording with OpenPanel — cookie-free product analytics with events, funnels, and retention. Open source, self-hostable, and no consent banners required.",
+    "description": "Looking for a Smartlook alternative? OpenPanel is open source with product analytics, session replay, funnels, and retention. Self-hostable, cookie-free, and no consent banners required.",
     "noindex": false
   },
   "hero": {
     "heading": "Best Smartlook Alternative",
-    "subheading": "Need product analytics without requiring session replay? OpenPanel is an open-source alternative to Smartlook that focuses on event-based analytics, funnels, and retention\u2014with self-hosting and transparent pricing.",
+    "subheading": "OpenPanel is an open-source alternative to Smartlook with event-based product analytics, session replay, funnels, and retention\u2014with self-hosting, transparent pricing, and no Cisco vendor lock-in.",
     "badges": [
       "Open-source",
       "Self-hostable",
@@ -28,28 +28,27 @@
     "title": "Why consider OpenPanel over Smartlook?",
     "paragraphs": [
       "Smartlook combines product analytics with visual insights \u2014 session recordings, heatmaps, and event tracking in one platform. Since its acquisition by Cisco in 2023, it has positioned itself as an enterprise-ready analytics and observation tool. But enterprise ownership often means enterprise pricing, proprietary lock-in, and cloud-only infrastructure with no option for self-hosting.",
-      "OpenPanel focuses purely on product analytics without the session replay overhead, delivering event tracking, funnels, retention analysis, and cohort breakdowns with a cleaner, more focused experience. The result is a lighter tool that does analytics well rather than trying to be everything \u2014 and at a dramatically lower cost with transparent, event-based pricing starting at $2.50 per month.",
+      "OpenPanel delivers event tracking, funnels, retention analysis, cohort breakdowns, and session replay in a focused, open-source package. The result is a tool that covers both product analytics and visual session review \u2014 at a dramatically lower cost with transparent, event-based pricing starting at $2.50 per month.",
       "Being open source under the MIT license gives OpenPanel advantages that Smartlook's proprietary, Cisco-owned platform can't match. You can self-host on your own infrastructure for complete data sovereignty, audit the source code for security compliance, and avoid the vendor lock-in risk that comes with acquisition-prone platforms. Self-hosting also means unlimited data retention, compared to Smartlook's plan-based limits.",
-      "If you need session replay specifically, Smartlook has the edge in that area. But for teams that want focused, cost-effective product analytics with open-source transparency and the freedom to self-host, OpenPanel delivers more value without the enterprise complexity."
+      "If you need advanced heatmaps or Unity/game analytics, Smartlook has the edge. But for teams that want product analytics plus session replay with open-source transparency, self-hosting, and predictable pricing, OpenPanel delivers more value without the Cisco enterprise complexity."
     ]
   },
   "summary_comparison": {
     "title": "OpenPanel vs Smartlook: Which is right for you?",
-    "intro": "Both platforms offer product analytics, but Smartlook adds visual behavior tools (session replay, heatmaps) while OpenPanel focuses on event-based analytics with self-hosting.",
+    "intro": "Both platforms offer product analytics and session replay. Smartlook adds heatmaps and frustration signals; OpenPanel adds self-hosting, open source, and simpler pricing.",
-    "one_liner": "OpenPanel is open source with self-hosting for product analytics; Smartlook combines analytics with session replay and heatmaps.",
+    "one_liner": "OpenPanel is open source with self-hosting, product analytics, and session replay; Smartlook adds heatmaps and deeper visual behavior tools.",
     "best_for_openpanel": [
       "Teams needing self-hosting for data ownership and compliance",
-      "Open source requirements for transparency",
+      "Open source requirements for transparency and auditability",
-      "Focus on event-based product analytics without visual replay",
+      "Product analytics plus session replay without Cisco vendor lock-in",
       "Teams wanting unlimited data retention with self-hosting",
       "Server-side SDKs for backend tracking"
     ],
     "best_for_competitor": [
-      "Teams needing session recordings to watch user interactions",
+      "UX designers requiring comprehensive heatmaps (click, scroll, movement)",
-      "UX designers requiring heatmaps (click, scroll, movement)",
       "Mobile app crash reports with linked session recordings",
-      "Teams wanting combined analytics and replay in one tool",
+      "Teams needing Unity game analytics",
-      "Unity game developers (Smartlook supports Unity)"
+      "Teams requiring Cisco/AppDynamics ecosystem integration"
     ]
   },
   "highlights": {
@@ -68,8 +67,8 @@
       },
       {
         "label": "Session replay",
-        "openpanel": "Not available",
+        "openpanel": "Yes",
-        "competitor": "Yes, full recordings"
+        "competitor": "Yes, with heatmaps & friction detection"
       },
       {
         "label": "Heatmaps",
@@ -139,9 +138,9 @@
         "features": [
           {
             "name": "Session recordings",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": null
+            "notes": "Smartlook additionally links recordings to crash reports and heatmaps"
           },
           {
             "name": "Click heatmaps",
@@ -311,13 +310,13 @@
   },
   "migration": {
     "title": "Migrating from Smartlook to OpenPanel",
-    "intro": "Moving from Smartlook to OpenPanel involves transitioning from combined session replay and analytics to event-based product analytics.",
+    "intro": "Moving from Smartlook to OpenPanel means keeping session replay and product analytics while gaining self-hosting, open source, and simpler pricing.",
     "difficulty": "moderate",
     "estimated_time": "2-4 hours",
     "steps": [
       {
         "title": "Understand feature differences",
-        "description": "OpenPanel focuses on event-based product analytics. If you rely on session recordings and heatmaps, consider using complementary tools like Microsoft Clarity."
+        "description": "OpenPanel includes session replay and event-based product analytics. If you rely on heatmaps or Unity analytics, consider using complementary tools like Microsoft Clarity for heatmaps."
       },
       {
         "title": "Create OpenPanel account or self-host",
@@ -382,11 +381,11 @@
     "items": [
       {
         "question": "Can OpenPanel replace Smartlook's session recordings?",
-        "answer": "No, OpenPanel does not provide session recordings or heatmaps. If you need visual behavior analytics, consider using Microsoft Clarity (free) or Hotjar alongside OpenPanel, or continue using Smartlook for recordings while using OpenPanel for deeper product analytics."
+        "answer": "Yes for session replay — OpenPanel now includes session recording. However, if you need heatmaps (click, scroll, movement), frustration signals, or Unity game analytics, Smartlook still has the edge in those areas."
       },
       {
         "question": "Which tool has better funnel analysis?",
-        "answer": "Both tools offer funnel analysis. Smartlook's advantage is the ability to watch session recordings of users who dropped off. OpenPanel offers more advanced funnel customization and cohort breakdowns."
+        "answer": "Both tools offer funnel analysis. With OpenPanel you can also watch session recordings of users who dropped off, and OpenPanel offers more advanced funnel customization and cohort breakdowns."
       },
       {
         "question": "Can I self-host Smartlook?",

apps/public/content/pages/about.mdx

@@ -7,7 +7,7 @@ description: Learn about OpenPanel, the open-source web and product analytics pl
 
 **OpenPanel** is an open-source web and product analytics platform - a modern alternative to Mixpanel, Google Analytics, and Plausible. We're NOT a server control panel or hosting panel like other software that shares our name.
 
-If you were looking for a server administration panel (like cPanel or Plesk), you might be looking for [OpenPanel](https://openpanel.com) - that's a different product for managing web servers. **OpenPanel.dev** is all about analytics.
+If you were looking for a server administration panel (like cPanel or Plesk), you might be looking for [OpenPanel](https://openpanel.dev) - that's a different product for managing web servers. **OpenPanel.dev** is all about analytics.
 
 ## Introduction
 

apps/public/src/lib/layout.shared.tsx

@@ -26,11 +26,11 @@ export function baseOptions(): BaseLayoutProps {
 export const authors = [
   {
     name: 'OpenPanel Team',
-    url: 'https://openpanel.com',
+    url: 'https://openpanel.dev',
   },
   {
     name: 'Carl-Gerhard Lindesvärd',
-    url: 'https://openpanel.com',
+    url: 'https://openpanel.dev',
     image: '/twitter-carl.jpg',
   },
 ];

apps/start/src/components/organization/billing-faq.tsx

@@ -34,13 +34,13 @@ const questions = [
   {
     question: 'How do I change my billing information?',
     answer: [
-      'You can change your billing information by clicking the "Manage your subscription" button in the billing section.',
+      'You can change your billing information by clicking the "Customer portal" button in the billing section.',
     ],
   },
   {
     question: 'We need a custom plan, can you help us?',
     answer: [
-      'Yes, we can help you with that. Please contact us at hello@openpanel.com to request a quote.',
+      'Yes, we can help you with that. Please contact us at hello@openpanel.dev to request a quote.',
     ],
   },
 ];
@@ -52,13 +52,13 @@ export function BillingFaq() {
         <span className="title">Frequently asked questions</span>
       </WidgetHead>
       <Accordion
-        type="single"
-        collapsible
         className="w-full max-w-screen-md self-center"
+        collapsible
+        type="single"
       >
         {questions.map((q) => (
-          <AccordionItem value={q.question} key={q.question}>
+          <AccordionItem key={q.question} value={q.question}>
-            <AccordionTrigger className="text-left px-4">
+            <AccordionTrigger className="px-4 text-left">
               {q.question}
             </AccordionTrigger>
             <AccordionContent>

apps/start/src/components/organization/billing-prompt.tsx

@@ -1,8 +1,3 @@
-import { PageHeader } from '@/components/page-header';
-import { Button, LinkButton } from '@/components/ui/button';
-import { useNumber } from '@/hooks/use-numer-formatter';
-import { useTRPC } from '@/integrations/trpc/react';
-import { op } from '@/utils/op';
 import type { IServiceOrganization } from '@openpanel/db';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
@@ -11,11 +6,17 @@ import {
   InfinityIcon,
   type LucideIcon,
   MapIcon,
+  SearchIcon,
   ShieldCheckIcon,
   TrendingUpIcon,
 } from 'lucide-react';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
+import { PageHeader } from '@/components/page-header';
+import { Button, LinkButton } from '@/components/ui/button';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { useTRPC } from '@/integrations/trpc/react';
+import { op } from '@/utils/op';
 
 const COPY = {
   expired: {
@@ -59,7 +60,7 @@ export default function BillingPrompt({
   const { data: products, isLoading: isLoadingProducts } = useQuery(
     trpc.subscription.products.queryOptions({
       organizationId: organization.id,
-    }),
+    })
   );
   const checkout = useMutation(
     trpc.subscription.checkout.mutationOptions({
@@ -72,15 +73,14 @@ export default function BillingPrompt({
           });
         }
       },
-    }),
+    })
   );
   const { title, description, body } = COPY[type];
 
   const bestProductFit = products?.find(
     (product) =>
       typeof product.metadata.eventsLimit === 'number' &&
-      product.metadata.eventsLimit >=
+      product.metadata.eventsLimit >= organization.subscriptionPeriodEventsCount
-        organization.subscriptionPeriodEventsCount,
   );
 
   useEffect(() => {
@@ -98,32 +98,30 @@ export default function BillingPrompt({
       }).format(
         bestProductFit.prices[0] && 'priceAmount' in bestProductFit.prices[0]
           ? bestProductFit.prices[0].priceAmount / 100
-          : 0,
+          : 0
       )
     : null;
 
   return (
-    <div className="p-4 md:p-20 max-w-7xl mx-auto">
+    <div className="mx-auto max-w-7xl p-4 md:p-20">
-      <div className="border rounded-lg overflow-hidden bg-def-200 p-2 items-center">
+      <div className="items-center overflow-hidden rounded-lg border bg-def-200 p-2">
         <div className="md:row">
-          <div className="p-6 bg-background rounded-md border col gap-4 flex-1">
+          <div className="col flex-1 gap-4 rounded-md border bg-background p-6">
-            <PageHeader title={title} description={description} />
+            <PageHeader description={description} title={title} />
             {body.map((paragraph) => (
               <p key={paragraph}>
                 {paragraph.replace(
                   '{{events}}',
-                  number.format(
+                  number.format(organization.subscriptionPeriodEventsCount ?? 0)
-                    organization.subscriptionPeriodEventsCount ?? 0,
-                  ),
                 )}
               </p>
             ))}
-            <div className="col gap-2 mt-auto">
+            <div className="col mt-auto gap-2">
               {bestProductFit && (
-                <div className="text-sm text-muted-foreground leading-normal">
+                <div className="text-muted-foreground text-sm leading-normal">
                   Based on your usage (
                   {number.format(
-                    organization.subscriptionPeriodEventsCount ?? 0,
+                    organization.subscriptionPeriodEventsCount ?? 0
                   )}{' '}
                   events) we recommend upgrading <br />
                   to the <strong>{bestProductFit.name}</strong> plan for{' '}
@@ -132,9 +130,8 @@ export default function BillingPrompt({
               )}
               <div className="col md:row gap-2">
                 <Button
-                  size="lg"
-                  loading={isLoadingProducts}
                   disabled={!bestProductFit}
+                  loading={isLoadingProducts}
                   onClick={() => {
                     if (bestProductFit) {
                       op.track('billing_prompt_upgrade_clicked', {
@@ -152,33 +149,34 @@ export default function BillingPrompt({
                       });
                     }
                   }}
+                  size="lg"
                 >
                   Upgrade to {price}
                 </Button>
                 <LinkButton
-                  size="lg"
-                  variant="outline"
-                  to="/$organizationId/billing"
                   params={{ organizationId: organization.id }}
+                  size="lg"
+                  to="/$organizationId/billing"
+                  variant="outline"
                 >
                   View pricing
                 </LinkButton>
               </div>
             </div>
           </div>
-          <div className="shrink-0 flex-1 p-6 gap-4 col min-w-[200px] max-w-[300px]">
+          <div className="col min-w-[200px] max-w-[300px] flex-1 shrink-0 gap-4 p-6">
             <Point icon={DollarSignIcon}>Plans start at just $2.5/month</Point>
             <Point icon={InfinityIcon}>
               Unlimited reports, members and projects
             </Point>
             <Point icon={BarChart3Icon}>Advanced funnels and conversions</Point>
             <Point icon={MapIcon}>Real-time analytics</Point>
-            <Point icon={TrendingUpIcon}>
+            <Point icon={TrendingUpIcon}>Track KPIs and custom events</Point>
-              Track KPIs and custom events (revenue soon)
-            </Point>
             <Point icon={ShieldCheckIcon}>
               Privacy-focused and GDPR compliant
             </Point>
+            <Point icon={DollarSignIcon}>Revenue tracking</Point>
+            <Point icon={SearchIcon}>Google Search Console integration</Point>
           </div>
         </div>
       </div>
@@ -189,13 +187,16 @@ export default function BillingPrompt({
 function Point({
   icon: Icon,
   children,
-}: { icon: LucideIcon; children: React.ReactNode }) {
+}: {
+  icon: LucideIcon;
+  children: React.ReactNode;
+}) {
   return (
     <div className="row gap-2">
-      <div className="size-6 shrink-0 center-center rounded-full bg-amber-500 text-white">
+      <div className="center-center size-6 shrink-0 rounded-full bg-amber-500 text-white">
         <Icon className="size-4" />
       </div>
-      <h3 className="font-medium mt-[1.5px]">{children}</h3>
+      <h3 className="mt-[1.5px] font-medium">{children}</h3>
     </div>
   );
 }