コンタクトディテール

1export function ContactDetails001() {
2  const contactItems = [
3    {
4      label: "メール",
5      value: "hello@example.com",
6      description: "お気軽にお問い合わせください",
7      icon: (
8        <svg
9          className="h-5 w-5"
10          fill="none"
11          stroke="currentColor"
12          viewBox="0 0 24 24"
13          strokeWidth={1.5}
14        >
15          <path
16            strokeLinecap="round"
17            strokeLinejoin="round"
18            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
19          />
20        </svg>
21      ),
22    },
23    {
24      label: "電話",
25      value: "03-1234-5678",
26      description: "平日 9:00 〜 18:00",
27      icon: (
28        <svg
29          className="h-5 w-5"
30          fill="none"
31          stroke="currentColor"
32          viewBox="0 0 24 24"
33          strokeWidth={1.5}
34        >
35          <path
36            strokeLinecap="round"
37            strokeLinejoin="round"
38            d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
39          />
40        </svg>
41      ),
42    },
43    {
44      label: "所在地",
45      value: "東京都渋谷区神宮前 1-2-3",
46      description: "ビルディング 8F",
47      icon: (
48        <svg
49          className="h-5 w-5"
50          fill="none"
51          stroke="currentColor"
52          viewBox="0 0 24 24"
53          strokeWidth={1.5}
54        >
55          <path
56            strokeLinecap="round"
57            strokeLinejoin="round"
58            d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
59          />
60          <path
61            strokeLinecap="round"
62            strokeLinejoin="round"
63            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
64          />
65        </svg>
66      ),
67    },
68    {
69      label: "営業時間",
70      value: "月曜日 〜 金曜日",
71      description: "9:00 〜 18:00（祝日を除く）",
72      icon: (
73        <svg
74          className="h-5 w-5"
75          fill="none"
76          stroke="currentColor"
77          viewBox="0 0 24 24"
78          strokeWidth={1.5}
79        >
80          <path
81            strokeLinecap="round"
82            strokeLinejoin="round"
83            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
84          />
85        </svg>
86      ),
87    },
88  ];
89
90  return (
91    <section className="bg-background py-28 border-t border-border">
92      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
93        {/* ヘッダー */}
94        <div className="text-center">
95          <div className="mx-auto flex items-center justify-center gap-4">
96            <div className="h-px w-8 bg-border/40" />
97            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
98            <div className="h-px w-8 bg-border/40" />
99          </div>
100
101          <p className="mt-8 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
102            Contact
103          </p>
104          <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
105            お問い合わせ
106          </h2>
107          <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
108            ご質問やご相談がございましたら、お気軽にご連絡ください。
109          </p>
110        </div>
111
112        {/* コンタクト情報グリッド */}
113        <div className="mt-16 grid grid-cols-1 gap-px bg-border/40 sm:grid-cols-2">
114          {contactItems.map((item) => (
115            <div
116              key={item.label}
117              className="bg-background p-8 sm:p-10"
118            >
119              <div className="flex items-start gap-5">
120                <div className="text-foreground/30">{item.icon}</div>
121                <div>
122                  <p className="text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
123                    {item.label}
124                  </p>
125                  <p className="mt-2 text-sm font-medium tracking-wide text-foreground">
126                    {item.value}
127                  </p>
128                  <p className="mt-1 text-xs font-light tracking-wide text-muted-foreground/60">
129                    {item.description}
130                  </p>
131                </div>
132              </div>
133            </div>
134          ))}
135        </div>
136
137        {/* CTA */}
138        <div className="mt-16 text-center">
139          <p className="text-xs font-light tracking-wide text-muted-foreground/60">
140            通常1〜2営業日以内にご返信いたします
141          </p>
142          <div className="mt-6">
143            <a
144              href="#"
145              className="inline-flex items-center gap-2 border-b border-foreground/20 pb-1 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 hover:border-foreground"
146            >
147              お問い合わせフォームへ
148              <svg
149                className="h-3.5 w-3.5"
150                fill="none"
151                stroke="currentColor"
152                viewBox="0 0 24 24"
153              >
154                <path
155                  strokeLinecap="round"
156                  strokeLinejoin="round"
157                  strokeWidth={1.5}
158                  d="M17 8l4 4m0 0l-4 4m4-4H3"
159                />
160              </svg>
161            </a>
162          </div>
163        </div>
164      </div>
165    </section>
166  );
167}