Skip to content

Commit 3f4785f

Browse files
mnapolimnapoli
committed
Merge branch 'revamp-hero'
2 parents 60c9d75 + 11cd849 commit 3f4785f

File tree

2 files changed

+81
-27
lines changed

2 files changed

+81
-27
lines changed

‎website/src/pages/cloud.mdx‎

Lines changed: 68 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import Faq from './cloud/faq';
99
import CaseStudies from './cloud/case-studies';
1010
import HowItWorks from './cloud/how-it-works';
1111
import Image from 'next/image';
12+
import { useState } from 'react';
13+
import { HeroBg } from './cloud/hero-bg';
14+
import { usePlausible } from 'next-plausible';
1215

1316
<NextSeo
1417
title="Bref Cloud - Serverless PHP hosting on AWS Lambda - powerful, scalable, simple"
@@ -25,64 +28,102 @@ import Image from 'next/image';
2528
<BrefCloud />
2629

2730
export function BrefCloud() {
31+
const plausible = usePlausible();
32+
const [isPlaying, setIsPlaying] = useState(false);
33+
const [reportedVideoPlay, setReportedVideoPlay] = useState(false);
34+
const playVideo = () => {
35+
setIsPlaying(true);
36+
if (!reportedVideoPlay) {
37+
setReportedVideoPlay(true);
38+
plausible('Played Bref Cloud video');
39+
}
40+
};
41+
2842
return (
2943
<div>
3044

3145
<div className="relative isolate overflow-hidden bg-white">
32-
<svg aria-hidden="true" className="absolute inset-0 -z-10 size-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]">
46+
47+
<HeroBg className="hidden lg:block absolute inset-x-0 -ml-14 mt-16 scale-90 -z-10 drop-shadow-xl" />
48+
49+
<HeroBg className="hidden lg:block absolute top-0 right-0 -mr-14 mt-16 scale-90 -z-10 drop-shadow-xl" style={{ 'transform': 'scale(-1, 1)' }} />
50+
51+
<svg aria-hidden="true" className="absolute inset-0 -z-20 size-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]">
3352
<defs><pattern x="50%" y={-1} id="0787a7c5-978c-4f66-83c7-11c213f99cb7" width={200} height={200} patternUnits="userSpaceOnUse"><path d="M.5 200V.5H200" fill="none" /></pattern></defs><rect fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" width="100%" height="100%" strokeWidth={0} />
3453
</svg>
35-
<div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-32">
36-
<div className="mx-auto max-w-2xl lg:mx-0 lg:shrink-0 lg:pt-8">
37-
<div className="flex justify-start">
54+
55+
<div className="mx-auto max-w-7xl py-20 lg:py-24 px-6 lg:px-8">
56+
<div className="mx-auto max-w-2xl text-center">
57+
<div className="flex justify-center">
3858
<Image src={logo} className="w-32" alt="Bref Cloud" />
3959
</div>
40-
<h1 className="mt-4 text-pretty text-4xl sm:text-5xl font-black tracking-tight text-gray-900">
60+
<h1 className="mt-3 text-pretty text-4xl sm:text-5xl font-black tracking-tight text-gray-900">
4161
Deploy, monitor, and run
4262
<span className="lg:hidden">&nbsp;</span>
4363
<br className="hidden lg:block" />
4464
PHP <span className="text-blue-500">serverless</span> on AWS
4565
</h1>
46-
<p className="mt-8 text-pretty leading-7 text-lg text-gray-600 max-w-lg">
47-
When one server is no longer enough and Kubernetes feels too much, go serverless.
48-
</p>
49-
<p className="mt-3 text-pretty leading-7 text-lg text-gray-600 max-w-lg">
50-
Get the reliability and <strong>insane scalability</strong> of AWS and Lambda without devops or AWS expertise.
66+
<p className="mt-6 text-pretty leading-7 sm:text-lg text-gray-600 max-w-2xl mx-auto">
67+
When one server is no longer enough and Kubernetes feels too much,
68+
get the reliability and <strong>insane scalability</strong> of AWS Lambda without devops or AWS expertise.
5169
</p>
52-
<p className="mt-3 text-pretty leading-7 text-lg text-gray-600 max-w-lg">
70+
<p className="mt-3 text-pretty leading-7 sm:text-lg text-gray-600 max-w-2xl mx-auto">
5371
Deploy in one command, monitor from an intuitive dashboard, and manage permissions easily.
54-
Bref Cloud makes AWS and serverless <strong>accessible and simple</strong> with expert support built-in.
72+
Bref Cloud makes AWS and serverless <strong>accessible and simple</strong>.
5573
</p>
56-
<div className="mt-10 flex items-center gap-x-6">
74+
<div className="mt-8 flex items-center justify-center gap-x-6">
5775
<a
5876
href="https://bref.cloud/register"
5977
className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
6078
>
61-
Start free trial
79+
Get started
6280
</a>
6381
<a href="https://calendly.com/bref-enterprise/bref-cloud-demo" className="text-sm/6 font-semibold text-gray-900">
6482
Schedule a demo <span aria-hidden="true">→</span>
6583
</a>
6684
</div>
6785
</div>
68-
<div
69-
className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
70-
<div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
71-
<div
72-
className="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
73-
<Image
74-
alt="Bref Cloud screenshot"
75-
src={mainScreenshot}
76-
className="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
77-
priority={true}
78-
/>
79-
</div>
86+
<div className="mx-auto max-w-5xl mt-16 sm:mt-20 flex">
87+
<div
88+
className="w-full -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
89+
{isPlaying ? (
90+
<div className="w-full max-w-full overflow-hidden rounded-md shadow-2xl ring-1 ring-gray-900/10 aspect-video bg-black">
91+
<iframe
92+
src="https://www.youtube.com/embed/mU6Wlcetl9M?autoplay=1&rel=0"
93+
title="Bref Cloud video"
94+
allow="autoplay; encrypted-media; picture-in-picture"
95+
allowFullScreen
96+
className="h-full w-full aspect-video"
97+
/>
98+
</div>
99+
) : (
100+
<button
101+
type="button"
102+
onClick={() => playVideo()}
103+
className="group relative focus:outline-none"
104+
aria-label="Play video"
105+
>
106+
<Image
107+
alt="Bref Cloud screenshot"
108+
src={mainScreenshot}
109+
className="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10 group-hover:opacity-80 transition-opacity"
110+
priority={true}
111+
/>
112+
<span className="pointer-events-none absolute inset-0 flex items-center justify-center">
113+
<span className="inline-flex items-center justify-center rounded-full bg-gray-50 group-hover:bg-white size-14 md:size-20 shadow-xl ring-1 ring-gray-900/10 transition-colors">
114+
<svg aria-hidden="true" className="size-10 md:size-16 text-gray-800" viewBox="0 0 24 24" fill="currentColor">
115+
<path d="M8 5v14l11-7z" />
116+
</svg>
117+
</span>
118+
</span>
119+
</button>
120+
)}
80121
</div>
81122
</div>
82123
</div>
83124
</div>
84125

85-
<div className="py-24 sm:py-28">
126+
<div className="pt-4 pb-20 sm:pb-24">
86127
<div className="mx-auto max-w-4xl px-6 lg:px-8 text-lg text-pretty leading-8 text-gray-700">
87128
<p>
88129
Choosing infrastructure is usually a compromise between: <strong className="text-gray-900">reliable</strong>, <strong className="text-gray-900">powerful</strong>, or <strong className="text-gray-900">simple</strong>.

‎website/src/pages/cloud/hero-bg.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function HeroBg({ children, ...props }) {
2+
return (
3+
<svg {...props} width="253" height="415" viewBox="0 0 253 415" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<path d="M103.567 51.7842C103.567 80.384 80.3826 103.568 51.7832 103.568C23.1838 103.568 0.000127252 80.384 -2.26356e-06 51.7842C-1.01342e-06 23.1843 23.1837 4.52206e-05 51.7832 6.49419e-06C80.3827 7.74431e-06 103.567 23.1843 103.567 51.7842ZM103.567 207.702C103.567 236.302 80.3827 259.486 51.7832 259.486C23.1837 259.486 -1.03291e-05 236.302 -9.07895e-06 207.702C3.66839e-05 179.103 23.1837 155.918 51.7832 155.918C80.3827 155.918 103.567 179.103 103.567 207.702ZM103.567 363.056C103.567 391.656 80.3827 414.84 51.7832 414.84C23.1837 414.84 5.14169e-05 391.655 -1.58697e-05 363.056C-1.46195e-05 334.456 23.1837 311.272 51.7832 311.271C80.3827 311.271 103.567 334.456 103.567 363.056ZM252.294 207.702C252.294 236.302 229.11 259.486 200.511 259.486C171.911 259.486 148.727 236.302 148.727 207.702C148.727 179.103 171.911 155.918 200.511 155.918C229.11 155.918 252.294 179.103 252.294 207.702ZM252.294 359.068C252.294 387.668 229.11 410.852 200.511 410.853C171.911 410.853 148.727 387.668 148.727 359.068C148.727 330.469 171.911 307.284 200.511 307.284C229.11 307.284 252.294 330.469 252.294 359.068Z" fill="url(#paint0_linear_35_4)"/>
5+
<defs>
6+
<linearGradient id="paint0_linear_35_4" x1="67.0292" y1="90.0993" x2="168.337" y2="434.548" gradientUnits="userSpaceOnUse">
7+
<stop offset="0.403661" stop-color="rgba(58, 169, 233, 0.04)"/>
8+
<stop offset="1" stop-color="rgba(58, 169, 233, 0.08)"/>
9+
</linearGradient>
10+
</defs>
11+
</svg>
12+
)
13+
}

0 commit comments

Comments
 (0)