allaw-ui 2.1.4 → 2.1.6

package/dist/components/atoms/buttons/IconButton.css

@@ -126,3 +126,22 @@
 .icon-button.largeFilled:not(.custom-color):hover {
   background: var(--grey-venom, #e6edf5);
 }
+
+.icon-button.iconCircle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: transform 0.2s, filter 0.2s;
+  border: 0.5px solid black;
+}
+
+.icon-button.iconCircle:hover {
+  transform: scale(1.01);
+  filter: brightness(80%);
+}

package/dist/components/atoms/buttons/IconButton.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "./IconButton.css";
 import "../../../styles/global.css";
 export interface IconButtonProps {
-    style: "smallFilled" | "largeFilled" | "mediumOutline" | "iconOnly";
+    style: "smallFilled" | "largeFilled" | "mediumOutline" | "iconOnly" | "iconCircle";
     iconName: string;
     color?: string;
     onClick?: () => void;

package/dist/components/atoms/buttons/IconButton.stories.d.ts

@@ -45,4 +45,5 @@ export const SmallFilled: any;
 export const LargeFilled: any;
 export const MediumOutline: any;
 export const IconOnly: any;
+export const IconCircle: any;
 import IconButton from "./IconButton";

package/dist/components/atoms/buttons/IconButton.stories.js

@@ -25,7 +25,13 @@ export default {
         style: {
             control: {
                 type: "select",
-                options: ["smallFilled", "largeFilled", "mediumOutline", "iconOnly"],
+                options: [
+                    "smallFilled",
+                    "largeFilled",
+                    "mediumOutline",
+                    "iconOnly",
+                    "iconCircle",
+                ],
             },
         },
         iconName: {
@@ -74,3 +80,9 @@ IconOnly.args = {
     iconName: "allaw-icon-user",
     onClick: function () { return console.log("IconOnly button clicked"); },
 };
+export var IconCircle = Template.bind({});
+IconCircle.args = {
+    style: "iconCircle",
+    iconName: "allaw-icon-arrow-left",
+    onClick: function () { return console.log("IconCircle button clicked"); },
+};

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

@@ -5,7 +5,7 @@ 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 },
+    return (React.createElement("article", { 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 },

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

@@ -44,6 +44,7 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  height: 55px;
 }
 
 .featureCardDescription {

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

@@ -0,0 +1,2 @@
+export { default as featureCard } from "./featureCard";
+export type { FeatureType } from "./featureCard";

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

@@ -0,0 +1 @@
+export { default as featureCard } from "./featureCard";

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

@@ -1,18 +1,19 @@
 import React from "react";
 import Image from "next/image";
 import styles from "./Banner.module.css";
+import Link from "next/link";
 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 }))),
+    return (React.createElement("section", { className: styles.bannerContainer, style: { backgroundColor: backgroundColor } },
+        image && (React.createElement("figure", { 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 },
+            action && (React.createElement(Link, { href: action.href, className: styles.action, style: { background: highlightColor } },
                 React.createElement("span", { className: styles.actionLabel }, action.label))))));
 };
 export default Banner;

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

@@ -2,11 +2,12 @@
   display: flex;
   justify-content: center;
   flex-direction: row;
-  align-items: center;
+  align-items: stretch;
   padding: 64px 80px;
   gap: 64px;
   border-radius: 32px;
-  width: 1347px;
+  width: 100%;
+  height: auto;
   max-width: 100%;
   background: #edf3f4;
 }
@@ -17,7 +18,6 @@
   align-items: flex-start;
   gap: 24px;
   width: 100%;
-  max-width: 707px;
   height: auto;
 }
 
