Skip to content

Commit 7297077

Browse files
ivke995ivke995
authored
Feat: Our engineers section redesign (#633)
* feat: our engineers section redesign * fix: fix team image position for small screens
1 parent 772584e commit 7297077

File tree

11 files changed

+148
-66
lines changed

11 files changed

+148
-66
lines changed

‎apps/website/src/assets/chat-two-bubbles.svg‎

Lines changed: 4 additions & 0 deletions
Loading

apps/website/public/hands-puzzle.svg renamed to apps/website/src/assets/hands-puzzle.svg

File renamed without changes.

‎apps/website/src/assets/staff-augmentation-team.jpg‎

11.5 MB
Loading

‎apps/website/src/components/BookACallForm.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ export interface Props {
1111
calLink?: string;
1212
eventType?: string;
1313
className?: string;
14+
contentClassName?: string;
1415
}
1516
1617
const {
1718
calLink = "team/crocoder/hello",
1819
eventType = "hello",
1920
className,
21+
contentClassName,
2022
} = Astro.props;
2123
---
2224

@@ -25,7 +27,7 @@ const {
2527
"bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]",
2628
className,
2729
)}
28-
contentClassName={`${grid_classes} items-center`}
30+
contentClassName={classNames(`${grid_classes} items-center`, contentClassName)}
2931
>
3032
<div
3133
class="col-span-6 md:col-span-8 md:col-start-3 -translate-y-1/2 -mb-40 xl:col-span-6 xl:col-start-4 lg:-mb-60"

‎apps/website/src/components/staff-agmentation/GetYourPlanForm.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
9393
<p id="form-notification" class="text-sm min-h-6 pt-1"></p>
9494
</div>
9595
<script>
96-
import type { SyntheticEvent } from "react";
9796
import * as notification from "../../content/contact/notification.md";
9897

