Skip to content

basehub demo #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
julianbenegas wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

basehub demo #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"postbuild": "next-sitemap",
"start": "next start",
"lint": "next lint && stylelint '**/*.{css,scss}'",
"tsc": "tsc --pretty --noEmit"
"tsc": "tsc --pretty --noEmit",
"postinstall": "basehub"
},
"dependencies": {
"@juggle/resize-observer": "^3.4.0",
Expand All @@ -26,6 +27,7 @@
"@replayio/overboard": "^0.4.1",
"@typeform/embed-react": "^2.22.0",
"@vercel/analytics": "^1.0.1",
"basehub": "^1.2.8",
"clsx": "1.1.1",
"embla-carousel-react": "8.0.0-rc05",
"global": "^4.4.0",
Expand Down
102 changes: 47 additions & 55 deletions src/components/sections/homepage/hero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { RichText } from 'basehub/react'
import clsx from 'clsx'
import { gsap } from 'lib/gsap'
import dynamic, { LoaderComponent } from 'next/dynamic'
Expand All @@ -24,51 +25,39 @@ import heroImage from '~/images/homepage/hero-image.jpg'
import s from './hero.module.scss'

const Sky = dynamic(
() => import('~/components/common/sky').then((m) => m.Sky) as LoaderComponent,
{
ssr: false
}
() => import('~/components/common/sky').then((m) => m.Sky),
{ ssr: false }
)

const Grid3D = dynamic(
() =>
import('~/components/common/grid-3d').then(
(m) => m.Grid3D
) as LoaderComponent,
{
ssr: false
}
{ ssr: false }
)

const outlineSvgSize = {
width: 1442,
height: 876
}

const subheroes = [
<span key="variant-4">
Replay is the only browser that lets you record and retroactively debug your
application. Fix the hardest issues as a team and take control of your
support process and test suite.
</span>,
<span key="variant-3">
Replay is the only browser that lets you record and retroactively debug your
application with <b>print statements</b> and <b>Browser DevTools</b> so that
you can file the perfect bug report and fix failing flaky tests.
</span>,

<span key="variant-2">
Replay is the only browser that lets you record, retroactively debug, and
fix the hardest issues as a team with perfect reproducibility.
</span>,

<span key="variant-1">
Replay is the only browser that lets you record and retroactively debug your
application with <b>print statements</b> and <b>Browser DevTools</b>.
</span>
]

export const Hero = () => {
type HeroProps = {
title: {
one: string
two: string
three: string
}
subtitleVariants: Array<{ content: unknown; key: string }>
ctas: Array<{
label: string
href: string
type: 'primary' | 'secondary'
key: string
}>
}

export const Hero = ({ title, ctas, subtitleVariants }: HeroProps) => {
const { boot } = useIntercom()
const firstRef = useRef<HTMLDivElement>(null)
const sectionRef = useRef<HTMLDivElement>(null)
Expand All @@ -81,8 +70,8 @@ export const Hero = () => {
const variant = router.query.variant
? parseInt(router.query.variant as string)
: 0
return subheroes[variant]
}, [router.query])
return subtitleVariants[variant]
}, [router.query, subtitleVariants])

