Skip to content

Commit 97d14d4

Browse files
kristopherjturnerkristopherjturner
committed
Brand page: show all logo, horizontal, and mark variants in visual gallery
1 parent a76f851 commit 97d14d4

1 file changed

Lines changed: 77 additions & 71 deletions

File tree

‎src/pages/brand.astro‎

Lines changed: 77 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
---
22
import Layout from '~/layouts/PageLayout.astro';
3+
import { Image } from 'astro:assets';
34
45
import Hero from '~/components/widgets/Hero.astro';
56
import Content from '~/components/widgets/Content.astro';
67
import Features from '~/components/widgets/Features.astro';
78
import CallToAction from '~/components/widgets/CallToAction.astro';
89
9-
import logoPrimary from '~/assets/images/logo-primary-1600.png';
10-
import logoNavy from '~/assets/images/logo-navy-1600.png';
11-
import logoBlack from '~/assets/images/logo-black-1600.png';
12-
import logoWhite from '~/assets/images/logo-white-1600.png';
10+
import logoPrimary from '~/assets/images/logo-primary-800.png';
11+
import logoNavy from '~/assets/images/logo-navy-800.png';
12+
import logoBlack from '~/assets/images/logo-black-800.png';
13+
import logoWhite from '~/assets/images/logo-white-800.png';
1314
import horizontalBlue from '~/assets/images/horizontal-blue-1240.png';
1415
import horizontalDark from '~/assets/images/horizontal-dark-1240.png';
1516
import horizontalLight from '~/assets/images/horizontal-light-1240.png';
@@ -57,7 +58,8 @@ const metadata = {
5758
},
5859
{
5960
title: 'Respect Color Usage',
60-
description: 'Use the correct logo variant for your background. Light logos on dark backgrounds, dark logos on light.',
61+
description:
62+
'Use the correct logo variant for your background. Light logos on dark backgrounds, dark logos on light.',
6163
icon: 'tabler:palette',
6264
},
6365
{
@@ -67,12 +69,14 @@ const metadata = {
6769
},
6870
{
6971
title: 'Minimum Size',
70-
description: 'The logo mark should never appear smaller than 32px. The horizontal logo should be at least 120px wide.',
72+
description:
73+
'The logo mark should never appear smaller than 32px. The horizontal logo should be at least 120px wide.',
7174
icon: 'tabler:ruler-2',
7275
},
7376
{
7477
title: 'Attribution',
75-
description: 'When referencing our company, use the full name "Hybrid Cloud Solutions" or "Hybrid Cloud Solutions, LLC."',
78+
description:
79+
'When referencing our company, use the full name "Hybrid Cloud Solutions" or "Hybrid Cloud Solutions, LLC."',
7680
icon: 'tabler:quote',
7781
},
7882
]}
@@ -126,77 +130,79 @@ const metadata = {
126130

127131
<!-- Primary Logos **************** -->
128132

129-
<Content
130-
id="logos"
131-
title="Primary Logos"
132-
subtitle="Stacked logo variations for general use."
133-
image={{
134-
src: logoPrimary,
135-
alt: 'HCS Primary Logo',
136-
}}
137-
>
138-
<Fragment slot="content">
139-
<p class="mb-4">
140-
Our primary logo features the bridge mark icon above the company name. Use the version that provides the best
141-
contrast against your background.
133+
<div class="max-w-6xl mx-auto px-4 py-16">
134+
<div class="text-center mb-10">
135+
<h2 class="text-3xl font-bold">Primary Logos</h2>
136+
<p class="text-muted mt-2">
137+
Stacked logo variations for general use. Use the version that provides the best contrast against your
138+
background.
142139
</p>
143-
<ul class="list-disc list-inside space-y-2 text-muted">
144-
<li><strong>Primary (Blue)</strong> — Default for most uses on light backgrounds</li>
145-
<li><strong>Navy</strong> — For formal or corporate contexts on light backgrounds</li>
146-
<li><strong>Black</strong> — For single-color or print contexts</li>
147-
<li><strong>White</strong> — For use on dark or image backgrounds</li>
148-
</ul>
149-
</Fragment>
150-
</Content>
140+
</div>
141+
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
142+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
143+
<Image src={logoPrimary} alt="HCS Logo Primary" width={200} class="max-h-48 w-auto object-contain" />
144+
<span class="text-sm font-medium">Primary (Blue)</span>
145+
</div>
146+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
147+
<Image src={logoNavy} alt="HCS Logo Navy" width={200} class="max-h-48 w-auto object-contain" />
148+
<span class="text-sm font-medium">Navy</span>
149+
</div>
150+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
151+
<Image src={logoBlack} alt="HCS Logo Black" width={200} class="max-h-48 w-auto object-contain" />
152+
<span class="text-sm font-medium">Black</span>
153+
</div>
154+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-slate-800 dark:bg-slate-900">
155+
<Image src={logoWhite} alt="HCS Logo White" width={200} class="max-h-48 w-auto object-contain" />
156+
<span class="text-sm font-medium text-white">White</span>
157+
</div>
158+
</div>
159+
</div>
151160

152161
<!-- Horizontal Logos **************** -->
153162

154-
<Content
155-
id="horizontal"
156-
title="Horizontal Logos"
157-
subtitle="Wide-format logos for headers, banners, and partner listings."
158-
isReversed
159-
image={{
160-
src: horizontalBlue,
161-
alt: 'HCS Horizontal Logo Blue',
162-
}}
163-
>
164-
<Fragment slot="content">
165-
<p class="mb-4">
166-
The horizontal layout places the bridge mark alongside the company name. Ideal for website headers, email
167-
signatures, and co-branded materials.
168-
</p>
169-
<ul class="list-disc list-inside space-y-2 text-muted">
170-
<li><strong>Blue on White</strong> — Default horizontal variant</li>
171-
<li><strong>Dark</strong> — For light backgrounds in professional settings</li>
172-
<li><strong>Light</strong> — For dark or colored backgrounds</li>
173-
</ul>
174-
</Fragment>
175-
</Content>
163+
<div class="max-w-6xl mx-auto px-4 py-16">
164+
<div class="text-center mb-10">
165+
<h2 class="text-3xl font-bold">Horizontal Logos</h2>
166+
<p class="text-muted mt-2">Wide-format logos for headers, banners, email signatures, and partner listings.</p>
167+
</div>
168+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
169+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
170+
<Image src={horizontalBlue} alt="HCS Horizontal Blue" width={400} class="max-h-24 w-auto object-contain" />
171+
<span class="text-sm font-medium">Blue on White</span>
172+
</div>
173+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
174+
<Image src={horizontalDark} alt="HCS Horizontal Dark" width={400} class="max-h-24 w-auto object-contain" />
175+
<span class="text-sm font-medium">Dark</span>
176+
</div>
177+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-slate-800 dark:bg-slate-900">
178+
<Image src={horizontalLight} alt="HCS Horizontal Light" width={400} class="max-h-24 w-auto object-contain" />
179+
<span class="text-sm font-medium text-white">Light</span>
180+
</div>
181+
</div>
182+
</div>
176183

177184
<!-- Brand Marks **************** -->
178185

179-
<Content
180-
id="marks"
181-
title="Brand Marks"
182-
subtitle="The standalone bridge icon for favicons, avatars, and small formats."
183-
image={{
184-
src: markNavy,
185-
alt: 'HCS Brand Mark Navy',
186-
}}
187-
>
188-
<Fragment slot="content">
189-
<p class="mb-4">
190-
The bridge mark represents our core mission — connecting on-premises infrastructure with the cloud. Use it when
191-
the full logo won't fit or as a recognizable brand element.
192-
</p>
193-
<ul class="list-disc list-inside space-y-2 text-muted">
194-
<li><strong>Primary (Blue)</strong> — Default mark for most uses</li>
195-
<li><strong>Navy</strong> — Formal or corporate contexts</li>
196-
<li><strong>White</strong> — For dark backgrounds</li>
197-
</ul>
198-
</Fragment>
199-
</Content>
186+
<div class="max-w-6xl mx-auto px-4 py-16">
187+
<div class="text-center mb-10">
188+
<h2 class="text-3xl font-bold">Brand Marks</h2>
189+
<p class="text-muted mt-2">The standalone bridge icon for favicons, avatars, and small formats.</p>
190+
</div>
191+
<div class="grid grid-cols-3 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
192+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
193+
<Image src={markPrimary} alt="HCS Mark Primary" width={120} class="max-h-32 w-auto object-contain" />
194+
<span class="text-sm font-medium">Primary</span>
195+
</div>
196+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-gray-50 dark:bg-slate-800">
197+
<Image src={markNavy} alt="HCS Mark Navy" width={120} class="max-h-32 w-auto object-contain" />
198+
<span class="text-sm font-medium">Navy</span>
199+
</div>
200+
<div class="flex flex-col items-center gap-3 p-6 rounded-xl bg-slate-800 dark:bg-slate-900">
201+
<Image src={markWhite} alt="HCS Mark White" width={120} class="max-h-32 w-auto object-contain" />
202+
<span class="text-sm font-medium text-white">White</span>
203+
</div>
204+
</div>
205+
</div>
200206

201207
<!-- Social / OG Image **************** -->
202208

0 commit comments

Comments
 (0)