Add Strum component and update Collage styles

Author: Oleksandr Ratushnyi

public/Strum.mp4

@@ -88,3 +88,32 @@
   grid-column: 3 / 4;
   grid-row: 1 / 4;
 }
+
+/* variant 2 is mirror of variant 1 */
+.variant-2.s-4 { 
+  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-rows: 1fr 2fr 1fr;
+}
+.variant-2.s-4 > *:nth-child(1) {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+}
+.variant-2.s-4 > *:nth-child(2) {
+  grid-column: 2 / 3;
+  grid-row: 3 / 4;
+}
+.variant-2.s-4 > *:nth-child(3) {
+  grid-column: 3 / 4;
+  grid-row: 3 / 4;
+}
+.variant-2.s-4 > *:nth-child(4) {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+}

src/app/page.tsx

@@ -1,19 +1,34 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './Collage.module.css';
+import React from "react";
+import clsx from "clsx";
+import styles from "./Collage.module.css";
 
 interface ICollageProps {
   children: React.ReactNode;
   className?: string;
+  mirror?: boolean;
+  variant?: number;
+  row?: boolean;
 }
 
 export const Collage = function Collage({
   className,
   children,
+  mirror,
+  variant = 1,
+  row,
 }: ICollageProps) {
   const size = React.Children.count(children);
+
   return (
-    <div className={clsx(styles.collage, styles[`s-${size}`], className)}>
+    <div
+      className={clsx(
+        styles.collage,
+        styles[`variant-${variant}`],
+        styles[`s-${size}`],
+        { [styles.mirror]: mirror, [styles.row]: row },
+        className
+      )}
+    >
       {children}
     </div>
   );

src/assets/Strum_Hero.svg

@@ -0,0 +1,21 @@
+.container {
+  width: 100%;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  background-image: url(../../assets/Strum_Hero.svg);
+  background-repeat: repeat;
+  text-decoration: none;
+}
+
+.video {
+  aspect-ratio: 9 / 16;
+  max-width: 20rem;
+  display: block;
+  background-color: yellow;
+  object-fit: contain;
+  margin: 2rem;
+}

src/components/Collage/Collage.module.css

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import styles from "./Strum.module.css";
+import heroImage from "../../assets/Strum_Hero.svg";
+import Image from "next/image";
+
+interface IStrumProps {
+  className?: string;
+}
+
+export const Strum = function Strum({ className }: IStrumProps) {
+  return (
+    <a
+      href="https://strum.azov.one/en?ref=37aa83d8-d5e6-480a-b7d7-48de0f82ff03"
+      target="_blank"
+      className={clsx(styles.container, className)}
+    >
+      <video className={styles.video} autoPlay muted loop playsInline>
+        <source src="/Strum.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </a>
+  );
+};

src/components/Collage/Collage.tsx

@@ -0,0 +1 @@
+export * from './Strum';

src/components/Strum/Strum.module.css

@@ -39,5 +39,5 @@
 }
 
 .ticker strong {
-  color: var(--S500);
+  color: #fb1e44;
 }

src/components/Strum/Strum.tsx

@@ -8,4 +8,5 @@ export * from './Project';
 export * from './Fullwidth';
 export * from './Footer';
 export * from './Certificate';
-export * from './Ticker';
+export * from './Ticker';
+export * from './Strum';