(feat) changed file format

Author: Rupam-Shil

public/assets/media/illustration.webm

@@ -58,13 +58,10 @@ export function Drawer({
 
 		if (isOpen) {
 			document.addEventListener('keydown', handleEscape);
-			// Prevent body scroll when drawer is open
-			document.body.style.overflow = 'hidden';
 		}
 
 		return () => {
 			document.removeEventListener('keydown', handleEscape);
-			document.body.style.overflow = 'unset';
 		};
 	}, [isOpen, onClose]);
 

public/illustration.gif

@@ -1,7 +1,6 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
 import { cn } from '@/lib/utils';
 import { LaunchBadges } from './LaunchBadges';
 
@@ -28,14 +27,16 @@ const HeroText = () => {
 
 const HeroIllustration = () => {
 	return (
-		<div className='mb-8  md:mb-0 md:mt-10 2xl:mt-24 md:ml-20 xl:ml-32 2xl:ml-40'>
-			<Image
-				src='/illustration.gif'
-				alt='Provider-Borrower Illustration animation'
-				width={730}
-				height={730}
-				className='max-w-full w-auto'
-				priority
+		<div className='flex justify-end mb-8 md:mb-0 md:mt-10 2xl:mt-24 md:ml-20 xl:ml-32 2xl:ml-40'>
+			<video
+				src='/assets/media/illustration.webm'
+				autoPlay
+				muted
+				loop
+				playsInline
+				className='max-w-full w-auto h-[200px] sm:h-[300px]'
+				style={{ pointerEvents: 'none' }}
+				preload='auto'
 			/>
 		</div>
 	);

src/components/ui/drawer/Drawer.tsx

@@ -16,13 +16,13 @@ interface StatItemProps {
 }
 
 const StatItem = ({ label, value, isLoading }: StatItemProps) => (
-	<div className='flex flex-col items-center md:items-start'>
+	<div className='flex flex-col items-center md:items-start min-w-[120px] sm:min-w-[140px]'>
 		<p className='text-text-secondary text-sm font-medium font-inter whitespace-nowrap'>
 			{label}
 		</p>
-		<div className='text-badge-success text-center font-inter text-4xl font-semibold mt-1.5 whitespace-nowrap'>
+		<div className='text-badge-success text-center font-inter text-3xl sm:text-4xl font-semibold mt-1.5 whitespace-nowrap'>
 			{isLoading ?
-				<div className='h-10 w-[120px] bg-gradient-to-r from-[#101216] to-[#2B2F35] rounded-md animate-pulse' />
+				<div className='h-9 sm:h-10 w-[120px] bg-gradient-to-r from-[#101216] to-[#2B2F35] rounded-md animate-pulse' />
 			:	value}
 		</div>
 	</div>