Skip to content

Commit

Permalink
Updated Getting Started
Browse files Browse the repository at this point in the history
  • Loading branch information
H authored and H committed Aug 2, 2023
1 parent a9d7dfe commit d112219
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 61 deletions.
15 changes: 10 additions & 5 deletions src/components/CallToAction.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@ import { Button } from "@/components/Button";
import { Container } from "@/components/Container";
import backgroundImage from "@/images/background-call-to-action.jpg";

import { useSingletonContext } from '@/pages/SingletonContextProvider';

export function CallToAction() {

const { openGetStartedModal } = useSingletonContext();

return (
<section
id="get-started-today"
Expand All @@ -26,22 +31,22 @@ export function CallToAction() {
<Container className="relative">
<div className="mx-auto max-w-lg text-center">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
Next Steps
Stop Breaking Prod
</h2>
<p className="mt-4 text-lg tracking-tight text-white">
Try PipeRider today and stop worrying about breaking prod.
PipeRider Cloud is free to get started, and offers flexibility for teams of different sizes and budgets.
PipeRider is free to get started, and offers flexibility for teams of different sizes and budgets.
</p>
<div className="mt-10 flex justify-center gap-x-6">
<Button
href="https://cloud.piperider.io/signup?ref=prio-cta"
color="white"
className="mt-10"
onClick={() => {
track("[Action] Click CTA Cloud");
track("[Action] Click CTA - Stop Breaking Prod - Get Started");
openGetStartedModal();
}}
>
Try PipeRider Cloud
Get Started
</Button>
</div>
</div>
Expand Down
12 changes: 9 additions & 3 deletions src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { Logo } from "@/components/Logo";
import { NavLink } from "@/components/NavLink";
import { siteNav } from "@/lib/siteMeta";

import { useSingletonContext } from '@/pages/SingletonContextProvider';

function MobileNavLink({ href, children }) {
return (
<Popover.Button as={Link} href={href} className="block w-full p-2">
Expand Down Expand Up @@ -97,6 +99,9 @@ function MobileNavigation() {
}

export function Header() {

const { openGetStartedModal } = useSingletonContext();

return (
<header className="py-10">
<Container>
Expand All @@ -116,7 +121,7 @@ export function Header() {
</div>
<div className="flex items-center gap-x-5 md:gap-x-8">
<div className="hidden lg:block">
<iframe src="https://ghbtns.com/github-btn.html?user=InfuseAI&repo=piperider&type=star&count=true" frameborder="0" scrolling="0" width="90" height="20" title="GitHub"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=InfuseAI&repo=piperider&type=star&count=true" frameBorder="0" scrolling="0" width="90" height="20" title="GitHub"></iframe>
</div>
<div className="hidden md:block">

Expand All @@ -131,10 +136,11 @@ export function Header() {
</div>

<Button
href="https://cloud.piperider.io/signup"
href="#get-started"
color="orange"
onClick = {() => {
track('[Action] Click Get started today');
track('[Action] Click Get started Header');
openGetStartedModal();
}}
>
<span>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,12 @@ export function Hero() {
<div className="mt-10 flex justify-center gap-x-6">
<Button
color="orange"
href="https://cloud.piperider.io/signup"
onClick = {() => {
track('[Action] Click Hero Cloud');
track('[Action] Click Hero Get Started');
openGetStartedModal();
}}
>
Try PipeRider Cloud
<span className="mx-3">Get Started Today</span>
</Button>
<Button
href="https://github.com/InfuseAI/piperider"
Expand All @@ -119,7 +119,7 @@ export function Hero() {
}}
>
<IconGithub />
<span className="ml-3">Download Open Source</span>
<span className="ml-3">Open Source Github</span>
</Button>
</div>
</Container>
Expand Down
84 changes: 50 additions & 34 deletions src/pages/SingletonContextProvider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import { createContext, useState, useContext } from 'react';

import { useDisclosure } from '@chakra-ui/react'
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton } from '@chakra-ui/react'
import { Heading, Text, Icon, Spacer, Button, Box, Grid, Image } from '@chakra-ui/react'
import { Center, Heading, Text, Icon, Spacer, Button, Box, Grid, Image } from '@chakra-ui/react'
import { BsGithub, BsFillCloudFill } from 'react-icons/bs'

import { track } from "@amplitude/analytics-browser";

// Create a context
const SingletonContext = createContext();

Expand Down Expand Up @@ -43,42 +45,56 @@ export function useSingletonContext() {

export function GetStartedModal( {isOpen, onOpen, onClose}) {
return (
<Modal isOpen={isOpen} onOpen={onOpen} onClose={onClose} size="4xl">
<Modal isOpen={isOpen} onOpen={onOpen} onClose={onClose} size="4xl" isCentered>
<ModalOverlay />
<ModalContent m={8} borderRadius={16} bg="gray.100">
<ModalHeader>
<Heading fontSize='4xl' textAlign='center' as="h1">Get Started with PipeRider</Heading>
</ModalHeader>
<ModalCloseButton />
<ModalBody p={8}>
{/* TODO: Make this ROW Based on Mobile - e.g. Stack with relative directions and Boxes with Flex 1. */}
<Grid gridTemplateColumns="repeat(2, 1fr)" gap={6} textAlign='center'>
<Box bg='white' p={4} borderRadius={8}>
<Heading as="h2" fontSize='xl'>Local or Self-Hosted</Heading>
<Text my={4}>PipeRider is open source and free. Use it locally, self-host it, or add Cloud hosting later on!</Text>
<Image maxW='200px' src='/images/illustrations/hand-coding-bro.png' alt='A Command Line Interface' mx='auto'/>
<Button colorScheme='orange' mr={3} onClick={onClose} w="100%" borderRadius="100px" py={6} my={4}>
<Icon as={BsGithub} boxSize={5} mr={2} />
{/* TODO: Hook this up with actual url. And Track its Click. */}
Get Started with Command Line
</Button>
</Box>
<Center>
<ModalContent m={8} borderRadius={16} bg="gray.100">
<ModalHeader>
<Heading fontSize='4xl' textAlign='center' as="h1">Get Started with PipeRider</Heading>
</ModalHeader>
<ModalCloseButton />
<ModalBody p={8}>
{/* TODO: Make this ROW Based on Mobile - e.g. Stack with relative directions and Boxes with Flex 1. */}
<Grid gridTemplateColumns="repeat(2, 1fr)" gap={6} textAlign='center'>
<Box bg='white' p={4} borderRadius={8}>
<Heading as="h2" fontSize='xl'>Local or Self-Hosted</Heading>
<Text my={4}>PipeRider is open source and free. Use it locally, self-host it, or add Cloud hosting later on!</Text>
<Image maxW='200px' src='/images/illustrations/hand-coding-bro.png' alt='A Command Line Interface' mx='auto'/>
<Button colorScheme='orange' mr={3} w="100%" borderRadius="100px" py={6} my={4}
onClick={() => {
track(`[Action] Click - Get Started - Command Line`);
window.location.href = 'https://github.com/InfuseAI/piperider';
onClose()}
}
>
<Icon as={BsGithub} boxSize={5} mr={2} />
{/* TODO: Hook this up with actual url. And Track its Click. */}
Get Started with Command Line
</Button>
</Box>

<Box bg='white' p={4} borderRadius={8}>
<Heading as="h2" fontSize='xl'>Cloud</Heading>
<Text my={4}>PipeRider Cloud takes the hassle out of hosting PipeRider. Share reports with ease!</Text>
<Image maxW='200px' src='/images/illustrations/completed-steps-bro.png' alt='A Command Line Interface' mx='auto'/>
<Button colorScheme='orange' mr={3} onClick={onClose} w="100%" borderRadius="100px" py={6} my={4}>
<Icon as={BsFillCloudFill} boxSize={5} mr={2} />
{/* TODO: Hook this up with actual url. And Track its Click. */}
Get Started with Cloud
</Button>
</Box>
</Grid>
</ModalBody>
<Box bg='white' p={4} borderRadius={8}>
<Heading as="h2" fontSize='xl'>Cloud</Heading>
<Text my={4}>PipeRider Cloud takes the hassle out of hosting PipeRider. Share reports with ease!</Text>
<Image maxW='200px' src='/images/illustrations/completed-steps-bro.png' alt='A Command Line Interface' mx='auto'/>
<Button colorScheme='orange' mr={3} onClick={onClose} w="100%" borderRadius="100px" py={6} my={4}
onClick={() => {
track(`[Action] Click - Get Started - Cloud`);
window.location.href = 'https://cloud.piperider.io/signup';
onClose();}
}
>
<Icon as={BsFillCloudFill} boxSize={5} mr={2} />
{/* TODO: Hook this up with actual url. And Track its Click. */}
Get Started with Cloud
</Button>
</Box>
</Grid>
</ModalBody>

<ModalFooter></ModalFooter>
</ModalContent>
<ModalFooter></ModalFooter>
</ModalContent>
</Center>
</Modal>
)
}
31 changes: 16 additions & 15 deletions src/pages/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,22 @@ export default function Home() {
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
</Head>
<Header />
<main>
<ChakraProvider>
<SingletonContextProvider>
<Hero />
<PrimaryFeatures />
<BlogArea />
<CallToAction />
{/* <Testimonials /> */}
<Pricing />
{/* <Faqs /> */}
</SingletonContextProvider>
</ChakraProvider>
</main>
<Footer />
<ChakraProvider>
<SingletonContextProvider>
<Header />
<main>
<Hero />
<PrimaryFeatures />
<BlogArea />
<CallToAction />
{/* <Testimonials /> */}
<Pricing />
{/* <Faqs /> */}
</main>
<Footer />
</SingletonContextProvider>
</ChakraProvider>

</>
);
}

0 comments on commit d112219

Please sign in to comment.