payload-next-starter 1.0.2 â 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "payload-next-starter",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "PayloadCMS starter for Next.js - install into any Next.js app",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
|
|
36
36
|
"lint": "cross-env NODE_OPTIONS=--no-deprecation eslint .",
|
|
37
37
|
"payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
|
|
38
|
+
"seed:pages": "cross-env NODE_OPTIONS=--no-deprecation tsx src/scripts/seedPages.ts",
|
|
38
39
|
"start": "cross-env NODE_OPTIONS=--no-deprecation next start",
|
|
39
40
|
"test": "pnpm run test:int && pnpm run test:e2e",
|
|
40
41
|
"test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --import=tsx/esm\" playwright test --config=playwright.config.ts",
|
|
@@ -1,49 +1,421 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import Image from 'next/image'
|
|
4
|
+
import Link from 'next/link'
|
|
1
5
|
import React from 'react'
|
|
2
6
|
|
|
3
7
|
export default function ContactUsPage() {
|
|
4
8
|
return (
|
|
5
|
-
<div
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
9
|
+
<div
|
|
10
|
+
style={{
|
|
11
|
+
display: 'flex',
|
|
12
|
+
minHeight: '100vh',
|
|
13
|
+
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
14
|
+
}}
|
|
15
|
+
>
|
|
16
|
+
{/* Sticky Sidebar Navigation */}
|
|
17
|
+
<nav
|
|
18
|
+
style={{
|
|
19
|
+
position: 'sticky',
|
|
20
|
+
top: 0,
|
|
21
|
+
height: '100vh',
|
|
22
|
+
width: '240px',
|
|
23
|
+
background: 'linear-gradient(180deg, #1e3a5f 0%, #0d2137 100%)',
|
|
24
|
+
padding: '40px 20px',
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
gap: '20px',
|
|
28
|
+
boxShadow: '4px 0 15px rgba(0,0,0,0.1)',
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
<h2 style={{ color: '#fff', fontSize: '24px', marginBottom: '30px', fontWeight: 700 }}>
|
|
32
|
+
Navigation
|
|
33
|
+
</h2>
|
|
34
|
+
<Link
|
|
35
|
+
href="/"
|
|
36
|
+
style={{
|
|
37
|
+
color: '#e2e8f0',
|
|
38
|
+
textDecoration: 'none',
|
|
39
|
+
padding: '15px 20px',
|
|
40
|
+
borderRadius: '8px',
|
|
41
|
+
transition: 'all 0.3s ease',
|
|
42
|
+
display: 'flex',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
gap: '10px',
|
|
45
|
+
fontSize: '16px',
|
|
46
|
+
fontWeight: 500,
|
|
47
|
+
}}
|
|
48
|
+
onMouseEnter={(e) => {
|
|
49
|
+
e.currentTarget.style.background = 'rgba(255,255,255,0.1)'
|
|
50
|
+
e.currentTarget.style.color = '#fff'
|
|
51
|
+
}}
|
|
52
|
+
onMouseLeave={(e) => {
|
|
53
|
+
e.currentTarget.style.background = 'transparent'
|
|
54
|
+
e.currentTarget.style.color = '#e2e8f0'
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
<span>đ </span> Home
|
|
58
|
+
</Link>
|
|
59
|
+
<Link
|
|
60
|
+
href="/about-us"
|
|
61
|
+
style={{
|
|
62
|
+
color: '#e2e8f0',
|
|
63
|
+
textDecoration: 'none',
|
|
64
|
+
padding: '15px 20px',
|
|
65
|
+
borderRadius: '8px',
|
|
66
|
+
transition: 'all 0.3s ease',
|
|
67
|
+
display: 'flex',
|
|
68
|
+
alignItems: 'center',
|
|
69
|
+
gap: '10px',
|
|
70
|
+
fontSize: '16px',
|
|
71
|
+
fontWeight: 500,
|
|
72
|
+
}}
|
|
73
|
+
onMouseEnter={(e) => {
|
|
74
|
+
e.currentTarget.style.background = 'rgba(255,255,255,0.1)'
|
|
75
|
+
e.currentTarget.style.color = '#fff'
|
|
76
|
+
}}
|
|
77
|
+
onMouseLeave={(e) => {
|
|
78
|
+
e.currentTarget.style.background = 'transparent'
|
|
79
|
+
e.currentTarget.style.color = '#e2e8f0'
|
|
80
|
+
}}
|
|
81
|
+
>
|
|
82
|
+
<span>âšī¸</span> About Us
|
|
83
|
+
</Link>
|
|
84
|
+
<Link
|
|
85
|
+
href="/contact-us"
|
|
86
|
+
style={{
|
|
87
|
+
background: 'rgba(255,255,255,0.15)',
|
|
88
|
+
color: '#fff',
|
|
89
|
+
textDecoration: 'none',
|
|
90
|
+
padding: '15px 20px',
|
|
91
|
+
borderRadius: '8px',
|
|
92
|
+
display: 'flex',
|
|
93
|
+
alignItems: 'center',
|
|
94
|
+
gap: '10px',
|
|
95
|
+
fontSize: '16px',
|
|
96
|
+
fontWeight: 500,
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
99
|
+
<span>đ§</span> Contact Us
|
|
100
|
+
</Link>
|
|
101
|
+
</nav>
|
|
102
|
+
|
|
103
|
+
{/* Main Content */}
|
|
104
|
+
<main style={{ flex: 1, background: '#f8fafc' }}>
|
|
105
|
+
{/* Hero Section with Image */}
|
|
106
|
+
<div
|
|
107
|
+
style={{
|
|
108
|
+
position: 'relative',
|
|
109
|
+
height: '400px',
|
|
110
|
+
overflow: 'hidden',
|
|
111
|
+
display: 'flex',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
justifyContent: 'center',
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<Image
|
|
117
|
+
src="https://images.unsplash.com/photo-1577563908411-5077b6dc7624?w=1200&h=400&fit=crop"
|
|
118
|
+
alt="Contact us header"
|
|
119
|
+
fill
|
|
120
|
+
style={{ objectFit: 'cover' }}
|
|
121
|
+
priority
|
|
122
|
+
/>
|
|
123
|
+
<div
|
|
124
|
+
style={{
|
|
125
|
+
position: 'absolute',
|
|
126
|
+
inset: 0,
|
|
127
|
+
background:
|
|
128
|
+
'linear-gradient(135deg, rgba(30, 58, 95, 0.8) 0%, rgba(13, 33, 55, 0.6) 100%)',
|
|
129
|
+
}}
|
|
130
|
+
/>
|
|
131
|
+
<div style={{ position: 'relative', zIndex: 1, textAlign: 'center', color: '#fff' }}>
|
|
132
|
+
<h1 style={{ fontSize: '48px', fontWeight: 800, marginBottom: '16px' }}>
|
|
133
|
+
Get In Touch
|
|
134
|
+
</h1>
|
|
135
|
+
<p style={{ fontSize: '20px', opacity: 0.9 }}>We would love to hear from you</p>
|
|
136
|
+
</div>
|
|
26
137
|
</div>
|
|
27
138
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
139
|
+
{/* Content Grid */}
|
|
140
|
+
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '60px 40px' }}>
|
|
141
|
+
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px' }}>
|
|
142
|
+
{/* Contact Info Cards */}
|
|
143
|
+
<div>
|
|
144
|
+
<h2
|
|
145
|
+
style={{
|
|
146
|
+
fontSize: '32px',
|
|
147
|
+
color: '#1e3a5f',
|
|
148
|
+
marginBottom: '30px',
|
|
149
|
+
fontWeight: 700,
|
|
150
|
+
}}
|
|
151
|
+
>
|
|
152
|
+
Contact Information
|
|
153
|
+
</h2>
|
|
154
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
|
|
155
|
+
{/* Email Card */}
|
|
156
|
+
<div
|
|
157
|
+
style={{
|
|
158
|
+
background: '#fff',
|
|
159
|
+
padding: '30px',
|
|
160
|
+
borderRadius: '16px',
|
|
161
|
+
boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
|
|
162
|
+
display: 'flex',
|
|
163
|
+
alignItems: 'center',
|
|
164
|
+
gap: '20px',
|
|
165
|
+
}}
|
|
166
|
+
>
|
|
167
|
+
<div
|
|
168
|
+
style={{
|
|
169
|
+
width: '60px',
|
|
170
|
+
height: '60px',
|
|
171
|
+
background: 'linear-gradient(135deg, #3b82f6 0%, #1e3a5f 100%)',
|
|
172
|
+
borderRadius: '12px',
|
|
173
|
+
display: 'flex',
|
|
174
|
+
alignItems: 'center',
|
|
175
|
+
justifyContent: 'center',
|
|
176
|
+
fontSize: '28px',
|
|
177
|
+
}}
|
|
178
|
+
>
|
|
179
|
+
đ§
|
|
180
|
+
</div>
|
|
181
|
+
<div>
|
|
182
|
+
<h3 style={{ fontSize: '18px', color: '#64748b', marginBottom: '8px' }}>
|
|
183
|
+
Email
|
|
184
|
+
</h3>
|
|
185
|
+
<p style={{ fontSize: '18px', color: '#1e3a5f', fontWeight: 600 }}>
|
|
186
|
+
contact@example.com
|
|
187
|
+
</p>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
{/* Phone Card */}
|
|
192
|
+
<div
|
|
193
|
+
style={{
|
|
194
|
+
background: '#fff',
|
|
195
|
+
padding: '30px',
|
|
196
|
+
borderRadius: '16px',
|
|
197
|
+
boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
|
|
198
|
+
display: 'flex',
|
|
199
|
+
alignItems: 'center',
|
|
200
|
+
gap: '20px',
|
|
201
|
+
}}
|
|
202
|
+
>
|
|
203
|
+
<div
|
|
204
|
+
style={{
|
|
205
|
+
width: '60px',
|
|
206
|
+
height: '60px',
|
|
207
|
+
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
|
208
|
+
borderRadius: '12px',
|
|
209
|
+
display: 'flex',
|
|
210
|
+
alignItems: 'center',
|
|
211
|
+
justifyContent: 'center',
|
|
212
|
+
fontSize: '28px',
|
|
213
|
+
}}
|
|
214
|
+
>
|
|
215
|
+
đ
|
|
216
|
+
</div>
|
|
217
|
+
<div>
|
|
218
|
+
<h3 style={{ fontSize: '18px', color: '#64748b', marginBottom: '8px' }}>
|
|
219
|
+
Phone
|
|
220
|
+
</h3>
|
|
221
|
+
<p style={{ fontSize: '18px', color: '#1e3a5f', fontWeight: 600 }}>
|
|
222
|
+
+1 (555) 123-4567
|
|
223
|
+
</p>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
{/* Address Card */}
|
|
228
|
+
<div
|
|
229
|
+
style={{
|
|
230
|
+
background: '#fff',
|
|
231
|
+
padding: '30px',
|
|
232
|
+
borderRadius: '16px',
|
|
233
|
+
boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
|
|
234
|
+
display: 'flex',
|
|
235
|
+
alignItems: 'center',
|
|
236
|
+
gap: '20px',
|
|
237
|
+
}}
|
|
238
|
+
>
|
|
239
|
+
<div
|
|
240
|
+
style={{
|
|
241
|
+
width: '60px',
|
|
242
|
+
height: '60px',
|
|
243
|
+
background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
|
244
|
+
borderRadius: '12px',
|
|
245
|
+
display: 'flex',
|
|
246
|
+
alignItems: 'center',
|
|
247
|
+
justifyContent: 'center',
|
|
248
|
+
fontSize: '28px',
|
|
249
|
+
}}
|
|
250
|
+
>
|
|
251
|
+
đ
|
|
252
|
+
</div>
|
|
253
|
+
<div>
|
|
254
|
+
<h3 style={{ fontSize: '18px', color: '#64748b', marginBottom: '8px' }}>
|
|
255
|
+
Address
|
|
256
|
+
</h3>
|
|
257
|
+
<p style={{ fontSize: '18px', color: '#1e3a5f', fontWeight: 600 }}>
|
|
258
|
+
123 Main Street, City, State 12345
|
|
259
|
+
</p>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
38
263
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
264
|
+
|
|
265
|
+
{/* Modern Contact Form */}
|
|
266
|
+
<div>
|
|
267
|
+
<h2
|
|
268
|
+
style={{
|
|
269
|
+
fontSize: '32px',
|
|
270
|
+
color: '#1e3a5f',
|
|
271
|
+
marginBottom: '30px',
|
|
272
|
+
fontWeight: 700,
|
|
273
|
+
}}
|
|
274
|
+
>
|
|
275
|
+
Send a Message
|
|
276
|
+
</h2>
|
|
277
|
+
<form
|
|
278
|
+
style={{
|
|
279
|
+
background: '#fff',
|
|
280
|
+
padding: '40px',
|
|
281
|
+
borderRadius: '20px',
|
|
282
|
+
boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
|
|
283
|
+
}}
|
|
284
|
+
>
|
|
285
|
+
<div style={{ marginBottom: '24px' }}>
|
|
286
|
+
<label
|
|
287
|
+
htmlFor="name"
|
|
288
|
+
style={{
|
|
289
|
+
display: 'block',
|
|
290
|
+
fontSize: '14px',
|
|
291
|
+
color: '#64748b',
|
|
292
|
+
marginBottom: '8px',
|
|
293
|
+
fontWeight: 500,
|
|
294
|
+
textTransform: 'uppercase',
|
|
295
|
+
letterSpacing: '0.5px',
|
|
296
|
+
}}
|
|
297
|
+
>
|
|
298
|
+
Your Name
|
|
299
|
+
</label>
|
|
300
|
+
<input
|
|
301
|
+
type="text"
|
|
302
|
+
id="name"
|
|
303
|
+
name="name"
|
|
304
|
+
placeholder="John Doe"
|
|
305
|
+
style={{
|
|
306
|
+
width: '100%',
|
|
307
|
+
padding: '16px 20px',
|
|
308
|
+
borderRadius: '12px',
|
|
309
|
+
border: '2px solid #e2e8f0',
|
|
310
|
+
fontSize: '16px',
|
|
311
|
+
transition: 'all 0.3s ease',
|
|
312
|
+
outline: 'none',
|
|
313
|
+
}}
|
|
314
|
+
onFocus={(e) => (e.target.style.borderColor = '#3b82f6')}
|
|
315
|
+
onBlur={(e) => (e.target.style.borderColor = '#e2e8f0')}
|
|
316
|
+
/>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<div style={{ marginBottom: '24px' }}>
|
|
320
|
+
<label
|
|
321
|
+
htmlFor="email"
|
|
322
|
+
style={{
|
|
323
|
+
display: 'block',
|
|
324
|
+
fontSize: '14px',
|
|
325
|
+
color: '#64748b',
|
|
326
|
+
marginBottom: '8px',
|
|
327
|
+
fontWeight: 500,
|
|
328
|
+
textTransform: 'uppercase',
|
|
329
|
+
letterSpacing: '0.5px',
|
|
330
|
+
}}
|
|
331
|
+
>
|
|
332
|
+
Email Address
|
|
333
|
+
</label>
|
|
334
|
+
<input
|
|
335
|
+
type="email"
|
|
336
|
+
id="email"
|
|
337
|
+
name="email"
|
|
338
|
+
placeholder="john@example.com"
|
|
339
|
+
style={{
|
|
340
|
+
width: '100%',
|
|
341
|
+
padding: '16px 20px',
|
|
342
|
+
borderRadius: '12px',
|
|
343
|
+
border: '2px solid #e2e8f0',
|
|
344
|
+
fontSize: '16px',
|
|
345
|
+
transition: 'all 0.3s ease',
|
|
346
|
+
outline: 'none',
|
|
347
|
+
}}
|
|
348
|
+
onFocus={(e) => (e.target.style.borderColor = '#3b82f6')}
|
|
349
|
+
onBlur={(e) => (e.target.style.borderColor = '#e2e8f0')}
|
|
350
|
+
/>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
<div style={{ marginBottom: '24px' }}>
|
|
354
|
+
<label
|
|
355
|
+
htmlFor="message"
|
|
356
|
+
style={{
|
|
357
|
+
display: 'block',
|
|
358
|
+
fontSize: '14px',
|
|
359
|
+
color: '#64748b',
|
|
360
|
+
marginBottom: '8px',
|
|
361
|
+
fontWeight: 500,
|
|
362
|
+
textTransform: 'uppercase',
|
|
363
|
+
letterSpacing: '0.5px',
|
|
364
|
+
}}
|
|
365
|
+
>
|
|
366
|
+
Your Message
|
|
367
|
+
</label>
|
|
368
|
+
<textarea
|
|
369
|
+
id="message"
|
|
370
|
+
name="message"
|
|
371
|
+
rows={5}
|
|
372
|
+
placeholder="Tell us how we can help..."
|
|
373
|
+
style={{
|
|
374
|
+
width: '100%',
|
|
375
|
+
padding: '16px 20px',
|
|
376
|
+
borderRadius: '12px',
|
|
377
|
+
border: '2px solid #e2e8f0',
|
|
378
|
+
fontSize: '16px',
|
|
379
|
+
transition: 'all 0.3s ease',
|
|
380
|
+
outline: 'none',
|
|
381
|
+
resize: 'vertical',
|
|
382
|
+
}}
|
|
383
|
+
onFocus={(e) => (e.target.style.borderColor = '#3b82f6')}
|
|
384
|
+
onBlur={(e) => (e.target.style.borderColor = '#e2e8f0')}
|
|
385
|
+
/>
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
<button
|
|
389
|
+
type="submit"
|
|
390
|
+
style={{
|
|
391
|
+
width: '100%',
|
|
392
|
+
padding: '18px 40px',
|
|
393
|
+
background: 'linear-gradient(135deg, #3b82f6 0%, #1e3a5f 100%)',
|
|
394
|
+
color: '#fff',
|
|
395
|
+
border: 'none',
|
|
396
|
+
borderRadius: '12px',
|
|
397
|
+
fontSize: '18px',
|
|
398
|
+
fontWeight: 600,
|
|
399
|
+
cursor: 'pointer',
|
|
400
|
+
transition: 'all 0.3s ease',
|
|
401
|
+
boxShadow: '0 4px 15px rgba(59, 130, 246, 0.4)',
|
|
402
|
+
}}
|
|
403
|
+
onMouseEnter={(e) => {
|
|
404
|
+
e.currentTarget.style.transform = 'translateY(-2px)'
|
|
405
|
+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.5)'
|
|
406
|
+
}}
|
|
407
|
+
onMouseLeave={(e) => {
|
|
408
|
+
e.currentTarget.style.transform = 'translateY(0)'
|
|
409
|
+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(59, 130, 246, 0.4)'
|
|
410
|
+
}}
|
|
411
|
+
>
|
|
412
|
+
Send Message â
|
|
413
|
+
</button>
|
|
414
|
+
</form>
|
|
42
415
|
</div>
|
|
43
|
-
|
|
44
|
-
</form>
|
|
416
|
+
</div>
|
|
45
417
|
</div>
|
|
46
|
-
</
|
|
418
|
+
</main>
|
|
47
419
|
</div>
|
|
48
420
|
)
|
|
49
421
|
}
|