Revert "fix: mobile view"

This reverts commit 749ff3f.
MyriadFlow · Sep 6, 2024 · 3a9d999 · 3a9d999
1 parent 749ff3f
commit 3a9d999
Showing 8 changed files with 194 additions and 149 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -84,15 +84,3 @@
 .a-enter-vr-button {
 	display: none;
 }
-
-/* .gradient-text-container {
-	background-color: black;
-	text-align: center;
-	padding: 20px;
-} */
-
-.gradient-text {
-	background: linear-gradient(to right, #ec4899, #ec489a, #3b82f6, #3b82f6);
-	-webkit-background-clip: text;
-	color: transparent;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -69,7 +69,7 @@ export default function RootLayout({
 			<Providers>
 				<body
 					className={cn(
-						'min-h-screen bg-background font-sans antialiased w-screen overflow-x-hidden',
+						'min-h-screen bg-background font-sans antialiased',
 						fontSans.variable
 					)}
 				>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,18 +6,17 @@ import Footer from '@/components/footer'
 import Image from 'next/image'
 
 import { ConnectWallet } from '@/components/connect-wallet'
-import { CTA } from '@/components/cta'
 
 export default function Home() {
 	return (
-		<div className='bg-[#121212] overflow-x-hidden'>
+		<div className='bg-black'>
 			<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='/'>
 						<Image src='/logo.png' width={200} height={0} alt='Logo' />
 					</Link>
 				</div>
-				<div className='mt-6 hidden md:flex gap-12 text-[20px] text-white'>
+				<div className='mt-6 flex gap-12 text-[20px] text-white'>
 					<Link href='https://myriadflow.com' target='_blank'>
 						Home
 					</Link>
@@ -35,15 +34,13 @@ export default function Home() {
 					<ConnectWallet />
 				</div>
 			</div>
-			<div className='flex flex-col md:flex-row h-fit bg-[#121212] text-white relative items-center'>
+			<div className='flex h-screen bg-[#121212] text-white relative'>
 				<div className='absolute right-0 bottom-[0px] md:left-[25%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-20' />
 				<div className='absolute right-0 top-0 md:right-[10%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#DF1FDD] rounded-full blur-3xl opacity-20' />
 
-				<div className='md:px-16 px-8 py-12 flex flex-col justify-center  md:basis-3/5'>
-					<div className='text-5xl md:text-7xl font-bold text-[#DF1FDD]'>
-						WebXR
-					</div>
-					<div className='text-4xl md:text-6xl font-semibold mt-6 text-[#DF1FDD] w-full'>
+				<div className='w-1/2 h-full px-16 flex flex-col justify-center'>
+					<div className='text-7xl font-bold text-[#DF1FDD]'>WebXR</div>
+					<div className='text-6xl font-semibold mt-6 text-[#DF1FDD]'>
 						Experience & Interact
 					</div>
 					<div className='text-2xl mt-10'>
@@ -54,27 +51,31 @@ export default function Home() {
 						<ConnectWallet />
 					</div>
 				</div>
-				<Image
-					src='/heroframe.png'
-					alt='AI Avatar'
-					height={300}
-					width={300}
-					className='mx-auto size-72'
-				/>
+				<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" /> */}
+						<Image
+							src='/heroframe.png'
+							alt='AI Avatar'
+							height={350}
+							width={350}
+							className='absolute inset-0'
+						/>
+					</div>
+				</div>
 			</div>
 
-			<div className='bg-black py-4'>
-				<p className='text-center font-bold text-[30px] gradient-text'>
-					More than NFTs.
-				</p>
+			<div className='bg-gradient-to-r from-black via-gray-900 to-purple-900'>
+				<LeaderBoard />
 			</div>
 
-			<div className='grid gap-y-8'>
-				<LeaderBoard />
+			<div className='bg-gradient-to-r from-black via-gray-900 to-purple-900 pt-20'>
 				<AvatarLeaderboard />
-				<CTA />
 			</div>
-			<Footer />
+
+			<div className='bg-gradient-to-r from-black via-gray-900 to-purple-900 pt-20'>
+				<Footer />
+			</div>
 		</div>
 	)
 }
diff --git a/src/components/avatar-card.tsx b/src/components/avatar-card.tsx
@@ -10,17 +10,16 @@ const AvatarCard = ({
 	url: string
 }) => {
 	return (
-		<>
+		<div className='relative inline-block'>
 			<Link href={`https://webxr.myriadflow.com/${phygitalId}`}>
-				<div className=' rounded-md shadow-md bg-white overflow-hidden cursor-pointer relative'>
-					<Avatar
-						modelSrc={url}
-						cameraInitialDistance={0.5}
-						className='bg-white'
-					/>
+				<div className='w-330 rounded-full shadow-md overflow-hidden cursor-pointer relative'>
+					<div className='absolute top-0 left-0 right-0 bottom-0 rounded-full bg-white opacity-30 pointer-events-none z-1' />
+					<div className='relative z-2'>
+						<Avatar modelSrc={url} cameraInitialDistance={0.5} />
+					</div>
 				</div>
 			</Link>
-		</>
+		</div>
 	)
 }
 

diff --git a/src/components/avatar-leaderboard.tsx b/src/components/avatar-leaderboard.tsx
@@ -50,7 +50,7 @@ const AvatarLeaderboard = () => {
 	return (
 		<div>
 			{/* Title */}
-			<div className='font-bold text-white text-5xl px-16 mb-8'>
+			<div className='font-bold text-white text-6xl px-16 mb-8'>
 				Avatar Leaderboard
 			</div>
 
@@ -67,7 +67,7 @@ const AvatarLeaderboard = () => {
 			{topAvatars && (
 				<div className='flex flex-wrap justify-center px-10 py-20 '>
 					{/* Silver */}
-					<div className='w-full md:w-1/3 flex flex-col order-2 md:order-none items-center justify-center mb-10 md:mb-0'>
+					<div className='w-full md:w-1/3 flex flex-col items-center justify-center mb-10 md:mb-0'>
 						{topAvatars?.[1] && (
 							<>
 								<Avatar
@@ -101,7 +101,7 @@ const AvatarLeaderboard = () => {
 					</div>
 
 					{/* Gold */}
-					<div className='w-full md:w-1/3 flex flex-col order-1 md:order-none items-center justify-center mb-10 md:mb-0'>
+					<div className='w-full md:w-1/3 flex flex-col items-center justify-center mb-10 md:mb-0'>
 						{topAvatars?.[0] && (
 							<>
 								<Avatar
@@ -135,7 +135,7 @@ const AvatarLeaderboard = () => {
 					</div>
 
 					{/* Bronze */}
-					<div className='w-full md:w-1/3 flex flex-col order-3 md:order-none items-center justify-center'>
+					<div className='w-full md:w-1/3 flex flex-col items-center justify-center'>
 						{topAvatars?.[2] && (
 							<>
 								<Avatar
@@ -185,6 +185,21 @@ const AvatarLeaderboard = () => {
 					Rewarding Creators, Owners and Supporters.
 				</div>
 			</div>
+
+			{/* Call to Action */}
+			<div className='flex items-center justify-center min-h-screen'>
+				<div className='p-1 rounded-lg w-96 h-96 flex items-center justify-center bg-transparent border-8 border-transparent rounded-8 bg-gradient-to-r from-black to-gray-800 bg-clip-border'>
+					<div className='text-center h-80 w-80 flex flex-col items-center justify-center'>
+						<h1 className='text-white font-bold mb-4 text-3xl'>
+							Create Profile
+						</h1>
+						<p className='mb-4 text-white'>& Earn Rewards</p>
+						<button className='rounded bg-transparent border-8 border-transparent bg-gradient-to-r from-white to-pink-500 bg-clip-border text-black cursor-pointer hover:scale-105 transition-transform duration-300'>
+							Get Started
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	)
 }

diff --git a/src/components/cta.tsx b/src/components/cta.tsx
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,109 +1,162 @@
+import React from 'react'
 import Image from 'next/image'
 import Link from 'next/link' // Use Link for navigation
 
 const Footer = () => {
 	return (
-		<footer className='bg-gradient-to-b from-[#30D8FF] to-[#EE64ED]  py-16 px-8'>
-			<div className='flex flex-col md:flex-row justify-between md:items-center gap-8'>
-				<div className='brand text-left'>
-					<Link href='https://myriadflow.com/' passHref>
-						<Image
-							src='/MFlogo.png'
-							alt='logo'
-							height={100}
-							width={250}
-							className='mb-4'
-						/>
-					</Link>
-					<p className='text-white max-w-350 text-sm sm:text-base'>
-						Innovative next-gen platform for exploring and launching NFT
-						Xperiences with AI-powered brand ambassadors and no-code tools.
-					</p>
-				</div>
+		<div>
+			<footer
+				style={{
+					background:
+						'linear-gradient(90deg, #30D8FF 0%, #A32CC4 50%, #C243FE 100%)',
+					padding: '40px 60px',
+				}}
+			>
+				<section
+					style={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+					}}
+				>
+					<div className='brand' style={{ textAlign: 'left' }}>
+						<Link href='https://myriadflow.com/' passHref>
+							<img
+								src='/MFlogo.png'
+								width={200}
+								height={200}
+								alt='logo'
+								style={{ marginBottom: '20px' }}
+							/>
+						</Link>
+						<p style={{ color: 'white', maxWidth: '350px', fontSize: '14px' }}>
+							Innovative next-gen platform for exploring and launching NFT
+							Xperiences with AI-powered brand ambassadors and no-code tools.
+						</p>
+						<p style={{ marginTop: '30px', color: 'white', fontSize: '12px' }}>
+							© Copyright 2024 MyriadFlow. All rights reserved
+						</p>
+					</div>
 
-				<div className='flex items-baseline justify-between'>
-					<div className='text-left text-white text-sm sm:text-base'>
-						<h3 className='text-xl font-semibold'>About</h3>
+					<div
+						className='links'
+						style={{ textAlign: 'left', color: 'white', fontSize: '14px' }}
+					>
+						<h3 className='text-2xl font-semibold'>About</h3>
 						<Link
 							href='/MyriadFlow_Terms_of_Service.pdf'
 							target='_blank'
-							className='text-white hover:underline block mt-7'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+								marginTop: '28px',
+							}}
 						>
 							Terms of Service
 						</Link>
 						<Link
 							href='/MyriadFlow_Creator_Terms_and_Conditions.pdf'
 							target='_blank'
-							className='text-white hover:underline block'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+							}}
 						>
 							Creator Terms and Conditions
 						</Link>
 						<Link
 							href='/MyriadFlow_Privacy_Policy.pdf'
 							target='_blank'
-							className='text-white hover:underline block'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+							}}
 						>
 							Privacy Policy
 						</Link>
 						<Link
 							href='/MyriadFlow_Community_Guidelines.pdf'
 							target='_blank'
-							className='text-white hover:underline block'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+							}}
 						>
 							Community Guidelines
 						</Link>
 					</div>
-					<div className='text-left text-white text-sm sm:text-base'>
-						<h3 className='text-xl font-semibold'>Platform</h3>
+
+					<div
+						className='platform'
+						style={{ textAlign: 'left', color: 'white', fontSize: '14px' }}
+					>
+						<h3 className='text-2xl font-semibold'>Platform</h3>
 						<Link
 							href='https://studio.myriadflow.com'
-							target='_blank'
-							className='text-white hover:underline block mt-7'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+								marginTop: '28px',
+							}}
 						>
 							Studio
 						</Link>
 						<Link
 							href='https://discover.myriadflow.com'
-							target='_blank'
-							className='text-white hover:underline block'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+							}}
 						>
 							Discover
 						</Link>
 						<Link
 							href='https://webxr.myriadflow.com'
-							target='_blank'
-							className='text-white hover:underline block'
+							style={{
+								color: 'white',
+								textDecoration: 'none',
+								display: 'block',
+							}}
 						>
 							WebXR
 						</Link>
 					</div>
-				</div>
 
-				<div className='social-links flex justify-center md:justify-end gap-5'>
-					{['/Vector3.png', '/Vector4.png', '/Vector2.png', '/Vector5.png'].map(
-						(icon, index) => (
+					<section
+						id='connect'
+						className='social-links'
+						style={{ display: 'flex', justifyContent: 'flex-end', gap: '20px' }}
+					>
+						{[
+							'/Vector3.png',
+							'/Vector4.png',
+							'/Vector2.png',
+							'/Vector5.png',
+						].map((icon, index) => (
 							<div
 								key={index}
-								className='rounded-full flex justify-center border border-solid border-white p-4 bg-[#121212]'
+								style={{
+									borderRadius: '50%',
+									border: '2px solid #0E46A3',
+									padding: '16px',
+									backgroundColor: '#15063C',
+								}}
 							>
 								<Link href='#' target='_blank'>
-									<Image
-										src={icon}
-										alt='Social Icon'
-										height={15}
-										width={15}
-										className='md:size-8 '
-									/>
+									<img src={icon} width={20} height={20} alt='Social Icon' />
 								</Link>
 							</div>
-						)
-					)}
-				</div>
-			</div>
-			<p className='mt-6 text-white text-xs'>
-				© Copyright 2024 MyriadFlow. All rights reserved
-			</p>
-		</footer>
+						))}
+					</section>
+				</section>
+			</footer>
+		</div>
 	)
 }
 

diff --git a/src/components/leaderboard.tsx b/src/components/leaderboard.tsx
@@ -6,46 +6,57 @@ import { getAvatars } from '@/utils/queries'
 import { AvatarType } from '@/types/types'
 
 const Leaderboard = () => {
-	// const [avatar, setAvatar] = useState<AvatarType[]>([])
+	const [avatar, setAvatar] = useState<AvatarType[]>([])
 
-	// const getBrands = async () => {
-	// 	const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'
+	const getBrands = async () => {
+		const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'
 
-	// 	const avatar = await fetch(`${baseUri}/avatars/all`, {
-	// 		method: 'GET',
-	// 		headers: {
-	// 			'Content-Type': 'application/json',
-	// 		},
-	// 	})
+		const avatar = await fetch(`${baseUri}/avatars/all`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		})
 
-	// 	const avatardata: AvatarType[] = await avatar.json()
-	// 	// setAvatar(avatardata);
-	// 	setAvatar([...avatardata].reverse())
-	// }
+		const avatardata: AvatarType[] = await avatar.json()
+		// setAvatar(avatardata);
+		setAvatar([...avatardata].reverse())
+	}
 
-	// useEffect(() => {
-	// 	getBrands()
-	// }, [])
+	useEffect(() => {
+		getBrands()
+	}, [])
 
 	// const chaintype = process.env.NEXT_PUBLIC_BASECHAINTYPE
 
-	const result = useQuery({
-		queryKey: ['avatarsList'],
-		queryFn: async () => {
-			const avatars = await getAvatars()
-			return avatars.reverse()
-		},
-	})
+	// const result = useQuery({
+	// 	queryKey: ['avatarsList'],
+	// 	queryFn: async () => {
+	// 		const avatars = await getAvatars()
+	// 		return avatars
+	// 			.find((avatar: AvatarType) => avatar.chaintype_id === chaintype)
+	// 			.reverse()
+	// 	},
+	// })
 
-	const avatars = result.data
+	// const avatars = result.data
 
 	return (
 		<>
+			<div className='bg-black relative'>
+				<div
+					className='text-center font-bold text-[30px] py-[20px] bg-[#00000021] bg-gradient-to-r from-pink-500 via-pink-500 to-blue-500 text-transparent bg-clip-text'
+					style={{ WebkitTextFillColor: 'transparent' }}
+				>
+					More than NFTs.
+				</div>
+			</div>
+
 			<div className='px-16 pt-20'>
 				<div className='text-lg font-semibold mt-6 text-[#DF1FDD]'>
 					Most Recently Launched
 				</div>
-				<div className='text-5xl font-semibold mt-6 text-white'>
+				<div className='text-6xl font-semibold mt-6 text-white'>
 					New on WebXR
 				</div>
 				<div className='text-xl font-semibold mt-6 text-white'>
@@ -55,7 +66,7 @@ const Leaderboard = () => {
 			</div>
 
 			<div className='pt-20 flex gap-9 flex-wrap justify-center'>
-				{avatars
+				{avatar
 					?.slice(0, 12)
 					.reverse()
 					.map((avatar: AvatarType, index: number) => (