Accept Invite 1 - Two-Column Invite with Email Form

1import { FcGoogle } from "react-icons/fc";
2 
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5 
6interface Hyperlink {
7  label: string;
8  href: string;
9}
10 
11interface AcceptInvite1Props {
12  companyLogo?: string;
13  disclaimer?: string;
14  disclaimerLink?: Hyperlink;
15  heading?: string;
16  description?: string[];
17  copyright?: string;
18  footerLinks?: Hyperlink[];
19}
20 
21const AcceptInvite1 = ({
22  companyLogo = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblocks-logo-word.svg",
23  disclaimer = "By entering your email, you agree to receive updates and marketing messages from Acme You can unsubscribe at any time. For more details, please review our ",
24  disclaimerLink = {
25    label: "privacy policy",
26    href: "#",
27  },
28  heading = "Welcome to Acme",
29  description = [
30    "Acme is a next-generation platform designed to streamline your workflow. Built with flexibility in mind, it adapts to your unique business needs.",
31    "Manage your projects, collaborate with your team, and track progress all in one centralized dashboard.",
32    "Get started today.",
33  ],
34  copyright = `© ${new Date().getFullYear()} Acme`,
35  footerLinks = [
36    { label: "Privacy Policy", href: "#" },
37    {
38      label: "Support",
39      href: "#",
40    },
41  ],
42}: AcceptInvite1Props) => {
43  return (
44    <section className="container py-32">
45      <div className="flex w-full flex-col gap-20 sm:items-center">
46        <img
47          src={companyLogo}
48          alt="company logo"
49          className="w-54 dark:invert"
50        />
51 
52        <div className="flex flex-col-reverse items-start gap-10 sm:rounded-2xl sm:border sm:px-10 sm:pt-10 sm:pb-10 md:flex-row md:pt-20 lg:gap-20 lg:rounded-3xl lg:px-24 lg:pt-36 xl:gap-40">
53          <div className="flex w-full flex-col gap-6 sm:max-w-sm md:gap-60">
54            <div className="flex flex-col gap-6">
55              <Button type="button" variant="outline">
56                <FcGoogle />
57                Sign in with Google
58              </Button>
59              <span className="h-px w-full bg-border" />
60              <form autoComplete="off" className="flex flex-col gap-3">
61                <Input placeholder="Enter your email address" required />
62                <Button type="submit">Continue</Button>
63              </form>
64            </div>
65            <p className="text-xs text-muted-foreground">
66              {disclaimer}
67              <a href={disclaimerLink.href} className="underline">
68// … truncated