-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcareers.templ
169 lines (167 loc) · 5.3 KB
/
careers.templ
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
package website
templ careers(jobs []*Post) {
<section class="container mx-auto">
@headerLine()
<h4 class="mt-12 v-h4">Join us</h4>
<h1 class="mt-2 v-h1">We care about our work and the impact we have.</h1>
</section>
<section class="container mx-auto">
<h3 class="v-h3">
We are an elite crew of DevOps Consultants specialised in improving the Developer Experience. We each bring our own specialities, experiences and know-how when collaborating on customer projects, tailoring services to our customers' individual needs.
</h3>
</section>
<section class="container mx-auto">
@headerLine()
<h4 class="mt-12 v-h4">Our Values</h4>
<h2 class="mt-2 v-h2 max-w-3xl">
<span class="text-v-pink">We are people not numbers.</span>
<br/>
<spam class="text-v-lilac">We share and collaborate. </spam>
<br/>
<spam class="text-v-pink">We work to provide value.</spam>
<br/>
<spam class="text-v-lilac">We are on a journey together.</spam>
</h2>
</section>
<section class="container mx-auto">
@columns(false) {
@column("self-start") {
<h3 class="v-h3">What we look for.</h3>
<p class="mt-4 v-p">
We look for people passionate about continuous practices, cloud architecture and all the
wonderful things that will help our customers deliver greatness. If you like to be
challenged and want to keep developing, then you should get in touch.
</p>
}
@column("self-start") {
<h3 class="v-h3">What we offer.</h3>
<p class="mt-4 v-p">
Our goal is to provide a great place to work where you can continue to develop and learn.
You'll get to work with cool tech and discuss with others who share a passion to deliver. To
ensure fairness, we have an open salary policy.
</p>
}
}
</section>
if len(jobs) > 0 {
<section id="open-positions" class="container mx-auto">
@headerLine()
<h4 class="mt-12 v-h4">Open positions</h4>
<p class="mt-2 v-h1">Check out our open positions.</p>
</section>
<section class="container mx-auto">
@PostsGrid(jobs, PostsGridOptions{})
</section>
}
<section class="container mx-auto">
@headerLine()
<h4 class="mt-12 v-h4">Apply now</h4>
<p class="mt-2 v-h1">Join our crew.</p>
</section>
<section class="container mx-auto">
@careersForm()
</section>
}
templ careersForm() {
<div class="max-w-4xl">
<form
action="https://usebasin.com/f/9f1e7bc2e780"
method="POST"
enctype="multipart/form-data"
id="contact-form"
class="flex flex-col gap-y-8"
>
<!-- Honeypot field to avoid spamming -->
<input type="hidden" name="_tunaboat"/>
<div>
<label for="name" class="block v-label mb-2">Name*</label>
<input type="text" name="name" id="name" autocomplete="name" required/>
</div>
<div>
<label for="email" class="block v-label mb-2">Email*</label>
<input type="email" name="email" id="email" required/>
</div>
<div>
<label for="message" class="block v-label mb-2">Tell us about yourself*</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<div class="flex flex-col gap-y-8 md:flex-row md:gap-x-4">
<div class="flex-1">
<label for="linkedin" class="block v-label mb-2">LinkedIn</label>
<input
type="url"
name="linkedin"
id="linkedin"
placeholder="https://www.linkedin.com/in/<profile>"
pattern="https://(www.)?linkedin.com/.*"
/>
</div>
<div class="flex-1">
<label for="github" class="block v-label mb-2">GitHub</label>
<input
type="url"
name="github"
id="github"
placeholder="https://github.com/<profile>"
pattern="https://(www.)?github.com/.*"
/>
</div>
</div>
<div class="flex gap-x-4 items-center">
<div
class="flex-none self-start py-1 px-4 border-2 border-v-lilac bg-v-lilac text-v-white hover:bg-violet-400"
>
<label for="attachment" class="cursor-pointer font-medium text-lg">
<div class="flex items-center gap-x-1">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
></path>
</svg>
<span>Attach files</span>
</div>
</label>
<input
type="file"
id="attachment"
name="attachments[]"
class="hidden"
multiple
_="
on change
put '' into #careers-file-attachments
for x in my files
put `<p>${x.name}</p>` at the end of #careers-file-attachments
end
"
/>
</div>
<div id="careers-file-attachments" class="flex flex-col gap-y-1"></div>
</div>
<div class="flex gap-x-4 items-center">
<input
type="checkbox"
id="newsletter"
name="newsletter"
class="border-[3px] border-v-black focus:ring-0 text-v-lilac"
/>
<label for="newsletter" class="block v-label">Subscribe to our monthly newsletter</label>
</div>
<div>
<button class="v-button bg-v-black" type="submit">Submit</button>
</div>
<p>
By submitting this form you agree to our <a href="/privacy" class="underline">Privacy Policy</a>
</p>
</form>
</div>
}