@@ -28,8 +28,10 @@
 .imageContainer {
   position: relative;
   width: 100%;
+  height: auto;
+  display: flex;
+  align-items: stretch;
   max-width: 400px;
-  height: 350px;
 }
 
 .bannerImageContent {
@@ -50,7 +52,7 @@
   color: #2d6176;
   text-overflow: ellipsis;
   font-family: "Open Sans";
-  font-size: 20px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -66,7 +68,7 @@
   text-overflow: ellipsis;
   white-space: normal;
   color: var(--Primary-Mid-black, #171e25);
-  font-family: "Poppins";
+  font-family: Poppins, sans-serif;
   font-size: 30px;
   font-weight: 600;
   max-width: 100%;
@@ -100,6 +102,7 @@
   background: #2d6176;
   max-width: 300px;
   text-decoration: none;
+  overflow: hidden;
 }
 
 .action:hover {
@@ -114,6 +117,10 @@
   font-style: normal;
   font-weight: 600;
   line-height: normal;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .imageContainer.left {
@@ -128,17 +135,17 @@
   .bannerContainer {
     flex-direction: column;
     width: auto;
-    height: 750px;
     gap: 40px;
     padding: 40px;
+    height: 750px;
   }
 
   .bannerDescription {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 5;
-    line-clamp: 5;
-    font-size: 16px;
+    -webkit-line-clamp: 6;
+    line-clamp: 6;
+    font-size: 14px;
   }
 
   .bannerContent {
@@ -148,8 +155,7 @@
   }
 
   .imageContainer {
-    width: 341px;
-    height: 293px;
+    height: 250px;
     max-width: 100%;
     margin: 0 auto;
   }
@@ -164,7 +170,7 @@
   }
 
   .bannerTitle {
-    font-size: 24px;
+    font-size: 22px;
   }
 
   .imageContainer.top {

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

@@ -27,4 +27,5 @@ export const CustomColors: any;
 export const VerticalSideTop: any;
 export const VerticalSideBottom: any;
 export const LongTextWithLongImage: any;
+export const ShortTextWithLongImage: any;
 import Banner from "./Banner";

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

@@ -103,3 +103,21 @@ LongTextWithLongImage.args = {
         verticalSide: "top",
     },
 };
+export var ShortTextWithLongImage = Template.bind({});
+ShortTextWithLongImage.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",
+    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/banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Banner } from "./Banner";
+export type { BannerProps } from "./Banner";

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

@@ -0,0 +1 @@
+export { default as Banner } from "./Banner";

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

@@ -1,11 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./featureGrid.module.css";
 import FeatureCard from "../../atoms/featureCard/featureCard";
+import IconButton from "../../atoms/buttons/IconButton";
 var FeatureGrid = function (_a) {
     var title = _a.title, features = _a.features;
-    return (React.createElement("div", { className: styles.featureGridWrapper },
+    var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    var handleNext = function () {
+        setCurrentIndex(function (prevIndex) { return (prevIndex + 1) % features.length; });
+    };
+    var handlePrevious = function () {
+        setCurrentIndex(function (prevIndex) {
+            return prevIndex === 0 ? features.length - 1 : prevIndex - 1;
+        });
+    };
+    return (React.createElement("section", { className: styles.featureGridWrapper, "aria-label": "Feature List" },
         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 }))); }))));
+        React.createElement("div", { className: styles.mobileView },
+            React.createElement("div", { className: styles.featureGridItem },
+                React.createElement(FeatureCard, { key: currentIndex, title: features[currentIndex].title, image: features[currentIndex].image, content: features[currentIndex].content, action: features[currentIndex].action })),
+            React.createElement("div", { className: styles.navigationButtons },
+                React.createElement(IconButton, { style: "iconCircle", iconName: "allaw-icon-arrow-left", onClick: handlePrevious }),
+                React.createElement(IconButton, { style: "iconCircle", iconName: "allaw-icon-arrow-right", onClick: handleNext }))),
+        React.createElement("ul", { className: "".concat(styles.featureGridContainer, " ").concat(styles.gridView) }, features.map(function (feature, index) { return (React.createElement("li", { className: styles.featureGridItem, key: index },
+            React.createElement(FeatureCard, { title: feature.title, image: feature.image, content: feature.content, action: feature.action }))); }))));
 };
 export default FeatureGrid;

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

