Intlayer

'use client'; import { Link } from '@components/Link/Link'; import { Button, ButtonColor, ButtonSize, ButtonVariant, CodeBlock, Container, LinkColor, LinkVariant, Tag, TagBorder, TagColor, TagSize, useCopyToClipboard, } from '@intlayer/design-system'; import { motion } from 'framer-motion'; import packageJSON from 'intlayer/package.json' with { type: 'json' }; import { ArrowRight, Check, Copy } from 'lucide-react'; import { useIntlayer } from 'next-intlayer'; import { useTheme } from 'next-themes'; import type { FC } from 'react'; import { ExternalLinks, PagesRoutes } from '@/Routes'; import { TechLogos } from './TechLogos'; const SHOW_WHATS_NEW = true; const ContainerMotion = motion.create(Container); export const LandingSection: FC = () => { const { whatsNew, whatsNewLabel, version, title, subheading, description, supportButton, getStartedButton, availableFor, copyButton, } = useIntlayer('landing-section'); const { resolvedTheme } = useTheme(); const isDarkMode = resolvedTheme === 'dark'; const { isCopied, copy } = useCopyToClipboard('npm install intlayer'); return ( <section className="relative flex min-h-[calc(100vh-64px)] w-full flex-col px-4 md:px-8 lg:px-12"> <div className="flex flex-1 flex-col items-center justify-center text-center"> {/* Centered Content */} <div className="mx-auto mt-16 mb-8 w-full max-w-4xl lg:mb-0"> {/* What's New Tag */} {SHOW_WHATS_NEW && ( <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} className="mb-8 flex items-center justify-center gap-2" > <Tag size={TagSize.SM} border={TagBorder.WITH} color={TagColor.NEUTRAL} className="rounded-full border font-medium text-sm text-text" > {whatsNew} </Tag> <Link href={PagesRoutes.ReleasesV7} color={LinkColor.NEUTRAL} label={whatsNewLabel.value} > <span className="flex items-center gap-1 font-medium text-neutral-500 text-sm sm:text-sm dark:text-neutral-400"> {version} v{packageJSON.version}{' '} <ArrowRight className="h-3 w-3" /> </span> </Link> </motion.div> )} {/* Title */} <motion.h1 initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }} animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0, ease: 'easeOut' }} className="mb-4 text-center font-bold text-4xl leading-tight sm:text-4xl md:text-5xl lg:mb-6 lg:text-6xl" > {title} </motion.h1> {/* Subtitle */} <motion.h2 initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }} animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.5 }} className="mb-6 text-center font-semibold text-text text-xl sm:text-3xl md:text-3xl lg:mb-8 lg:text-4xl" > {subheading} </motion.h2> {/* Description */} <motion.p initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6, duration: 0.6 }} className="mx-auto max-w-2xl text-center font-medium text-neutral-600 text-sm leading-relaxed sm:text-lg lg:mb-12 dark:text-neutral-200" > {description} </motion.p> {/* Copyable code block */} <ContainerMotion initial={{ opacity: 0, y: 0 }} animate={{ opacity: 1, y: -30 }} transition={{ delay: 0.7, duration: 0.6 }} roundedSize="2xl" className="m-auto mt-24 max-w-2xl flex-row items-center p-1 pl-6" > <CodeBlock lang="bash" isDarkMode={isDarkMode}> npm install intlayer </CodeBlock> <Button variant={ButtonVariant.HOVERABLE} color={ButtonColor.NEUTRAL} size={ButtonSize.ICON_XL} onClick={copy} Icon={isCopied ? Check : Copy} label={copyButton.value} /> </ContainerMotion> {/* Action Buttons */} <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.8, duration: 0.6 }} className="mt-10 mb-6 flex flex-col justify-center gap-3 sm:flex-row sm:gap-4 lg:mb-10" > <Link href={ExternalLinks.Github} variant={LinkVariant.BUTTON_OUTLINED} color={LinkColor.TEXT} label={supportButton.value} isExternalLink={false} size="lg" roundedSize="full" > <span className="block text-sm sm:text-lg">{supportButton}</span> </Link> <Link href={PagesRoutes.Doc} variant={LinkVariant.BUTTON} color={LinkColor.TEXT} label={getStartedButton.value} size="xl" roundedSize="full" className="flex flex-row items-center justify-center gap-2" > <span className="block text-sm sm:text-lg"> {getStartedButton} </span> <ArrowRight width={20} height={20} /> </Link> </motion.div> {/* Available For Section - Full Viewport Width */} <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 1.0, duration: 0.6 }} className="relative right-1/2 left-1/2 mt-8 -mr-[50vw] -ml-[50vw] w-screen text-center" > <p className="font-medium text-sm text-text tracking-wider sm:text-base"> {availableFor} </p> <TechLogos /> </motion.div> </div> </div> </section> ); };