@sigit / nord
Code
tsx 116 lines 4.13 KB
Raw
1 export default function Contact() {
2 return (
3 <div className="max-w-4xl mx-auto px-4 py-8">
4 <h1 className="text-4xl font-bold mb-8 text-center">Contact Us</h1>
5
6 <div className="space-y-8">
7 <section className="bg-gray-50 p-6 rounded-lg">
8 <h2 className="text-2xl font-semibold mb-4 text-gray-900">
9 Get in Touch
10 </h2>
11 <p className="text-gray-700 mb-4">
12 We&apos;d love to hear from you! Whether you want to book an
13 appointment or have questions about our services, feel free to reach
14 out.
15 </p>
16 </section>
17
18 <section className="grid md:grid-cols-2 gap-8">
19 <div className="space-y-6">
20 <div>
21 <h3 className="text-xl font-semibold mb-3 text-gray-900">
22 Booking
23 </h3>
24 <div className="space-y-2">
25 <p className="text-gray-700">
26 <span className="font-semibold">Text to book:</span>
27 </p>
28 <a
29 href="tel:+46728538288"
30 className="text-2xl font-bold text-blue-600 hover:text-blue-800 transition-colors"
31 >
32 +46 72-853 82 88
33 </a>
34 <p className="text-sm text-gray-500 mt-2">
35 Send us a text message with your preferred date and time, and
36 we&apos;ll confirm your appointment.
37 </p>
38 </div>
39 </div>
40
41 <div>
42 <h3 className="text-xl font-semibold mb-3 text-gray-900">
43 Location
44 </h3>
45 <p className="text-gray-700 mb-2">
46 Hagersten StreetCut
47 <br />
48 South of Stockholm, Sweden
49 </p>
50 <a
51 href="https://maps.app.goo.gl/f4irVqGC9KGHzRDP9"
52 target="_blank"
53 rel="noopener noreferrer"
54 className="inline-block mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
55 >
56 View on Google Maps
57 </a>
58 </div>
59 </div>
60
61 <div className="space-y-6">
62 <div>
63 <h3 className="text-xl font-semibold mb-3 text-gray-900">
64 Why Choose Us?
65 </h3>
66 <ul className="space-y-2 text-gray-700">
67 <li className="flex items-start">
68 <span className="mr-2">✂️</span>
69 <span>Professional barber services</span>
70 </li>
71 <li className="flex items-start">
72 <span className="mr-2">⭐</span>
73 <span>Highly rated by customers</span>
74 </li>
75 <li className="flex items-start">
76 <span className="mr-2">📍</span>
77 <span>Convenient location in South Stockholm</span>
78 </li>
79 <li className="flex items-start">
80 <span className="mr-2">💬</span>
81 <span>Easy booking via text message</span>
82 </li>
83 </ul>
84 </div>
85
86 <div>
87 <h3 className="text-xl font-semibold mb-3 text-gray-900">
88 Business Hours
89 </h3>
90 <p className="text-gray-700">
91 Contact us to check availability and book your appointment.
92 </p>
93 </div>
94 </div>
95 </section>
96
97 <section className="bg-blue-50 p-6 rounded-lg border border-blue-200">
98 <h3 className="text-xl font-semibold mb-3 text-gray-900">
99 Ready to Book Your Appointment?
100 </h3>
101 <p className="text-gray-700 mb-4">
102 Text us at{" "}
103 <a
104 href="tel:+46728538288"
105 className="font-semibold text-blue-600 hover:text-blue-800"
106 >
107 +46 72-853 82 88
108 </a>{" "}
109 and let us know when you&apos;d like to visit. We&apos;ll get back
110 to you as soon as possible!
111 </p>
112 </section>
113 </div>
114 </div>
115 );
116 }