feature(website): initial version of hero video for new landing page (#…

…841)

ui/src/components/typography/typography.tsx

@@ -5,8 +5,9 @@ import { FontColor } from '../../interfaces/color';
 import { Size } from '../../interfaces/size';
 import IntrinsicElements = React.JSX.IntrinsicElements;
 
-export type FontSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>;
+export type FontSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'>;
 const FONT_SIZE_MAP: { [key in FontSize]: string } = {
+	'6xl': 'text-6xl md:text-7xl',
 	'5xl': 'text-4xl md:text-5xl',
 	'4xl': 'text-3xl md:text-4xl',
 	'3xl': 'text-2xl md:text-3xl',
@@ -49,12 +50,12 @@ const FONT_COLOR_MAP: { [key in FontColor]: string } = {
 const LINE_HEIGHTS = ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'] as const;
 export type LineHeight = (typeof LINE_HEIGHTS)[number];
 const LINE_HEIGHT_MAP: { [key in LineHeight]: string } = {
-	none: 'leading-none',
-	tight: 'leading-tight',
-	snug: 'leading-snug',
-	normal: 'leading-normal',
-	relaxed: 'leading-relaxed',
-	loose: 'leading-loose',
+	none: 'leading-none md:leading-none',
+	tight: 'leading-tight md:leading-tight',
+	snug: 'leading-snug md:leading-snug',
+	normal: 'leading-normal  md:leading-normal',
+	relaxed: 'leading-relaxed md:leading-relaxed',
+	loose: 'leading-loose md:leading-loose',
 };
 
 type ElementType = keyof Pick<IntrinsicElements, 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'>;

ui/src/interfaces/size.ts

@@ -1,2 +1,2 @@
-export const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'] as const;
+export const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'] as const;
 export type Size = (typeof SIZES)[number];

website/package.json

@@ -20,6 +20,7 @@
 	"dependencies": {
 		"@heroicons/react": "^2.1.3",
 		"@icons-pack/react-simple-icons": "^9.5.0",
+		"@mux/mux-video-react": "^0.11.0",
 		"@socialincome/shared": "^1.0.0",
 		"@socialincome/ui": "^1.0.0",
 		"@tanstack/react-query": "^5.40.0",

website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import MuxVideo from '@mux/mux-video-react';
+
+const MuxVideoComponent = () => {
+	return (
+		<MuxVideo
+			className="h-full w-full object-cover"
+			playbackId="KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o"
+			// playbackId="QAjK00JKjEY9lojsht02VLckXDzrETx02glBSQ2WR9y3nk" //Portrait video
+			poster="https://image.mux.com/KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o/thumbnail.jpg?time=0"
+			loop
+			muted
+			autoPlay
+			playsInline
+		/>
+	);
+};
+
+export default MuxVideoComponent;

website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx

@@ -1,39 +1,30 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Button, Typography } from '@socialincome/ui';
+import { Button, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
-import Script from 'next/script';
+import MuxVideoComponent from '../(components)/mux-video';
 
-export async function HeroVideo({ lang, region }: DefaultParams) {
+export async function HeroVideo({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2', 'common'],
 	});
 
 	return (
-		<BaseContainer className="mb-80 mt-72 flex h-fit w-fit flex-col items-center justify-center">
-			<div>
-				<div className="relative z-10 m-auto flex w-3/5 flex-col text-center text-white ">
-					<div>
+		<div className="relative h-screen w-full">
+			<MuxVideoComponent />
+			<div className="absolute left-2 right-2 top-[10%] mx-auto max-w-4xl md:top-[30%]">
+				<div className="flex flex-col items-center">
+					<div className="text-center text-white">
 						{translator.t<{ text: string; color?: FontColor }[]>('section-1.title-1').map((title, index) => (
-							<Typography as="span" size="5xl" weight="medium" key={index} color={title.color}>
+							<Typography as="span" size="6xl" weight="medium" key={index} lineHeight="normal" color={title.color}>
 								{title.text}{' '}
 							</Typography>
 						))}
 					</div>
-					<Button className="relative z-10 mt-32 w-1/5 self-center text-center">Handle Jezt</Button>
 				</div>
-				<div className="self-center">
-					<iframe
-						src="https://player.vimeo.com/video/938363500?h=514d15126c&color=ffffff&title=0&byline=0&portrait=0"
-						className="absolute bottom-[calc(1vw-10.5%)] left-0 h-full w-full"
-						frameBorder={0}
-						allow="autoplay; fullscreen; picture-in-picture"
-						allowFullScreen={true}
-					/>
-				</div>
-				<Script src="https://player.vimeo.com/api/player.js"></Script>
 			</div>
-		</BaseContainer>
+			<Button className="absolute inset-x-0 bottom-16 mx-auto w-48">Handle Jetzt</Button>
+		</div>
 	);
 }

website/src/app/[lang]/[region]/v2/layout.tsx

@@ -11,7 +11,6 @@ export default function Layout({ children, params: { lang, region } }: PropsWith
 	return (
 		<div className="theme-v2 min-h-screen">
 			<Navbar lang={lang} region={region} />
-			{/*<main className="pb-8 md:pb-16">{children}</main>*/}
 			<main>{children}</main>
 		</div>
 	);