From 89ab8fec47daea74f52c56a1fded41edd9f9fff7 Mon Sep 17 00:00:00 2001 From: gloria Date: Thu, 4 Sep 2025 10:56:35 +0200 Subject: [PATCH 1/2] feat: add new service card design --- apps/website/public/arrow-top-right.svg | 3 + apps/website/public/class-lesson.svg | 12 ++ apps/website/public/cog.svg | 4 + .../website/public/seo-search-graph-white.svg | 7 ++ apps/website/public/streamline.svg | 15 +++ apps/website/src/components/BlogLink.astro | 16 +++ apps/website/src/components/CTA.astro | 22 ++++ .../website/src/components/ExternalLink.astro | 23 ++++ .../website/src/components/IconSubtitle.astro | 22 ++++ apps/website/src/components/ServiceCard.astro | 99 ++++++++++------ apps/website/src/components/Services.astro | 11 +- .../create-an-evolving-architecture.md | 18 +-- .../services/improving-engineering-tempo.md | 19 ++- ...d-migrations-without-imacting-customers.md | 19 ++- .../content/services/upskill-existing-team.md | 18 +-- apps/website/src/styles/main.css | 112 +----------------- 16 files changed, 228 insertions(+), 192 deletions(-) create mode 100644 apps/website/public/arrow-top-right.svg create mode 100644 apps/website/public/class-lesson.svg create mode 100644 apps/website/public/cog.svg create mode 100644 apps/website/public/seo-search-graph-white.svg create mode 100644 apps/website/public/streamline.svg create mode 100644 apps/website/src/components/BlogLink.astro create mode 100644 apps/website/src/components/CTA.astro create mode 100644 apps/website/src/components/ExternalLink.astro create mode 100644 apps/website/src/components/IconSubtitle.astro diff --git a/apps/website/public/arrow-top-right.svg b/apps/website/public/arrow-top-right.svg new file mode 100644 index 00000000..fbc278c0 --- /dev/null +++ b/apps/website/public/arrow-top-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/website/public/class-lesson.svg b/apps/website/public/class-lesson.svg new file mode 100644 index 00000000..eb2237c2 --- /dev/null +++ b/apps/website/public/class-lesson.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/website/public/cog.svg b/apps/website/public/cog.svg new file mode 100644 index 00000000..0cada82f --- /dev/null +++ b/apps/website/public/cog.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/website/public/seo-search-graph-white.svg b/apps/website/public/seo-search-graph-white.svg new file mode 100644 index 00000000..dcfa8dc4 --- /dev/null +++ b/apps/website/public/seo-search-graph-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/website/public/streamline.svg b/apps/website/public/streamline.svg new file mode 100644 index 00000000..ba298a6f --- /dev/null +++ b/apps/website/public/streamline.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/website/src/components/BlogLink.astro b/apps/website/src/components/BlogLink.astro new file mode 100644 index 00000000..81fbd218 --- /dev/null +++ b/apps/website/src/components/BlogLink.astro @@ -0,0 +1,16 @@ +--- +import ExternalLink from "./ExternalLink.astro"; + +interface Props { + href: string; + linkText: string; + title: string; +} + +const { href, linkText, title } = Astro.props; +--- + +
+ {title} + +
diff --git a/apps/website/src/components/CTA.astro b/apps/website/src/components/CTA.astro new file mode 100644 index 00000000..bad10b22 --- /dev/null +++ b/apps/website/src/components/CTA.astro @@ -0,0 +1,22 @@ +--- +import classnames from "classnames"; + +interface Props { + id: string; + href: string; + classNames?: string | string[]; +} + +const { id, href, classNames } = Astro.props; +--- + + + + diff --git a/apps/website/src/components/ExternalLink.astro b/apps/website/src/components/ExternalLink.astro new file mode 100644 index 00000000..cf2d7ede --- /dev/null +++ b/apps/website/src/components/ExternalLink.astro @@ -0,0 +1,23 @@ +--- +interface Props { + href: string; + text: string; +} + +const { href, text } = Astro.props; +--- + +
+ + {text} + + Arrow Top Right +
diff --git a/apps/website/src/components/IconSubtitle.astro b/apps/website/src/components/IconSubtitle.astro new file mode 100644 index 00000000..86bb204d --- /dev/null +++ b/apps/website/src/components/IconSubtitle.astro @@ -0,0 +1,22 @@ +--- +interface Props { + subtitle: string; + iconPath: string; +} + +const { subtitle, iconPath } = Astro.props; +--- + + + +

