feat: initialize enterprise contact form

Author: wackerow

app/[locale]/enterprise/_components/ContactForm/index.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Button } from "@/components/ui/buttons/Button"
+import Input from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+type EnterpriseContactFormProps = {
+  emailPlaceholder: string
+  bodyPlaceholder: string
+  buttonLabel: string
+}
+
+const EnterpriseContactForm = ({
+  emailPlaceholder,
+  bodyPlaceholder,
+  buttonLabel,
+}: EnterpriseContactFormProps) => (
+  <div className="w-full max-w-[440px] space-y-6">
+    <Input type="email" className="w-full" placeholder={emailPlaceholder} />
+    <Textarea className="" placeholder={bodyPlaceholder} />
+    <Button
+      onClick={() => {
+        console.log("Submit form!")
+      }}
+      size="lg"
+      customEventOptions={{
+        eventCategory: "enterprise",
+        eventAction: "CTA",
+        eventName: "bottom_mail",
+      }}
+    >
+      {buttonLabel}
+    </Button>
+  </div>
+)
+
+export default EnterpriseContactForm

app/[locale]/enterprise/_components/ContactForm/lazy.tsx

@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })

app/[locale]/enterprise/_components/ContactForm/loading.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="w-full max-w-[440px] space-y-6">
+    <Skeleton className="h-[42px] w-full" />
+    <Skeleton className="h-[200px] w-full" />
+  </div>
+)
+
+export default Loading

app/[locale]/enterprise/page.tsx

@@ -48,6 +48,7 @@ import { getMetadata } from "@/lib/utils/metadata"
 import { BASE_TIME_UNIT } from "@/lib/constants"
 
 import CasesColumn from "./_components/CasesColumn"
+import EnterpriseContactForm from "./_components/ContactForm/lazy"
 import FeatureCard from "./_components/FeatureCard"
 import { ENTERPRISE_MAILTO } from "./constants"
 import type { Case, EcosystemPlayer, Feature } from "./types"
@@ -95,6 +96,7 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
   const { locale } = params
 
   const t = await getTranslations({ locale, namespace: "page-enterprise" })
+  const tCommon = await getTranslations({ locale, namespace: "common" })
 
   const [
     { txCount, txCostsMedianUsd },
@@ -492,16 +494,11 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
           <p className="max-w-prose px-6 text-center md:px-8">
             {t("page-enterprise-team-description")}
           </p>
-          <ButtonLink
-            href={ENTERPRISE_MAILTO}
-            customEventOptions={{
-              eventCategory: "enterprise",
-              eventAction: "CTA",
-              eventName: "bottom_mail",
-            }}
-          >
-            {t("page-enterprise-hero-cta")}
-          </ButtonLink>
+          <EnterpriseContactForm
+            buttonLabel={tCommon("set-up-a-call")}
+            emailPlaceholder={tCommon("your-email")}
+            bodyPlaceholder={t("page-enterprise-team-form-placeholder")}
+          />
         </section>
       </MainArticle>
     </div>

src/components/ui/textarea.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/cn"
+
+const textareaVariants = cva(
+  "focus-visible:ring-ring flex min-h-[200px] w-full rounded border border-body bg-background px-3 py-2 text-base ring-offset-background placeholder:text-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        md: "p-2",
+        sm: "p-1 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export interface TextareaProps
+  extends Omit<React.ComponentProps<"textarea">, "size">,
+    VariantProps<typeof textareaVariants> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, size, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(textareaVariants({ size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/intl/en/common.json

@@ -415,6 +415,7 @@
   "secret-leader-election": "Secret leader election",
   "security": "Security",
   "see-contributors": "See contributors",
+  "set-up-a-call": "Set up a call",
   "set-up-local-env": "Set up local environment",
   "sharding": "Sharding",
   "show-all": "Show all",
@@ -464,5 +465,6 @@
   "withdrawals": "Staking withdrawals",
   "wrapped-ether": "Wrapped Ether",
   "yes": "Yes",
+  "your-email": "Your e-mail",
   "zero-knowledge-proofs": "Zero-knowledge proofs"
 }

src/intl/en/page-enterprise.json

@@ -40,8 +40,9 @@
   "page-enterprise-reason-3-header": "Reduced risk",
   "page-enterprise-reason-4-content": "The only programmable distributed ledger infrastructure that has never gone down, and has thrived through multiple existential threats.",
   "page-enterprise-reason-4-header": "Battle-tested",
-  "page-enterprise-team-description": "We will answer your questions, help identify potential paths forward, provide technical support, and connect you with relevant industry leaders.",
-  "page-enterprise-team-header": "EF Enterprise Team",
+  "page-enterprise-team-description": "We will answer your questions, help identify potential paths forward, provide technical support and connect you with relevant industry leaders.",
+  "page-enterprise-team-header": "Ethereum Enterprise Team",
+  "page-enterprise-team-form-placeholder": "Tell us about your project",
   "page-enterprise-why-description": "Ethereum supports enterprise compliance with transparent, auditable infrastructure that aligns with GDPR and KYC while protecting sensitive data in private or consortium environments.",
   "page-enterprise-why-header": "Why Ethereum"
 }