+
+
+
+ {children.map((child, index) =>
+ React.cloneElement(child, {
+ className: `
+ ${
+ index === currentIndex
+ ? 'block w-full h-auto object-cover'
+ : 'hidden'
+ }
+ `,
+ }),
+ )}
+
+
+ {children.map((element, index) => {
+ return (
+
{
+ setCurrentIndex(index);
+ }}
+ />
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default Carousel;
diff --git a/lib/Hero/Content.js b/lib/Hero/Content.js
new file mode 100644
index 0000000..6985859
--- /dev/null
+++ b/lib/Hero/Content.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const Content = ({
+ classNames = {},
+ title,
+ subTitle,
+ imageUrl,
+ hasOverlay,
+ Image,
+ Button,
+}) => {
+ return (
+ <>
+
+ {Image && (
+
+
+
+ )}
+
+
+
+ {title}
+
+
+
+ {subTitle}
+
+
+
+
+
+
+
+ );
+};
+
+export default Content;
diff --git a/lib/Hero/Hero.js b/lib/Hero/Hero.js
new file mode 100644
index 0000000..60d1701
--- /dev/null
+++ b/lib/Hero/Hero.js
@@ -0,0 +1,96 @@
+import React, { lazy, Suspense } from 'react';
+import PropTypes, { element, elementType, node } from 'prop-types';
+import { Button as ButtonComponent } from '../Button';
+import Content from './Content';
+const Carousel = lazy(() => import('./Carousel'));
+
+const Hero = ({ classNames = {}, hasOverlay, slides, Button }) => {
+ const isSlider = slides.length > 1;
+ return (
+ <>
+ {isSlider ? (
+
Loading...