Skip to content

Commit 7d68396

Browse files
felixwidjajafelixwidjaja
authored
Merge pull request #458 from datum-cloud/phasetwo/about
feat: about page
2 parents ba1ffec + 40c5a75 commit 7d68396

File tree

11 files changed

+117
-114
lines changed

11 files changed

+117
-114
lines changed

‎src/components/about/OurPurpose.astro‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
---
22
import { Image } from 'astro:assets';
33
import { marked } from 'marked';
4-
import ImageOurPurpose from '@v1/assets/images/our-pupose-illustration.png';
4+
import Illustration from '@content/about/images/illustration.png';
55
import type { ContentProps } from '@/src/types/common';
66
77
const { content } = Astro.props as ContentProps;
88
const contentBody = marked.parse(content.body);
99
---
1010

11-
<section class="bg-midnight-fjord dark">
12-
<div class="grid grid-cols-1 gap-0 md:grid-cols-12 md:gap-10 lg:gap-12">
13-
<div class="relative col-span-1 content-end-safe overflow-hidden md:col-span-6 lg:col-span-7">
14-
<Image
15-
src={ImageOurPurpose}
16-
alt="Our Purpose Illustration"
17-
class="fade-in-pure float-right mr-0 ml-auto h-full object-cover"
18-
data-reveal="fade-in-pure--visible"
19-
data-reveal-delay="400"
20-
/>
21-
</div>
11+
<section class="bg-midnight-fjord section--block relative">
12+
<div class="relative top-0 left-0 aspect-9/16 md:aspect-5/4 lg:aspect-4/3 xl:aspect-16/9">
13+
<Image
14+
src={Illustration}
15+
alt="Our Purpose Illustration"
16+
class="fade-in--pure absolute z-10 h-full object-cover"
17+
data-reveal="fade-in--pure--visible"
18+
data-reveal-delay="200"
19+
data-reveal-immediate="true"
20+
/>
2221

23-
<div class="col-span-1 content-center md:col-span-6 lg:col-span-5">
24-
<div
25-
class="flex flex-col gap-8 px-6 py-15 text-white md:mr-10 md:px-0 md:py-28 lg:mr-20 lg:py-42"
26-
>
27-
<h2 class="h2-section">{content.data.title}</h2>
22+
<div class="absolute top-0 left-0 z-20 h-full w-full">
23+
<div class="max-width flex h-full w-full items-center justify-center lg:justify-start">
2824
<div
29-
class="prose prose-xl [&_*]:md:text-22 text-white/80 [&_*]:mt-0 [&_*]:mb-[12px] [&_*]:text-base [&_*]:leading-[1.45]"
30-
set:html={contentBody}
31-
/>
25+
class="bg-midnight-fjord fade-in--pure border-glacier-mist-700 text-glacier-mist-700 flex w-72 flex-col space-y-8 border-1 p-8 md:w-104.5 md:p-16 lg:space-y-12 xl:w-129"
26+
data-reveal="fade-in--pure--visible"
27+
data-reveal-delay="300"
28+
data-reveal-immediate="true"
29+
>
30+
<h2 class="datum-text-8xl">{content.data.title}</h2>
31+
<div class="datum-prose-lg" set:html={contentBody} />
32+
</div>
3233
</div>
3334
</div>
3435
</div>

‎src/components/about/Team.astro‎

Lines changed: 44 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,75 +6,58 @@ import { marked } from 'marked';
66
const { content } = Astro.props as ContentProps;
77
const htmlContent = marked(content.body);
88
const companies = content.data.companies || [];
9-
const investors = content.data.investors || [];
10-
const link = content.data.link;
119
---
1210

1311
<section class="bg-aurora-moss section--block section--block--pad">
14-
<div class="section--block-inner">
15-
<!-- Team Header -->
16-
<div class="mb-16 md:mb-20">
17-
<div class="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
18-
<h2 class="h2-section">{content.data.title}</h2>
19-
<div class="section--block-content-text text-lg lg:max-w-2xl">
20-
<div set:html={htmlContent} />
21-
</div>
22-
</div>
23-
</div>
12+
<div class="max-width">
13+
<div class="border-midnight-fjord relative z-10 m-auto border">
14+
<div
15+
class="fade-in--pure relative z-10 flex flex-col px-6 pt-8 pb-6 md:px-11 md:pt-11 lg:px-16 lg:pt-16 xl:px-20 xl:pt-20"
16+
data-reveal="fade-in--pure--visible"
17+
data-reveal-delay="100"
18+
>
19+
<!-- Team Header -->
2420

