diff --git a/apps/website/public/calendar-add-streamline-core.svg b/apps/website/public/calendar-add.svg similarity index 100% rename from apps/website/public/calendar-add-streamline-core.svg rename to apps/website/public/calendar-add.svg diff --git a/apps/website/public/check-badge-streamline-ultimate.svg b/apps/website/public/check-badge.svg similarity index 100% rename from apps/website/public/check-badge-streamline-ultimate.svg rename to apps/website/public/check-badge.svg diff --git a/apps/website/public/module-hands-puzzle-streamline-ultimate.svg b/apps/website/public/hands-puzzle.svg similarity index 100% rename from apps/website/public/module-hands-puzzle-streamline-ultimate.svg rename to apps/website/public/hands-puzzle.svg diff --git a/apps/website/public/management-streamline-ultimate.svg b/apps/website/public/management.svg similarity index 100% rename from apps/website/public/management-streamline-ultimate.svg rename to apps/website/public/management.svg diff --git a/apps/website/public/performance-increase-streamline-ultimate.svg b/apps/website/public/performance-increase.svg similarity index 100% rename from apps/website/public/performance-increase-streamline-ultimate.svg rename to apps/website/public/performance-increase.svg diff --git a/apps/website/public/pic-web-dev-topics.png b/apps/website/public/pic-web-dev-topics.png new file mode 100644 index 00000000..09c00c62 Binary files /dev/null and b/apps/website/public/pic-web-dev-topics.png differ diff --git a/apps/website/public/seo-search-graph-streamline-ultimate.svg b/apps/website/public/seo-search-graph.svg similarity index 100% rename from apps/website/public/seo-search-graph-streamline-ultimate.svg rename to apps/website/public/seo-search-graph.svg diff --git a/apps/website/public/shield-check-1-streamline-ultimate.svg b/apps/website/public/shield-check-bw.svg similarity index 100% rename from apps/website/public/shield-check-1-streamline-ultimate.svg rename to apps/website/public/shield-check-bw.svg diff --git a/apps/website/public/shield-check-gold.svg b/apps/website/public/shield-check-gold.svg new file mode 100644 index 00000000..5126d9e3 --- /dev/null +++ b/apps/website/public/shield-check-gold.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/website/public/stopwatch-streamline-ultimate.svg b/apps/website/public/stopwatch-bw.svg similarity index 100% rename from apps/website/public/stopwatch-streamline-ultimate.svg rename to apps/website/public/stopwatch-bw.svg diff --git a/apps/website/public/stopwatch-gold.svg b/apps/website/public/stopwatch-gold.svg new file mode 100644 index 00000000..da2ed2f4 --- /dev/null +++ b/apps/website/public/stopwatch-gold.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/website/public/target-streamline-core.svg b/apps/website/public/target.svg similarity index 100% rename from apps/website/public/target-streamline-core.svg rename to apps/website/public/target.svg diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro index 10bbcb8a..b9db5ecb 100644 --- a/apps/website/src/components/ServiceCard.astro +++ b/apps/website/src/components/ServiceCard.astro @@ -5,74 +5,74 @@ interface Props { idx: number; title: string; content: any; - styles: string; + styles?: string; imgPath: string; imgAlt: string; + iconPath: string; classNames?: string | string[]; } -const { idx, title, content, styles, imgPath, imgAlt, classNames } = +const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } = Astro.props; ---
- {`{0${idx}}`} + +

+ {title} +

+ +
-

- {title} -

