init HeroTile2

src/components/HeroTile.tsx

+import React from "react"
+
+import { Button, Card, Carousel } from "@onegeo-suite/gatsby-theme-onegeo"
+import Image from "./core/Image"
+import cx from "classix"
+import { merge } from "../utils"
+
+interface Service {
+    name: string
+    description: string
+    image: string
+    url: string
+    option: any
+}
+
+interface Bg {
+    src: string
+}
+interface Props {
+    services?: Array<Service>
+    bgImage?: Array<Bg>
+    size?: "xs" | "base" | "xl" | "full"
+    options?: any
+}
+
+const HeroTile = (props: Props) => {
+    // Data structure (default value)
+    const {
+        services,
+        bgImage = [
+            {
+                src: "https://picsum.photos/1920/600?random=1",
+            },
+            {
+                src: "https://picsum.photos/1920/600?random=2",
+            },
+            {
+                src: "https://picsum.photos/1920/600?random=3",
+            },
+        ],
+        size = "base",
+    } = props
+
+    const options = props.options ?? {}
+    let imageFondList, imageFond
+
+    if (bgImage.length > 1) {
+        imageFondList = bgImage
+        imageFond = [
+            imageFondList.map((image: any) => {
+                return image
+            }),
+        ]
+    } else {
+        imageFond = bgImage[0]
+    }
+    return (
+        <div
+            className={cx(
+                "relative flex h-full flex-col justify-center bg-cover bg-center",
+                size == "base" ? "h-[60vh]" : "",
+                size == "xl" ? "h-[75vh]" : "",
+                size == "xs" ? "h-[50vh]" : ""
+            )}
+        >
+            {bgImage?.length > 1 && (
+                <Carousel
+                    height={`${size == "base" ? "h-[60vh]" : ""} ${
+                        size == "xl" ? "h-[75vh]" : ""
+                    } ${size == "xs" ? "h-[50vh]" : ""}`}
+                    images={imageFond[0]}
+                    animation="fade"
+                    delay={3000}
+                />
+            )}
+            {bgImage?.length === 1 && (
+                <Image
+                    image={bgImage[0].src}
+                    className={cx(
+                        "w-full",
+                        size == "base" ? "h-[60vh]" : "",
+                        size == "xl" ? "h-[75vh]" : "",
+                        size == "xs" ? "h-[50vh]" : ""
+                    )}
+                    objectPosition="top"
+                />
+            )}
+            <div className="absolute top-0 z-10 h-full w-full from-slate-500 opacity-80"></div>
+
+            <div
+                className={`
+                        absolute z-10 grid w-full grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
+                        ${size == "base" ? "h-[60vh]" : ""} 
+                        ${size == "xl" ? "h-[75vh]" : ""} 
+                        ${size == "xs" ? "h-[50vh]" : ""}
+                    `}
+            >
+                {services &&
+                    services.map((service, idx) => {
+                        return (
+                            <Card
+                                key={idx}
+                                layout="top"
+                                size="full"
+                                anime={false}
+                                {...service}
+                                options={merge(
+                                    {
+                                        class: {
+                                            main: "shadow-none bg-transparent pt-40 group/card lg:transition lg:duration-200 ease-in lg:hover:bg-base-100 lg:hover:pt-28",
+                                            body: "text-base-100 lg:group-hover/card:text-base-content",
+                                            image: "m-auto h-40",
+                                            imageComponent: "object-scale-down",
+                                            title: "justify-center text-2xl",
+                                            description:
+                                                "text-xl text-center hidden lg:group-hover/card:block",
+                                            fake: "h-full w-full fill-slate-50 group-hover/card:fill-sky-700",
+                                        },
+                                    },
+                                    merge(options?.card, service?.options)
+                                )}
+                            />
+                        )
+                    })}
+            </div>
+        </div>
+    )
+}
+
+export default HeroTile

src/components/News.tsx

@@ -61,15 +61,8 @@ const News = (props: INews) => {
         },
     },
     */
