feat(messages): add animated logos in multiple languages

This commit is contained in:
Fatih Kadir Akın
2026-01-22 00:51:33 +03:00
parent e63d58770b
commit e7418dd318
21 changed files with 262 additions and 0 deletions

View File

@@ -62,6 +62,7 @@
"logoWithName": "الشعار مع الاسم",
"forLightBackgrounds": "للخلفيات الفاتحة",
"forDarkBackgrounds": "للخلفيات الداكنة",
"animatedLogos": "شعارات متحركة",
"brandColors": "ألوان العلامة التجارية",
"clickToCopy": "انقر لنسخ قيمة hex",
"primary": "لون العلامة التجارية الأساسي",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Adlı Loqo",
"forLightBackgrounds": "Açıq fonlar üçün",
"forDarkBackgrounds": "Tünd fonlar üçün",
"animatedLogos": "Animasiyalı Loqolar",
"brandColors": "Brend Rəngləri",
"clickToCopy": "Hex dəyərini kopyalamaq üçün klikləyin",
"primary": "Əsas brend rəngi",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo mit Namen",
"forLightBackgrounds": "Für helle Hintergründe",
"forDarkBackgrounds": "Für dunkle Hintergründe",
"animatedLogos": "Animierte Logos",
"brandColors": "Markenfarben",
"clickToCopy": "Klicken zum Kopieren des Hex-Werts",
"primary": "Primäre Markenfarbe",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Λογότυπο με όνομα",
"forLightBackgrounds": "Για ανοιχτόχρωμα φόντα",
"forDarkBackgrounds": "Για σκούρα φόντα",
"animatedLogos": "Κινούμενα Λογότυπα",
"brandColors": "Χρώματα μάρκας",
"clickToCopy": "Κάντε κλικ για αντιγραφή hex τιμής",
"primary": "Κύριο χρώμα μάρκας",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo with Name",
"forLightBackgrounds": "For light backgrounds",
"forDarkBackgrounds": "For dark backgrounds",
"animatedLogos": "Animated Logos",
"brandColors": "Brand Colors",
"clickToCopy": "Click to copy hex value",
"primary": "Primary brand color",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo con Nombre",
"forLightBackgrounds": "Para fondos claros",
"forDarkBackgrounds": "Para fondos oscuros",
"animatedLogos": "Logos Animados",
"brandColors": "Colores de Marca",
"clickToCopy": "Haz clic para copiar el valor hex",
"primary": "Color primario de marca",

View File

@@ -62,6 +62,7 @@
"logoWithName": "لوگو با نام",
"forLightBackgrounds": "برای پس‌زمینه‌های روشن",
"forDarkBackgrounds": "برای پس‌زمینه‌های تاریک",
"animatedLogos": "لوگوهای متحرک",
"brandColors": "رنگ‌های برند",
"clickToCopy": "برای کپی کد هگز کلیک کنید",
"primary": "رنگ اصلی برند",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo avec nom",
"forLightBackgrounds": "Pour fonds clairs",
"forDarkBackgrounds": "Pour fonds sombres",
"animatedLogos": "Logos Animés",
"brandColors": "Couleurs de marque",
"clickToCopy": "Cliquez pour copier la valeur hex",
"primary": "Couleur de marque principale",

View File

@@ -62,6 +62,7 @@
"logoWithName": "לוגו עם שם",
"forLightBackgrounds": "לרקעים בהירים",
"forDarkBackgrounds": "לרקעים כהים",
"animatedLogos": "לוגואים מונפשים",
"brandColors": "צבעי מותג",
"clickToCopy": "לחץ להעתקת ערך hex",
"primary": "צבע מותג ראשי",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo con nome",
"forLightBackgrounds": "Per sfondi chiari",
"forDarkBackgrounds": "Per sfondi scuri",
"animatedLogos": "Loghi Animati",
"brandColors": "Colori del marchio",
"clickToCopy": "Clicca per copiare il valore hex",
"primary": "Colore primario del marchio",

View File

@@ -62,6 +62,7 @@
"logoWithName": "名前付きロゴ",
"forLightBackgrounds": "明るい背景用",
"forDarkBackgrounds": "暗い背景用",
"animatedLogos": "アニメーションロゴ",
"brandColors": "ブランドカラー",
"clickToCopy": "クリックして16進値をコピー",
"primary": "プライマリブランドカラー",

View File