+ {imgAlt} +
+
-
- {imgAlt} -
-
diff --git a/apps/website/src/components/Services.astro b/apps/website/src/components/Services.astro index 4ccf75df..2bc1090b 100644 --- a/apps/website/src/components/Services.astro +++ b/apps/website/src/components/Services.astro @@ -5,14 +5,7 @@ import SectionTitle from "./SectionTitle.astro"; import ServiceCard from "./ServiceCard.astro"; import { grid_classes } from "./_grid"; import classNames from "classnames"; - -/* 560px => Height of cards in starting position. 4 cards x 140px of indentation */ -const styles = [ - `bg-[#5362DBE5] lg:[transition:opacity_400ms_ease-out_600ms,transform_800ms_cubic-bezier(.5,.99,.49,.99)] lg:top-[calc(100vh-560px)]`, - `bg-[#424C6DE5] lg:[transition:opacity_400ms_ease-out_400ms,transform_800ms_cubic-bezier(.5,.99,.49,.99)] lg:top-[calc(100vh-560px+140px)]`, - `bg-[#3C3843E5] lg:[transition:opacity_400ms_ease-out_200ms,transform_800ms_cubic-bezier(.5,.99,.49,.99)] lg:top-[calc(100vh-560px+140px+140px)]`, - `bg-[#1E1A1AE5] lg:[transition:opacity_400ms_ease-out,transform_800ms_cubic-bezier(.5,.99,.49,.99)] lg:top-[calc(100vh-560px+140px+140px+140px)]`, -]; +import Pill from "./Pill.astro"; const servicesCollection = await getCollection("services"); @@ -26,214 +19,45 @@ for (const service of servicesCollection) { path: service.data.imgPath, alt: service.data.imgAlt, }, + icon: service.data.iconPath, + background: service.data.bgColor, }; } ---
- - Our Services - -
-
What we can do for you +

