obsidianstudio/start-project.html at main · DragonFireDesign/obsidianstudio · GitHub

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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Start a Project — Obsidian Studio</title>
<meta name="description" content="Start a project with Obsidian Studio. Three defined tiers from £1,200. Editorial web design for brands with something worth saying.">
<meta property="og:title" content="Start a Project — Obsidian Studio">
<meta property="og:description" content="Start a project with Obsidian Studio. Three defined tiers from £1,200. Editorial web design for brands with something worth saying.">
<meta property="og:image" content="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351851/Obsidian/hero-img_zlbp1b.png">
<meta property="og:url" content="https://obsidianstudio.co/start-project.html">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
  <script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            cream: '#ffffff',
            ink: '#111111',
            sand: '#f4f4f4',
            sand2: '#f4f4f4',
            sand3: '#e8e8e8',
            sand4: '#e8e8e8',
            sand5: '#f4f4f4',
            sand6: '#e8e8e8',
          },
          fontFamily: {
            serif: ['Georgia', 'Times New Roman', 'serif'],
            sans: ['Inter', 'system-ui', 'sans-serif']
          },
          letterSpacing: {
            editorial: '0.24em'
          }
        }
      }
    }
  </script>
  <style>
    html { scroll-behavior: smooth; }
    body { background: #ffffff; color: #111111; }

  summary::-webkit-details-marker {
    display: none;
  }
</style>
</head>
<body class="bg-cream text-ink font-sans selection:bg-sand3 selection:text-ink">
  <div class="mx-auto max-w-7xl px-4 py-4 md:px-6 lg:px-8">
 <header class="border-b border-black/10 pb-4">
  <div class="flex items-center justify-between gap-6">
    <a href="index.html" class="font-serif text-lg uppercase tracking-[-0.02em] md:text-xl">
      Obsidian Studio
    </a>

    <nav class="hidden items-center gap-6 text-[11px] uppercase tracking-[0.22em] md:flex lg:gap-8">
      <a href="project-index.html" class="text-black/55 transition hover:text-black">
        Project Index
      </a>
      <a href="start-project.html" class="text-black transition hover:text-black">
        Contact
      </a>
    </nav>

    <details class="relative md:hidden">
      <summary class="list-none cursor-pointer text-[11px] uppercase tracking-[0.22em] text-black/55 transition hover:text-black">
        Menu
      </summary>

      <div class="absolute right-0 top-full z-20 mt-3 min-w-[220px] border border-black/10 bg-sand2 p-4 shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
        <nav class="flex flex-col gap-3 text-[11px] uppercase tracking-[0.22em]">
          <a href="project-index.html" class="text-black/55 transition hover:text-black">
            Project Index
          </a>
          <a href="start-project.html" class="text-black transition hover:text-black">
            Contact
          </a>
        </nav>
      </div>
    </details>
  </div>
</header>

 <main class="space-y-5 py-5 md:space-y-6 md:py-6">
      <section class="overflow-hidden border border-black/10 bg-ink p-6 md:p-8 lg:p-12">
        <div class="max-w-4xl">
          <div class="mb-6 flex flex-wrap items-center gap-3 text-[11px] uppercase tracking-editorial text-white/50">
            <span>08 — Start a Project</span>
            <span class="h-px w-10 bg-white/15"></span>
            <span>Enquiry</span>
          </div>

          <h1 class="max-w-4xl font-serif text-5xl leading-[0.95] tracking-[-0.05em] text-white md:text-7xl lg:text-[6rem]">
            Tell me more about your brand.
          </h1>

          <p class="mt-6 max-w-2xl text-base leading-8 text-white/70 md:text-lg md:leading-9">
            Whether you already have a clear brief or are still shaping the direction, this is where the conversation starts. Share the essentials, the ambition, and the feel you want your website to carry.
          </p>
        </div>
      </section>

      <section class="grid gap-5 md:grid-cols-3">
        <article class="border border-black/10 bg-sand2 p-6 md:p-8">
          <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Project Scope</div>
                   <p class="mt-4 text-sm leading-7 text-black/60">
            Every project receives the same considered editorial thinking. Scope determines the tier.  Foundation — £1,200 / Studio — £2,500 / Definitive — £5,000.
          </p>
        </article>

        <article class="border border-black/10 bg-sand2 p-6 md:p-8">
          <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">A Useful Note</div>
          <p class="mt-5 text-sm leading-7 text-black/60">
            Clear briefs are welcome, but rough notes are just as useful. A good project does not need to begin perfectly formed.
          </p>
        </article>

        <article class="border border-black/10 bg-sand2 p-6 md:p-8">
          <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Editorial Note</div>
          <p class="mt-5 text-sm leading-7 text-black/60">
            Good projects begin with clarity. The more context you can share, the better. But a few strong lines are often enough to begin shaping the right direction.
          </p>
        </article>
      </section>

      <section id="form" class="border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
        <div class="mb-8 border-b border-black/10 pb-6">
          <div class="text-[11px] uppercase tracking-editorial text-black/50">Project Enquiry Form</div>
        </div>

        <form name="start-project" method="POST" data-netlify="true" netlify-honeypot="bot-field" action="/thank-you.html" class="space-y-10">
          <input type="hidden" name="form-name" value="start-project" />
          <p class="hidden">
            <label>Don't fill this out if you're human: <input name="bot-field" /></label>
          </p>
          <section>
            <div class="grid gap-4 md:grid-cols-[180px_1fr] md:items-start">
              <div>
                <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">01</div>
                <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">Your Story</div>
              </div>
              <div class="grid gap-5 md:grid-cols-2">
                <div>
                  <label class="mb-2 block text-[11px] uppercase tracking-[0.22em] text-black/45">Full Name</label>
                  <input type="text" name="full-name" autocomplete="name" class="w-full border border-black/15 bg-transparent px-4 py-3 text-sm outline-none transition focus:border-black/40" required />
                </div>
                <div>
                  <label class="mb-2 block text-[11px] uppercase tracking-[0.22em] text-black/45">Brand</label>
                  <input type="text" name="brand" autocomplete="organization" class="w-full border border-black/15 bg-transparent px-4 py-3 text-sm outline-none transition focus:border-black/40" />
                </div>
              </div>
            </div>
          </section>

          <section class="border-t border-black/10 pt-8">
            <div class="grid gap-4 md:grid-cols-[180px_1fr] md:items-start">
              <div>
                <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">02</div>
                <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">The Vision</div>
              </div>
              <div>
                <label class="mb-2 block text-[11px] uppercase tracking-[0.22em] text-black/45">Tell me about your project</label>
                <textarea name="project-details" rows="7" class="w-full border border-black/15 bg-transparent px-4 py-3 text-sm leading-7 outline-none transition focus:border-black/40" required></textarea>
              </div>
            </div>
          </section>

          <section class="border-t border-black/10 pt-8">
            <div class="grid gap-4 md:grid-cols-[180px_1fr] md:items-start">
              <div>
                <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">03</div>
                <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">Investment</div>
              </div>
              <div>
                <p class="mb-5 max-w-2xl text-[11px] uppercase tracking-[0.22em] text-black/45">
                  All projects receive the same considered approach. Scope determines the appropriate tier.
                </p>

                <div class="grid gap-4">
                  <label class="block cursor-pointer border border-black/15 bg-[#e8e8e8] p-5 transition hover:border-black/30">
                    <div class="flex items-start justify-between gap-4">
                      <div>
                        <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Foundation</div>
                        <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">Essential digital presence</div>
                      </div>
                      <input type="radio" name="tier" value="Foundation" class="mt-1 h-4 w-4" required />
                    </div>
                    <div class="mt-4 text-sm leading-6 text-black/68">£1,200</div>
                  </label>

                  <label class="block cursor-pointer border border-black/15 bg-[#e8e8e8] p-5 transition hover:border-black/30">
                    <div class="flex items-start justify-between gap-4">
                      <div>
                        <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Studio</div>
                        <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">Full-scale bespoke experience</div>
                      </div>
                      <input type="radio" name="tier" value="Studio" class="mt-1 h-4 w-4" />
                    </div>
                    <div class="mt-4 text-sm leading-6 text-black/68">£2,500</div>
                  </label>

                  <label class="block cursor-pointer border border-black/15 bg-[#e8e8e8] p-5 transition hover:border-black/30">
                    <div class="flex items-start justify-between gap-4">
                      <div>
                        <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Definitive</div>
                        <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">Complete creative direction, no compromise</div>
                      </div>
                      <input type="radio" name="tier" value="Definitive" class="mt-1 h-4 w-4" />
                    </div>
                    <div class="mt-4 text-sm leading-6 text-black/68">£5,000</div>
                  </label>
                </div>
              </div>
            </div>
          </section>

          <section class="border-t border-black/10 pt-8">
            <div class="grid gap-4 md:grid-cols-[180px_1fr] md:items-start">
              <div>
                <div class="text-[11px] uppercase tracking-[0.22em] text-black/45">04</div>
                <div class="mt-2 font-serif text-2xl tracking-[-0.03em]">Contact</div>
              </div>
              <div class="grid gap-5 md:grid-cols-2">
                <div>
                  <label class="mb-2 block text-[11px] uppercase tracking-[0.22em] text-black/45">Desired Launch</label>
                  <select name="desired-launch" class="w-full border border-black/15 bg-transparent px-4 py-3 text-sm outline-none transition focus:border-black/40">
                    <option>Q2 2026</option>
                    <option>Q3 2026</option>
                    <option>Q4 2026</option>
                    <option>Flexible</option>
                  </select>
                </div>
                <div>
                  <label class="mb-2 block text-[11px] uppercase tracking-[0.22em] text-black/45">Email Address</label>
                  <input type="email" name="email" autocomplete="email" class="w-full border border-black/15 bg-transparent px-4 py-3 text-sm outline-none transition focus:border-black/40" required />
                </div>
                <div class="md:col-span-2">
                  <label class="mb-2 block text-[11px] uppercase tracking-[0.22em] text-black/45">WhatsApp</label>
                  <input type="text" name="whatsapp" autocomplete="tel" class="w-full border border-black/15 bg-transparent px-4 py-3 text-sm outline-none transition focus:border-black/40" />
                </div>
              </div>
            </div>
          </section>

          <div class="border-t border-black/10 pt-8">
            <button type="submit" class="rounded-none bg-ink px-6 py-3 text-sm tracking-[0.02em] text-cream transition hover:-translate-y-0.5">
              Initialise Project
            </button>
          </div>
        </form>
      </section>

      <section class="overflow-hidden border border-black/10 bg-ink p-6 text-cream md:p-8 lg:p-12">
        <div class="grid gap-6 lg:grid-cols-12">
          <div class="lg:col-span-3">
            <div class="text-[11px] uppercase tracking-editorial text-white/45">What Happens Next</div>
          </div>
          <div class="lg:col-span-9">
            <p class="max-w-4xl font-serif text-[1.8rem] leading-[1.08] tracking-[-0.03em] md:text-[2.6rem]">
              I’ll review your brief, consider the right approach for your project, and come back to you with a clear next step.
            </p>
            <p class="mt-6 max-w-3xl text-base leading-8 text-white/68">
              No hard sell, no automated responses. Just a considered reply.
            </p>
          </div>
        </div>
      </section>
    </main>

<footer class="border-t border-black/10 py-5">
  <div class="flex flex-col gap-3 text-[11px] uppercase tracking-[0.22em] text-black/45 md:flex-row md:items-end md:justify-between">
    <div class="flex flex-col gap-2">
      <span>Obsidian Studio</span>
      <div class="flex gap-4">
        <a href="privacy-notice.html" class="transition hover:text-black">Privacy Notice</a>
        <a href="terms.html" class="transition hover:text-black">Terms</a>
      </div>
    </div>
    <span>Web Design With An Editorial Eye</span>
  </div>
</footer>
  </div>
</body>
</html>