File: /home/durgeshpandey215/public_html/ipsol.skilladders.com/get-in-touch.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
function show_option_course($con){
$courses = "";
$sql = "SELECT * FROM `courses` WHERE `parent_course_id` IS NULL AND delete_status = 'N' ORDER BY `sort_order` ASC";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_assoc($result)){
$courses .= "<option value='".$row['id']."'>" .$row['name']."</option>";
}
return $courses;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact IP Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#2957A4',
navy: '#00062F',
light: '#F5F5F5',
}
},
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'sans-serif'],
heading: ['"Outfit"', 'sans-serif'],
}
}
}
}
</script>
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
h1, h2, h3 { font-family: 'Outfit', sans-serif; }
.contact-pattern {
background-color: #00062F;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232957a4' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.map-container {
filter: grayscale(100%);
transition: filter 0.3s;
}
.map-container:hover {
filter: grayscale(0%);
}
</style>
</head>
<body class="antialiased min-h-screen flex flex-col bg-white">
<?php include 'header_v2.php'; ?>
<!-- Split Hero Section -->
<div class="relative contact-pattern text-white overflow-hidden">
<!-- Decoration -->
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-brand-blue rounded-full opacity-10 blur-3xl -mr-20 -mt-20"></div>
<div class="max-w-[1300px] mx-auto px-4 md:px-8 pt-12 pb-20 md:py-24 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left: Info -->
<div class="space-y-8">
<div>
<span class="inline-block py-1 px-3 rounded border border-blue-500/30 text-blue-300 text-xs font-bold uppercase tracking-wider mb-4">
Mumbai Headquarters
</span>
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Let's Start a <br>Conversation</h1>
<p class="text-lg text-blue-200/80 leading-relaxed max-w-md">
Whether you're looking for course details, placement info, or just advice on your career path, our doors are always open.
</p>
</div>
<div class="space-y-6 pt-8 border-t border-white/10">
<div class="flex items-start gap-5">
<div class="w-12 h-12 rounded bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
<i class="fa fa-map-marker text-xl text-brand-blue"></i>
</div>
<div>
<h3 class="font-bold text-lg">Visit Us</h3>
<p class="text-blue-100/70 text-sm leading-relaxed mt-1">
C-201, Kohinoor Apartment, Above Titan World,<br>
N.C. Kelkar Road, Dadar (W), Mumbai - 400 028
</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="w-12 h-12 rounded bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
<i class="fa fa-phone text-xl text-green-400"></i>
</div>
<div>
<h3 class="font-bold text-lg">Call or WhatsApp</h3>
<p class="text-blue-100/70 text-sm leading-relaxed mt-1">
General: <a href="tel:02246085506" class="hover:text-white transition">022 46085506</a><br>
Direct: <a href="https://wa.me/919820193115" class="hover:text-white transition">+91 9820193115</a>
</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="w-12 h-12 rounded bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
<i class="fa fa-envelope text-xl text-yellow-400"></i>
</div>
<div>
<h3 class="font-bold text-lg">Email Us</h3>
<p class="text-blue-100/70 text-sm leading-relaxed mt-1">
<a href="mailto:info@ipsol.in" class="hover:text-white transition">info@ipsol.in</a>
</p>
</div>
</div>
</div>
</div>
<!-- Right: Form -->
<div class="bg-white rounded-2xl p-8 md:p-10 shadow-2xl shadow-blue-900/50 text-slate-800">
<h2 class="text-2xl font-bold mb-6 text-brand-navy">Send us a Message</h2>
<form action="controller/contact_form.php" method="post" name="form1" onsubmit="return phonenumber(document.form1.number)" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-slate-400 uppercase mb-2">My Name is</label>
<input type="text" name="name" class="w-full border-b-2 border-slate-200 bg-transparent py-2 text-slate-900 font-medium focus:border-brand-blue focus:outline-none transition-colors" placeholder="John Doe" required>
</div>
<div>
<label class="block text-xs font-bold text-slate-400 uppercase mb-2">My Number is</label>
<input type="text" name="number" class="w-full border-b-2 border-slate-200 bg-transparent py-2 text-slate-900 font-medium focus:border-brand-blue focus:outline-none transition-colors" placeholder="9820..." required>
</div>
</div>
<div class="pt-2">
<label class="block text-xs font-bold text-slate-400 uppercase mb-2">Email Address</label>
<input type="email" name="email" class="w-full border-b-2 border-slate-200 bg-transparent py-2 text-slate-900 font-medium focus:border-brand-blue focus:outline-none transition-colors" placeholder="john@example.com" required>
</div>
<div class="grid grid-cols-2 gap-4 pt-2">
<div>
<label class="block text-xs font-bold text-slate-400 uppercase mb-2">Location</label>
<select name="state" class="w-full border-b-2 border-slate-200 bg-transparent py-2 text-slate-900 font-medium focus:border-brand-blue focus:outline-none transition-colors" required>
<option value="">Select...</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Other">Other</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-400 uppercase mb-2">Interest</label>
<select name="course_id" class="w-full border-b-2 border-slate-200 bg-transparent py-2 text-slate-900 font-medium focus:border-brand-blue focus:outline-none transition-colors" required>
<option value="">Select...</option>
<?= show_option_course($con)?>
</select>
</div>
</div>
<div class="pt-2">
<label class="block text-xs font-bold text-slate-400 uppercase mb-2">Message</label>
<textarea name="message" class="w-full border-b-2 border-slate-200 bg-transparent py-2 text-slate-900 font-medium focus:border-brand-blue focus:outline-none transition-colors resize-none" rows="2" placeholder="Hi, I'd like to know about..."></textarea>
</div>
<button type="submit" name="submit" class="w-full mt-6 bg-brand-navy text-white font-bold py-4 rounded-xl hover:bg-blue-800 transition shadow-lg flex items-center justify-center gap-2">
<span>Send Message</span>
<i class="fa fa-arrow-right"></i>
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Full Width Map Section -->
<div class="w-full h-[400px] bg-slate-200 relative map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15087.903968047962!2d72.84288530000002!3d19.020779550000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xbccac7faae84a04f!2sIPsolutions!5e0!3m2!1sen!2sin!4v1415712270900" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
<!-- Floating Info Strip -->
<div class="absolute bottom-6 left-6 bg-white p-4 shadow-lg rounded-lg max-w-sm hidden md:block">
<p class="text-xs font-bold text-slate-400 uppercase mb-1">Office Hours</p>
<p class="text-slate-800 font-medium text-sm">Mon-Sat: 10:00 AM - 7:00 PM</p>
<p class="text-slate-500 text-xs mt-1">Closed on Sundays</p>
</div>
</div>
<?php include 'footer_v2.php'; ?>
<script>
function phonenumber(inputtxt) {
var phoneno = /^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$/;
if(inputtxt.value.match(phoneno)) {
alert("Thank Your Form has been submitted !!!");
return true;
} else {
alert("Not a valid Phone Number");
return false;
}
}
</script>
</body>
</html>