コンタクトフォーム

1"use client";
2
3import { useState } from "react";
4
5export function ContactForm001() {
6  const [formData, setFormData] = useState({
7    name: "",
8    email: "",
9    company: "",
10    message: "",
11  });
12
13  const handleSubmit = (e: React.FormEvent) => {
14    e.preventDefault();
15    // Handle form submission
16  };
17
18  const handleChange = (
19    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
20  ) => {
21    setFormData((prev) => ({
22      ...prev,
23      [e.target.name]: e.target.value,
24    }));
25  };
26
27  return (
28    <section className="bg-zinc-950 py-24 border-t border-zinc-800/50">
29      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
30        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2">
31          {/* Left side - Info */}
32          <div>
33            <h2 className="text-2xl font-semibold tracking-wide text-white sm:text-3xl md:text-4xl">
34              Get in touch
35            </h2>
36            <p className="mt-5 text-base leading-relaxed tracking-wide text-zinc-500">
37              Have a project in mind? We&apos;d love to hear about it. Send us a
38              message and we&apos;ll get back to you as soon as possible.
39            </p>
40
41            <div className="mt-14 space-y-10">
42              {/* Email */}
43              <div className="flex items-start gap-5">
44                <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900">
45                  <svg
46                    className="h-5 w-5 text-zinc-400"
47                    fill="none"
48                    stroke="currentColor"
49                    viewBox="0 0 24 24"
50                  >
51                    <path
52                      strokeLinecap="round"
53                      strokeLinejoin="round"
54                      strokeWidth={1.5}
55                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
56                    />
57                  </svg>
58                </div>
59                <div>
60                  <p className="font-medium tracking-wide text-white">
61                    Email
62                  </p>
63                  <p className="mt-1 text-sm tracking-wide text-zinc-500">
64                    hello@example.com
65                  </p>
66                </div>
67              </div>
68
69              {/* Phone */}
70              <div className="flex items-start gap-5">
71                <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900">
72                  <svg
73                    className="h-5 w-5 text-zinc-400"
74                    fill="none"
75                    stroke="currentColor"
76                    viewBox="0 0 24 24"
77                  >
78                    <path
79                      strokeLinecap="round"
80                      strokeLinejoin="round"
81                      strokeWidth={1.5}
82                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
83                    />
84                  </svg>
85                </div>
86                <div>
87                  <p className="font-medium tracking-wide text-white">
88                    Phone
89                  </p>
90                  <p className="mt-1 text-sm tracking-wide text-zinc-500">
91                    +1 (555) 123-4567
92                  </p>
93                </div>
94              </div>
95
96              {/* Location */}
97              <div className="flex items-start gap-5">
98                <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900">
99                  <svg
100                    className="h-5 w-5 text-zinc-400"
101                    fill="none"
102                    stroke="currentColor"
103                    viewBox="0 0 24 24"
104                  >
105                    <path
106                      strokeLinecap="round"
107                      strokeLinejoin="round"
108                      strokeWidth={1.5}
109                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
110                    />
111                    <path
112                      strokeLinecap="round"
113                      strokeLinejoin="round"
114                      strokeWidth={1.5}
115                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
116                    />
117                  </svg>
118                </div>
119                <div>
120                  <p className="font-medium tracking-wide text-white">
121                    Office
122                  </p>
123                  <p className="mt-1 text-sm tracking-wide text-zinc-500">
124                    123 Innovation Street
125                    <br />
126                    San Francisco, CA 94102
127                  </p>
128                </div>
129              </div>
130            </div>
131          </div>
132
133          {/* Right side - Form */}
134          <div className="rounded-xl border border-zinc-800/50 bg-zinc-900/50 p-8">
135            <form onSubmit={handleSubmit} className="space-y-6">
136              <div>
137                <label
138                  htmlFor="name"
139                  className="block text-xs font-medium uppercase tracking-widest text-zinc-500"
140                >
141                  Name
142                </label>
143                <input
144                  type="text"
145                  id="name"
146                  name="name"
147                  value={formData.name}
148                  onChange={handleChange}
149                  className="mt-3 block w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3 text-sm tracking-wide text-white placeholder-zinc-600 transition-colors duration-200 focus:border-zinc-600 focus:outline-none"
150                  placeholder="John Doe"
151                />
152              </div>
153
154              <div>
155                <label
156                  htmlFor="email"
157                  className="block text-xs font-medium uppercase tracking-widest text-zinc-500"
158                >
159                  Email
160                </label>
161                <input
162                  type="email"
163                  id="email"
164                  name="email"
165                  value={formData.email}
166                  onChange={handleChange}
167                  className="mt-3 block w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3 text-sm tracking-wide text-white placeholder-zinc-600 transition-colors duration-200 focus:border-zinc-600 focus:outline-none"
168                  placeholder="john@example.com"
169                />
170              </div>
171
172              <div>
173                <label
174                  htmlFor="company"
175                  className="block text-xs font-medium uppercase tracking-widest text-zinc-500"
176                >
177                  Company{" "}
178                  <span className="normal-case text-zinc-700">
179                    (optional)
180                  </span>
181                </label>
182                <input
183                  type="text"
184                  id="company"
185                  name="company"
186                  value={formData.company}
187                  onChange={handleChange}
188                  className="mt-3 block w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3 text-sm tracking-wide text-white placeholder-zinc-600 transition-colors duration-200 focus:border-zinc-600 focus:outline-none"
189                  placeholder="Acme Inc."
190                />
191              </div>
192
193              <div>
194                <label
195                  htmlFor="message"
196                  className="block text-xs font-medium uppercase tracking-widest text-zinc-500"
197                >
198                  Message
199                </label>
200                <textarea
201                  id="message"
202                  name="message"
203                  rows={4}
204                  value={formData.message}
205                  onChange={handleChange}
206                  className="mt-3 block w-full resize-none rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3 text-sm tracking-wide text-white placeholder-zinc-600 transition-colors duration-200 focus:border-zinc-600 focus:outline-none"
207                  placeholder="Tell us about your project..."
208                />
209              </div>
210
211              <button
212                type="submit"
213                className="w-full rounded-lg border border-zinc-700 bg-white px-6 py-3.5 text-sm font-medium tracking-wide text-zinc-900 transition-all duration-200 hover:bg-zinc-100"
214              >
215                Send Message
216              </button>
217            </form>
218          </div>
219        </div>
220      </div>
221    </section>
222  );
223}