allaw-ui 2.0.6 → 2.0.8

package/dist/components/atoms/featureCard/featureCard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export type FeatureType = {
+    title: string;
+    image: {
+        src: string;
+        alt: string;
+    };
+    content: string;
+    action?: {
+        href: string;
+        label: string;
+    };
+};
+declare const FeatureCard: React.FC<FeatureType>;
+export default FeatureCard;

package/dist/components/atoms/featureCard/featureCard.js

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./featureCard.module.css";
+import { TertiaryButton } from "../buttons";
+import Image from "next/image";
+import Link from "next/link";
+var FeatureCard = function (_a) {
+    var title = _a.title, image = _a.image, content = _a.content, action = _a.action;
+    return (React.createElement("div", { className: styles.featureCardContainer },
+        React.createElement("div", { className: styles.featureCardContent },
+            React.createElement(Image, { src: image.src, alt: image.alt, className: styles.featureCardImage, width: 200, height: 200 }),
+            React.createElement("div", { className: styles.featureCardTitle },
+                React.createElement("h3", null, title)),
+            React.createElement("div", { className: styles.featureCardDescription },
+                React.createElement("p", null, content))),
+        action && (React.createElement("div", { className: styles.actionButton },
+            React.createElement(Link, { href: action.href, passHref: true },
+                React.createElement(TertiaryButton, { label: action.label }))))));
+};
+export default FeatureCard;

package/dist/components/atoms/featureCard/featureCard.module.css

