+ "content": "\n\n import clsx from 'clsx'\n\nconst FUIHeroWithBorders = () => {\n return (\n <section className=\"relative min-h-[calc(100vh-50px)] overflow-hidden bg-[linear-gradient(to_bottom,#fff,#b49de0_40%,#A46EDB_88%)] dark:bg-[linear-gradient(to_bottom,#000,#200D42_40%,#4F21A1_74%,#A46EDB_88%_50%)]\">\n\n <div className=\"absolute left-1/2 top-[calc(100%-90px)] lg:top-[calc(100%-150px)] h-[500px] w-[700px] md:h-[500px] md:w-[1100px] lg:h-[750px] lg:w-[100%] -translate-x-1/2 rounded-[100%] border-[#B48CDE] bg-black bg-[radial-gradient(closest-side,#000_82%,#9560EB)]\"></div>\n <div className=\"dark:border-dark-border absolute left-0 top-0 z-0 grid h-full w-full grid-cols-[clamp(28px,10vw,120px)_auto_clamp(28px,10vw,120px)] border-b border-border\">\n <div className=\"col-span-1 flex h-full items-center justify-center\" />\n <div className=\"dark:border-dark-border col-span-1 flex h-full items-center justify-center border-x border-white/10\" />\n <div className=\"col-span-1 flex h-full items-center justify-center\" />\n </div>\n <figure className=\"bg-accent-500/40 pointer-events-none absolute -bottom-[70%] left-1/2 z-0 block aspect-square w-[520px] -translate-x-1/2 rounded-full blur-[200px]\" />\n <figure className=\"bg-surface-primary dark:bg-dark-surface-primary pointer-events-none absolute left-[4vw] top-[64px] z-20 hidden aspect-square w-[32vw] rounded-full opacity-50 blur-[100px] md:block\" />\n <figure className=\"bg-surface-primary dark:bg-dark-surface-primary pointer-events-none absolute bottom-[-50px] right-[7vw] z-20 hidden aspect-square w-[30vw] rounded-full opacity-50 blur-[100px] md:block\" />\n <div className=\"dark:divide-dark-border relative z-10 flex flex-col divide-y divide-white/10 pt-[35px]\">\n <div className=\"flex flex-col items-center justify-end\">\n <div className=\"dark:border-dark-border flex items-center gap-2 !border !border-b-0 border-white/5 px-4 py-2\">\n <p className=\"text-text-tertiary dark:text-dark-text-tertiary text-sm tracking-tight\">\n 1000 peoples\n </p>\n </div>\n </div>\n <div>\n <div className=\"mx-auto flex h-[288px] max-w-[80vw] shrink-0 flex-col items-center justify-center gap-2 px-2 py-4 sm:px-10 lg:px-24\">\n <h1 className=\"text-text-primary dark:text-dark-text-primary text-pretty text-center text-4xl sm:text-5xl md:text-6xl lg:text-[clamp(50px,7vw,75px)] font-medium leading-none tracking-[-1.44px] md:max-w-screen-lg md:tracking-[-2.16px]\">\n Developer First Headless CMS for solo's and enterprice\n </h1>\n <h2 className=\"text-md text-text-tertiary dark:text-dark-text-tertiary max-w-2xl text-pretty text-center md:text-lg\">\n You can put any thing as sub heading for SDK wrrapper thing here\n with some details\n </h2>\n </div>\n </div>\n\n <div className=\" dark:divide-dark-border flex items-start justify-center divide-y divide-white/10 px-8 sm:px-24\">\n <div className=\"flex w-full max-w-[80vw] flex-col items-center justify-start md:!max-w-[392px]\">\n <a href=\"/docs\" className=\"cursor-pointer w-full\">\n <div\n className={clsx(\n '!h-14 flex-col items-center justify-center rounded-none !text-base',\n 'max-w-sm:!border-x-0 dark:border-dark-border flex w-full !border-x !border-y-0 border-white/10 !bg-transparent backdrop-blur-xl transition-colors duration-150 hover:!bg-black/5 dark:hover:!bg-white/5',\n )}\n >\n Learn more\n </div>\n </a>\n <a href=\"/docs\" className=\"cursor-pointer w-full\">\n <div\n className={clsx(\n 'text-white dark:text-black boder-2 !h-14 flex-col items-center justify-center rounded-none border-none !text-base',\n 'flex w-full border-[1.2px] border-white/5 bg-gradient-to-tr from-purple-800 via-purple-700 to-purple-400',\n )}\n >\n Get started\n </div>\n </a>\n </div>\n </div>\n <div className=\"mx-auto max-w-7xl\">\n <AnimatedLogoCloud />\n </div>\n </div>\n </section>\n )\n}\n\nexport default FUIHeroWithBorders\n\n\n\nconst logos = [\n {\n name: 'Vercel',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881430/vercel_wordmark_dark_mhv8u8.svg',\n },\n {\n name: 'Nextjs',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881475/nextjs_logo_dark_gfkf8m.svg',\n },\n {\n name: 'Prime',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/t2awrrfzdvmg1chnzyfr.svg',\n },\n {\n name: 'Trustpilot',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/tkfspxqmjflfllbuqxsi.svg',\n },\n {\n name: 'Webflow',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276560/logos/nymiivu48d5lywhf9rpf.svg',\n },\n\n {\n name: 'Airbnb',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/pmblusboe7vkw8vxdknx.svg',\n },\n {\n name: 'Tina',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276560/logos/afqhiygywyphuou6xtxc.svg',\n },\n {\n name: 'Stackoverflow',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/ts1j4mkooxqmscgptafa.svg',\n },\n {\n name: 'mistral',\n url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715276558/logos/tyos2ayezryjskox3wzs.svg',\n },\n ]\n\n const AnimatedLogoCloud = () => {\n return (\n <div className=\"w-full py-12\">\n <div className=\"mx-auto w-full px-4 md:px-8\">\n <div\n className=\"group relative mt-6 flex gap-6 overflow-hidden p-2\"\n style={{\n maskImage:\n 'linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)',\n }}\n >\n {Array(5)\n .fill(null)\n .map((index) => (\n <div\n key={index}\n className=\"flex shrink-0 animate-x-slider flex-row justify-around gap-6\"\n >\n {logos.map((logo, key) => (\n <img\n key={key}\n src={logo.url}\n className=\"h-10 w-28 px-2 flex-none brightness-0 dark:invert\"\n alt={logo.name}\n\n />\n ))}\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n }\n\n \n"
0 commit comments