Contact Form

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