/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ ul: "ul", li: "li", a: "a", p: "p", h2: "h2", ol: "ol", pre: "pre", code: "code", span: "span", strong: "strong", img: "img" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Tools Used: Chakra UI, React, Typescript" }), "\n", _jsx(_components.li, { children: "Time Saved: 1 week -> 45 mins" }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://chakra-ui-landing-page-react.vercel.app", children: "View Demo" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/bdcorps/chakra-ui-landing-page-react", children: "Source code on Github" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "This guide walks through how to create a landing page for a launched SaaS app using React and Typescript." }), "\n", _jsx(_components.h2, { children: "Introduction" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://chakra-ui.com/", children: "Chakra UI" }), " is a UI component library that is very easy to use, has accessibility out of the box, and most importantly, looks incredible."] }), "\n", _jsx(_components.p, { children: "In this guide, we will be creating a landing page for a SaaS product with:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Hero section - Hooks the reader. Details what the product is about" }), "\n", _jsx(_components.li, { children: "Demo video - What the product looks like in action" }), "\n", _jsx(_components.li, { children: "Company logos - Trust builder that shows other companies are liking the product already" }), "\n", _jsx(_components.li, { children: "Features - Top 3 ways the product helps users" }), "\n", _jsx(_components.li, { children: "Highlights - Secondary features that are nice to have" }), "\n", _jsx(_components.li, { children: "Pricing" }), "\n", _jsx(_components.li, { children: "FAQ" }), "\n", _jsx(_components.li, { children: "CTA - Remind readers to sign up after they have read all about the product" }), "\n", _jsx(_components.li, { children: "Footer" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step 1 - Set up React project" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: ["npm create vite@latest saasbase-chakraui-landing-page -- --template react-ts\n\n", _jsx(_components.span, { className: "hljs-built_in", children: "cd" }), " saasbase-chakraui-landing-page\nnpm install\nnpm run dev\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 2 - Set up Chakra UI" }), "\n", _jsx(_components.p, { children: "Chakra UI is a fantastic UI kit that comes with easy-to-use Front-end components that also look good." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons\n" }) }), "\n", _jsxs(_components.p, { children: ["We can set it up by wrapping our entire application with the ", _jsx(_components.code, { children: "ChakraUIProvider" }), "."] }), "\n", _jsxs(_components.p, { children: ["Install the ", _jsx(_components.strong, { children: "Inter" }), " font with:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm i @fontsource/inter\n" }) }), "\n", _jsxs(_components.p, { children: ["Edit ", _jsx(_components.code, { children: "src/main.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n\t", _jsx(_components.span, { className: "hljs-title class_", children: "ChakraProvider" }), ",\n\textendTheme\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ReactDOM" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react-dom/client\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n\t", _jsx(_components.span, { className: "hljs-title class_", children: "App" }), "\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./App\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " theme = ", _jsx(_components.span, { className: "hljs-title function_", children: "extendTheme" }), "({\n\t", _jsx(_components.span, { className: "hljs-attr", children: "colors" }), ": {\n\t\t", _jsx(_components.span, { className: "hljs-attr", children: "brand" }), ": {\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "50" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#f0e4ff\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "100" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#cbb2ff\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "200" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#a480ff\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "300" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#7a4dff\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "400" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#641bfe\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "500" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#5a01e5\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "600" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#5200b3\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "700" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#430081\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "800" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#2d004f\"" }), ",\n\t\t\t", _jsx(_components.span, { className: "hljs-number", children: "900" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#14001f\"" }), ",\n\t\t},\n\t},\n\t", _jsx(_components.span, { className: "hljs-attr", children: "fonts" }), ": {\n\t\t", _jsx(_components.span, { className: "hljs-attr", children: "heading" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "`'Inter', sans-serif`" }), ",\n\t\t", _jsx(_components.span, { className: "hljs-attr", children: "body" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "`'Inter', sans-serif`" }), ",\n\t},\n});\n\n", _jsx(_components.span, { className: "hljs-title class_", children: "ReactDOM" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "createRoot" }), "(", _jsx(_components.span, { className: "hljs-variable language_", children: "document" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getElementById" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"root\"" }), ")!).", _jsx(_components.span, { className: "hljs-title function_", children: "render" }), "(\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "React.StrictMode" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ChakraProvider" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "theme" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{theme}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "App" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n);\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 3 - Create the Hero section" }), "\n", _jsx(_components.p, { children: "The hero section of your landing page is the most important above-the-fold item you can have. The title and the description should hook the reader in to learn more about your offering within 4-5 secs." }), "\n", _jsxs(_components.p, { children: ["Our Hero section will have a title, description, and a strong CTA to get the readers salivating. A trust builder that shows that others are already using your product goes a long way.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.33.29-AM.png", alt: "" }), "\nCreate a new file ", _jsx(_components.code, { children: "src/components/HeroSection.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Button" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Center" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Container" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Heading" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Text" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "VStack" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "HeroSectionProps" }), " {}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "HeroSection" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "HeroSectionProps" }), "> = ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.lg\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Center" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "minHeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"70vh\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.md\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "textAlign" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Heading" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"2xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "mb" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.700\"" }), ">"] }), "\n You don't have to chase your clients around to get paid\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.500\"" }), ">"] }), "\n Freelancers use Biller to accept payments and send invoices to\n clients with a single click\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "mt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{8}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "colorScheme" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"brand\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " {\n window.open(\"https://launchman.com\", \"_blank\");\n }}\n >\n I need this for $10/month →\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "my" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.500\"" }), ">"] }), "\n 102+ builders have signed up in the last 30 days\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["Update the ", _jsx(_components.code, { children: "src/App.tsx" }), " with:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "HeroSection" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/HeroSection\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "HeroSection" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.p, { children: "We will continue to add new components to this page as we build them out." }), "\n", _jsx(_components.h2, { children: "Step 3 - Add Header" }), "\n", _jsx(_components.p, { children: "Now that we have some content in the page, we can add a header/navigation bar. This will show the name of our product, quick links for navigating to parts of the page, and a link to my Twitter." }), "\n", _jsx(_components.p, { children: "To make it truly responsive, we need to make it so that it collapses on smaller devices and the navigation goes into a side drawer like so:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://launchman-space.nyc3.digitaloceanspaces.com/twitter-logo.svg", children: "Download the SVG image of the Twitter Icon from here" }), " and place it in the ", _jsx(_components.code, { children: "public" }), " folder. Any file in this folder is served as is. This is where you want to keep all the static assets your site uses."] }), "\n", _jsxs(_components.p, { children: ["Let's start by creating a new component that will create a responsive header bar. Call it ", _jsx(_components.code, { children: "src/components/Header.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "HamburgerIcon" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/icons\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n chakra,\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Container" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Drawer" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "DrawerBody" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "DrawerCloseButton" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "DrawerContent" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "DrawerHeader" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "DrawerOverlay" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Flex" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Heading" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "IconButton" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Image" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Link" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "LinkBox" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "LinkOverlay" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Spacer" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Stack" }), ",\n useDisclosure,\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " navLinks = [\n { ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Home\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "link" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Features\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "link" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#features\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Pricing\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "link" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#pricing\"" }), " },\n];\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "DesktopSidebarContents" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "{ name }: any" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "full" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "container.lg" }), "\"]} ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{0}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Stack" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "justify" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-between\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[0," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "4" }), "]}\n ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "direction" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "column" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "row" }), "\"]}\n >"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "display" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "base:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "none" }), "\", ", _jsx(_components.span, { className: "hljs-attr", children: "md:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "flex" }), "\" }}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Heading" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"xl\"" }), ">"] }), "{name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Spacer" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Stack" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-start\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[4," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "10" }), "]}\n ", _jsx(_components.span, { className: "hljs-attr", children: "direction" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "column" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "row" }), "\"]}\n >"] }), "\n {navLinks.map((navLink: any, i: number) => {\n return (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Link" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{navLink.link}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "navlink_" }), "${", _jsx(_components.span, { className: "hljs-attr", children: "i" }), "}`}\n ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{500}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"ghost\"" }), "\n >"] }), "\n {navLink.name}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n );\n })}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Spacer" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "LinkBox" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "LinkOverlay" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "https:" }), "//", _jsx(_components.span, { className: "hljs-attr", children: "twitter.com" }), "/", _jsx(_components.span, { className: "hljs-attr", children: "thisissukh_" }), "`} ", _jsx(_components.span, { className: "hljs-attr", children: "isExternal" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"twitter.svg\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "MobileSidebar" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "{ name }: any" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { isOpen, onOpen, onClose } = ", _jsx(_components.span, { className: "hljs-title function_", children: "useDisclosure" }), "();\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsx(_components.span, { className: "hljs-tag", children: "<>" }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Flex" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Heading" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"xl\"" }), ">"] }), "{name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Spacer" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "IconButton" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "aria-label" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Search database\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "icon" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "<", _jsx(_components.span, { className: "hljs-attr", children: "HamburgerIcon" }), " />"] }), "}\n onClick={onOpen}\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Drawer" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "isOpen" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isOpen}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "placement" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"right\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "onClose" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{onClose}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"xs\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DrawerOverlay" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DrawerContent" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DrawerCloseButton" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DrawerHeader" }), ">"] }), "{name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DrawerBody" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DesktopSidebarContents" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsx(_components.span, { className: "hljs-tag", children: "" })] }), "\n );\n};\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "SidebarProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": string;\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Sidebar" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "{ name }: SidebarProps" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "chakra.header" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"header\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "display" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "base:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "flex" }), "\", ", _jsx(_components.span, { className: "hljs-attr", children: "md:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "none" }), "\" }} ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "MobileSidebar" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{name}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "display" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "base:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "none" }), "\", ", _jsx(_components.span, { className: "hljs-attr", children: "md:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "flex" }), "\" }} ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "DesktopSidebarContents" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{name}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "HeaderProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": string;\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Header" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "{ name }: HeaderProps" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Sidebar" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{name}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["Add a ", _jsx(_components.code, { children: "src/components/Layout.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "VStack" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Header" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./Header\"" }), ";\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "children" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-property", children: "ReactNode" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Layout" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutProps" }), "> = ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{\n children,\n}: LayoutProps" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{10}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Header" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Biller\"" }), " />"] }), "\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["Update the ", _jsx(_components.code, { children: "src/App.tsx" }), " with:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "HeroSection" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/HeroSection\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Layout" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/Layout\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "HeroSection" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 4 - Add a demo video" }), "\n", _jsx(_components.p, { children: "A demo video lets the reader know what to expect when they do signup for your product." }), "\n", _jsxs(_components.p, { children: ["Record an MP4 video of your product and place it in the ", _jsx(_components.code, { children: "public" }), " folder as ", _jsx(_components.code, { children: "video.mp4" }), " . Next.js serves everything from the ", _jsx(_components.code, { children: "public" }), " folder as is."] }), "\n", _jsxs(_components.p, { children: ["If you don't have one, ", _jsx(_components.a, { href: "https://launchman-space.nyc3.digitaloceanspaces.com/biller-hero-2.webm", children: "here's a sample video" }), " and a ", _jsx(_components.a, { href: "https://launchman-space.nyc3.digitaloceanspaces.com/biller-hero-2.png", children: "sample poster image" }), " you can use.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.34.03-AM.png", alt: "" }), "\nWe can also add a ", _jsx(_components.code, { children: "poster" }), " option in the ", _jsx(_components.code, { children: "video" }), " tag that shows a static image if the video isn't yet loaded. Using a static frame of the video as the poster works well."] }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "src/App.tsx" }), " with:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "HeroSection" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/HeroSection\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Layout" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/Layout\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "HeroSection" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.xl\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Center" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[0," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "10" }), "]}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "video" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "playsInline" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "autoPlay" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "muted" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "poster" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/image.png\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "loop" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "source" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/video.mp4\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"video/mp4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 5 - Add social proof with client logos" }), "\n", _jsx(_components.p, { children: "Now that the reader knows what the offering is, you can answer their next logical question - who else is using it?" }), "\n", _jsx(_components.p, { children: "Adding logos of customers at recognizable companies using your product will build trust with the reader." }), "\n", _jsxs(_components.p, { children: ["Download the SVG logos for ", _jsx(_components.a, { href: "https://launchman-space.nyc3.digitaloceanspaces.com/microsoft-logo.svg", children: "Microsoft" }), " and ", _jsx(_components.a, { href: "https://launchman-space.nyc3.digitaloceanspaces.com/adobe-logo.svg", children: "Adobe" }), " and place them in ", _jsx(_components.code, { children: "public" }), " folder just like before.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-1.42.07-PM.png", alt: "" }), "\nUpdate the ", _jsx(_components.code, { children: "src/App.tsx" }), " with:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Center" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Container" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Wrap" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "WrapItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Text" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Image" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.2xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "centerContent" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "py" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[20]}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"lg\"" }), ">"] }), "\n Used by teams worldwide\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Wrap" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[10," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "20" }), "]}\n ", _jsx(_components.span, { className: "hljs-attr", children: "mt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{8}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "justify" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), "\n >"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "WrapItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"microsoft-logo.svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Microsoft logo\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "WrapItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"adobe-logo.svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Adobe logo\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "WrapItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"microsoft-logo.svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Microsoft logo\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "WrapItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"adobe-logo.svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Adobe logo\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 6 - List features" }), "\n", _jsxs(_components.p, { children: ["The features section is where you can flaunt the top 3 ways your product will help a potential user. I like to be as direct as possible.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.34.32-AM.png", alt: "" }), "\nCreate a new file called ", _jsx(_components.code, { children: "src/components/Feature.tsx" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Button" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Center" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Container" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Stack" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Text" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "VStack" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Image" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "FeatureProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": string;\n reverse?: boolean;\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Feature" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "FeatureProps" }), "> = ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{\n title,\n description,\n image,\n reverse,\n}: FeatureProps" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " rowDirection = reverse ? ", _jsx(_components.span, { className: "hljs-string", children: "\"row-reverse\"" }), " : ", _jsx(_components.span, { className: "hljs-string", children: "\"row\"" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Center" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "minH" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[null," }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "90vh" }), "\"]}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "rounded" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"lg\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Stack" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[4," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "16" }), "]}\n ", _jsx(_components.span, { className: "hljs-attr", children: "alignItems" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "direction" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "column" }), "\", ", _jsx(_components.span, { className: "hljs-attr", children: "null" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "rowDirection" }), "]}\n ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "h" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), "\n >"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "rounded" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"lg\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{image}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "width" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{684}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "height" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{433}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "Feature:" }), " ${", _jsx(_components.span, { className: "hljs-attr", children: "title" }), "}`}\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{500}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "center" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "flex-start" }), "\"]}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"3xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{600}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "center" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "left" }), "\"]}>"] }), "\n {title}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"md\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.500\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "textAlign" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "center" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "left" }), "\"]}>"] }), "\n {description}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "colorScheme" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"brand\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"link\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "textAlign" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[" }), "\"", _jsx(_components.span, { className: "hljs-attr", children: "center" }), "\", \"", _jsx(_components.span, { className: "hljs-attr", children: "left" }), "\"]}\n >"] }), "\n Learn more →\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["Add to ", _jsx(_components.code, { children: "src/App.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Feature" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/Feature\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "FeatureType" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": string;\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "features" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FeatureType" }), "[] = [\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Detailed Analytics\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"No more spending hours writing formulas in Excel to figure out how much you're making. We surface important metrics to keep your business going strong.\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"https://launchman-space.nyc3.digitaloceanspaces.com/chakra-ui-landing-page-feature-1.png\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Track your clients\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Know when and how your projects are going so you can stay on top of delivery dates.\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"https://launchman-space.nyc3.digitaloceanspaces.com/chakra-ui-landing-page-feature-2.png\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Manage projects\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"You don't have to hunt your email inbox to find that one conversation. Every task, project, and client information is just a click away.\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"https://launchman-space.nyc3.digitaloceanspaces.com/chakra-ui-landing-page-feature-3.png\"" }), ",\n },\n];\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "backgroundColor" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"white\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"features\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{16}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "py" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[16," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "0" }), "]}\n >"] }), "\n {features.map(\n ({ title, description, image }: FeatureType, i: number) => {\n return (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Feature" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "feature_" }), "${", _jsx(_components.span, { className: "hljs-attr", children: "i" }), "}`}\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{title}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{description}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{image}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "reverse" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{i" }), " % ", _jsx(_components.span, { className: "hljs-attr", children: "2" }), " === ", _jsx(_components.span, { className: "hljs-string", children: "1}" }), "\n />"] }), "\n );\n }\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 7 - Add highlights" }), "\n", _jsxs(_components.p, { children: ["Add a new file called ", _jsx(_components.code, { children: "Highlight.tsx" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Center" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Container" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Wrap" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "WrapItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Text" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Image" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "VStack" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SimpleGrid" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " interface ", _jsx(_components.span, { className: "hljs-title class_", children: "HighlightType" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "icon" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": string;\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "highlights" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "HighlightType" }), "[] = [\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "icon" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"✨\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"No-code\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"We are No-Code friendly. There is no coding required to get started. Launchman connects with Airtable and lets you generate a new page per row. It's just that easy!\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "icon" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"🎉\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Make Google happy\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"We render all our pages server-side; when Google's robots come to index your site, the page does not have to wait for JS to be fetched. This helps you get ranked higher.\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "icon" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"😃\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Rapid experimenting\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"You don't have to wait hours to update your hard-coded landing pages. Figure out what resonates with your customers the most and update the copy in seconds\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "icon" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"🔌\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Rapid experimenting\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ":\n ", _jsx(_components.span, { className: "hljs-string", children: "\"You don't have to wait hours to update your hard-coded landing pages. Figure out what resonates with your customers the most and update the copy in seconds\"" }), ",\n },\n];\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.md\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "centerContent" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "py" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[8," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "28" }), "]}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SimpleGrid" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacingX" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{10}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacingY" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{20}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "minChildWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"300px\"" }), ">"] }), "\n {highlights.map(({ title, description, icon }, i: number) => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "rounded" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"md\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "highlight_" }), "${", _jsx(_components.span, { className: "hljs-attr", children: "i" }), "}`}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"4xl\"" }), ">"] }), "{icon}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{500}" }), ">"] }), "{title}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.500\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "mt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), ">"] }), "\n {description}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.34.56-AM.png", alt: "" }) }), "\n", _jsx(_components.h2, { children: "Step 8 - Add the Pricing section" }), "\n", _jsxs(_components.p, { children: ["Here you can add a pricing section to your page by clearly showing what features are available at what price point. Offering an Annual subscription can be beneficial for both yourself and the customer.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.35.16-AM.png", alt: "" }), "\nCreate a new component in ", _jsx(_components.code, { children: "src/components/PricingSection.tsx" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CheckCircleIcon" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/icons\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Button" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ButtonGroup" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "HStack" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "List" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ListIcon" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ListItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SimpleGrid" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Text" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "VStack" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), ", useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "PricingBoxProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "pro" }), ": boolean;\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "isBilledAnnually" }), ": boolean;\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "PricingBox" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "PricingBoxProps" }), "> = ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{\n pro,\n name,\n isBilledAnnually,\n}: PricingBoxProps" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "boxShadow" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{6}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "rounded" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"lg\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{pro" }), " ? \"", _jsx(_components.span, { className: "hljs-attr", children: "white" }), "\" ", _jsx(_components.span, { className: "hljs-attr", children: ":" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "white" }), "\"}\n ", _jsx(_components.span, { className: "hljs-attr", children: "borderColor" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{pro" }), " ? \"", _jsx(_components.span, { className: "hljs-attr", children: "brand.500" }), "\" ", _jsx(_components.span, { className: "hljs-attr", children: ":" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "gray.200" }), "\"}\n ", _jsx(_components.span, { className: "hljs-attr", children: "backgroundColor" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{pro" }), " ? \"", _jsx(_components.span, { className: "hljs-attr", children: "brand.50" }), "\" ", _jsx(_components.span, { className: "hljs-attr", children: ":" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "white" }), "\"}\n ", _jsx(_components.span, { className: "hljs-attr", children: "borderWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), "\n >"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{3}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-start\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{600}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "casing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"uppercase\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), ">"] }), "\n {name}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), ">"] }), "\n {isBilledAnnually ? (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"3xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"medium\"" }), ">"] }), "\n $89\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ) : (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"3xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"medium\"" }), ">"] }), "\n $99\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), ">"] }), "per month per site", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), ">"] }), "Unlock key features and higher usage limits", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "colorScheme" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"brand\"" }), ">"] }), "\n Free 14-day trial →\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "pt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{8}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-start\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"medium\"" }), ">"] }), "Everything in Basic, plus:", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "List" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{3}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ListItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "HStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-start\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{1}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ListIcon" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "as" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{CheckCircleIcon}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"brand.500\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "mt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{1}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), ">"] }), "\n Lorem ipsum dolor sit amet, consectetur adipisicing elit\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "PricingSectionProps" }), " {}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "PricingSection" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FunctionComponent" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "PricingSectionProps" }), "> = ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [isBilledAnnually, setIsBilledAnnually] = useState < boolean > ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{10}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ButtonGroup" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "isAttached" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " {\n setIsBilledAnnually(true);\n }}\n colorScheme={isBilledAnnually ? \"brand\" : \"gray\"}\n >\n Annually (-10%)\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " {\n setIsBilledAnnually(false);\n }}\n colorScheme={isBilledAnnually ? \"gray\" : \"brand\"}\n >\n Monthly\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SimpleGrid" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "columns" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{[1," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "null" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "3" }), "]} ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{10}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PricingBox" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "pro" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{false}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Starter\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "isBilledAnnually" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isBilledAnnually}" }), "\n />"] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PricingBox" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "pro" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{true}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Creator\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "isBilledAnnually" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isBilledAnnually}" }), "\n />"] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PricingBox" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "pro" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{false}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Enterprise\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "isBilledAnnually" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isBilledAnnually}" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["Add the component to ", _jsx(_components.code, { children: "src/App.tsx" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PricingSection" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/PricingSection\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "py" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{28}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.lg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"pricing\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PricingSection" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 9 - Add an FAQ section" }), "\n", _jsxs(_components.p, { children: ["Handle objections your potential customer might have in the FAQ section.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.35.41-AM.png", alt: "" }), "\nAdd a component called ", _jsx(_components.code, { children: "src/components/FAQSection.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Accordion" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AccordionButton" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AccordionIcon" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AccordionItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AccordionPanel" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " interface ", _jsx(_components.span, { className: "hljs-title class_", children: "FAQType" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "q" }), ": string;\n ", _jsx(_components.span, { className: "hljs-attr", children: "a" }), ": string;\n}\n\ninterface ", _jsx(_components.span, { className: "hljs-title class_", children: "FAQSectionProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FAQType" }), "[];\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "FAQSection" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "{ items }: FAQSectionProps" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "borderRadius" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"lg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "p" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Accordion" }), ">"] }), "\n {items.map((item: any, i: number) => {\n return (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "AccordionItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "faq_" }), "${", _jsx(_components.span, { className: "hljs-attr", children: "i" }), "}`}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "AccordionButton" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "flex" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"1\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "textAlign" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"left\"" }), ">"] }), "\n {item.q}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "AccordionIcon" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "AccordionPanel" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "pb" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{4}" }), ">"] }), "{item.a}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n );\n })}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "src/App.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "FAQSection" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "FAQType" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/FAQSection\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "faqs" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FAQType" }), "[] = [\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "q" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"How many clients can I bring on?\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "a" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"You can bring on 3 clients with the Free plan. Upgrade to Pro for additional seats.\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "q" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Can I connect it to my CRM?\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "a" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Yes! We support Notion and PipeDrive currently.\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "q" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Do you support international payments?\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "a" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Yes - payments can be made from and to any country.\"" }), ",\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "q" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Who can I connect to for support?\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "a" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Email me at sukh@saasbase.dev\"" }), ",\n },\n];\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "py" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{28}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.md\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "VStack" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "spacing" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{10}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "w" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"full\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontWeight" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{500}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fontSize" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"2xl\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "align" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"center\"" }), ">"] }), "\n Frequently asked questions\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FAQSection" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{faqs}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 10 - Add CTA" }), "\n", _jsxs(_components.p, { children: ["Add a final CTA to make it easy for the reader to subscribe now that they know everything about the product.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-11.35.56-AM.png", alt: "" }), "\nCreate a new component called ", _jsx(_components.code, { children: "src/components/CTA.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "import { Button, Container, Text, VStack } from \"@chakra-ui/react\";\nimport React, { FunctionComponent } from \"react\";\nimport { CTAType } from \"../types\";\n\ninterface CTAProps {\n heading: string;\n cta: CTAType;\n}\n\nexport const CTA: FunctionComponent = ({\n heading,\n cta,\n}: CTAProps) => {\n return (\n \n \n \n \n {heading}\n \n \n\n {}}\n >\n {cta.name}\n \n \n \n );\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "src/App.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-variable constant_", children: "CTA" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"../components/CTA\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "CTA" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "heading" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "Get" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "started" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "with" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "Biller" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "today" }), "!`}\n ", _jsx(_components.span, { className: "hljs-attr", children: "cta" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name:" }), " \"", _jsx(_components.span, { className: "hljs-attr", children: "I" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "want" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "this" }), "!\", ", _jsx(_components.span, { className: "hljs-attr", children: "link:" }), " \"#\" }}\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 11 - Add Footer" }), "\n", _jsx(_components.p, { children: "Add a footer with a social link to Twitter." }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "src/App.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Container" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Box" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Center" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Text" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Wrap" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "WrapItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Image" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "VStack" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SimpleGrid" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Flex" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "LinkBox" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "LinkOverlay" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Spacer" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@chakra-ui/react\"" }), ";\n", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "\n // ...\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Container" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "maxW" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container.lg\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Flex" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "py" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{6}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), ">"] }), "© 2022 Biller", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Text" }), ">"] }), "Made by Sukh", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Spacer" }), " />"] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "LinkBox" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "LinkOverlay" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://twitter.com/@thisissukh_\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "isExternal" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"twitter.svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Twitter logo\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-14-at-1.51.00-PM.png", alt: "" }) }), "\n", _jsx(_components.h2, { children: "Step 12 - Add SEO" }), "\n", _jsx(_components.p, { children: "React Helmet is a great package that helps us optimize on-page SEO. Install it by:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm i react-helmet\nnpm i --save-dev @types/react-helmet\n" }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "src/App.tsx" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Helmet" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react-helmet\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Layout" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Helmet" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "charSet" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"utf-8\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "title" }), ">"] }), "Biller | Get paid faster", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Box" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "bg" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"gray.50\"" }), ">"] }), "// ...", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n};\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 13 - Deploy on Vercel" }), "\n", _jsx(_components.p, { children: "Vercel is the smoothest deployment platform I've ever used." }), "\n", _jsx(_components.p, { children: "Deploy your React/Vite project by:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Upload source code to Github" }), "\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "Vite" }), " as the ", _jsx(_components.strong, { children: "Framework Preset" })] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/image.png", alt: "" }), " 3. Hit ", _jsx(_components.strong, { children: "Deploy" })] }), "\n", _jsx(_components.p, { children: "That's it - you have a brand new landing page ready to go with Chakra UI!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Landing Page

.css-277wjy{position:static;color:var(--chakra-colors-gray-800);}.css-277wjy::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:0;width:100%;height:100%;}Add Autoplay video to your React landing page

Build a landing page for your SaaS app using React, Chakra UI and Typescript

Add Autoplay video to your React landing page