Skip to content

Commit 9daaf64

Browse files
AriaEdoAriaEdo
authored
Merge pull request #349 from datum-cloud/feat/brand-design
2 parents 21ea2aa + 3dfe4d8 commit 9daaf64

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1381
-83
lines changed

‎astro.config.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export default defineConfig({
2323
adapter: node({
2424
mode: 'standalone',
2525
}),
26+
image: {
27+
layout: 'constrained',
28+
},
2629
integrations: [
2730
robotsTxt({
2831
sitemap: true,

‎src/components/Header.astro‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
---
22
import Nav from '@components/Nav.astro';
3+
import type { HeroProps } from '@/src/types/common';
4+
5+
const { class: className } = Astro.props as HeroProps;
36
---
47

5-
<header class="bg-blackberry-800 shadow-sm">
6-
<div class="container mx-auto px-4">
7-
<div class="flex items-center justify-center">
8-
<div class="w-full max-w-7xl">
9-
<Nav location="header" />
10-
</div>
11-
</div>
12-
</div>
13-
</header>
8+
<section class:list={['hero--main', className]}>
9+
<Nav />
10+
</section>

‎src/components/NavBrand.astro‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
// src/components/NavBrand.astro
3+
import navigation from '@data/navigation.json';
4+
import type { NavData, NavFooterSection, NavItem } from '@/src/types/navigation';
5+
6+
const { currentPath } = Astro.props;
7+
8+
// Type-safe navigation data
9+
const navData = navigation as NavData;
10+
const navBrand = navData.brand;
11+
---
12+
13+
<nav class="brand-nav">
14+
{
15+
navBrand &&
16+
navBrand.map((section: NavFooterSection) => (
17+
<div class="brand-nav-section">
18+
<ul class="brand-nav-items">
19+
{section.items?.map((item: NavItem) => {
20+
const isActive = currentPath === item.href;
21+
return (
22+
<li class="brand-nav-item">
23+
<a
24+
href={item.href}
25+
class={`brand-nav-link ${isActive ? 'active' : ''}`}
26+
data-astro-prefetch="hover"
27+
>
28+
{item.text}
29+
</a>
30+
</li>
31+
);
32+
})}
33+
</ul>
34+
</div>
35+
))
36+
}
37+
</nav>

‎src/components/brand/BrandCard.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
// src/components/brand/BrandCard.astro
3+
import type { BrandCardProps } from '@/src/types/brand';
4+
5+
const { description, url, title }: BrandCardProps = Astro.props;
6+
---
7+
8+
<div class="brand-card">
9+
<div class="brand-card--image"><slot name="image" /></div>
10+
11+
<div class="brand-card--content">
12+
{title && <div class="brand-card--title">{title}</div>}
13+
14+
{description && <p class="brand-card--description">{description}</p>}
15+
16+
<slot />
17+
</div>
18+
19+
{
20+
url && (
21+
<a href={url} class="brand-card--link" title={title}>
22+
{title}
23+
</a>
24+
)
25+
}
26+
</div>

‎src/components/brand/BrandCardImage.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
// src/components/brand/BrandCard.astro
3+
import type { BrandCardProps } from '@/src/types/brand';
4+
5+
const { url, title }: BrandCardProps = Astro.props;
6+
---
7+
8+
<div class="brand-card-image">
9+
<div class="brand-card-image--content">
10+
<slot />
11+
</div>
12+
13+
{
14+
url && (
15+
<a href={url} class="brand-card-image--link" title={title}>
16+
{title}
17+
</a>
18+
)
19+
}
20+
</div>

‎src/components/brand/BrandCardText.astro‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
// src/components/brand/BrandCard.astro
3+
import type { BrandCardProps } from '@/src/types/brand';
4+
5+
const { url, title }: BrandCardProps = Astro.props;
6+
---
7+
8+
<div class="brand-card-text">
9+
<div class="brand-card-text--content">
10+
{title && <div class="brand-card-text--title">{title}</div>}
11+
12+
<slot />
13+
</div>
14+
15+
{
16+
url && (
17+
<a href={url} class="brand-card-text--link" title={title}>
18+
{title}
19+
</a>
20+
)
21+
}
22+
</div>

‎src/components/brand/ColorPalette.astro‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
// src/components/brand/ColorPalette.astro
3+
interface ColorSwatch {
4+
name: string;
5+
shade: string;
6+
hex: string;
7+
}
8+
9+
interface ColorGroup {
10+
name: string;
11+
swatches: ColorSwatch[];
12+
}
13+
14+
const colorGroups: ColorGroup[] = [
15+
{
16+
name: 'Midnight Fjord',
17+
swatches: [{ name: 'Midnight Fjord', shade: '900', hex: '#0C1D31' }],
18+
},
19+
{
20+
name: 'Aurora Moss',
21+
swatches: [{ name: 'Aurora Moss', shade: '900', hex: '#E6F59F' }],
22+
},
23+
{
24+
name: 'Blush Quartz',
25+
swatches: [{ name: 'Blush Quartz', shade: '900', hex: '#ECD0D0' }],
26+
},
27+
{
28+
name: 'Canyon Clay',
29+
swatches: [{ name: 'Canyon Clay', shade: '900', hex: '#BF9595' }],
30+
},
31+
{
32+
name: 'Pine Forge',
33+
swatches: [{ name: 'Pine Forge', shade: '900', hex: '#4D6356' }],
34+
},
35+
{
36+
name: '',
37+
swatches: [],
38+
},
39+
{
40+
name: 'Glacier Mist',
41+
swatches: [
42+
{ name: 'Glacier Mist', shade: '900', hex: '#E8E7E4' },
43+
{ name: 'Glacier Mist', shade: '800', hex: '#EFEFED' },
44+
{ name: 'Glacier Mist', shade: '700', hex: '#F6F6F5' },
45+
],
46+
},
47+
];
48+
---
49+
50+
<div class="color-palette">
51+
{
52+
colorGroups
53+
.filter((group) => group.swatches)
54+
.map((group) => (
55+
<div class="color-group">
56+
{group.name && <h3 class="color-group--name">{group.name}</h3>}
57+
<div class="color-group--swatches">
58+
{group.swatches
59+
.filter((swatch) => swatch.hex && swatch.shade)
60+
.map((swatch) => (
61+
<div class="color-swatch">
62+
<div class="color-swatch--preview" style={`background-color: ${swatch.hex}`} />
63+
<div class="color-swatch--info">
64+
{swatch.shade && <span class="color-swatch--shade">{swatch.shade}</span>}
65+
{swatch.hex && <span class="color-swatch--hex">{swatch.hex}</span>}
66+
</div>
67+
</div>
68+
))}
69+
</div>
70+
</div>
71+
))
72+
}
73+
</div>

‎src/content/pages/brand/assets/color.png‎

4.27 KB
Loading

‎src/content/pages/brand/assets/colors.png‎

28.4 KB
Loading

‎src/content/pages/brand/assets/gallery.png‎

18.4 KB
Loading

0 commit comments

Comments
 (0)