25-
<!-- Companies Section -->
26-
{
27-
companies.length > 0 && (
28-
<div>
29-
<h3 class="text-midnight-fjord/80 font-alliance mb-8 text-sm font-semibold tracking-wider uppercase md:text-base">
30-
Companies we've helped to build
31-
</h3>
32-
<div class="logo-grid logo-grid--3-6">
33-
{companies.map((company) => (
34-
<div class="logo-item logo-item--landscape">
35-
<Image
36-
src={company.img}
37-
alt={company.alt ?? ''}
38-
class="logo-img logo-img--standard"
39-
/>
40-
</div>
41-
))}
21+
<div
22+
class="mx-auto mb-10 flex w-full flex-col justify-between gap-9 text-center md:mb-20 md:flex-row md:text-left lg:mb-20 xl:mb-24"
23+
>
24+
<div class="w-full max-w-none self-center md:max-w-55 lg:max-w-xs">
25+
<h2 class="datum-text-8xl">{content.data.title}</h2>
26+
</div>
27+
<div class="max-w-115 flex-grow self-center">
28+
<span class="datum-text-lg">
29+
<div set:html={htmlContent} />
30+
</span>
4231
</div>
4332
</div>
44-
)
45-
}
4633

47-
<!-- Investors Section -->
48-
{
49-
investors.length > 0 && (
50-
<div>
51-
<h3 class="text-midnight-fjord/80 font-alliance mb-8 text-sm font-semibold tracking-wider uppercase md:text-base">
52-
Investors who have trusted us to execute
53-
</h3>
54-
<div class="logo-grid logo-grid--3-6">
55-
{investors.map((investor) => (
56-
<div class="logo-item logo-item--landscape">
57-
<Image
58-
src={investor.img}
59-
alt={investor.alt ?? ''}
60-
class="logo-img logo-img--standard"
61-
/>
62-
</div>
63-
))}
34+
<div class="mb-2.5 block w-full py-2.5">
35+
<span
36+
class="after:bg-midnight-fjord datum-docs-sidebar-headings flex flex-col items-center justify-center gap-7.5 align-middle uppercase after:block after:h-[1px] after:w-full after:content-[''] md:flex-row"
37+
>
38+
<p class="mb-0 text-balance md:whitespace-nowrap">Companies we've helped to build</p>
39+
</span>
40+
</div>
6441

65-
{link && (
66-
<div class="logo-item logo-item--landscape">
67-
<a
68-
href={link.url}
69-
class="text-midnight-fjord/80 hover:text-midnight-fjord text-base transition-colors"
70-
>
71-
{link.label}
72-
</a>
42+
<!-- Companies Section -->
43+
{
44+
companies.length > 0 && (
45+
<div>
46+
<div class="grid grid-cols-3 overflow-x-auto md:grid-cols-6">
47+
{companies.map((company) => (
48+
<div class="flex aspect-29/21 items-center justify-center">
49+
<Image
50+
src={company.img}
51+
alt={company.alt ?? ''}
52+
class="logo-img logo-img--standard"
53+
/>
54+
</div>
55+
))}
7356
</div>
74-
)}
75-
</div>
76-
</div>
77-
)
78-
}
57+
</div>
58+
)
59+
}
60+
</div>
61+
</div>
7962
</div>
8063
</section>

‎src/components/about/WeValue.astro‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,53 @@
11
---
22
import type { ContentProps } from '@/src/types/common';
3+
import Button from '@/src/components/Button.astro';
4+
import { Image } from 'astro:assets';
5+
import Illustration from '@content/about/images/rock.png';
36
47
const { content } = Astro.props as ContentProps;
58
const items = content.data.items || [];
69
const link = content.data.link;
710
---
811

