Match Home, top nav, hero, and logo wall to the current marketing frames #88

Merged
an.di merged 3 commits from adilallo/feature/CR-226-home-and-nav into main 2026-11-03 23:29:05 +00:00
13 changed files with 68 additions and 74 deletions
Showing only changes of commit ea85be2287 - Show all commits

No files matched your search

+3
View File
@@ -50,6 +50,9 @@ npm-cache/
# Marketing book cover (raster; see docs/guides/static-assets.md)
!public/assets/marketing/community-rules-cover.png
# Header Create-rule portraits
!public/assets/marketing/avatar-*.png
# Open Graph 1200×630 share images (`npm run generate:og-images`)
!public/assets/marketing/og-image.png
!public/assets/marketing/og-image-templates.png
+3 -3
View File
@@ -123,19 +123,19 @@ export default function RootLayout({ children }: { children: ReactNode }) {
rel="preload"
as="image"
href={getAssetPath(ASSETS.AVATAR_1)}
type="image/svg+xml"
type="image/png"
/>
<link
rel="preload"
as="image"
href={getAssetPath(ASSETS.AVATAR_2)}
type="image/svg+xml"
type="image/png"
/>
<link
rel="preload"
as="image"
href={getAssetPath(ASSETS.AVATAR_3)}
type="image/svg+xml"
type="image/png"
/>
</head>
<body
+1 -1
View File
@@ -65,7 +65,7 @@ stage. Raster → SVG conversion is tracked in
| `marketing/feature-*.svg` (×4) | Mini cards | Panel art (`support`, `exercises`, `guidance`, `tools`) |
| `icons/icon-{git-branch,arrow-left-right,door-open,message-square-share}.svg` | FeatureGrid | Card glyphs from Figma Section/Feature-Grid (18632:10668) |
| `marketing/section-number-*.svg` (×3) | SectionNumber | **Done** — SVG |
| `marketing/avatar-*.svg` (×3) | Avatar / ASSETS | **Done** — SVG |
| `marketing/avatar-*.png` (×3) | Avatar / ASSETS | **Done** — PNG portraits (not SVG wrappers) |
| `marketing/hero-image.png` | HeroBanner | **Design review** — likely keep raster |
| `marketing/og-image.png` | Default `og:image` / `twitter:image` | **Done** — 1200×630 hero crop (`ASSETS.OG_IMAGE`; `npm run generate:og-images`) |
| `marketing/og-image-templates.png` | Templates `og:image` | **Done** — 1200×630 (`ASSETS.OG_IMAGE_TEMPLATES`) |
+3 -3
View File
@@ -228,9 +228,9 @@ export const ASSETS = {
LOGO: "assets/logos/community-rule.svg",
// Avatars
AVATAR_1: "assets/marketing/avatar-1.svg",
AVATAR_2: "assets/marketing/avatar-2.svg",
AVATAR_3: "assets/marketing/avatar-3.svg",
AVATAR_1: "assets/marketing/avatar-1.png",
AVATAR_2: "assets/marketing/avatar-2.png",
AVATAR_3: "assets/marketing/avatar-3.png",
// Social media
BLUESKY_LOGO: "assets/logos/bluesky.svg",
Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="64" height="64" href="data:image/png;base64,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"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="64" height="64" href="data:image/png;base64,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 truncated
</svg>

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="64" height="64" href="data:image/png;base64,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 truncated
</svg>

Before

Width:  |  Height:  |  Size: 6.3 KiB

+17 -17
View File
@@ -55,7 +55,7 @@ export default {
export const Default = {
args: {
src: "assets/marketing/avatar-1.svg",
src: "assets/marketing/avatar-1.png",
alt: "User Avatar",
size: "medium",
},
@@ -63,7 +63,7 @@ export const Default = {
export const Sizes = {
args: {
src: "assets/marketing/avatar-1.svg",
src: "assets/marketing/avatar-1.png",
alt: "User Avatar",
},
render: (args) => (
@@ -146,9 +146,9 @@ export const DifferentAvatars = {
render: (args) => (
<div className="space-y-4">
<div className="space-x-4">
<Avatar {...args} src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar {...args} src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar {...args} src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar {...args} src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar {...args} src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar {...args} src="assets/marketing/avatar-3.png" alt="User 3" />
</div>
</div>
),
@@ -168,36 +168,36 @@ export const AllSizesWithDifferentAvatars = {
<div>
<h3 className="text-white font-semibold mb-3">Small Size</h3>
<div className="space-x-4">
<Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="small" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="small" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="small" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="small" src="assets/marketing/avatar-3.png" alt="User 3" />
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
<div className="space-x-4">
<Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="medium" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="medium" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="medium" src="assets/marketing/avatar-3.png" alt="User 3" />
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Large Size</h3>
<div className="space-x-4">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
<div className="space-x-4">
<Avatar size="xlarge" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="xlarge" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="xlarge" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="xlarge" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="xlarge" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="xlarge" src="assets/marketing/avatar-3.png" alt="User 3" />
</div>
</div>
</div>
+38 -38
View File
@@ -33,9 +33,9 @@ export const Default = {
},
render: (args) => (
<AvatarContainer {...args}>
<Avatar size={args.size} src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size={args.size} src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size={args.size} src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size={args.size} src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size={args.size} src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size={args.size} src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
),
};
@@ -47,36 +47,36 @@ export const Sizes = {
<div>
<h3 className="text-white font-semibold mb-3">Small Size</h3>
<AvatarContainer size="small">
<Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="small" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="small" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="small" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="small" src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
<AvatarContainer size="medium">
<Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="medium" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="medium" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="medium" src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Large Size</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
<AvatarContainer size="xlarge">
<Avatar size="xlarge" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="xlarge" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="xlarge" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="xlarge" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="xlarge" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="xlarge" src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
</div>
</div>
@@ -98,38 +98,38 @@ export const DifferentGroupSizes = {
<div>
<h3 className="text-white font-semibold mb-3">2 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">3 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">4 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 4" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 4" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">5 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 4" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 5" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 4" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 5" />
</AvatarContainer>
</div>
</div>
@@ -158,9 +158,9 @@ export const InContext = {
<h3 className="text-white font-semibold mb-4">Team Members</h3>
<div className="flex items-center space-x-4">
<AvatarContainer size="medium">
<Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="medium" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="medium" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="medium" src="assets/marketing/avatar-3.png" alt="User 3" />
</AvatarContainer>
<span className="text-white">3 team members</span>
</div>
@@ -172,10 +172,10 @@ export const InContext = {
</h3>
<div className="flex items-center space-x-4">
<AvatarContainer size="large">
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 4" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
<Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
<Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 4" />
</AvatarContainer>
<span className="text-white">4 contributors</span>
</div>
@@ -185,8 +185,8 @@ export const InContext = {
<h3 className="text-white font-semibold mb-4">Small Team</h3>
<div className="flex items-center space-x-4">
<AvatarContainer size="small">
<Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
<Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
<Avatar size="small" src="assets/marketing/avatar-1.png" alt="User 1" />
<Avatar size="small" src="assets/marketing/avatar-2.png" alt="User 2" />
</AvatarContainer>
<span className="text-white">2 members</span>
</div>
+3 -3
View File
@@ -15,7 +15,7 @@ import {
type AvatarProps = React.ComponentProps<typeof Avatar>;
const baseProps: AvatarProps = {
src: "/assets/marketing/avatar-1.svg",
src: "/assets/marketing/avatar-1.png",
alt: "User avatar",
size: "medium",
};
@@ -46,7 +46,7 @@ describe("Avatar (behavioral tests)", () => {
it("does not show initials while the image is loading", () => {
render(
<Avatar
src="/assets/marketing/avatar-1.svg"
src="/assets/marketing/avatar-1.png"
alt="Ada Lovelace"
initials="AL"
/>,
@@ -57,7 +57,7 @@ describe("Avatar (behavioral tests)", () => {
it("applies the small photo ring after the image loads", () => {
const { container } = render(
<Avatar
src="/assets/marketing/avatar-1.svg"
src="/assets/marketing/avatar-1.png"
alt="User avatar"
size="small"
/>,