fix: deploy bugs

MyriadFlow · Aug 17, 2024 · ddd1ca7 · ddd1ca7
1 parent d9f6262
commit ddd1ca7
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 91 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import LeaderBoard from '@/components/leaderboard'
 import AvatarLeaderboard from '@/components/avatar-leaderboard'
 import Footer from '@/components/footer'
+import Image from 'next/image'
 
 import { ConnectWallet } from '@/components/connect-wallet'
 
@@ -12,18 +13,10 @@ export default function Home() {
 			<div className='px-10 flex justify-between pb-[10px] bg-gradient-to-r from-pink-100 via-blue-500 to-purple-500'>
 				<div className='mt-4'>
 					<Link href='/'>
-						<img src='/logo.png' style={{ width: '200px' }} alt='Logo' />
+						<Image src='/logo.png' width={200} height={0} alt='Logo' />
 					</Link>
 				</div>
-				<div
-					style={{
-						display: 'flex',
-						gap: '40px',
-						fontSize: '20px',
-						color: 'white',
-					}}
-					className='mt-6'
-				>
+				<div className='mt-6 flex gap-12 text-[20px] text-white'>
 					<Link href='https://myriadflow.com' target='_blank'>
 						Home
 					</Link>
@@ -61,9 +54,11 @@ export default function Home() {
 				<div className='w-1/2 h-full flex items-center justify-center'>
 					<div className='relative w-80 h-80 rounded-full overflow-hidden'>
 						{/* <img src="MFsquarebackgroun1.png" alt="Background" className="absolute inset-0 w-full h-full object-cover opacity-50" /> */}
-						<img
-							src='heroframe.png'
+						<Image
+							src='/heroframe.png'
 							alt='AI Avatar'
+							height={350}
+							width={350}
 							className='absolute inset-0'
 						/>
 					</div>

diff --git a/src/components/avatar-leaderboard.tsx b/src/components/avatar-leaderboard.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { getAvatars, getFanTokens } from '@/utils/queries'
 import { AvatarType, FanTokenType } from '@/types/types'
+import Image from 'next/image'
 
 const AvatarLeaderboard = () => {
 	const getTopAvatars = (avatars: AvatarType[], fantokens: FanTokenType[]) => {
@@ -58,9 +59,9 @@ const AvatarLeaderboard = () => {
 
 			{topAvatars && (
 				<div className='flex justify-between px-16'>
-					<div className='text-white text-2xl'>
-						This Week's Top Performing AI-Powered Brand Ambassadors
-					</div>
+					<h2 className='text-white text-2xl'>
+						{"This Week's Top Performing AI-Powered Brand Ambassadors"}
+					</h2>
 				</div>
 			)}
 
@@ -72,11 +73,13 @@ const AvatarLeaderboard = () => {
 							<>
 								<Avatar
 									modelSrc={topAvatars?.[1].url!}
-									cameraInitialDistance={4.5}
+									cameraInitialDistance={3.2}
 								/>
 								<div className='relative mt-4'>
-									<img
-										src='./silver.png'
+									<Image
+										height={150}
+										width={150}
+										src='/silver.png'
 										alt='Silver'
 										className='w-full h-auto object-cover'
 									/>
@@ -88,7 +91,7 @@ const AvatarLeaderboard = () => {
 									No. tokens: {topAvatars?.[1].count}
 								</div>
 								<Link
-									href={`/https://webxr-polygon.vercel.app/${topAvatars?.[1].phygital_id}`}
+									href={`https://webxr-polygon.vercel.app/${topAvatars?.[1].phygital_id}`}
 								>
 									<button className='text-center text-2xl px-4 py-2 rounded-full border border-black bg-white cursor-pointer hover:bg-gray-200'>
 										WEBXR
@@ -104,11 +107,13 @@ const AvatarLeaderboard = () => {
 							<>
 								<Avatar
 									modelSrc={topAvatars?.[0].url!}
-									cameraInitialDistance={4.5}
+									cameraInitialDistance={3}
 								/>
 								<div className='relative mt-4'>
-									<img
-										src='./gold.png'
+									<Image
+										height={150}
+										width={150}
+										src='/gold.png'
 										alt='Gold'
 										className='w-full h-auto object-cover'
 									/>
@@ -120,7 +125,7 @@ const AvatarLeaderboard = () => {
 									No. tokens: {topAvatars?.[0].count}
 								</div>
 								<Link
-									href={`/https://webxr-polygon.vercel.app/${topAvatars?.[0].phygital_id}`}
+									href={`https://webxr-polygon.vercel.app/${topAvatars?.[0].phygital_id}`}
 								>
 									<button className='text-center text-2xl px-4 py-2 rounded-full border border-black bg-white cursor-pointer hover:bg-gray-200'>
 										WEBXR
@@ -136,18 +141,20 @@ const AvatarLeaderboard = () => {
 							<>
 								<Avatar
 									modelSrc={topAvatars?.[2].url!}
-									cameraInitialDistance={4.5}
+									cameraInitialDistance={3.5}
 								/>
-								<img
-									src='./bronze.png'
+								<Image
+									height={150}
+									width={150}
+									src='/bronze.png'
 									alt='Bronze'
-									className='w-full h-auto object-cover mt-4'
+									className='w-3/5 object-cover mt-4'
 								/>
 								<div className='text-white flex justify-center mt-4 mb-8'>
 									No. tokens: {topAvatars?.[2].count}
 								</div>
 								<Link
-									href={`/https://webxr-polygon.vercel.app/${topAvatars?.[2].phygital_id}`}
+									href={`https://webxr-polygon.vercel.app/${topAvatars?.[2].phygital_id}`}
 								>
 									<button className='text-center text-2xl px-4 py-2 rounded-full border border-black bg-white cursor-pointer hover:bg-gray-200'>
 										WEBXR
@@ -161,13 +168,17 @@ const AvatarLeaderboard = () => {
 
 			{/* Background with Trophies */}
 			<div className='bg-gray-800 relative'>
-				<img
-					src='./trophy1.png'
+				<Image
+					width={100}
+					height={100}
+					src='/trophy1.png'
 					alt='Left Trophy'
 					className='absolute top-0 left-10 w-24 h-24'
 				/>
-				<img
-					src='./trophy2.png'
+				<Image
+					width={100}
+					height={100}
+					src='/trophy2.png'
 					alt='Right Trophy'
 					className='absolute top-0 right-10 w-24 h-24'
 				/>

diff --git a/src/components/claim-nft-modal.tsx b/src/components/claim-nft-modal.tsx
@@ -28,7 +28,13 @@ export const ClaimNftModal = ({
 						<br />
 						Free NFT Fan Token
 					</p>
-					<img src='./trophy1.png' alt='trophy' className='-mt-16' />
+					<Image
+						src='/trophy1.png'
+						alt='trophy'
+						height={100}
+						width={150}
+						className='-mt-16'
+					/>
 				</div>
 
 				<div className='flex justify-around pl-10'>

diff --git a/src/components/claim-nft.tsx b/src/components/claim-nft.tsx
@@ -92,7 +92,12 @@ export const ClaimNft = ({
 						</div>
 
 						<div className='flex justify-around'>
-							<img src='./trophy2.png' alt='trophy image' />
+							<Image
+								src='/trophy2.png'
+								alt='trophy image'
+								height={100}
+								width={150}
+							/>
 
 							<Image
 								src={`https://nftstorage.link/ipfs/${removePrefix(freeNft)}`}
@@ -101,7 +106,12 @@ export const ClaimNft = ({
 								width={150}
 								className='mt-16'
 							/>
-							<img src='./trophy1.png' alt='trophy image' />
+							<Image
+								src='/trophy1.png'
+								alt='trophy image'
+								height={100}
+								width={150}
+							/>
 						</div>
 
 						<p className='text-lg text-center px-10 py-4'>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -9,7 +9,7 @@ const Footer = () => {
 			<div className='flex justify-between items-center'>
 				<div className='brand'>
 					<Link href='#' passHref>
-						<img
+						<Image
 							src='/logo.png'
 							alt='logo'
 							width={300}
@@ -32,8 +32,8 @@ const Footer = () => {
 				>
 					<div className='rounded-full border-2 border-indigo-500 bg-indigo-900 p-4 flex items-center gap-2'>
 						<Link href='https://discord.gg/38jktRtuY7' target='_blank'>
-							<img
-								src='./Vector3.png'
+							<Image
+								src='/Vector3.png'
 								alt='Discord logo'
 								width={20}
 								height={20}
@@ -42,8 +42,8 @@ const Footer = () => {
 					</div>
 					<div className='rounded-full border-2 border-indigo-500 bg-indigo-900 p-4 flex items-center gap-2'>
 						<Link href='https://t.me/MyriadFlow' target='_blank'>
-							<img
-								src='./Vector4.png'
+							<Image
+								src='/Vector4.png'
 								alt='Telegram logo'
 								width={20}
 								height={20}
@@ -52,13 +52,13 @@ const Footer = () => {
 					</div>
 					<div className='rounded-full border-2 border-indigo-500 bg-indigo-900 p-4 flex items-center gap-2'>
 						<Link href='https://x.com/0xMyriadFlow' target='_blank'>
-							<img src='./Vector2.jpeg' alt='X logo' width={18} height={18} />
+							<Image src='/Vector2.jpeg' alt='X logo' width={18} height={18} />
 						</Link>
 					</div>
 					<div className='rounded-full border-2 border-indigo-500 bg-indigo-900 p-4 flex items-center gap-2'>
 						<Link href='https://www.instagram.com/0xmyriadflow' target='_blank'>
-							<img
-								src='./Vector5.png'
+							<Image
+								src='/Vector5.png'
 								alt='Instagram logo'
 								width={16}
 								height={16}

diff --git a/src/components/minted-modal.tsx b/src/components/minted-modal.tsx
@@ -1,3 +1,5 @@
+import Image from 'next/image'
+
 export const MintedModal = ({
 	onClose,
 	phygitalName,
@@ -13,11 +15,11 @@ export const MintedModal = ({
 		<div className='p-4 rounded-lg shadow-md bg-white'>
 			<div>
 				<div className='flex justify-between items-center'>
-					<img src='./trophy2.png' alt='trophy' />
+					<Image src='/trophy2.png' alt='trophy' height={100} width={100} />
 					<p className='text-center font-bold text-4xl text-transparent bg-gradient-to-r from-blue-500 to-purple-700 bg-clip-text'>
 						Congratulations!
 					</p>
-					<img src='./trophy1.png' alt='trophy' />
+					<Image src='/trophy1.png' alt='trophy' height={100} width={100} />
 				</div>
 				<p className='text-center text-lg'>
 					You have successfully minted {phygitalName} phygital NFT!