88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
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>
|
|
);
|
|
}
|