mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
import { LandingWalkthroughVideo } from "./landing-walkthrough-video";
|
|
import { LandingMagic } from "./landing-magic";
|
|
|
|
export const LandingWalkthrough = () => {
|
|
return (
|
|
<>
|
|
<div
|
|
className={clsx(
|
|
"w-full",
|
|
"relative",
|
|
"pb-12",
|
|
"max-w-screen-landing-2xl",
|
|
"mx-auto",
|
|
"hidden landing-lg:block",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"w-full h-full",
|
|
"flex items-center justify-center",
|
|
"absolute",
|
|
"left-0 top-0",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"w-full",
|
|
"h-[75px]",
|
|
"bg-[#4D4DB2]",
|
|
"blur-[100px]",
|
|
"opacity-50",
|
|
"mb-[75px]",
|
|
)}
|
|
/>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"w-full",
|
|
"max-w-screen-landing-content",
|
|
"px-4 landing-sm:px-5 landing-md:px-6 landing-lg:px-8 landing-xl:px-0",
|
|
"flex flex-col",
|
|
"gap-12",
|
|
"mx-auto",
|
|
"mb-16",
|
|
"relative",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"bg-landing-text-bg",
|
|
"bg-clip-text",
|
|
"text-transparent",
|
|
"text-[1.5rem]",
|
|
"leading-[2rem]",
|
|
"landing-md:text-[2rem]",
|
|
"landing-md:leading-[2.5rem]",
|
|
"landing-lg:text-[2.5rem]",
|
|
"landing-lg:leading-[3rem]",
|
|
"text-center",
|
|
)}
|
|
>
|
|
<span className="font-semibold">Flexibility </span>
|
|
<span className="font-light">
|
|
without starting from scratch
|
|
</span>
|
|
</div>
|
|
<LandingWalkthroughVideo />
|
|
</div>
|
|
</div>
|
|
<LandingMagic />
|
|
</>
|
|
);
|
|
};
|