Skip to content

Commit e15c97b

Browse files
mickaelalvsmickaelalvs
committed
feat: enhance press kit with new logo preview component & description
1 parent 07a2ee8 commit e15c97b

7 files changed

Lines changed: 136 additions & 24 deletions

File tree

‎app/presse/PressKit.module.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@
88
margin-top: 3rem;
99
}
1010

11+
.descriptionBlock {
12+
display: flex;
13+
flex-direction: column;
14+
gap: 0.75rem;
15+
color: var(--font-color-default);
16+
max-width: 720px;
17+
line-height: 1.7;
18+
margin-top: 1rem;
19+
}
20+
1121
.logoGrid {
1222
display: grid;
1323
grid-template-columns: 1fr;
@@ -22,8 +32,9 @@
2232
}
2333

2434
.colorGrid {
35+
display: flex;
36+
gap: 1.5rem;
2537
margin-top: 1rem;
26-
max-width: 280px;
2738
}
2839

2940
.guidelineColumn {

‎app/presse/page.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { Metadata } from 'next';
22
import { Heading } from '../../modules/atoms/heading/Heading';
33
import { LogoCard } from '../../modules/press-kit/LogoCard';
44
import { ColorSwatch } from '../../modules/press-kit/ColorSwatch';
5-
import { logos, brandColor, guidelines } from '../../data/press-kit';
5+
import { logos, brandColors, guidelines } from '../../data/press-kit';
66
import styles from './PressKit.module.css';
77

88
const title = 'LyonJS | Kit Presse';
99
const description =
10-
"Retrouvez les logos, couleurs et consignes d'utilisation de la marque LyonJS pour vos supports de communication.";
10+
"Retrouvez les logos, couleurs, description et consignes d'utilisation de la marque LyonJS pour vos supports de communication.";
1111

1212
export const metadata: Metadata = {
1313
title,
@@ -27,10 +27,24 @@ export default function PressePage() {
2727
<main>
2828
<Heading Component="h1">Kit Presse</Heading>
2929
<p className={styles.intro}>
30-
Retrouvez ici les ressources visuelles de LyonJS&nbsp;: logos, couleur et consignes d&apos;utilisation.
30+
Retrouvez ici les ressources visuelles de LyonJS&nbsp;: logos, couleurs, description et consignes d&apos;utilisation.
3131
N&apos;hésitez pas à les utiliser pour vos articles, présentations ou supports de communication.
3232
</p>
3333

34+
<section className={styles.section}>
35+
<Heading Component="h2">A propos du LyonJS</Heading>
36+
<div className={styles.descriptionBlock}>
37+
<p>
38+
LyonJS est la communauté lyonnaise autour de JavaScript et de son écosystème. Elle organise des meetups
39+
mensuels ouverts et gratuits dédiés aux technologies Web et JavaScript/TypeScript.
40+
</p>
41+
<p>
42+
Chaque événement propose des conférences suivies d&apos;un moment convivial pour
43+
permettre aux participants d&apos;échanger et de poursuivre les discussions.
44+
</p>
45+
</div>
46+
</section>
47+
3448
<section className={styles.section}>
3549
<Heading Component="h2">Logos</Heading>
3650
<div className={styles.logoGrid}>
@@ -41,9 +55,11 @@ export default function PressePage() {
4155
</section>
4256

4357
<section className={styles.section}>
44-
<Heading Component="h2">Couleur</Heading>
58+
<Heading Component="h2">Couleurs</Heading>
4559
<div className={styles.colorGrid}>
46-
<ColorSwatch color={brandColor} />
60+
{brandColors.map((color) => (
61+
<ColorSwatch key={color.hex} color={color} />
62+
))}
4763
</div>
4864
</section>
4965

‎data/press-kit.ts‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,22 @@ export const logos: LogoAsset[] = [
5555
},
5656
];
5757

58-
export const brandColor: BrandColor = {
59-
name: 'Jaune LyonJS',
60-
description: 'Couleur principale de la marque',
61-
hex: '#EDD533',
62-
hsl: 'hsl(52, 83%, 62%)',
63-
cssVariable: '--yellow-0',
64-
};
58+
export const brandColors: BrandColor[] = [
59+
{
60+
name: 'Jaune LyonJS',
61+
description: 'Couleur principale de la marque',
62+
hex: '#EDD533',
63+
hsl: 'hsl(52, 83%, 62%)',
64+
cssVariable: '--yellow-0',
65+
},
66+
{
67+
name: 'Noir LyonJS',
68+
description: 'Couleur secondaire de la marque',
69+
hex: '#323330',
70+
hsl: 'hsl(60, 5%, 19%)',
71+
cssVariable: '--black-0',
72+
},
73+
];
6574

6675
export const guidelines: GuidelineItem[] = [
6776
{ text: 'Utiliser le logo sur un fond sombre pour un meilleur contraste' },

‎modules/press-kit/LogoCard.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import Image from 'next/image';
21
import type { LogoAsset, LogoVariant } from '../../data/press-kit';
32
import { CopyButton } from './CopyButton';
43
import { DownloadButton } from './DownloadButton';
4+
import { LogoPreview } from './LogoPreview';
55
import styles from './PressKit.module.css';
66

77
function groupVariants(variants: LogoVariant[]) {
@@ -28,11 +28,7 @@ export function LogoCard({ logo }: { logo: LogoAsset }) {
2828

2929
return (
3030
<div className={styles.logoCard}>
31-
{preview?.previewPath && (
32-
<div className={styles.logoPreview}>
33-
<Image src={preview.previewPath} alt={logo.name} width={200} height={100} style={{ objectFit: 'contain' }} />
34-
</div>
35-
)}
31+
{preview?.previewPath && <LogoPreview src={preview.previewPath} alt={logo.name} />}
3632
<div className={styles.logoInfo}>
3733
<div className={styles.logoName}>{logo.name}</div>
3834
<div className={styles.logoDescription}>{logo.description}</div>

‎modules/press-kit/LogoPreview.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use client';
2+
3+
import Image from 'next/image';
4+
import { useState } from 'react';
5+
import styles from './PressKit.module.css';
6+
7+
const backgrounds = [
8+
{ label: 'Damier', className: styles.previewCheckerboard },
9+
{ label: 'Noir', className: styles.previewBlack },
10+
{ label: 'Blanc', className: styles.previewWhite },
11+
] as const;
12+
13+
export function LogoPreview({ src, alt }: { src: string; alt: string }) {
14+
const [backgroundIndex, setBackgroundIndex] = useState(0);
15+
16+
return (
17+
<div className={`${styles.logoPreview} ${backgrounds[backgroundIndex].className}`}>
18+
<Image src={src} alt={alt} width={200} height={100} style={{ objectFit: 'contain' }} />
19+
<div className={styles.backgroundToggleGroup}>
20+
{backgrounds.map((background, index) => (
21+
<button
22+
key={background.label}
23+
className={`${styles.backgroundToggle} ${index === backgroundIndex ? styles.backgroundToggleActive : ''}`}
24+
onClick={() => setBackgroundIndex(index)}
25+
aria-label={`Fond ${background.label}`}
26+
aria-pressed={index === backgroundIndex}
27+
>
28+
{background.label}
29+
</button>
30+
))}
31+
</div>
32+
</div>
33+
);
34+
}

‎modules/press-kit/PressKit.module.css‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,56 @@
1111
}
1212

1313
.logoPreview {
14+
position: relative;
1415
display: flex;
1516
align-items: center;
1617
justify-content: center;
1718
padding: 2rem;
18-
background: repeating-conic-gradient(hsl(0 0% 90%) 0% 25%, hsl(0 0% 100%) 0% 50%) 0 0 / 20px 20px;
1919
height: 200px;
2020
}
2121

22+
.previewCheckerboard {
23+
background: repeating-conic-gradient(hsl(0 0% 90%) 0% 25%, hsl(0 0% 100%) 0% 50%) 0 0 / 20px 20px;
24+
}
25+
26+
.previewBlack {
27+
background: #323330;
28+
}
29+
30+
.previewWhite {
31+
background: #ffffff;
32+
}
33+
34+
.backgroundToggleGroup {
35+
position: absolute;
36+
bottom: 0.5rem;
37+
right: 0.5rem;
38+
display: flex;
39+
gap: 0.25rem;
40+
background: hsl(0 0% 0% / 0.45);
41+
border-radius: 0.375rem;
42+
padding: 0.2rem;
43+
}
44+
45+
.backgroundToggle {
46+
all: unset;
47+
font-size: 0.6875rem;
48+
padding: 0.2rem 0.5rem;
49+
border-radius: 0.25rem;
50+
color: hsl(0 0% 100% / 0.7);
51+
cursor: pointer;
52+
transition: background-color 100ms, color 100ms;
53+
}
54+
55+
.backgroundToggle:hover {
56+
color: #fff;
57+
}
58+
59+
.backgroundToggleActive {
60+
background: hsl(0 0% 100% / 0.2);
61+
color: #fff;
62+
}
63+
2264
.logoInfo {
2365
flex: 1;
2466
padding: 1rem 1.25rem;
@@ -39,12 +81,15 @@
3981

4082
.variantGroup {
4183
margin-bottom: 0.5rem;
84+
margin-top: 1rem;
4285
}
4386

4487
.variantGroupLabel {
45-
font-size: 0.75rem;
46-
font-weight: 500;
47-
color: var(--font-color-default);
88+
font-size: 1rem;
89+
font-weight: 700;
90+
text-transform: uppercase;
91+
letter-spacing: 0.05em;
92+
color: var(--font-color-strong);
4893
margin-bottom: 0.25rem;
4994
}
5095

@@ -148,4 +193,5 @@
148193
font-size: 0.75rem;
149194
font-family: monospace;
150195
color: var(--font-color-default);
196+
gap: 1rem;
151197
}

‎next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3-
import './dist/types/routes.d.ts';
3+
import "./dist/dev/types/routes.d.ts";
44

55
// NOTE: This file should not be edited
66
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

0 commit comments

Comments
 (0)