146 lines
10 KiB
PHP
146 lines
10 KiB
PHP
<?php
|
||
require_once('.htac_header.php');
|
||
require_once('.htac_nav.php');
|
||
?>
|
||
<div>
|
||
<section class="container-fluid bg-gradient-to-t from-white to-[#05b3a420] h-fit shadow">
|
||
<div class="container mx-auto px-4 flex flex-col md:flex-row place-content-between place-items-center">
|
||
<div class="flex flex-col justify-center place-items-start">
|
||
<p class="text-5xl font-bold text-center"><span class="text-[#05b3a4]">D</span>WD <span class="text-[#05b3a4]">C</span>onsultancy <span class="text-[#05b3a4]">S</span>ervices</p>
|
||
<button onclick="d.showModal()" class="bg-[#05b3a4] w-fit px-6 py-2 rounded-tl-full rounded-br-full hover:shadow-xl hover:scale-105 duration-700 text-white font-bold">Get in Touch</button>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<img class="" src="/img/motherboard1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 mt-10">
|
||
<h1 class="text-3xl font-bold text-center py-16">PC Configuration for AI_Server</h1>
|
||
<div class="flex flex-col lg:flex-row place-content-center gap-6 ">
|
||
<div class="flex flex-col">
|
||
<model-viewer id="computer_model" class="computerwidth computerborder bg-[#05b3a430]" src="/img/computer_light_pc.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="/img/poster.png" shadow-intensity="1" camera-target="-2.135m 1.38m 0.17m" camera-orbit="88deg 85deg 8.99m" field-of-view="30deg">
|
||
<div class="progress-bar hide" slot="progress-bar">
|
||
<div class="update-bar"></div>
|
||
</div>
|
||
<!-- <div class="inline-flex" id="ar-prompt">
|
||
<img src="https://modelviewer.dev/shared-assets/icons/hand.png" />
|
||
<button class="-mt-2" slot="ar-button" id="ar-button">View in your space</button>
|
||
</div> -->
|
||
</model-viewer>
|
||
|
||
<!-- <img class="rounded-lg " src="/img/computer.jpg" alt="" /> -->
|
||
<!-- <model-viewer class="computerwidth computerborder w-full" id="aicomputer_model" camera-controls touch-action="pan-x" animation-name="Dance" ar ar-modes="webxr scene-viewer" scale="1 1 1" shadow-intensity="1" src="/img/computer_light_pc.glb" alt="AI Server Computer Setup"></model-viewer> -->
|
||
|
||
</div>
|
||
<div class="flex flex-col gap-4">
|
||
<p class="text-3xl font-bold ">Price 1,40,000.00/- Only</p>
|
||
<p><b>Processors:</b> <span>Intel® i5 Processors</span></p>
|
||
<p><b>RAM:</b><span> 64GB RAM</span></p>
|
||
<p><b>Graphics Card:</b><span> 8GB Nvidia Graphics Card</span></p>
|
||
<div class="flex"><button class="w-full py-3 text-2xl text-white hover:text-[#05b3a4] bg-[#05b3a4] hover:bg-gray-900 rounded-xl hover:scale-105 duration-700 hover:shadow-lg">Buy Now</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-10">
|
||
<h1 class="text-2xl font-bold pb-1">What is AI Server?</h1>
|
||
<p class="text-justify py-1">Think about AI (Artificial Intelligence) as a brain – a super-smart brain that can learn from information and make decisions just like humans do. Now, imagine this brain needs a special place to live, think, and process all that information. That's where AI servers come into play.</p>
|
||
<p class="text-justify py-1">An AI server is like a high-tech workshop for the AI brain. It's a powerful computer that's designed to handle really complex tasks, just like how a super-smart scientist might need a fancy lab to conduct experiments.</p>
|
||
<p class="text-justify py-1">You see, AI is hungry for data. It needs lots of information to learn and become smart. It's like teaching a pet – the more you show it, the better it gets at understanding things. So, you load up the AI server with tons of data, like pictures, texts, or even voices, depending on what the AI is learning to do.</p>
|
||
<p class="text-justify py-1">But here's the cool part: AI servers aren't just good at storing and reading data. They're amazing at processing it lightning-fast. Imagine if you asked a question, and instead of waiting a minute for an answer, you got one in a split second – that's what AI servers can do.</p>
|
||
<p class="text-justify py-1">Let's say you're using a language translation app. When you type in a sentence, the AI server takes that text, breaks it down, figures out what language it's in, and then spits out a translated version, all in a blink of an eye. It's like having a language genius right there in your device!</p>
|
||
<p class="text-justify py-1">AI servers are also super adaptable. They can learn new things over time, just like you do. If you keep showing an AI server pictures of cats, it starts recognizing them without you having to explain every time. It's like having a friend who learns your preferences and remembers them.</p>
|
||
<p class="text-justify py-1">Now, you might wonder why we don't just use regular computers for this. Well, AI servers are like supercharged versions of regular computers. They're designed with special components that make them lightning-fast at crunching AI-related tasks. It's like having a sports car for your AI brain instead of a regular sedan.</p>
|
||
<p class="text-justify py-1">So, to sum it all up, an AI server is like a super-smart workshop that houses and powers the brain of AI. It's a place where the AI can learn, think, and process information at incredible speeds, making it possible for us to use AI in all sorts of clever and helpful ways – from language translation to recognizing faces in photos!</p>
|
||
</div>
|
||
</section>
|
||
<section class="">
|
||
<div>
|
||
<dialog id="d" class=" rounded-lg">
|
||
<div>
|
||
<div style="display: flex; flex-direction: row; justify-content: space-between; border-bottom: 6px solid #05b3a4; padding-bottom: 0px; align-items: center;">
|
||
<h2 class="text-3xl font-bold text-[#05b3a4]">Get In Touch</h2>
|
||
<form method="dialog"><button class="text-3xl text-[#05b3a4] bg-[#05b3a410] hover:bg-[#05b3a450] duration-700 rounded-full px-1">✘</button></form>
|
||
</div>
|
||
<form id="contactForm" style="display: flex; flex-direction: column; margin-bottom: 6px; margin-top: 6px;">
|
||
<div id="formSection">
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label for="name">Name:</label>
|
||
<input name="name" id="name" type="text" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Your Name" required/>
|
||
</div>
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label for="email">E-mail:</label>
|
||
<input name="email" id="email" type="email" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Ex: example@email.com" required/>
|
||
</div>
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label for="mobile">Mobile: <span class="text-xs">(with country code)</span></label>
|
||
<input name="mobile" id="mobile" type="text" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Ex: +91 0123456789" />
|
||
</div>
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label for="content">Message:</label>
|
||
<textarea name="content" id="content" cols="34" rows="8" style="border: 2px solid #05b3a480; border-radius: 10px; padding: 10px;" placeholder="Write your Message..." required></textarea>
|
||
</div>
|
||
<div class="flex flex-col mt-4">
|
||
<input type="submit" value="Submit" class="bg-[#05b3a4] cursor-pointer rounded-md p-1.5 text-white font-bold" />
|
||
</div>
|
||
</div>
|
||
<div id="thankYouSection" style="display: none;">
|
||
<p class="text-3xl text-center font-bold p-20 sm:p-24 h-full">Thank You!</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<script is:inline>
|
||
// const modelViewer = document.getElementById('computer_model');
|
||
// modelViewer.addEventListener('click', function() {
|
||
// if (modelViewer.paused) {
|
||
// modelViewer.play();
|
||
// // modelViewer.style.backgroundColor = "#05b3a4"
|
||
// } else {
|
||
// modelViewer.pause();
|
||
// }
|
||
// });
|
||
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 - (AI - Server Page)",
|
||
};
|
||
// 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>
|