9998
const thankYouCardSection = document.getElementById(

‎apps/website/src/components/staff-agmentation/OurEngineers.astro‎

Lines changed: 98 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,122 @@
11
---
2-
import { Image } from "astro:assets";
3-
import circleCheckIcon from "../../assets/circle-check-icon.svg";
4-
import crocoderIll16 from "../../assets/crocoder-ill-16-1.png";
2+
import { Picture } from "astro:assets";
3+
import team from "../../assets/staff-augmentation-team.jpg";
4+
import Pill from "../../components/Pill.astro";
55
import Section from "../../components/Section.astro";
66
import { grid_classes } from "../../components/_grid";
7-
import { getCollection, type CollectionEntry } from "astro:content";
8-
import type { MainContent } from "./MainContent.astro";
7+
import "../../styles/main.css";
8+
import { getCollection } from "astro:content";
9+
import { Image } from "astro:assets";
10+
11+
const contentVariantID = String(
12+
Astro.url.searchParams.get("id") || "backfill-your-developer-gap",
13+
);
914
10-
const staffContent = (await getCollection("staff_augmentation")) as {
15+
const staffAugmentation = (await getCollection("staff_augmentation")) as {
1116
data: {
1217
id: string;
13-
main: MainContent;
18+
main: {
19+
ourEngineers: {
20+
image: string;
21+
alt: string;
22+
title: string;
23+
description: string;
24+
}[];
25+
};
1426
};
1527
}[];
1628
17-
const contentVariantId = String(
18-
Astro.url.searchParams.get("id") || "backfill-your-developer-gap"
19-
);
20-
21-
let content = staffContent.find((c) => c.data.id === contentVariantId);
29+
let content = staffAugmentation.find((v) => v.data.id === contentVariantID);
2230
2331
if (!content) {
24-
content = staffContent[0];
32+
content = staffAugmentation[0];
2533
}
34+
35+
const images = import.meta.glob<{ default: ImageMetadata }>(
36+
"/src/assets/*.svg",
37+
);
2638
---
2739

28-
<!-- Engineers Section -->
29-
<Section className="!py-12 md:!py-20">
30-
<div class={`${grid_classes} gap-8 md:gap-20`}>
31-
<div class="col-span-6 md:col-span-12 lg:col-span-6">
32-
<h2
33-
class="text-[28px] leading-[32px] md:text-[54px] md:leading-[60px] tracking-tight font-medium mb-6 md:mb-12"
40+
<Section className="!p-0" contentClassName="md:max-w-screen">
41+
<div
42+
class="relative pt-49 pb-18 md:pb-24 min-[1920px]:pb-48 min-[1920px]:pt-98"
43+
>
44+
<Picture
45+
src={team}
46+
alt="Developers collaborating"
47+
widths={[320, 480, 578, 640, 720, 800, 940, 1200, 1412, 1920]}
48+
sizes="100vw"
49+
format="avif"
50+
loading="lazy"
51+
class="absolute inset-0 w-full h-full object-cover object-top md:object-[50%_25%] -z-10 bg-[#424c6d]"
52+
/>
53+
<div
54+
class="absolute inset-0 -z-10"
55+
style="background:linear-gradient(180deg,rgba(30, 26, 26, 0) 0%, #1E1A1A 100%)"
56+
>
57+
<!-- Overlay -->
58+
</div>
59+
<div class="mx-auto xl:px-0">
60+
<div
61+
class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
3462
>
35-
<span class="text-secondary">Our </span><span class="text-[#607A1A]"
36-
>Engineers</span
63+
<div
64+
class="row-start-1
65+
col-start-1
66+
col-span-6
67+
md:col-span-10
68+
md:col-start-2
69+
text-white"
3770
>
38-
</h2>
39-
40-
<div class="space-y-4 md:space-y-7">
71+
<div class="flex flex-col items-center gap-2 md:gap-4 max-h-fit">
72+
<Pill
73+
className="text-[10px] min-[340px]:text-xs min-[390px]:text-sm sm:text-base px-2 py-1 min-[390px]:px-3 min-[390px]:py-1.5 sm:px-4 sm:py-2 max-h-[36px]"
74+
>Why work with us</Pill
75+
>
76+
<h2
77+
class="text-[18px] leading-[22px] min-[390px]:text-[24px] min-[390px]:leading-[28px] sm:text-[32px] sm:leading-[36px] md:text-[54px] md:leading-[59.4px] font-medium lg:text-[74px] lg:leading-[82px] tracking-tight text-center"
78+
>
79+
Our <span class="text-crocoder-orange">Engineers</span>
80+
</h2>
81+
<p
82+
class="font-normal text-sm leading-5 min-[390px]:text-base min-[390px]:leading-6 sm:text-lg sm:leading-7 md:text-[22px] md:leading-8 tracking-normal lg:px-32 text-center"
83+
>
84+
Our software development services helped clients big and small
85+
build solutions with a lasting impact.
86+
</p>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
<div class="bg-contrast">
93+
<div
94+
class={`${grid_classes}
95+
md:max-w-[var(--max-width)]
96+
pl-4 md:pl-7 pr-0 lg:pr-7 py-0
97+
md:mx-auto
98+
relative
99+
min-[1281px]:px-0
100+
`}
101+
>
102+
<div
103+
class="col-span-6 md:col-span-12 flex gap-2 overflow-x-auto no-scrollbar pr-4 md:pr-7 lg:px-0 lg:overflow-hidden"
104+
>
41105
{
42-
content.data.main.ourEngineers.map((q) => (
43-
<div class="flex gap-4 md:gap-7">
44-
<div class="w-8 h-8 md:w-12 md:h-12 flex-shrink-0">
45-
<Image
46-
src={circleCheckIcon}
47-
alt="Check icon"
48-
width={48}
49-
height={48}
50-
loading="lazy"
51-
class="w-full h-full"
52-
/>
53-
</div>
54-
<div>
55-
<p class="text-[16px] leading-[24px] md:text-[22px] md:leading-8 font-semibold text-secondary">
56-
{q.title}
57-
</p>
58-
<p class="text-[16px] leading-[24px] md:text-[22px] md:leading-8 text-secondary">
59-
{q.description}
60-
</p>
61-
</div>
106+
content.data.main.ourEngineers.map((c) => (
107+
<div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 min-w-[240px] lg:flex-1 lg:min-w-auto">
108+
<Image
109+
src={images[c.image]()}
110+
alt={c.alt}
111+
width={48}
112+
height={48}
113+
/>
114+
<h2 class="text-[22px] text-[#FFFFFF]">{c.title}</h2>
115+
<p class="text-base leading-6 text-[#FFFFFF]">{c.description}</p>
62116
</div>
63117
))
64118
}
65119
</div>
66120
</div>
67-
68-
<div class="hidden lg:block col-span-6 lg:col-span-6">
69-
<Image
70-
src={crocoderIll16}
71-
alt="CroCoder engineering team"
72-
widths={[320, 480, 640, 720, 800, 940]}
73-
sizes="calc(50vw - 28px)"
74-
loading="lazy"
75-
class="w-full h-auto"
76-
/>
77-
</div>
78121
</div>
79122
</Section>

‎apps/website/src/content/ctoservices/expert-driven-team-augmentation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
idx: 2
33
image: "/pic-people-collaborating-1.png"
4-
iconFirst: "/hands-puzzle.svg"
4+
iconFirst: "/src/assets/hands-puzzle.svg"
55
iconSecond: "/performance-increase.svg"
66
sectionTitle: "Expert-driven Team Augmentation"
77
titleFirst: "Seamless integration"

‎apps/website/src/content/staff_augmentation/variant_1.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,32 @@ main:
3838
ourEngineers:
3939
[
4040
{
41+
image: "/src/assets/target-icon-correct.svg",
42+
alt: "Illustration of a target",
4143
title: "Goal-Driven",
4244
description: "They focus on outcomes, not just tasks",
4345
},
4446
{
47+
image: "/src/assets/seo_search_graph.svg",
48+
alt: "Illustration of search graph",
4549
title: "Proactive",
4650
description: "They solve problems without waiting for instructions",
4751
},
4852
{
53+
image: "/src/assets/chat-two-bubbles.svg",
54+
alt: "Illustration of two cloud bubbles",
4955
title: "Communicative",
5056
description: "Async-ready, remote-native, and highly collaborative",
5157
},
5258
{
59+
image: "/src/assets/hands-puzzle.svg",
60+
alt: "Illustration of hands on puzzle",
5361
title: "Flexible",
5462
description: "Short-term, long-term, or somewhere in between",
5563
},
5664
{
65+
image: "/src/assets/check_badge.svg",
66+
alt: "Illustration of check badge",
5767
title: "Skilled across levels",
5868
description: "From promising juniors to proven engineering leads",
5969
},

‎apps/website/src/content/staff_augmentation/variant_2.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,32 @@ main:
4040
ourEngineers:
4141
[
4242
{
43+
image: "/src/assets/target-icon-correct.svg",
44+
alt: "Illustration of a target",
4345
title: "Product-minded",
4446
description: "Focused on moving the project forward",
4547
},
4648
{
49+
image: "/src/assets/seo_search_graph.svg",
50+
alt: "Illustration of search graph",
4751
title: "Proactive",
4852
description: "Jump into work and unblock critical paths without waiting",
4953
},
5054
{
55+
image: "/src/assets/chat-two-bubbles.svg",
56+
alt: "Illustration of two cloud bubbles",
5157
title: "Communicative",
5258
description: "Async-ready, remote-native, and highly collaborative",
5359
},
5460
{
61+
image: "/src/assets/hands-puzzle.svg",
62+
alt: "Illustration of hands on puzzle",
5563
title: "Flexible",
5664
description: "Short-term, long-term, or somewhere in between",
5765
},
5866
{
67+
image: "/src/assets/check_badge.svg",
68+
alt: "Illustration of check badge",
5969
title: "Skilled across levels",
6070
description: "From promising juniors to proven engineering leads",
6171
},

‎apps/website/src/content/staff_augmentation/variant_3.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,32 @@ main:
4040
ourEngineers:
4141
[
4242
{
43+
image: "/src/assets/target-icon-correct.svg",
44+
alt: "Illustration of a target",
4345
title: "Problem-Solvers",
4446
description: "They unblock issues and improve the system as they work",
4547
},
4648
{
49+
image: "/src/assets/seo_search_graph.svg",
50+
alt: "Illustration of search graph",
4751
title: "Proactive",
4852
description: "Senior-level initiative to drive results fast",
4953
},
5054
{
55+
image: "/src/assets/chat-two-bubbles.svg",
56+
alt: "Illustration of two cloud bubbles",
5157
title: "Communicative",
5258
description: "Async-ready, remote-native, and highly collaborative",
5359
},
5460
{
61+
image: "/src/assets/hands-puzzle.svg",
62+
alt: "Illustration of hands on puzzle",
5563
title: "Flexible",
5664
description: "Short-term, long-term, or somewhere in between",
5765
},
5866
{
67+
image: "/src/assets/check_badge.svg",
68+
alt: "Illustration of check badge",
5969
title: "Skilled across levels",
6070
description: "Proven senior specialists ready to tackle your toughest challenges",
6171
},

0 commit comments

Comments
 (0)