improve(public): re-design landing page a bit

apps/public/components/why-openpanel.tsx

@@ -0,0 +1,87 @@
+import { cn } from '@/lib/utils';
+import { ArrowDownIcon } from 'lucide-react';
+import Image from 'next/image';
+import { Section, SectionHeader } from './section';
+import { Tag } from './tag';
+import { Tooltip } from './ui/tooltip';
+
+const images = [
+  {
+    name: 'Helpy UI',
+    url: 'https://helpy-ui.com',
+    logo: 'helpy-ui.png',
+    border: true,
+  },
+  {
+    name: 'KiddoKitchen',
+    url: 'https://kiddokitchen.se',
+    logo: 'kiddokitchen.png',
+    border: false,
+  },
+  {
+    name: 'Maneken',
+    url: 'https://maneken.app',
+    logo: 'maneken.jpg',
+    border: false,
+  },
+  {
+    name: 'Midday',
+    url: 'https://midday.ai',
+    logo: 'midday.png',
+    border: true,
+  },
+  {
+    name: 'Screenzen',
+    url: 'https://www.screenzen.co',
+    logo: 'screenzen.avif',
+    border: true,
+  },
+  {
+    name: 'Tiptip',
+    url: 'https://tiptip.id',
+    logo: 'tiptip.jpg',
+    border: true,
+  },
+];
+
+export function WhyOpenPanel() {
+  return (
+    <div className="bg-background-light my-12 col">
+      <Section className="container my-0 py-20">
+        <SectionHeader
+          title="Why OpenPanel?"
+          description="We built OpenPanel to get the best of both web and product analytics. With that in mind we have created a simple but very powerful platform that can handle most companies needs."
+        />
+        <div className="center-center col gap-4 -mt-4">
+          <Tag>
+            <ArrowDownIcon className="size-4" strokeWidth={1.5} />
+            With 2000+ registered projects
+          </Tag>
+          <div className="row gap-4 justify-center flex-wrap">
+            {images.map((image) => (
+              <a
+                href={image.url}
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                key={image.logo}
+                className={cn(
+                  'group rounded-lg bg-white center-center size-20 hover:scale-110 transition-all duration-300',
+                  image.border && 'p-2 border border-border shadow-sm',
+                )}
+                title={image.name}
+              >
+                <Image
+                  src={`/logos/${image.logo}`}
+                  alt={image.name}
+                  width={80}
+                  height={80}
+                  className="rounded-lg grayscale group-hover:grayscale-0 transition-all duration-300"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </Section>
+    </div>
+  );
+}