Skip to content

Commit

Permalink
Partially migrate landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtuite
dtuite committed Oct 5, 2021
1 parent e884755 commit 66b8aca
Show file tree
Hide file tree
Showing 8 changed files with 490 additions and 133 deletions.
2 changes: 1 addition & 1 deletion postcss.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};
109 changes: 109 additions & 0 deletions src/components/tailwind/SitewideHeader/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import React, { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { MenuIcon, XIcon } from '@heroicons/react/outline'
import { Link } from 'components';

const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Solutions', href: '#' },
{ name: 'Backstage Weekly', href: '#' },
{ name: 'Blog', href: '/blog/' },
]

const SitewideHeader = () => {
return (
<Popover>
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<nav className="relative flex items-center justify-between sm:h-10 md:justify-center" aria-label="Global">
<div className="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
<div className="flex items-center justify-between w-full md:w-auto">
<Link to="/">
<span className="sr-only">Workflow</span>
<img
className="h-8 w-auto sm:h-10"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt=""
/>
</Link>
<div className="-mr-2 flex items-center md:hidden">
<Popover.Button className="bg-gray-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
</div>
<div className="hidden md:flex md:space-x-10">
{navigation.map((item) => (
<Link key={item.name} to={item.href} className="font-medium text-gray-500 hover:text-gray-900">
{item.name}
</Link>
))}
</div>
<div className="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
<span className="inline-flex rounded-md shadow">
<Link
to="#"
className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"
>
Log in
</Link>
</span>
</div>
</nav>
</div>

<Transition
as={Fragment}
enter="duration-150 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
className="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt=""
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="px-2 pt-2 pb-3">
{navigation.map((item) => (
<Link
key={item.name}
to={item.href}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
>
{item.name}
</Link>
))}
</div>
<Link
to="#"
className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100"
>
Log in
</Link>
</div>
</Popover.Panel>
</Transition>
</Popover>
);
};

export default SitewideHeader;
35 changes: 35 additions & 0 deletions src/components/tailwind/ctas/SimpleCentered/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { Link } from 'components';

const SimpleCentered = () => {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
<span className="block">Ready to dive in?</span>
<span className="block">Start your free trial today.</span>
</h2>
<div className="mt-8 flex justify-center">
<div className="inline-flex rounded-md shadow">
<Link
to="#"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
>
Try it free
</Link>
</div>
<div className="ml-3 inline-flex">
<Link
to="#"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
>
Request a demo
</Link>
</div>
</div>
</div>
</div>
)
};

export default SimpleCentered;
223 changes: 223 additions & 0 deletions src/components/tailwind/features/AlternativeSideBySide/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
import React from 'react';
import {
AnnotationIcon,
GlobeAltIcon,
LightningBoltIcon,
MailIcon,
ScaleIcon,
} from '@heroicons/react/outline'

import dragDropIllustration from '../../../../../content/assets/home/drag-drop-illustration.svg';
import securityMaintenanceIllustration from '../../../../../content/assets/home/security-maintenance-illustration.svg';

const easeOfUseFeatures = [{
id: 1,
name: 'All major plugin formats supported',
description:
`Roadie's drag and drop setup supports cards, tabs, sidebar links and full page plugins.`,
icon: GlobeAltIcon,
}, {
id: 2,
name: 'Bring your own plugins',
description:
'Building your own internal plugins? Just publish them to our repository and they appear in your Backstage experience like magic.',
icon: ScaleIcon,
}, {
id: 3,
name: 'Admins only',
description:
`Plugins would move around too frequently if everyone could edit them. We've built roles into Backstage so admins can lead the setup process.`,
icon: LightningBoltIcon,
}];

const maintenanceFeatures = [{
id: 1,
name: 'Automated upgrades',
description:
`Open-source community power means that Backstage moves quickly. It's easy to fall behind if you don't put the work in.`,
icon: AnnotationIcon,
}, {
id: 2,
name: 'Security patches delivered',
description:
`We regularly patch vulnerabilities in the open-source code, ensuring you're using a hardened version of Backstage.`,
icon: MailIcon,
}];

const AlternativeSideBySide = () => {
return (
<div className="py-16 bg-gray-50 overflow-hidden lg:py-24">
<div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
<svg
className="hidden lg:block absolute left-full transform -translate-x-1/2 -translate-y-1/4"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
aria-hidden="true"
>
<defs>
<pattern
id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={404} height={784} fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
</svg>

<div className="relative">
<h2 className="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Backstage with benefits...
</h2>
<p className="mt-4 max-w-3xl mx-auto text-center text-xl text-gray-500">
We&apos;re building on top of Backstage to make it painless to use and maintenance free.
</p>
</div>

<div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
<div className="relative">
<h3 className="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">
Quick and easy setup
</h3>
<p className="mt-3 text-lg text-gray-500">
Customize Backstage to suit your needs using our drag-and-drop composer. If your company uses Pagerduty
instead of Opsgenie, simply remove one plugin and replace it with the other. It takes seconds and
changes roll out instantly for everyone.
</p>

<dl className="mt-10 space-y-10">
{easeOfUseFeatures.map((item) => (
<div key={item.id} className="relative">
<dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">{item.name}</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">{item.description}</dd>
</div>
))}
</dl>
</div>

<div className="mt-10 -mx-4 relative lg:mt-0" aria-hidden="true">
<svg
className="absolute left-1/2 transform -translate-x-1/2 translate-y-16 lg:hidden"
width={784}
height={404}
fill="none"
viewBox="0 0 784 404"
>
<defs>
<pattern
id="ca9667ae-9f92-4be7-abcb-9e3d727f2941"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={784} height={404} fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" />
</svg>
<img
className="relative mx-auto"
width={490}
src={dragDropIllustration}
alt=""
/>
</div>
</div>

<svg
className="hidden lg:block absolute right-full transform translate-x-1/2 translate-y-12"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={404} height={784} fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
</svg>

<div className="relative mt-12 sm:mt-16 lg:mt-24">
<div className="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:gap-8 lg:items-center">
<div className="lg:col-start-2">
<h3 className="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">Maintenance free</h3>
<p className="mt-3 text-lg text-gray-500">
Roadie handles upgrades and security so you can stay focussed on the work your team does best.
</p>

<dl className="mt-10 space-y-10">
{maintenanceFeatures.map((item) => (
<div key={item.id} className="relative">
<dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">{item.name}</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">{item.description}</dd>
</div>
))}
</dl>
</div>

<div className="mt-10 -mx-4 relative lg:mt-0 lg:col-start-1">
<svg
className="absolute left-1/2 transform -translate-x-1/2 translate-y-16 lg:hidden"
width={784}
height={404}
fill="none"
viewBox="0 0 784 404"
aria-hidden="true"
>
<defs>
<pattern
id="e80155a9-dfde-425a-b5ea-1f6fadd20131"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={784} height={404} fill="url(#e80155a9-dfde-425a-b5ea-1f6fadd20131)" />
</svg>
<img
className="relative mx-auto"
width={490}
src={securityMaintenanceIllustration}
alt=""
/>
</div>
</div>
</div>
</div>
</div>
)
};

export default AlternativeSideBySide;
Loading

0 comments on commit 66b8aca

Please sign in to comment.