Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

homepage update #15

Merged
merged 5 commits into from
Nov 15, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
Binary file not shown.
2 changes: 1 addition & 1 deletion dockerfile
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ WORKDIR /app
COPY package.json yarn.lock ./

# Install dependencies with yarn
RUN yarn install --frozen-lockfile
RUN yarn install

# Rebuild the source code only when needed
FROM node:18-alpine AS builder
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -23,6 +23,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"ethers": "^6.13.1",
"framer-motion": "^11.11.11",
"lucide-react": "^0.394.0",
"moralis": "^2.26.7",
"next": "13.5.4",
Binary file added public/cart.png
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/concrete-rhythm.png
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/metallic-suit.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 24 additions & 5 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -2,26 +2,45 @@
import LeaderBoard from '@/components/leaderboard'
import AvatarLeaderboard from '@/components/avatar-leaderboard'
import Footer from '@/components/footer'
import Image from 'next/image'

import Header from '../components/header'
import { Hero } from '@/components/hero'
import { CallToAction } from '@/components/call-to-action'

export default function Home() {
return (
<div className='bg-black'>
<Header home />
<Header home />
<Hero />

<div className='relative'>
<div
className='absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40'
style={{ backgroundImage: "url('/web-bg.png')" }}
></div>
{/* Overlay */}
<div className='bg-black relative z-10'>
<h1
className='text-center font-bold text-4xl py-[20px] bg-[#00000021] gradient-text-banner text-transparent '
style={{ WebkitTextFillColor: 'transparent' }}
>
More than NFTs.
</h1>
</div>
<div className='absolute inset-0 bg-black bg-opacity-50'></div>
<LeaderBoard />
<LeaderBoard
tagline='Most Recently Launched'
title='New on WebXR'
subtitle='New Frontier: Be Among the First to Discover the Newest Xperiences
Making Their Debut!'
/>
<AvatarLeaderboard />
<LeaderBoard
reversed
tagline='Most Popular Right Now'
title='Hot on WebXR'
subtitle='Get in on the Action with These Hot Trending Xperiences!'
/>
<CallToAction />
</div>

<div className='bg-gradient-to-b from-[#121212] to-[#121212] '>
131 changes: 122 additions & 9 deletions src/components/avatar-card.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,140 @@
import Link from 'next/link'
import { Avatar } from '@readyplayerme/visage'
import { AvatarType } from '@/types/types'
import Image from 'next/image'
// import { Ellipsis } from 'lucide-react'
import { removePrefix } from '@/utils/helper'
import { ArrowUpRight } from 'lucide-react'
import { useState } from 'react'
import { motion } from 'framer-motion'

const AvatarCard = ({
phygitalId,
phygitalImage,
url,
brandLogo,
}: {
phygitalId: string
phygitalImage: string
url: string
brandLogo: string
}) => {

const [isHovered, setIsHovered] = useState(false)
const [isExpHovered, setIsExpHovered] = useState(false)
const name = phygitalId.toLowerCase().replace(/\s+/g, '-')

return (
<div className='relative inline-block'>
<Link href={`https://webxr.myriadflow.com/${name}`} target='_blank'>
<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 className='relative rounded-3xl bg-gradient-to-b from-pink-500 to-blue-500 p-[2px] shadow-md bg-[#FFFFFF1A] w-10/12 md:w-[18rem] md:h-[24rem]'>
<div className='p-4 rounded-3xl grid grid-rows-[3fr_1fr] h-full w-full bg-[#2a2a2a] overflow-hidden'>
<div className='flex justify-between items-start'>
<Image
src={`${'https://nftstorage.link/ipfs'}/${removePrefix(brandLogo)}`}
alt='brand name'
height={50}
width={50}
className='rounded-full'
/>
<Avatar
modelSrc={url}
cameraInitialDistance={0.85}
className='relative left-4 -top-4'
/>
<Link
href={`https://discover.myriadflow.com/nfts/${name}`}
className={`rounded-md border py-1 px-4 bg-[#DF1FDD] text-white border-black cursor-pointer `}
target='_blank'
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<button
className={`bg-transparent border-0 size-full items-center gap-1 transition-all duration-300 overflow-hidden ${
isHovered ? 'flex' : ''
}`}
>
<span>Discover</span>
{isHovered && (
<motion.span
initial={{ y: 100 }}
animate={{ y: 0 }}
transition={{ duration: 0.25 }}
className='overflow-hidden'
>
<svg
width='13'
height='13'
viewBox='0 0 13 13'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M12.75 0.999999C12.75 0.585786 12.4142 0.25 12 0.249999L5.25 0.25C4.83579 0.25 4.5 0.585786 4.5 1C4.5 1.41421 4.83579 1.75 5.25 1.75L11.25 1.75L11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75L12.75 0.999999ZM1.53033 12.5303L12.5303 1.53033L11.4697 0.469669L0.46967 11.4697L1.53033 12.5303Z'
fill='white'
/>
</svg>
</motion.span>
)}
</button>
</Link>
</div>

<div className='flex relative gap-4 items-end text-white'>
{/* <Ellipsis className='absolute top-1 right-1'/> */}
<Image
src={`${'https://nftstorage.link/ipfs'}/${removePrefix(
phygitalImage
)}`}
alt={phygitalId}
height={65}
width={65}
className='rounded-md'
/>
<div className='flex flex-col justify-between h-full'>
<h2 className='text-base font-semibold'>{phygitalId}</h2>
<Link
href={`https://webxr.myriadflow.com/${name}`}
className='bg-cyan-400 text-base border-black rounded-md text-black border cursor-pointer py-1 px-4'
target='_blank'
onMouseEnter={() => setIsExpHovered(true)}
onMouseLeave={() => setIsExpHovered(false)}
>
<button
className={`bg-transparent border-0 size-full items-center gap-1 transition-all duration-300 overflow-hidden ${
isExpHovered ? 'flex' : ''
}`}
>
<span>Experience</span>
{isExpHovered && (
<motion.span
initial={{ y: 100 }}
animate={{ y: 0 }}
transition={{ duration: 0.35 }}
className='overflow-hidden'
>
<svg
width='13'
height='13'
viewBox='0 0 13 13'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M12.75 0.999999C12.75 0.585786 12.4142 0.25 12 0.249999L5.25 0.25C4.83579 0.25 4.5 0.585786 4.5 1C4.5 1.41421 4.83579 1.75 5.25 1.75L11.25 1.75L11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75L12.75 0.999999ZM1.53033 12.5303L12.5303 1.53033L11.4697 0.469669L0.46967 11.4697L1.53033 12.5303Z'
fill='black'
/>
</svg>
</motion.span>
)}
</button>
</Link>
</div>
<Link
href={`https://discover.myriadflow.com/nfts/${name}`}
target='_blank'
className='cursor-pointer basis-1/4'
>
<Image src={'/cart.png'} alt='cart' height={35} width={35} />
</Link>
</div>
</Link>
</div>
</div>
)
}
Loading