Skip to content

[WEBDEV-2621] - changes to contact page #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[WEBDEV-2621] - changes to contact page #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 95 additions & 42 deletions src/components/sections/CardGrid.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,109 @@ import type { cardsSchema } from "@/content/schemas/sections";
import { Icon } from "astro-icon/components";
import type { z } from "astro/zod";
import { marked } from "marked";
import ContactModal from "../forms/ContactModal.astro";
import InsightModal from "../forms/InsightModal.astro";
type Props = z.infer<typeof cardsSchema>;
const { cards, styles, divider } = Astro.props;
---

<ul class:list={["list-none flex flex-wrap", styles?.container]}>
{
cards.map(async ({ icon, title, text, button, style }, index) => {
const content = text ? await marked.parse(text) : null;
const isLast = index === cards.length - 1;
cards.map(
async ({ icon, title, text, button, style, contact_button }, index) => {
const content = text ? await marked.parse(text) : null;
const isLast = index === cards.length - 1;
const parseTitle = title ? await marked.parse(title) : null;

return (
<>
<li class:list={[styles?.card, style]}>
{icon && <Icon name={icon} size={100} class="my-0" />}
{title && (
<h3 class:list={[styles?.card_title, "text-4xl my-5 z-50"]}>
{title}
</h3>
)}

<div
class:list={[
`text-xl prose-a:text-blue-300 text-inherit`,
styles?.content,
]}
set:html={content}
/>

{button && (
<a
href={button.url}
target={button.url.startsWith("https") ? "_blank" : "_self"}
class="no-underline inline-block mt-auto"
>
<div
class:list={[
`linaro-gradient-button mt-auto`,
styles?.button,
]}
return (
<>
<li class:list={[styles?.card, style]}>
{icon && <Icon name={icon} size={100} class="my-0" />}
{title && (
<h3
class:list={[styles?.card_title, "text-4xl my-5 z-50"]}
set:html={parseTitle}
/>
)}
<div
class:list={[
`text-xl prose-a:text-blue-300 text-inherit`,
styles?.content,
]}
set:html={content}
/>
{button && (
<a
href={button.url}
target={button.url.startsWith("https") ? "_blank" : "_self"}
class="no-underline inline-block mt-auto"
>
{button.text}
</div>
</a>
<div
class:list={[
`linaro-gradient-button mt-auto`,
styles?.button,
]}
>
{button.text}
</div>
</a>
)}
{contact_button &&
(() => {
if (contact_button.type === "form") {
return (
<ContactModal
form_id={contact_button.form_id}
modal_id={contact_button.modal_id}
button_text={contact_button.button_text}
description={contact_button.title}
formName={contact_button.formName}
/>
);
}

if (contact_button.type === "insight") {
return (
<InsightModal
button_text={contact_button.button_text}
formName={contact_button.formName}
/>
);
}
return null;
})()}
</li>
{divider && !isLast && (
<li class="not-prose w-[100px] h-[2px] bg-gradient-to-r md:bg-gradient-to-b from-transparent via-white to-transparent opacity-50 my-4 md:w-[2px] md:h-[160px] md:mx-4" />
)}
</li>
{divider && !isLast && (
<li class="not-prose w-[100px] h-[2px] bg-gradient-to-r md:bg-gradient-to-b from-transparent via-white to-transparent opacity-50 my-4 md:w-[2px] md:h-[160px] md:mx-4" />
)}
</>
);
})
</>
);
},
)
}
</ul>
<script>
["DOMContentLoaded", "astro:after-swap"].forEach((event) => {
document.addEventListener(event, addListeners);
});

function addListeners() {
const dialogs = document.querySelectorAll(
"[data-contact-modal]",
) as NodeListOf<HTMLDialogElement>;

dialogs.forEach((dialog) => {
dialog.addEventListener("click", function (event) {
const rect = dialog.getBoundingClientRect();
const isInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!isInDialog) {
dialog.close();
}
});
});
}
</script>
57 changes: 23 additions & 34 deletions src/content/pages/contact.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,58 +7,47 @@ description: |
hero:
title: >
Contact Linaro
background_image: linaro-website/graphics/close-up-woman_sbf1xz
background_image: /linaro-website/graphics/young-woman-with-curly-hair-using-phone-street_1_zfsbea.png
description: ""
styles:
text_container: text-center w-full
title: w-full text-center
background: bg-right-top md:bg-top opacity-50
main_container: lg:h-[calc(100vh)] h-[calc(35vh)]
text_container: text-center w-full lg:pl-40
title: w-full text-left
background: w-full
description: text-md sm:text-lg
main_container: max-h-[30rem] min-h-[30ch] h-[30vh]
flow:
- row: container_row
styles:
outer: purple-gradient-container
sections:
- component: contact_buttons
- component: contact
form_id: "7"
formName: "sales_contact"
styles:
card: max-w-[30ch] mx-auto flex flex-col justify-center items-center
container: justify-around gap-x-5 gap-y-20
button: mt-8
card_title: text-[2rem] text-center
buttons:
- title: Sales Enquiries
type: form
icon: workspaces
button_text: Get in Touch
form_id: "7"
modal_id: general
formName: "sales_contact"
- title: Media Enquiries
type: form
icon: flash_on
button_text: Get in Touch
form_id: "8"
modal_id: marketing
formName: "media_contact"
- title: Careers Enquiries
type: link
icon: handshake
button_text: Get in Touch
url: /careers
card: flex flex-col md:flex-row bg-background border rounded-xl p-8
form: w-full md:w-1/2 bg-background
content: w-full md:w-1/2 text-2xl
content: We’d love to hear from you so please send us a message and one of our team will be in touch!
- row: container_row
styles:
outer: purple-gradient-container
sections:
- component: faded_line
- component: cards
styles:
card: max-w-[40ch] flex flex-col items-start
container: justify-center gap-24
cards:
- title: Technical Support
text: |
96Boards Technical Support - If you have a technical support query relating to 96Boards, please post your question on [96Boards](https://discuss.96boards.org/).

Linaro Technical Support - If you have a technical support query relating to Linaro, please go to our support page.
If you have a technical support query relating to Linaro, please go to our [support page](https://support.linaro.org/).
- title: Legal Information
text: Linaro's legal information can be found on the [Legal page](/legal).

- title: Getting Involved with the Community
text: For discussion around Linux and Open Source on Arm, subscribe to the lists on [Linaro Lists Site](https://lists.linaro.org/mailman3/lists/).
- title: <span class="text-linaro-yellow">Subscribe to our newsletter</span>
contact_button:
button_text: Subscribe
type: insight
formName: newsletter
---
10 changes: 10 additions & 0 deletions src/content/schemas/sections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,16 @@ export const cardsSchema = z.object({
url: z.string(),
})
.optional(),
contact_button: z
.object({
form_id: z.string().optional(),
modal_id: z.string().optional(),
button_text: z.string(),
type: z.string(),
title: z.string().optional(),
formName: z.string(),
})
.optional(),
}),
),
divider: z.boolean().optional(),
Expand Down