Skip to content

Commit dba43c1

Browse files
berezinantberezinant
committed
KTL-1237 feat: added annual report block markup
1 parent 75ffed7 commit dba43c1

File tree

7 files changed

+180
-0
lines changed

7 files changed

+180
-0
lines changed

‎src/components/AnnualReport/annualReport.module.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
.report {
2+
margin: var(--ktl-box-page-l) 0;
3+
padding: var(--ktl-box-section-l) 0;
4+
background: var(--ktl-light-grey);
5+
border-top: 1px solid var(--rs-color-black-t20);
6+
border-bottom: 1px solid var(--rs-color-black-t20);
7+
8+
@media (--ktl-tl) {
9+
margin: var(--ktl-box-page-m) 0;
10+
}
11+
12+
@media (--ktl-mm) {
13+
margin: var(--ktl-box-section-l) 0;
14+
}
15+
}
16+
17+
.slides {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
22+
@media (--ktl-tl) {
23+
flex-direction: column;
24+
}
25+
}
26+
27+
.imageContainer {
28+
position: relative;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
width: 416px;
33+
height: 276px;
34+
35+
@media (--ktl-tl) {
36+
margin: var(--ktl-box-section-s) 0 var(--ktl-box-section-s) -50px;
37+
order: 2;
38+
}
39+
40+
@media (--ktl-mm) {
41+
margin: var(--ktl-box-section-s) 0;
42+
width: 288px;
43+
height: 176px;
44+
}
45+
}
46+
47+
.imageContainer:before {
48+
content: ' ';
49+
position: absolute;
50+
top: -49px;
51+
left: 45px;
52+
width: 374px;
53+
height: 374px;
54+
border-radius: 50%;
55+
opacity: 0.5;
56+
background: radial-gradient(50% 50% at 50% 50%, rgba(51, 0, 255, 0.5) 0%, rgba(232, 232, 232, 0.00) 100%);
57+
58+
@media (--ktl-mm) {
59+
top: -49px;
60+
left: 0;
61+
width: 300px;
62+
height: 280px;
63+
}
64+
}
65+
66+
.image {
67+
position: absolute;
68+
69+
@media (--ktl-mm) {
70+
width: 256px;
71+
height: 144px;
72+
}
73+
}
74+
75+
.image:nth-child(1) {
76+
top: 24px;
77+
left: 48px;
78+
79+
@media (--ktl-mm) {
80+
top: 0;
81+
left: 0;
82+
}
83+
}
84+
85+
.image:nth-child(2) {
86+
top: 48px;
87+
left: 72px;
88+
89+
@media (--ktl-mm) {
90+
top: 16px;
91+
left: 16px;
92+
}
93+
}
94+
95+
.image:nth-child(3) {
96+
top: 72px;
97+
left: 96px;
98+
99+
@media (--ktl-mm) {
100+
top: 32px;
101+
left: 32px;
102+
}
103+
}
104+
105+
.textContainer {
106+
display: flex;
107+
flex-direction: column;
108+
align-items: center;
109+
gap: var(--ktl-box-section-m);
110+
width: 572px;
111+
padding: var(--ktl-box-block-s) var(--ktl-box-section-s);
112+
text-align: center;
113+
114+
@media (--ktl-tl) {
115+
position: relative;
116+
padding: 0;
117+
z-index: 1;
118+
}
119+
}
120+
121+
.button {
122+
display: block;
123+
@media (--ktl-tl) {
124+
display: none;
125+
}
126+
}
127+
128+
.buttonMobile {
129+
display: none;
130+
@media (--ktl-tl) {
131+
display: block;
132+
order: 3;
133+
}
134+
}
135+

‎src/components/AnnualReport/assets/1-kotlin-results.png

28.4 KB
Loading

‎src/components/AnnualReport/assets/2-mission-recap.png

133 KB
Loading

‎src/components/AnnualReport/assets/3-foundation-results.png

72.5 KB
Loading

‎src/components/AnnualReport/index.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as styles from "./annualReport.module.css";
2+
import report1KotlinResults from "./assets/1-kotlin-results.png";
3+
import report2MissionRecap from "./assets/2-mission-recap.png";
4+
import report3FoundationResults from "./assets/3-foundation-results.png";
5+
import cn from "classnames";
6+
import Button from "@rescui/button";
7+
8+
export function AnnualReport() {
9+
const renderButton = (className: string) => (
10+
<Button
11+
className={className}
12+
mode="outline"
13+
size="l"
14+
// TODO: Update link to the actual report
15+
href="/kotlin-foundation-presentation.pdf"
16+
target="_blank"
17+
>
18+
View annual report
19+
</Button>
20+
);
21+
return (
22+
<div className={styles.report}>
23+
<section className={cn("ktl-layout ktl-layout--center", styles.slides)}>
24+
<div className={styles.imageContainer}>
25+
<img src={report3FoundationResults} alt="Foundation results" className={styles.image} width={320}
26+
height={180}/>
27+
<img src={report2MissionRecap} alt="Misson recap" className={styles.image} width={320}
28+
height={180}/>
29+
<img src={report1KotlinResults} alt="Kotlin results" className={styles.image} width={320}
30+
height={180}/>
31+
</div>
32+
<div className={styles.textContainer}>
33+
<h2 className="ktf-h2 ktf-h3--tl">Explore Kotlin Foundation <br/>highlights from 2023</h2>
34+
{renderButton(styles.button)}
35+
</div>
36+
{renderButton(styles.buttonMobile)}
37+
</section>
38+
</div>
39+
);
40+
}

‎src/components/Markdown/CustomTags.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ export { Grants, GrantsAction, GrantsTitle } from '../Grants';
1111
export { PagePreview } from '../PagePreview';
1212
export { PairedBlock } from '../PairedBlock';
1313
export { LatestNews } from '../LatestNews';
14+
export { AnnualReport } from '../AnnualReport';

‎src/pages/index.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ import joinPreviewUrl from "../images/join-preview.png";
5858
/>
5959
</Layout>
6060

61+
<Layout>
62+
<AnnualReport />
63+
</Layout>
64+
6165
<Layout>
6266
<LatestNews />
6367
</Layout>

0 commit comments

Comments
 (0)