localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AV launch: transparent SVG logo (drop black bg rect) + Header logo 200% bigger (h-12→h-24, 320→640w, 48→96h) + rename Production Industry Manufacturers → AV Integration Manufacturers

Browse Source
This commit is contained in:
Ryan Salazar
2026-06-02 23:22:59 +00:00
parent 8695b338d2
commit 54117c34d3
4 changed files with 36 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
public/assets/images/logo.svg
View File

@@ -1,61 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320" role="img" aria-label="AV Beat — Pro AV, Live Production, and Display Tech"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320" role="img" aria-label="AV Beat — Pro AV, Live Production, and Display Tech">
<defs> <defs>
<!-- Background gradient: deep navy → near-black --> <filter id="haloGold" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="18"/></filter>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"> <filter id="haloRed" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="18"/></filter>
<stop offset="0%" stop-color="#0a0510"/> <filter id="glowGold" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="3.5"/></filter>
<stop offset="100%" stop-color="#02010a"/> <filter id="glowRed" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="3.5"/></filter>
</linearGradient> <filter id="glowSoft" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>
<!-- Wide soft halo (outer bloom) -->
<filter id="haloGold" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18"/>
</filter>
<filter id="haloRed" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18"/>
</filter>
<!-- Tighter glow (inner neon) -->
<filter id="glowGold" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3.5"/>
</filter>
<filter id="glowRed" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3.5"/>
</filter>
<!-- Tagline subtle glow -->
<filter id="glowSoft" x="-20%" y="-50%" width="140%" height="200%">
<feGaussianBlur stdDeviation="1.6"/>
</filter>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&amp;family=Inter:wght@500;600&amp;display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&amp;family=Inter:wght@500;600&amp;display=swap');
.word { .word { font-family:'Barlow Condensed','Oswald','Nimbus Sans Narrow','Inter','Helvetica Neue',Arial,sans-serif; font-weight:900; font-size:156px; letter-spacing:-0.012em; }
font-family: 'Barlow Condensed', 'Oswald', 'Nimbus Sans Narrow', 'Inter', 'Helvetica Neue', Arial, sans-serif; .tm { font-family:'Inter','Nimbus Sans Narrow','Helvetica Neue',Arial,sans-serif; font-weight:600; font-size:22px; }
font-weight: 900; .tag { font-family:'Inter','Nimbus Sans Narrow','Helvetica Neue',Arial,sans-serif; font-weight:500; font-size:20px; letter-spacing:0.34em; }
font-size: 156px;
letter-spacing: -0.012em;
}
.tm {
font-family: 'Inter', 'Nimbus Sans Narrow', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600;
font-size: 22px;
}
.tag {
font-family: 'Inter', 'Nimbus Sans Narrow', 'Helvetica Neue', Arial, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.34em;
}
</style> </style>
</defs> </defs>
<!-- Dark background --> <!-- NO background fill — transparent SVG so the header bg shows through -->
<rect width="1200" height="320" fill="url(#bg)"/>
<!-- Faint scanline accents -->
<rect width="1200" height="1" y="0" fill="#ffb800" opacity="0.10"/>
<rect width="1200" height="1" y="319" fill="#d60701" opacity="0.10"/>
<!-- ─── AV (gold neon) ────────────────────────────────────────── --> <!-- ─── AV (gold neon) ────────────────────────────────────────── -->
<g text-anchor="end"> <g text-anchor="end">
@@ -71,28 +30,20 @@
<text class="word" x="530" y="195" fill="#ffffff">BEAT</text> <text class="word" x="530" y="195" fill="#ffffff">BEAT</text>
</g> </g>
<!-- ™ mark near end of BEAT, upper right --> <!-- ™ mark -->
<g> <g>
<text class="tm" x="935" y="92" fill="#ffd45e" filter="url(#glowGold)">™</text> <text class="tm" x="935" y="92" fill="#ffd45e" filter="url(#glowGold)">™</text>
<text class="tm" x="935" y="92" fill="#ffffff">™</text> <text class="tm" x="935" y="92" fill="#ffffff">™</text>
</g> </g>
<!-- ─── Waveform / signal pulse ──────────────────────────────── --> <!-- Waveform -->
<g> <g>
<!-- Halo pass --> <path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" fill="none" stroke="#ffb800" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" filter="url(#haloGold)" opacity="0.75"/>
<path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" <path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" fill="none" stroke="#ffb800" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" filter="url(#glowGold)"/>
fill="none" stroke="#ffb800" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" <path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" fill="none" stroke="#ffffff" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round"/>
filter="url(#haloGold)" opacity="0.75"/>
<!-- Mid stroke -->
<path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230"
fill="none" stroke="#ffb800" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"
filter="url(#glowGold)"/>
<!-- Crisp white core -->
<path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230"
fill="none" stroke="#ffffff" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round"/>
</g> </g>
<!-- ─── Tagline ───────────────────────────────────────────────── --> <!-- Tagline -->
<g text-anchor="middle"> <g text-anchor="middle">
<text class="tag" x="600" y="294" fill="#ffffff" opacity="0.85" filter="url(#glowSoft)">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text> <text class="tag" x="600" y="294" fill="#ffffff" opacity="0.85" filter="url(#glowSoft)">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text>
<text class="tag" x="600" y="294" fill="#ffffff">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text> <text class="tag" x="600" y="294" fill="#ffffff">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

79
public/brand/logo.svg
View File

@@ -1,61 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320" role="img" aria-label="AV Beat — Pro AV, Live Production, and Display Tech"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320" role="img" aria-label="AV Beat — Pro AV, Live Production, and Display Tech">
<defs> <defs>
<!-- Background gradient: deep navy → near-black --> <filter id="haloGold" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="18"/></filter>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"> <filter id="haloRed" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="18"/></filter>
<stop offset="0%" stop-color="#0a0510"/> <filter id="glowGold" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="3.5"/></filter>
<stop offset="100%" stop-color="#02010a"/> <filter id="glowRed" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="3.5"/></filter>
</linearGradient> <filter id="glowSoft" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>
<!-- Wide soft halo (outer bloom) -->
<filter id="haloGold" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18"/>
</filter>
<filter id="haloRed" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18"/>
</filter>
<!-- Tighter glow (inner neon) -->
<filter id="glowGold" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3.5"/>
</filter>
<filter id="glowRed" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3.5"/>
</filter>
<!-- Tagline subtle glow -->
<filter id="glowSoft" x="-20%" y="-50%" width="140%" height="200%">
<feGaussianBlur stdDeviation="1.6"/>
</filter>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&amp;family=Inter:wght@500;600&amp;display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&amp;family=Inter:wght@500;600&amp;display=swap');
.word { .word { font-family:'Barlow Condensed','Oswald','Nimbus Sans Narrow','Inter','Helvetica Neue',Arial,sans-serif; font-weight:900; font-size:156px; letter-spacing:-0.012em; }
font-family: 'Barlow Condensed', 'Oswald', 'Nimbus Sans Narrow', 'Inter', 'Helvetica Neue', Arial, sans-serif; .tm { font-family:'Inter','Nimbus Sans Narrow','Helvetica Neue',Arial,sans-serif; font-weight:600; font-size:22px; }
font-weight: 900; .tag { font-family:'Inter','Nimbus Sans Narrow','Helvetica Neue',Arial,sans-serif; font-weight:500; font-size:20px; letter-spacing:0.34em; }
font-size: 156px;
letter-spacing: -0.012em;
}
.tm {
font-family: 'Inter', 'Nimbus Sans Narrow', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600;
font-size: 22px;
}
.tag {
font-family: 'Inter', 'Nimbus Sans Narrow', 'Helvetica Neue', Arial, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.34em;
}
</style> </style>
</defs> </defs>
<!-- Dark background --> <!-- NO background fill — transparent SVG so the header bg shows through -->
<rect width="1200" height="320" fill="url(#bg)"/>
<!-- Faint scanline accents -->
<rect width="1200" height="1" y="0" fill="#ffb800" opacity="0.10"/>
<rect width="1200" height="1" y="319" fill="#d60701" opacity="0.10"/>
<!-- ─── AV (gold neon) ────────────────────────────────────────── --> <!-- ─── AV (gold neon) ────────────────────────────────────────── -->
<g text-anchor="end"> <g text-anchor="end">
@@ -71,28 +30,20 @@
<text class="word" x="530" y="195" fill="#ffffff">BEAT</text> <text class="word" x="530" y="195" fill="#ffffff">BEAT</text>
</g> </g>
<!-- ™ mark near end of BEAT, upper right --> <!-- ™ mark -->
<g> <g>
<text class="tm" x="935" y="92" fill="#ffd45e" filter="url(#glowGold)">™</text> <text class="tm" x="935" y="92" fill="#ffd45e" filter="url(#glowGold)">™</text>
<text class="tm" x="935" y="92" fill="#ffffff">™</text> <text class="tm" x="935" y="92" fill="#ffffff">™</text>
</g> </g>
<!-- ─── Waveform / signal pulse ──────────────────────────────── --> <!-- Waveform -->
<g> <g>
<!-- Halo pass --> <path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" fill="none" stroke="#ffb800" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" filter="url(#haloGold)" opacity="0.75"/>
<path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" <path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" fill="none" stroke="#ffb800" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" filter="url(#glowGold)"/>
fill="none" stroke="#ffb800" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" <path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230" fill="none" stroke="#ffffff" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round"/>
filter="url(#haloGold)" opacity="0.75"/>
<!-- Mid stroke -->
<path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230"
fill="none" stroke="#ffb800" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"
filter="url(#glowGold)"/>
<!-- Crisp white core -->
<path d="M 70 230 L 440 230 L 460 230 L 480 210 L 500 252 L 520 164 L 540 286 L 560 210 L 580 238 L 600 230 L 1130 230"
fill="none" stroke="#ffffff" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round"/>
</g> </g>
<!-- ─── Tagline ───────────────────────────────────────────────── --> <!-- Tagline -->
<g text-anchor="middle"> <g text-anchor="middle">
<text class="tag" x="600" y="294" fill="#ffffff" opacity="0.85" filter="url(#glowSoft)">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text> <text class="tag" x="600" y="294" fill="#ffffff" opacity="0.85" filter="url(#glowSoft)">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text>
<text class="tag" x="600" y="294" fill="#ffffff">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text> <text class="tag" x="600" y="294" fill="#ffffff">PRO AV · LIVE PRODUCTION · DISPLAY TECH</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

6
src/app/manufacturers/page.tsx
View File

@@ -8,12 +8,12 @@ import ManufacturerDirectoryClient from "./DirectoryClient";
export const revalidate = 1800; export const revalidate = 1800;
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Production Industry Manufacturers — AV Beat", title: "AV Integration Manufacturers — AV Beat",
description: description:
"Browse 1,000+ broadcast, post-production, and live-production manufacturers exhibiting at NAB Show and IBC. Find vendor profiles, booth numbers, product categories, and the latest news from each company.", "Browse 1,000+ broadcast, post-production, and live-production manufacturers exhibiting at NAB Show and IBC. Find vendor profiles, booth numbers, product categories, and the latest news from each company.",
alternates: { canonical: "/manufacturers" }, alternates: { canonical: "/manufacturers" },
openGraph: { openGraph: {
title: "Production Industry Manufacturers — AV Beat", title: "AV Integration Manufacturers — AV Beat",
description: description:
"Comprehensive directory of broadcast industry manufacturers, exhibitors, and vendors.", "Comprehensive directory of broadcast industry manufacturers, exhibitors, and vendors.",
type: "website", type: "website",
@@ -77,7 +77,7 @@ export default async function ManufacturersIndex() {
<div className="max-w-6xl mx-auto px-4 py-10"> <div className="max-w-6xl mx-auto px-4 py-10">
<header className="mb-8"> <header className="mb-8">
<h1 className="text-3xl md:text-4xl font-display font-bold text-[#e0e0e0] mb-2"> <h1 className="text-3xl md:text-4xl font-display font-bold text-[#e0e0e0] mb-2">
Production Industry Manufacturers AV Integration Manufacturers
</h1> </h1>
<p className="text-[#e0e0e0]/70 text-base max-w-3xl"> <p className="text-[#e0e0e0]/70 text-base max-w-3xl">
{list.length.toLocaleString()} broadcast, post-production, and live-production {list.length.toLocaleString()} broadcast, post-production, and live-production

6
src/components/Header.tsx
View File

@@ -265,10 +265,10 @@ export default function Header() {
<AppImage <AppImage
src="/assets/images/logo.svg" src="/assets/images/logo.svg"
alt="AV Beat logo" alt="AV Beat logo"
width={320} width={640}
height={48} height={96}
priority={true} priority={true}
className="h-12 w-auto object-contain" className="h-24 w-auto object-contain"
/> />
</Link> </Link>