@@ -33,11 +33,38 @@
   gap: 40px;
 }
 
+.mobileView {
+  display: none;
+}
+
+.featureGridContainer,
+.gridView {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  width: 100%;
+  max-width: 1280px;
+}
+
 .featureGridItem {
   display: flex;
   justify-content: center;
 }
 
+.featureGridItem img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
+}
+
+.navigationButtons {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
 @media (max-width: 1440px) {
   .featureGridWrapper {
     margin-left: 80px;
@@ -47,10 +74,25 @@
 }
 
 @media (max-width: 995px) {
+  .mobileView {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .gridView {
+    display: none;
+  }
+
+  .navigationButtons {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+  }
+
   .featureGridWrapper {
-    width: unset;
-    margin-left: 26px;
-    margin-right: 26px;
+    margin: 0 26px;
     width: calc(100% - 52px);
   }
 
@@ -61,7 +103,6 @@
 
   .featureGridContainer {
     gap: 16px;
-    justify-content: center;
     grid-template-columns: 1fr;
   }
 

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

@@ -0,0 +1,2 @@
+export { default as featureGrid } from "./FeatureGrid";
+export type { FeatureGridProps } from "./FeatureGrid";

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

@@ -0,0 +1 @@
+export { default as featureGrid } from "./FeatureGrid";

package/dist/components/molecules/frameCTA/FrameCTA.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export type FrameCTAProps = {
+    title: string;
+    primaryButton: {
+        label: string;
+        href: string;
+    };
+    secondaryButton: {
+        label: string;
+        href: string;
+    };
+    backgroundImage: {
+        src: string;
+        alt: string;
+    };
+};
+declare const FrameCTA: React.FC<FrameCTAProps>;
+export default FrameCTA;

package/dist/components/molecules/frameCTA/FrameCTA.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Link from "next/link";
+import styles from "./frameCTA.module.css";
+import Image from "next/image";
+var FrameCTA = function (_a) {
+    var title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, backgroundImage = _a.backgroundImage;
+    return (React.createElement("section", { className: styles.frameCTAContainer, "aria-labelledby": "cta-title" },
+        React.createElement("div", { className: styles.frameCTABackgroundImage, "aria-hidden": "true" },
+            React.createElement(Image, { src: backgroundImage.src, alt: backgroundImage.alt, layout: "fill", objectFit: "cover", objectPosition: "center", className: styles.frameCTABackground })),
+        React.createElement("div", { className: styles.frameCTAContent },
+            React.createElement("h2", { className: styles.frameCTATitle }, title),
+            React.createElement("div", { className: styles.frameCTAButtonContainer },
+                React.createElement(Link, { href: primaryButton.href, className: styles.frameCTAPrimaryButton },
+                    React.createElement("span", { className: styles.frameCTAButtonLabel }, primaryButton.label)),
+                React.createElement(Link, { href: secondaryButton.href, className: styles.frameCTASecondaryButton },
+                    React.createElement("span", { className: styles.frameCTAButtonLabel }, secondaryButton.label))))));
+};
+export default FrameCTA;

package/dist/components/molecules/frameCTA/FrameCTA.stories.d.ts

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

package/dist/components/molecules/frameCTA/FrameCTA.stories.js

@@ -0,0 +1,35 @@
+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 FrameCTA, { FrameCTAProps } from "./FrameCTA";
+export default {
+    title: "Components/Molecules/FrameCTA",
+    component: FrameCTA,
+};
+var Template = function (args) { return React.createElement(FrameCTA, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    title: "Poppins - SemiBold - 46px souvent sur 2 lignes",
+    primaryButton: {
+        label: "Bouton",
+        href: "/primary",
+    },
+    secondaryButton: {
+        label: "Bouton",
+        href: "/secondary",
+    },
+    backgroundImage: {
+        src: "https://images.unsplash.com/photo-1731862872903-1d39fe0c10f8?q=80&w=2108&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Image de fond arrière plan",
+    },
+};

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

@@ -0,0 +1,134 @@
+.frameCTAContainer {
+  width: 100%;
+  height: 675px;
+  position: relative;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.frameCTABackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 16px;
+}
+
+.frameCTAContent {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  width: 600px;
+  max-width: 600px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 70px;
+}
+
+.frameCTATitle {
+  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: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.frameCTAButtonContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 48px;
+  align-self: stretch;
+}
+
+.frameCTAPrimaryButton {
+  display: flex;
+  height: 48px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+  border-radius: 56px;
+  background: #2d6176;
+}
+
+.frameCTASecondaryButton {
+  display: flex;
+  height: 48px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+  border-radius: 56px;
+  background: var(--Primary-Bleu-Allaw, #25beeb);
+}
+
+.frameCTAButtonLabel {
+  color: var(--Primary-Blanc, #fff);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  max-width: 150px;
+  line-height: normal;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.primaryButton:hover,
+.secondaryButton:hover {
+  filter: brightness(95%);
+  transform: scale(1.005);
+}
+
+@media (max-width: 995px) {
+  .frameCTAContainer {
+    height: 420px;
+  }
+
+  .frameCTAContent {
+    width: 100%;
+    padding: 20px;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .frameCTATitle {
+    font-size: 24px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .frameCTAButtonContainer {
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
+    width: 100%;
+  }
+
+  .frameCTAPrimaryButton,
+  .frameCTASecondaryButton {
+    width: 100%;
+    align-self: center;
+  }
+}

package/dist/components/molecules/frameCTA/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FrameCTA } from "./FrameCTA";
+export type { FrameCTAProps } from "./FrameCTA";

package/dist/components/molecules/frameCTA/index.js

@@ -0,0 +1 @@
+export { default as FrameCTA } from "./FrameCTA";

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

@@ -1,19 +1,22 @@
 import React from "react";
 import styles from "./heroSection.module.css";
 import Image from "next/image";
+import Link from "next/link";
 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 },
+    return (React.createElement("section", { className: "".concat(styles.heroSection, " ").concat(reverse ? styles.reverse : "") },
+        React.createElement("div", { className: styles.leftSection, style: {
+                backgroundImage: "url(".concat(imageBackground.src || "", ")"),
+            } },
             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(Link, { href: action.href, className: styles.action },
                     React.createElement("span", { className: styles.actionLabel }, action.label)))),
-        React.createElement("div", { className: styles.rightSection },
+        React.createElement("aside", { 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(Image, { src: imageBackground.src || "", alt: imageBackground.alt || "", className: styles.heroSectionImage, layout: "fill", objectFit: "cover", objectPosition: "center" })),
             React.createElement("div", { className: styles.heroSectionTopImage },
-                React.createElement(Image, { layout: "responsive", width: 615, height: 322, className: styles.heroSectionImage, src: imageTop.src, alt: imageTop.alt })))));
+                React.createElement(Image, { src: imageTop.src || "", alt: imageTop.alt || "", className: styles.heroSectionImage, width: 615, height: 322 })))));
 };
 export default HeroSection;

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

@@ -41,6 +41,4 @@ declare namespace _default {
 }
 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

@@ -46,28 +46,18 @@ var Template = function (args) { return React.createElement(HeroSection, __assig
 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.",
+    title: "Transformez votre carrière en un clic",
+    content: "Accédez à des opportunités adaptées à vos aspirations, connectez-vous avec des clients du monde entier et simplifiez vos projets grâce à nos outils performants.",
     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",
+        src: "https://images.unsplash.com/photo-1736695796493-699707480bcf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxNDB8fHxlbnwwfHx8fHw%3D",
+        alt: "Personne travaillant sur un ordinateur portable",
     },
     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",
+        src: "https://images.unsplash.com/photo-1737334969823-8d6a43b4cba1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Graphiques montrant une croissance",
     },
     action: {
-        href: "/learn-more",
-        label: "Créer mon profil",
+        href: "/join-now",
+        label: "Rejoignez-nous",
     },
 };
-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

@@ -4,11 +4,10 @@
   width: 100%;
   height: 675px;
   overflow: hidden;
-  border: 1px solid black;
 }
 
 .leftSection {
-  flex: 6;
+  flex: 5;
   background: #fff;
   height: 100%;
   display: flex;
@@ -17,6 +16,9 @@
   justify-content: center;
   width: 1400px;
   padding-right: 40px;
+  background-color: none;
+  background-size: cover;
+  background-position: center;
 }
 
 .heroSection.reverse {
@@ -35,7 +37,7 @@
 }
 
 .rightSection {
-  flex: 4;
+  flex: 5;
   height: 100%;
   position: relative;
   background-size: cover;
@@ -65,7 +67,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 24px;
+  gap: 22px;
   height: 350px;
   width: 80%;
 }
@@ -73,7 +75,7 @@
 .heroSectionTitle {
   color: var(--Primary-Mid-black, #171e25);
   font-family: Poppins;
-  font-size: 36px;
+  font-size: 30px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -82,6 +84,7 @@
   line-clamp: 2;
   -webkit-line-clamp: 2;
   max-width: 100%;
+  overflow: hidden;
 }
 
 .heroSectionImage {
@@ -102,7 +105,7 @@
   white-space: normal;
   text-overflow: ellipsis;
   font-family: "Open Sans";
-  font-size: 20px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -118,6 +121,8 @@
   background: #2d6176;
   max-width: 300px;
   text-decoration: none;
+  width: 100%;
+  overflow: hidden;
 }
 
 .action:hover {
@@ -132,4 +137,51 @@
   font-style: normal;
   font-weight: 600;
   line-height: normal;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 995px) {
+  .heroSection {
+    max-height: 420px;
+  }
+
+  .leftSection {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    align-items: center;
+    padding: 0;
+  }
+
+  .rightSection {
+    display: none;
+  }
+
+  .heroSectionContent {
+    padding: 20px;
+    border-radius: 8px;
+    width: 95%;
+  }
+
+  .heroSectionTitle {
+    font-size: 26px;
+    margin-bottom: 20px;
+  }
+
+  .heroSectionParagraph {
+    margin-bottom: 10px;
+  }
+}
+
+@media (min-width: 996px) {
+  .leftSection {
+    background: none !important;
+    background-color: #fff;
+    background-size: auto;
+    background-position: initial;
+    background-repeat: initial;
+  }
 }

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

@@ -0,0 +1,2 @@
+export { default as HeroSection } from "./HeroSection";
+export type { HeroSectionProps } from "./HeroSection";

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

@@ -0,0 +1 @@
+export { default as HeroSection } from "./HeroSection";

package/dist/index.d.ts

@@ -64,8 +64,6 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
 export type { PaginationProps } from "./components/molecules/pagination/Pagination";
-export { default as Banner } from "./components/molecules/banner/Banner";
-export type { BannerProps } from "./components/molecules/banner/Banner";
 export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
 export type { BlogHeaderProps } from "./components/molecules/blogHeader/BlogHeader";
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
@@ -76,3 +74,11 @@ export { default as blogTextImageBlock } from "./components/molecules/blogTextIm
 export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
 export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
 export type { BlogFooterProps } from "./components/molecules/blogFooter/BlogFooter";
+export { default as Banner } from "./components/molecules/banner/Banner";
+export type { BannerProps } from "./components/molecules/banner/Banner";
+export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
+export type { FeatureGridProps } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
+export type { HeroSectionProps } from "./components/molecules/heroSection/HeroSection";
+export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";
+export type { FrameCTAProps } from "./components/molecules/frameCTA/FrameCTA";

package/dist/index.js

@@ -80,10 +80,13 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 // Pagination
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
-export { default as Banner } from "./components/molecules/banner/Banner";
 // Blog
 export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
 export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
 export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
+export { default as Banner } from "./components/molecules/banner/Banner";
+export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
+export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";

package/package.json

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