dwd.siliconpin_php/.hta_slug/_home.php

<?php 
    require_once('.htac_header.php');
    require_once('.htac_nav.php');
	$web_page_title = 'DWD Siliconpin | Homepage.';
	$web_page_meta_title = 'Keeping your Data Resilient.';
    $web_page_meta_description = 'We provide ready to use hardware with preset software [with full freedom and ownership no stings attached] Paid Support for FOSS, with customized development. Data migration and recovery services.';
    $web_page_meta_keywords = '';
    $web_page_meta_author = '';
    $web_page_meta_og_title = 'DWD Siliconpin | Homepage';
    $web_page_meta_og_description = 'Keeping your Data Resilient.';
    $web_page_meta_og_image = '';
    $web_page_meta_og_url = '';
    $web_page_meta_twitter_title = '';
    $web_page_meta_twitter_description = '';
    $web_page_meta_twitter_image = '';
    $web_page_meta_twitter_card = '';
?>
<div class="">
	<section class="diZContainer diZmxAuto">
		<div class="">
			<div class="">
				<h2>DWD Consultancy Services</h2>
				<p>Keeping your data resilient.</p>
				<p>
					<ul>
						<li> We provide ready to use hardware with preset software [with full freedom and ownership no stings attached]</li>
						<li> Paid Support for FOSS, with customized development. </li>
						<li> Data migration and recovery services. </li>
					</ul>
					<br>
					<button onclick="d.showModal()" class="">Get in Touch</button>
				</p>
			</div>
			<div class="">
				<!-- <Clock /> -->
			</div>
		</div>
		<!-- <p class="text-center text-6xl font-bold py-72">Work In Progress</p> -->
	</section>
	<section class="">
		<div>
			<dialog id="d" class="">
				<div>
				<div class="diZFlexRow diZFlexBetween diZItemsCenter">
					<h2 class="">Get In Touch</h2>
					<form method="dialog"><button class="">&#10008</button></form>
				</div>
					<form id="contactForm" >
						<div id="formSection">
							<div class="diZFlexColumn">
								<label for="name">Name:</label>
								<input name="name" id="name" type="text" placeholder="Your Name" required/>
							</div>
							<div class="diZFlexColumn">
								<label for="email">E-mail:</label>
								<input name="email" id="email" type="email" placeholder="Ex: example@email.com" required/>
							</div>
							<div class="diZFlexColumn">
								<label for="mobile">Mobile: <span class="text-xs">(with country code)</span></label>
								<input name="mobile" id="mobile" type="text" placeholder="Ex: +91 0123456789" />
							</div>
							<div class="diZFlexColumn">
								<label for="content">Message:</label>
								<textarea name="content" id="content" cols="34" rows="8" placeholder="Write your Message..." required></textarea>
							</div>
							<div class="flex flex-col mt-4">
								<input type="submit" value="Submit" class="" />
							</div>
						</div>
						<div id="thankYouSection" style="display: none;">
							<p class="">Thank You!</p>
						</div>
					</form>
				</div>
				</div>
			</dialog>
		</div>
	</section>
	<!-- <section class="container mx-auto px-4 mt-16">
		<div class="ourTeamcontainer">
			<h1 class="text-center text-2xl md:text-4xl font-bold pt-6"><span class="text-[#05b3a4]">O</span>ur Team</h1>
			<div class="row">
				<div class="card" style="--bc: #8E9792;--btn: #8E9792;">
				<img src="https://i.ibb.co/dK3Z1LC/1-XMKyvw-IXm-I7.jpg" alt="*">
				<h2>Dildar</h2>
				<p class="role">Creative Leader</p>
				<p>dildar@mail.com</p>
				<a href="tel:+880123456789">Call</a>
				</div>
				<div class="card" style="--bc: #C89F9C;--btn: #C89F9C;">
				<img src="https://i.ibb.co/zb85xJn/2144735x-Tx-FT0v-G.jpg" alt="*">
				<h2>Misha</h2>
				<p class="role">Sales Manager</p>
				<p>misha@mail.com</p>
				<a href="tel:+880123456789">Call</a>
				</div>
				<div class="card" style="--bc: #15307D;--btn: #15307D;">
				<img src="https://i.ibb.co/cb9FPPw/2144934-Gz-Znk-I7-L.jpg" alt="*">
				<h2>Dipjol</h2>
				<p class="role">Web Developer</p>
				<p>dipjol@mail.com</p>
				<a href="tel:+880123456789">Call</a>
				</div>
			</div>
			</div>
	</section> -->
</div>



<script is:inline>
    document.addEventListener('DOMContentLoaded', function () {
        const contactForm = document.getElementById('contactForm');
        const formSection = document.getElementById('formSection');
        const thankYouSection = document.getElementById('thankYouSection');
        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        const phoneInput = document.getElementById('mobile');
        const contentInput = document.getElementById('content');

        contactForm.addEventListener('submit', async function (event) {
        event.preventDefault();

        const formData = {
            name: nameInput.value,
            email: emailInput.value,
            phone: phoneInput.value,
            content: contentInput.value,
            form_name: "DWD SiliconPin - (Homepage)",
        };
        console.log("Form Data", formData)
        const url = 'https://api8.siliconpin.com/items/contact';
        try {
            const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
            });
            if (response.ok) {
            // console.log('Form data submitted successfully');
            formSection.style.display = 'none';
            thankYouSection.style.display = 'block';
            } else {
            console.error('Failed to submit form data');
            }
        } catch (error) {
            console.error('An error occurred:', error);
        }
        });
    });
</script>