- { - services.map((value, idx) => ( - Services +

+
+
+
+
+ { + services.map((value, idx) => ( + - )) - } + iconPath={value.icon} + styles={classNames("will-change-transform", value.background)} + /> + )) + }
+
- - diff --git a/apps/website/src/components/cto/Values.astro b/apps/website/src/components/cto/Values.astro index 2c09014b..f7faae75 100644 --- a/apps/website/src/components/cto/Values.astro +++ b/apps/website/src/components/cto/Values.astro @@ -31,7 +31,7 @@ import InfoBlock from "./InfoBlock.astro"; >
@@ -60,7 +60,7 @@ import InfoBlock from "./InfoBlock.astro"; > @@ -72,7 +72,7 @@ import InfoBlock from "./InfoBlock.astro"; class="bg-[#424C6DE5]/90 p-7 md:p-12 lg:col-span-1 lg:col-start-2 lg:row-start-2 rounded-2xl" > diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro index e77b1533..18ef7cca 100644 --- a/apps/website/src/components/navigation.astro +++ b/apps/website/src/components/navigation.astro @@ -144,11 +144,6 @@ function onScroll() { const currentScrollTop = window.scrollY || document.documentElement.scrollTop; - const valuesWrapper = document.getElementById("values-wrapper"); - const valuesWrapperTop = valuesWrapper ? valuesWrapper.offsetHeight : 0; - - // Do not request animation frame if past the top half of the page - if (currentScrollTop > valuesWrapperTop) return; if (!isScroll) { isScroll = true; diff --git a/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md b/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md index 9aa20f8e..9c6c06e4 100644 --- a/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md +++ b/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md @@ -1,8 +1,8 @@ --- idx: 2 image: "/pic-people-collaborating.png" -iconFirst: "/module-hands-puzzle-streamline-ultimate.svg" -iconSecond: "/performance-increase-streamline-ultimate.svg" +iconFirst: "/hands-puzzle.svg" +iconSecond: "/performance-increase.svg" sectionTitle: "Expert-driven Team Augmentation" titleFirst: "Seamless integration" titleSecond: "Scalable solution" diff --git a/apps/website/src/content/ctoservices/improve-development-tempo.md b/apps/website/src/content/ctoservices/improve-development-tempo.md index de67d85e..35e66dce 100644 --- a/apps/website/src/content/ctoservices/improve-development-tempo.md +++ b/apps/website/src/content/ctoservices/improve-development-tempo.md @@ -1,8 +1,8 @@ --- idx: 3 image: "/crocoder-ill-9-1.png" -iconFirst: "/check-badge-streamline-ultimate.svg" -iconSecond: "/seo-search-graph-streamline-ultimate.svg" +iconFirst: "/check-badge.svg" +iconSecond: "/seo-search-graph.svg" sectionTitle: "Improve Development Tempo" titleFirst: "Improve speed & quality" titleSecond: "Optimize your workflow" diff --git a/apps/website/src/content/ctoservices/proven-framework.md b/apps/website/src/content/ctoservices/proven-framework.md index 044864e9..27702e5e 100644 --- a/apps/website/src/content/ctoservices/proven-framework.md +++ b/apps/website/src/content/ctoservices/proven-framework.md @@ -1,7 +1,7 @@ --- image: "/pic-boy-schedule.png" -iconFirst: "/shield-check-1-streamline-ultimate.svg" -iconSecond: "/stopwatch-streamline-ultimate.svg" +iconFirst: "/shield-check-bw.svg" +iconSecond: "/stopwatch-bw.svg" sectionTitle: "Leading Complex Migrations" titleFirst: "A proven framework" titleSecond: "Less downtime guaranteed" 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 fc1c2fb5..3c4b018c 100644 --- a/apps/website/src/content/services/create-an-evolving-architecture.md +++ b/apps/website/src/content/services/create-an-evolving-architecture.md @@ -1,8 +1,10 @@ --- title: "Create an evolving architecture to withstand trends" -imgPath: "/services-2.png" +imgPath: "/pic-web-dev-topics.png" imgAlt: "Illustration of a video meeting with Crocoder team member" idx: 2 +iconPath: "/performance-increase.svg" +bgColor: "bg-[#424C6DE5]/[0.9]" --- From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands. diff --git a/apps/website/src/content/services/improving-engineering-tempo.md b/apps/website/src/content/services/improving-engineering-tempo.md index 9a33d662..0ab53439 100644 --- a/apps/website/src/content/services/improving-engineering-tempo.md +++ b/apps/website/src/content/services/improving-engineering-tempo.md @@ -1,8 +1,10 @@ --- title: "Improve Engineering tempo" -imgPath: "/services-3.png" +imgPath: "/crocoder-ill-9-1.png" imgAlt: "Illustration of a video meeting with Crocoder team member" idx: 3 +iconPath: "/stopwatch-gold.svg" +bgColor: "bg-[#3C3843E5]/[0.9]" --- By optimising workflows and breaking down tasks, we boost the engineering tempo. We work closely with you to streamline your development processes, ensuring faster, high-quality code delivery making your releases more frequent with less failures in production. 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 2bee8606..5329a95a 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,8 +1,10 @@ --- -title: "Lead migrations without impacting customers" -imgPath: "/services-1.png" +title: "Lead Migrations Without Impacting Customers" +imgPath: "/pic-boy-schedule.png" imgAlt: "Illustration of a video meeting with Crocoder team member" idx: 1 +iconPath: "/shield-check-gold.svg" +bgColor: "bg-[#5362DBE5]/[0.9]" --- Move away from legacy systems and navigate major tech initiatives such as new framework adoptions. Our bottom-up approach helps empower your existing teams to facilitate the change. diff --git a/apps/website/src/content/services/upskill-existing-team.md b/apps/website/src/content/services/upskill-existing-team.md index 78817ed2..4628a45c 100644 --- a/apps/website/src/content/services/upskill-existing-team.md +++ b/apps/website/src/content/services/upskill-existing-team.md @@ -1,8 +1,10 @@ --- title: "Up-Skill existing teams " -imgPath: "/services-2.png" +imgPath: "/pic-people-collaborating.png" imgAlt: "Illustration of a video meeting with Crocoder team member" idx: 4 +iconPath: "/management.svg" +bgColor: "bg-[#1E1A1AE5]/[0.9]" --- Help your team keep up with industry demands through our dedicated guidance and mentorship. We identify and address skill gaps so your developers can be more effective. diff --git a/apps/website/src/layouts/header.astro b/apps/website/src/layouts/header.astro index 4b5aa041..e903920c 100644 --- a/apps/website/src/layouts/header.astro +++ b/apps/website/src/layouts/header.astro @@ -1,103 +1,126 @@ -
-
+
+
  • + + For CTOs + +
    • +
  • + + Blog + +
    • + + +
    + diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css index 777ab169..4e736d8e 100644 --- a/apps/website/src/styles/main.css +++ b/apps/website/src/styles/main.css @@ -13,8 +13,8 @@ } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } } @@ -60,3 +60,34 @@ body:has(nav #nav-menu-toggle:checked) { .prose h3 { margin-top: 2.4rem; } + +@media (min-width: 320px) { + .animation-container { + /* 4 x card height - 3 x negative margin top */ + height: calc((4 * 710px) - (3 * 50)); + } + + .animation-card { + 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; + } +}