|
|
import { createBoltClient } from "@rapid-web/react";
|
|
|
import { routes, Handlers } from "../pages/api/bindings";
|
|
|
|
|
|
const bolt = createBoltClient<Handlers, typeof routes>(routes, {
|
|
|
transport: "http://localhost:8080",
|
|
|
});
|
|
|
|
|
|
import {
|
|
|
CaretRight,
|
|
|
ArrowSquareOut,
|
|
|
ArrowsClockwise,
|
|
|
CloudArrowUp,
|
|
|
Gear,
|
|
|
LockSimple,
|
|
|
HardDrives,
|
|
|
ShieldCheck,
|
|
|
} from "~/icons";
|
|
|
import { Header } from "./header";
|
|
|
import Image from "next/image";
|
|
|
import { Button } from "~/button";
|
|
|
import { Input } from "~/input";
|
|
|
import Link from "next/link";
|
|
|
|
|
|
const navigation = [
|
|
|
{ name: "Product", href: "#" },
|
|
|
{ name: "Features", href: "#" },
|
|
|
{ name: "Marketplace", href: "#" },
|
|
|
{ name: "Company", href: "#" },
|
|
|
];
|
|
|
const features = [
|
|
|
{
|
|
|
name: "Push to Deploy",
|
|
|
description:
|
|
|
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi vitae lobortis.",
|
|
|
icon: CloudArrowUp,
|
|
|
},
|
|
|
{
|
|
|
name: "SSL Certificates",
|
|
|
description:
|
|
|
"Qui aut temporibus nesciunt vitae dicta repellat sit dolores pariatur. Temporibus qui illum aut.",
|
|
|
icon: LockSimple,
|
|
|
},
|
|
|
{
|
|
|
name: "Simple Queues",
|
|
|
description:
|
|
|
"Rerum quas incidunt deleniti quaerat suscipit mollitia. Amet repellendus ut odit dolores qui.",
|
|
|
icon: ArrowsClockwise,
|
|
|
},
|
|
|
{
|
|
|
name: "Advanced Security",
|
|
|
description:
|
|
|
"Ullam laboriosam est voluptatem maxime ut mollitia commodi. Et dignissimos suscipit perspiciatis.",
|
|
|
icon: ShieldCheck,
|
|
|
},
|
|
|
{
|
|
|
name: "Powerful API",
|
|
|
description:
|
|
|
"Ab a facere voluptatem in quia corrupti veritatis aliquam. Veritatis labore quaerat ipsum quaerat id.",
|
|
|
icon: Gear,
|
|
|
},
|
|
|
{
|
|
|
name: "Database Backups",
|
|
|
description:
|
|
|
"Quia qui et est officia cupiditate qui consectetur. Ratione similique et impedit ea ipsum et.",
|
|
|
icon: HardDrives,
|
|
|
},
|
|
|
];
|
|
|
const blogPosts = [
|
|
|
{
|
|
|
id: 1,
|
|
|
title: "Boost your conversion rate",
|
|
|
href: "#",
|
|
|
date: "Mar 16, 2020",
|
|
|
datetime: "2020-03-16",
|
|
|
category: { name: "Article", href: "#" },
|
|
|
imageUrl:
|
|
|
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
|
|
|
preview:
|
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.",
|
|
|
author: {
|
|
|
name: "Roel Aufderehar",
|
|
|
imageUrl:
|
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
|
|
href: "#",
|
|
|
},
|
|
|
readingLength: "6 min",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
title: "How to use search engine optimization to drive sales",
|
|
|
href: "#",
|
|
|
date: "Mar 10, 2020",
|
|
|
datetime: "2020-03-10",
|
|
|
category: { name: "Video", href: "#" },
|
|
|
imageUrl:
|
|
|
"https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
|
|
|
preview:
|
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.",
|
|
|
author: {
|
|
|
name: "Brenna Goyette",
|
|
|
imageUrl:
|
|
|
"https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
|
|
href: "#",
|
|
|
},
|
|
|
readingLength: "4 min",
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
title: "Improve your customer experience",
|
|
|
href: "#",
|
|
|
date: "Feb 12, 2020",
|
|
|
datetime: "2020-02-12",
|
|
|
category: { name: "Case Study", href: "#" },
|
|
|
imageUrl:
|
|
|
"https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
|
|
|
preview:
|
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.",
|
|
|
author: {
|
|
|
name: "Daniela Metz",
|
|
|
imageUrl:
|
|
|
"https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
|
|
href: "#",
|
|
|
},
|
|
|
readingLength: "11 min",
|
|
|
},
|
|
|
];
|
|
|
const footerNavigation = {
|
|
|
solutions: [
|
|
|
{ name: "Marketing", href: "#" },
|
|
|
{ name: "Analytics", href: "#" },
|
|
|
{ name: "Commerce", href: "#" },
|
|
|
{ name: "Insights", href: "#" },
|
|
|
],
|
|
|
support: [
|
|
|
{ name: "Pricing", href: "#" },
|
|
|
{ name: "Documentation", href: "#" },
|
|
|
{ name: "Guides", href: "#" },
|
|
|
{ name: "API Status", href: "#" },
|
|
|
],
|
|
|
company: [
|
|
|
{ name: "About", href: "#" },
|
|
|
{ name: "Blog", href: "#" },
|
|
|
{ name: "Jobs", href: "#" },
|
|
|
{ name: "Press", href: "#" },
|
|
|
{ name: "Partners", href: "#" },
|
|
|
],
|
|
|
legal: [
|
|
|
{ name: "Claim", href: "#" },
|
|
|
{ name: "Privacy", href: "#" },
|
|
|
{ name: "Terms", href: "#" },
|
|
|
],
|
|
|
social: [
|
|
|
{
|
|
|
name: "Facebook",
|
|
|
href: "#",
|
|
|
icon: (props: Omit<React.SVGProps<SVGElement>, "ref">) => (
|
|
|
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
|
|
<path
|
|
|
fillRule="evenodd"
|
|
|
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
|
|
|
clipRule="evenodd"
|
|
|
/>
|
|
|
</svg>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
name: "Instagram",
|
|
|
href: "#",
|
|
|
icon: (props: Omit<React.SVGProps<SVGElement>, "ref">) => (
|
|
|
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
|
|
<path
|
|
|
fillRule="evenodd"
|
|
|
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
|
|
|
clipRule="evenodd"
|
|
|
/>
|
|
|
</svg>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
name: "Twitter",
|
|
|
href: "#",
|
|
|
icon: (props: Omit<React.SVGProps<SVGElement>, "ref">) => (
|
|
|
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
|
|
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
|
|
|
</svg>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
name: "GitHub",
|
|
|
href: "#",
|
|
|
icon: (props: Omit<React.SVGProps<SVGElement>, "ref">) => (
|
|
|
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
|
|
<path
|
|
|
fillRule="evenodd"
|
|
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
|
|
clipRule="evenodd"
|
|
|
/>
|
|
|
</svg>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
name: "Dribbble",
|
|
|
href: "#",
|
|
|
icon: (props: Omit<React.SVGProps<SVGElement>, "ref">) => (
|
|
|
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
|
|
<path
|
|
|
fillRule="evenodd"
|
|
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
|
|
|
clipRule="evenodd"
|
|
|
/>
|
|
|
</svg>
|
|
|
),
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
export default async function Home() {
|
|
|
const {
|
|
|
data: { plain, colored },
|
|
|
} = await bolt("hello").get(routes.hello);
|
|
|
const { data: message } = await bolt("echo").post(
|
|
|
routes.echo,
|
|
|
"Anim aute id magna aliqua ad ad non deserunt sunt. Quiirure qui Lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat."
|
|
|
);
|
|
|
|
|
|
return (
|
|
|
<div className="bg-white">
|
|
|
<div className="relative overflow-hidden">
|
|
|
<Header navigation={navigation} />
|
|
|
<main>
|
|
|
<div className="bg-gray-900 pt-10 sm:pt-16 lg:overflow-hidden lg:pb-14 lg:pt-8">
|
|
|
<div className="mx-auto max-w-7xl lg:px-8">
|
|
|
<div className="lg:grid lg:grid-cols-2 lg:gap-8">
|
|
|
<div className="mx-auto max-w-md px-6 sm:max-w-2xl sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
|
|
|
<div className="lg:py-24">
|
|
|
<Link
|
|
|
href="#"
|
|
|
className="inline-flex items-center rounded-full bg-black p-1 pr-2 text-white hover:text-gray-200 sm:text-base lg:text-sm xl:text-base"
|
|
|
>
|
|
|
<span className="rounded-full bg-gradient-to-r from-teal-500 to-cyan-600 px-3 py-0.5 text-sm font-semibold leading-5 text-white">
|
|
|
We're hiring
|
|
|
</span>
|
|
|
<span className="ml-4 text-sm">
|
|
|
Visit our careers page
|
|
|
</span>
|
|
|
<CaretRight
|
|
|
className="ml-2 h-5 w-5 text-gray-500"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
</Link>
|
|
|
<h1 className="mt-4 text-4xl font-bold tracking-tight text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
|
|
|
<span className="block">{plain}</span>
|
|
|
<span className="block bg-gradient-to-r from-teal-200 to-cyan-400 bg-clip-text pb-3 text-transparent sm:pb-5">
|
|
|
{colored}
|
|
|
</span>
|
|
|
</h1>
|
|
|
<p className="text-base text-gray-300 sm:text-xl lg:text-lg xl:text-xl">
|
|
|
{message}
|
|
|
</p>
|
|
|
<div className="mt-10 sm:mt-12">
|
|
|
<form
|
|
|
action="#"
|
|
|
className="sm:mx-auto sm:max-w-xl lg:mx-0"
|
|
|
>
|
|
|
<div className="sm:flex">
|
|
|
<div className="min-w-0 flex-1">
|
|
|
<label htmlFor="email" className="sr-only">
|
|
|
Email address
|
|
|
</label>
|
|
|
<Input
|
|
|
id="email"
|
|
|
type="email"
|
|
|
placeholder="Enter your email"
|
|
|
className=""
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="mt-3 sm:ml-3 sm:mt-0">
|
|
|
<Button
|
|
|
type="submit"
|
|
|
className="bg-gradient-to-r from-teal-500 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
|
|
>
|
|
|
Start free trial
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p className="mt-3 text-sm text-gray-300 sm:mt-4">
|
|
|
Start your free 14-day trial, no credit card
|
|
|
necessary. By providing your email, you agree to our{" "}
|
|
|
<a href="#" className="font-medium text-white">
|
|
|
terms of service
|
|
|
</a>
|
|
|
.
|
|
|
</p>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="-mb-16 mt-12 sm:-mb-48 lg:relative lg:m-0">
|
|
|
<div className="mx-auto max-w-md px-6 sm:max-w-2xl lg:max-w-none lg:px-0">
|
|
|
{/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
|
|
|
<svg
|
|
|
className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
|
|
|
width="601"
|
|
|
height="600"
|
|
|
viewBox="0 0 601 600"
|
|
|
fill="none"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
opacity="0.07"
|
|
|
d="M546.232 252.902C546.232 256.16 546.16 259.418 545.943 262.459C577.053 286.135 601 336.889 601 381.561C601 430.216 572.567 453.167 537.478 432.895C537.406 432.822 537.333 432.822 537.261 432.75L316.815 305.539C316.742 305.466 316.67 305.466 316.525 305.394C277.095 282.587 245.117 219.814 245.117 165.15C245.117 113.961 273.188 87.9689 309.146 103.68C313.559 68.565 337.072 53.4329 365.433 69.8683C379.035 77.7602 391.551 91.589 401.318 108.242C415.498 87.1725 439.663 81.8147 467.01 97.5984C510.781 122.795 546.232 192.373 546.232 252.902Z"
|
|
|
fill="url(#paint0_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.4"
|
|
|
d="M510.058 287.655C510.058 290.913 509.986 294.172 509.769 297.212C540.879 320.888 564.826 371.642 564.826 416.315C564.826 464.969 536.393 487.921 501.304 467.648C501.232 467.576 501.159 467.576 501.087 467.503L280.641 340.292C280.569 340.22 280.496 340.22 280.351 340.147C240.921 317.34 208.943 254.567 208.943 199.903C208.943 148.715 237.015 122.722 272.972 138.434C277.385 103.318 300.898 88.1863 329.259 104.622C342.861 112.514 355.377 126.342 365.144 142.995C379.324 121.926 403.489 116.568 430.837 132.352C474.608 157.548 510.058 227.127 510.058 287.655Z"
|
|
|
fill="url(#paint1_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.2"
|
|
|
d="M161.048 349.632L127.479 330.228V318.861L161.048 338.265C163.798 339.858 167.777 343.043 171.177 347.967C174.867 353.252 177.471 359.913 177.471 367.153C177.471 375.118 175.446 379.679 171.539 380.982C167.921 382.213 163.653 380.113 160.976 378.593L147.157 370.629L147.085 370.556C145.927 369.832 144.046 369.181 142.527 369.615C141.297 369.977 139.922 371.208 139.922 375.624C139.922 380.041 141.297 382.792 142.455 384.385C143.902 386.412 145.783 387.86 146.94 388.44L147.085 388.512L189.264 412.912V424.279L147.302 400.024C144.408 398.504 140.284 395.318 136.667 390.25C132.76 384.747 130.011 377.724 130.083 369.905C130.083 362.158 132.76 358.175 136.667 357.089C140.284 356.076 144.408 357.524 147.302 359.334L160.976 367.226C162.929 368.384 164.449 368.891 165.389 368.529C166.113 368.312 167.56 367.226 167.56 361.434C167.56 357.741 166.33 355.279 165.245 353.614C163.942 351.732 162.134 350.284 161.048 349.632Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
d="M134.714 327.404C134.714 336.744 129.215 341.161 122.487 337.323C115.758 333.414 110.26 322.698 110.26 313.286C110.26 303.946 115.758 299.529 122.487 303.367C129.215 307.276 134.714 318.064 134.714 327.404Z"
|
|
|
fill="url(#paint2_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
d="M206.339 428.044C206.339 437.384 200.84 441.8 194.112 437.963C187.383 434.053 181.885 423.338 181.885 413.925C181.885 404.585 187.383 400.169 194.112 404.006C200.84 407.916 206.339 418.704 206.339 428.044Z"
|
|
|
fill="url(#paint3_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.07"
|
|
|
d="M264.145 187.522L481.118 312.851V427.754L264.072 302.425L264.145 187.522Z"
|
|
|
fill="url(#paint4_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.3"
|
|
|
d="M235.133 202.003L452.106 327.332V442.235L235.133 316.906V202.003Z"
|
|
|
fill="url(#paint5_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
d="M254.594 270.424C254.594 279.691 260.092 290.335 266.821 294.244C273.549 298.154 279.048 293.81 279.048 284.542C279.048 275.275 273.549 264.632 266.821 260.722C260.092 256.812 254.594 261.156 254.594 270.424Z"
|
|
|
fill="url(#paint6_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M285.199 288.307C285.199 292.579 287.731 297.575 290.915 299.385C294.026 301.195 296.558 299.168 296.558 294.896C296.558 290.624 294.026 285.628 290.842 283.818C287.731 282.008 285.199 284.035 285.199 288.307Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M302.635 298.371C302.635 302.642 305.167 307.638 308.35 309.448C311.461 311.258 313.994 309.231 313.994 304.959C313.994 300.688 311.461 295.692 308.278 293.882C305.167 292.072 302.635 294.099 302.635 298.371Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M397.338 317.919V383.299L388.801 378.376V312.996L397.338 317.919Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M416.004 328.78V394.159L407.467 389.236V323.856L416.004 328.78Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M434.742 339.64V405.02L426.205 400.096V334.717L434.742 339.64Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.07"
|
|
|
d="M264.072 344.563L481.046 469.892V584.795L264.072 459.466V344.563Z"
|
|
|
fill="url(#paint7_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.3"
|
|
|
d="M235.133 359.768L452.106 485.097V600L235.133 474.671V359.768Z"
|
|
|
fill="url(#paint8_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
d="M254.594 428.188C254.594 437.456 260.092 448.099 266.821 452.009C273.549 455.919 279.048 451.574 279.048 442.307C279.048 433.039 273.549 422.396 266.821 418.487C260.092 414.577 254.594 418.921 254.594 428.188Z"
|
|
|
fill="url(#paint9_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M285.199 446.145C285.199 450.416 287.731 455.412 290.915 457.222C294.026 459.032 296.558 457.005 296.558 452.733C296.558 448.461 294.026 443.466 290.842 441.656C287.731 439.846 285.199 441.8 285.199 446.145Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M302.562 456.208C302.562 460.48 305.095 465.476 308.278 467.286C311.389 469.096 313.921 467.069 313.921 462.797C313.921 458.525 311.389 453.53 308.206 451.719C305.095 449.837 302.562 451.864 302.562 456.208Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M397.338 477.929V543.309L388.801 538.385V473.006L397.338 477.929Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M416.004 488.79V554.169L407.467 549.246V483.866L416.004 488.79Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M434.742 499.65V565.029L426.205 560.106V494.727L434.742 499.65Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.3"
|
|
|
d="M42.4688 31.7847L177.688 109.907V360.637L42.4688 282.442V31.7847Z"
|
|
|
fill="url(#paint10_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
d="M125.959 122.577C125.959 135.103 118.724 141.04 109.825 135.827C100.926 130.614 93.6914 116.278 93.6914 103.753C93.6914 91.2272 100.926 85.2901 109.825 90.5031C118.724 95.7161 125.959 110.052 125.959 122.577Z"
|
|
|
fill="url(#paint11_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
d="M109.825 145.891C95.4274 137.493 83.5622 145.384 81.4641 163.485C81.1024 166.598 83.4899 170.798 86.3838 172.463L133.338 199.904C136.232 201.569 138.62 200.266 138.258 196.645C136.087 176.011 124.15 154.29 109.825 145.891Z"
|
|
|
fill="url(#paint12_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M69.5996 194.401L150.196 240.956V250.802L69.5996 204.248V194.401Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.15"
|
|
|
d="M77.7754 218.656L141.659 255.509V265.355L77.7754 228.502V218.656Z"
|
|
|
fill="white"
|
|
|
/>
|
|
|
<path
|
|
|
d="M94.0532 260.07L0 205.696V233.716L94.0532 288.09V260.07Z"
|
|
|
fill="url(#paint13_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.2"
|
|
|
d="M206.845 0L226.958 39.5318C229.707 44.962 229.273 50.3922 225.945 51.6954C222.617 52.9987 217.698 49.5957 214.948 44.1656L214.731 43.6587V87.5347C214.731 92.5305 211.259 94.5577 206.918 92.096C202.577 89.5619 199.104 83.5525 199.104 78.5568V34.6808L198.887 34.898C196.138 37.1425 191.146 34.8256 187.89 29.685C184.562 24.5445 184.128 18.6075 186.877 16.363L206.845 0Z"
|
|
|
fill="url(#paint14_linear)"
|
|
|
/>
|
|
|
<path
|
|
|
opacity="0.2"
|
|
|
d="M206.845 583.709L186.733 544.177C183.983 538.747 184.417 533.317 187.745 532.014C191.073 530.711 195.993 534.113 198.742 539.544L198.959 540.05V496.174C198.959 491.179 202.432 489.151 206.773 491.613C211.114 494.147 214.587 500.157 214.587 505.152V549.028L214.804 548.811C217.553 546.567 222.545 548.884 225.801 554.024C229.129 559.165 229.563 565.102 226.814 567.346L206.845 583.709Z"
|
|
|
fill="url(#paint15_linear)"
|
|
|
/>
|
|
|
<defs>
|
|
|
<linearGradient
|
|
|
id="paint0_linear"
|
|
|
x1="588.058"
|
|
|
y1="114.638"
|
|
|
x2="364.033"
|
|
|
y2="326.972"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint1_linear"
|
|
|
x1="551.876"
|
|
|
y1="149.392"
|
|
|
x2="327.852"
|
|
|
y2="361.726"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint2_linear"
|
|
|
x1="134.714"
|
|
|
y1="320.566"
|
|
|
x2="110.26"
|
|
|
y2="320.566"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint3_linear"
|
|
|
x1="206.339"
|
|
|
y1="421.206"
|
|
|
x2="181.885"
|
|
|
y2="421.206"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint4_linear"
|
|
|
x1="368.16"
|
|
|
y1="196.711"
|
|
|
x2="376.256"
|
|
|
y2="399.958"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint5_linear"
|
|
|
x1="339.219"
|
|
|
y1="211.191"
|
|
|
x2="347.315"
|
|
|
y2="414.438"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint6_linear"
|
|
|
x1="279.048"
|
|
|
y1="277.702"
|
|
|
x2="254.594"
|
|
|
y2="277.702"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint7_linear"
|
|
|
x1="368.144"
|
|
|
y1="353.776"
|
|
|
x2="376.24"
|
|
|
y2="557.023"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint8_linear"
|
|
|
x1="339.204"
|
|
|
y1="368.981"
|
|
|
x2="347.3"
|
|
|
y2="572.227"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint9_linear"
|
|
|
x1="279.048"
|
|
|
y1="435.467"
|
|
|
x2="254.594"
|
|
|
y2="435.467"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint10_linear"
|
|
|
x1="192.18"
|
|
|
y1="53.8207"
|
|
|
x2="72.012"
|
|
|
y2="261.857"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint11_linear"
|
|
|
x1="125.959"
|
|
|
y1="113.461"
|
|
|
x2="93.6914"
|
|
|
y2="113.461"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint12_linear"
|
|
|
x1="138.294"
|
|
|
y1="171.925"
|
|
|
x2="81.4277"
|
|
|
y2="171.925"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint13_linear"
|
|
|
x1="94.0532"
|
|
|
y1="247.389"
|
|
|
x2="2.42417e-06"
|
|
|
y2="247.389"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="#22D3EE" />
|
|
|
<stop offset="1" stop-color="#99F6E4" />
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint14_linear"
|
|
|
x1="221.158"
|
|
|
y1="39.8764"
|
|
|
x2="184.449"
|
|
|
y2="60.3243"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
<linearGradient
|
|
|
id="paint15_linear"
|
|
|
x1="192.494"
|
|
|
y1="543.86"
|
|
|
x2="229.203"
|
|
|
y2="523.412"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="white" />
|
|
|
<stop
|
|
|
offset="1"
|
|
|
stop-color="white"
|
|
|
stop-opacity="0"
|
|
|
/>
|
|
|
</linearGradient>
|
|
|
</defs>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* Feature section with screenshot */}
|
|
|
<div className="relative bg-gray-50 pt-16 sm:pt-24 lg:pt-32">
|
|
|
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
|
|
<div>
|
|
|
<h2 className="text-lg font-semibold text-cyan-600">
|
|
|
Serverless
|
|
|
</h2>
|
|
|
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
|
No server? No problem.
|
|
|
</p>
|
|
|
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
|
|
|
Phasellus lorem quam molestie id quisque diam aenean nulla in.
|
|
|
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
|
|
|
condimentum id viverra nulla.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div className="-mb-10 mt-12 sm:-mb-24 lg:-mb-80">
|
|
|
<Image
|
|
|
className="rounded-lg shadow-xl ring-1 ring-black ring-opacity-5"
|
|
|
width={400}
|
|
|
height={400}
|
|
|
src="https://tailwindui.com/img/component-images/green-project-app-screenshot.jpg"
|
|
|
alt=""
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* Feature section with grid */}
|
|
|
<div className="relative bg-white py-16 sm:py-24 lg:py-32">
|
|
|
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
|
|
<h2 className="text-lg font-semibold text-cyan-600">
|
|
|
Deploy faster
|
|
|
</h2>
|
|
|
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
|
Everything you need to deploy your app
|
|
|
</p>
|
|
|
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
|
|
|
Phasellus lorem quam molestie id quisque diam aenean nulla in.
|
|
|
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
|
|
|
condimentum id viverra nulla.
|
|
|
</p>
|
|
|
<div className="mt-12">
|
|
|
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
{features.map((feature) => (
|
|
|
<div key={feature.name} className="pt-6">
|
|
|
<div className="flow-root rounded-lg bg-gray-50 px-6 pb-8">
|
|
|
<div className="-mt-6">
|
|
|
<div>
|
|
|
<span className="inline-flex items-center justify-center rounded-md bg-gradient-to-r from-teal-500 to-cyan-600 p-3 shadow-lg">
|
|
|
<feature.icon
|
|
|
className="h-6 w-6 text-white"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
</span>
|
|
|
</div>
|
|
|
<h3 className="mt-8 text-lg font-medium tracking-tight text-gray-900">
|
|
|
{feature.name}
|
|
|
</h3>
|
|
|
<p className="mt-5 text-base text-gray-500">
|
|
|
{feature.description}
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* Testimonial section */}
|
|
|
<div className="bg-gradient-to-r from-teal-500 to-cyan-600 pb-16 lg:relative lg:z-10 lg:pb-0">
|
|
|
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-8 lg:px-8">
|
|
|
<div className="relative lg:-my-8">
|
|
|
<div
|
|
|
aria-hidden="true"
|
|
|
className="absolute inset-x-0 top-0 h-1/2 bg-white lg:hidden"
|
|
|
/>
|
|
|
<div className="mx-auto max-w-md px-6 sm:max-w-3xl lg:h-full lg:p-0">
|
|
|
<div className="aspect-h-6 aspect-w-10 overflow-hidden rounded-xl shadow-xl sm:aspect-h-7 sm:aspect-w-16 lg:aspect-none lg:h-full">
|
|
|
<Image
|
|
|
className="object-cover lg:h-full lg:w-full"
|
|
|
width={2102}
|
|
|
height={1401}
|
|
|
src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80"
|
|
|
alt=""
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="mt-12 lg:col-span-2 lg:m-0 lg:pl-8">
|
|
|
<div className="mx-auto max-w-md px-6 sm:max-w-2xl lg:max-w-none lg:px-0 lg:py-20">
|
|
|
<blockquote>
|
|
|
<div>
|
|
|
<svg
|
|
|
className="h-12 w-12 text-white opacity-25"
|
|
|
fill="currentColor"
|
|
|
viewBox="0 0 32 32"
|
|
|
aria-hidden="true"
|
|
|
>
|
|
|
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
|
|
|
</svg>
|
|
|
<p className="mt-6 text-2xl font-medium text-white">
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
|
Sed urna nulla vitae laoreet augue. Amet feugiat est
|
|
|
integer dolor auctor adipiscing nunc urna, sit.
|
|
|
</p>
|
|
|
</div>
|
|
|
<footer className="mt-6">
|
|
|
<p className="text-base font-medium text-white">
|
|
|
Judith Black
|
|
|
</p>
|
|
|
<p className="text-base font-medium text-cyan-100">
|
|
|
CEO at PureInsights
|
|
|
</p>
|
|
|
</footer>
|
|
|
</blockquote>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* Blog section */}
|
|
|
<div className="relative bg-gray-50 py-16 sm:py-24 lg:py-32">
|
|
|
<div className="relative">
|
|
|
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
|
|
<h2 className="text-lg font-semibold text-cyan-600">Learn</h2>
|
|
|
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
|
Helpful Resources
|
|
|
</p>
|
|
|
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
|
|
|
Phasellus lorem quam molestie id quisque diam aenean nulla in.
|
|
|
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
|
|
|
condimentum id viverra nulla.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div className="mx-auto mt-12 grid max-w-md gap-8 px-6 sm:max-w-lg lg:max-w-7xl lg:grid-cols-3 lg:px-8">
|
|
|
{blogPosts.map((post) => (
|
|
|
<div
|
|
|
key={post.id}
|
|
|
className="flex flex-col overflow-hidden rounded-lg shadow-lg"
|
|
|
>
|
|
|
<div className="flex-shrink-0">
|
|
|
<Image
|
|
|
className="h-48 w-full object-cover"
|
|
|
width={1679}
|
|
|
height={1079}
|
|
|
src={post.imageUrl}
|
|
|
alt=""
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="flex flex-1 flex-col justify-between bg-white p-6">
|
|
|
<div className="flex-1">
|
|
|
<p className="text-sm font-medium text-cyan-600">
|
|
|
<a
|
|
|
href={post.category.href}
|
|
|
className="hover:underline"
|
|
|
>
|
|
|
{post.category.name}
|
|
|
</a>
|
|
|
</p>
|
|
|
<a href={post.href} className="mt-2 block">
|
|
|
<p className="text-xl font-semibold text-gray-900">
|
|
|
{post.title}
|
|
|
</p>
|
|
|
<p className="mt-3 text-base text-gray-500">
|
|
|
{post.preview}
|
|
|
</p>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div className="mt-6 flex items-center">
|
|
|
<div className="flex-shrink-0">
|
|
|
<a href={post.author.href}>
|
|
|
<Image
|
|
|
className="h-10 w-10 rounded-full"
|
|
|
width={256}
|
|
|
height={256}
|
|
|
src={post.author.imageUrl}
|
|
|
alt={post.author.name}
|
|
|
/>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div className="ml-3">
|
|
|
<p className="text-sm font-medium text-gray-900">
|
|
|
<a
|
|
|
href={post.author.href}
|
|
|
className="hover:underline"
|
|
|
>
|
|
|
{post.author.name}
|
|
|
</a>
|
|
|
</p>
|
|
|
<div className="flex space-x-1 text-sm text-gray-500">
|
|
|
<time dateTime={post.datetime}>{post.date}</time>
|
|
|
<span aria-hidden="true">·</span>
|
|
|
<span>{post.readingLength} read</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* CTA Section */}
|
|
|
<div className="relative bg-gray-900">
|
|
|
<div className="relative h-56 bg-indigo-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
|
|
|
<Image
|
|
|
className="h-full w-full object-cover"
|
|
|
width={1920}
|
|
|
height={1280}
|
|
|
src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&sat=-100"
|
|
|
alt=""
|
|
|
/>
|
|
|
<div
|
|
|
aria-hidden="true"
|
|
|
className="absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-600 mix-blend-multiply"
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="relative mx-auto max-w-md px-6 py-12 sm:max-w-7xl sm:py-20 md:py-28 lg:px-8 lg:py-32">
|
|
|
<div className="md:ml-auto md:w-1/2 md:pl-10">
|
|
|
<h2 className="text-lg font-semibold text-gray-300">
|
|
|
Award winning support
|
|
|
</h2>
|
|
|
<p className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
|
|
|
We’re here to help
|
|
|
</p>
|
|
|
<p className="mt-3 text-lg text-gray-300">
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et,
|
|
|
egestas tempus tellus etiam sed. Quam a scelerisque amet
|
|
|
ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat
|
|
|
quisque ut interdum tincidunt duis.
|
|
|
</p>
|
|
|
<div className="mt-8">
|
|
|
<div className="inline-flex rounded-md shadow">
|
|
|
<a
|
|
|
href="#"
|
|
|
className="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-gray-900 hover:bg-gray-50"
|
|
|
>
|
|
|
Visit the help center
|
|
|
<ArrowSquareOut
|
|
|
className="-mr-1 ml-3 h-5 w-5 text-gray-400"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
<footer className="bg-gray-50" aria-labelledby="footer-heading">
|
|
|
<h2 id="footer-heading" className="sr-only">
|
|
|
Footer
|
|
|
</h2>
|
|
|
<div className="mx-auto max-w-md px-6 pt-12 sm:max-w-7xl lg:px-8 lg:pt-16">
|
|
|
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
|
|
|
<div className="space-y-8 xl:col-span-1">
|
|
|
<svg
|
|
|
className="h-10"
|
|
|
viewBox="0 0 47 40"
|
|
|
fill="none"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill="#d4d4d8"
|
|
|
d="M23.5 6.5C17.5 6.5 13.75 9.5 12.25 15.5C14.5 12.5 17.125 11.375 20.125 12.125C21.8367 12.5529 23.0601 13.7947 24.4142 15.1692C26.6202 17.4084 29.1734 20 34.75 20C40.75 20 44.5 17 46 11C43.75 14 41.125 15.125 38.125 14.375C36.4133 13.9471 35.1899 12.7053 33.8357 11.3308C31.6297 9.09158 29.0766 6.5 23.5 6.5ZM12.25 20C6.25 20 2.5 23 1 29C3.25 26 5.875 24.875 8.875 25.625C10.5867 26.0529 11.8101 27.2947 13.1642 28.6693C15.3702 30.9084 17.9234 33.5 23.5 33.5C29.5 33.5 33.25 30.5 34.75 24.5C32.5 27.5 29.875 28.625 26.875 27.875C25.1633 27.4471 23.9399 26.2053 22.5858 24.8307C20.3798 22.5916 17.8266 20 12.25 20Z"
|
|
|
/>
|
|
|
<defs>
|
|
|
<linearGradient
|
|
|
id="%%GRADIENT_ID%%"
|
|
|
x1="33.999"
|
|
|
x2="1"
|
|
|
y1="16.181"
|
|
|
y2="16.181"
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
>
|
|
|
<stop stop-color="%%GRADIENT_TO%%" />
|
|
|
<stop offset="1" stop-color="%%GRADIENT_FROM%%" />
|
|
|
</linearGradient>
|
|
|
</defs>
|
|
|
</svg>
|
|
|
<p className="text-base text-gray-500">
|
|
|
Making the world a better place through constructing elegant
|
|
|
hierarchies.
|
|
|
</p>
|
|
|
<div className="flex space-x-6">
|
|
|
{footerNavigation.social.map((item) => (
|
|
|
<a
|
|
|
key={item.name}
|
|
|
href={item.href}
|
|
|
className="text-gray-400 hover:text-gray-500"
|
|
|
>
|
|
|
<span className="sr-only">{item.name}</span>
|
|
|
<item.icon className="h-6 w-6" aria-hidden="true" />
|
|
|
</a>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
|
|
|
<div className="md:grid md:grid-cols-2 md:gap-8">
|
|
|
<div>
|
|
|
<h3 className="text-base font-medium text-gray-900">
|
|
|
Solutions
|
|
|
</h3>
|
|
|
<ul role="list" className="mt-4 space-y-4">
|
|
|
{footerNavigation.solutions.map((item) => (
|
|
|
<li key={item.name}>
|
|
|
<a
|
|
|
href={item.href}
|
|
|
className="text-base text-gray-500 hover:text-gray-900"
|
|
|
>
|
|
|
{item.name}
|
|
|
</a>
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div className="mt-12 md:mt-0">
|
|
|
<h3 className="text-base font-medium text-gray-900">
|
|
|
Support
|
|
|
</h3>
|
|
|
<ul role="list" className="mt-4 space-y-4">
|
|
|
{footerNavigation.support.map((item) => (
|
|
|
<li key={item.name}>
|
|
|
<a
|
|
|
href={item.href}
|
|
|
className="text-base text-gray-500 hover:text-gray-900"
|
|
|
>
|
|
|
{item.name}
|
|
|
</a>
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="md:grid md:grid-cols-2 md:gap-8">
|
|
|
<div>
|
|
|
<h3 className="text-base font-medium text-gray-900">
|
|
|
Company
|
|
|
</h3>
|
|
|
<ul role="list" className="mt-4 space-y-4">
|
|
|
{footerNavigation.company.map((item) => (
|
|
|
<li key={item.name}>
|
|
|
<a
|
|
|
href={item.href}
|
|
|
className="text-base text-gray-500 hover:text-gray-900"
|
|
|
>
|
|
|
{item.name}
|
|
|
</a>
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div className="mt-12 md:mt-0">
|
|
|
<h3 className="text-base font-medium text-gray-900">
|
|
|
Legal
|
|
|
</h3>
|
|
|
<ul role="list" className="mt-4 space-y-4">
|
|
|
{footerNavigation.legal.map((item) => (
|
|
|
<li key={item.name}>
|
|
|
<a
|
|
|
href={item.href}
|
|
|
className="text-base text-gray-500 hover:text-gray-900"
|
|
|
>
|
|
|
{item.name}
|
|
|
</a>
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="mt-12 border-t border-gray-200 py-8">
|
|
|
<p className="text-base text-gray-400 xl:text-center">
|
|
|
© 2020 Your Company, Inc. All rights reserved.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|