feat: draft, how it works

components/MerchGeneral/Merch/HowItWorks/how-it-works.tsx

@@ -1,14 +1,46 @@
-import styles from '@/components/MerchGeneral/Merch/GeneralInfo/styles.module.scss';
-
-export const HowItWorks = ({ howItWorks }) => {
-  const elems = howItWorks.map(item => (
-      // eslint-disable-next-line no-underscore-dangle
-    <section className={styles.block} key={item._key}>
-      <div className={styles.container}>
-        <h1 className={styles.title}>{item.caption}</h1>
-        <span className={styles.description}>{item.description}</span>
-      </div>
-    </section>
-  ));
-  return <>{elems}</>;
+import {urlForImage} from "@/lib/sanity";
+import Image from 'next/image';
+import {ImagesListItem} from "@/types";
+
+type Props = {
+    howItWorks: ImagesListItem[];
+};
+
+
+export const HowItWorks = ({howItWorks}:Props) => {
+
+    const elems = howItWorks.map(item => (
+        // eslint-disable-next-line no-underscore-dangle
+        <div key={item._key} className="group relative">
+            <div
+                className="min-h-80 aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
+                <Image
+                    src={urlForImage(item).url()}
+                    alt={item.altImg}
+                    fill
+                    className="h-full w-full object-cover object-center lg:h-full lg:w-full"
+                />
+            </div>
+            <div className="mt-4 flex justify-between">
+                <div>
+                    <h3 className="text-sm text-gray-700">
+                        <a href={item.url}>
+                            <span aria-hidden="true" className="absolute inset-0"/>
+                            {item.caption}
+                        </a>
+                    </h3>
+                </div>
+                <p className="text-sm font-medium text-gray-900">{item.description}</p>
+            </div>
+        </div>
+    ));
+    return (
+        <div className="bg-white">
+            <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+                <h2 className="text-2xl text-center font-bold tracking-tight text-gray-900">How it Works?</h2>
+
+                <div
+                    className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">{elems} </div>
+            </div>
+        </div>);
 };

studio/schemas/merch-general.ts

@@ -115,6 +115,11 @@ export const merchGeneral = defineType({
               title: 'URL',
               name: 'url',
               type: 'url'
+            },
+            {
+              name: 'imageAlt',
+              type: 'string',
+              title: 'Image alt'
             }
           ]
         }

types/index.ts

@@ -21,10 +21,12 @@ export type SpeakersT = Base & Link;
 
 export type DonationV1T = Base & Link;
 
-interface ImagesListItem {
+export interface ImagesListItem {
   caption: string;
   description: string;
   url: string;
+  altImg:string;
+  _key:string;
 }
 
 interface PosterListItem {
@@ -64,3 +66,4 @@ export type AccordionItem = {
   content: MDXRemoteSerializeResult;
   title: MDXRemoteSerializeResult;
 };
+