-    const {
-        title = "",
-        anime,
-        action,
-        size = "xs",
-        layout = "grid",
-        options = {},
-    } = props
-
+    const { title = "", anime, action, size = "xs", layout = "grid" } = props
+    const options = props.options ?? {}
     const oClass = options.class || {}
 
     const news = data.directus.news.map((dtNew) => {
@@ -86,10 +79,11 @@ const News = (props: INews) => {
 
     return (
         <div data-theme={options.theme} className={cx(oClass.main)}>
-            <TitleComponent 
+            <TitleComponent
                 title={title}
                 className="mb-6 p-2 text-2xl font-extrabold tracking-tight sm:text-3xl"
-                options={options} />
+                options={options}
+            />
             {/* <h2
                 className={cx(
                     "mb-6 p-2 text-2xl font-extrabold tracking-tight sm:text-3xl",

src/components/core/Card.tsx

@@ -10,7 +10,7 @@ export interface ICard extends Iimage {
     url?: string
     anime?: boolean
     layout?: "top" | "left" | "full"
-    size?: "xs" | "base" | "xl"
+    size?: "xs" | "base" | "xl" | "full"
     options?: object
 }
 
@@ -39,7 +39,13 @@ const layoutClass = {
         description: "h-32",
         image: "h-72",
     },
-    left_base: {
+    top_full: {
+        main: "rounded-none h-full w-full",
+        title: "",
+        description: "h-32",
+        image: "h-72",
+    },
+    left_bcase: {
         main: "card-side h-52 w-full ",
         title: "",
         description: "",
@@ -67,32 +73,56 @@ const CardContent = (props: ICard) => {
         description,
         image,
         size = "base",
-        options = {},
     } = props
 
+    const options = props.options ?? {}
     const lClass = layoutClass[layout + "_" + size] || layoutClass["top_base"]
 
     // Options from Directus (config user)
-    const oClass = options.class || {}
+    /*
+    options : {
 
+        class: {
+            main:
+            image
+            imageComponent
+            body
+            title
+            description
+        }
+    }
+    */
+    const oClass = options.class || {}
+    const inlineSVG = options.inlineSVG
     return (
         <>
             {image ? (
                 // <figure>
-                //     <img
-                //         src={image.publicURL}
-                //     />
+                //     <svg class='' ... />
+                // </figure>
+                // OR
+                // <figure>
+                //     <img src={image.publicURL} />
                 // </figure>
                 <figure>
-                    <div className={twMerge(lClass.image, oClass.image)}>
-                        <Image
-                            image={image}
-                            className={twMerge(
-                                "h-full w-full object-cover",
-                                oClass.imageComponent
-                            )}
+                    {options.inlineSVG ? (
+                        <div
+                            className={twMerge(lClass.image, oClass.image)}
+                            dangerouslySetInnerHTML={{
+                                __html: options.inlineSVG,
+                            }}
                         />
-                    </div>
+                    ) : (
+                        <div className={twMerge(lClass.image, oClass.image)}>
+                            <Image
+                                image={image}
+                                className={twMerge(
+                                    "h-full w-full object-cover",
+                                    oClass.imageComponent
+                                )}
+                            />
+                        </div>
+                    )}
                 </figure>
             ) : null}
             <div className={twMerge("card-body", oClass.body)}>

src/components/section/component.tsx

@@ -6,6 +6,7 @@ import Map from "../core/Map"
 import News from "../News"
 import Stats from "../Stats"
 import Hero from "../Hero"
+import HeroTile from "../HeroTile"
 import Image from "../core/Image"
 import Data from "../Data"
 import Maps from "../Maps"
@@ -130,7 +131,7 @@ const Component = (props: IComponent) => {
                 : { name: "", url: "" }
 
             return (
-                <Hero
+                <HeroTile
                     services={services!}
                     {...restProps}
                     action={heroaction!}
@@ -143,9 +144,9 @@ const Component = (props: IComponent) => {
             return <Text {...restProps} action={textAction} />
         case "image":
             let img = images?.length ? images[0].src : undefined
-            
+
             var oClass = restProps.options ? restProps.options.class : ""
-            return <Image image={img} className={oClass}/>
+            return <Image image={img} className={oClass} />
         case "mapgl":
             return <div>Carte Maplibre</div>
         case "geoportal":