Skip to content

Commit 5acd5a6

Browse files
markgohomarkgoho
committed
015-01 Implement Contact Us page layout and styling
1 parent a184241 commit 5acd5a6

5 files changed

Lines changed: 150 additions & 7 deletions

File tree

‎docs/delivery/015/015-01.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ Implement the structure and styling of the Contact Us page to match the Figma de
88

99
## Status History
1010

11-
| Timestamp | Event Type | From Status | To Status | Details | User |
12-
| ------------------- | ---------- | ----------- | --------- | ----------------- | -------- |
13-
| 2025-07-10 13:54:45 | Created | N/A | Proposed | Task file created | ai-agent |
11+
| Timestamp | Event Type | From Status | To Status | Details | User |
12+
| ------------------- | ------------- | ----------- | ---------- | ------------------------ | -------- |
13+
| 2025-07-10 13:54:45 | Created | N/A | Proposed | Task file created | ai-agent |
14+
| 2025-07-12 13:41:22 | Status Update | Proposed | InProgress | Started implementation | ai-agent |
15+
| 2025-07-12 13:44:04 | Status Update | InProgress | Done | Implemented and verified | ai-agent |
1416

1517
## Requirements
1618

@@ -32,6 +34,6 @@ Implement the structure and styling of the Contact Us page to match the Figma de
3234

3335
## Files Modified
3436

35-
- hugo/content/contact-us.md (or equivalent)
36-
- hugo/layouts/\_default/contact-us.html (or equivalent)
37-
- hugo/assets/scss/styles.scss (or equivalent)
37+
- hugo/content/contact-us.md
38+
- hugo/layouts/contact-us/single.html
39+
- hugo/assets/scss/contact-us.scss

‎docs/delivery/015/tasks.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ This document lists all tasks associated with PBI 015.
88

99
| Task ID | Name | Status | Description |
1010
| :------ | :---------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------- |
11-
| 015-01 | [Implement Contact Us page layout and styling](./015-01.md) | Proposed | Build the page structure and apply styles to match the Figma design |
11+
| 015-01 | [Implement Contact Us page layout and styling](./015-01.md) | Done | Build the page structure and apply styles to match the Figma design |
1212
| 015-02 | [Implement form fields and validation](./015-02.md) | Proposed | Add Name, Email, and Message fields with required validation |
1313
| 015-03 | [Implement Doula Support special callout](./015-03.md) | Proposed | Add and style the special callout for Doula Support requests |
1414
| 015-04 | [Implement form submission and confirmation message](./015-04.md) | Proposed | Enable form submission and display a confirmation or next steps message |

‎hugo/assets/scss/contact-us.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.contact-us-page {
2+
background: linear-gradient(
3+
180deg,
4+
var(--color-lightest-bg) 0%,
5+
var(--color-light-bg) 100%
6+
);
7+
padding: var(--spacing-xxl);
8+
}
9+
10+
.contact-us-page__title {
11+
font-family: var(--font-family-main);
12+
font-weight: var(--font-weight-boldest);
13+
font-size: var(--font-size-xl);
14+
line-height: var(--line-height-tight);
15+
color: var(--color-text-main);
16+
text-align: center;
17+
margin-bottom: var(--spacing-xl);
18+
}
19+
20+
.contact-us-page__callout {
21+
border: var(--border-width-md) solid var(--color-border-accent);
22+
border-radius: var(--border-radius-md);
23+
padding: var(--spacing-md) var(--spacing-lg);
24+
margin-bottom: var(--spacing-xl);
25+
display: flex;
26+
align-items: center;
27+
gap: var(--spacing-md);
28+
max-width: 1124px;
29+
margin-inline: auto;
30+
}
31+
32+
.contact-us-page__callout-icon {
33+
flex-shrink: 0;
34+
}
35+
36+
.contact-us-page__callout-text {
37+
font-family: var(--font-family-main);
38+
font-weight: var(--font-weight-regular);
39+
font-size: 1.625rem; /* 26px - custom value from figma */
40+
line-height: var(--line-height-tight);
41+
color: var(--color-text-main);
42+
}
43+
44+
.contact-us-page__form {
45+
display: grid;
46+
gap: var(--spacing-lg);
47+
max-width: 1124px;
48+
margin-inline: auto;
49+
}
50+
51+
.contact-us-page__form-group {
52+
display: grid;
53+
gap: var(--spacing-xs);
54+
}
55+
56+
.contact-us-page__label {
57+
font-family: var(--font-family-main);
58+
font-weight: var(--font-weight-light);
59+
font-size: var(--font-size-md);
60+
line-height: var(--line-height-tight);
61+
color: var(--color-text-main);
62+
}
63+
64+
.contact-us-page__input {
65+
background-color: var(--color-lightest-bg);
66+
border: 1px solid var(--color-text-main);
67+
border-radius: var(--border-radius-md);
68+
padding: var(--spacing-md);
69+
font-family: inherit;
70+
font-size: var(--font-size-md);
71+
}
72+
73+
.contact-us-page__input--textarea {
74+
min-height: 200px;
75+
resize: vertical;
76+
}

‎hugo/content/contact-us.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: "Contact Us"
3+
layout: "contact-us"
4+
---

‎hugo/layouts/contact-us/single.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{{ define "head-styles" }}
2+
{{ $styles := resources.Get "scss/contact-us.scss" | toCSS }}
3+
<style>{{ $styles.Content | safeCSS }}</style>
4+
{{ end }}
5+
6+
{{ define "main" }}
7+
<div class="contact-us-page">
8+
<h1 class="contact-us-page__title">Contact Us</h1>
9+
10+
<div class="contact-us-page__callout">
11+
<div class="contact-us-page__callout-icon">
12+
{{/* Icon placeholder */}}
13+
<svg
14+
width="64"
15+
height="64"
16+
viewBox="0 0 64 64"
17+
fill="none"
18+
xmlns="http://www.w3.org/2000/svg">
19+
<rect width="64" height="64" rx="32" fill="white" />
20+
<path
21+
d="M32 18V32M32 46V32M32 32H18M32 32H46"
22+
stroke="#1B5665"
23+
stroke-width="4" />
24+
</svg>
25+
</div>
26+
<p class="contact-us-page__callout-text">
27+
Looking for information about Doula Support? Use our special request
28+
form.
29+
</p>
30+
</div>
31+
32+
<form class="contact-us-page__form">
33+
<div class="contact-us-page__form-group">
34+
<label for="name" class="contact-us-page__label"
35+
>Name (first and last)</label
36+
>
37+
<input type="text" id="name" class="contact-us-page__input" />
38+
</div>
39+
40+
<div class="contact-us-page__form-group">
41+
<label for="email" class="contact-us-page__label"
42+
>Email (required)</label
43+
>
44+
<input
45+
type="email"
46+
id="email"
47+
class="contact-us-page__input"
48+
required />
49+
</div>
50+
51+
<div class="contact-us-page__form-group">
52+
<label for="message" class="contact-us-page__label"
53+
>What can we help you with?</label
54+
>
55+
<textarea
56+
id="message"
57+
class="contact-us-page__input contact-us-page__input--textarea"></textarea>
58+
</div>
59+
</form>
60+
</div>
61+
{{ end }}

0 commit comments

Comments
 (0)