Demo-gate + Navbar improvements (#3026)

* Demo-only page and testing for UX

* Demo-gating the product / mobile navbar + menu

* Removed "home" routing from dropdowns for create new project

* WIP - simpler changes

* Last bit of cleanup

* Last bit

* Last cleanup

* Pricing page adjustments

* Remove magic links

* Try pinning nextjs version

---------

Co-authored-by: Satya Patel <[email protected]>

Author: drfarrell

apps/web/client/package.json

@@ -81,7 +81,7 @@
         "lucide-react": "^0.486.0",
         "mobx-react-lite": "^4.1.0",
         "motion": "^12.23.19",
-        "next": ">=15.5.3",
+        "next": "15.5.4",
         "next-intl": "^4.0.2",
         "next-themes": "^0.4.6",
         "octokit": "^5.0.3",

apps/web/client/public/assets/demo-docs.png

@@ -5,18 +5,14 @@ import { motion } from 'motion/react';
 
 import { Button } from '@onlook/ui/button';
 
-import { Routes } from '@/utils/constants';
+import { ExternalRoutes, Routes } from '@/utils/constants';
 import { useGitHubStats } from '../top-bar/github';
 import { UnicornBackground } from './unicorn-background';
 
 export function BuilderFeaturesHero() {
     const router = useRouter();
     const { formatted: starCount } = useGitHubStats();
 
-    const handleStartBuilding = () => {
-        router.push(Routes.HOME);
-    };
-
     return (
         <div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
             <UnicornBackground />
@@ -58,12 +54,14 @@ export function BuilderFeaturesHero() {
                     style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
                 >
                     <Button
+                        asChild
                         variant="secondary"
                         size="lg"
                         className="hover:bg-foreground-primary hover:text-background-primary cursor-pointer p-6 transition-all duration-300"
-                        onClick={handleStartBuilding}
                     >
-                        Start Building React Apps
+                        <a href={ExternalRoutes.BOOK_DEMO} target="_blank" rel="noopener noreferrer">
+                            Book a Demo
+                        </a>
                     </Button>
                 </motion.div>
                 <motion.div

apps/web/client/public/onlook-preload-script.js

@@ -5,18 +5,14 @@ import { motion } from 'motion/react';
 
 import { Button } from '@onlook/ui/button';
 
-import { Routes } from '@/utils/constants';
+import { ExternalRoutes, Routes } from '@/utils/constants';
 import { useGitHubStats } from '../top-bar/github';
 import { UnicornBackground } from './unicorn-background';
 
 export function FeaturesHero() {
     const router = useRouter();
     const { formatted: starCount } = useGitHubStats();
 
-    const handleStartBuilding = () => {
-        router.push(Routes.HOME);
-    };
-
     return (
         <div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
             <UnicornBackground />
@@ -57,12 +53,14 @@ export function FeaturesHero() {
                     style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
                 >
                     <Button
+                        asChild
                         variant="secondary"
                         size="lg"
                         className="hover:bg-foreground-primary hover:text-background-primary cursor-pointer p-6 transition-all duration-300"
-                        onClick={handleStartBuilding}
                     >
-                        START BUILDING
+                        <a href={ExternalRoutes.BOOK_DEMO} target="_blank" rel="noopener noreferrer">
+                            Book a Demo
+                        </a>
                     </Button>
                 </motion.div>
                 <motion.div

apps/web/client/src/app/_components/hero/builder-features-hero.tsx

@@ -3,23 +3,18 @@
 import { useEffect, useState } from 'react';
 import { motion } from 'motion/react';
 
+import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 
-import { api } from '@/trpc/react';
+import { ExternalRoutes } from '@/utils/constants';
 import { vujahdayScript } from '../../fonts';
-import { Create } from './create';
 import { CreateError } from './create-error';
 import { HighDemand } from './high-demand';
-import { Import } from './import';
 import { MobileEmailCapture } from './mobile-email-capture';
-import { StartBlank } from './start-blank';
 import { UnicornBackground } from './unicorn-background';
 
 export function Hero() {
-    const [cardKey, setCardKey] = useState(0);
     const [isShortScreen, setIsShortScreen] = useState(false);
-    const [isCreatingProject, setIsCreatingProject] = useState(false);
-    const { data: user } = api.user.get.useQuery();
 
     useEffect(() => {
         const checkScreenHeight = () => {
@@ -86,31 +81,25 @@ export function Hero() {
                     <HighDemand />
                     <CreateError />
                 </div>
-                <div className="relative z-20 hidden flex-col items-center gap-4 sm:flex">
+                <div className="relative z-20 hidden flex-row items-center gap-4 sm:flex">
                     <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
-                        onAnimationComplete={() => {
-                            setCardKey((prev) => prev + 1);
-                        }}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
                     >
-                        <Create
-                            user={user ?? null}
-                            cardKey={cardKey}
-                            isCreatingProject={isCreatingProject}
-                            setIsCreatingProject={setIsCreatingProject}
-                        />
-                    </motion.div>
-                    <motion.div
-                        className="mt-0 flex gap-12"
-                        initial={{ opacity: 0, filter: 'blur(4px)' }}
-                        animate={{ opacity: 1, filter: 'blur(0px)' }}
-                        transition={{ duration: 0.6, delay: 0.6, ease: 'easeOut' }}
-                        style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
-                    >
-                        <StartBlank />
-                        <Import />
+                        <Button
+                            asChild
+                            className="bg-foreground-primary text-background-primary hover:bg-foreground-hover"
+                        >
+                            <a
+                                href={ExternalRoutes.BOOK_DEMO}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                Book a Demo
+                                <Icons.ArrowRight className="h-4 w-4" />
+                            </a>
+                        </Button>
                     </motion.div>
                 </div>
                 <MobileEmailCapture />

apps/web/client/src/app/_components/hero/features-hero.tsx

@@ -181,7 +181,7 @@ export function ContributorSection({
                     Supported by you &<br />
                     {isLoading ? '...' : starCount} other builders
                 </h2>
-                <p className="text-foreground-secondary text-regular text-center mb-8 max-w-xl">Join the community building <br /> the open source prompt-to-build app</p>
+                <p className="text-foreground-secondary text-regular text-center mb-8 max-w-xl">Join the community building <br /> the open source Cursor for Designers</p>
                 <div className="flex gap-4 flex-col md:flex-row w-full justify-center items-center">
                     <Link
                         href={githubLink}

apps/web/client/src/app/_components/hero/index.tsx

@@ -12,7 +12,7 @@ interface CTASectionProps {
     showSubtext?: boolean;
 }
 
-export function CTASection({ href, onClick, ctaText = "Craft a website\nfor free today", buttonText = "Get Started", showSubtext = true }: CTASectionProps = {}) {
+export function CTASection({ href, onClick, ctaText = "Bring your team \nto Onlook today", buttonText = "Book a Demo", showSubtext = true }: CTASectionProps = {}) {
     const router = useRouter();
 
     const handleGetStartedClick = () => {
@@ -63,11 +63,6 @@ export function CTASection({ href, onClick, ctaText = "Craft a website\nfor free
                     >
                         {buttonText}
                     </Button>
-                    {showSubtext && (
-                        <span className="text-foreground-tertiary text-regular text-left ml-0 ">
-                            No credit card required.<br /> Cancel anytime.
-                        </span>
-                    )}
                 </div>
             </div>
         </div>

apps/web/client/src/app/_components/landing-page/contributor-section.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 interface FAQ {
     question: string;
-    answer: string;
+    answer: string | React.ReactNode;
 }
 
 interface FAQDropdownProps {

apps/web/client/src/app/_components/landing-page/cta-section.tsx

@@ -6,7 +6,7 @@ import { FAQDropdown } from './faq-dropdown';
 
 interface FAQ {
     question: string;
-    answer: string;
+    answer: string | React.ReactNode;
 }
 
 interface FAQSectionProps {
@@ -18,25 +18,29 @@ interface FAQSectionProps {
 }
 
 const defaultFaqs = [
+    {
+        question: 'Is there a free version of Onlook?',
+        answer: 'Yes, Onlook can be self-hosted for free on GitHub. For the hosted cloud version, please contact our team or book a demo. We are working closely with teams to set up the best internal design and code workflow, and are happy to help you get started.',
+    },
     {
         question: 'What kinds of things can I design with Onlook?',
         answer: 'You can prototype, ideate, and create websites from scratch with Onlook',
     },
     {
         question: 'Why would I use Onlook?',
-        answer: 'When you design in Onlook you design in the real product – in other words, the source of truth. Other products are great for ideating, but Onlook is the only one that lets you design with the existing product and the only one that translates your designs to code instantly.',
+        answer: 'When you design in Onlook you design in the real product – in other words, the source of truth. Other editors are great for ideating, but Onlook is the only one that lets you design with code using your existing design system instantly.',
     },
     {
         question: 'Who owns the code that I write with Onlook?',
-        answer: "The code you make with Onlook is all yours. Your code is written locally directly to your files, and isn't hosted off your device.",
+        answer: "The code you make with Onlook is all yours. You can export it on your local machine, publish it to GitHub, or host it at a link",
     },
     {
         question: 'What is the difference between Onlook and other design tools?',
-        answer: 'Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating websites, it can be used for anything visual – presentations, mockups, and more. Because Onlook uses code as the source of truth, the types of designs you can create are unconstrained by Onlook interface.',
+        answer: 'Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating web experiences, it can be used for anything visual – presentations, mockups, and more. Because Onlook uses code as the source of truth, the types of designs you can create are unconstrained by Onlook\'s interface.',
     },
     {
         question: 'Why is Onlook open-source?',
-        answer: 'Developers have historically been second-rate citizens in the design process. Onlook was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source to give developers transparency into how we are building Onlook and how the work created through Onlook will complement the work of developers.',
+        answer: 'Developers have historically been second-rate citizens in the design process. Onlook was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source Onlook to give developers transparency over the tool, and make it as flexible as possible for the unique ways teams set up their code.',
     },
 ];