destructure DevicePreview

src/app/[category]/page.tsx

@@ -28,10 +28,10 @@ export default async function Category({ params }: ICategoryPage) {
     <>
       <div className='container content'>
         <h1>{category.header}</h1>
+        <div dangerouslySetInnerHTML={{__html: category.description}}></div>
         <Listing data={serializedServices} />
         <br />
         <br />
-        <div dangerouslySetInnerHTML={{__html: category.description}}></div>
       </div>
     </>
   );

src/components/DevicePreview/DevicePreview.module.scss

@@ -0,0 +1,89 @@
+.itemImageMobile {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  @media (max-width: 1023px) {
+    width: 100%;
+  }
+
+  @media (max-width: 767px) {
+    top: -116px;
+    scale: 0.8;
+  }
+}
+
+.itemImageScreenMobile {
+
+  cursor: url('/scroll-cursor.svg'), auto;
+
+  img {
+    transition: all .2s ease-in-out;
+  }
+
+  overflow: scroll;
+
+  position: absolute;
+  z-index: 1;
+  height: 497px;
+  width: 231px;
+
+  @media (max-width: 1023px) {
+    left: auto !important;
+  }
+
+  top: 2.4%;
+  background-color: black;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  border-radius: 13px;
+}
+
+.itemImageDeviceMobile {
+  object-fit: contain;
+  position: relative;
+  z-index: 10;
+  pointer-events: none;
+  height: 521px;
+}
+
+
+
+
+.itemImage {
+  position: relative;
+
+  @media (max-width: 1023px) {
+    width: 100%;
+    scale: 1.3;
+  }
+}
+
+.itemImageScreen {
+  cursor: url('/scroll-cursor.svg'), auto;
+
+
+  img {
+    transition: all .2s ease-in-out;
+  }
+
+  position: absolute;
+  z-index: 1;
+  height: 48%;
+  width: 62.1%;
+  left: 19.3%;
+  top: 24.1%;
+  overflow: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

src/components/DevicePreview/DevicePreview.tsx

@@ -0,0 +1,64 @@
+import Image from 'next/image';
+import { FC, HTMLAttributes } from 'react';
+import styles from './DevicePreview.module.scss';
+
+
+export interface IDevicePreviewProps extends HTMLAttributes<HTMLDivElement> {
+  imageType: 'mobile' | 'desktop'
+  image: string,
+  header: string
+}
+
+export const DevicePreview: FC<IDevicePreviewProps> = ({ imageType, image, header, ...rest }) => {
+  return (
+    <div {...rest}>
+      {
+        imageType === 'mobile' ?
+          <div className={styles.itemImageMobile}>
+            <div
+              className={styles.itemImageScreenMobile}
+            >
+              <Image src={image} alt={header}
+                priority
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: '100%', height: 'auto' }}
+              />
+            </div>
+
+            <Image src={`/mobile.png`} alt={header}
+              priority
+              className={styles.itemImageDeviceMobile}
+              width={0}
+              height={0}
+              sizes="100vw"
+              style={{ width: '100%' }}
+            />
+          </div> :
+
+          <div className={styles.itemImage}>
+            <div
+              className={styles.itemImageScreen}
+            >
+              <Image src={image} alt={header}
+                priority
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: '100%', height: 'auto' }}
+              />
+            </div>
+            <Image src={`/laptop-2.png`} alt={header}
+              priority
+              className={styles.itemImageLaptop}
+              width={0}
+              height={0}
+              sizes="100vw"
+              style={{ width: '100%', height: 'auto' }}
+            />
+          </div>
+      }
+    </div>
+  )
+}

src/components/Listing/ListingItem/ListingItem.module.scss

@@ -102,18 +102,6 @@
       .image {
         min-width: 400px;
       }
-
-      .itemImageScreen {
-        img {
-          translate: 0 -100px;
-        }
-      }
-
-      .itemImageScreenMobile {
-        img {
-          translate: 0 -100px;
-        }
-      }
     }
   }
 }

src/components/Listing/ListingItem/ListingItem.tsx

@@ -1,5 +1,5 @@
+import { DevicePreview } from '@/components/DevicePreview/DevicePreview';
 import { getImageFromApiObject } from '@/core/utils/api/getImageFromApiObject';
-import Image from 'next/image';
 import Link from 'next/link';
 import { FC } from 'react';
 import styles from './ListingItem.module.scss';
@@ -15,7 +15,7 @@ export const ListingItem: FC<IListingItemProps> = ({ id, header, description, hr
 
   return (
     <Link className={styles.main} href={href}>
-      <ListingItemImage image={getImageFromApiObject(image)} imageType={imageType} header={header} />
+      <DevicePreview image={getImageFromApiObject(image)} imageType={imageType} header={header} className={styles.image} />
       <div className={styles.text}>
         <h2>{header}</h2>
         <p>{description}</p>
@@ -32,56 +32,3 @@ interface ListingItemImage {
 }
 
 
-const ListingItemImage: FC<ListingItemImage> = ({ image, imageType, header }) => {
-  return (
-    <div className={styles.image}>
-      {
-        imageType === 'mobile' ?
-          <div className={styles.itemImageMobile}>
-            <div
-              className={styles.itemImageScreenMobile}
-            >
-              <Image src={image} alt={header}
-                priority
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: '100%', height: 'auto' }}
-              />
-            </div>
-
-            <Image src={`/mobile.png`} alt={header}
-              priority
-              className={styles.itemImageDeviceMobile}
-              width={0}
-              height={0}
-              sizes="100vw"
-              style={{ width: '100%' }}
-            />
-          </div> :
-
-          <div className={styles.itemImage}>
-            <div
-              className={styles.itemImageScreen}
-            >
-              <Image src={image} alt={header}
-                priority
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: '100%', height: 'auto' }}
-              />
-            </div>
-            <Image src={`/laptop-2.png`} alt={header}
-              priority
-              className={styles.itemImageLaptop}
-              width={0}
-              height={0}
-              sizes="100vw"
-              style={{ width: '100%', height: 'auto' }}
-            />
-          </div>
-      }
-    </div>
-  )
-}

src/components/ListingGrid/ListingGrid.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import styles from './ListingGrid.module.scss'
+import { ListingGridItem } from './ListingGridItem/ListingGridItem';
+
+export interface IListingGridProps {
+data: IService[]
+}
+
+export const ListingGrid: FC<IListingGridProps> = ({data}) => {
+  return (
+    <div className={styles.main}>
+      {data.map(item => <ListingGridItem {...{...item}}/>)}
+    </div>
+  );
+}

src/components/ListingGrid/ListingGridItem/ListingGridItem.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import styles from './ListingGridItem.module.scss'
+
+export interface IListingGridItemProps extends IService{
+
+}
+
+export const ListingGridItem: FC<IListingGridItemProps> = () => {
+  return (
+    <div className={styles.main}>
+
+    </div>
+  );
+}