Skip to content

Commit

Permalink
Merge pull request #2 from faast-rt/feat/add-landing-page
Browse files Browse the repository at this point in the history 
feat: add landing page
  • Loading branch information
@iverly
iverly authored Oct 24, 2023
2 parents 7c13a3d + 0eb0abc commit 5f7ec92
Show file tree
Hide file tree
Showing 12 changed files with 563 additions and 19 deletions.
121 changes: 121 additions & 0 deletions components/cta.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import Link from 'next/link';

export default function CTA() {
return (
<section>
<div className="max-w-6xl mx-auto px-4 sm:px-6">
<div className="pb-12 md:pb-20">
{/* CTA box */}
<div
className="relative bg-stone-900 rounded py-10 px-8 md:py-16 md:px-12 shadow-2xl overflow-hidden"
data-aos="zoom-y-out"
>
{/* Background illustration */}
<div
className="absolute right-0 bottom-0 pointer-events-none hidden lg:block"
aria-hidden="true"
>
<svg width="428" height="328" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
cx="35.542%"
cy="34.553%"
fx="35.542%"
fy="34.553%"
r="96.031%"
id="ni-a"
>
<stop stopColor="#DFDFDF" offset="0%" />
<stop stopColor="#4C4C4C" offset="44.317%" />
<stop stopColor="#333" offset="100%" />
</radialGradient>
</defs>
<g fill="none" fillRule="evenodd">
<g fill="#FFF">
<ellipse
fillOpacity=".04"
cx="185"
cy="15.576"
rx="16"
ry="15.576"
/>
<ellipse
fillOpacity=".24"
cx="100"
cy="68.402"
rx="24"
ry="23.364"
/>
<ellipse
fillOpacity=".12"
cx="29"
cy="251.231"
rx="29"
ry="28.231"
/>
<ellipse
fillOpacity=".64"
cx="29"
cy="251.231"
rx="8"
ry="7.788"
/>
<ellipse
fillOpacity=".12"
cx="342"
cy="31.303"
rx="8"
ry="7.788"
/>
<ellipse
fillOpacity=".48"
cx="62"
cy="126.811"
rx="2"
ry="1.947"
/>
<ellipse
fillOpacity=".12"
cx="78"
cy="7.072"
rx="2"
ry="1.947"
/>
<ellipse
fillOpacity=".64"
cx="185"
cy="15.576"
rx="6"
ry="5.841"
/>
</g>
<circle fill="url(#ni-a)" cx="276" cy="237" r="200" />
</g>
</svg>
</div>

<div className="relative flex flex-col lg:flex-row justify-between items-center">
{/* CTA content */}
<div className="text-center lg:text-left lg:max-w-xl">
<h3 className="h3 text-white mb-2">
Want more tutorials & guides?
</h3>
<p className="text-gray-300 text-lg mb-6">
Dive into a world of knowledge and explore the limitless
possibilities with Faast.
</p>

<Link
href="/docs"
className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0"
>
Get started <span className="pl-2">→</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
169 changes: 169 additions & 0 deletions components/features.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import { Transition } from '@headlessui/react';
import Image from 'next/image';
import { useEffect, useRef, useState } from 'react';
import FeaturesBg from '../public/images/features-bg.png';

const Tab = ({ title, text, selected, onClick }) => {
return (
<a
className={`flex items-center text-lg p-5 rounded transition duration-300 ease-in-out mb-3 ${
selected
? 'bg-gray-200 dark:bg-stone-950'
: 'bg-white dark:bg-stone-900 shadow-md hover:shadow-lg'
}`}
href="#0"
onClick={onClick}
>
<div>
<div className="font-bold leading-snug tracking-tight mb-1">
{title}
</div>
<div className="text-gray-600">{text}</div>
</div>
<div className="flex justify-center items-center w-8 h-8 dark:bg-black rounded-full shadow flex-shrink-0 ml-3">
<svg
className="w-3 h-3 fill-current"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
</svg>
</div>
</a>
);
};

const TabImage = ({ selected, heightFix, image }) => {
return (
<Transition
show={selected}
appear={true}
className="w-full"
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform absolute"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
beforeEnter={() => heightFix()}
unmount={false}
>
<div className="relative inline-flex flex-col">
<Image
className="md:max-w-none mx-auto rounded"
src={image}
width={500}
height="462"
alt="Features bg"
/>
</div>
</Transition>
);
};

export default function Hero() {
const [tab, setTab] = useState<number>(1);
const tabs = useRef<HTMLDivElement>(null);
const heightFix = () => {
if (tabs.current?.parentElement)
tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`;
};

useEffect(() => {
heightFix();
}, []);

return (
<section className="relative py-16">
{/* Section background (needs .relative class on parent and next sibling elements) */}
<div
className="absolute inset-0 pointer-events-none mb-16"
aria-hidden="true"
></div>
<div className="absolute left-0 right-0 m-auto w-px p-px h-20 bg-gray-200 transform -translate-y-1/2"></div>

<div className="relative max-w-6xl mx-auto px-4 sm:px-6">
<div className="pt-12 md:pt-20">
{/* Section header */}
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
<h1 className="h2 mb-4">Explore the solutions</h1>
<p className="text-xl text-gray-600">
Experience seamless integration, swift deployments, and the power
of FaaS out of the box. Elevate your serverless journey with us.
</p>
</div>

{/* Section content */}
<div className="md:grid md:grid-cols-12 md:gap-6">
{/* Content */}
<div
className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6 md:mt-6"
data-aos="fade-right"
>
<div className="md:pr-4 lg:pr-12 xl:pr-16 mb-8">
<h3 className="h3 mb-3">Powerful suite of tools</h3>
</div>
{/* Tabs buttons */}
<div className="mb-8 md:mb-0">
<Tab
title="Initialize & Deploy"
text="Launch your serverless functions effortlessly. With Faast's intuitive command-line tools, start your server and send your first function to execute !"
selected={tab === 1}
onClick={(e) => {
e.preventDefault();
setTab(1);
}}
/>
<Tab
title="Scale On-Demand"
text="Faast's architecture ensures optimal performance. As your demands grow, Faast scales with you, ensuring your execution never miss a beat."
selected={tab === 2}
onClick={(e) => {
e.preventDefault();
setTab(2);
}}
/>
<Tab
title="Write & Deploy Functions Swiftly"
text="With Faast's intuitive API, seamlessly integrate your execution in seconds, ensuring they're running efficiently and securely."
selected={tab === 3}
onClick={(e) => {
e.preventDefault();
setTab(3);
}}
/>
</div>
</div>

{/* Tabs items */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1">
<div className="transition-all">
<div
className="relative flex flex-col text-center lg:text-right"
data-aos="zoom-y-out"
ref={tabs}
>
<TabImage
selected={tab === 1}
heightFix={heightFix}
image={FeaturesBg}
/>
<TabImage
selected={tab === 2}
heightFix={heightFix}
image={FeaturesBg}
/>
<TabImage
selected={tab === 3}
heightFix={heightFix}
image={FeaturesBg}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
85 changes: 85 additions & 0 deletions components/hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import Link from 'next/link';

export default function Hero() {
return (
<section className="relative pt-16">
{/* Illustration behind hero content */}
<div
className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none -z-1"
aria-hidden="true"
>
<svg
width="1360"
height="578"
viewBox="0 0 1360 578"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
x1="50%"
y1="0%"
x2="50%"
y2="100%"
id="illustration-01"
>
<stop stopColor="#FFF" offset="0%" />
<stop stopColor="#EAEAEA" offset="77.402%" />
<stop stopColor="#DFDFDF" offset="100%" />
</linearGradient>
</defs>
<g fill="url(#illustration-01)" fillRule="evenodd">
<circle cx="1232" cy="128" r="128" />
<circle cx="155" cy="443" r="64" />
</g>
</svg>
</div>

<div className="max-w-6xl mx-auto px-4 sm:px-6">
{/* Hero content */}
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
{/* Section header */}
<div className="text-center pb-12 md:pb-16">
<h1
className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4"
data-aos="zoom-y-out"
>
Crafted in{' '}
<span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-pink-500">
Rust
</span>
, Honed for{' '}
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">
Speed
</span>{' '}
!
</h1>
<div className="max-w-3xl mx-auto">
<p
className="text-xl text-gray-500 mb-8"
data-aos="zoom-y-out"
data-aos-delay="150"
>
Experience the fusion of robustness and performance in
serverless computing with Faast.
</p>
<div
className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center"
data-aos="zoom-y-out"
data-aos-delay="300"
>
<div>
<Link
href="/docs"
className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0"
>
Get started <span className="pl-2">→</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
Loading

0 comments on commit 5f7ec92

Please sign in to comment.