feat: hero image strip

_codux/boards/hero-image.board.css

@@ -0,0 +1,54 @@
+.root {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+}
+
+.imgBox {
+    flex: 1 1 300px;
+}
+
+.img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.contentBox {
+    flex: 1 1 300px;
+    padding: clamp(15px, 3vw, 30px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: clamp(10px, 2vw, 20px);
+}
+
+.title {
+    font-size: calc(5rem + ((1vw - 20px) * 3));
+}
+
+.description {
+    font-size: clamp(14px, 2vw, 18px);
+    line-height: 1.5;
+    text-wrap: pretty;
+}
+
+.exploreButton {
+    padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px);
+    background-color: #000000;
+    border-radius: 30px;
+    font-size: clamp(14px, 2vw, 18px);
+    cursor: pointer;
+    transition: background-color 0.3s ease-out;
+    align-self: flex-start;
+    color: #ffffff;
+}
+
+.addToCartButton:hover {
+    background-color: #848484;
+    color: #ffffff;
+}

_codux/boards/hero-image.board.tsx

@@ -0,0 +1,29 @@
+import './hero-image.board.css';
+import { createBoard } from '@wixc3/react-board';
+
+export default createBoard({
+    name: 'Hero Image',
+    Board: () => (
+        <div className="root">
+            <div className="imgBox">
+                <img
+                    src="https://static.wixstatic.com/media/8586f3_f6d2538ac6374f71b6dc29511c5cd1a3~mv2.png/v1/fill/w_860,h_800/Frame%206.png"
+                    alt="Delicious Margherita Pizza"
+                    className="img"
+                />
+            </div>
+            <div className="contentBox">
+                <h1 className="title">Write a Title Here</h1>
+                <p className="description">
+                    This is a space to welcome visitors to the site. Grab their attention with copy
+                    that clearly states what the site is about, and add an engaging image or video.
+                </p>
+                <button className="exploreButton">Explore</button>
+            </div>
+        </div>
+    ),
+    environmentProps: {
+        windowWidth: 1269,
+        windowHeight: 760,
+    },
+});