Add brand kit, #/brand page, and responsive logo marks
Export script generates PNG/WebP/favicons/ZIP and OG image; nav uses symbol on mobile and horizontal lockup on desktop; press kit at #/brand with download links and print-friendly guidelines. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
Cursor
@@ -0,0 +1,184 @@
|
||||
import { Download, Palette, Printer, Type } from 'lucide-react'
|
||||
import manifest from '../../../config/brand-assets.manifest.json'
|
||||
|
||||
type BrandManifest = typeof manifest
|
||||
|
||||
export function BrandAssetsPage() {
|
||||
const data = manifest as BrandManifest
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div className="section-header mb-10">
|
||||
<div className="section-eyebrow">Press & partners</div>
|
||||
<h1 className="section-title">Brand assets</h1>
|
||||
<p className="section-subtitle">
|
||||
Official logos, colors, and favicons for Miracles in Motion Foundation. Use only these
|
||||
files; do not recreate or recolor the mark.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 flex flex-wrap gap-3 print:hidden">
|
||||
<a href="/brand/MIM4U-Brand-Kit.zip" className="btn-primary" download>
|
||||
<Download className="h-4 w-4" aria-hidden />
|
||||
Download complete kit (ZIP)
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary"
|
||||
onClick={() => window.print()}
|
||||
>
|
||||
<Printer className="h-4 w-4" aria-hidden />
|
||||
Print guidelines
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className="card mb-8" id="usage">
|
||||
<h2 className="font-semibold tracking-tight">Usage (summary)</h2>
|
||||
<ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-neutral-700 dark:text-neutral-300">
|
||||
<li>Do not stretch, rotate, or change logo colors.</li>
|
||||
<li>
|
||||
Keep clear space around the lockup (at least the height of the capital M in MIRACLES).
|
||||
</li>
|
||||
<li>
|
||||
<strong>Website header:</strong> horizontal lockup on tablet/desktop; symbol mark on
|
||||
mobile.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Favicon / app icon:</strong> symbol on forest green (<code>#1a3c34</code>).
|
||||
</li>
|
||||
<li>
|
||||
Sponsor and co-branding use requires approval — see{' '}
|
||||
<a className="underline text-primary-600 dark:text-secondary-400" href="#/legal#sponsorship-terms">
|
||||
Sponsorship Terms
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
<li>
|
||||
Questions:{' '}
|
||||
<a className="underline" href="mailto:[email protected]">
|
||||
contact@mim4u.org
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="card mb-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<Palette className="h-5 w-5 text-primary-600 dark:text-secondary-400" aria-hidden />
|
||||
<h2 className="font-semibold tracking-tight">Colors</h2>
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
||||
{data.colors.map((c) => (
|
||||
<div
|
||||
key={c.hex}
|
||||
className="flex items-center gap-3 rounded-xl border border-neutral-200/80 p-3 dark:border-white/10"
|
||||
>
|
||||
<span
|
||||
className="h-12 w-12 shrink-0 rounded-lg border border-black/10 shadow-inner"
|
||||
style={{ backgroundColor: c.hex }}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">{c.name}</div>
|
||||
<div className="font-mono text-xs text-neutral-600 dark:text-neutral-400">{c.hex}</div>
|
||||
<div className="text-xs text-neutral-500">{c.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card mb-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<Type className="h-5 w-5 text-primary-600 dark:text-secondary-400" aria-hidden />
|
||||
<h2 className="font-semibold tracking-tight">Typography (website)</h2>
|
||||
</div>
|
||||
<ul className="mt-3 space-y-2 text-sm text-neutral-700 dark:text-neutral-300">
|
||||
{data.typography.map((t) => (
|
||||
<li key={t.name}>
|
||||
<strong>{t.name}</strong> — {t.use}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="mt-3 text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Type in the logo artwork is part of the supplied files; do not set live text in a substitute
|
||||
font to imitate the lockup.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{data.groups.map((group) => (
|
||||
<section key={group.id} className="card mb-6" id={`assets-${group.id}`}>
|
||||
<h2 className="font-semibold tracking-tight">{group.title}</h2>
|
||||
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">{group.description}</p>
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-200 dark:border-white/10">
|
||||
<th className="py-2 pr-4 font-medium">File</th>
|
||||
<th className="py-2 pr-4 font-medium">Format</th>
|
||||
<th className="py-2 font-medium">Download</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{group.assets.map((asset) => (
|
||||
<tr
|
||||
key={asset.path}
|
||||
className="border-b border-neutral-100 dark:border-white/5"
|
||||
>
|
||||
<td className="py-3 pr-4">{asset.title}</td>
|
||||
<td className="py-3 pr-4 font-mono text-xs">{asset.format}</td>
|
||||
<td className="py-3">
|
||||
<a
|
||||
href={asset.path}
|
||||
className="inline-flex items-center gap-1 text-primary-600 hover:underline dark:text-secondary-400"
|
||||
download
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" aria-hidden />
|
||||
{asset.path.split('/').pop()}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{group.id === 'horizontal' && (
|
||||
<div className="mt-4 rounded-xl bg-primary-600/10 p-4 dark:bg-primary-900/20">
|
||||
<img
|
||||
src="/brand/logo-horizontal.png"
|
||||
alt=""
|
||||
className="mx-auto h-16 w-auto max-w-full object-contain md:h-20"
|
||||
width={1024}
|
||||
height={354}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{group.id === 'symbol' && (
|
||||
<div className="mt-4 flex flex-wrap items-center justify-center gap-6 rounded-xl bg-neutral-100 p-6 dark:bg-neutral-900">
|
||||
<img
|
||||
src="/brand/logo-symbol.svg"
|
||||
alt=""
|
||||
className="h-20 w-20 object-contain"
|
||||
width={100}
|
||||
height={99}
|
||||
/>
|
||||
<img
|
||||
src="/brand/logo-symbol-512.png"
|
||||
alt=""
|
||||
className="h-20 w-20 object-contain"
|
||||
width={512}
|
||||
height={512}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
|
||||
<p className="text-center text-xs text-neutral-500 print:mt-8">
|
||||
© Miracles in Motion Foundation. Kit version {data.version} · Updated {data.updated}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrandAssetsPage
|
||||
@@ -0,0 +1 @@
|
||||
export { BrandAssetsPage, default } from './BrandAssetsPage'
|
||||
Reference in New Issue
Block a user