From d729a2b829323483ce35e8058d906e7d1ab79df7 Mon Sep 17 00:00:00 2001
From: 9a0ffedc5b31823b <git@wellick.de>
Date: Sun, 3 May 2026 09:41:40 +0000
Subject: [PATCH] feat: add juozas auto logo

---
 public/favicon.svg           |  6 ++++++
 src/components/Footer.astro  |  3 ++-
 src/components/Header.astro  |  3 ++-
 src/components/Logo.astro    | 23 ++++++++++++++++++++++
 src/layouts/BaseLayout.astro |  1 +
 tests/logo.test.ts           | 37 ++++++++++++++++++++++++++++++++++++
 6 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 public/favicon.svg
 create mode 100644 src/components/Logo.astro
 create mode 100644 tests/logo.test.ts

diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..2faaaf2
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" role="img" aria-label="JA" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" rx="22" fill="oklch(36% 0.105 24)"/>
+  <path d="M18 18h9v18.1c0 6.2-3.8 9.9-9.6 9.9-2.4 0-4.5-.6-6.1-1.8l2.4-5.5c.9.7 2 .95 3.1.95 1.9 0 3-1.2 3-3.8V24.4H18V18Z" fill="oklch(98.4% 0.008 28)"/>
+  <path d="M38 18h6.8L54 45.2h-7.1l-1.5-4.8h-8.5l-1.45 4.8h-6.9L38 18Zm5.8 16.8-2.6-8.7-2.65 8.7h5.25Z" fill="oklch(98.4% 0.008 28)"/>
+  <path d="M12 51c11.5-4.2 26.1-4.4 40-.5" stroke="oklch(86% 0.035 24)" stroke-width="3" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 0ce5d0b..3fe268a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,11 +1,12 @@
 ---
 import { EMAIL, HOURS, PHONE_DISPLAY } from '../lib/contact';
+import Logo from './Logo.astro';
 ---
 
 <footer class="mt-24 border-t border-line bg-wash/60">
   <div class="mx-auto grid max-w-7xl gap-8 px-5 py-10 text-sm text-muted sm:px-8 md:grid-cols-[1fr_auto] lg:px-10">
     <div>
-      <p class="font-semibold text-ink">Juozas Auto</p>
+      <Logo compact />
       <p class="mt-2 max-w-md">Atrinkti automobiliai Lietuvoje. Sąžiningos kainos, tikri automobiliai, be paslėptų mokesčių.</p>
     </div>
     <address class="not-italic md:text-right">
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3349c15..9a823bb 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,9 +1,10 @@
 ---
 import { lt } from '../i18n/lt';
+import Logo from './Logo.astro';
 ---
 
 <header class="mx-auto flex w-full max-w-7xl flex-col items-start gap-4 px-5 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-8 lg:px-10">
-  <a href="/" class="text-lg font-semibold tracking-[-0.04em]" aria-label="Juozas Auto pradžia">Juozas Auto</a>
+  <a href="/" class="transition-opacity duration-200 ease-out-quart hover:opacity-80" aria-label="Juozas Auto pradžia"><Logo /></a>
   <nav aria-label="Pagrindinė navigacija">
     <ul class="flex items-center gap-5 text-sm text-muted sm:gap-7">
       <li><a class="transition-colors duration-200 ease-out-quart hover:text-ink" href="/#automobiliai">{lt.nav.cars}</a></li>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
new file mode 100644
index 0000000..0a885ec
--- /dev/null
+++ b/src/components/Logo.astro
@@ -0,0 +1,23 @@
+---
+type Props = {
+  compact?: boolean;
+};
+
+const { compact = false } = Astro.props;
+---
+
+<span class:list={['inline-flex items-center text-ink', compact ? 'gap-2' : 'gap-3']} aria-label="Juozas Auto">
+  <svg
+    class:list={[compact ? 'size-8' : 'size-10', 'shrink-0']}
+    viewBox="0 0 48 48"
+    role="img"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="48" height="48" rx="18" fill="oklch(36% 0.105 24)" />
+    <path d="M15.5 14.5h7.75v14.25c0 5.15-3.2 8.45-8.05 8.45-2.05 0-3.85-.55-5.2-1.55l2.05-4.75c.78.58 1.68.88 2.68.88 1.62 0 2.55-1.08 2.55-3.22V19.9H15.5v-5.4Z" fill="oklch(98.4% 0.008 28)" />
+    <path d="M30.3 14.5h5.95l8.05 22.25h-6.25l-1.22-3.88h-7.35l-1.2 3.88h-6.03L30.3 14.5Zm5.08 13.82-2.2-7.15-2.22 7.15h4.42Z" fill="oklch(98.4% 0.008 28)" />
+    <path d="M8.5 40.2c8.6-3.1 19.55-3.25 31-.4" stroke="oklch(86% 0.035 24)" stroke-width="2" stroke-linecap="round" fill="none" />
+  </svg>
+  <span class:list={['font-semibold tracking-[-0.045em]', compact ? 'text-base' : 'text-lg']}>Juozas Auto</span>
+</span>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index a626574..cc1020d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -32,6 +32,7 @@ const canonicalUrl = new URL(canonicalPath, site.url).toString();
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <meta name="description" content={description} />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="canonical" href={canonicalUrl} />
     <meta property="og:type" content={type} />
     <meta property="og:title" content={ogTitle} />
diff --git a/tests/logo.test.ts b/tests/logo.test.ts
new file mode 100644
index 0000000..a52328b
--- /dev/null
+++ b/tests/logo.test.ts
@@ -0,0 +1,37 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+describe('Juozas Auto logo assets', () => {
+  it('uses a reusable logo component in header and footer', () => {
+    const header = readFileSync('src/components/Header.astro', 'utf8');
+    const footer = readFileSync('src/components/Footer.astro', 'utf8');
+
+    expect(header).toContain('Logo.astro');
+    expect(header).toContain('<Logo />');
+    expect(footer).toContain('Logo.astro');
+    expect(footer).toContain('<Logo compact />');
+  });
+
+  it('publishes an svg favicon', () => {
+    const layout = readFileSync('src/layouts/BaseLayout.astro', 'utf8');
+    const favicon = readFileSync('public/favicon.svg', 'utf8');
+
+    expect(layout).toContain('rel="icon"');
+    expect(layout).toContain('/favicon.svg');
+    expect(favicon).toContain('JA');
+  });
+
+  it('keeps compact logo spacing deterministic', () => {
+    const logo = readFileSync('src/components/Logo.astro', 'utf8');
+
+    expect(logo).not.toContain("'inline-flex items-center gap-3 text-ink'");
+    expect(logo).toContain("compact ? 'gap-2' : 'gap-3'");
+  });
+
+  it('uses path geometry rather than live text for the favicon', () => {
+    const favicon = readFileSync('public/favicon.svg', 'utf8');
+
+    expect(favicon).not.toContain('<text');
+    expect(favicon).toContain('aria-label="JA"');
+  });
+});