Skip to content

Feat ideal for section redesign #619

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

Merged
stefanskoricdev merged 3 commits into from
Sep 19, 2025
Merged

Feat ideal for section redesign #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fca5d8b
feat: Redesign of 'Ideal for teams who' section
stefanskoricdev Sep 18, 2025
0844fab
fix: Smaller styling issues
stefanskoricdev Sep 19, 2025
e0358f8
Merge branch 'feat-free-consult-section' into feat-ideal-for-section-…
stefanskoricdev Sep 19, 2025
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
Binary file added apps/website/src/assets/croco_in_cloud.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified apps/website/src/assets/pic_phase_3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/src/assets/staff_collaboration.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions apps/website/src/components/icons/CircleCheck.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import classnames from "classnames";

type Props = HTMLAttributes<"svg"> & { classNames?: string };

const { width, height, classNames } = Astro.props;
const { width, height, classNames, stroke } = Astro.props;
---

<svg
Expand All @@ -17,7 +17,7 @@ const { width, height, classNames } = Astro.props;
>
<path
d="M6.96437 12.7707L9.75943 15.9083C9.83415 15.9946 9.92716 16.0631 10.0317 16.109C10.1363 16.1548 10.2497 16.1768 10.3638 16.1733C10.4787 16.1713 10.5919 16.1446 10.6956 16.095C10.7993 16.0454 10.891 15.974 10.9647 15.8858L17.5048 8.06773M22.4038 12C22.4038 17.7459 17.7459 22.4038 12 22.4038C6.25414 22.4038 1.59619 17.7459 1.59619 12C1.59619 6.25414 6.25414 1.59619 12 1.59619C17.7459 1.59619 22.4038 6.25414 22.4038 12Z"
stroke="#00A708"
stroke={stroke || "#00A708"}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"></path>
Expand Down
277 changes: 121 additions & 156 deletions apps/website/src/components/staff-agmentation/MainContent.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import circleCheckIcon from "../../assets/circle-check-icon.svg";
import paulJeszenszky from "../../assets/paul-jeszenszky.png";
import picCrocoderTeam from "../../assets/pic-crocoder-team-3362ae.png";
import quoteIcon from "../../assets/quote-icon.svg";
import targetIconCorrect from "../../assets/target-icon-correct.svg";
import crocoIcon from "../../assets/croco_in_cloud.png";
import idealForIllustration from "../../assets/pic_phase_3.png";
import staffCollaborationImg from "../../assets/staff_collaboration.png";
import Pill from "../../components/Pill.astro";
import Section from "../../components/Section.astro";
import { grid_classes } from "../_grid";
import CircleCheck from "../icons/CircleCheck.astro";

