70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
|
import styles from './BrandAssetsSection.module.css'
|
|||
|
|
import camelLogoSvg from '../../../assets/camel-logo.svg'
|
|||
|
|
import cameleer3Logo from '../../../assets/cameleer3-logo.png'
|
|||
|
|
|
|||
|
|
const LOGO_SIZES = [16, 32, 48, 180, 192, 512] as const
|
|||
|
|
|
|||
|
|
export function BrandAssetsSection() {
|
|||
|
|
return (
|
|||
|
|
<section id="brand-assets" className={styles.section}>
|
|||
|
|
<h2 className={styles.sectionTitle}>Brand Assets</h2>
|
|||
|
|
|
|||
|
|
<div className={styles.componentCard}>
|
|||
|
|
<h3 className={styles.componentTitle}>Cameleer3 Logo (PNG)</h3>
|
|||
|
|
<p className={styles.componentDesc}>
|
|||
|
|
Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images.
|
|||
|
|
Shipped as static assets via package exports.
|
|||
|
|
</p>
|
|||
|
|
<div className={styles.demoArea}>
|
|||
|
|
<div className={styles.logoGrid}>
|
|||
|
|
{LOGO_SIZES.map((size) => (
|
|||
|
|
<div key={size} className={styles.logoItem}>
|
|||
|
|
<div className={styles.logoPreview}>
|
|||
|
|
<img
|
|||
|
|
src={cameleer3Logo}
|
|||
|
|
alt={`Logo ${size}×${size}`}
|
|||
|
|
width={Math.min(size, 96)}
|
|||
|
|
height={Math.min(size, 96)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<span className={styles.logoLabel}>{size}×{size}</span>
|
|||
|
|
<code className={styles.logoExport}>@cameleer/design-system/logo-{size}</code>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<div className={styles.logoItem}>
|
|||
|
|
<div className={styles.logoPreview}>
|
|||
|
|
<img
|
|||
|
|
src={cameleer3Logo}
|
|||
|
|
alt="Full resolution logo"
|
|||
|
|
width={96}
|
|||
|
|
height={96}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<span className={styles.logoLabel}>Original</span>
|
|||
|
|
<code className={styles.logoExport}>@cameleer/design-system/logo</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={styles.componentCard}>
|
|||
|
|
<h3 className={styles.componentTitle}>Camel Logo (SVG)</h3>
|
|||
|
|
<p className={styles.componentDesc}>
|
|||
|
|
Vector logo for scalable usage. Shipped as a static asset via package export.
|
|||
|
|
</p>
|
|||
|
|
<div className={styles.demoArea}>
|
|||
|
|
<div className={styles.logoGrid}>
|
|||
|
|
<div className={styles.logoItem}>
|
|||
|
|
<div className={styles.logoPreview}>
|
|||
|
|
<img src={camelLogoSvg} alt="Camel SVG logo" width={96} height={96} />
|
|||
|
|
</div>
|
|||
|
|
<span className={styles.logoLabel}>SVG</span>
|
|||
|
|
<code className={styles.logoExport}>@cameleer/design-system/logo-svg</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|