+ {subtitle} +

+ diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro index 7e945583..4b6dfade 100644 --- a/apps/website/src/components/ServiceCard.astro +++ b/apps/website/src/components/ServiceCard.astro @@ -1,32 +1,36 @@ --- -import classnames from "classnames"; import { Image } from "astro:assets"; +import classnames from "classnames"; +import BlogLink from "./BlogLink.astro"; +import CTA from "./CTA.astro"; +import IconSubtitle from "./IconSubtitle.astro"; interface Props { idx: number; title: string; - subtitle: string; + subtitles: Array<{ + iconPath: string; + text: string; + }>; content: any; styles?: string; - imgPath: string; - imgAlt: string; - iconPath: string; + img: { + path: string; + alt?: string; + }; classNames?: string | string[]; + link: { + href: string; + text: string; + title?: string; + }; } -const { - title, - subtitle, - content, - styles, - imgPath, - imgAlt, - iconPath, - classNames, -} = Astro.props; +const { title, subtitles, content, styles, img, classNames, link } = + Astro.props; const images = import.meta.glob("../assets/*.*"); -const src = images[`../assets${imgPath}`] as any as () => Promise<{ +const src = images[`../assets${img.path}`] as any as () => Promise<{ default: ImageMetadata; }>; @@ -53,7 +57,6 @@ const image = await src(); class={classnames( `text-white h-full - lg:h-[620px] p-5 md:p-7 lg:p-12 @@ -65,7 +68,6 @@ const image = await src(); lg:gap-x-7 lg:gap-y-12 lg:grid-cols-2 - lg:grid-rows-[min-content_auto] backdrop-blur-[15px] `, classNames, @@ -74,38 +76,59 @@ const image = await src();
- - + {title} + + +
+
+ { + subtitles.map(({ iconPath, text }) => ( + + )) + } +
+
-
-

- {title} -

-

{subtitle}

+
+ { + link?.title ? ( + + ) : ( + + {link.text} + + + ) + }
- +
+
{imgAlt}
-
diff --git a/apps/website/src/components/Services.astro b/apps/website/src/components/Services.astro index 582de25f..c5e8c7f2 100644 --- a/apps/website/src/components/Services.astro +++ b/apps/website/src/components/Services.astro @@ -14,13 +14,13 @@ for (const service of servicesCollection) { services[service.data.idx - 1] = { content: service.rendered, title: service.data.title, - subtitle: service.data.subtitle, + subtitles: service.data.subtitles, img: { path: service.data.imgPath, alt: service.data.imgAlt, }, - icon: service.data.iconPath, background: service.data.bgColor, + link: service.data.link, }; } --- @@ -48,12 +48,11 @@ for (const service of servicesCollection) { )) } diff --git a/apps/website/src/content/services/create-an-evolving-architecture.md b/apps/website/src/content/services/create-an-evolving-architecture.md index aa1b64d8..cedb3755 100644 --- a/apps/website/src/content/services/create-an-evolving-architecture.md +++ b/apps/website/src/content/services/create-an-evolving-architecture.md @@ -1,18 +1,18 @@ --- title: "Product & Platform Engineering" -subtitle: "Future-Proof Architecture | Scalable Infrastructure" +subtitles: + - iconPath: "/shield-check-gold.svg" + text: "Future-Proof Architecture" + - iconPath: "/performance-increase.svg" + text: "Scalable Infrastructure" imgPath: "/pic-web-dev-topics.png" imgAlt: "Illustration showing web development topics and architecture planning" idx: 2 -iconPath: "/performance-increase.svg" bgColor: "bg-[#424C6DE5]/[0.9]" +link: + href: "/blog/using-lago-to-create-a-flexible-billing-system" + text: "See case study" + title: "Using Lago to Create a Flexible Billing System" --- From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Backed by strong product engineering practices and tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands. -
- -
- - Case Study: Submix Billing System - -
diff --git a/apps/website/src/content/services/improving-engineering-tempo.md b/apps/website/src/content/services/improving-engineering-tempo.md index b76980de..7feca86d 100644 --- a/apps/website/src/content/services/improving-engineering-tempo.md +++ b/apps/website/src/content/services/improving-engineering-tempo.md @@ -1,21 +1,18 @@ --- title: "Workflow & Release Optimization" -subtitle: "Shaping Developer Experience | Development Process Refinement" +subtitles: + - iconPath: "/management.svg" + text: "Shaping Developer Experience" + - iconPath: "/stopwatch-gold.svg" + text: "Development Process Refinement" imgPath: "/croco-charts-2.png" imgAlt: "Charts and graphs showing engineering performance metrics and improvements" idx: 3 iconPath: "/stopwatch-gold.svg" bgColor: "bg-[#3C3843E5]/[0.9]" +link: + href: "/contact" + text: "Schedule a free DevEx audit" --- By optimizing workflows and breaking down tasks, we boost engineering tempo and support your team in delivering higher-quality software, faster. Through hands-on process coaching, placing experienced engineers directly in your team, or deploying a dedicated task force to unblock delivery, we streamline development to make releases more frequent and reduce production failures. -
- -
-

Schedule a free DevEx audit

- - Contact Us - -
diff --git a/apps/website/src/content/services/lead-migrations-without-imacting-customers.md b/apps/website/src/content/services/lead-migrations-without-imacting-customers.md index 510a0834..098a5abb 100644 --- a/apps/website/src/content/services/lead-migrations-without-imacting-customers.md +++ b/apps/website/src/content/services/lead-migrations-without-imacting-customers.md @@ -1,19 +1,18 @@ --- title: "Expert Led Digital Transformation" -subtitle: "Legacy System Migrations | Architecture Refactoring" +subtitles: + - iconPath: "/cog.svg" + text: "Legacy System Migrations" + - iconPath: "/streamline.svg" + text: "Architecture Refactoring" imgPath: "/pic-boy-schedule.png" imgAlt: "Developer working on migration planning and scheduling" idx: 1 -iconPath: "/shield-check-gold.svg" bgColor: "bg-[#5362DBE5]/[0.9]" +link: + href: "/blog/how-we-rebuilt-a-legacy-ui-with-zero-downtime" + text: "See case study" + title: "How We Rebuilt a Legacy UI With Zero Downtime: A Case Study in Component Libraries and Frontend Guidance" --- Move away from legacy systems and navigate major tech initiatives such as new framework adoptions, without disrupting your users. Whether you need end-to-end delivery or staff augmentation, our bottom-up approach empowers your existing teams to drive change sustainably and confidently. -
-
-
- -Case Study: Rebuilding Legacy UI - diff --git a/apps/website/src/content/services/upskill-existing-team.md b/apps/website/src/content/services/upskill-existing-team.md index bf8ca293..bc568005 100644 --- a/apps/website/src/content/services/upskill-existing-team.md +++ b/apps/website/src/content/services/upskill-existing-team.md @@ -1,19 +1,19 @@ --- title: "Team Enablement & Upskilling" -subtitle: "Skill Gap Analysis | Mentorship Programs" +subtitles: + - iconPath: "/seo-search-graph-white.svg" + text: "Skill Gap Analysis" + - iconPath: "/class-lesson.svg" + text: "Mentorship Programs" imgPath: "/croco-group.png" imgAlt: "Team of developers collaborating and learning together" idx: 4 iconPath: "/management.svg" bgColor: "bg-[#1E1A1AE5]/[0.9]" +link: + href: "/blog/migrating-an-enterprise-app-from-angularjs-to-react" + text: "See case study" + title: "Migrating an Enterprise App from AngularJS to React" --- Help your team keep up with industry demands through dedicated mentorship and hands-on support. We offer technical coaching, on-the-job pairing, and structured growth plans to identify and close skill gaps so your developers become more effective and confident with modern technologies and practices. -
-
-
- -Case Study: Sevdesk's Road to React - diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css index f6861161..a2b17b2c 100644 --- a/apps/website/src/styles/main.css +++ b/apps/website/src/styles/main.css @@ -118,7 +118,7 @@ body:has(nav #nav-menu-toggle:checked) { } .prose blockquote { - border-color: #607A1A; + border-color: #607a1a; } @media (min-width: 320px) { @@ -131,116 +131,10 @@ body:has(nav #nav-menu-toggle:checked) { position: sticky; width: 100%; max-height: 710px; - margin-top: -50px; - } - - .animation-card:nth-child(1) { - top: 100px; - margin-top: 0; - } - - .animation-card:nth-child(2) { - top: 220px; - } - - .animation-card:nth-child(3) { - top: 340px; - } - - .animation-card:nth-child(4) { - top: 460px; - } -} - -@media (width < 768px) { - .animation-container { - /* 4 x card height - 3 x negative margin top */ - height: calc((4 * 680px) - (3 * 20)); - } - - .animation-card { - position: sticky; - width: 100%; - max-height: 680px; - margin-top: -21px; - } - - .animation-card:nth-child(1) { - top: 80px; - margin-top: 0; - } - - .animation-card:nth-child(2) { - top: 150px; - } - - .animation-card:nth-child(3) { - top: 220px; - } - - .animation-card:nth-child(4) { - top: 440px; - } -} - -@media (width <= 435px) { - .animation-container { - /* 4 x card height - 3 x negative margin top */ - height: calc((4 * 680px) - (3 * 20)); - } - - .animation-card { - position: sticky; - width: 100%; - max-height: 680px; - margin-top: 0px; - } - - .animation-card:nth-child(1) { top: 100px; - margin-top: 0; - } - - .animation-card:nth-child(2) { - top: 120px; - } - - .animation-card:nth-child(3) { - top: 140px; - } - - .animation-card:nth-child(4) { - top: 0px; - } -} - -@media (width <= 375px) { - .animation-container { - /* 4 x card height - 3 x negative margin top */ - height: calc((4 * 680px) - (3 * 20)); - } - - .animation-card { - position: sticky; - width: 100%; - max-height: 680px; - margin-top: 0px; - } - - .animation-card:nth-child(1) { - top: 80px; - margin-top: 0; - } - - .animation-card:nth-child(2) { - top: 100px; - } - - .animation-card:nth-child(3) { - top: 120px; } - .animation-card:nth-child(4) { - top: 0px; + .animation-card:not(:first-child) { + margin-top: -5%; } } From 5675468f6ba0a32e674973741d1face1faa60c72 Mon Sep 17 00:00:00 2001 From: gloria Date: Thu, 4 Sep 2025 11:04:59 +0200 Subject: [PATCH 2/2] fix: add external arrow icon when button is wide enough --- apps/website/src/components/ServiceCard.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro index 4b6dfade..8be4b197 100644 --- a/apps/website/src/components/ServiceCard.astro +++ b/apps/website/src/components/ServiceCard.astro @@ -109,7 +109,7 @@ const image = await src(); src={"arrow-top-right.svg"} alt="Arrow Top Right" role="presentation" - class="hidden min-[375px]:block sm:h-4 sm:w-4" + class="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4" /> )