finished landing page

Author: Christopher-Stevers

components/Sales/Subnav.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
 import { ChevronRightIcon } from '@primer/octicons-react';
+import Typeform from '../Sales/drm/base/typeform';
 
 const Subnav = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -18,12 +19,12 @@ const Subnav = () => {
           </Link>
         </div>
         <div className='hidden md:flex px-12 gap-8'>
-          <Link className='self-end' href='/demo'>
+          <Link className='self-end' href='https://calendly.com/ricketh/openqdemo'>
             <div className='underline rounded-sm text-black text-xl font-semibold py-1 px-3'>Schedule demo</div>
           </Link>
-          <Link className='self-end' href='/waitlist'>
+          <Typeform>
             <div className='bg-[#533AED] rounded-lg text-white text-xl font-semibold p-1 px-5'>Join waitlist</div>
-          </Link>
+          </Typeform>
         </div>
         <div className='md:hidden flex-1 flex justify-end pr-6'>
           <button onClick={() => setIsOpen(!isOpen)}>
@@ -61,9 +62,9 @@ const Subnav = () => {
           <a href='#' className='text-gray-900 px-3 text-md font-normal pl-6 pb-5'>
             Schedule a Demo
           </a>
-          <a href='#' className='text-gray-900 px-3 text-md font-normal pl-6'>
-            Join waitlist
-          </a>
+          <Typeform>
+            <div className='text-gray-900 justify-self-start px-3 text-md font-normal pl-6'>Join waitlist</div>
+          </Typeform>
         </div>
       )}
 

components/Sales/drm/base/typeform.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { PopupButton } from '@typeform/embed-react';
+
+const Typeform = ({ children }) => {
+  return (
+    <PopupButton
+      id='TzsJCiRT'
+      style={{
+        fontSize: 18,
+        padding: 0,
+        border: 'transparent',
+        backgroundColor: 'transparent',
+        justifyContent: 'left',
+      }}
+    >
+      {children}
+    </PopupButton>
+  );
+};
+
+export default Typeform;

components/Sales/drm/cta.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import Heading from './base/heading';
 import Paragraph from './base/paragraph';