@@ -62,6 +62,7 @@
"logoWithName": "이름이 있는 로고",
"forLightBackgrounds": "밝은 배경용",
"forDarkBackgrounds": "어두운 배경용",
"animatedLogos": "애니메이션 로고",
"brandColors": "브랜드 색상",
"clickToCopy": "클릭하여 hex 값 복사",
"primary": "기본 브랜드 색상",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo met naam",
"forLightBackgrounds": "Voor lichte achtergronden",
"forDarkBackgrounds": "Voor donkere achtergronden",
"animatedLogos": "Geanimeerde Logo's",
"brandColors": "Merkkleuren",
"clickToCopy": "Klik om hex-waarde te kopiëren",
"primary": "Primaire merkkleur",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Logo com Nome",
"forLightBackgrounds": "Para fundos claros",
"forDarkBackgrounds": "Para fundos escuros",
"animatedLogos": "Logos Animados",
"brandColors": "Cores da Marca",
"clickToCopy": "Clique para copiar o valor hex",
"primary": "Cor primária da marca",

View File

@@ -62,6 +62,7 @@
"logoWithName": "Логотип с названием",
"forLightBackgrounds": "Для светлого фона",
"forDarkBackgrounds": "Для темного фона",
"animatedLogos": "Анимированные логотипы",
"brandColors": "Цвета бренда",
"clickToCopy": "Нажмите для копирования hex-значения",
"primary": "Основной цвет бренда",

View File

@@ -62,6 +62,7 @@
"logoWithName": "İsimli Logo",
"forLightBackgrounds": "Açık arka planlar için",
"forDarkBackgrounds": "Koyu arka planlar için",
"animatedLogos": "Animasyonlu Logolar",
"brandColors": "Marka Renkleri",
"clickToCopy": "Hex değerini kopyalamak için tıklayın",
"primary": "Birincil marka rengi",

View File

@@ -62,6 +62,7 @@
"logoWithName": "带名称的标志",
"forLightBackgrounds": "适用于浅色背景",
"forDarkBackgrounds": "适用于深色背景",
"animatedLogos": "动态标志",
"brandColors": "品牌颜色",
"clickToCopy": "点击复制十六进制值",
"primary": "主要品牌颜色",

66
public/promi-animated.svg Normal file
View File

@@ -0,0 +1,66 @@
<svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" style="image-rendering: pixelated;">
<!-- Antenna -->
<rect x="7" y="0" width="2" height="2" fill="#FFD700"/>
<rect x="6" y="2" width="4" height="2" fill="#C0C0C0"/>
<!-- Head -->
<rect x="2" y="4" width="12" height="8" fill="#4A90D9"/>
<!-- Eyes - white part -->
<rect x="4" y="6" width="3" height="3" fill="white"/>
<rect x="9" y="6" width="3" height="3" fill="white"/>
<!-- Pupils - look around animation (stay within eye whites) -->
<rect x="5" y="7" width="2" height="2" fill="#333">
<animate attributeName="x" values="5;5;5;5;4;4;5" keyTimes="0;0.3;0.5;0.6;0.65;0.85;1" dur="12s" repeatCount="indefinite" calcMode="discrete"/>
</rect>
<rect x="10" y="7" width="2" height="2" fill="#333">
<animate attributeName="x" values="10;10;10;10;9;9;10" keyTimes="0;0.3;0.5;0.6;0.65;0.85;1" dur="12s" repeatCount="indefinite" calcMode="discrete"/>
</rect>
<!-- Eyelids for blink - both eyes together, every 6 seconds -->
<rect x="4" y="6" width="3" height="0" fill="#4A90D9">
<animate attributeName="height"
values="0;3;0"
keyTimes="0;0.5;1"
dur="0.2s"
begin="0s;6s;12s;18s;24s;30s;36s;42s;48s;54s;60s"
fill="freeze"/>
</rect>
<rect x="9" y="6" width="3" height="0" fill="#4A90D9">
<animate attributeName="height"
values="0;3;0"
keyTimes="0;0.5;1"
dur="0.2s"
begin="0s;6s;12s;18s;24s;30s;36s;42s;48s;54s;60s"
fill="freeze"/>
</rect>
<!-- Mouth - base smile -->
<rect x="6" y="10" width="4" height="1" fill="#333"/>
<rect x="5" y="9" width="1" height="1" fill="#333"/>
<rect x="10" y="9" width="1" height="1" fill="#333"/>
<!-- Bigger smile overlay (animated) - instant on/off -->
<rect x="5" y="10" width="1" height="1" fill="#333" opacity="0">
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.001;0.2;0.201" dur="8s" repeatCount="indefinite" calcMode="discrete"/>
</rect>
<rect x="10" y="10" width="1" height="1" fill="#333" opacity="0">
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.001;0.2;0.201" dur="8s" repeatCount="indefinite" calcMode="discrete"/>
</rect>
<rect x="6" y="11" width="4" height="1" fill="#333" opacity="0">
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.001;0.2;0.201" dur="8s" repeatCount="indefinite" calcMode="discrete"/>
</rect>
<!-- Body -->
<rect x="4" y="12" width="8" height="6" fill="#4A90D9"/>
<rect x="6" y="14" width="4" height="2" fill="#FFD700"/>
<!-- Arms -->
<rect x="0" y="12" width="4" height="2" fill="#4A90D9"/>
<rect x="12" y="12" width="4" height="2" fill="#4A90D9"/>
<!-- Feet -->
<rect x="4" y="18" width="3" height="2" fill="#333"/>
<rect x="9" y="18" width="3" height="2" fill="#333"/>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

