Merge pull request #13 from MyriadFlow/main

mobile fix

src/app/[id]/page.tsx

@@ -192,7 +192,7 @@ export default function Home({ params }: { params: { id: string } }) {
 							<ProvenanceAttestation phygital={phygital} avatarModel={avatar && avatar.url} showAttestation={() => setShowProvenance(false)} />
 						</div>
 					</div>
-				)}
+				)} 
 
 				<div className='hidden md:block absolute right-2 bottom-8'>
 					<InfoCard phygital={phygital} />

src/components/footer.tsx

@@ -21,12 +21,12 @@ const Footer = () => {
 				>
 					<div className='brand' style={{ textAlign: 'left' }}>
 						<Link href='https://myriadflow.com/' passHref>
-							<img
+							<Image
 								src='/MFlogo.png'
 								width={200}
 								height={200}
 								alt='logo'
-								style={{ marginBottom: '20px' }}
+								className="mb-5"
 							/>
 						</Link>
 						<p style={{ color: 'white', maxWidth: '350px', fontSize: '14px' }}>
@@ -149,7 +149,7 @@ const Footer = () => {
 								}}
 							>
 								<Link href='#' target='_blank'>
-									<img src={icon} width={20} height={20} alt='Social Icon' />
+									<Image src={icon} width={20} height={20} alt='Social Icon' />
 								</Link>
 							</div>
 						))}

src/components/info-card.tsx

@@ -44,7 +44,7 @@ export const InfoCard = ({ phygital }: any) => {
 					<p>{phygital.brand_name}</p>
 				</div>
 			</div>
-			<Link href={`https://base-discover.vercel.app/nfts/${reversedId}`}>
+			<Link href={`https://discover.myriadflow.com/nfts/${reversedId}`} target='_blank'>
 				<button className=' py-3 bg-[#30D8FF] rounded-lg mt-4 mx-auto w-full'>
 					View on Discover
 				</button>

src/components/provenance-attestation.tsx

@@ -24,8 +24,6 @@ const formatDateFromISO = (isoString: string) => {
 
 
 export const ProvenanceAttestation = ({phygital, avatarModel, showAttestation}: {phygital: PhygitalType, avatarModel: string, showAttestation: () => void}) => {
-  const { address } = useAccount()
-
   const removePrefix = (uri: string) => {
 		return uri?.substring(7, uri.length)
 	}
@@ -42,13 +40,14 @@ export const ProvenanceAttestation = ({phygital, avatarModel, showAttestation}:
         <p className="text-xs">Base Network</p>
      </div>
     </div>
-    <div className="flex items-center gap-4">
+    <div className="flex flex-col md:flex-row items-center gap-4">
       <Image src={`https://nftstorage.link/ipfs/${removePrefix(phygital.image)}`} alt="phygital image" width={150} height={150} className="md:w-48 md:h-48" />
       <div className="text-xs md:text-sm grid gap-2 text-center md:text-left">
-        <h2 className="text-lg font-bold">{phygital.name}</h2>
+        <h2 className="text-lg md:text-xl font-bold">{phygital.name}</h2>
         <p>Unique piece</p>
         <p>Created by: {phygital.brand_name}</p>
         <p>Owned by: {phygital?.deployer_address?.toString()}</p>
+        <p>Date purchased: 20 / 10 / 2024</p>
         <p>{phygital?.price?.toString()} ETH</p>
       </div>
     </div>
@@ -67,7 +66,7 @@ export const ProvenanceAttestation = ({phygital, avatarModel, showAttestation}:
     <div className="my-4">
       <h3 className="text-lg md:text-xl font-bold">NFT Details</h3>
       <div className="mt-4 text-xs md:text-sm">
-        <div className="grid grid-cols-[1fr_3fr]">
+        <div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
           <p>Token ID</p>
           <p className="text-right">{phygital.id}</p>
         </div>
@@ -102,7 +101,7 @@ export const ProvenanceAttestation = ({phygital, avatarModel, showAttestation}:
         </div>
       </div>
     </div>
-    <div className="flex justify-center gap-4 mt-8">
+    <div className="flex flex-col md:flex-row justify-center gap-4 mt-8">
       <button className="bg-[#30D8FF] text-black px-4 py-2 text-xs md:text-base rounded-md">Print</button>
       <button className="bg-[#30D8FF] text-black px-4 py-2 text-xs md:text-base rounded-md cursor-pointer" onClick={showAttestation}>Close</button>
     </div>