73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { useState } from "react";
|
|
import { Button, Input } from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
|
|
type Props = {
|
|
heading: string;
|
|
description: string;
|
|
inputPlaceholder?: string;
|
|
button: ButtonProps;
|
|
termsAndConditions: string;
|
|
video: string;
|
|
videoType: string;
|
|
};
|
|
|
|
export type Cta30Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Cta30 = (props: Cta30Props) => {
|
|
const { heading, description, inputPlaceholder, button, termsAndConditions, video, videoType } = {
|
|
...Cta30Defaults,
|
|
...props,
|
|
};
|
|
|
|
const [emailInput, setEmailInput] = useState<string>("");
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
console.log({ emailInput });
|
|
};
|
|
|
|
return (
|
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
|
|
<div className="container relative z-10 max-w-lg text-center">
|
|
<h2 className="rb-5 mb-5 text-5xl font-bold text-neutral-dark md:mb-6 md:text-7xl lg:text-8xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="text-neutral-dark md:text-md">{description}</p>
|
|
<div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
|
|
<form
|
|
className="rb-4 mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder={inputPlaceholder}
|
|
value={emailInput}
|
|
onChange={(e) => setEmailInput(e.target.value)}
|
|
/>
|
|
<Button {...button} className="items-center justify-center px-6 py-3 bg-electric-green text-cloud-white rounded-2xl border-acid-lime font-semibold">
|
|
{button.title}
|
|
</Button>
|
|
</form>
|
|
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Cta30Defaults: Props = {
|
|
heading: "Stay tuned!",
|
|
description: "Bleib' auf dem Laufenden und erfahre alles rund um die UXplore sowie weitere spannende Themen.",
|
|
inputPlaceholder: "Enter your email",
|
|
button: { title: "Sign Up", variant: "primary", size: "sm" },
|
|
termsAndConditions: `
|
|
<p class='text-xs text-neutral-dark text-center'>
|
|
By clicking Sign Up you're confirming that you agree with our
|
|
<a href='#' class='underline'>Terms and Conditions</a>.
|
|
</p>
|
|
`,
|
|
video: "",
|
|
videoType: "",
|
|
}; |