useEffect(() => {
if (!isDesktop) return
Expand Down Expand Up @@ -320,7 +309,7 @@ export const Hero = () => {
width={40}
height={40}
/>
<span className={s['text-segment']}>Record. </span>
<span className={s['text-segment']}>{title.one} </span>
</span>
<span className={s['title-section']}>
<Image
Expand All @@ -330,7 +319,7 @@ export const Hero = () => {
width={40}
height={40}
/>
<span className={s['text-segment']}>Replay. </span>
<span className={s['text-segment']}>{title.two} </span>
</span>
<span className={s['title-section']}>
<Image
Expand All @@ -340,7 +329,7 @@ export const Hero = () => {
width={40}
height={40}
/>
<span className={s['text-segment']}>Fix.</span>
<span className={s['text-segment']}>{title.three}</span>
</span>
</div>
<div className={s.mask} id="heading-container-double">
Expand All @@ -351,13 +340,13 @@ export const Hero = () => {
)}
>
<span className={s['title-section']}>
<span className={s['text-segment']}>Record. </span>
<span className={s['text-segment']}>{title.one} </span>
</span>
<span className={s['title-section']}>
<span className={s['text-segment']}>Replay. </span>
<span className={s['text-segment']}>{title.two} </span>
</span>
<span className={s['title-section']}>
<span className={s['text-segment']}>Fix.</span>
<span className={s['text-segment']}>{title.three}</span>
</span>
</div>
</div>
Expand All @@ -367,26 +356,29 @@ export const Hero = () => {
}}
subtitle={{
className: s.subtitle,
children: subhero
children: (
<RichText
components={{
p: (props) => <span {...props} />,
a: (props) => <Link {...props} />
}}
>
{subhero?.content}
</RichText>
)
}}
/>

<div className={s['ctas']}>
<Link
passHref
href="https://docs.replay.io/getting-started/recording-your-first-replay"
rel="noopener"
>
<Button mode="primary" size="big" aria-label="Get started">
Get started
</Button>
</Link>

<Link passHref href="contact/" rel="noopener">
<Button mode="secondary" size="big" aria-label="Contact us">
Contact us
</Button>
</Link>
{ctas.map((cta) => {
return (
<Link passHref href={cta.href} rel="noopener" key={cta.key}>
<Button mode={cta.type} size="big" aria-label={cta.label}>
{cta.label}
</Button>
</Link>
)
})}
</div>
</Container>
</div>
Expand Down
119 changes: 53 additions & 66 deletions src/components/sections/homepage/value-prop/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,46 @@
import { RichText, RichTextProps } from 'basehub/react'
import Link from 'next/link'
import React from 'react'

import { TitleAndSubtitle } from '~/components/primitives/texts'

import s from './value-prop.module.scss'

const ValueProp = () => {
const valuePropsData = [
{
title: 'Stop reproducing bugs',
description:
'Say goodbye to screenshots, videos, and repro steps. Recording a bug with Replay lets anyone debug it as if it happened on their own machine.',
link: '/overview#stop-reproducing-bugs',
linkText: 'Learn More'
},
{
title: 'Support your users with ease',
description:
'Bugs reported by QA and users with Replay are fully actionable and quickly understood by developers. Never close issues again for a lack of information.',
link: '/overview#support-your-users',
linkText: 'Learn More'
},
{
title: 'Fix all your flaky tests',
description:
'Debugging a flaky test failure with Replay is just as easy as any other bug. Stop struggling to understand these failures, or suppressing tests because they don’t pass reliably.',
link: '/overview#fix-all-your-flaky-tests',
linkText: 'Learn More'
},
{
title: 'Deploy with confidence',
description:
'Building a thorough and rock solid test suite is easy with Replay and really hard without it. This lets you deploy whenever you want and catch more issues before they hit users.',
link: '/overview#deploy-with-confidence',
linkText: 'Learn More'
},
{
title: 'Debug test failures remotely',
description:
'With Replay you can directly debug test failures that happened in CI as if they happened on your own machine. There is no need to locally reproduce the failure, or pore over logs or videos.',
link: '/overview#debug-test-failures-remotely',
linkText: 'Learn More'
},
{
title: 'Modernize your test suite',
description:
'Replay is easy to integrate with any test suite regardless of its framework. Get the best debugging experience in the world without rewriting any of your tests.',
link: '/overview#modernize-your-test-suite',
linkText: 'Learn More'
}
]
type ValuePropItem = {
key: string
title: string
content: unknown
}

const ValueProp = ({
title,
subtitle,
items
}: {
title: string
subtitle: unknown
items: Array<ValuePropItem>
}) => {
return (
<div className={s.componentWrapper}>
<div className={s.timeTravelHero}>
<TitleAndSubtitle
title={{
as: 'h2',
children: 'Travel Back in Time',
children: title,
className: s.timeTravelHero
}}
subtitle={{
children: (
<span className={s.timeTravelText}>
Replay is a next-generation time travel debugger. With low
overhead, the browser records just enough so it can be replayed
exactly and inspected down to the finest detail. <br />
<br />
<Link href="/overview">Learn more</Link>
</span>
<ValuePropSubtitleRenderer>{subtitle}</ValuePropSubtitleRenderer>
)
}}
/>
</div>

<div className={s.columns}>
{valuePropsData.map((item, index) => (
<React.Fragment key={index}>
{items.map((item, index) => (
<React.Fragment key={item.key}>
<div className={s.valueProp}>
<TitleAndSubtitle
title={{
Expand All @@ -85,19 +49,13 @@ const ValueProp = () => {
className: s.header
}}
subtitle={{
children: <span>{item.description}</span>
children: (
<ValuePropSubtitleRenderer>
{item.content}
</ValuePropSubtitleRenderer>
)
}}
/>
<div
style={{
textAlign: 'center',
marginTop: '10px',
color: '#9ca3af',
textDecoration: 'underline'
}}
>
<Link href={item.link}>{item.linkText}</Link>
</div>
</div>
{index === 1 && <hr className={s.divider} />}
</React.Fragment>
Expand All @@ -107,4 +65,33 @@ const ValueProp = () => {
)
}

const ValuePropSubtitleRenderer = ({
children
}: {
children: RichTextProps['children']
}) => {
return (
<RichText
components={{
p: (props) => (
<span className={s.timeTravelText}>{props.children}</span>
),
a: (props) => (
<Link
{...props}
style={{
textAlign: 'center',
marginTop: '10px',
color: '#9ca3af',
textDecoration: 'underline'
}}
/>
)
}}
>
{children}
</RichText>
)
}

export default ValueProp
6 changes: 5 additions & 1 deletion src/components/sections/homepage/value-prop/value-prop.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,17 @@

.timeTravelText {
max-width: 440px;
margin-bottom: 30px;
display: block;
margin-bottom: 12px;

@media (max-width: 900px) {
padding: 0 32px 32px;
border-bottom: 1px solid #1b1f26;
}

&:last-child {
margin-bottom: 0px;
}
}

.componentWrapper {
Expand Down
Loading