+import Typeform from './base/typeform';
 
 const Cta = () => {
   return (
@@ -14,22 +15,22 @@ const Cta = () => {
         <Paragraph className='pt-8 max-w-[48rem]'>
           OpenQ is already helping teams just like yours to manage their developer community. Let us help you next.
         </Paragraph>
-        <div className='flex flex-row justify-center items center gap-4 md:gap-x-10 pt-16'>
-          <Link href='/waitlist'>
-            <div className='bg-[#533AED] rounded-lg text-white text-xl font-semibold p-2 px-5 whitespace-nowrap'>
+        <div className='flex flex-col sm:flex-row justify-center items center gap-4 md:gap-x-10 pt-16'>
+          <Typeform>
+            <div className='bg-[#533AED] self-start rounded-lg text-white text-lg font-semibold p-2 px-5 w-full whitespace-nowrap'>
               Join waitlist
             </div>
-          </Link>
+          </Typeform>
           <div className='flex flex-row space-x-1 items-center'>
             <div className='relative inline-block'>
-              <Link href='/demo'>
+              <Link href='https://calendly.com/ricketh/openqdemo'>
                 <div className='underline rounded-sm text-black text-xl font-semibold py-1 px-3 whitespace-nowrap'>
                   Schedule demo
                 </div>
               </Link>
               <span className='absolute bg-white bottom-0 left-0 h-px w-full'></span>
             </div>
-            <div>
+            <div className='sm:block hidden'>
               <svg
                 xmlns='http://www.w3.org/2000/svg'
                 fill='none'

components/Sales/drm/elements/crm-context-2.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import Image from 'next/image';
 
 export default function CRMContextTwo() {
   return (
-    <div className='max-w-[27rem] h-[17.2rem] border rounded-lg border-gray-500'>
-      <div className='my-64'></div>
+    <div className='max-w-[27rem] h-[17.2rem] rounded-lg  px-8 flex items-center content-center'>
+      <div>
+        <Image width={432} height='100' className='rounded-lg' src='/landingpage/drm/devrel/HubSpotWhine.png' />
+      </div>
     </div>
   );
 }

components/Sales/drm/elements/org-card.jsx

@@ -6,8 +6,8 @@ const OrgCard = ({ name, link, rounded }) => {
     <div className='lg:w-60'>
       <div className='p-2 w-full border border-gray-300 bg-[#FBFBFB] rounded-sm'>
         <div className='flex flex-row justify-between items-center'>
-          <div className='flex items-center space-x-3'>
-            <div className='rounded-full' style={{ width: '20px', height: '20px', position: 'relative' }}>
+          <div className='flex items-center gap-x-3'>
+            <div className='rounded-full' style={{ aspectRatio: 1, height: '20px', position: 'relative' }}>
               <Image
                 className={`${rounded ? 'rounded-lg' : ''}`}
                 src={link}

components/Sales/drm/elements/step-one-content.jsx

@@ -42,7 +42,7 @@ const StepOneContent = () => {
   };
 
   return (
-    <div ref={parentRef} className='h-[38rem] min-w-[34rem] max-w-[48rem] sm:border border-gray-300 rounded-md'>
+    <div ref={parentRef} className='h-[38rem] md:min-w-[34rem] md:max-w-[48rem] sm:border border-gray-300 rounded-md'>
       <div className='p-10 w-full'>
         <div className='text-gray-800 font-semibold text-lg pb-2'>Add targets</div>
         <div className='border border-gray-300 bg-[#F2F2F2] p-2 px-5 w-full rounded-sm'>
@@ -120,7 +120,7 @@ const StepOneContent = () => {
               <div className='flex-1 hidden lg:block whitespace-nowrap'>
                 <OrgCard name={'OpenQDev/OpenQ-Contracts'} link={'/openq-logo.png'} />
               </div>
-              <div className='flex-1 lg:hidden whitespace-nowrap'>
+              <div className='flex-1 lg:hidden md:whitespace-nowrap'>
                 <OrgCard name={'OpenQ-Contracts'} link={'/openq-logo.png'} />
               </div>
             </>

components/animations/MobileAnim.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const MobileAnim = () => {
   return (
     <object
-      className='object-contain w-full pt-20'
+      className='object-contain w-full pt-4'
       data='/mobile-anim.svg'
       style={{
         width: '100%', // set the width

next.config.js

@@ -50,6 +50,7 @@ module.exports = () => {
     },
     images: {
       domains: [
+        'images.prismic.io',
         'githubusercontent.com',
         'assets.coingecko.com',
         'avatars.githubusercontent.com',

package.json

@@ -22,7 +22,8 @@
     "gen": "node services/ethers/mocks/abiToJavascriptClass.js",
     "prepare-mumbai": "mustache constants/config/mumbai.json constants/polygon-mumbai.json.mustache > constants/polygon-mumbai.json && mustache constants/config/mumbai.json constants/polygon-mumbai-tokens.json.mustache > constants/polygon-mumbai-tokens.json",
     "prepare-polygon": "mustache constants/config/mainnet.json constants/polygon-mainnet.json.mustache > constants/polygon-mainnet.json && mustache constants/config/mainnet.json constants/polygon-mainnet-tokens.json.mustache > constants/polygon-mainnet-tokens.json",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "slicemachine": "start-slicemachine"
   },
   "dependencies": {
     "@apollo/client": "3.7.10",
@@ -40,6 +41,10 @@
     "@metamask/jazzicon": "2.0.0",
     "@next/eslint-plugin-next": "^13.4.12",
     "@primer/octicons-react": "18.2.0",
+    "@typeform/embed-react": "^2.30.0",
+    "@prismicio/client": "^7.1.0",
+    "@prismicio/next": "^1.3.3",
+    "@prismicio/react": "^2.7.1",
     "@react-pdf/renderer": "3.1.7",
     "@svgr/webpack": "^8.0.1",
     "@tailwindcss/container-queries": "0.1.0",
@@ -99,6 +104,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.19.1",
     "@babel/preset-react": "7.18.6",
+    "@slicemachine/adapter-next": "^0.3.8",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@vitest/ui": "^0.29.8",
@@ -112,10 +118,11 @@
     "jest-junit": "15.0.0",
     "postcss": "8.4.21",
     "prettier": "2.8.4",
+    "slice-machine-ui": "^1.7.0",
     "tailwindcss": "3.2.7",
     "vitest": "^0.29.8"
   },
   "jest-junit": {
     "addFileAttribute": "true"
   }
-}
+}