25
public/promi-dark.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" style="image-rendering: pixelated;">
<!-- Antenna -->
<rect x="7" y="0" width="2" height="2" fill="#FFD700"/>
<rect x="6" y="2" width="4" height="2" fill="#E0E0E0"/>
<!-- Head -->
<rect x="2" y="4" width="12" height="8" fill="#5BA0E9"/>
<!-- Eyes -->
<rect x="4" y="6" width="3" height="3" fill="white"/>
<rect x="9" y="6" width="3" height="3" fill="white"/>
<rect x="5" y="7" width="2" height="2" fill="#222"/>
<rect x="10" y="7" width="2" height="2" fill="#222"/>
<!-- Mouth -->
<rect x="6" y="10" width="4" height="1" fill="#222"/>
<rect x="5" y="9" width="1" height="1" fill="#222"/>
<rect x="10" y="9" width="1" height="1" fill="#222"/>
<!-- Body -->
<rect x="4" y="12" width="8" height="6" fill="#5BA0E9"/>
<rect x="6" y="14" width="4" height="2" fill="#FFD700"/>
<!-- Arms -->
<rect x="0" y="12" width="4" height="2" fill="#5BA0E9"/>
<rect x="12" y="12" width="4" height="2" fill="#5BA0E9"/>
<!-- Feet -->
<rect x="4" y="18" width="3" height="2" fill="#888"/>
<rect x="9" y="18" width="3" height="2" fill="#888"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

