-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
203 lines (177 loc) · 13.6 KB
/
Copy pathcontact.html
File metadata and controls
203 lines (177 loc) · 13.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
<link rel="icon" href="images/coffeebara_logo.png" type="image/png">
<title>Contact - Coffeebara</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script src="i18n.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-white text-slate-900" style='font-family: "Space Grotesk", "Noto Sans", sans-serif;'>
<div class="relative flex size-full min-h-screen flex-col overflow-x-hidden">
<header class="fixed top-0 left-0 right-0 z-30 border-b border-[#f0f3f4]/80 bg-white/70 backdrop-blur-md">
<div class="mx-auto max-w-[1200px] px-4 sm:px-6 md:px-10">
<div class="flex h-14 items-center justify-between">
<a href="index.html" class="flex items-center gap-2 sm:gap-3 text-[#111518]">
<img src="images/coffeebara_logo.png" alt="Coffeebara Logo" class="h-7 w-7 object-contain" />
<h1 class="text-lg sm:text-xl md:text-2xl font-bold tracking-[-0.015em]">Coffeebara</h1>
</a>
<nav class="hidden md:flex items-center gap-8">
<div class="flex items-center gap-8">
<a class="text-[#111518] text-sm font-medium hover:text-[#1993e5] transition-colors" href="about.html" data-i18n="nav_about">About</a>
<a class="text-[#111518] text-sm font-medium hover:text-[#1993e5] transition-colors" href="technology.html" data-i18n="nav_technology">Technology</a>
<a class="text-[#1993e5] text-sm font-bold" href="contact.html" data-i18n="nav_contact">Contact</a>
</div>
<a href="contact.html">
<button class="h-10 px-4 rounded-lg bg-[#1993e5] text-white text-sm font-bold tracking-[0.015em] hover:bg-[#157bbd] transition-colors" data-i18n="nav_quote">
Request a Quote
</button>
</a>
<button id="language-toggle" class="h-10 px-3 rounded-lg border border-gray-300 text-[#111518] text-sm font-bold hover:bg-gray-50 transition-colors">한국어</button>
</nav>
<button id="mobile-menu-btn" class="md:hidden p-2 text-[#111518]" aria-label="open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-[#f0f3f4] bg-white">
<div class="mx-auto max-w-[1200px] px-4 py-4 space-y-4">
<a class="block text-[#111518] text-sm font-medium" href="about.html" data-i18n="nav_about">About</a>
<a class="block text-[#111518] text-sm font-medium" href="technology.html" data-i18n="nav_technology">Technology</a>
<a class="block text-[#1993e5] text-sm font-bold" href="contact.html" data-i18n="nav_contact">Contact</a>
<a href="contact.html" class="block">
<button class="w-full h-10 px-4 rounded-lg bg-[#1993e5] text-white text-sm font-bold" data-i18n="nav_quote">
Request a Quote
</button>
</a>
</div>
</div>
</header>
<main class="flex-1 pt-24 pb-12 sm:pt-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
<div>
<h1 class="text-4xl sm:text-5xl font-bold text-[#111518] mb-6 tracking-tight leading-tight" data-i18n="contact_hero_title">
Let's Build the <br>
<span class="text-[#1993e5]">Future of Automation</span>
</h1>
<p class="text-lg text-gray-600 mb-10 leading-relaxed" data-i18n="contact_hero_desc">
Whether you are interested in deploying NOCO on your campus or integrating our modular robotics into your factory, we are here to help.
</p>
<div class="space-y-8">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-[#1993e5] shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" 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 1 1 15 0Z" />
</svg>
</div>
<div>
<h3 class="font-bold text-[#111518]" data-i18n="contact_hq">Headquarters</h3>
<p class="text-gray-600 text-sm mt-1" data-i18n="contact_hq_addr">Room 303, Heavy Equipment Experiment Bldg,<br>120 Neungdong-ro, Gwangjin-gu, Seoul, Korea</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-[#1993e5] shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</div>
<div>
<h3 class="font-bold text-[#111518]" data-i18n="contact_email">Email Us</h3>
<a href="mailto:casekim41@gmail.com" class="text-[#1993e5] hover:underline text-sm font-medium">casekim41@gmail.com</a>
<p class="text-gray-500 text-xs mt-1" data-i18n="contact_response">Response time: Within 24 hours</p>
</div>
</div>
</div>
<div class="mt-10 rounded-2xl overflow-hidden shadow-sm border border-gray-100">
<div class="w-full bg-center bg-no-repeat aspect-video bg-cover hover:scale-105 transition-transform duration-700"
style='background-image: url("images/map.png");'></div>
</div>
</div>
<div class="bg-gray-50 rounded-3xl p-8 sm:p-10 border border-gray-100 shadow-sm">
<form action="https://formspree.io/f/xkgbyvbb" method="POST" class="flex flex-col gap-6">
<div class="flex flex-col gap-2">
<label class="text-sm font-bold text-[#111518]" data-i18n="contact_form_interested">I'm interested in...</label>
<div class="flex flex-wrap gap-3">
<label class="cursor-pointer">
<input type="radio" name="subject" value="Partnership" class="peer sr-only" checked>
<div class="px-4 py-2 rounded-full border border-gray-300 bg-white text-sm text-gray-600 peer-checked:bg-[#1993e5] peer-checked:text-white peer-checked:border-[#1993e5] transition-all" data-i18n="contact_form_partnership">
Partnership
</div>
</label>
<label class="cursor-pointer">
<input type="radio" name="subject" value="Product Quote" class="peer sr-only">
<div class="px-4 py-2 rounded-full border border-gray-300 bg-white text-sm text-gray-600 peer-checked:bg-[#1993e5] peer-checked:text-white peer-checked:border-[#1993e5] transition-all" data-i18n="contact_form_product">
Product Quote
</div>
</label>
<label class="cursor-pointer">
<input type="radio" name="subject" value="Tech Inquiry" class="peer sr-only">
<div class="px-4 py-2 rounded-full border border-gray-300 bg-white text-sm text-gray-600 peer-checked:bg-[#1993e5] peer-checked:text-white peer-checked:border-[#1993e5] transition-all" data-i18n="contact_form_tech">
Tech Inquiry
</div>
</label>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<label class="flex flex-col gap-2">
<span class="text-sm font-medium text-[#111518]" data-i18n="contact_form_name">Your Name</span>
<input name="name" required data-i18n-placeholder="contact_form_name_placeholder" placeholder="John Doe" class="form-input rounded-xl border-gray-200 bg-white px-4 py-3 focus:border-[#1993e5] focus:ring-[#1993e5]">
</label>
<label class="flex flex-col gap-2">
<span class="text-sm font-medium text-[#111518]" data-i18n="contact_form_company">Company Name</span>
<input name="company" data-i18n-placeholder="contact_form_company_placeholder" placeholder="Coffeebara Inc." class="form-input rounded-xl border-gray-200 bg-white px-4 py-3 focus:border-[#1993e5] focus:ring-[#1993e5]">
</label>
</div>
<label class="flex flex-col gap-2">
<span class="text-sm font-medium text-[#111518]" data-i18n="contact_form_email">Email Address</span>
<input name="email" type="email" required data-i18n-placeholder="contact_form_email_placeholder" placeholder="john@example.com" class="form-input rounded-xl border-gray-200 bg-white px-4 py-3 focus:border-[#1993e5] focus:ring-[#1993e5]">
</label>
<label class="flex flex-col gap-2">
<span class="text-sm font-medium text-[#111518]" data-i18n="contact_form_message">Message</span>
<textarea name="message" required data-i18n-placeholder="contact_form_message_placeholder" placeholder="Tell us about your project or needs..." class="form-input rounded-xl border-gray-200 bg-white px-4 py-3 min-h-[120px] focus:border-[#1993e5] focus:ring-[#1993e5]"></textarea>
</label>
<button type="submit" class="w-full bg-[#1993e5] text-white font-bold py-4 rounded-xl shadow-lg hover:bg-[#157bbd] transition-all transform hover:-translate-y-1" data-i18n="contact_form_submit">
Send Message
</button>
</form>
</div>
</div>
<div class="mt-20 bg-[#111518] rounded-2xl p-8 sm:p-12 text-center text-white relative overflow-hidden group cursor-pointer" onclick="window.open('https://exhibitors.ces.tech/8_0/exhibitor/exhibitor-details.cfm?exhid=001Pp00001aRvwJIAS', '_blank')">
<div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<h2 class="text-2xl sm:text-3xl font-bold mb-4 relative z-10" data-i18n="contact_ces_title">Going to CES 2026?</h2>
<p class="text-gray-400 mb-8 max-w-xl mx-auto relative z-10" data-i18n="contact_ces_desc">Visit our booth at the Seoul Pavilion to see NOCO in action. Let's schedule a meeting in Las Vegas.</p>
<button class="px-8 py-3 rounded-full border border-white/30 hover:bg-white hover:text-[#111518] transition-all font-bold relative z-10" data-i18n="contact_ces_button">
Book a Meeting at CES
</button>
</div>
</div>
</main>
<footer class="flex justify-center border-t border-[#f0f3f4] mt-12 bg-gray-50">
<div class="flex max-w-[960px] w-full flex-col">
<div class="flex flex-col gap-4 sm:gap-6 px-5 py-8 text-center">
<p class="text-[#637988] text-sm">© 2024 Coffeebara Solutions. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<script>
document.getElementById('mobile-menu-btn').addEventListener('click', function () {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// 언어 전환 기능
const langToggle = document.getElementById('language-toggle');
if (langToggle) {
langToggle.addEventListener('click', () => {
setLanguage(currentLanguage === 'en' ? 'ko' : 'en');
});
}
</script>
</body>
</html>