night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added animation to cards

Browse source
This commit is contained in:
qt-coder 2021-06-29 09:14:33 +08:00
parent b8da1e6e6c
commit 0462412847
1 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
pages/index.js
View file

@ -5,9 +5,30 @@ import Hero from '../components/Hero/Hero'
import { CTA } from '../components/CTA'
import { Features } from '../components/Features/Features'
import {Footer} from '../components/Footer/Footer'
import {motion} from 'framer-motion'
export default function Home() {
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.4,
staggerChildren: 0.3
}
}
}
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1
}
}
const [session, loading] = useSession()
return (
@ -22,14 +43,14 @@ export default function Home() {
}
{session && <>
<Text fontSize='4xl'>Welcome {session.user.name}!</Text>
<div className='grid'>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
</div>
<motion.div className='grid' variants={container} initial="hidden" animate="visible">
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
</motion.div>
</>
}
</>