forked from mrwyndham/fastpocket
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { newsletterValidationSchema } from "@/utils/form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import React from "react";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
function Newsletter() {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(newsletterValidationSchema),
|
|
});
|
|
return (
|
|
<section>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
|
{/* CTA box */}
|
|
<div
|
|
className="relative bg-gradient-to-r from-primary to-secondary py-10 px-8 md:py-16 md:px-12"
|
|
data-aos="fade-up"
|
|
>
|
|
<div className="relative flex flex-col lg:flex-row justify-between items-center">
|
|
<div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2 text-primary-content">
|
|
<h3 className=" mb-2 text-3xl font-black">
|
|
Stay Ahead of the Curve
|
|
</h3>
|
|
<p className=" text-lg">
|
|
Join our newsletter to get top news before anyone else.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full lg:w-1/2">
|
|
<form
|
|
onSubmit={handleSubmit((data) => {
|
|
console.log(data);
|
|
reset();
|
|
})}
|
|
className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none gap-x-2"
|
|
>
|
|
<div className="w-full">
|
|
<input
|
|
id="NewsletterEmail"
|
|
type="text"
|
|
className="py-3 px-4 block w-full text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Email…"
|
|
aria-label="Email…"
|
|
{...register("email")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.email?.message}
|
|
</div>
|
|
</div>
|
|
<button className="btn text-primary-content btn-neutral">
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Newsletter;
|