CINXE.COM
Laravel Nightwatch
<!DOCTYPE html> <html lang="en"> <head> <!-- Fathom - beautiful, simple website analytics --> <script src="https://cdn.usefathom.com/script.js" data-site="LDNWSDLH" defer></script> <!-- / Fathom --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Laravel Nightwatch</title> <meta name="description" content="Join the Nightwatch waitlist. First-class monitoring for Laravel. Enhance security and performance with deep insights, comprehensive logs, and tailored intelligence." /> <link rel="apple-touch-icon" sizes="180x180" href="https://nightwatch.laravel.com/build/assets/apple-touch-icon-Cu-BHjxq.png" /> <link rel="icon" type="image/png" sizes="16x16" href="https://nightwatch.laravel.com/build/assets/favicon-16x16-C0Lj3ul2.png" /> <meta name="msapplication-TileColor" content="#111111" /> <meta name="theme-color" content="#111111" /> <meta property="og:site_name" content="Laravel Nightwatch" /> <meta property="og:locale" content="en_US" /> <meta property="og:title" content="Laravel Nightwatch" /> <meta property="og:description" content="Join the Nightwatch waitlist. First-class monitoring for Laravel. Enhance security and performance with deep insights, comprehensive logs, and tailored intelligence." /> <meta property="og:image" content="https://nightwatch.laravel.com/build/assets/social-C1iVrusy.png" /> <meta property="og:image:height" content="675" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:type" content="image/png" /> <meta name="twitter:site" content="@laravelphp" /> <meta name="twitter:creator" content="@laravelphp" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Laravel Nightwatch" /> <meta name="twitter:description" content="Join the Nightwatch waitlist. First-class monitoring for Laravel. Enhance security and performance with deep insights, comprehensive logs, and tailored intelligence." /> <meta name="twitter:image" content="https://nightwatch.laravel.com/build/assets/social-C1iVrusy.png" /> <meta name="twitter:image:height" content="675" /> <meta name="twitter:image:width" content="1200" /> <!-- Fonts --> <link rel="preconnect" href="https://fonts.bunny.net" /> <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600|instrument-serif:400i" rel="stylesheet" /> <link rel="preload" as="style" href="https://nightwatch.laravel.com/build/assets/welcome-BKnN7Ggz.css" /><link rel="modulepreload" href="https://nightwatch.laravel.com/build/assets/welcome-o1QXc1eg.js" /><link rel="modulepreload" href="https://nightwatch.laravel.com/build/assets/index-CVmdyx16.js" /><link rel="modulepreload" href="https://nightwatch.laravel.com/build/assets/bootstrap-CBqIAb-Q.js" /><link rel="stylesheet" href="https://nightwatch.laravel.com/build/assets/welcome-BKnN7Ggz.css" /><script type="module" src="https://nightwatch.laravel.com/build/assets/welcome-o1QXc1eg.js"></script> <script> window.addEventListener('load', () => window.setTimeout(() => { const makeLink = (asset) => { const link = document.createElement('link') Object.keys(asset).forEach((attribute) => { link.setAttribute(attribute, asset[attribute]) }) return link } const loadNext = (assets, count) => window.setTimeout(() => { if (count > assets.length) { count = assets.length if (count === 0) { return } } const fragment = new DocumentFragment while (count > 0) { const link = makeLink(assets.shift()) fragment.append(link) count-- if (assets.length) { link.onload = () => loadNext(assets, 1) link.onerror = () => loadNext(assets, 1) } } document.head.append(fragment) }) loadNext([], 3) })) </script> <script> let transitionDelay = 0; function isVisible(el) { const { top, left, bottom, right } = el.getBoundingClientRect(); const { innerHeight, innerWidth } = window; return ( ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) ); } document.addEventListener('alpine:init', () => { Alpine.data('transitionIn', (otherData = {}, delay = 0) => ({ ...otherData, initialized: false, show: false, init() { setTimeout( () => { this.show = isVisible(this.$el); this.initialized = true; }, delay ? delay : (transitionDelay += 150), ); }, })); }); </script> </head> <body x-data class="relative overflow-x-hidden bg-[#151718] font-sans text-[#9BA1A6] antialiased selection:bg-[#151718] selection:text-[#6355FF]"> <a x-data="transitionIn" x-intersect.enter="show = initialized" class="hidden md:inline-flex absolute top-6 right-6 z-10 isolate items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border border-transparent bg-[--btn-border] px-[calc(theme(spacing.4)-1px)] py-2.5 text-base/[24px] sm:text-sm/[18px] font-medium text-white [--btn-bg:#6355FF] [--btn-border:#4337FF66] [--btn-hover-overlay:theme(backgroundColor.default/10%)] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.md)-1px)] before:bg-[--btn-bg] before:shadow-xs after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:hover:bg-[--btn-hover-overlay] focus:outline-none focus-visible:shadow-xs-selected active:shadow-xs-pressed after:active:bg-[--btn-hover-overlay] disabled:opacity-50 opacity-0 transition delay-500 duration-1000" :class="{ '!opacity-100': show }" href="/login" > Login </a> <div class="absolute inset-0 flex w-full justify-center overflow-hidden"> <div class="absolute inset-0 bg-cover bg-repeat opacity-[0.035]" style="background-size: 16px; background-image: url(https://nightwatch.laravel.com/build/assets/dots-h07H41tc.svg)" ></div> <img x-data="{ show: false }" x-init="show = true" :class="{ '!opacity-100': show }" src="https://nightwatch.laravel.com/build/assets/gradient-BbIaHq5H.png" alt="gradients" class="w-[2400px] max-w-none opacity-0 mix-blend-color-dodge blur-[10px] transition-all delay-500 duration-1000" /> </div> <div class="relative pb-24 pt-12 text-base/[150%] sm:pb-32 lg:pt-16"> <div class="relative mx-auto max-w-2xl px-6 lg:px-10"> <div class="flex flex-col items-center justify-center"> <svg x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!opacity-100': show }" aria-hidden="true" class="h-[22px] opacity-0 transition delay-500 duration-1000" viewBox="0 0 238 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <g style="mix-blend-mode: plus-lighter" fill="#fff"> <path d="M232.177 1.383h5.323V20.59h-5.323v-7.353h-5.762v7.353h-5.35V1.383h5.35v6.942h5.762V1.383ZM208.707 21.083c-5.845 0-10.207-4.335-10.207-10.07 0-5.761 4.362-10.096 10.207-10.096 5.021 0 8.917 3.32 9.713 8.176h-5.378c-.659-1.948-2.305-3.238-4.335-3.238-2.717 0-4.72 2.195-4.72 5.159 0 2.963 2.003 5.13 4.72 5.13 2.14 0 3.813-1.399 4.362-3.539h5.405c-.74 5.049-4.664 8.478-9.767 8.478ZM197.241 1.383v4.774h-5.213V20.59h-5.323V6.157h-5.214V1.383h15.75ZM177.106 20.59l-1.043-3.101h-6.805l-1.07 3.1h-5.679l7.545-19.206h5.186l7.71 19.206h-5.844Zm-2.333-7.244-2.14-5.954-2.085 5.954h4.225ZM159.198 1.383h5.653l-5.927 19.206h-4.664l-3.677-9.246-3.622 9.246h-4.664l-6.009-19.206h5.68l3.128 11.085 4.582-10.975h1.81l4.665 10.975 3.045-11.085ZM134.176 1.383v4.774h-5.213V20.59h-5.323V6.157h-5.213V1.383h15.749ZM110.234 1.383h5.323V20.59h-5.323v-7.353h-5.762v7.353h-5.35V1.383h5.35v6.942h5.762V1.383ZM85.655 10.328h10.536c0 6.283-4.115 10.755-10.124 10.755-5.872 0-10.234-4.225-10.234-10.07 0-5.844 4.28-10.096 10.179-10.096 5.048 0 9.164 3.155 9.987 7.6h-5.57c-.686-1.619-2.414-2.662-4.362-2.662-2.881 0-4.802 2.086-4.802 5.159 0 3.045 1.893 5.13 4.802 5.13 2.03 0 3.759-.987 4.362-2.469h-4.774v-3.347ZM67.346 20.59V1.382h5.378V20.59h-5.378ZM58.517 1.383h5.131V20.59h-4.39l-7.627-10.398v10.398H46.5V1.383h4.637l7.38 10.097V1.383Z" /> </g> <path d="M23.553 0c-.652 0-1.255.346-1.584.91l-1.34 2.298h9.204V1.833C29.833.821 29.013 0 28 0h-4.447Z" fill="url(#a)" /> <path d="M29.833 4.698H19.76l-1.871 3.208h11.945V4.698Z" fill="url(#b)" /> <path d="M29.833 9.396H17.02L16.083 11l.936 1.604h12.814V9.396Z" fill="url(#c)" /> <path d="M29.833 14.094H17.888l1.871 3.208h10.074v-3.208Z" fill="url(#d)" /> <path d="M29.833 18.792h-9.205l1.341 2.298c.329.564.932.91 1.584.91H28c1.012 0 1.833-.82 1.833-1.833v-1.375Z" fill="url(#e)" /> <path d="M6.78 22c.652 0 1.255-.346 1.584-.91l1.34-2.298H.5v1.375C.5 21.179 1.32 22 2.333 22H6.78Z" fill="url(#f)" /> <path d="M.5 17.302h10.074l1.871-3.208H.5v3.208Z" fill="url(#g)" /> <path d="M.5 12.604h12.814L14.25 11l-.936-1.604H.5v3.208Z" fill="url(#h)" /> <path d="M.5 7.906h11.945l-1.871-3.208H.5v3.208Z" fill="url(#i)" /> <path d="M.5 3.208h9.205L8.364.91A1.833 1.833 0 0 0 6.78 0H2.333C1.321 0 .5.82.5 1.833v1.375Z" fill="url(#j)" /> <defs> <linearGradient id="a" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="b" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="c" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="d" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="e" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="f" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="g" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="h" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="i" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> <linearGradient id="j" x1="36.5" y1="7" x2="-1.184" y2="-12.778" gradientUnits="userSpaceOnUse"> <stop stop-color="#9206FF" /> <stop offset="1" stop-color="#F40" /> </linearGradient> </defs> </svg> <span class="sr-only">Laravel Nightwatch</span> <div x-data="transitionIn({}, 2000)" x-intersect.enter="show = initialized" :class="{ '!opacity-100': show }" class="relative z-10 mt-20 inline-flex items-stretch rounded-[4px] bg-gradient-to-r from-[#FC5FFF] to-[#750C8F] p-px opacity-0 transition-all" > <div class="relative inline-flex cursor-default items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-[#110017] px-2 py-px text-xs/[18px] font-medium" > <img src="https://nightwatch.laravel.com/build/assets/star-CdTofjqH.svg" alt="Star" :class="{ '!opacity-100 !scale-100': show }" class="absolute right-0 top-0 size-[52px] -translate-y-1/2 translate-x-1/2 scale-0 opacity-0 transition-all delay-[800ms] duration-300" /> <span class="relative max-w-fit overflow-hidden bg-gradient-to-r from-[#AE46FF] to-[#FF6D76] bg-clip-text text-transparent" > Early Access 2025 <span :class="{ '!w-0': show }" class="absolute inset-y-0 right-0 w-[180px] bg-gradient-to-r from-transparent to-[#110017] to-[48px] transition-all duration-1000" ></span> </span> </div> </div> <div x-data="{ show: false }" x-init="show = true" :class="{ '!opacity-100': show }" class="absolute z-0 hidden -translate-y-1/4 opacity-0 transition-all delay-500 duration-1000 md:block" > <script> function generateDots(orbitNumber, reverse = false) { const colors = ['fill-neutral-700', 'fill-amber-600', 'fill-rose-600']; return Array.from({ length: 10 }, (_, i) => ({ id: `${orbitNumber}-${i}-${reverse ? 'reverse' : 'forward'}`, color: i % 3 === 0 ? colors[Math.floor(Math.random() * colors.length)] : 'fill-neutral-700', orbit: orbitNumber, delay: (i / 10) * 15 + Math.random() * 0.5, reverse, })); } window.orb = function () { if (window.isSafari()) return; return { dots: [ ...generateDots(1), ...generateDots(2), ...generateDots(3), ...generateDots(4), ...generateDots(1, true), ...generateDots(2, true), ...generateDots(3, true), ...generateDots(4, true), ], init() { this.dots.forEach((dot) => { const dotEl = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); dotEl.setAttribute('r', 3); dotEl.setAttribute('class', dot.color); this.$refs.orb.appendChild(dotEl); gsap.to(dotEl, { motionPath: { path: `#orbit-path-${dot.orbit}`, start: dot.reverse ? 0 : 0.5, end: dot.reverse ? 0.25 : 0.25, autoRotate: false }, duration: 5, delay: dot.delay, repeat: -1, ease: 'none', stagger: { each: 0.1, }, force3D: true }); }); }, }; }; </script> <div x-data="orb()"> <svg x-ref="orb" width="2347" height="2347" viewBox="0 0 2347 2347" fill="none" class="rotate-90 mix-blend-soft-light"> <path id="orbit-path-1" class="stroke-white/[3%]" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 6" fill="none" d="M1173.5,2346a1172.5,1172.5 0 1,0 0,-2345a1172.5,1172.5 0 1,0 0,2345" /> <path id="orbit-path-2" class="stroke-white/[3%]" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 6" fill="none" d="M1173.5,2182a1172.5,1008 0 1,0 0,-2017a1172.5,1008 0 1,0 0,2017" /> <path id="orbit-path-3" class="stroke-white/[3%]" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 6" fill="none" d="M1173.5,1994a1172.5,821 0 1,0 0,-1641a1172.5,821 0 1,0 0,1641" /> <path id="orbit-path-4" class="stroke-white/[3%]" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 6" fill="none" d="M1173.5,1760a1172.5,586 0 1,0 0,-1173a1172.5,586 0 1,0 0,1173" /> </svg> </div> </div> </div> <h1 x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-6 translate-y-4 text-center text-3xl font-semibold text-[#fff] opacity-0 transition delay-500 duration-1000 will-change-transform sm:text-4xl md:text-[44px]/[53px]" > First-class monitoring <br /> designed for Laravel </h1> <p x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-4 translate-y-4 text-balance text-center font-medium leading-[150%] text-[#BEC4FF] opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform sm:mt-6 md:mt-8" > Laravel Nightwatch delivers unparalleled insights into your application's performance, with the intelligence only a system obsessively optimized for Laravel can deliver. </p> </div> <div x-data="{ open: false, init() { setTimeout(() => (this.open = true), 1000) }, }" :class="{ '!translate-y-0 !opacity-100': open }" class="relative z-10 mx-auto mt-16 aspect-[778/445] max-w-[778px] translate-y-8 rounded-2xl border-[8px] border-[#5A6369]/[18%] opacity-0 transition-all duration-1000 will-change-transform [mask-image:linear-gradient(to_bottom,black_55%,transparent_92%)]" > <img src="https://nightwatch.laravel.com/build/assets/dashboard-IrUajbWF.png" class="aspect-[778/445] w-full rounded-lg bg-[#151718] object-cover" /> </div> <!-- Video Button --> <div x-data="{ open: false, init() { setTimeout(() => (this.open = true), 1500) }, }" class="relative z-10 mb-16 -mt-16 translate-y-8 opacity-0 transition-all duration-1000" :class="{ '!translate-y-0 !opacity-100': open }" > <a href="https://www.youtube.com/watch?v=-fJnnAm1qBs" target="__blank" class="relative mx-auto group w-fit gap-3 rounded-full bg-black pr-6 pl-2.5 text-sm font-medium border border-white/50 text-white h-11 flex items-center justify-center transition hover:bg-[#151718] before:absolute before:-z-10 before:border-[5px] before:border-white/15 before:-inset-[5px] before:rounded-full" > <svg class="opacity-75 group-hover:opacity-100" width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="13.5" cy="13" r="11" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 4.5C8.80558 4.5 5 8.30558 5 13C5 17.6944 8.80558 21.5 13.5 21.5C18.1944 21.5 22 17.6944 22 13C22 8.30558 18.1944 4.5 13.5 4.5ZM3.5 13C3.5 7.47715 7.97715 3 13.5 3C19.0228 3 23.5 7.47715 23.5 13C23.5 18.5228 19.0228 23 13.5 23C7.97715 23 3.5 18.5228 3.5 13Z" fill="black"/> <path d="M11.5 15.8039V10.1961C11.5 9.79436 11.9498 9.55666 12.2817 9.78295L16.3941 12.5869C16.6852 12.7854 16.6852 13.2146 16.3941 13.4131L12.2817 16.217C11.9498 16.4433 11.5 16.2056 11.5 15.8039Z" fill="black"/> </svg> Watch announcement </a> </div> <div class="relative mx-auto max-w-2xl px-6 lg:px-10"> <h2 x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="translate-y-4 text-lg font-medium text-[#ffffff] opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform sm:text-xl md:text-2xl" > Crafted by the team that brought you Laravel Cloud, Forge, Vapor, Nova, Pulse and more. </h2> <p x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-6 translate-y-4 opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform" > Since 2011, Laravel has focused on creating the best <a href="https://laravel.com" target="__blank" class="mix-blend-plus-lighter inline-block rounded-sm text-[#ffffff] text-strong underline decoration-[#9BA1A6] underline-offset-[3px] transition hover:decoration-[#ffffff] focus:outline-none focus-visible:shadow-xs-selected" > framework </a> and tools for shipping great products. With the introduction of <a href="https://cloud.laravel.com" target="__blank" class="mix-blend-plus-lighter inline-block rounded-sm text-[#ffffff] text-strong underline decoration-[#9BA1A6] underline-offset-[3px] transition hover:decoration-[#ffffff] focus:outline-none focus-visible:shadow-xs-selected" > Laravel Cloud </a> and our continued development of <a href="https://forge.laravel.com" target="__blank" class="mix-blend-plus-lighter inline-block rounded-sm text-[#ffffff] text-strong underline decoration-[#9BA1A6] underline-offset-[3px] transition hover:decoration-[#ffffff] focus:outline-none focus-visible:shadow-xs-selected" > Forge </a> and <a href="https://vapor.laravel.com" target="__blank" class="mix-blend-plus-lighter inline-block rounded-sm text-[#ffffff] text-strong underline decoration-[#9BA1A6] underline-offset-[3px] transition hover:decoration-[#ffffff] focus:outline-none focus-visible:shadow-xs-selected" > Vapor </a>, we know that Laravel developers needed a world-class application monitoring platform to scale without losing sleep. </p> <p x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-6 translate-y-4 opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform" > Nightwatch is monitoring without the mess. A platform built for Laravel developers and teams that need to know exactly what's happening in their application. We've meticulously crafted Nightwatch to deliver Laravel focused, context-aware insights into your application's performance. </p> <p x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-6 translate-y-4 opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform" > Say goodnight to sifting through endless logs and piecing together a mosaic of monitoring tools. With Nightwatch, you're not just tracking numbers — you're seeing the full picture of your application's health and performance with zero configuration activity monitoring, log ingestion, automated alerts, and real-time performance tracking. </p> <p x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-6 translate-y-4 opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform" > We believe Nightwatch represents the future of application observability, where comprehensive insights meet ease of use. We're not here to add another dashboard to your toolkit — we're here to redefine how you understand your Laravel application. </p> <p x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!translate-y-0 !opacity-100': show }" class="mt-6 translate-y-4 opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform" > Join the waitlist and be among the first to experience Laravel Nightwatch. </p> <div x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!opacity-100': show }" class="-ml-2 mt-6 text-[#ffffff] opacity-0 transition delay-500 duration-1000 sm:-ml-6" > <svg class="w-28" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 110 68"> <path fill="currentColor" d="M14.493 63.032a6.3 6.3 0 0 1 .613-1.82 28.08 28.08 0 0 0 .8-1.859c1.251-3.516 2.51-6.99 3.778-10.422a2950.79 2950.79 0 0 1 3.853-10.373 381.524 381.524 0 0 1 3.79-9.707 169.92 169.92 0 0 1 4.218-9.532c.084-.234.171-.447.263-.64s.18-.406.263-.64c-.268-.034-.423-.046-.465-.038l-8.997 1.681a675.46 675.46 0 0 1-8.947 1.606c-1.89.337-3.698.766-5.42 1.287-1.732.479-3.543.887-5.434 1.224-.66.177-1.138.186-1.43.027-.336-.15-.487-.36-.453-.627-.01-.26.133-.527.425-.804.293-.276.711-.47 1.255-.579l6.3-1.137c2.099-.38 4.178-.755 6.236-1.125 3.706-.616 7.378-1.29 11.017-2.023l2.974-.468 3.012-.606c.594-.076 1.037-.361 1.33-.855.15-.553.383-1.013.7-1.382.285-.318.59-.423.916-.315a.43.43 0 0 1 .264.339.79.79 0 0 1-.037.464c-.058.36-.162.707-.312 1.042.226.042.485.033.778-.026l8.407-1.692a574.793 574.793 0 0 1 8.395-1.756c2.167-.48 4.342-1.026 6.525-1.64a72.191 72.191 0 0 1 6.587-1.652c.795-.16 1.422-.178 1.883-.053.502.117.783.321.841.614.051.251-.108.544-.475.88-.326.326-.903.595-1.731.805a67.445 67.445 0 0 1-4.97.935c-1.731.262-3.413.557-5.044.885l-21.27 4.282c-.334.067-.59.206-.764.415-.143.16-.276.36-.401.603-.96 2.37-1.948 4.701-2.966 6.995a145.31 145.31 0 0 0-2.84 6.97 465.671 465.671 0 0 0-4.417 11.465c-1.418 3.767-2.852 7.56-4.303 11.377a45.33 45.33 0 0 0-1.388 4.457 50.461 50.461 0 0 1-1.274 4.37c-.15.335-.38.599-.69.791-.309.193-.598.273-.865.24-.268-.033-.478-.209-.629-.526-.15-.318-.118-.804.099-1.457ZM52.991 33.87c-.367.553-.982 1.177-1.843 1.873a10.78 10.78 0 0 1-2.608 1.635c-.878.394-1.698.537-2.46.43-.761-.108-1.252-.706-1.47-1.794a8.235 8.235 0 0 1-.14-1.016 14.272 14.272 0 0 1-.052-1.23c-.953.888-1.884 1.772-2.795 2.652a57.206 57.206 0 0 1-2.771 2.45c-.209.26-.476.445-.803.554l-.853.302c-.895.311-1.598.17-2.109-.424-.511-.593-.587-1.296-.229-2.108.159-.293.3-.561.426-.804.125-.243.292-.494.501-.754.894-1.18 1.943-2.132 3.147-2.853 1.204-.72 2.572-1.17 4.103-1.348.56-.026.966-.281 1.216-.767.234-.352.447-.7.639-1.043l.702-1.055c.058-.142.137-.289.237-.44.1-.15.21-.26.326-.326a1.42 1.42 0 0 1 .427-.151c.209-.043.385-.034.527.024.268.25.415.548.44.89.026.344-.057.796-.249 1.357-.075.276-.22.85-.437 1.72-.225.828-.366 1.64-.424 2.435-.015.787.111 1.414.38 1.882.26.427.84.397 1.744-.09a8.225 8.225 0 0 0 1.505-.956 36.73 36.73 0 0 1 1.567-1.294l.452-.352a.693.693 0 0 1 .539-.24.774.774 0 0 1 .528.351c.159.142.104.306-.163.49Zm-16.35 4.075c1.172-.454 2.355-1.17 3.55-2.151 1.187-1.022 2.114-2.036 2.782-3.04-1.237.335-2.48.977-3.725 1.924s-2.114 2.036-2.606 3.267Zm24.552-3.115c.267-.184.476-.335.627-.452a3.36 3.36 0 0 0 .439-.415c.71-.579 1.4-1.153 2.068-1.722.67-.57 1.359-1.144 2.07-1.723.367-.335.78-.549 1.241-.641a.85.85 0 0 1 .54.087c.192.092.339.171.44.238.284.334.189.723-.288 1.168-.367.335-.76.653-1.178.955-.418.302-.828.645-1.23 1.03l-2.832 2.79a143.9 143.9 0 0 0-2.846 2.728 6.171 6.171 0 0 0-1.303 1.96 52.352 52.352 0 0 1-.939 2.147 102.352 102.352 0 0 1-2.853 6.58 62.615 62.615 0 0 1-3.57 6.268 17.167 17.167 0 0 1-1.841 2.2c-.21.259-.426.477-.652.653-.26.226-.548.415-.865.566-.444.176-.858.172-1.243-.011-.385-.184-.59-.556-.617-1.117-.1-.502-.055-1.033.137-1.594.34-1.33.829-2.582 1.463-3.755a28.916 28.916 0 0 1 2.054-3.416 375.95 375.95 0 0 1 3.471-4.812 417.762 417.762 0 0 1 3.52-4.887l.477-.879c.192-.343.363-.682.513-1.017.492-1.23.96-2.478 1.4-3.742.434-1.306.889-2.616 1.364-3.93-.334.067-.59.205-.765.415l-.426.477a114.16 114.16 0 0 1-1.993 2.099 11.963 11.963 0 0 1-2.257 1.76c-.25.268-.502.427-.753.478-.811.293-1.489.278-2.033-.048-.553-.368-.809-.99-.768-1.87.041-.443.108-.87.2-1.28.09-.41.203-.824.336-1.243.217-.653.438-1.285.663-1.896l.801-1.859c.159-.293.355-.506.59-.64.225-.176.539-.13.94.137-.05.184-.095.389-.137.615-.008.175-.078.364-.212.565-.192.778-.412 1.519-.663 2.222a81.99 81.99 0 0 0-.737 2.172 12.83 12.83 0 0 0-.112.741c.008.26-.037.573-.137.942.318-.151.581-.248.79-.29a1.88 1.88 0 0 0 .665-.264c.518-.453 1.016-.901 1.492-1.345.476-.444.949-.91 1.416-1.395a43.13 43.13 0 0 0 1.68-2.036c.518-.67 1.073-1.37 1.666-2.098.2-.301.435-.544.702-.729.26-.226.62-.277 1.08-.152.653.217.813.903.48 2.058a89.062 89.062 0 0 1-.888 3.051 60.696 60.696 0 0 0-.875 3.114c-.067.1-.13.222-.188.364-.016.134-.058.36-.124.678Zm-6.951 11.845a31.618 31.618 0 0 0-1.792 2.45 37.542 37.542 0 0 0-1.741 2.7 34.1 34.1 0 0 0-1.328 2.488c-.367.77-.592 1.38-.675 1.833.368-.335.844-.888 1.429-1.659a34.704 34.704 0 0 0 1.64-2.55c.51-.93.998-1.855 1.466-2.776.459-.962.792-1.791 1-2.486Zm16.19-7.503c1.061-1.65 2.105-3.383 3.132-5.2a98.452 98.452 0 0 1 2.906-4.698c.86-1.348 1.483-1.93 1.868-1.747.385.183.177 1.096-.624 2.737a30.631 30.631 0 0 1-2.68 4.522 280.793 280.793 0 0 0-2.945 4.183 7.137 7.137 0 0 1-.89 1.093c-.326.327-.63.65-.915.968-.15.117-.317.26-.501.427l-.577.377c-.753.37-1.397.412-1.933.129-.536-.284-.926-.815-1.17-1.593a4.451 4.451 0 0 1-.203-1.983c.007-1.699.197-3.347.572-4.946.332-1.59.728-3.193 1.186-4.809.133-.636.32-1.218.562-1.745.134-.418.23-.808.288-1.168.05-.401-.127-.736-.529-1.003.075-.276.146-.465.213-.565.727-.495 1.233-1.119 1.516-1.872.326-.762.655-1.503.989-2.223.868-1.96 1.74-3.897 2.616-5.815a37.436 37.436 0 0 1 3.055-5.576c.401-.603.848-1.194 1.341-1.772.15-.335.476-.662.978-.98.267-.185.543-.327.828-.428.284-.1.594-.076.929.074.343.192.548.456.616.79.1.285.097.59-.012.916a21.665 21.665 0 0 1-.412 1.52c-.125.46-.292.929-.5 1.406a49.968 49.968 0 0 1-3.332 5.828 126.843 126.843 0 0 1-3.934 5.427c-.41.561-.793 1.14-1.152 1.734-.36.595-.69 1.227-.99 1.896a244.154 244.154 0 0 0-1.537 5.01 42.447 42.447 0 0 0-1.211 5.01c-.058.577-.095 1.15-.111 1.72-.058.577-.095 1.15-.11 1.72-.067.753.013 1.259.24 1.518.184.267.423.372.715.313.293-.06.59-.206.891-.44.343-.244.619-.495.828-.755Zm7.832-29.845c-.3.453-.78 1.202-1.44 2.249a58.114 58.114 0 0 0-1.891 3.253 56.892 56.892 0 0 0-1.678 3.34c-.484 1.056-.721 1.822-.712 2.299.267-.402.68-1.051 1.24-1.947a68.943 68.943 0 0 0 1.829-2.915 69.209 69.209 0 0 0 1.853-3.115 44.21 44.21 0 0 0 1.44-2.575c.334-.72.463-1.159.388-1.318-.042-.209-.385.034-1.029.73Zm6.808 17.236c.486-.185.954-.345 1.406-.479l1.33-.529a8.206 8.206 0 0 1 1.216-.44c.494-.143.92-.295 1.28-.454l.44-.088c.125-.026.3-.018.526.024a.967.967 0 0 1 .39.313c.15.1.222.238.214.414.017.084-.046.205-.188.364-.142.16-.255.247-.339.264a58.47 58.47 0 0 0-1.141.491c-.326.11-.695.227-1.104.353-.761.327-1.527.634-2.296.92-.736.235-1.464.512-2.183.83a1.945 1.945 0 0 0-1.003.855c-.71 1.014-1.303 1.851-1.78 2.513-.433.653-1.023 1.185-1.767 1.596-.552.285-1.087.437-1.606.454a1.744 1.744 0 0 1-1.306-.651c-.344-.41-.512-1.029-.505-1.857 0-.87.253-1.988.762-3.352.375-.946.851-1.826 1.427-2.638a39.253 39.253 0 0 1 1.968-2.55c.284-.319.597-.6.94-.842a3.298 3.298 0 0 1 1.242-.642c.694-.227 1.263-.21 1.707.048.435.217.704.685.805 1.405.067.334.076.702.026 1.104-.058.36-.09.737-.099 1.13a4.47 4.47 0 0 1-.187.69c-.05.185-.108.436-.175.754Zm-5.96 1.526c-.534 1.022-.738 1.846-.611 2.473.117.586.386.945.804 1.079.452.083.925-.056 1.418-.416.527-.41.91-1.097 1.152-2.06-.67.135-1.234.14-1.694.015-.47-.167-.825-.53-1.069-1.09Zm4.5-5.215c-1.372.755-2.286 1.832-2.745 3.23-.05.184-.058.36-.024.527.033.167.171.314.414.439.302.2.657.237 1.067.111.452-.134.728-.386.828-.754.183-.385.317-.803.4-1.255.125-.46.212-.892.262-1.294.067-.1.062-.23-.013-.389a2.691 2.691 0 0 1-.19-.614Zm18.178 2.412c-.511.06-.933.014-1.268-.136a2.883 2.883 0 0 1-.917-.664 8.285 8.285 0 0 1-.654-.978l-.478-1.08c-.37-.534-.784-.755-1.244-.663-.46.093-.912.336-1.355.73-.41.343-.78.767-1.115 1.269-.334.502-.606.883-.814 1.143-1.22 1.508-2.076 3.095-2.567 4.76-.058.36-.192.67-.4.93-.251.268-.494.469-.728.603-.243.092-.46.093-.653.001-.234-.083-.39-.313-.465-.69-.042-.209-.034-.385.024-.527.059-.142.113-.306.163-.49.508-1.582.996-3.16 1.462-4.733.467-1.574.955-3.152 1.463-4.734.125-.46.321-.892.588-1.294a.803.803 0 0 1 .276-.251c.159-.076.289-.08.39-.013.326.108.477.317.452.627.059.293.047.665-.036 1.117a30.256 30.256 0 0 0-.488 1.796 20.894 20.894 0 0 0-.349 1.832c.284-.318.46-.527.527-.628.35-.419.664-.808.94-1.168.309-.41.626-.78.952-1.106.418-.52.932-.884 1.542-1.094 1.196-.545 2.105-.25 2.725.888.151.317.277.619.378.903.101.284.222.564.365.84.176.444.386.728.629.853.234.084.598.054 1.091-.09l.628-.125c.242-.093.468-.16.677-.202.578-.16.992-.156 1.243.01.251.168.323.415.214.741-.116.285-.447.59-.99.918-.502.318-1.238.554-2.208.705Z" /> </svg> </div> <div x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!opacity-100': show }" class="mt-3 opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000" > <div class="text-base font-medium">Taylor Otwell</div> <div class="text-sm text-[#889096]">CEO, Laravel</div> </div> <div x-data="transitionIn" x-intersect.enter.half="show = initialized" class="mt-24 sm:mt-32"> <h2 :class="{ '!translate-y-0 !opacity-100': show }" class="translate-y-4 text-xl font-semibold text-[#BFBEFF] opacity-0 mix-blend-plus-lighter transition delay-500 duration-1000 will-change-transform" > Frequently Asked Questions </h2> <div x-data="{ open: null }" class="mt-3 min-h-[320px] sm:mt-6"> <div x-data="{ id: $id('faq-question'), get expanded() { return this.open === this.id }, set expanded(value) { this.open = value ? this.id : null }, }" role="region" :class="{ '!translate-y-0 !opacity-100': show }" class="translate-y-4 mix-blend-plus-lighter opacity-0 transition duration-500 will-change-transform delay-[650ms]" question="What is Laravel Nightwatch?" > <button class="group -mx-2 flex w-full items-start justify-between gap-2 rounded border border-transparent p-2 text-left transition hover:text-[#ffffff] focus:outline-none focus-visible:border-[#6355FF]" @click.prevent="open = (expanded ? null : id)" :aria-expanded="expanded" > <span class="leading-6">What is Laravel Nightwatch?</span> <span :class="!expanded ? 'rotate-90' : ''" class="relative -mr-3 flex size-6 shrink-0 items-center justify-center transition duration-100 will-change-transform" > <span class="h-[1.5px] w-3 bg-[#E1F1FF69] group-hover:bg-[#ffffff]"></span> <span :class="!expanded ? '!scale-y-100' : ''" class="absolute inset-0 left-1/2 top-1.5 h-3 w-[1.5px] origin-center -translate-x-1/2 scale-y-0 bg-[#E1F1FF69] transition-all duration-100 will-change-transform group-hover:bg-[#ffffff]" ></span> </span> </button> <div x-show="expanded" x-collapse.duration.100ms x-cloak> <div class="space-y-1 pb-2 pr-10 text-sm"> <p> Laravel Nightwatch is a hosted application monitoring platform built for Laravel developers and teams that demand real-time insights into their applications. It's meticulously optimized for Laravel and provides deep, context-aware monitoring. </p> </div> </div> </div> <div x-data="{ id: $id('faq-question'), get expanded() { return this.open === this.id }, set expanded(value) { this.open = value ? this.id : null }, }" role="region" :class="{ '!translate-y-0 !opacity-100': show }" class="translate-y-4 mix-blend-plus-lighter opacity-0 transition duration-500 will-change-transform delay-[750ms]" question="When will Nightwatch be available?" > <button class="group -mx-2 flex w-full items-start justify-between gap-2 rounded border border-transparent p-2 text-left transition hover:text-[#ffffff] focus:outline-none focus-visible:border-[#6355FF]" @click.prevent="open = (expanded ? null : id)" :aria-expanded="expanded" > <span class="leading-6">When will Nightwatch be available?</span> <span :class="!expanded ? 'rotate-90' : ''" class="relative -mr-3 flex size-6 shrink-0 items-center justify-center transition duration-100 will-change-transform" > <span class="h-[1.5px] w-3 bg-[#E1F1FF69] group-hover:bg-[#ffffff]"></span> <span :class="!expanded ? '!scale-y-100' : ''" class="absolute inset-0 left-1/2 top-1.5 h-3 w-[1.5px] origin-center -translate-x-1/2 scale-y-0 bg-[#E1F1FF69] transition-all duration-100 will-change-transform group-hover:bg-[#ffffff]" ></span> </span> </button> <div x-show="expanded" x-collapse.duration.100ms x-cloak> <div class="space-y-1 pb-2 pr-10 text-sm"> <p>Early access to Nightwatch will begin in Q1 2025.</p> </div> </div> </div> <div x-data="{ id: $id('faq-question'), get expanded() { return this.open === this.id }, set expanded(value) { this.open = value ? this.id : null }, }" role="region" :class="{ '!translate-y-0 !opacity-100': show }" class="translate-y-4 mix-blend-plus-lighter opacity-0 transition duration-500 will-change-transform delay-[750ms]" question="How much will Nightwatch cost?" > <button class="group -mx-2 flex w-full items-start justify-between gap-2 rounded border border-transparent p-2 text-left transition hover:text-[#ffffff] focus:outline-none focus-visible:border-[#6355FF]" @click.prevent="open = (expanded ? null : id)" :aria-expanded="expanded" > <span class="leading-6">How much will Nightwatch cost?</span> <span :class="!expanded ? 'rotate-90' : ''" class="relative -mr-3 flex size-6 shrink-0 items-center justify-center transition duration-100 will-change-transform" > <span class="h-[1.5px] w-3 bg-[#E1F1FF69] group-hover:bg-[#ffffff]"></span> <span :class="!expanded ? '!scale-y-100' : ''" class="absolute inset-0 left-1/2 top-1.5 h-3 w-[1.5px] origin-center -translate-x-1/2 scale-y-0 bg-[#E1F1FF69] transition-all duration-100 will-change-transform group-hover:bg-[#ffffff]" ></span> </span> </button> <div x-show="expanded" x-collapse.duration.100ms x-cloak> <div class="space-y-1 pb-2 pr-10 text-sm"> <p> We're working on a pricing model that will make sense for teams of all sizes. From solo developers to large enterprises, we want to make sure Nightwatch is accessible to everyone. </p> </div> </div> </div> <div x-data="{ id: $id('faq-question'), get expanded() { return this.open === this.id }, set expanded(value) { this.open = value ? this.id : null }, }" role="region" :class="{ '!translate-y-0 !opacity-100': show }" class="translate-y-4 mix-blend-plus-lighter opacity-0 transition duration-500 will-change-transform delay-[850ms]" question="Do I need Laravel Cloud for Nightwatch?" > <button class="group -mx-2 flex w-full items-start justify-between gap-2 rounded border border-transparent p-2 text-left transition hover:text-[#ffffff] focus:outline-none focus-visible:border-[#6355FF]" @click.prevent="open = (expanded ? null : id)" :aria-expanded="expanded" > <span class="leading-6">Do I need Laravel Cloud for Nightwatch?</span> <span :class="!expanded ? 'rotate-90' : ''" class="relative -mr-3 flex size-6 shrink-0 items-center justify-center transition duration-100 will-change-transform" > <span class="h-[1.5px] w-3 bg-[#E1F1FF69] group-hover:bg-[#ffffff]"></span> <span :class="!expanded ? '!scale-y-100' : ''" class="absolute inset-0 left-1/2 top-1.5 h-3 w-[1.5px] origin-center -translate-x-1/2 scale-y-0 bg-[#E1F1FF69] transition-all duration-100 will-change-transform group-hover:bg-[#ffffff]" ></span> </span> </button> <div x-show="expanded" x-collapse.duration.100ms x-cloak> <div class="space-y-1 pb-2 pr-10 text-sm"> <p> Nightwatch is designed to work with any Laravel application on all hosting platforms. Cloud, Forge, Vapor, and users on custom infrastructure will all benefit from seamless integration. </p> </div> </div> </div> </div> </div> </div> </div> <div x-data="{ show: false, success: false, email: '', error: '', loading: false, init() { setTimeout(() => (this.show = true), (transitionDelay += 250)) this.$watch('success', (value) => { if (value) { setTimeout(() => { this.reset() }, 5500) } }) }, reset() { this.email = '' this.success = false this.error = '' }, normalize() { this.email = this.email.trim().toLowerCase() if (this.error) { this.error = '' } }, async submit() { if (!this.email) { this.error = 'Email address is required' return } this.loading = true this.error = '' try { await axios.post('/waitlists', { email: this.email }) this.success = true } catch (error) { this.error = error.response?.data?.message || 'Failed to join waitlist. Please try again.' } finally { this.loading = false } } }" > <div x-show="!success && show" x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="translate-y-8 opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transition duration-300 ease-in" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-8 opacity-0" class="fixed inset-x-0 bottom-14 z-20 flex items-center justify-center md:bottom-24" > <div class="w-full max-w-2xl px-6 lg:px-10"> <div class="border- -mx-1.5 w-[calc(100%+.625rem)] rounded-2xl bg-[#ffffff]/[.08] p-1.5 backdrop-blur-[1px]"> <div class="relative overflow-hidden rounded-xl bg-[#151718] p-2 shadow-dialog"> <form @submit.prevent="submit"> <div class="flex items-center gap-2"> <span class="dark:before:hidden before:bg-default relative block w-full before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.md)-1px)]" > <div class="relative flex items-stretch rounded-md border border-transparent shadow-sm hover:bg-[#202425]" :class="{ '!border-[#D2002CC4] !bg-[#D2002C10]': !!error, 'focus-within:border-[#6355FF] focus-within:!bg-[#191641] focus-within:ring-[3px] focus-within:ring-[#272474]': !error, }" > <input x-model="email" name="email" autocomplete="email" placeholder="Email Address" inputmode="email" @input="normalize" class="relative block h-[44px] sm:h-[38px] w-full appearance-none rounded-md !border-none !bg-transparent px-[calc(theme(spacing[3])-1px)] py-[calc(theme(spacing[1.5])-1px)] text-base/6 sm:text-sm/6 text-strong outline-none !ring-0 placeholder:text-weak focus:border-none focus:outline-none focus:ring-0" > </div> </span> <button class="relative isolate inline-flex items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border border-transparent bg-[--btn-border] px-[calc(theme(spacing.4)-1px)] py-2.5 text-base/[24px] sm:text-sm/[18px] font-medium text-white [--btn-bg:#6355FF] [--btn-border:#4337FF66] [--btn-hover-overlay:theme(backgroundColor.default/10%)] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.md)-1px)] before:bg-[--btn-bg] before:shadow-xs after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:hover:bg-[--btn-hover-overlay] focus:outline-none focus-visible:shadow-xs-selected active:shadow-xs-pressed after:active:bg-[--btn-hover-overlay] disabled:opacity-50" :disabled="loading" > <span x-show="!loading">Join Waitlist</span> <span x-show="loading">Joining...</span> </button> </div> <p x-show="error" x-text="error" class="mt-2 text-xs font-medium text-[#C10030DB]"></p> </form> </div> </div> </div> </div> <div x-show="success" x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="translate-y-8 opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transition duration-300 ease-in" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-8 opacity-0" x-cloak class="fixed inset-x-0 bottom-14 z-20 flex items-center justify-center md:bottom-24" > <div class="w-full max-w-2xl px-6 lg:px-10"> <div class="shadow-xxl relative overflow-hidden rounded-xl bg-[#313538] text-sm/[24px]"> <div class="absolute inset-0 animate-width bg-[#151718]"></div> <div class="relative flex items-start gap-3 p-4"> <svg class="size-6 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="11" stroke="#11FFB6" stroke-opacity=".231" stroke-width="2" /> <circle cx="12" cy="12" r="9" fill="#11FFB6" fill-opacity=".231" stroke="#29A383" stroke-width="2" /> <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.457 12.626 1.875 2.084 5.208-5.417" /> </svg> <span class="text-pretty"> Great, we registered <span x-text="email" class="text-white"></span> on the waitlist. We'll email you with updates. </span> </div> </div> </div> </div> </div> <footer x-data="transitionIn" x-intersect.enter="show = initialized" :class="{ '!opacity-100': show }" class="relative z-10 flex items-center justify-center gap-2 border-t border-[#5A6369]/[18%] bg-[#26292B80] px-6 py-4 text-xs text-[#6E6E79] opacity-0 transition delay-500 duration-1000" > <p class="flex items-center gap-1.5 mix-blend-plus-lighter"> <svg class="size-4" aria-hidden="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="m.265 12.59 5.782 3.334.003.002c.074.04.16.074.263.074a.543.543 0 0 0 .262-.074l.003-.002 5.798-3.332a.527.527 0 0 0 .197-.183.508.508 0 0 0 .062-.265V9.11l2.672-1.536.004-.002c.069-.042.14-.099.188-.185a.49.49 0 0 0 .056-.244v-3.31a.552.552 0 0 0-.035-.214.429.429 0 0 0-.19-.21l-2.956-1.702a.434.434 0 0 0-.217-.062.434.434 0 0 0-.217.061l-2.9 1.669h-.001a.637.637 0 0 0-.205.176.466.466 0 0 0-.085.277v3.046l-1.948 1.12V2.179c0-.039 0-.12-.035-.205a.458.458 0 0 0-.207-.228L3.652.075A.486.486 0 0 0 3.4 0a.506.506 0 0 0-.255.073L.217 1.76A.422.422 0 0 0 0 2.13v10.06c0 .112.037.208.11.284a.726.726 0 0 0 .138.105l.012.007.005.004Zm-.004-.312a.172.172 0 0 1-.02-.088V2.13c0-.082.05-.136.094-.16L3.265.281c.095-.056.175-.056.266 0l2.91 1.672L3.53.281c-.09-.055-.17-.055-.266 0L.335 1.97a.182.182 0 0 0-.095.16v10.06c0 .038.008.066.021.09Zm6.3-3.87 2.428-1.396V3.827c0-.11.05-.175.17-.246l2.9-1.667c.07-.04.126-.04.196 0-.07-.04-.126-.04-.196 0l-2.9 1.667c-.12.07-.17.136-.17.246v3.185L6.56 8.409Zm8.68-4.77a.292.292 0 0 0-.032-.021l.032.02Zm-12.056 7.31.003.001 2.646 1.496v2.239L.961 11.88V3.005l1.954 1.121v6.386c0 .11.028.212.098.297.054.067.125.11.164.134l.008.004Zm2.89 1.357v2.794-2.794Zm-2.876-1.648a.216.216 0 0 1-.044-.145V3.987v6.525c0 .067.016.111.044.145ZM6.56 15.1l5.354-3.08V9.245v2.774L6.56 15.1Zm.24-2.655 4.874-2.785v2.221L6.8 14.684v-2.24Zm-2.42-1.939 4.854-2.8 1.942 1.126-4.866 2.772-1.93-1.098Zm7.278-1.672L6.31 11.879l5.348-3.046Zm-8.012 1.253 2.429-1.402V2.585v6.1l-2.43 1.401Zm.24-5.96V9.67l1.948-1.125V3.001L3.886 4.126Zm5.834.527 1.954 1.125V7.99L9.72 6.872V4.653Zm2.194.987v2.764V5.64Zm.48 2.764 2.435-1.392V4.237v2.775l-2.434 1.392Zm.241-2.626 1.954-1.125v2.22L12.635 7.99V5.778Zm1.943-1.961-2.423 1.397 2.423-1.397Zm-2.424 1.12 1.943-1.12-1.943-1.12-1.947 1.12 1.947 1.12ZM1.452 2.165l1.943-1.12 1.95 1.12-1.95 1.124-1.943-1.124Zm-.48 0 2.423 1.401 2.43-1.402-2.43 1.402L.971 2.164Z" fill="currentColor" /> </svg> <span>Laravel © 2025</span> </p> <span class="size-0.5 rounded-full bg-[#6E6E79] mix-blend-plus-lighter"></span> <p class="font-serif text-[15px] italic mix-blend-plus-lighter">Crafted by Artisans</p> </footer> <div x-data="transitionIn({}, (transitionDelay += 1000))" x-intersect.enter.threshold.75="show = initialized" class="pointer-events-none absolute inset-x-0 bottom-0 -z-10 flex h-[342px] justify-end overflow-hidden lg:h-auto" > <div :class="{ '!opacity-100 !translate-y-0': show }" class="relative mx-auto aspect-[1440/492] h-[342px] w-full max-w-[1440px] translate-y-20 opacity-0 transition-all duration-1000 lg:h-auto" > <img src="https://nightwatch.laravel.com/build/assets/screenshot-bottom-B2Rgsfjf.png" class="absolute inset-y-0 left-1/2 w-full min-w-[1000px] -translate-x-1/2 [mask-image:linear-gradient(to_bottom,transparent_40%,black_100%)]" /> </div> </div> </body> </html>