Remove astrojs image

apps/website/astro.config.mjs

@@ -1,9 +1,8 @@
 import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
 import react from '@astrojs/react';
-import vercel from '@astrojs/vercel/serverless'
+import vercel from '@astrojs/vercel'
 import createRemarkPlugin from '@crocoder-dev/remark-plugin';
-import image from '@astrojs/image';
+import tailwindcss from "@tailwindcss/vite";
 
 const classes = {
   titleClass: 'font-bold text-[1.25rem] mt-[2.5rem]',
@@ -18,12 +17,13 @@ export default defineConfig({
   prefetch: true,
   output: 'server',
   adapter: vercel({
+    imageService: true,
   }),
   redirects: {
     '/feed': '/rss.xml',
     '/sitemap': '/sitemap.xml'
   },
-  integrations: [tailwind(), react(), image()],
+  integrations: [tailwindcss(), react()],
   markdown: {
     remarkPlugins: [remarkPlugin],
   },

apps/website/package.json

@@ -3,22 +3,26 @@
   "module": "index.ts",
   "type": "module",
   "dependencies": {
-    "@astrojs/image": "^0.18.0",
-    "@astrojs/react": "^4.1.2",
-    "@astrojs/rss": "^4.0.11",
-    "@astrojs/tailwind": "^6.0.2",
-    "@astrojs/vercel": "^8.1.5",
+    "@astrojs/react": "^4.3.0",
+    "@astrojs/rss": "^4.0.12",
+    "@astrojs/vercel": "^8.2.2",
     "@crocoder-dev/remark-plugin": "*",
-    "@crocoder-dev/tailwind": "*",
-    "astro": "5.7.13",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.11",
+    "astro": "5.12.0",
     "astro-font": "^1.1.0",
+    "autoprefixer": "^10.4.21",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "marked": "^15.0.5",
     "posthog-js": "^1.222.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.4.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "tailwind": "^4.0.0",
+    "tailwind-bootstrap-grid": "^6.0.0"
   },
   "scripts": {
     "dev": "astro dev --port 4321",

packages/tailwind/postcss.config.js → apps/website/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };

apps/website/src/components/Avatar.astro

@@ -1,14 +1,23 @@
 ---
-import { Picture } from "@astrojs/image/components";
+import { getImage } from "astro:assets";
 const { image, name, company, role } = Astro.props;
+
+const optimizedImage = await getImage({
+  src: image.default,
+  width: 72,
+  height: 72,
+  format: 'webp'
+});
 ---
 
 <div class="flex gap-3 col-span-2">
-  <Picture
-    src={image.default}
+  <img
+    src={optimizedImage.src}
     alt={name}
-    widths={[72]}
+    width="72"
+    height="72"
     class="h-[72px] w-[72px]"
+    loading="lazy"
   />
   <span class="text-xl leading-7">
     <strong>{name}</strong><br />

apps/website/src/components/BookACallForm.astro

@@ -3,7 +3,7 @@ import CalcomEmbedInline from "../components/CalcomEmbedInline.astro";
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
 import Section from "./Section.astro";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import meetingImage from "../assets/meeting-croc.png";
 ---
 
@@ -15,11 +15,12 @@ import meetingImage from "../assets/meeting-croc.png";
   <div
     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"
   >
-    <Picture
-      class="object-cover xl:p-6"
+    <Image
+      class="object-cover xl:p-6 md:p-0 p-8"
       src={meetingImage}
-      alt=""
-      widths={[636, 626, 398]}
+      alt="CroCoder team member in a video call consultation"
+      widths={[320, 480, 640, 800, 964]}
+      sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(67vw - 32px), calc(50vw - 28px)"
       loading="lazy"
     />
   </div>

apps/website/src/components/Clients.astro

@@ -10,21 +10,21 @@ import Section from "./Section.astro";
   </h4>
   <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
     <div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
-      <img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+      <img src="/conductor.svg" alt="Conductor logo" class="grayscale opacity-50 w-[200px]" />
       <img
         src="/lynes.svg"
-        alt=""
+        alt="Lynes logo"
         class="grayscale opacity-50 w-[200px] md:hidden xl:block"
       />
       <img
         src="/submix.svg"
-        alt=""
+        alt="Submix logo"
         class="grayscale invert opacity-50 w-[200px]"
       />
-      <img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+      <img src="/sevdesk.svg" alt="SevDesk logo" class="grayscale opacity-50 w-[200px]" />
       <img
         src="/misterspex.svg"
-        alt=""
+        alt="Misterspex logo"
         class="grayscale opacity-50 w-[200px]"
       />
     </div>

apps/website/src/components/ContactUs.astro

@@ -5,6 +5,8 @@ import { grid_classes } from "./_grid";
 import ContactUsForm from "./ContactUsForm.astro";
 import Section from "./Section.astro";
 import SectionTitle from "./SectionTitle.astro";
+import { Image } from "astro:assets";
+import peopleCollaborating from "../assets/people-collaborating.png";
 ---
 
 <Section
@@ -24,12 +26,12 @@ import SectionTitle from "./SectionTitle.astro";
   </div>
   <ContactUsForm />
   <div class="col-span-6 min-xl:col-span-7 hidden lg:block">
-    <img
-      src={contactUsContent.frontmatter.imgPath}
-      sizes={"(max-width: 1280px) 540px, 720px"}
+    <Image
+      src={peopleCollaborating}
+      widths={[540, 720, 800]}
+      sizes="(max-width: 1280px) 540px, 720px"
       alt={contactUsContent.frontmatter.imgAlt}
       loading="eager"
-      width={540}
     />
   </div>
 </Section>

apps/website/src/components/ServiceCard.astro

@@ -1,6 +1,6 @@
 ---
 import classnames from "classnames";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 interface Props {
   idx: number;
@@ -65,7 +65,7 @@ const image = await src();
       class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
     >
       <span class="grid md:flex gap-7 items-center">
-        <img src={iconPath} class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
+        <img src={iconPath} alt="" role="presentation" class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
         <h4
           class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
         >
@@ -75,11 +75,12 @@ const image = await src();
       <div
         class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
       >
-        <Picture
+        <Image
           class="object-cover xl:p-6"
           src={image.default}
           alt={imgAlt}
-          widths={[578]}
+          widths={[320, 480, 578, 640]}
+          sizes="(max-width: 1024px) calc(100vw - 56px), calc(50vw - 28px)"
           loading="lazy"
         />
       </div>

apps/website/src/components/ValueCard.astro

@@ -1,5 +1,5 @@
 ---
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 interface Props {
   idx: number;
@@ -29,18 +29,19 @@ const image = await src();
   class={`col-span-6 rounded-2xl p-7 md:p-12 md:pb-0 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col overflow-hidden lg:h-fit md:col-span-12 xl:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`}
 >
   <div class="flex gap-7 flex-col md:flex-row xl:flex-col mb-5 xl:mb-[61px]">
-    <img class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]" src={icon} alt={icon}>
+    <img class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]" src={icon} alt="" role="presentation">
     <div>
       <h3 class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7">{title}</h3>
       <div class="text-base leading-7 antialiased" set:html={content.html}></div>
     </div>
   </div>
   <div class="flex justify-center">
-    <Picture
+    <Image
       class="mt-auto max-w-[466px] w-full"
       src={image.default}
       alt={img.alt}
-      widths={[466, 342, 312]}
+      widths={[320, 466, 640, 800]}
+      sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), calc(33vw - 28px)"
       loading="lazy"
     />
   </div>

apps/website/src/components/Values.astro

@@ -5,7 +5,7 @@ import SectionTitle from "./SectionTitle.astro";
 import Section from "./Section.astro";
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
-import { getImage } from "@astrojs/image";
+import { getImage } from "astro:assets";
 import bgImage from "../assets/values-main-image.png";
 
 const styles = ["bg-[#FEB534]", "bg-[#607A1A]", "bg-[#F6FCFD]"];

apps/website/src/components/cto/Hero.astro

@@ -2,7 +2,7 @@
 import { grid_classes } from "../_grid";
 import Pill from "../Pill.astro";
 import Section from "../Section.astro";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import heroImage from "../../assets/cto-hero.png";
 ---
 
@@ -57,10 +57,11 @@ import heroImage from "../../assets/cto-hero.png";
       lg:col-start-7
       lg:row-start-1"
     >
-      <Picture
+      <Image
         src={heroImage}
-        alt="CroCoder Hero Image"
-        widths={[1412, 626, 470, 398]}
+        alt="CTO consulting with CroCoder team for strategic technology solutions"
+        widths={[320, 480, 640, 800, 1200, 1412]}
+        sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1024px) calc(100vw - 56px), calc(50vw - 28px)"
         loading="eager"
       />
     </div>

apps/website/src/components/cto/InfoBlock.astro

@@ -5,7 +5,7 @@ const { icon, title, description, className } = Astro.props;
 ---
 
 <div class={classNames("grid auto-rows-min text-white gap-7", className)}>
-  <img src={icon} class="h-[72px] w-[72px] md:h-[90px] md:w-[90px]" />
+  <img src={icon} alt="" role="presentation" class="h-[72px] w-[72px] md:h-[90px] md:w-[90px]" />
   <h3
     class="text-[28px] leading-[30px] md:text-[36px] md:leading-[40px] tracking-tight"
   >

apps/website/src/components/cto/ServiceBlock.astro

@@ -12,7 +12,7 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
     </div>
     <div class="rounded-2xl grid grid-cols-1 lg:grid-cols-2 gap-7 items-start">
       <div class="grid grid-cols-1 gap-y-4 text-left sm:text-left">
-        <img src={iconFirst} alt="" class="w-16 h-16 sm:mx-0" />
+        <img src={iconFirst} alt="" class="w-16 h-16 sm:mx-0" role="presentation" />
         <h4 class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight">
           {titleFirst}
         </h4>
@@ -21,7 +21,7 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
         </span>
       </div>
       <div class="grid grid-cols-1 gap-y-4 text-left sm:text-left">
-        <img src={iconSecond} alt="" class="w-16 h-16 sm:mx-0" />
+        <img src={iconSecond} alt="" class="w-16 h-16 sm:mx-0" role="presentation" />
         <h4 class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight">
           {titleSecond}
         </h4>
@@ -32,5 +32,6 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
     </div>
   </div>
   <img src={image}
+  alt="CroCoder team member illustration"
   class="md:absolute bottom-0 left-0 h-40 sm:h-56 lg:h-80 max-w-xs sm:max-w-md relative max-md:top-12 max-md:mt-12" />
 </div>

apps/website/src/components/cto/Testimonial.astro

@@ -1,13 +1,21 @@
 ---
 import { grid_classes } from "../_grid";
 import Section from "../Section.astro";
+import { getImage } from "astro:assets";
+import raphaelBauerBubble from "../../assets/raphael-bauer-bubble.png";
+
+const optimizedTestimonial = await getImage({
+  src: raphaelBauerBubble,
+  width: 569,
+  height: 547
+});
 ---
 
 <Section className="bg-white" contentClassName={grid_classes}>
   <div
     class="bg-[#F4F4F4] rounded-2xl col-span-6 md:col-span-12 lg:col-span-10 lg:col-start-2 p-12 md:pt-0 md:pr-0 gap-7 grid relative text-secondary md:grid-cols-[auto_1fr_auto]"
   >
-    <img src="/quotes.svg" class="pb-11 md:pt-12" />
+    <img src="/quotes.svg" alt="" role="presentation" class="pb-11 md:pt-12" />
     <div class="md:pt-12 flex flex-col gap-7">
       <p
         class="text-base leading-[26px] tracking-normal md:font-medium md:text-xl md:leading-[30px]"
@@ -25,8 +33,10 @@ import Section from "../Section.astro";
       </p>
     </div>
     <img
-      src="/raphael-bauer-bubble.png"
+      src={optimizedTestimonial.src}
+      alt="Raphael Bauer, Interim CTO testimonial portrait"
       class="absolute top-0 right-0 h-[152px] md:relative md:col-start-3 md:row-start-1 xl:h-72"
+      loading="lazy"
     />
   </div>
 </Section>