Skip to content

Commit

Permalink
landing ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@devsisingh
devsisingh committed Aug 2, 2024
1 parent 674944d commit ecc0a30
Show file tree
Hide file tree
Showing 8 changed files with 11,136 additions and 26 deletions.
11,089 changes: 11,089 additions & 0 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

Binary file added public/heroframe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/leaderboard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/app/favicon.ico
View file
Binary file not shown.
12 changes: 8 additions & 4 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,11 @@ export default function Home() {
<ConnectWallet />
</div>
</div>
<div className="flex h-screen bg-gradient-to-r from-black via-gray-900 to-purple-900 text-white">
<div className="flex h-screen bg-[#121212] text-white relative">

<div className='absolute right-0 bottom-[0px] md:right-[35%] 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="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>
Expand All @@ -62,9 +66,9 @@ export default function Home() {
</div>
</div>
<div className="w-1/2 h-full flex items-center justify-center">
<div className="relative w-80 h-80 rounded-full border-8 border-purple-500 overflow-hidden">
<img src="MFsquarebackgroun1.png" alt="Background" className="absolute inset-0 w-full h-full object-cover opacity-50" />
<img src="ReadyPlayerMe-Avatar21.png" alt="AI Avatar" className="absolute inset-0 w-96 h-96 object-cover" />
<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" alt="AI Avatar" className="absolute inset-0" />
</div>
</div>
</div>
Expand Down
27 changes: 16 additions & 11 deletions src/components/avatar-leaderboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ const AvatarLeaderboard = () => {

return (
<div>
<div className='font-bold text-white text-6xl px-10'>
<div className='font-bold text-white text-6xl px-16' style={{marginTop:'80px'}}>
Avatar Leaderboard
</div>
<div
className='flex justify-between text-2xl px-10'
className='flex justify-between text-2xl px-16'
style={{ justifyContent: 'space-between' }}
>
<div className='mt-4 text-white'>
Expand All @@ -64,8 +64,10 @@ const AvatarLeaderboard = () => {
className='flex px-10'
style={{
justifyContent: 'center',
marginTop: '200px',
marginBottom: '200px',
marginTop: '50px',
paddingTop: '200px',
paddingBottom: '200px',
backgroundImage: "url('/leaderboard.png')"
}}
>
{topAvatars.length >= 3 && (
Expand Down Expand Up @@ -130,7 +132,8 @@ const AvatarLeaderboard = () => {
cursor: 'pointer',
marginLeft: 'auto',
marginRight: 'auto',
color: 'white'
color: 'black',
backgroundColor:'white'
}}
>
<Link
Expand Down Expand Up @@ -206,7 +209,8 @@ const AvatarLeaderboard = () => {
cursor: 'pointer',
marginLeft: 'auto',
marginRight: 'auto',
color: 'white'
color: 'black',
backgroundColor:'white'

}}
>
Expand Down Expand Up @@ -263,7 +267,8 @@ const AvatarLeaderboard = () => {
cursor: 'pointer',
marginLeft: 'auto',
marginRight: 'auto',
color: 'white'
color: 'black',
backgroundColor:'white'

}}
>
Expand All @@ -282,7 +287,7 @@ const AvatarLeaderboard = () => {
style={{
backgroundColor: '#00000021',
position: 'relative',
marginTop: '100px',
// marginTop: '100px',
}}
>
{/* Left Image */}
Expand Down Expand Up @@ -320,7 +325,7 @@ const AvatarLeaderboard = () => {
'linear-gradient(to right, #F45EC1 , #F45EC1 , #4EB9F3, #4EB9F3)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundColor: '#00000021',
backgroundColor: '#121212',
paddingTop: '20px',
paddingBottom: '20px',
textAlign: 'center',
Expand Down Expand Up @@ -349,7 +354,7 @@ const AvatarLeaderboard = () => {
}}>
<div className="text-center h-80 w-80 flex flex-col items-center justify-center">
<h1 style={{ fontSize: '2.5rem' }} className="text-white font-bold mb-4">Create Profile</h1>
<p className="mb-4 text-white">Earn Rewards</p>
<p className="mb-4 text-white">& Earn Rewards</p>
<button
className="rounded"
style={{
Expand All @@ -358,7 +363,7 @@ const AvatarLeaderboard = () => {
borderRadius: "8px",
backgroundImage: `
linear-gradient(white, white),
linear-gradient(to right, #AF40FF, #5B42F3, #00DDEB)
linear-gradient(to bottom, #30D8FF, #EE64ED)
`,
backgroundOrigin: "border-box",
backgroundClip: "content-box, border-box",
Expand Down
32 changes: 22 additions & 10 deletions src/components/avatars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,29 @@ const HotNftCard = ({ nft }) => {
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<Link href={`https://webxr.myriadflow.com/${nft.phygital_id}`}>
<div
style={{
width: '330px',
borderRadius: '30px',
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)',
overflow: 'hidden',
cursor: 'pointer',
<div style={{
width: '330px',
borderRadius: '30px',
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)',
overflow: 'hidden',
cursor: 'pointer',
position: 'relative' // Ensure the pseudo-element is positioned correctly
}}>
<div style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'white',
}}
>
<Avatar modelSrc={nft?.url} cameraInitialDistance={0.5} />
borderRadius: '30px', // Ensure the pseudo-element has the same border radius
opacity: 0.3,
pointerEvents: 'none', // Allow clicks to pass through to the link
zIndex: 1 // Ensure the pseudo-element is behind the content
}}></div>
<div style={{ position: 'relative', zIndex: 2 }}>
<Avatar modelSrc={nft?.url} cameraInitialDistance={0.5} />
</div>
</div>
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/leaderboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const Leaderboard = () => {
className='pt-20 flex'
style={{ gap: '40px', flexWrap: 'wrap', justifyContent: 'center' }}
>
{avatar?.reverse().map((nft, index) => (
{avatar?.slice(0, 12).reverse().map((nft, index) => (
<Avatars key={index} nft={nft} />
))}
</div>
Expand Down

0 comments on commit ecc0a30

Please sign in to comment.