diff options
Diffstat (limited to 'src/app/(home)/_components/hero.tsx')
| -rw-r--r-- | src/app/(home)/_components/hero.tsx | 98 |
1 files changed, 0 insertions, 98 deletions
diff --git a/src/app/(home)/_components/hero.tsx b/src/app/(home)/_components/hero.tsx deleted file mode 100644 index 8ac251b..0000000 --- a/src/app/(home)/_components/hero.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { baseOptions, linkItems } from '@/app/layout.config'; -import { Icons } from '@/components/icons/icons'; -import { Section } from '@/components/section'; -import { buttonVariants } from '@/components/ui/button'; -import { cn } from '@/lib/utils'; -import { getLinks } from 'fumadocs-ui/layouts/shared'; -import * as motion from 'motion/react-client'; -import Image from 'next/image'; -import Link from 'next/link'; -import Balancer from 'react-wrap-balancer'; -import heroImage from '../../../../public/images/gradient-noise-purple-azure-light.png'; - -const Hero = () => { - const links = getLinks(linkItems, baseOptions.githubUrl); - const navItems = links.filter((item) => - ['nav', 'all'].includes(item.on ?? 'all'), - ); - - return ( - <Section className='relative flex flex-col items-center justify-center gap-6 overflow-hidden bg-dashed px-4 py-16 sm:px-16 sm:py-24 md:py-32'> - <motion.div - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - transition={{ - duration: 0.4, - scale: { type: 'spring', visualDuration: 0.4, bounce: 0.5 }, - }} - whileInView={{ opacity: 1 }} - viewport={{ once: true }} - className='-z-10 absolute inset-0 h-full w-full' - > - <Image - src={heroImage} - alt='Hero Background' - height={600} - width={704} - className='pointer-events-none absolute right-0 bottom-0 h-[900px] w-[1004px] max-w-[1004px] translate-x-1/2 translate-y-1/2 select-none opacity-80 dark:opacity-100' - priority - /> - </motion.div> - <div className='flex items-center justify-center space-x-2'> - <Icons.code className='h-6 w-6 text-primary transition-transform hover:scale-125' /> - <span className='font-medium text-muted-foreground text-sm'> - Full-Stack Developer & Tech Writer - </span> - </div> - <h1 className='max-w-3xl text-center font-bold text-4xl leading-tight tracking-tighter sm:text-5xl md:max-w-4xl md:text-6xl lg:leading-[1.1]'> - <Balancer>I'm John Doe , a Full-Stack Developer.</Balancer> - </h1> - <p className='max-w-xl text-center text-muted-foreground md:max-w-2xl md:text-lg'> - <Balancer> - I write about web development, software engineering, and the latest - technologies. I also create fun projects and tutorials to help you - learn and grow as a developer. - </Balancer> - </p> - - <div className='flex flex-wrap items-center justify-center gap-4'> - <Link - className={cn( - buttonVariants({ - variant: 'default', - size: 'lg', - }), - 'group rounded-full bg-primary hover:bg-primary/90', - )} - href='/posts' - > - Browse Posts - <Icons.arrowUpRight className='group-hover:-rotate-12 ml-2 size-5 transition-transform' /> - </Link> - - <div className='flex items-center space-x-4'> - {navItems - .filter((item) => item.type === 'icon') - .map((item, i) => ( - <Link - key={i.toString()} - href={item.url} - className={cn( - buttonVariants({ - variant: 'ghost', - size: 'icon', - }), - 'rounded-full', - )} - > - {item.icon} - <span className='sr-only'>{item.text}</span> - </Link> - ))} - </div> - </div> - </Section> - ); -}; - -export default Hero; |
