new hero effect & mobile responsive

src/components/setions/contact.tsx

@@ -1,127 +1,24 @@
-"use client";
 import React from "react";
+import MeCard from "../me-card";
 import Heading from "../heading";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { Button } from "@/ui/button";
-import { Textarea } from "@/ui/textarea";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/ui/form";
-import { Input } from "@/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const formSchema = z.object({
-  name: z.string().min(2).max(50),
-  email: z.string().email(),
-  budget: z.string(),
-  message: z.string().max(500),
-});
-
-function Contact() {
-  // 1. Define your form.
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-  });
-
-  // 2. Define a submit handler.
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    // Do something with the form values.
-    // ✅ This will be type-safe and validated.
-    console.log(values);
-  }
+import ContactForm from "../contact-form";
 
+function Contact({ withoutMeCard }: { withoutMeCard?: boolean }) {
   return (
-    <div className="w-full">
-      <Heading subTitle="Let's Work" title="Together" />
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <div className="flex gap-4 w-full">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem className="w-full ">
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="John Doe" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem className="w-full">
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input placeholder="email@example.com" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-          <FormField
-            control={form.control}
-            name="budget"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Budget</FormLabel>
-                <FormControl>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue
-                        className="placeholder:text-muted-foreground"
-                        placeholder="Select your Budget"
-                      />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="light">{"< €2k"}</SelectItem>
-                      <SelectItem value="dark">Dark</SelectItem>
-                      <SelectItem value="system">System</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="message"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Message</FormLabel>
-                <FormControl>
-                  <Textarea rows={4} placeholder="Message..." {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type="submit" className="w-full">
-            Submit
-          </Button>
-        </form>
-      </Form>
+    <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 container ">
+      {!withoutMeCard && (
+        <MeCard
+          className="sticky top-20"
+          button={{
+            label: "Email Me",
+            link: `mailto:${process.env.NEXT_PUBLIC_EMAIL}`,
+          }}
+        />
+      )}
+      <div className="w-full space-y-4 p-4">
+        <Heading subTitle="Let's Work" title="Together" />
+        <ContactForm />
+      </div>
     </div>
   );
 }