Merge pull request #28 from SiegfriedBz/feature/hero-image-only-layout

Feature(fe): improve hero

Author: SiegfriedBz

apps/fe/app/(routes)/(home)/page.tsx

@@ -1,5 +1,4 @@
 import { HeroImage } from "@/app/_components/hero-image"
-import { HeroVideo } from "@/app/_components/hero-video"
 import {
 	TypographyH1,
 	TypographyH2,
@@ -8,7 +7,6 @@ import {
 	TypographyP,
 	TypographySmall,
 } from "@/app/_components/typography"
-import { VideoSkeleton } from "@/app/_components/video-skeleton"
 import { Button } from "@/components/ui/button"
 import {
 	ArrowRight,
@@ -18,7 +16,7 @@ import {
 	UsersRoundIcon,
 } from "lucide-react"
 import Link from "next/link"
-import { Fragment, Suspense } from "react"
+import { Fragment } from "react"
 import { Footer } from "./_components/footer"
 
 const STATUS_DOT = {
@@ -115,15 +113,8 @@ export default function Page() {
 					</div>
 				</div>
 
-				<div className="w-full min-w-0 max-md:flex max-md:flex-1 max-md:items-center md:mt-0 md:flex-1 md:min-w-0">
-					<div className="block w-full pt-4 md:hidden">
-						<HeroImage />
-					</div>
-					<div className="hidden w-full md:block">
-						<Suspense fallback={<VideoSkeleton />}>
-							<HeroVideo />
-						</Suspense>
-					</div>
+				<div className="w-full min-w-0 pt-8 md:flex-[1.3] md:pt-0">
+					<HeroImage />
 				</div>
 			</main>
 

apps/fe/app/_components/hero-image.tsx

@@ -3,14 +3,14 @@ import type { FC } from "react"
 
 export const HeroImage: FC = () => {
 	return (
-		<div className="relative aspect-video max-h-138 w-full overflow-hidden rounded-lg bg-muted/40 shadow-[0_20px_40px_rgba(14,20,27,0.4)]">
+		<div className="relative aspect-video w-full overflow-hidden rounded-lg bg-muted/40 shadow-[0_20px_40px_rgba(14,20,27,0.4)]">
 			<Image
-				src="/images/hero-agentic-protocol.png"
+				src="/images/hero-agentic-protocol.jpg"
 				alt="BioVerify Agentic Protocol Workflow"
 				fill
 				className="object-cover"
 				priority
-				sizes="(max-width: 1023px) 100vw, min(50vw, 36rem)"
+				sizes="(max-width: 767px) 100vw, 55vw"
 			/>
 			<div className="pointer-events-none absolute inset-0 bg-linear-to-t from-background/80 via-transparent to-transparent" />
 		</div>