chore(components): add two components

Author: svdimitr

examples/ecommerce-jewellery-store/src/components/BackgroundImage.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@progress/kendo-react-buttons";
+
+type BackgroundImageProps = {
+  title: string;
+  subtitle: string;
+  buttonText: string;
+  img: string;
+};
+
+export const BackgroundImage = (props: BackgroundImageProps) => {
+  const { img, title, subtitle, buttonText } = props;
+
+  return (
+    <section
+      className="k-h-full k-w-full k-bg-cover"
+      style={{
+        backgroundImage: `url(${img})`,
+        backgroundColor: "",
+      }}
+    >
+      <div className="k-w-full k-h-full k-d-flex k-flex-col k-justify-content-center k-align-items-center" style={{
+        backgroundColor: "rgba(0, 0, 0, 0.3)"
+      }}>
+        <div className="k-text-center k-text-white">
+          <h1
+            className="k-h1 k-font-bold"
+            style={{
+              marginTop: "190px",
+            }}
+          >
+            {title}
+          </h1>
+          <p className="k-font-size-lg k-mb-4 k-font-bold">{subtitle}</p>
+          <Button themeColor="primary" className="k-mb-4">
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};

examples/ecommerce-jewellery-store/src/components/OrderedImageCard.tsx

@@ -0,0 +1,34 @@
+type OrderedImgTextProps = {
+  title: string;
+  subtitle: string;
+  contentText: string;
+  img: string;
+  order: string;
+};
+
+export const OrderedImgText = (props: OrderedImgTextProps) => {
+  const { title, subtitle, contentText, img, order } = props;
+
+  return (
+    <section className="k-d-flex k-flex-wrap k-flex-row k-w-full k-h-full k-justify-content-center k-align-items-center k-gap-5px">
+      <span
+        className={`k-w-full k-h-full k-order-${order} k-rounded-lg`}
+        style={{
+          backgroundImage: `url(${img})`,
+          backgroundSize: "cover",
+          flex: "0 0 70%",
+        }}
+      ></span>
+      <div
+        className="k-text-center"
+        style={{
+          flex: "0 0 30%",
+        }}
+      >
+        <div className="k-h2 k-font-bold k-text-black">{title}</div>
+        <div className="k-font-size-xl k-p-5">{subtitle}</div>
+        <span className="k-font-size-md">{contentText}</span>
+      </div>
+    </section>
+  );
+};