Merge pull request #57 from RBND-studio/dev

Merge dev

apps/web/next.config.js

@@ -20,7 +20,7 @@ const nextConfig = {
     optimizePackageImports: ["ui", "icons"],
   },
   images: {
-    formats: ["image/avif", "image/webp"],
+    formats: ["image/webp"],
     remotePatterns: [
       {
         // For placeholder images

apps/web/src/components/header/mobile-menu.tsx

@@ -25,6 +25,7 @@ export const MobileMenu: FC = () => {
         variant="ghost"
       >
         <Menu16 />
+        <span className={css({ srOnly: true })}>Open main menu</span>
       </Button>
       <Box
         backgroundColor="bg"

apps/web/src/components/homepage/analyze/content.tsx

@@ -18,8 +18,8 @@ const mainList: FeatureCardTypes[] = [
       <ThemeImage
         alt="Funnel chart illustration"
         height={720}
-        srcDark="/images/homepage/flow-analytics-dark.png"
-        srcLight="/images/homepage/flow-analytics-light.png"
+        srcDark="/images/homepage/flow-analytics-dark.webp"
+        srcLight="/images/homepage/flow-analytics-light.webp"
         width={1392}
       />
     ),
@@ -36,8 +36,8 @@ const mainList: FeatureCardTypes[] = [
       <ThemeImage
         alt="Error tracking illustration"
         height={720}
-        srcDark="/images/homepage/error-tracking-dark.png"
-        srcLight="/images/homepage/error-tracking-light.png"
+        srcDark="/images/homepage/error-tracking-dark.webp"
+        srcLight="/images/homepage/error-tracking-light.webp"
         width={1392}
       />
     ),

apps/web/src/components/homepage/builder/content.tsx

@@ -19,8 +19,8 @@ const mainList: FeatureCardTypes[] = [
       <ThemeImage
         alt="Flow tooltip illustration"
         height={720}
-        srcDark="/images/homepage/no-code-dark.png"
-        srcLight="/images/homepage/no-code-light.png"
+        srcDark="/images/homepage/no-code-dark.webp"
+        srcLight="/images/homepage/no-code-light.webp"
         width={1392}
       />
     ),
@@ -38,8 +38,8 @@ const mainList: FeatureCardTypes[] = [
       <ThemeImage
         alt="Code implementation illustration"
         height={720}
-        srcDark="/images/homepage/in-code-dark.png"
-        srcLight="/images/homepage/in-code-light.png"
+        srcDark="/images/homepage/in-code-dark.webp"
+        srcLight="/images/homepage/in-code-light.webp"
         width={1392}
       />
     ),
@@ -63,8 +63,8 @@ export const Content: FC = () => {
             <ThemeImage
               alt="Onboarding flow diagram illustration"
               height={792}
-              srcDark="/images/homepage/flow-diagram-dark.png"
-              srcLight="/images/homepage/flow-diagram-light.png"
+              srcDark="/images/homepage/flow-diagram-dark.webp"
+              srcLight="/images/homepage/flow-diagram-light.webp"
               width={2874}
             />
           </Box>

apps/web/src/components/homepage/deliver/content.tsx

@@ -28,8 +28,8 @@ const mainList: FeatureCardTypes[] = [
         <ThemeImage
           alt="Chart illustrating delivery speed"
           height={720}
-          srcDark="/images/homepage/delivery-speed-dark.png"
-          srcLight="/images/homepage/delivery-speed-light.png"
+          srcDark="/images/homepage/delivery-speed-dark.webp"
+          srcLight="/images/homepage/delivery-speed-light.webp"
           width={1392}
         />
         <Text
@@ -68,8 +68,8 @@ const mainList: FeatureCardTypes[] = [
           marginY: "auto",
         })}
         height={720}
-        srcDark="/images/homepage/bundle-size-dark.png"
-        srcLight="/images/homepage/bundle-size-light.png"
+        srcDark="/images/homepage/bundle-size-dark.webp"
+        srcLight="/images/homepage/bundle-size-light.webp"
         width={1392}
       />
     ),

apps/web/src/components/homepage/flows-are-better/content.tsx

@@ -22,8 +22,8 @@ const mainList: FeatureCardTypes[] = [
           },
         })}
         height={552}
-        srcDark="/images/homepage/fast-dark.png"
-        srcLight="/images/homepage/fast-light.png"
+        srcDark="/images/homepage/fast-dark.webp"
+        srcLight="/images/homepage/fast-light.webp"
         width={894}
       />
     ),
@@ -45,8 +45,8 @@ const mainList: FeatureCardTypes[] = [
           },
         })}
         height={552}
-        srcDark="/images/homepage/flexible-dark.png"
-        srcLight="/images/homepage/flexible-light.png"
+        srcDark="/images/homepage/flexible-dark.webp"
+        srcLight="/images/homepage/flexible-light.webp"
         width={894}
       />
     ),
@@ -68,8 +68,8 @@ const mainList: FeatureCardTypes[] = [
           },
         })}
         height={552}
-        srcDark="/images/homepage/privacy-dark.png"
-        srcLight="/images/homepage/privacy-light.png"
+        srcDark="/images/homepage/privacy-dark.webp"
+        srcLight="/images/homepage/privacy-light.webp"
         width={894}
       />
     ),

apps/web/src/components/homepage/hero/hero.tsx

@@ -6,10 +6,10 @@ import { Section } from "components/ui/section";
 import type { ReactElement } from "react";
 import { Text } from "ui";
 
-import heroDarkImg from "./hero-dark.png";
-import heroLightImg from "./hero-light.png";
-import heroMobileDarkImg from "./hero-mobile-dark.png";
-import heroMobileLightImg from "./hero-mobile-light.png";
+import heroDarkImg from "./hero-dark.webp";
+import heroLightImg from "./hero-light.webp";
+import heroMobileDarkImg from "./hero-mobile-dark.webp";
+import heroMobileLightImg from "./hero-mobile-light.webp";
 
 export const Hero = (): ReactElement => {
   return (
@@ -73,6 +73,7 @@ export const Hero = (): ReactElement => {
           fetchPriority="high"
           height={2160}
           placeholder="blur"
+          sizes="100wv"
           srcDark={heroDarkImg}
           srcLight={heroLightImg}
           width={4320}
@@ -97,6 +98,7 @@ export const Hero = (): ReactElement => {
           fetchPriority="high"
           height={471}
           placeholder="blur"
+          sizes="100wv"
           srcDark={heroMobileDarkImg}
           srcLight={heroMobileLightImg}
           width={780}