Skip to content
Merged
30 changes: 17 additions & 13 deletions about.html
Original file line number Diff line number Diff line change
Expand Up @@ -152,20 +152,24 @@ <h2 class="font-display text-4xl md:text-5xl lg:text-6xl text-white font-light"
</h2>
</div>

<!-- Content grid -->
<div class="fade-section grid lg:grid-cols-[1fr_290px] gap-14 lg:gap-20 items-start">

<!-- Letter text -->
<div>
<!-- Drop-cap paragraph -->
<div style="margin-bottom:1.8rem;overflow:hidden;">
<span class="font-display float-left mr-3" style="font-size:5.8rem;line-height:0.8;color:rgba(201,169,110,0.18);">D</span>
<p class="font-body text-sm leading-[1.92]" style="color:rgba(197,197,217,0.65);">ear Fellow Visionary,<br><br>When I first conceived of the Dubai Meridian Forum, it was not from a desire to create another conference. It was from a fundamental belief that the problems defining our era — climate finance, regulatory technology, sustainable infrastructure — cannot be solved by any one discipline alone.</p>
</div>
<!-- Content grid -->
<div class="fade-section grid lg:grid-cols-[1fr_290px] gap-14 lg:gap-20 items-start">
<!-- Letter text -->
<div>
<!-- Drop-cap paragraph -->
<div style="margin-bottom:1.8rem;">
<p class="font-body text-sm leading-[1.92]" style="color:rgba(197,197,217,0.65);">
<span class="font-display float-left mr-3" style="font-size:4.2rem;line-height:0.82;color:rgba(201,169,110,0.18);margin-top:0.08em;">D</span>
ear Fellow Visionary,
</p>
<p class="font-body text-sm leading-[1.92]" style="color:rgba(197,197,217,0.65);margin-top:0.6rem;">
When I first conceived of the Dubai Meridian Forum, it was not from a desire to create another conference. It was from a fundamental belief that the problems defining our era — climate finance, regulatory technology, sustainable infrastructure — cannot be solved by any one discipline alone.
</p>
</div>

<p class="font-body text-sm leading-[1.92] mb-7" style="color:rgba(197,197,217,0.65);">
Dubai, the city I call home, taught me that. This is a place built at the convergence of cultures, industries, and ambitions from every corner of the globe — a city that does not ask what is probable, only what is possible. There is no better stage for what we intend to build. No other city so naturally embodies the spirit of refusing the limitations of a single industry, a single language, a single point of view.
</p>
<p class="font-body text-sm leading-[1.92] mb-7" style="color:rgba(197,197,217,0.65);">
Dubai, the city I call home, taught me that. This is a place built at the convergence of cultures, industries, and ambitions from every corner of the globe — a city that does not ask what is probable, only what is possible. There is no better stage for what we intend to build. No other city so naturally embodies the spirit of refusing the limitations of a single industry, a single language, a single point of view.
</p>

<!-- Pull quote -->
<div class="my-9 pl-5" style="border-left:2px solid rgba(201,169,110,0.28);">
Expand Down
41 changes: 35 additions & 6 deletions contact.html
Original file line number Diff line number Diff line change
Expand Up @@ -172,24 +172,24 @@ <h2 class="font-display text-3xl md:text-4xl text-white font-light mb-2" style="
<div class="gold-line mb-8"></div>
<p class="font-body text-white/50 text-sm mb-8 leading-relaxed">Whether you're a prospective participant, potential sponsor, or member of the press, our team responds within 48 hours.</p>

<form class="space-y-5" onsubmit="event.preventDefault();document.getElementById('formOk').classList.remove('hidden');">
<form action="https://formspree.io/f/mykbvjgl" method="POST" class="space-y-6">
<div class="grid md:grid-cols-2 gap-5">
<div>
<label class="block text-white/30 text-[10px] font-body uppercase tracking-wider mb-2">First Name</label>
<input type="text" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white" placeholder="Your first name" required>
<input type="text" name="first_name" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white" placeholder="Your first name" required>
</div>
<div>
<label class="block text-white/30 text-[10px] font-body uppercase tracking-wider mb-2">Last Name</label>
<input type="text" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white" placeholder="Your last name" required>
<input type="text" name="last_name" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white" placeholder="Your last name" required>
</div>
</div>
<div>
<label class="block text-white/30 text-[10px] font-body uppercase tracking-wider mb-2">Email</label>
<input type="email" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white" placeholder="your.email@example.com" required>
<input type="email" name = "email" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white" placeholder="your.email@example.com" required>
</div>
<div>
<label class="block text-white/30 text-[10px] font-body uppercase tracking-wider mb-2">Subject</label>
<select class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white">
<select name="subject" required class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white">
<option value="" style="background:#0d0d2b;">Select a topic</option>
<option value="reg" style="background:#0d0d2b;">Registration Enquiry</option>
<option value="sponsor" style="background:#0d0d2b;">Sponsorship &amp; Partnerships</option>
Expand All @@ -200,14 +200,43 @@ <h2 class="font-display text-3xl md:text-4xl text-white font-light mb-2" style="
</div>
<div>
<label class="block text-white/30 text-[10px] font-body uppercase tracking-wider mb-2">Message</label>
<textarea rows="5" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white resize-none" placeholder="How can we help you?" required></textarea>
<textarea name="message" rows="5" class="form-input w-full px-4 py-3 rounded-sm text-sm font-body text-white resize-none" placeholder="How can we help you?" required></textarea>
</div>
<button type="submit" class="px-10 py-3.5 bg-gold-500/10 border border-gold-500/30 text-gold-400 text-xs uppercase tracking-[0.25em] font-body hover:bg-gold-500/20 hover:border-gold-400 transition-all duration-300 focus-visible:outline-2 focus-visible:outline-gold-400 focus-visible:outline-offset-2 active:scale-[0.98]">
Send Message
</button>
<div id="formOk" class="hidden p-4 rounded-sm border border-gold-500/20 bg-gold-500/5">
<p class="text-gold-400 text-sm font-body">Thank you. Our team will be in touch shortly.</p>
</div>
<script>
const form = document.querySelector("form");
const successMessage = document.getElementById("formOk");

form.addEventListener("submit", async (e) => {
e.preventDefault();

const formData = new FormData(form);

try {
const response = await fetch(form.action, {
method: "POST",
body: formData,
headers: {
'Accept': 'application/json'
}
});

if (response.ok) {
form.reset(); // clear inputs
successMessage.classList.remove("hidden"); // show message
} else {
alert("Something went wrong. Please try again.");
}
} catch (error) {
alert("Network error. Please try again.");
}
});
</script>
</form>
</div>

Expand Down