Skip to content
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

Jump to bottom

play down backstage, play up internal developer portal #1396

Merged
merged 9 commits into from
Oct 4, 2024
Merged

play down backstage, play up internal developer portal #1396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2b28381
play down backstage, play up internal developer portal
punkle Sep 30, 2024
b782fa0
move title text above video
punkle Oct 1, 2024
c569456
expand acronym
punkle Oct 1, 2024
23b8540
Clean HTML. Work on word spacing
dtuite Oct 2, 2024
9da02b3
Update index.js
punkle Oct 4, 2024
532f781
Update index.js
punkle Oct 4, 2024
70df616
Update index.js
punkle Oct 4, 2024
2ee8d37
Update index.js
punkle Oct 4, 2024
527f47e
Update index.js
punkle Oct 4, 2024
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
168 changes: 85 additions & 83 deletions src/components/landing/VideoHero/VideoHero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,81 @@
import React, { useState } from 'react'
import { Button, GrayBackgroundDotsPattern, Headline } from 'components';
import { Button, Headline } from 'components';
import { PlayIcon } from 'components/icons';
import { PAGE_PATHS } from '../../../contactFormConstants';

import IntroToRoadieModal from './IntroToRoadieModal';
import catalogScreenshot from '../../../../content/assets/home/illustrations/home-product-screenshot.svg';

const SubTitle = ({ text }) => (
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
{text}
</p>
const Title = () => (
<Headline className="tracking-tight text-center text-gray-900" size="large">
<span className="block">Achieve true</span>
<span>developer effectiveness</span>
</Headline>
);

const SubTitle = () => (
<div className="sm:max-w-lg lg:max-w-xl mx-auto">
<p className="text-center text-gray-500 lg:text-lg">
The fully customizable Internal Developer Portal built on Backstage. Scorecards, RBAC, and secure on-prem access included.
</p>
</div>
);

const CallToAction = () => (
<div className="mt-5 sm:flex sm:justify-center md:mt-8">
<div>
<Button
link={true}
to={PAGE_PATHS.freeTrial}
color="primary"
text="Try it free"
size="large"
fullWidth={true}
/>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<Button
link={true}
to={PAGE_PATHS.requestDemo}
color="secondary"
text="Request a demo"
size="large"
fullWidth={true}
/>
</div>
</div>
);

const PlayButton = ({ openModal, children }) => (
<button
type="button"
className="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
onClick={openModal}
title="Play video"
>
{children}
</button>
);

const ProductImage = () => (
<img
className="w-full"
src={catalogScreenshot}
alt="Screenshot of a component in Backstage showing Snyk, Tech Insights, CI, Argo CD, Kubernetes and PagerDuty plugins."
/>
);

const ScreenshotVideoPlayer = ({ openModal }) => (
<div className="relative sm:max-w-lg md:max-w-xl sm:mx-auto">
<PlayButton openModal={openModal}>
<span className="sr-only">Watch our video to learn more</span>
<ProductImage />

<div className="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<PlayIcon className="h-20 w-20 text-primary-500" />
</div>
</PlayButton>
</div>
);

const VideoHero = () => {
Expand All @@ -26,85 +92,21 @@ const VideoHero = () => {
modalOpen={modalOpen}
/>

<div className="relative bg-white overflow-hidden">
<div className="hidden lg:block lg:absolute lg:inset-0" aria-hidden="true">
<GrayBackgroundDotsPattern
className="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8"
width={640}
height={784}
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
/>
</div>
<div className="relative bg-white">
<div className="pt-0 pb-12 px-4">
<div className="mt-12 lg:mt-16">
<Title />
</div>

<div className="mt-4">
<SubTitle />
</div>

<div className="mb-8 lg:mb-20">
<CallToAction />
</div>

<div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-7 lg:text-left">
<Headline className="tracking-right mt-12">
<span className="text-gray-900">Batteries included</span>
<span className="block text-gray-900">Backstage</span>
</Headline>

<SubTitle
text="Fully customizable with on-prem access. Scorecards and RBAC included."
/>

<div className="mt-5 sm:flex sm:justify-center lg:justify-start md:mt-8">
<div>
<Button
link={true}
to={PAGE_PATHS.freeTrial}
color="primary"
text="Try it free"
size="large"
fullWidth={true}
/>
</div>

<div className="mt-3 sm:mt-0 sm:ml-3">
<Button
link={true}
to={PAGE_PATHS.requestDemo}
color="secondary"
text="Request a demo"
size="large"
fullWidth={true}
/>
</div>
</div>
</div>

<div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-5 lg:flex lg:items-center">
<GrayBackgroundDotsPattern
className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden"
width={640}
height={784}
id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
aria-hidden="true"
/>

<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<button
type="button"
className="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
onClick={openModal}
title="Play video"
>
<span className="sr-only">Watch our video to learn more</span>
<img
className="w-full"
src={catalogScreenshot}
alt="Screenshot of a component in Backstage showing Snyk, Tech Insights, CI, Argo CD, Kubernetes and PagerDuty plugins."
/>

<div className="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<PlayIcon className="h-20 w-20 text-primary-500" />
</div>
</button>
</div>
</div>
</div>
</main>
<ScreenshotVideoPlayer openModal={openModal} />
</div>
</div>

Expand Down
9 changes: 3 additions & 6 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,8 @@ import PagerDutyLogo from '../../content/assets/logos/pagerduty/pagerduty.inline
import ArgoLogo from '../../content/assets/logos/argo-cd/argo.inline.svg';
import JiraSoftwareLogo from '../../content/assets/logos/jira/jira.inline.svg';

const SEO_TITLE = 'Batteries included Spotify Backstage';
const LEAD = `Easier, scalable and zero-maintenance. With security, scorecards and customizability built-in.`;

const SEO_TITLE = 'Roadie - Internal Developer Portal built on Backstage';
const LEAD = `Roadie is the most customizable Internal Developer Portal with built-in best practices, automated workflows, actionable insights built on Backstage`;

const PRODUCT = {
features: [
Expand Down Expand Up @@ -241,12 +240,10 @@ const PLUGINS_SUPPORTED = {
};

const Home = ({ data }) => {
const siteTitle = data.site.siteMetadata.title;

const posts = data.allContentfulBlogPost.edges.map(mapContentfulBlogPostToMarkdownRemarkBlogPost);
return (
<>
<SEO title={`${SEO_TITLE} | ${siteTitle}`} description={LEAD} />
<SEO title={SEO_TITLE} description={LEAD} />

<SitewideHeader borderBottom={false} />

Expand Down
Loading