25
public/promi.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" style="image-rendering: pixelated;">
<!-- Antenna -->
<rect x="7" y="0" width="2" height="2" fill="#FFD700"/>
<rect x="6" y="2" width="4" height="2" fill="#C0C0C0"/>
<!-- Head -->
<rect x="2" y="4" width="12" height="8" fill="#4A90D9"/>
<!-- Eyes -->
<rect x="4" y="6" width="3" height="3" fill="white"/>
<rect x="9" y="6" width="3" height="3" fill="white"/>
<rect x="5" y="7" width="2" height="2" fill="#333"/>
<rect x="10" y="7" width="2" height="2" fill="#333"/>
<!-- Mouth -->
<rect x="6" y="10" width="4" height="1" fill="#333"/>
<rect x="5" y="9" width="1" height="1" fill="#333"/>
<rect x="10" y="9" width="1" height="1" fill="#333"/>
<!-- Body -->
<rect x="4" y="12" width="8" height="6" fill="#4A90D9"/>
<rect x="6" y="14" width="4" height="2" fill="#FFD700"/>
<!-- Arms -->
<rect x="0" y="12" width="4" height="2" fill="#4A90D9"/>
<rect x="12" y="12" width="4" height="2" fill="#4A90D9"/>
<!-- Feet -->
<rect x="4" y="18" width="3" height="2" fill="#333"/>
<rect x="9" y="18" width="3" height="2" fill="#333"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -8,6 +8,76 @@ import { Button } from "@/components/ui/button";
import { useBranding } from "@/components/providers/branding-provider";
import { notFound } from "next/navigation";
// Promi logo SVG component for light backgrounds
function PromiLogo({ className }: { className?: string }) {
return (
<svg
viewBox="0 0 16 20"
className={className}
style={{ imageRendering: "pixelated" }}
>
{/* Antenna */}
<rect x="7" y="0" width="2" height="2" fill="#FFD700" />
<rect x="6" y="2" width="4" height="2" fill="#C0C0C0" />
{/* Head */}
<rect x="2" y="4" width="12" height="8" fill="#4A90D9" />
{/* Eyes */}
<rect x="4" y="6" width="3" height="3" fill="white" />
<rect x="9" y="6" width="3" height="3" fill="white" />
<rect x="5" y="7" width="2" height="2" fill="#333" />
<rect x="10" y="7" width="2" height="2" fill="#333" />
{/* Mouth */}
<rect x="6" y="10" width="4" height="1" fill="#333" />
<rect x="5" y="9" width="1" height="1" fill="#333" />
<rect x="10" y="9" width="1" height="1" fill="#333" />
{/* Body */}
<rect x="4" y="12" width="8" height="6" fill="#4A90D9" />
<rect x="6" y="14" width="4" height="2" fill="#FFD700" />
{/* Arms */}
<rect x="0" y="12" width="4" height="2" fill="#4A90D9" />
<rect x="12" y="12" width="4" height="2" fill="#4A90D9" />
{/* Feet */}
<rect x="4" y="18" width="3" height="2" fill="#333" />
<rect x="9" y="18" width="3" height="2" fill="#333" />
</svg>
);
}
// Promi logo SVG component for dark backgrounds
function PromiLogoDark({ className }: { className?: string }) {
return (
<svg
viewBox="0 0 16 20"
className={className}
style={{ imageRendering: "pixelated" }}
>
{/* Antenna */}
<rect x="7" y="0" width="2" height="2" fill="#FFD700" />
<rect x="6" y="2" width="4" height="2" fill="#E0E0E0" />
{/* Head */}
<rect x="2" y="4" width="12" height="8" fill="#5BA0E9" />
{/* Eyes */}
<rect x="4" y="6" width="3" height="3" fill="white" />
<rect x="9" y="6" width="3" height="3" fill="white" />
<rect x="5" y="7" width="2" height="2" fill="#222" />
<rect x="10" y="7" width="2" height="2" fill="#222" />
{/* Mouth */}
<rect x="6" y="10" width="4" height="1" fill="#222" />
<rect x="5" y="9" width="1" height="1" fill="#222" />
<rect x="10" y="9" width="1" height="1" fill="#222" />
{/* Body */}
<rect x="4" y="12" width="8" height="6" fill="#5BA0E9" />
<rect x="6" y="14" width="4" height="2" fill="#FFD700" />
{/* Arms */}
<rect x="0" y="12" width="4" height="2" fill="#5BA0E9" />
<rect x="12" y="12" width="4" height="2" fill="#5BA0E9" />
{/* Feet */}
<rect x="4" y="18" width="3" height="2" fill="#888" />
<rect x="9" y="18" width="3" height="2" fill="#888" />
</svg>
);
}
interface AssetCardProps {
title: string;
description: string;
@@ -198,6 +268,65 @@ export default function BrandAssetsPage() {
</div>
</section>
{/* Promi Mascot Section */}
<section>
<h2 className="text-xl font-semibold mb-4">Promi</h2>
<p className="text-sm text-muted-foreground mb-4">The pixel art mascot for prompts.chat Kids</p>
<div className="grid md:grid-cols-2 gap-4">
{/* Promi for light backgrounds */}
<AssetCard
title="Promi"
description={t("forLightBackgrounds")}
bgClass="bg-gray-100"
downloadUrl="/promi.svg"
filename="promi.svg"
>
<PromiLogo className="h-20 w-auto" />
</AssetCard>
{/* Promi for dark backgrounds */}
<AssetCard
title="Promi"
description={t("forDarkBackgrounds")}
bgClass="bg-gray-900"
downloadUrl="/promi-dark.svg"
filename="promi-dark.svg"
>
<PromiLogoDark className="h-20 w-auto" />
</AssetCard>
</div>
</section>
{/* Animated Logos Section */}
<section>
<h2 className="text-xl font-semibold mb-4">{t("animatedLogos")}</h2>
<div className="grid md:grid-cols-2 gap-4">
{/* Logo animated */}
<AssetCard
title={t("logo")}
description="Animated"
bgClass="bg-gray-100"
downloadUrl="/logo-animated.svg"
filename="logo-animated.svg"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/logo-animated.svg" alt="Logo animated" className="h-20 w-auto" />
</AssetCard>
{/* Promi animated */}
<AssetCard
title="Promi"
description="Animated"
bgClass="bg-gradient-to-br from-gray-100 to-gray-200"
downloadUrl="/promi-animated.svg"
filename="promi-animated.svg"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/promi-animated.svg" alt="Promi animated" className="h-20 w-auto" />
</AssetCard>
</div>
</section>
{/* Colors Section */}
<section>
<h2 className="text-xl font-semibold mb-4">{t("brandColors")}</h2>