Components
Loading preview...
Here is Call to Action component
npx shadcn@latest add https://21st.dev/r/brijr/call-to-action-1// app/components/CTA.tsx
"use client";
import * as React from "react";
import * as z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Balancer from "react-wrap-balancer";
// UI (shadcn)
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
/* ========= Inlined craft-ds (v0.2.8) minimal ========= */
import { type ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
type SectionProps = {
children: React.ReactNode;
className?: string;
id?: string;
};
type ContainerProps = {
children: React.ReactNode;
className?: string;
id?: string;
};
const Section = ({ children, className, id }: SectionProps) => (
<section className={cn("py-8 md:py-12", className)} id={id}>
{children}
</section>
);
const Container = ({ children, className, id }: ContainerProps) => (
<div className={cn("mx-auto max-w-5xl p-6 sm:p-8", className)} id={id}>
{children}
</div>
);
/* ===================================================== */
const formSchema = z.object({
email: z.string().email({
message: "Please enter a valid email address.",
}),
});
export default function CTA() {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: { email: "" },
});
function onSubmit(values: z.infer<typeof formSchema>) {
// TODO: replace with your submit logic (fetch/analytics/etc.)
console.log(values);
}
return (
<Section>
<Container className="space-y-8">
<h2 className="!my-0">Lorem ipsum dolor sit amet!</h2>
<p className="text-lg opacity-70 md:text-2xl">
<Balancer>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Balancer>
</p>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
className="md:w-96"
placeholder="example@fjord.dev"
{...field}
/>
</FormControl>
<FormDescription>Lorem ipsum dolor sit amet.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
</Container>
</Section>
);
}