Fix images imports

Author: cdedreuille

apps/frontpage/components/home/share/embed-integrations.tsx

@@ -1,9 +1,17 @@
 import type { FC } from 'react';
-import React, { forwardRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { AspectRatio } from '../../ui/aspect-ratio';
 import { IntegrationsCarousel } from './integrations-carousel';
+import mediumPreview from './images/medium.png';
+import mediumLogo from './images/medium.svg';
+import nextPreview from './images/next.png';
+import nextLogo from './images/next-js.svg';
+import figmaPreview from './images/figma.png';
+import figmaLogo from './images/figma.svg';
+import notionPreview from './images/notion.png';
+import notionLogo from './images/notion.svg';
+import timeFramePicker from './images/time-frame-picker.svg';
 
 const Connector: FC<{ name: string; style: React.CSSProperties }> = ({
   name,
@@ -73,15 +81,15 @@ const embedIntegrations = [
   {
     index: 1,
     name: 'NextJS',
-    image: '/home/share/next-js.svg',
+    image: nextLogo,
     color: '#000',
     media: (
       // transform is to prevent the slight jump before the animation starts
       <AspectRatio ratio={1202 / 910} style={{ transform: 'translate(0, 0)' }}>
-        <img
+        <Image
           alt="Embed stories using iframes in your NextJS sites"
           className="block w-full h-auto"
-          src="/home/share/next.png"
+          src={nextPreview}
         />
         <Connector
           key="nextjs"
@@ -94,14 +102,14 @@ const embedIntegrations = [
   {
     index: 2,
     name: 'Figma',
-    image: '/home/share/figma.svg',
+    image: figmaLogo,
     color: '#000',
     media: (
       <AspectRatio ratio={1202 / 910} style={{ transform: 'translate(0, 0)' }}>
-        <img
+        <Image
           alt="Use the Storybook Connect plugin to embed stories in a Figma file"
           className="block w-full h-auto"
-          src="/home/share/figma.png"
+          src={figmaPreview}
         />
         <Connector
           key="figma"
@@ -114,14 +122,14 @@ const embedIntegrations = [
   {
     index: 3,
     name: 'Notion',
-    image: '/home/share/notion.svg',
+    image: notionLogo,
     color: '#fff',
     media: (
       <AspectRatio ratio={1202 / 910} style={{ transform: 'translate(0, 0)' }}>
-        <img
+        <Image
           alt="Embed stories in Notion documents using the oEmbed support"
           className="block w-full h-auto"
-          src="/home/share/notion.png"
+          src={notionPreview}
         />
         <Connector
           key="notion"
@@ -134,36 +142,33 @@ const embedIntegrations = [
   {
     index: 4,
     name: 'Medium',
-    image: '/home/share/medium.svg',
+    image: mediumLogo,
     color: '#F5C347',
     media: (
       <AspectRatio ratio={1202 / 910} style={{ transform: 'translate(0, 0)' }}>
-        <img
+        <Image
           alt="Embed stories in Medium articles using the oEmbed support"
           className="block w-full h-auto"
-          src="/home/share/medium.png"
+          src={mediumPreview}
         />
         <Connector name="Medium" style={{ top: '53%', left: '28%' }} />
       </AspectRatio>
     ),
   },
 ];
 
-export const EmbedIntegrations = forwardRef<HTMLImageElement>((_, ref) => {
+export const EmbedIntegrations = () => {
   return (
     <div className="w-full relative max-w-[800px] ml-[30px] sm:ml-[30px] md:w-[150%] md:col-[2/3] lg:ml-[120px]">
       <IntegrationsCarousel integrations={embedIntegrations} />
       <Image
         alt=""
         className="block w-[56%] max-w-[440px] h-auto absolute top-[22%] left-[-30%] opacity-100 user-select-none pointer-events-none sm:left-[-60px] lg:[-120px]"
         height="244"
-        ref={ref}
-        src="/home/share/time-frame-picker.svg"
+        src={timeFramePicker}
         style={{ opacity: 0 }}
         width="458"
       />
     </div>
   );
-});
-
-EmbedIntegrations.displayName = 'EmbedIntegrations';
+};

apps/frontpage/public/home/share/arrow.svg apps/frontpage/components/home/share/images/arrow.svg

@@ -1,6 +1,7 @@
 import { cn } from '@repo/utils';
 import type { ComponentProps, ReactNode, FC } from 'react';
 import React, { useState, useRef } from 'react';
+import Image from 'next/image';
 import type { Button } from '../../ui/button';
 
 interface IntegrationProps extends ComponentProps<typeof Button> {
@@ -44,7 +45,7 @@ export const IntegrationsCarousel: FC<IntegrationsCarouselProps> = ({
             type="button"
             {...integration}
           >
-            <img alt={name} src={image} />
+            <Image alt={name || ''} src={image} />
           </button>
         ))}
         <div className="text-zinc-600">+ and more</div>

apps/frontpage/public/home/share/avatar-1.png apps/frontpage/components/home/share/images/avatar-1.png

@@ -2,13 +2,18 @@ import type { FC } from 'react';
 import React from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '@repo/utils';
+import Image from 'next/image';
 import { AspectRatio } from '../../ui/aspect-ratio';
+import avatar1 from './images/avatar-1.png';
+import avatar2 from './images/avatar-2.png';
+import avatar3 from './images/avatar-3.png';
+import avatar4 from './images/avatar-4.png';
 
 const players = {
-  blue: '/home/share/avatar-1.png',
-  red: '/home/share/avatar-2.png',
-  yellow: '/home/share/avatar-3.png',
-  purple: '/home/share/avatar-4.png',
+  blue: avatar1,
+  red: avatar2,
+  yellow: avatar3,
+  purple: avatar4,
 };
 
 interface PlayerProps {
@@ -117,7 +122,7 @@ export const Player: FC<PlayerProps> = ({ x, y, type, delay, count }) => (
           animate: { scale: 2.14285714, opacity: 0.3 },
         }}
       />
-      <img
+      <Image
         alt="Player"
         className="border-2 border-white rounded-[50%] shadow-sm block w-[28%] h-auto absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
         src={players[type]}

apps/frontpage/public/home/share/avatar-2.png apps/frontpage/components/home/share/images/avatar-2.png

@@ -1,88 +1,64 @@
-import React, { forwardRef } from 'react';
-import type { MotionValue } from 'framer-motion';
+import React from 'react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import { Player } from './player';
+import StorybookMockUI from './images/storybook-mock-ui.svg';
+import caret from './images/caret.svg';
+import arrow from './images/arrow.svg';
+import pointerHand from './images/pointer-hand.svg';
+import timeFramePicker from './images/time-frame-picker.svg';
 
 const symbolVariants = {
   initial: { y: 20, opacity: 0 },
   animate: { y: 0, opacity: 1 },
 };
 
-export const PublishIntegrations = forwardRef<
-  HTMLImageElement | null,
-  {
-    timeFrameStyles: {
-      x: MotionValue<string>;
-      y: MotionValue<string>;
-      scale: number;
-      opacity: number;
-      transformOrigin: string;
-    };
-  }
->(({ timeFrameStyles }, ref) => {
+export const PublishIntegrations = () => {
   return (
     <motion.div
-      className="relative w-full max-w-[800px] md:w-[150%] md:col-[2/3]"
+      className="relative w-full max-w-[800px] md:w-[150%]"
       initial="initial"
       viewport={{ once: true }}
       whileInView="animate"
     >
-      <div
-        data-chromatic="ignore"
-        style={{
-          position: 'absolute',
-          top: -64,
-          left: -64,
-          right: 0,
-          bottom: 0,
-          zIndex: '-1',
-        }}
-      />
-      <img
-        alt=""
+      <Image
+        alt="Storybook Mock UI"
         className="block w-full h-auto"
-        src="/home/share/storybook-mock-ui.svg"
-      />
-      <motion.img
-        className="block w-[46%] max-w-[440px] h-auto absolute z-[1] top-[18%] left-[37%] select-none pointer-events-none md:top-[15%] md:left-[25%]"
-        height="244"
-        initial={false}
-        src="/home/share/time-frame-picker.svg"
-        style={timeFrameStyles}
-        width="458"
+        src={StorybookMockUI}
       />
-      <motion.img
+      <Image
+        alt=""
         className="block w-[46%] max-w-[440px] h-auto absolute z-[1] top-[18%] left-[37%] select-none pointer-events-none md:top-[15%] md:left-[25%]"
-        height="244"
-        ref={ref}
-        style={{ opacity: 0 }}
-        width="458"
+        src={timeFramePicker}
       />
-      <motion.img
-        className="absolute top-[10%] left-[32%] w-auto h-[5%]"
-        src="/home/share/pointerhand.svg"
+
+      <motion.div
+        className="absolute top-[10%] left-[32%] w-auto h-[5%] z-10"
         transition={{ duration: 0.4, delay: 0.8 }}
         variants={symbolVariants}
-      />
+      >
+        <Image alt="" src={pointerHand} width={32} />
+      </motion.div>
       <Player count={2} delay={1} type="blue" x="6%" y="-12%" />
-      <motion.img
-        alt=""
-        className="absolute top-[64%] left-[20%] w-auto h-[5%] ms:left-[10%]"
-        src="/home/share/arrow.svg"
+      <motion.div
+        className="absolute top-[64%] left-[20%] w-auto h-[5%] ms:left-[10%] z-10"
         transition={{ duration: 0.4, delay: 1.6 }}
         variants={symbolVariants}
-      />
+      >
+        <Image alt="" src={arrow} width={32} />
+      </motion.div>
       <Player count={4} delay={1.8} type="red" x="-7%" y="45%" />
       <Player count={2} delay={3} type="yellow" x="30%" y="56%" />
-      <motion.img
-        className="absolute top-[20%] left-[66%] w-auto h-[5%]"
-        src="/home/share/caret.svg"
+      <motion.div
+        className="absolute top-[48%] left-[66%] w-auto h-[5%] z-10"
         transition={{ duration: 0.4, delay: 3.6 }}
         variants={symbolVariants}
-      />
+      >
+        <Image alt="" src={caret} width={24} />
+      </motion.div>
       <Player count={1} delay={3.8} type="purple" x="65%" y="9%" />
     </motion.div>
   );
-});
+};
 
 PublishIntegrations.displayName = 'PublishIntegrations';