Skip to content

Commit

Permalink
Contact form component
Browse files Browse the repository at this point in the history
Better display on mobile
  • Loading branch information
matthieujacq committed Oct 23, 2023
1 parent f90c43c commit 1ff8896
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 2 deletions.
52 changes: 52 additions & 0 deletions frontend/app/contact/components/ContactForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React, { useState } from "react";
import { LuChevronRight } from "react-icons/lu";

import Button from "@/lib/components/ui/Button";

export const ContactForm = (): JSX.Element => {
const [email, setEmail] = useState<string>("");
const [message, setMessage] = useState<string>("");

const handleSubmit = () => {
console.log("submitting", email, message);
};

return (
<form className="flex flex-col gap-5 justify-stretch w-full">
<fieldset className="grid grid-cols-1 sm:grid-cols-3 gap-2 w-full gap-y-5">
<label className="font-bold" htmlFor="email">
Work Email<sup>*</sup>:
</label>
<input
type="email"
id="email"
value={email}
onChange={(ev) => setEmail(ev.target.value)}
placeholder="jane@example.com"
className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
required
/>
<label className="font-bold" htmlFor="message">
Question<sup>*</sup>:
</label>
<textarea
id="message"
value={message}
rows={3}
onChange={(ev) => setMessage(ev.target.value)}
placeholder="How can we help you?"
className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
required
></textarea>
</fieldset>

<Button
onClick={handleSubmit}
className="self-end rounded-full bg-primary flex items-center justify-center gap-2 border-none hover:bg-primary/90"
>
Contact
<LuChevronRight size={24} />
</Button>
</form>
);
};
1 change: 1 addition & 0 deletions frontend/app/contact/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./ContactForm";
12 changes: 10 additions & 2 deletions frontend/app/contact/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
import { useFeatureIsOn } from "@growthbook/growthbook-react";
import { redirect } from "next/navigation";

import Card from "@/lib/components/ui/Card";

import { ContactForm } from "./components";
import {
FooterSection,
HomeHeader,
Expand All @@ -19,8 +22,13 @@ const ContactSalesPage = (): JSX.Element => {
<div className="bg-[#FCFAF6]">
<HomeHeader color="black" />

<main className="relative flex flex-col items-center">
TODO: The Form!
<main className="relative flex flex-col items-center px-10">
<h1 className="text-4xl font-semibold my-10 text-center">
Speak to our <span className="text-primary">Sales team</span>
</h1>
<Card className="flex flex-col items-center my-2 p-10 w-full max-w-xl">
<ContactForm />
</Card>
<HomeSection bg="bg-[#FCFAF6]">
<TestimonialsSection />
</HomeSection>
Expand Down

0 comments on commit 1ff8896

Please sign in to comment.