1import { Section, Container, Craft } from "@/components/craft";
2import { Button } from "@/components/ui/button";
3
4type HeroProps = {
5  title: string;
6  subtitle: string;
7  image: string;
8  imageWidth: number;
9  imageHeight: number;
10  button: {
11    text: string;
12    link: string;
13  };
14};
15
16export const HeroOne = (props: HeroProps) => {
17  return (
18    <Section>
19      <Container className="space-y-6 md:space-y-12">
20        <Button asChild size={"sm"} variant={"outline"}>
21          <a href={props.button.link}>{props.button.text}</a>
22        </Button>
23        <Craft className="space-y-3">
24          <h1>{props.title}</h1>
25          <h3 className="text-muted-foreground">{props.subtitle}</h3>
26        </Craft>
27        <div className="relative h-[480px] w-full overflow-hidden rounded-lg border">
28          <img
29            src={props.image}
30            width={props.imageWidth}
31            height={props.imageHeight}
32            alt="hero image"
33            className="absolute inset-0 w-full h-full object-cover object-center"
34          />
35        </div>
36      </Container>
37    </Section>
38  );
39};
40

1// React and Next.js imports
2import Link from "next/link";
3import Balancer from "react-wrap-balancer";
4
5// Local component imports
6import { Section, Container, Craft } from "@/components/craft";
7import { Button } from "@/components/ui/button";
8
9type HeroProps = {
10  title: string;
11  subtitle: string;
12  image: string;
13  imageWidth: number;
14  imageHeight: number;
15  button: {
16    text: string;
17    link: string;
18  };
19};
20
21export const HeroTwo = (props: HeroProps) => {
22  return (
23    <Section>
24      <Container className="space-y-6 md:space-y-12">
25        <img
26          src="https://img.logoipsum.com/286.svg"
27          width="128"
28          height="23.48"
29          alt="logo"
30          className="mx-auto dark:invert"
31        />
32        <Craft className="space-y-3 text-center">
33          <h1>
34            <Balancer>{props.title}</Balancer>
35          </h1>
36          <h3 className="text-muted-foreground">
37            <Balancer>{props.subtitle}</Balancer>
38          </h3>
39        </Craft>
40        <div className="flex justify-center gap-3">
41          <Button asChild>
42            <Link href={props.button.link}>{props.button.text}</Link>
43          </Button>
44        </div>
45      </Container>
46    </Section>
47  );
48};
49