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 { CTA } from '../components/CTA'
import { Features } from '../components/Features/Features' import { Features } from '../components/Features/Features'
import {Footer} from '../components/Footer/Footer' import {Footer} from '../components/Footer/Footer'
import {motion} from 'framer-motion'
export default function Home() { 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() const [session, loading] = useSession()
return ( return (
@ -22,14 +43,14 @@ export default function Home() {
} }
{session && <> {session && <>
<Text fontSize='4xl'>Welcome {session.user.name}!</Text> <Text fontSize='4xl'>Welcome {session.user.name}!</Text>
<div className='grid'> <motion.div className='grid' variants={container} initial="hidden" animate="visible">
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' /> <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' /> <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' /> <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' /> <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' /> <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' /> <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
</div> </motion.div>
</> </>
} }
</> </>