@@ -0,0 +1,72 @@
+.featureCardContainer {
+  min-height: 500px;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 32px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0px 4px 12px 0px rgba(24, 24, 24, 0.16);
+  text-align: left;
+}
+
+.featureCardContent {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.featureCardImage {
+  object-fit: cover;
+  object-position: center;
+  border-radius: 16px;
+  width: 100%;
+  height: auto;
+  margin-bottom: 32px;
+  aspect-ratio: 16/9;
+  align-self: stretch;
+  position: relative;
+}
+
+.featureCardTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  text-align: center;
+  font-family: Poppins;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-align: left;
+  margin-bottom: 26px;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.featureCardDescription {
+  overflow: hidden;
+  color: var(--Primary-Dark-grey, #456073);
+  text-overflow: ellipsis;
+  word-break: break-word;
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  max-width: 100%;
+  line-height: 140%;
+  margin-bottom: 24px;
+  display: -webkit-box;
+  line-clamp: 4;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+
+@media (max-width: 1060px) {
+  .featureCardTitle {
+    height: auto;
+    margin-bottom: 16px;
+  }
+}

package/dist/components/atoms/featureCard/featureCard.stories.d.ts

@@ -0,0 +1,21 @@
+declare namespace _default {
+    export let title: string;
+    export { FeatureCard as component };
+    export namespace argTypes {
+        namespace image {
+            let control: boolean;
+        }
+        namespace action {
+            let control_1: boolean;
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithoutAction: any;
+export const LongContent: any;
+export const CustomImage: any;
+export const ShortTitle: any;
+export const LongTitle: any;
+import FeatureCard from "./featureCard";

package/dist/components/atoms/featureCard/featureCard.stories.js

@@ -0,0 +1,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import FeatureCard, { FeatureType } from "./featureCard";
+export default {
+    title: "Components/Molecules/FeatureCard",
+    component: FeatureCard,
+    argTypes: {
+        image: {
+            control: false,
+        },
+        action: {
+            control: false,
+        },
+    },
+};
+var Template = function (args) { return React.createElement(FeatureCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    title: "Explore our services",
+    image: {
+        src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Placeholder image",
+    },
+    content: "Discover our tailored services designed to meet your needs. Our platform ensures you get the best solutions effortlessly.",
+    action: {
+        href: "/learn-more",
+        label: "Learn More",
+    },
+};
+export var WithoutAction = Template.bind({});
+WithoutAction.args = {
+    title: "Explore our services",
+    image: {
+        src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Placeholder image",
+    },
+    content: "Discover our tailored services designed to meet your needs. Our platform ensures you get the best solutions effortlessly.",
+};
+export var LongContent = Template.bind({});
+LongContent.args = {
+    title: "Comprehensive Solutions",
+    image: {
+        src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Placeholder image",
+    },
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique augue, a venenatis lorem. Quisque nec consequat quam. Cras vel orci nec quam pellentesque ultricies. Integer facilisis risus id cursus placerat, lacus mi varius nunc, et facilis sem ligula quis arcu. Fusce pharetra libero vel dui pellentesque, vel tincidunt lectus tristique.",
+    action: {
+        href: "/details",
+        label: "View Details",
+    },
+};
+export var CustomImage = Template.bind({});
+CustomImage.args = {
+    title: "Custom Feature",
+    image: {
+        src: "https://images.unsplash.com/photo-1737157998574-2a75f0c52a09?q=80&w=1924&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Custom placeholder image",
+    },
+    content: "This feature showcases custom images with a unique size and layout.",
+    action: {
+        href: "/custom",
+        label: "Explore",
+    },
+};
+export var ShortTitle = Template.bind({});
+ShortTitle.args = {
+    title: "Short",
+    image: {
+        src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Placeholder image",
+    },
+    content: "This is a short title example with brief content.",
+    action: {
+        href: "/short-title",
+        label: "Check Out",
+    },
+};
+export var LongTitle = Template.bind({});
+LongTitle.args = {
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    image: {
+        src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Placeholder image",
+    },
+    content: "This is a short title example with brief content. This is a short title example with brief content  This is a short title example with brief content This is a short title example with brief content This is a short title example with brief contentThis is a short title example with brief content. This is a short title example with brief content  This is a short title example with brief content This is a short title example with brief content This is a short title example with brief contentThis is a short title example with brief content. This is a short title example with brief content  This is a short title example with brief content This is a short title example with brief content This is a short title example with brief contentThis is a short title example with brief content. This is a short title example with brief content  This is a short title example with brief content This is a short title example with brief content This is a short title example with brief content",
+    action: {
+        href: "/short-title",
+        label: "Check Out",
+    },
+};

package/dist/components/molecules/banner/Banner.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export type BannerProps = {
+    tag?: string;
+    title: string;
+    content: string;
+    image?: {
+        src: string;
+        alt: string;
+        horizontalSide: "left" | "right";
+        verticalSide: "top" | "bottom";
+    };
+    action?: {
+        href: string;
+        label: string;
+    };
+    highlightColor: string;
+    backgroundColor: string;
+};
+declare const Banner: React.FC<BannerProps>;
+export default Banner;

package/dist/components/molecules/banner/Banner.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./Banner.module.css";
+var Banner = function (_a) {
+    var tag = _a.tag, title = _a.title, content = _a.content, image = _a.image, action = _a.action, highlightColor = _a.highlightColor, backgroundColor = _a.backgroundColor;
+    var isMobile = typeof window !== "undefined" && window.innerWidth <= 995;
+    return (React.createElement("div", { className: styles.bannerContainer, style: { backgroundColor: backgroundColor } },
+        image && (React.createElement("div", { className: "".concat(styles.imageContainer, " ").concat(isMobile ? styles[image.verticalSide] : styles[image.horizontalSide]) },
+            React.createElement(Image, { src: image.src, alt: image.alt, fill: true, sizes: "(max-width: 995px) 100vw, 400px", className: styles.bannerImageContent }))),
+        React.createElement("div", { className: "".concat(styles.bannerContent, " ").concat(!image ? styles.bannerContentFullWidth : "") },
+            React.createElement("div", { className: styles.bannerHeading },
+                tag && (React.createElement("span", { className: styles.bannerTag, style: { color: highlightColor } }, tag)),
+                React.createElement("h2", { className: styles.bannerTitle }, title)),
+            React.createElement("p", { className: styles.bannerDescription }, content),
+            action && (React.createElement("a", { href: action.href, className: styles.action, style: { background: highlightColor }, "aria-label": action.label },
+                React.createElement("span", { className: styles.actionLabel }, action.label))))));
+};
+export default Banner;

package/dist/components/molecules/banner/Banner.module.css

@@ -0,0 +1,188 @@
+.bannerContainer {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  padding: 64px;
+  gap: 64px;
+  border-radius: 32px;
+  width: 1347px;
+  max-width: 100%;
+  background: #edf3f4;
+}
+
+.bannerContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  width: 100%;
+  max-width: 707px;
+  height: auto;
+}
+
+.bannerContentFullWidth {
+  max-width: 100%;
+}
+
+.imageContainer {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  height: 350px;
+}
+
+.bannerImageContent {
+  object-fit: cover;
+  object-position: center;
+  border-radius: 24px;
+}
+
+.bannerHeading {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+}
+
+.bannerTag {
+  overflow: hidden;
+  color: #2d6176;
+  text-overflow: ellipsis;
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: uppercase;
+}
+
+.bannerTitle {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: Poppins, sans-serif;
+  font-size: 36px;
+  font-weight: 600;
+  max-width: 100%;
+  line-height: 1.4;
+}
+
+.bannerDescription {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  color: var(--Primary-Dark-grey, #456073);
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  max-width: 100%;
+  line-height: normal;
+}
+
+.action {
+  display: flex;
+  height: 48px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 56px;
+  background: #2d6176;
+  max-width: 300px;
+  text-decoration: none;
+}
+
+.action:hover {
+  filter: brightness(95%);
+  transform: scale(1.005);
+}
+
+.actionLabel {
+  color: var(--Primary-Blanc, #fff);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.imageContainer.left {
+  order: 0;
+}
+
+.imageContainer.right {
+  order: 2;
+}
+
+@media (max-width: 995px) {
+  .bannerContainer {
+    flex-direction: column;
+    width: auto;
+    height: 750px;
+    gap: 40px;
+    padding: 40px;
+  }
+
+  .bannerDescription {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+    font-size: 16px;
+  }
+
+  .bannerContent {
+    max-width: 100%;
+    justify-content: space-around;
+    gap: 30px;
+  }
+
+  .imageContainer {
+    width: 341px;
+    height: 293px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  .bannerImageContent {
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .bannerHeading {
+    gap: 10px;
+  }
+
+  .bannerTitle {
+    font-size: 24px;
+  }
+
+  .imageContainer.top {
+    order: -1;
+  }
+
+  .imageContainer.bottom {
+    order: 1;
+  }
+}
+
+@media (max-width: 995px) and (min-width: 500px) {
+  .bannerContainer {
+    gap: 60px;
+    padding: 60px;
+  }
+
+  .imageContainer {
+    width: 400px;
+  }
+}

package/dist/components/molecules/banner/Banner.stories.d.ts

@@ -0,0 +1,30 @@
+declare namespace _default {
+    export let title: string;
+    export { Banner as component };
+    export namespace argTypes {
+        namespace highlightColor {
+            let control: string;
+        }
+        namespace backgroundColor {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace image {
+            let control_2: boolean;
+            export { control_2 as control };
+        }
+        namespace action {
+            let control_3: boolean;
+            export { control_3 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const HorizontalSideLeft: any;
+export const HorizontalSideRight: any;
+export const CustomColors: any;
+export const VerticalSideTop: any;
+export const VerticalSideBottom: any;
+export const LongTextWithLongImage: any;
+import Banner from "./Banner";

package/dist/components/molecules/banner/Banner.stories.js

@@ -0,0 +1,105 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import Banner, { BannerProps } from "./Banner";
+export default {
+    title: "Components/Molecules/Banner",
+    component: Banner,
+    argTypes: {
+        highlightColor: { control: "color" },
+        backgroundColor: { control: "color" },
+        image: {
+            control: false,
+        },
+        action: {
+            control: false,
+        },
+    },
+};
+var Template = function (args) { return React.createElement(Banner, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    tag: "Promotion",
+    title: "Découvrez notre offre spéciale",
+    content: "Acc\u00E9dez \u00E0 des solutions juridiques rapides et adapt\u00E9es \u00E0 vos besoins.\n\n  Consultez des experts qualifi\u00E9s en toute confiance, o\u00F9 que vous soyez.\n\n  Obtenez des r\u00E9ponses claires et pr\u00E9cises \u00E0 vos questions juridiques.\n\n  Rejoignez notre plateforme pour une justice plus accessible \u00E0 tous.",
+    highlightColor: "#FF5733",
+    backgroundColor: "#F8F9FA",
+    action: {
+        href: "/offer",
+        label: "Bouton",
+    },
+};
+export var HorizontalSideLeft = Template.bind({});
+HorizontalSideLeft.args = __assign(__assign({}, Default.args), { image: {
+        src: "https://plus.unsplash.com/premium_photo-1695449439526-9cebdbfa1a2c?q=80&w=2009&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Offre spéciale à gauche",
+        horizontalSide: "left",
+        verticalSide: "top",
+    } });
+export var HorizontalSideRight = Template.bind({});
+HorizontalSideRight.args = __assign(__assign({}, Default.args), { image: {
+        src: "https://plus.unsplash.com/premium_photo-1695449439526-9cebdbfa1a2c?q=80&w=2009&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Offre spéciale à droite",
+        horizontalSide: "right",
+        verticalSide: "top",
+    } });
+export var CustomColors = Template.bind({});
+CustomColors.args = {
+    tag: "Exclusivité",
+    title: "Ne manquez pas notre nouvelle offre",
+    content: "B\u00E9n\u00E9ficiez d'un service juridique personnalis\u00E9 pour r\u00E9pondre \u00E0 vos besoins.\n\n  Consultez nos experts en toute simplicit\u00E9 et obtenez des solutions rapides et efficaces.\n\n  Rejoignez notre plateforme pour acc\u00E9der \u00E0 des offres exclusives.",
+    highlightColor: "#4CAF50",
+    backgroundColor: "#E8F5E9",
+    action: {
+        href: "/exclusive",
+        label: "Découvrir l'offre",
+    },
+    image: {
+        src: "https://images.unsplash.com/photo-1593642532973-d31b6557fa68?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=60",
+        alt: "Exclusivité sur les offres",
+        horizontalSide: "right",
+        verticalSide: "top",
+    },
+};
+export var VerticalSideTop = Template.bind({});
+VerticalSideTop.args = __assign(__assign({}, HorizontalSideLeft.args), { image: {
+        src: "https://plus.unsplash.com/premium_photo-1695449439526-9cebdbfa1a2c?q=80&w=2009&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Image en haut",
+        horizontalSide: "left",
+        verticalSide: "top",
+    } });
+export var VerticalSideBottom = Template.bind({});
+VerticalSideBottom.args = __assign(__assign({}, HorizontalSideRight.args), { image: {
+        src: "https://plus.unsplash.com/premium_photo-1695449439526-9cebdbfa1a2c?q=80&w=2009&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Image en haut",
+        horizontalSide: "right",
+        verticalSide: "bottom",
+    } });
+export var LongTextWithLongImage = Template.bind({});
+LongTextWithLongImage.args = {
+    tag: "Annonce",
+    title: "Découvrez tous les détails",
+    content: "Nous proposons des solutions juridiques sur mesure pour r\u00E9pondre \u00E0 vos besoins sp\u00E9cifiques.\n\n  Notre \u00E9quipe d'experts est disponible pour vous accompagner dans toutes vos d\u00E9marches, qu'il s'agisse de conseils juridiques, de r\u00E9daction de documents ou de repr\u00E9sentation l\u00E9gale.\n\n  Profitez de notre plateforme intuitive pour acc\u00E9der \u00E0 des services rapides, fiables et enti\u00E8rement personnalis\u00E9s.\n\n  Nos services incluent \u00E9galement des guides d\u00E9taill\u00E9s pour vous aider \u00E0 mieux comprendre vos droits et vos obligations.\n\n  N'attendez plus pour b\u00E9n\u00E9ficier de conseils avis\u00E9s et d'un accompagnement complet.\n\n  Rejoignez notre communaut\u00E9 d\u00E8s aujourd'hui et profitez de tous les avantages que nous offrons.",
+    highlightColor: "#FFC107",
+    backgroundColor: "#FFF8E1",
+    action: {
+        href: "/details",
+        label: "Lire la suite",
+    },
+    image: {
+        src: "https://plus.unsplash.com/premium_photo-1693966067170-2835a8a17a18?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Illustration pour long texte",
+        horizontalSide: "right",
+        verticalSide: "top",
+    },
+};

package/dist/components/molecules/billingCount/BillingCount.stories.d.ts

@@ -17,5 +17,5 @@ export namespace WithStartedState {
         }
     }
 }
-import BillingCount from './BillingCount';
-import React from 'react';
+import BillingCount from "./BillingCount";
+import React from "react";

package/dist/components/molecules/billingCount/BillingCount.stories.js

@@ -9,15 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useState } from 'react';
-import BillingCount from './BillingCount';
+import React, { useState } from "react";
+import BillingCount from "./BillingCount";
 export default {
-    title: 'Components/Molecules/BillingCount',
+    title: "Components/Molecules/BillingCount",
     component: BillingCount,
 };
 // Mock function to log the end time
 var onEnd = function (time) {
-    console.log('Billing ended at:', time);
+    console.log("Billing ended at:", time);
 };
 // Template for creating stories
 var Template = function (args) { return React.createElement(BillingCount, __assign({}, args)); };
@@ -29,7 +29,7 @@ export var WithStartedState = function (args) {
     var _a = useState(true), started = _a[0], setStarted = _a[1];
     var handleEnd = function (time) {
         setStarted(false);
-        console.log('Billing ended at:', time);
+        console.log("Billing ended at:", time);
     };
     return React.createElement(BillingCount, { onEnd: handleEnd });
 };
@@ -37,7 +37,7 @@ WithStartedState.story = {
     parameters: {
         docs: {
             description: {
-                story: 'This story demonstrates the BillingCount component with an initially started timer.',
+                story: "This story demonstrates the BillingCount component with an initially started timer.",
             },
         },
     },

package/dist/components/molecules/featureGrid/FeatureGrid.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FeatureType } from "../../atoms/featureCard/featureCard";
+export type FeatureGridProps = {
+    title?: string;
+    features: FeatureType[];
+};
+declare const FeatureGrid: React.FC<FeatureGridProps>;
+export default FeatureGrid;

package/dist/components/molecules/featureGrid/FeatureGrid.js

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./featureGrid.module.css";
+import FeatureCard from "../../atoms/featureCard/featureCard";
+var FeatureGrid = function (_a) {
+    var title = _a.title, features = _a.features;
+    return (React.createElement("div", { className: styles.featureGridWrapper },
+        title && React.createElement("h2", { className: styles.featureGridTitle }, title),
+        React.createElement("div", { className: styles.featureGridContainer }, features.map(function (feature, index) { return (React.createElement("div", { className: styles.featureGridItem, key: index },
+            React.createElement(FeatureCard, { key: index, title: feature.title, image: feature.image, content: feature.content, action: feature.action }))); }))));
+};
+export default FeatureGrid;

package/dist/components/molecules/featureGrid/FeatureGrid.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { FeatureGrid as component };
+}
+export default _default;
+export const Default: any;
+import FeatureGrid from "./FeatureGrid";

package/dist/components/molecules/featureGrid/FeatureGrid.stories.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import FeatureGrid, { FeatureGridProps } from "./FeatureGrid";
+export default {
+    title: "Components/Molecules/FeatureGrid",
+    component: FeatureGrid,
+};
+var Template = function (args) { return React.createElement(FeatureGrid, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    title: "Explore Our Features",
+    features: [
+        {
+            title: "FeatureGrid stories",
+            image: {
+                src: "https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?q=80&w=1896&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                alt: "Placeholder image",
+            },
+            content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique augue, a venenatis lorem. Quisque nec consequat quam.",
+            action: {
+                href: "/learn-more",
+                label: "En savoir plus",
+            },
+        },
+        {
+            title: "Comprehensive Solutions",
+            image: {
+                src: "https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                alt: "Placeholder image",
+            },
+            content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique augue, a venenatis lorem. Quisque nec consequat quam.",
+            action: {
+                href: "/details",
+                label: "En savoir plus",
+            },
+        },
+        {
+            title: "Custom Feature",
+            image: {
+                src: "https://images.unsplash.com/photo-1737157998574-2a75f0c52a09?q=80&w=1924&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                alt: "Custom placeholder image",
+            },
+            content: "This feature showcases custom images with a unique size and layout.",
+            action: {
+                href: "/custom",
+                label: "En savoir plus",
+            },
+        },
+        {
+            title: "Explore our services",
+            image: {
+                src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                alt: "Placeholder image",
+            },
+            content: "Discover our tailored services designed to meet your needs. Our platform ensures you get the best solutions effortlessly.",
+            action: {
+                href: "/learn-more",
+                label: "Learn More",
+            },
+        },
+        {
+            title: "Explore our services",
+            image: {
+                src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                alt: "Placeholder image",
+            },
+            content: "Discover our tailored services designed to meet your needs. Our platform ensures you get the best solutions effortlessly.",
+            action: {
+                href: "/learn-more",
+                label: "Learn More",
+            },
+        },
+        {
+            title: "Explore our services",
+            image: {
+                src: "https://images.unsplash.com/photo-1737229940875-293ed0c4e8af?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                alt: "Placeholder image",
+            },
+            content: "Discover our tailored services designed to meet your needs. Our platform ensures you get the best solutions effortlessly.",
+            action: {
+                href: "/learn-more",
+                label: "Learn More",
+            },
+        },
+    ],
+};

package/dist/components/molecules/featureGrid/featureGrid.module.css

@@ -0,0 +1,72 @@
+.featureGridWrapper {
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100vw;
+}
+
+.featureGridTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  text-align: center;
+  font-family: Poppins;
+  font-size: 46px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  display: flex;
+  height: 68px;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  margin-bottom: 40px;
+}
+
+.featureGridContainer {
+  max-width: 1280px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+}
+
+.featureGridItem {
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 1440px) {
+  .featureGridWrapper {
+    margin-left: 80px;
+    margin-right: 80px;
+    width: calc(100% - 160px);
+  }
+}
+
+@media (max-width: 995px) {
+  .featureGridWrapper {
+    width: unset;
+    margin-left: 26px;
+    margin-right: 26px;
+    width: calc(100% - 52px);
+  }
+
+  .featureGridTitle {
+    margin-bottom: 24px;
+    font-size: 28px;
+  }
+
+  .featureGridContainer {
+    gap: 16px;
+    justify-content: center;
+    grid-template-columns: 1fr;
+  }
+
+  .featureGridItem {
+    flex: 0 1 100%;
+    max-width: 100%;
+  }
+}

package/dist/components/molecules/heroSection/HeroSection.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export type HeroSectionProps = {
+    reverse?: boolean;
+    title: string;
+    content: string;
+    imageBackground: {
+        src: string;
+        alt: string;
+    };
+    imageTop: {
+        src: string;
+        alt: string;
+    };
+    action: {
+        href: string;
+        label: string;
+    };
+};
+declare const HeroSection: React.FC<HeroSectionProps>;
+export default HeroSection;

package/dist/components/molecules/heroSection/HeroSection.js

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./heroSection.module.css";
+import Image from "next/image";
+var HeroSection = function (_a) {
+    var _b = _a.reverse, reverse = _b === void 0 ? false : _b, title = _a.title, content = _a.content, imageBackground = _a.imageBackground, imageTop = _a.imageTop, action = _a.action;
+    return (React.createElement("div", { className: "".concat(styles.heroSection, " ").concat(reverse ? styles.reverse : "") },
+        React.createElement("div", { className: styles.leftSection },
+            React.createElement("div", { className: styles.heroSectionContent },
+                React.createElement("h2", { className: styles.heroSectionTitle }, title),
+                React.createElement("p", { className: styles.heroSectionParagraph }, content),
+                React.createElement("a", { href: action.href, className: styles.action },
+                    React.createElement("span", { className: styles.actionLabel }, action.label)))),
+        React.createElement("div", { className: styles.rightSection },
+            React.createElement("div", { className: styles.heroSectionBgImage },
+                React.createElement(Image, { src: imageBackground.src, alt: imageBackground.alt, className: styles.heroSectionImage, width: 1000, height: 1000 })),
+            React.createElement("div", { className: styles.heroSectionTopImage },
+                React.createElement(Image, { layout: "responsive", width: 615, height: 322, className: styles.heroSectionImage, src: imageTop.src, alt: imageTop.alt })))));
+};
+export default HeroSection;

package/dist/components/molecules/heroSection/HeroSection.stories.d.ts

@@ -0,0 +1,46 @@
+declare namespace _default {
+    export let title: string;
+    export { HeroSection as component };
+    export namespace argTypes {
+        export namespace reverse {
+            let control: string;
+            let description: string;
+        }
+        export namespace title_1 {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { title_1 as title };
+        export namespace content {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export namespace imageBackground {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        export namespace imageTop {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export namespace action {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Reversed: any;
+export const CustomImages: any;
+import HeroSection from "./HeroSection";

package/dist/components/molecules/heroSection/HeroSection.stories.js

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import HeroSection, { HeroSectionProps } from "./HeroSection";
+export default {
+    title: "Components/Molecules/HeroSection",
+    component: HeroSection,
+    argTypes: {
+        reverse: {
+            control: "boolean",
+            description: "Inverse l'ordre des sections (blanche et image)",
+        },
+        title: {
+            control: "text",
+            description: "Titre principal de la section",
+        },
+        content: {
+            control: "text",
+            description: "Contenu descriptif de la section",
+        },
+        imageBackground: {
+            control: "object",
+            description: "Image de fond pour la section droite",
+        },
+        imageTop: {
+            control: "object",
+            description: "Image affichée au-dessus du contenu",
+        },
+        action: {
+            control: "object",
+            description: "Lien d'action avec texte et URL",
+        },
+    },
+};
+var Template = function (args) { return React.createElement(HeroSection, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    reverse: false,
+    title: "Ma vie de freelance, mais en mieux",
+    content: "Recevez des offres de missions en adéquation avec vos compétences, communiquez directement avec 70 000 clients potentiels issus de tous les secteurs et réduisez vos tâches administratives à l'aide de nos outils en ligne.",
+    imageBackground: {
+        src: "https://images.unsplash.com/photo-1711873314952-7a2f19edb96a?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Image de fond",
+    },
+    imageTop: {
+        src: "https://images.prismic.io/malt-cms-marketing/dd99e584-03d7-4988-b503-e77341fd8bad_2022_REBRAND_WEBSITE_HOME_CONTENT-1+%281%29.png?auto=enhanced,format&w=636&h=348",
+        alt: "Image au-dessus du contenu",
+    },
+    action: {
+        href: "/learn-more",
+        label: "Créer mon profil",
+    },
+};
+export var Reversed = Template.bind({});
+Reversed.args = __assign(__assign({}, Default.args), { reverse: true, title: "Ma vie de freelance, mais en mieux", content: "Recevez des offres de missions en adéquation avec vos compétences, communiquez directement avec 70 000 clients potentiels issus de tous les secteurs et réduisez vos tâches administratives à l'aide de nos outils en ligne." });
+export var CustomImages = Template.bind({});
+CustomImages.args = __assign(__assign({}, Default.args), { title: "Ma vie de freelance, mais en mieux", imageBackground: {
+        src: "https://via.placeholder.com/800x600",
+        alt: "Image personnalisée de fond",
+    }, imageTop: {
+        src: "https://via.placeholder.com/200x150",
+        alt: "Image personnalisée au-dessus du contenu",
+    } });

package/dist/components/molecules/heroSection/heroSection.module.css

@@ -0,0 +1,135 @@
+.heroSection {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 675px;
+  overflow: hidden;
+  border: 1px solid black;
+}
+
+.leftSection {
+  flex: 6;
+  background: #fff;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  width: 1400px;
+  padding-right: 40px;
+}
+
+.heroSection.reverse {
+  flex-direction: row-reverse;
+}
+
+.heroSection.reverse .heroSectionTopImage {
+  left: auto;
+  right: 0%;
+}
+
+.heroSection.reverse .leftSection {
+  align-items: flex-start;
+  padding-right: 0;
+  padding-left: 40px;
+}
+
+.rightSection {
+  flex: 4;
+  height: 100%;
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.heroSectionBgImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.heroSectionTopImage {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  width: 90%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.heroSectionContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  height: 350px;
+  width: 80%;
+}
+
+.heroSectionTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: Poppins;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  max-width: 100%;
+}
+
+.heroSectionImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+
+.heroSectionParagraph {
+  color: var(--Primary-Dark-grey, #456073);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.action {
+  display: flex;
+  height: 48px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 56px;
+  background: #2d6176;
+  max-width: 300px;
+  text-decoration: none;
+}
+
+.action:hover {
+  filter: brightness(95%);
+  transform: scale(1.005);
+}
+
+.actionLabel {
+  color: var(--Primary-Blanc, #fff);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}

package/dist/components/molecules/stepper/Stepper.js

@@ -101,9 +101,21 @@ var Stepper = function (_a) {
     }, [onClose]);
     var handleMouseDown = useCallback(function (e) {
         var selectList = document.querySelector('[class*="selectList"]');
+        var datepickerElements = document.querySelectorAll([
+            ".datepicker-portal",
+            ".react-datepicker",
+            ".react-datepicker__month-container",
+            ".react-datepicker__header",
+            ".react-datepicker__day",
+            ".react-datepicker__current-month",
+            ".react-datepicker__month-dropdown",
+            ".react-datepicker__year-dropdown",
+        ].join(","));
+        var isClickOnDatepicker = Array.from(datepickerElements).some(function (element) { return element === null || element === void 0 ? void 0 : element.contains(e.target); });
         if (stepperContainerRef.current &&
             !stepperContainerRef.current.contains(e.target) &&
-            !(selectList === null || selectList === void 0 ? void 0 : selectList.contains(e.target))) {
+            !(selectList === null || selectList === void 0 ? void 0 : selectList.contains(e.target)) &&
+            !isClickOnDatepicker) {
             handleClose();
         }
     }, [handleClose]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",