152 lines
4.3 KiB
Plaintext
152 lines
4.3 KiB
Plaintext
---
|
|
import favicon from '../../public/favicon.svg'
|
|
import logoMiniFull from '../assets/logo/logo-mini-full.svg'
|
|
import logoNormal from '../assets/logo/logo-normal.svg'
|
|
import logoSmall from '../assets/logo/logo-small.svg'
|
|
import reviewBadgeLongBlack from '../assets/review-badge/long-black.svg'
|
|
import reviewBadgeLongWhite from '../assets/review-badge/long-white.svg'
|
|
import reviewBadgeShortBlack from '../assets/review-badge/short-black.svg'
|
|
import reviewBadgeShortWhite from '../assets/review-badge/short-white.svg'
|
|
|
|
import Button from './Button.astro'
|
|
import MyPicture from './MyPicture.astro'
|
|
|
|
const categories: {
|
|
title: string
|
|
assets: {
|
|
name: string
|
|
path: typeof logoNormal
|
|
alt: string
|
|
}[]
|
|
}[] = [
|
|
{
|
|
title: 'Logos',
|
|
assets: [
|
|
{
|
|
name: 'Logo',
|
|
path: logoNormal,
|
|
alt: 'KYCnot.me logo normal version',
|
|
},
|
|
{
|
|
name: 'Logo small',
|
|
path: logoSmall,
|
|
alt: 'KYCnot.me logo small version',
|
|
},
|
|
{
|
|
name: 'Logo mini',
|
|
path: logoMiniFull,
|
|
alt: 'KYCnot.me logo mini version',
|
|
},
|
|
{
|
|
name: 'Logo icon',
|
|
path: favicon,
|
|
alt: 'KYCnot.me logo icon version',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Review badges',
|
|
assets: [
|
|
{
|
|
name: 'Review badge (long black)',
|
|
path: reviewBadgeLongBlack,
|
|
alt: 'KYCnot.me review badge long black version',
|
|
},
|
|
{
|
|
name: 'Review badge (long white)',
|
|
path: reviewBadgeLongWhite,
|
|
alt: 'KYCnot.me review badge long white version',
|
|
},
|
|
{
|
|
name: 'Review badge (short black)',
|
|
path: reviewBadgeShortBlack,
|
|
alt: 'KYCnot.me review badge short black version',
|
|
},
|
|
{
|
|
name: 'Review badge (short white)',
|
|
path: reviewBadgeShortWhite,
|
|
alt: 'KYCnot.me review badge short white version',
|
|
},
|
|
],
|
|
},
|
|
]
|
|
---
|
|
|
|
<div class="not-prose mb-16 space-y-8">
|
|
{
|
|
categories.map((category) => {
|
|
return (
|
|
<>
|
|
<h3 class="font-title mb-2 text-center text-xl font-semibold text-white">{category.title}</h3>
|
|
<ul class="xs:grid-cols-2 grid grid-cols-1 gap-6">
|
|
{category.assets.map((asset) => (
|
|
<li>
|
|
<div
|
|
class="bg-transparency-grid mx-auto flex aspect-[3/1] max-w-sm items-center justify-center rounded-lg p-4"
|
|
style={{
|
|
'--transparency-grid-color-1': 'var(--color-night-600)',
|
|
'--transparency-grid-color-2': 'var(--color-night-500)',
|
|
'--transparency-grid-size': 'calc(var(--spacing) * 4)',
|
|
}}
|
|
>
|
|
<MyPicture
|
|
src={asset.path}
|
|
alt={asset.alt}
|
|
pictureAttributes={{
|
|
class: 'contents',
|
|
}}
|
|
class="max-h-full min-h-8 max-w-full min-w-8 object-contain"
|
|
/>
|
|
</div>
|
|
<div class="mt-2 text-center">
|
|
<Button
|
|
as="a"
|
|
href={asset.path.src}
|
|
download={asset.name}
|
|
label={asset.name}
|
|
size="sm"
|
|
color="white"
|
|
variant="faded"
|
|
icon="ri:download-line"
|
|
/>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
|
|
<style>
|
|
.bg-transparency-grid {
|
|
--transparency-grid-color-1: #fff;
|
|
--transparency-grid-color-2: #ccc;
|
|
--transparency-grid-size: calc(var(--spacing) * 8);
|
|
|
|
background-color: var(--transparency-grid-color-1);
|
|
background-image:
|
|
linear-gradient(
|
|
45deg,
|
|
var(--transparency-grid-color-2) 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
var(--transparency-grid-color-2) 75%,
|
|
var(--transparency-grid-color-2)
|
|
),
|
|
linear-gradient(
|
|
45deg,
|
|
var(--transparency-grid-color-2) 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
var(--transparency-grid-color-2) 75%,
|
|
var(--transparency-grid-color-2)
|
|
);
|
|
background-size: var(--transparency-grid-size) var(--transparency-grid-size);
|
|
background-position:
|
|
0 0,
|
|
calc(var(--transparency-grid-size) / 2) calc(var(--transparency-grid-size) / 2);
|
|
}
|
|
</style>
|