Contact Form

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { Input } from "@base-ui/react/input";
5import { motion, type Variants } from "framer-motion";
6import { Mail, MessageSquare, Phone, Send } from "lucide-react";
7import { useState } from "react";
8 
9const containerVariants: Variants = {
10  hidden: { opacity: 0 },
11  visible: {
12    opacity: 1,
13    transition: { staggerChildren: 0.14, delayChildren: 0.2 },
14  },
15};
16 
17const itemVariants: Variants = {
18  hidden: { opacity: 0, y: 16 },
19  visible: {
20    opacity: 1,
21    y: 0,
22    transition: { duration: 0.4, ease: "easeOut" },
23  },
24};
25 
26const iconVariants: Variants = {
27  hidden: { opacity: 0, scale: 0.8 },
28  visible: {
29    opacity: 1,
30    scale: 1,
31    transition: { duration: 0.35, ease: "easeOut" },
32  },
33};
34 
35export function ContactFormSectionBaseui() {
36  const [formData, setFormData] = useState({
37    name: "",
38    email: "",
39    phone: "",
40    message: "",
41  });
42 
43  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
44    event.preventDefault();
45    console.log("Form submitted:", formData);
46  };
47 
48  const handleChange = (
49    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
50  ) => {
51    setFormData((prev) => ({
52      ...prev,
53      [event.target.name]: event.target.value,
54    }));
55  };
56 
57  return (
58    <section className="relative overflow-hidden bg-background px-6 py-24 sm:px-8 md:py-28">
59      <div className="pointer-events-none absolute inset-0 -z-10">
60        <div className="absolute left-1/2 top-6 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]" />
61        <div className="absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-primary/[0.03] blur-[130px]" />
62      </div>
63 
64      <div className="mx-auto flex max-w-6xl flex-col items-center gap-12 text-center">
65        <motion.div
66          initial={{ opacity: 0, y: 20 }}
67          whileInView={{ opacity: 1, y: 0 }}
68          viewport={{ once: true, margin: "-80px" }}
69          transition={{ duration: 0.5 }}
70          className="space-y-4"
71        >
72          <span className="text-xs uppercase tracking-[0.25em] text-foreground/60">
73            Contact
74          </span>
75          <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
76            Let's build something exceptional together
77          </h2>
78          <p className="max-w-2xl text-foreground/70">
79            Share your project details and our team will reach out within one
80// … truncated