feat: Introduce mediaMaw prop to MediaBlock, Hero, and FeatureSplit components for setting media maximum width.

Author: ciro-maciel

demo/src/Demo.jsx

@@ -290,6 +290,7 @@ export function Demo() {
                     icon: <IconArrowRight size={20} />,
                 }}
                 image="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
+                mediaMaw={400}
             />
 
             <SocialProof

src/components/FeatureSplit.jsx

@@ -10,8 +10,9 @@ import { CTAButton } from '../primitives/CTAButton.jsx'
  * @param {object} cta   - { label, href, icon, size, variant, color }
  * @param {object} video - { src, width, filter }
  * @param {string} image - image src (alternative to video)
+ * @param {string|number} mediaMaw - max-width for the media element
  */
-export function FeatureSplit({ id, subtitle, title, description, featuresList, cta, video, image, reverse = false, background = 'white' }) {
+export function FeatureSplit({ id, subtitle, title, description, featuresList, cta, video, image, reverse = false, background = 'white', mediaMaw }) {
     const listComponent = featuresList && featuresList.length > 0 && (
         <List
             spacing="md"
@@ -73,6 +74,7 @@ export function FeatureSplit({ id, subtitle, title, description, featuresList, c
             video={video}
             image={image}
             width="80%"
+            maw={mediaMaw}
         />
     )
 

src/components/Hero.jsx

@@ -12,8 +12,9 @@ import { CTAButton } from '../primitives/CTAButton.jsx'
  * @param {object} cta       - { label, href, size, icon, variant, color, px }
  * @param {object} video     - { src, filter, width }
  * @param {string} image     - image src (alternative to video)
+ * @param {string|number} mediaMaw - max-width for the media element
  */
-export function Hero({ subtitle, title, description, cta, video, image, background = 'white' }) {
+export function Hero({ subtitle, title, description, cta, video, image, background = 'white', mediaMaw }) {
     return (
         <Box
             py={{ base: 80, sm: 100, md: 140 }}
@@ -76,6 +77,7 @@ export function Hero({ subtitle, title, description, cta, video, image, backgrou
                     <MediaBlock
                         video={video}
                         image={image}
+                        maw={mediaMaw}
                         alt="Demonstração do produto"
                     />
                 </SimpleGrid>

src/primitives/MediaBlock.jsx

@@ -1,40 +1,48 @@
-import { Box, Center } from "@mantine/core";
+import { Box, Center } from '@mantine/core'
 
 /**
  * MediaBlock - Renders a video or image with consistent styling.
  *
  * @param {object} video  - { src, width, filter }
  * @param {string} image  - Image src (fallback when no video)
  * @param {string} width  - Default width for the media element
+ * @param {string|number} maw - Max-width for the media element
  * @param {string} alt    - Alt text for images / aria-label for videos
  */
-export function MediaBlock({ video, image, width = "100%", alt }) {
-  if (video) {
-    return (
-      <Center>
-        <Box
-          component="video"
-          src={video.src}
-          autoPlay
-          loop
-          muted
-          playsInline
-          aria-label={alt || "Demonstração em vídeo"}
-          w={video.width || width}
-          h="auto"
-          style={{ filter: video.filter || "none" }}
-        />
-      </Center>
-    );
-  }
+export function MediaBlock({ video, image, width = '100%', maw, alt }) {
+    if (video) {
+        return (
+            <Center>
+                <Box
+                    component="video"
+                    src={video.src}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    aria-label={alt || 'Demonstração em vídeo'}
+                    w={video.width || width}
+                    h="auto"
+                    style={{ filter: video.filter || 'none' }}
+                />
+            </Center>
+        )
+    }
 
-  if (image) {
-    return (
-      <Center>
-        <Box component="img" src={image} alt={alt || ""} w={width} h="auto" />
-      </Center>
-    );
-  }
+    if (image) {
+        return (
+            <Center>
+                <Box
+                    component="img"
+                    src={image}
+                    alt={alt || ''}
+                    w={width}
+                    h="auto"
+                    maw={maw}
+                />
+            </Center>
+        )
+    }
 
-  return null;
+    return null
 }