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..8be4b197 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%; } }