Skip to content

Commit a76f851

Browse files
kristopherjturnerkristopherjturner
committed
Add brand assets page and footer link
1 parent 8258de4 commit a76f851

File tree

2 files changed

+239
-0
lines changed

2 files changed

+239
-0
lines changed

‎src/navigation.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const footerData = {
3838
{ text: 'About', href: getPermalink('/about') },
3939
{ text: 'Certifications', href: getPermalink('/certifications') },
4040
{ text: 'Contact', href: getPermalink('/contact') },
41+
{ text: 'Brand Assets', href: getPermalink('/brand') },
4142
{ text: 'Legal', href: getPermalink('/legal') },
4243
],
4344
},

‎src/pages/brand.astro‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
---
2+
import Layout from '~/layouts/PageLayout.astro';
3+
4+
import Hero from '~/components/widgets/Hero.astro';
5+
import Content from '~/components/widgets/Content.astro';
6+
import Features from '~/components/widgets/Features.astro';
7+
import CallToAction from '~/components/widgets/CallToAction.astro';
8+
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';
13+
import horizontalBlue from '~/assets/images/horizontal-blue-1240.png';
14+
import horizontalDark from '~/assets/images/horizontal-dark-1240.png';
15+
import horizontalLight from '~/assets/images/horizontal-light-1240.png';
16+
import markPrimary from '~/assets/images/mark-primary-400.png';
17+
import markNavy from '~/assets/images/mark-navy-400.png';
18+
import markWhite from '~/assets/images/mark-white-400.png';
19+
import ogImage from '~/assets/images/og-image-1200x630.png';
20+
21+
const metadata = {
22+
title: 'Brand Assets',
23+
};
24+
---
25+
26+
<Layout metadata={metadata}>
27+
<!-- Hero Widget ******************* -->
28+
29+
<Hero>
30+
<Fragment slot="title">
31+
Brand <span class="text-accent dark:text-white">Assets</span>
32+
</Fragment>
33+
34+
<Fragment slot="subtitle">
35+
Everything you need to represent Hybrid Cloud Solutions correctly. Download logos, marks, and brand guidelines for
36+
use in presentations, events, and partner materials.
37+
</Fragment>
38+
</Hero>
39+
40+
<!-- Brand Guidelines **************** -->
41+
42+
<Features
43+
id="guidelines"
44+
title="Brand Guidelines"
45+
subtitle="Please follow these guidelines when using our brand assets."
46+
columns={3}
47+
items={[
48+
{
49+
title: 'Use Our Official Assets',
50+
description: 'Always use the logos and marks provided on this page. Do not recreate or modify them.',
51+
icon: 'tabler:check',
52+
},
53+
{
54+
title: 'Maintain Clear Space',
55+
description: 'Keep adequate spacing around our logo. Do not crowd it with other elements.',
56+
icon: 'tabler:spacing-horizontal',
57+
},
58+
{
59+
title: 'Respect Color Usage',
60+
description: 'Use the correct logo variant for your background. Light logos on dark backgrounds, dark logos on light.',
61+
icon: 'tabler:palette',
62+
},
63+
{
64+
title: 'Do Not Alter',
65+
description: 'Do not rotate, stretch, recolor, add effects to, or otherwise modify our logos.',
66+
icon: 'tabler:ban',
67+
},
68+
{
69+
title: 'Minimum Size',
70+
description: 'The logo mark should never appear smaller than 32px. The horizontal logo should be at least 120px wide.',
71+
icon: 'tabler:ruler-2',
72+
},
73+
{
74+
title: 'Attribution',
75+
description: 'When referencing our company, use the full name "Hybrid Cloud Solutions" or "Hybrid Cloud Solutions, LLC."',
76+
icon: 'tabler:quote',
77+
},
78+
]}
79+
/>
80+
81+
<!-- Brand Colors **************** -->
82+
83+
<Content
84+
id="colors"
85+
title="Brand Colors"
86+
subtitle="Our primary color palette."
87+
isReversed
88+
image={{
89+
src: markPrimary,
90+
alt: 'HCS Brand Mark',
91+
}}
92+
>
93+
<Fragment slot="content">
94+
<div class="space-y-4">
95+
<div class="flex items-center gap-4">
96+
<div class="w-12 h-12 rounded-lg" style="background-color: #0EA5E9;"></div>
97+
<div>
98+
<p class="font-semibold">Primary Blue</p>
99+
<p class="text-sm text-muted">#0EA5E9 · rgb(14, 165, 233)</p>
100+
</div>
101+
</div>
102+
<div class="flex items-center gap-4">
103+
<div class="w-12 h-12 rounded-lg" style="background-color: #0C4A6E;"></div>
104+
<div>
105+
<p class="font-semibold">Navy</p>
106+
<p class="text-sm text-muted">#0C4A6E · rgb(12, 74, 110)</p>
107+
</div>
108+
</div>
109+
<div class="flex items-center gap-4">
110+
<div class="w-12 h-12 rounded-lg" style="background-color: #0F172A;"></div>
111+
<div>
112+
<p class="font-semibold">Dark Slate</p>
113+
<p class="text-sm text-muted">#0F172A · rgb(15, 23, 42)</p>
114+
</div>
115+
</div>
116+
<div class="flex items-center gap-4">
117+
<div class="w-12 h-12 rounded-lg border border-gray-200" style="background-color: #FFFFFF;"></div>
118+
<div>
119+
<p class="font-semibold">White</p>
120+
<p class="text-sm text-muted">#FFFFFF · rgb(255, 255, 255)</p>
121+
</div>
122+
</div>
123+
</div>
124+
</Fragment>
125+
</Content>
126+
127+
<!-- Primary Logos **************** -->
128+
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.
142+
</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>
151+
152+
<!-- Horizontal Logos **************** -->
153+
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>
176+
177+
<!-- Brand Marks **************** -->
178+
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>
200+
201+
<!-- Social / OG Image **************** -->
202+
203+
<Content
204+
id="social"
205+
title="Social Media & Open Graph"
206+
subtitle="Pre-formatted image for social sharing and link previews."
207+
isReversed
208+
image={{
209+
src: ogImage,
210+
alt: 'HCS Open Graph Image',
211+
}}
212+
>
213+
<Fragment slot="content">
214+
<p class="mb-4">
215+
Use this 1200×630 image for Open Graph tags, Twitter cards, and social media link previews. It's pre-sized for
216+
optimal display across platforms.
217+
</p>
218+
</Fragment>
219+
</Content>
220+
221+
<!-- CTA **************** -->
222+
223+
<CallToAction
224+
actions={[
225+
{
226+
variant: 'primary',
227+
text: 'Contact Us',
228+
href: '/contact',
229+
icon: 'tabler:mail',
230+
},
231+
]}
232+
>
233+
<Fragment slot="title">Need Something Custom?</Fragment>
234+
<Fragment slot="subtitle">
235+
If you need a specific format, size, or co-branded version of our assets, reach out and we'll get it to you.
236+
</Fragment>
237+
</CallToAction>
238+
</Layout>

0 commit comments

Comments
 (0)