export type MainContent = {
pillText: string;
Expand All @@ -29,7 +29,7 @@ const staffContent = (await getCollection("staff_augmentation")) as {
}[];

const contentVariantId = String(
Astro.url.searchParams.get("id") || "backfill-your-developer-gap",
Astro.url.searchParams.get("id") || "backfill-your-developer-gap"
);

let content = staffContent.find((c) => c.data.id === contentVariantId);
Expand All @@ -42,167 +42,132 @@ const { data } = content;
---

<Section
className="!py-0 !px-0"
contentClassName="relative before:absolute before:z-[-1] before:top-0 before:w-full before:h-full before:bg-[#4E5BC8] md:max-w-screen"
className="!p-0 bg-[#4E5BC8]"
contentClassName="relative before:absolute before:z-[-1] before:top-0 before:w-full before:h-full bg-contrast rounded-t-4xl md:rounded-t-[96px] md:max-w-screen overflow-hidden pb-12 lg:pb-24"
>
<div
class="px-4 md:px-7 py-18 md:py-24 bg-[#1E1A1A] rounded-t-4xl md:rounded-t-[96px]"
class={`${grid_classes} md:max-w-[var(--max-width)] md:mx-auto relative z-[2]`}
>
<div class="md:max-w-[var(--max-width)] md:mx-auto">
<!-- Section Title -->
<div
class="relative
col-span-6
overflow-hidden
h-[calc(120vw+100px)]
max-h-[700px]
md:col-span-12
md:h-[70vw]
lg:col-span-6
lg:max-h-[870px]
xl:overflow-visible"
>
<div
class="flex flex-col items-center gap-4 mb-12 md:mb-24 px-1 md:px-2 xl:px-[104px] mx-auto"
class="aspect-square
relative
rounded-full
overflow-hidden
w-[120%]
max-w-[630px]
-left-1/4
-top-1/12
md:w-[70%]
md:-left-18
lg:w-[120%]
lg:-left-1/5
lg:max-w-[800px]"
>
<Pill className="min-w-0 w-auto max-w-[280px] !whitespace-normal break-words text-center sm:w-fit sm:max-w-none">
{data.main.pillText}
</Pill>
<h2
class="text-[32px] leading-[36px] md:text-[48px] md:leading-[52px] lg:text-[60px] lg:leading-[66px] xl:text-[74px] xl:leading-[81px] font-medium tracking-[-2%] text-center"
<Image
src={staffCollaborationImg}
alt="Two male developers in CroCoder hoodies collaborating"
class="absolute top-1/12 left-1/6 md:left-0"
/>
</div>
<Image
src={crocoIcon}
alt="Illustration of a crocodile in a cloud with laptop"
class="absolute bottom-0 left-4 lg:left-7 w-[300px]"
/>
</div>
<div
class="col-span-6 md:col-span-12 py-12 lg:py-24 px-4 md:px-7 lg:col-span-6 lg:pl-0"
>
<div class="flex flex-col gap-4">
<Pill>We're 100% Focused on results</Pill>
<h2
class="text-[32px]
leading-[36px]
font-medium
tracking-[-2%]
md:text-[48px]
md:leading-[52px]
lg:text-[54px]
lg:leading-[1.1]"
>
<span class="text-white block md:whitespace-nowrap"
>{data.main.title_1}</span
>
<span class="text-[#FEC343] block">{data.main.title_2}</span>
<span class="text-white block"> Flexible, Embedded Engineers, </span>
<span class="text-[#FEC343] block">Ready to Plug-In</span>
</h2>
</div>

<!-- Content Container -->
<div class="pb-12 md:pb-24">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
<!-- Left Column -->
<div class="space-y-4">
<!-- Main Description Card -->
<div
class="bg-[rgba(66,76,109,0.9)] rounded-2xl p-6 md:p-12 text-white"
>
<div
class="w-[60px] h-[60px] md:w-[90px] md:h-[90px] flex items-center justify-center mb-6 md:mb-7"
>
<Image
src={targetIconCorrect}
alt="Target icon"
width={90}
height={90}
loading="lazy"
class="w-full h-full"
/>
</div>
<div class="space-y-4 md:space-y-7">
{
data.main.aboutUs.map((about) => (
<p class="text-[16px] leading-[24px] md:text-[22px] md:leading-[32px] font-normal">
{about}
</p>
))
}
</div>
</div>

<!-- Testimonial Card -->
<div
class="bg-white rounded-2xl p-4 md:p-7 backdrop-blur-[30px] flex flex-col md:flex-row gap-4"
>
<div class="flex-1">
<p
class="text-sm md:text-base leading-[22px] md:leading-[26px] text-black mb-4 md:mb-7"
>
We have found the perfect extension of our team with CroCoder.
We operate as one team, celebrating our wins and working
through the challenges together. They "own" the roadmap,
deadlines and outcomes with us — from the ideation and
direction stages through to post-launch optimization.
</p>
<div class="flex items-center gap-3">
<div
class="w-[48px] h-[48px] md:w-[72px] md:h-[72px] rounded-full overflow-hidden flex-shrink-0"
>
<Image
src={paulJeszenszky}
alt="Paul Jeszenszky"
width={72}
height={72}
class="w-full h-full object-cover"
loading="lazy"
/>
</div>
<div>
<p
class="text-[16px] md:text-[20px] leading-[22px] md:leading-[28px] text-black font-medium"
>
Paul Jeszenszky
</p>
<p
class="text-[14px] md:text-[20px] leading-[20px] md:leading-[28px] text-black"
>
Submix co-founder & CEO
</p>
</div>
</div>
</div>
<div
class="w-[60px] h-[40px] md:w-[82px] md:h-[54px] opacity-20 self-start md:self-auto"
>
<Image
src={quoteIcon}
alt="Quote icon"
width={82}
height={54}
loading="lazy"
class="w-full h-full"
/>
</div>
</div>
</div>

<!-- Right Column - Ideal for Teams Card -->
<div
class="bg-[rgba(60,56,67,0.8)] rounded-2xl p-6 md:p-12 text-white flex flex-col justify-center"
>
<h3
class="text-[24px] leading-[28px] md:text-[36px] md:leading-[40px] font-medium mb-4 md:mb-7"
>
Ideal for Teams who
</h3>
<div class="space-y-4 md:space-y-7 mb-4 md:mb-7">
{
content.data.main.fitChecks.map((check) => (
<div class="flex gap-4 md:gap-7">
<div class="w-8 h-8 md:w-12 md:h-12 flex-shrink-0">
<Image
src={circleCheckIcon}
alt="Check icon"
width={48}
height={48}
loading="lazy"
class="w-full h-full"
/>
</div>
<div>
<p class="text-[16px] mb-2 leading-[24px] md:text-[22px] md:leading-[32px] md:h-8 flex items-center font-semibold">
{check.highlight}
</p>
<p class="text-[16px] leading-[24px] md:text-[22px] md:leading-[32px]">
{check.text}
</p>
</div>
</div>
))
}
</div>

<div class="flex justify-center">
<Image
src={picCrocoderTeam}
alt="CroCoder team"
widths={[320, 480, 640, 800]}
sizes="(max-width: 768px) calc(100vw - 32px), 640px"
loading="lazy"
class="w-full max-w-[625px] h-auto"
<div class="pt-12 flex flex-col gap-8">
{
data.main.aboutUs.map((p) => (
<p class="text-[22px] leading-8 text-white">{p}</p>
))
}
</div>
</div>
<div
class="col-span-6
bg-[#3C3843CC]
rounded-[48px]
mx-4
py-12
px-4
flex
flex-col
items-center
overflow-hidden
md:col-span-12
md:mx-7
lg:p-12
xl:mx-7"
>
<h2
class="text-[32px]
leading-[36px]
font-medium
tracking-[-2%]
text-white
text-center
md:text-[48px]
md:leading-[52px]
lg:text-[54px]
lg:leading-[1.1]"
>
<span class="text-[#FEC343]">Ideal</span> For Teams Who
</h2>
<div class="flex flex-col lg:flex-row gap-7 mt-12">
{
data.main.fitChecks.map((c) => (
<div class="flex lg:flex-col items-center gap-4 grow basis-0">
<CircleCheck
width={48}
height={48}
stroke="#FEC343"
classNames="min-w-12"
/>
<p class="text-[22px] leading-8 text-white lg:text-center">
<strong>{c.highlight}</strong>
<br />
{c.text}
</p>
</div>
</div>
</div>
))
}
</div>
<Image
src={idealForIllustration}
alt="Illustration of crocodile and developers collaborating"
class="w-[calc(100%+32px)] max-w-[715px] relative top-21"
/>
</div>
</div>
</Section>
15 changes: 0 additions & 15 deletions apps/website/src/pages/staff-augmentation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,3 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =

<Footer />
</Base>

<script is:inline>
function handleActionHeroClick() {
window.navScroll = true;
setTimeout(() => {
window.navScroll = false;
}, 1500);
}

document
.querySelectorAll("#book-a-call-action-hero")
.forEach((element) =>
element.addEventListener("click", handleActionHeroClick),
);
</script>