diff --git a/assets/brand-sources/logo-horizontal-source.png b/assets/brand-sources/logo-horizontal-source.png new file mode 100644 index 0000000..917c9ef Binary files /dev/null and b/assets/brand-sources/logo-horizontal-source.png differ diff --git a/assets/brand-sources/logo-square-source.png b/assets/brand-sources/logo-square-source.png new file mode 100644 index 0000000..8e62739 Binary files /dev/null and b/assets/brand-sources/logo-square-source.png differ diff --git a/assets/brand-sources/logo-symbol-source.png b/assets/brand-sources/logo-symbol-source.png new file mode 100644 index 0000000..8543747 Binary files /dev/null and b/assets/brand-sources/logo-symbol-source.png differ diff --git a/config/brand-assets.manifest.json b/config/brand-assets.manifest.json new file mode 100644 index 0000000..cfa56b1 --- /dev/null +++ b/config/brand-assets.manifest.json @@ -0,0 +1,71 @@ +{ + "version": "1.0.0", + "organization": "Miracles in Motion Foundation", + "updated": "2026-05-27", + "colors": [ + { "name": "Forest green", "hex": "#1a3c34", "role": "primary background" }, + { "name": "Forest green (deep)", "hex": "#0f2922", "role": "dark text" }, + { "name": "Gold", "hex": "#c5a059", "role": "accent" }, + { "name": "Gold (bright)", "hex": "#d4af37", "role": "logo highlight" } + ], + "typography": [ + { "name": "Playfair Display", "use": "Headings (web)", "source": "Self-hosted via site" }, + { "name": "Inter", "use": "Body and UI (web)", "source": "Self-hosted via site" } + ], + "kits": [ + { + "id": "full", + "title": "Complete brand kit (ZIP)", + "path": "/brand/MIM4U-Brand-Kit.zip", + "format": "ZIP", + "description": "All logos, favicons, and guidelines markdown" + } + ], + "groups": [ + { + "id": "symbol", + "title": "Symbol mark (icon only)", + "description": "Figure and starburst — mobile header, favicons, compact UI.", + "assets": [ + { "title": "Symbol (SVG, simplified vector)", "path": "/brand/logo-symbol.svg", "format": "SVG" }, + { "title": "Symbol 512px", "path": "/brand/logo-symbol-512.png", "format": "PNG" }, + { "title": "Symbol 256px", "path": "/brand/logo-symbol-256.png", "format": "PNG" }, + { "title": "Symbol 128px", "path": "/brand/logo-symbol-128.png", "format": "PNG" }, + { "title": "Symbol 64px", "path": "/brand/logo-symbol-64.png", "format": "PNG" } + ] + }, + { + "id": "horizontal", + "title": "Horizontal lockup", + "description": "Icon + MIRACLES IN MOTION FOUNDATION — desktop nav and footer.", + "assets": [ + { "title": "Horizontal (PNG)", "path": "/brand/logo-horizontal.png", "format": "PNG" }, + { "title": "Horizontal (WebP)", "path": "/brand/logo-horizontal.webp", "format": "WebP" }, + { "title": "Horizontal 2× width (PNG)", "path": "/brand/logo-horizontal-2x.png", "format": "PNG" } + ] + }, + { + "id": "square", + "title": "Square lockup", + "description": "Full stacked logo on green — social and print-friendly raster.", + "assets": [ + { "title": "Square (PNG)", "path": "/brand/logo-square.png", "format": "PNG" }, + { "title": "Square (WebP)", "path": "/brand/logo-square.webp", "format": "WebP" } + ] + }, + { + "id": "favicon", + "title": "Favicon & app icons", + "description": "Symbol on forest green background.", + "assets": [ + { "title": "favicon.ico", "path": "/brand/favicon.ico", "format": "ICO" }, + { "title": "16×16", "path": "/brand/favicon-16.png", "format": "PNG" }, + { "title": "32×32", "path": "/brand/favicon-32.png", "format": "PNG" }, + { "title": "180×180 (Apple touch)", "path": "/brand/favicon-180.png", "format": "PNG" }, + { "title": "192×192 (PWA)", "path": "/brand/favicon-192.png", "format": "PNG" }, + { "title": "512×512 (PWA)", "path": "/brand/favicon-512.png", "format": "PNG" }, + { "title": "Favicon (SVG)", "path": "/favicon.svg", "format": "SVG" } + ] + } + ] +} diff --git a/package.json b/package.json index 249c71f..5d10a31 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "description": "Public website for Miracles In Motion 501(c)3 non-profit organization", "scripts": { "dev": "vite", + "brand:export": "bash scripts/brand/export-brand-assets.sh", + "prebuild": "npm run brand:export", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index a4be5b2..f9083c6 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/brand/BRAND_GUIDELINES.md b/public/brand/BRAND_GUIDELINES.md new file mode 100644 index 0000000..b6a30fe --- /dev/null +++ b/public/brand/BRAND_GUIDELINES.md @@ -0,0 +1,31 @@ +# Miracles in Motion Foundation — Brand guidelines (summary) + +## Colors + +| Name | Hex | Use | +|------|-----|-----| +| Forest green | `#1a3c34` | Backgrounds, primary UI | +| Forest green (deep) | `#0f2922` | Text on light backgrounds | +| Gold | `#c5a059` | Accents, highlights | +| Gold (bright) | `#d4af37` | Logo mark, emphasis | + +## Typography (web) + +- **Headings:** Playfair Display (serif) +- **Body / UI:** Inter (sans-serif) + +Logo type in lockups is part of the artwork; do not substitute fonts in the logo files. + +## Logo usage + +1. Use approved files from this kit only. +2. Do not stretch, rotate, or change logo colors. +3. Maintain clear space around the lockup (minimum: height of the “M” in MIRACLES). +4. **Nav / web header:** horizontal lockup (tablet/desktop) or symbol mark (mobile). +5. **Social / square placements:** square lockup with full name. +6. **Favicon / app icon:** symbol on forest green (`#1a3c34`). +7. Co-branding and sponsor logo placement require written approval — see [mim4u.org/#/legal](https://mim4u.org/#/legal). + +## Contact + +Brand questions: contact@mim4u.org diff --git a/public/brand/MIM4U-Brand-Kit.zip b/public/brand/MIM4U-Brand-Kit.zip new file mode 100644 index 0000000..0e9f200 Binary files /dev/null and b/public/brand/MIM4U-Brand-Kit.zip differ diff --git a/public/brand/favicon-16.png b/public/brand/favicon-16.png new file mode 100644 index 0000000..3f1fb01 Binary files /dev/null and b/public/brand/favicon-16.png differ diff --git a/public/brand/favicon-180.png b/public/brand/favicon-180.png new file mode 100644 index 0000000..f9083c6 Binary files /dev/null and b/public/brand/favicon-180.png differ diff --git a/public/brand/favicon-192.png b/public/brand/favicon-192.png new file mode 100644 index 0000000..67f84e4 Binary files /dev/null and b/public/brand/favicon-192.png differ diff --git a/public/brand/favicon-32.png b/public/brand/favicon-32.png new file mode 100644 index 0000000..d34545f Binary files /dev/null and b/public/brand/favicon-32.png differ diff --git a/public/brand/favicon-512.png b/public/brand/favicon-512.png new file mode 100644 index 0000000..4c7ead0 Binary files /dev/null and b/public/brand/favicon-512.png differ diff --git a/public/brand/favicon.ico b/public/brand/favicon.ico new file mode 100644 index 0000000..9e6c25c Binary files /dev/null and b/public/brand/favicon.ico differ diff --git a/public/brand/logo-horizontal-2x.png b/public/brand/logo-horizontal-2x.png new file mode 100644 index 0000000..ffc146a Binary files /dev/null and b/public/brand/logo-horizontal-2x.png differ diff --git a/public/brand/logo-horizontal.png b/public/brand/logo-horizontal.png new file mode 100644 index 0000000..9d6b73c Binary files /dev/null and b/public/brand/logo-horizontal.png differ diff --git a/public/brand/logo-horizontal.webp b/public/brand/logo-horizontal.webp new file mode 100644 index 0000000..8288298 Binary files /dev/null and b/public/brand/logo-horizontal.webp differ diff --git a/public/brand/logo-square.png b/public/brand/logo-square.png new file mode 100644 index 0000000..aeaf87f Binary files /dev/null and b/public/brand/logo-square.png differ diff --git a/public/brand/logo-square.webp b/public/brand/logo-square.webp new file mode 100644 index 0000000..b436161 Binary files /dev/null and b/public/brand/logo-square.webp differ diff --git a/public/brand/logo-symbol-1024.png b/public/brand/logo-symbol-1024.png new file mode 100644 index 0000000..3c05b65 Binary files /dev/null and b/public/brand/logo-symbol-1024.png differ diff --git a/public/brand/logo-symbol-128.png b/public/brand/logo-symbol-128.png new file mode 100644 index 0000000..6202320 Binary files /dev/null and b/public/brand/logo-symbol-128.png differ diff --git a/public/brand/logo-symbol-256.png b/public/brand/logo-symbol-256.png new file mode 100644 index 0000000..30b7094 Binary files /dev/null and b/public/brand/logo-symbol-256.png differ diff --git a/public/brand/logo-symbol-512.png b/public/brand/logo-symbol-512.png new file mode 100644 index 0000000..8936c04 Binary files /dev/null and b/public/brand/logo-symbol-512.png differ diff --git a/public/brand/logo-symbol-64.png b/public/brand/logo-symbol-64.png new file mode 100644 index 0000000..10ca7d9 Binary files /dev/null and b/public/brand/logo-symbol-64.png differ diff --git a/public/brand/logo-symbol.png b/public/brand/logo-symbol.png new file mode 100644 index 0000000..8936c04 Binary files /dev/null and b/public/brand/logo-symbol.png differ diff --git a/public/brand/logo-symbol.svg b/public/brand/logo-symbol.svg new file mode 100644 index 0000000..ff729f9 --- /dev/null +++ b/public/brand/logo-symbol.svg @@ -0,0 +1,37 @@ + + Miracles in Motion Foundation + + + + + + + + + + + + + + + diff --git a/public/brand/og-image.png b/public/brand/og-image.png new file mode 100644 index 0000000..772ffc8 Binary files /dev/null and b/public/brand/og-image.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index 78b40c0..3f1fb01 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png index f3bfddf..67f84e4 100644 Binary files a/public/favicon-192x192.png and b/public/favicon-192x192.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index 30b58ad..d34545f 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon-512x512.png b/public/favicon-512x512.png index 1e0dc90..4c7ead0 100644 Binary files a/public/favicon-512x512.png and b/public/favicon-512x512.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..9e6c25c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg index 2a2d385..f64b2df 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,14 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + diff --git a/public/logo-horizontal.png b/public/logo-horizontal.png new file mode 100644 index 0000000..9d6b73c Binary files /dev/null and b/public/logo-horizontal.png differ diff --git a/public/logo-symbol.png b/public/logo-symbol.png new file mode 100644 index 0000000..8936c04 Binary files /dev/null and b/public/logo-symbol.png differ diff --git a/public/logo.png b/public/logo.png index 8e62739..aeaf87f 100644 Binary files a/public/logo.png and b/public/logo.png differ diff --git a/public/og-image.png b/public/og-image.png new file mode 100644 index 0000000..772ffc8 Binary files /dev/null and b/public/og-image.png differ diff --git a/public/sitemap.xml b/public/sitemap.xml index 10539fd..93b9cd1 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -35,4 +35,9 @@ monthly 0.5 + + https://mim4u.org/#/brand + monthly + 0.6 + diff --git a/scripts/brand/export-brand-assets.sh b/scripts/brand/export-brand-assets.sh new file mode 100755 index 0000000..bc4af32 --- /dev/null +++ b/scripts/brand/export-brand-assets.sh @@ -0,0 +1,87 @@ +#!/usr/bin/env bash +# Generate web-ready brand assets and MIM4U-Brand-Kit.zip from sources in assets/brand-sources/. +# Requires: ImageMagick (convert). Run from repo root: ./scripts/brand/export-brand-assets.sh + +set -euo pipefail +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +MIM_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)" +SRC="$MIM_ROOT/assets/brand-sources" +OUT="$MIM_ROOT/public/brand" +PUBLIC="$MIM_ROOT/public" + +GREEN="#1a3c34" + +if ! command -v convert >/dev/null 2>&1; then + echo "Error: ImageMagick convert is required." >&2 + exit 1 +fi + +mkdir -p "$OUT" + +symbol="$SRC/logo-symbol-source.png" +horizontal="$SRC/logo-horizontal-source.png" +square="$SRC/logo-square-source.png" + +for f in "$symbol" "$horizontal" "$square"; do + if [[ ! -f "$f" ]]; then + echo "Missing source: $f" >&2 + exit 1 + fi +done + +echo "Exporting symbol PNG sizes..." +for size in 64 128 256 512 1024; do + convert "$symbol" -resize "${size}x${size}" -strip "$OUT/logo-symbol-${size}.png" +done +cp "$OUT/logo-symbol-512.png" "$OUT/logo-symbol.png" + +echo "Exporting horizontal PNG/WebP..." +convert "$horizontal" -strip "$OUT/logo-horizontal.png" +convert "$horizontal" -quality 88 -define webp:method=6 "$OUT/logo-horizontal.webp" +convert "$horizontal" -resize 2048x -strip "$OUT/logo-horizontal-2x.png" + +echo "Exporting square PNG/WebP..." +convert "$square" -strip "$OUT/logo-square.png" +convert "$square" -quality 88 -define webp:method=6 "$OUT/logo-square.webp" + +echo "Exporting favicon / touch icons (symbol on brand green)..." +for size in 16 32 180 192 512; do + convert "$symbol" -background "$GREEN" -gravity center -resize "${size}x${size}" -extent "${size}x${size}" -strip "$OUT/favicon-${size}.png" +done + +# Multi-size favicon.ico +convert "$OUT/favicon-16.png" "$OUT/favicon-32.png" "$OUT/favicon.ico" + +# Root copies for site + PWA +cp "$OUT/logo-horizontal.png" "$PUBLIC/logo-horizontal.png" +cp "$OUT/logo-square.png" "$PUBLIC/logo.png" +cp "$OUT/logo-symbol.png" "$PUBLIC/logo-symbol.png" +cp "$OUT/favicon-16.png" "$PUBLIC/favicon-16x16.png" +cp "$OUT/favicon-32.png" "$PUBLIC/favicon-32x32.png" +cp "$OUT/favicon-180.png" "$PUBLIC/apple-touch-icon.png" +cp "$OUT/favicon-192.png" "$PUBLIC/favicon-192x192.png" +cp "$OUT/favicon-512.png" "$PUBLIC/favicon-512x512.png" +cp "$OUT/favicon.ico" "$PUBLIC/favicon.ico" + +echo "Generating OG social image (1200×630)..." +convert "$horizontal" -resize 1200x630^ -gravity center -extent 1200x630 -strip "$OUT/og-image.png" +cp "$OUT/og-image.png" "$PUBLIC/og-image.png" 2>/dev/null || cp "$OUT/og-image.png" "$PUBLIC/og-image.jpg" 2>/dev/null || true +if [[ -f "$PUBLIC/og-image.jpg" ]]; then + convert "$OUT/og-image.png" -quality 90 "$PUBLIC/og-image.jpg" +fi + +echo "Building brand kit ZIP..." +( + cd "$OUT" + rm -f MIM4U-Brand-Kit.zip + zip -q MIM4U-Brand-Kit.zip \ + logo-symbol.svg \ + logo-symbol.png logo-symbol-64.png logo-symbol-128.png logo-symbol-256.png logo-symbol-512.png logo-symbol-1024.png \ + logo-horizontal.png logo-horizontal.webp logo-horizontal-2x.png \ + logo-square.png logo-square.webp \ + favicon.ico favicon-16.png favicon-32.png favicon-180.png favicon-192.png favicon-512.png \ + og-image.png \ + BRAND_GUIDELINES.md 2>/dev/null || true +) + +echo "Done. Outputs: $OUT" diff --git a/src/App.tsx b/src/App.tsx index b05b151..23112f4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -58,14 +58,15 @@ import { import AIAssistancePortal from './components/AIAssistancePortal' // Phase 3B: Enterprise Components -import AdvancedAnalyticsDashboard from './components/AdvancedAnalyticsDashboard' -import MobileVolunteerApp from './components/MobileVolunteerApp' -import StaffTrainingDashboard from './components/StaffTrainingDashboard' -import MimChatAgent from './components/MimChatAgent' +import AdvancedAnalyticsDashboard from './components/AdvancedAnalyticsDashboard' +import MobileVolunteerApp from './components/MobileVolunteerApp' +import StaffTrainingDashboard from './components/StaffTrainingDashboard' +import MimChatAgent from './components/MimChatAgent' // Phase 4: Extracted Components import { Navigation } from './components/Navigation' import { Footer } from './components/Footer' +import { BrandAssetsPage } from './pages/BrandPage' /** * Miracles in Motion — Complete Non-Profit Website @@ -2184,7 +2185,7 @@ function SponsorsPage() { ] return ( - Download prospectus}> + Brand assets}>
{tiers.map((t) => ( @@ -2368,7 +2369,7 @@ function LegalPage() {
    -
  • Logo usage requires prior written approval and must follow brand guidelines.
    • +
  • Logo usage requires prior written approval and must follow our brand assets and guidelines.
  • Sponsorship does not imply endorsement of products or services.
  • Benefits may be adjusted for equivalency based on availability.
@@ -4576,6 +4577,8 @@ function AppContent() { return case '/legal': return + case '/brand': + return case '/impact': return case '/request-assistance': @@ -4603,9 +4606,9 @@ function AppContent() { } } - return ( -
- + return ( +
+ {/* Offline Indicator */} @@ -4628,20 +4631,20 @@ function AppContent() {
{renderPage()}
- -
- {![ - '/admin-portal', - '/volunteer-portal', - '/resource-portal', - '/analytics', - '/ai-portal', - '/advanced-analytics', - '/mobile-volunteer', - '/staff-training' - ].includes(currentPath) && } - - -
- ) -} + +
+ {![ + '/admin-portal', + '/volunteer-portal', + '/resource-portal', + '/analytics', + '/ai-portal', + '/advanced-analytics', + '/mobile-volunteer', + '/staff-training' + ].includes(currentPath) && } + + +
+ ) +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 85ea4fa..9842a20 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -43,6 +43,7 @@ export function Footer() {

Organization

  • Testimonials
    • +
  • Brand assets
  • Legal & Policies
  • Contact Us
  • (818) 491-6884
    • diff --git a/src/components/SEO/SEOHead.tsx b/src/components/SEO/SEOHead.tsx index b398162..73cf507 100644 --- a/src/components/SEO/SEOHead.tsx +++ b/src/components/SEO/SEOHead.tsx @@ -17,7 +17,7 @@ interface SEOHeadProps { export function SEOHead({ title = 'Miracles in Motion - Empowering Students with Essential Support', description = 'A 501(c)(3) nonprofit providing students with school supplies, clothing, and emergency support to help them succeed in school and life.', - image = '/og-image.jpg', + image = '/og-image.png', url = 'https://mim4u.org', type = 'website', article @@ -87,7 +87,7 @@ export function SEOHead({ "@type": "Organization", "name": "Miracles in Motion", "url": "https://mim4u.org", - "logo": "https://mim4u.org/logo.png", + "logo": "https://mim4u.org/brand/logo-horizontal.png", "description": description, "foundingDate": "2020", "areaServed": "United States", diff --git a/src/components/ui/LogoMark.tsx b/src/components/ui/LogoMark.tsx index 3a5e818..d2e4d98 100644 --- a/src/components/ui/LogoMark.tsx +++ b/src/components/ui/LogoMark.tsx @@ -1,29 +1,79 @@ export type LogoMarkVariant = 'nav' | 'footer' | 'square' export interface LogoMarkProps { - /** nav/footer: full wordmark; square: compact icon tile */ + /** nav: symbol on mobile, horizontal on md+; footer: horizontal; square: stacked lockup */ variant?: LogoMarkVariant className?: string } -const LOGO_SRC = '/logo.png' +const BRAND = { + symbolSvg: '/brand/logo-symbol.svg', + symbolPng: '/brand/logo-symbol-512.png', + horizontal: '/brand/logo-horizontal.png', + square: '/brand/logo-square.png', +} as const export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) { const isDecorative = variant === 'nav' || variant === 'footer' + if (variant === 'nav') { + return ( + + + + + ) + } + + if (variant === 'footer') { + return ( + + + + ) + } + return ( {isDecorative ) diff --git a/src/index.css b/src/index.css index 1bc77c3..db72498 100644 --- a/src/index.css +++ b/src/index.css @@ -71,7 +71,7 @@ } @layer components { - /* Official logo (public/logo.png) */ + /* Brand logos: /brand/logo-symbol.svg, logo-horizontal.png, logo-square.png */ .logo-mark { display: inline-flex; align-items: center; @@ -83,72 +83,75 @@ .logo-mark__img { display: block; object-fit: contain; + object-position: left center; } - /* Mobile-first; scale up on tablet/desktop (square asset: height drives width) */ + /* Nav: symbol (square) on mobile, horizontal lockup on md+ */ .logo-mark--nav { - height: 2.25rem; + height: 2.5rem; } - .logo-mark--nav .logo-mark__img { + .logo-mark--nav .logo-mark__img--symbol { height: 100%; width: auto; - max-width: 9rem; - object-position: center; + max-width: 2.75rem; } - @media (min-width: 640px) { + @media (min-width: 768px) { .logo-mark--nav { - height: 3rem; + height: 3.25rem; } - .logo-mark--nav .logo-mark__img { - max-width: 11rem; + .logo-mark--nav .logo-mark__img--horizontal { + height: 100%; + width: auto; + max-width: min(14rem, 42vw); } } @media (min-width: 1024px) { .logo-mark--nav { - height: 4rem; + height: 3.5rem; } - .logo-mark--nav .logo-mark__img { - max-width: 14rem; + .logo-mark--nav .logo-mark__img--horizontal { + max-width: 15rem; } } @media (min-width: 1280px) { .logo-mark--nav { - height: 4.25rem; + height: 3.75rem; } - .logo-mark--nav .logo-mark__img { - max-width: 15.5rem; + .logo-mark--nav .logo-mark__img--horizontal { + max-width: 16.5rem; } } + /* Footer: always horizontal */ .logo-mark--footer { height: 2.75rem; } - .logo-mark--footer .logo-mark__img { + .logo-mark--footer .logo-mark__img--horizontal { height: 100%; width: auto; - max-width: 10rem; + max-width: min(12rem, 80vw); } @media (min-width: 640px) { .logo-mark--footer { height: 3.25rem; } - .logo-mark--footer .logo-mark__img { - max-width: 12rem; + .logo-mark--footer .logo-mark__img--horizontal { + max-width: 14rem; } } @media (min-width: 1024px) { .logo-mark--footer { - height: 3.75rem; + height: 3.5rem; } - .logo-mark--footer .logo-mark__img { - max-width: 14rem; + .logo-mark--footer .logo-mark__img--horizontal { + max-width: 16rem; } } @@ -569,6 +572,15 @@ } @media print { + .no-print, + header, + footer, + .sticky-donate, + [class*="MimChat"], + dialog { + display: none !important; + } + .no-print { display: none !important; } diff --git a/src/pages/BrandPage/BrandAssetsPage.tsx b/src/pages/BrandPage/BrandAssetsPage.tsx new file mode 100644 index 0000000..f1b615c --- /dev/null +++ b/src/pages/BrandPage/BrandAssetsPage.tsx @@ -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 ( +
    +
    +
    Press & partners
    +

    Brand assets

    +

    + Official logos, colors, and favicons for Miracles in Motion Foundation. Use only these + files; do not recreate or recolor the mark. +

    +
    + +
    + + + Download complete kit (ZIP) + + +
    + +
    +

    Usage (summary)

    +
      +
    • Do not stretch, rotate, or change logo colors.
      • +
    • + Keep clear space around the lockup (at least the height of the capital M in MIRACLES). +
      • +
    • + Website header: horizontal lockup on tablet/desktop; symbol mark on + mobile. +
      • +
    • + Favicon / app icon: symbol on forest green (#1a3c34). +
      • +
    • + Sponsor and co-branding use requires approval — see{' '} + + Sponsorship Terms + + . +
      • +
    • + Questions:{' '} + + contact@mim4u.org + +
      • +
    +
    + +
    +
    + +

    Colors

    +
    +
    + {data.colors.map((c) => ( +
    + +
    +
    {c.name}
    +
    {c.hex}
    +
    {c.role}
    +
    +
    + ))} +
    +
    + +
    +
    + +

    Typography (website)

    +
    +
      + {data.typography.map((t) => ( +
    • + {t.name} — {t.use} +
      • + ))} +
    +

    + Type in the logo artwork is part of the supplied files; do not set live text in a substitute + font to imitate the lockup. +

    +
    + + {data.groups.map((group) => ( +
    +

    {group.title}

    +

    {group.description}

    +
    + + + + + + + + + + {group.assets.map((asset) => ( + + + + + + ))} + +
    FileFormatDownload
    {asset.title}{asset.format} + + + {asset.path.split('/').pop()} + +
    +
    + {group.id === 'horizontal' && ( +
    + +
    + )} + {group.id === 'symbol' && ( +
    + + +
    + )} +
    + ))} + +

    + © Miracles in Motion Foundation. Kit version {data.version} · Updated {data.updated} +

    +
    + ) +} + +export default BrandAssetsPage diff --git a/src/pages/BrandPage/index.ts b/src/pages/BrandPage/index.ts new file mode 100644 index 0000000..6ccf74d --- /dev/null +++ b/src/pages/BrandPage/index.ts @@ -0,0 +1 @@ +export { BrandAssetsPage, default } from './BrandAssetsPage' diff --git a/tsconfig.json b/tsconfig.json index bd8eb6c..4e526ba 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,6 +26,6 @@ "@/*": ["./src/*"] } }, - "include": ["src"], + "include": ["src", "config/brand-assets.manifest.json"], "references": [{ "path": "./tsconfig.node.json" }] } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index e10e4ea..c696bc1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,7 +9,16 @@ export default defineConfig({ react(), VitePWA({ registerType: 'prompt', - includeAssets: ['favicon.svg', 'logo.png', 'robots.txt', 'site.webmanifest'], + includeAssets: [ + 'favicon.svg', + 'favicon.ico', + 'logo.png', + 'logo-horizontal.png', + 'logo-symbol.png', + 'robots.txt', + 'site.webmanifest', + 'brand/**/*', + ], manifest: { name: 'Miracles in Motion Foundation', short_name: 'MiM', @@ -24,21 +33,21 @@ export default defineConfig({ src: '/favicon.svg', sizes: 'any', type: 'image/svg+xml', - purpose: 'any' + purpose: 'any', }, { - src: '/favicon-192x192.png', + src: '/brand/favicon-192.png', sizes: '192x192', type: 'image/png', - purpose: 'any maskable' + purpose: 'any maskable', }, { - src: '/favicon-512x512.png', + src: '/brand/favicon-512.png', sizes: '512x512', type: 'image/png', - purpose: 'any maskable' - } - ] + purpose: 'any maskable', + }, + ], }, workbox: { globPatterns: ['**/*.{js,css,html,ico,png,svg,webp}'],