9-
<section class="bg-glacier-mist-900 section--block section--block--pad">
10-
<div class="section--block-inner">
11-
<div class="flex flex-col gap-12 md:gap-20 lg:flex-row lg:gap-32">
12-
<!-- Left content: Heading and CTA -->
13-
<div class="flex w-[350px] flex-col">
14-
<h2 class="h2-section mb-8 md:mb-12 lg:mb-17">{content.data.title}</h2>
15-
{
16-
link && (
17-
<div>
18-
<a href={link.url} class="btn btn--alpha btn--xl">
19-
{link.label}
20-
</a>
21-
</div>
22-
)
23-
}
24-
</div>
25-
12+
<section id="we-value" class="bg-glacier-mist-800 section--block section--block--pad relative">
13+
<div
14+
class="max-width fade-in--pure relative z-10 text-center"
15+
data-reveal="fade-in--pure--visible"
16+
data-reveal-delay="100"
17+
>
18+
<h3 class="datum-text-8xl mx-auto max-w-xl text-center">{content.data.title}</h3>
19+
<div
20+
class="flex flex-wrap justify-center-safe gap-4 py-6 md:gap-6 md:py-14 xl:gap-9 xl:py-21 [&>div]:w-[279px]"
21+
>
2622
{
27-
items.length > 0 && (
28-
<div class="flex flex-1 justify-start">
29-
<ol class="ordered-list ordered-list--sans">
30-
{items.map((item) => (
31-
<li>{item}</li>
32-
))}
33-
</ol>
34-
</div>
35-
)
23+
items.length > 0 &&
24+
items.map((item) => (
25+
<div class="bg-glacier-mist-700 border-pine-forge datum-text-lg border-1 px-10 py-6 md:p-10">
26+
{item}
27+
</div>
28+
))
3629
}
3730
</div>
31+
32+
{
33+
link && (
34+
<Button
35+
text={link.label}
36+
href={link.url}
37+
target="_blank"
38+
class="btn btn--pine-forge"
39+
icon={{ name: 'arrow-right', size: 'md' }}
40+
/>
41+
)
42+
}
43+
</div>
44+
45+
<div class="absolute bottom-0 left-0 z-5 size-auto overflow-hidden">
46+
<Image
47+
src={Illustration}
48+
layout="constrained"
49+
alt="Scene rock illustration"
50+
class="size-auto w-[334px] -translate-x-1/2 translate-y-1/10 md:translate-x-0 md:translate-y-[40%] lg:translate-x-0 lg:translate-y-0"
51+
/>
3852
</div>
3953
</section>

‎src/components/handbook/Article.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const mainArticle = mainArticleEntry ? await render(mainArticleEntry) : null;
3333

3434
<section class:list={['handbook-article bg-glacier-mist-700 section--block pb-9', className]}>
3535
<div class="max-width max-w-263.5">
36-
<Aside title="About the Handbooks">
36+
<Aside title="About the Handbook">
3737
<p>
3838
This is our guide to understanding our company foundations: our values, beliefs, and goals.
3939
Feel free to reach out if there is something we've missed!.

‎src/components/home/FirstSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ if (content.data.images) {
8181
{
8282
content.data.images ? (
8383
<div>
84-
<div class="grid grid-cols-3 overflow-x-auto lg:grid-cols-6">
84+
<div class="grid grid-cols-3 overflow-x-auto md:grid-cols-6">
8585
{logoColumns.map((column, columnIndex) => (
8686
<div class="flex aspect-29/21 items-center justify-center">
8787
<div

‎src/components/home/Hero.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const { title = '', description = '', class: className } = Astro.props as HeroPr
4848
loading="eager"
4949
fetchpriority="high"
5050
alt="Hero Illustration"
51-
class="fade-in-pure h-auto w-full translate-y-[3%] object-cover md:object-contain"
52-
data-reveal="fade-in-pure--visible"
51+
class="fade-in--pure h-auto w-full translate-y-[3%] object-cover md:object-contain"
52+
data-reveal="fade-in--pure--visible"
5353
data-reveal-delay="300"
5454
data-reveal-immediate="true"
5555
/>

‎src/content/about/images/illustration.png‎

1.77 MB
Loading

‎src/content/about/images/rock.png‎

39.3 KB
Loading

‎src/pages/about/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const description = fm.description ? fm.description : '';
3131
description={fm.description}
3232
/>
3333
<FirstSection content={contentData[0]} />
34-
<SecondSection content={contentData[1]} />
3534
<ThirdSection content={contentData[2]} />
35+
<SecondSection content={contentData[1]} />
3636
<Footer />
3737
</section>
3838
</Layout>

‎src/v1/styles/utilities.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,8 +227,12 @@
227227
@utility datum-prose-lg {
228228
@apply prose max-w-none;
229229
@apply datum-text-lg;
230-
@apply prose-p:mb-3 prose-p:mt-0;
231-
@apply prose-headings:mt-0 prose-headings:mb-3.5 lg:prose-headings:mb-5;
230+
@apply text-inherit;
231+
232+
@apply prose-p:mt-0 prose-p:mb-[var(--text-lg-paragraph-spacing)];
233+
@apply prose-li:mt-0 prose-li:mb-[var(--text-lg-paragraph-spacing)];
234+
@apply prose-h2:datum-text-xl prose-h3:datum-text-lg prose-h4:datum-text-base prose-h5:datum-text-sm prose-h6:datum-text-sm;
235+
@apply prose-headings:mt-5 prose-headings:mb-4 prose-headings:font-bold;
232236
}
233237

234238
@utility datum-prose {

0 commit comments

Comments
 (0)