feat: new public website

2025-12-02 09:17:49 +01:00
parent e2536774b0
commit ac4429d6d9
206 changed files with 18415 additions and 12433 deletions
--- a/apps/public/src/app/(home)/_sections/why-openpanel.tsx
+++ b/apps/public/src/app/(home)/_sections/why-openpanel.tsx
@@ -0,0 +1,82 @@
+import { FeatureCardBackground } from '@/components/feature-card';
+import { Section, SectionHeader, SectionLabel } from '@/components/section';
+import { Tag } from '@/components/tag';
+import { cn } from '@/lib/utils';
+import { ArrowDownIcon } from 'lucide-react';
+import Image from 'next/image';
+
+const images = [
+  {
+    name: 'Helpy UI',
+    url: 'https://helpy-ui.com',
+    logo: '/logos/helpy-ui.png',
+    className: 'size-12',
+  },
+  {
+    name: 'KiddoKitchen',
+    url: 'https://kiddokitchen.se',
+    logo: '/logos/kiddokitchen.png',
+  },
+  {
+    name: 'Maneken',
+    url: 'https://maneken.app',
+    logo: '/logos/maneken.png',
+  },
+  {
+    name: 'Midday',
+    url: 'https://midday.ai',
+    logo: '/logos/midday.png',
+  },
+  {
+    name: 'Screenzen',
+    url: 'https://www.screenzen.co',
+    logo: '/logos/screenzen.png',
+  },
+  {
+    name: 'Tiptip',
+    url: 'https://tiptip.id',
+    logo: '/logos/tiptip.png',
+  },
+];
+
+export function WhyOpenPanel() {
+  return (
+    <Section className="container gap-16">
+      <SectionHeader
+        label="Trusted by builders"
+        title="Join thousands of companies using OpenPanel to understand their users"
+      />
+      <div className="col overflow-hidden">
+        <SectionLabel className="text-muted-foreground bg-background -mb-2 z-5 self-start pr-4">
+          USED BY
+        </SectionLabel>
+        <div className="grid grid-cols-3 md:grid-cols-6 -mx-4 border-y py-4">
+          {images.map((image) => (
+            <div key={image.logo} className="px-4 border-r last:border-r-0 ">
+              <a
+                href={image.url}
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                key={image.logo}
+                className={cn('relative group center-center aspect-square')}
+                title={image.name}
+              >
+                <FeatureCardBackground />
+                <Image
+                  src={image.logo}
+                  alt={image.name}
+                  width={64}
+                  height={64}
+                  className={cn(
+                    'size-16 object-contain dark:invert',
+                    image.className,
+                  )}
+                />
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}