File: /home/durgeshpandey215/www/ipsol.skilladders.com/contact.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
// Helper function for courses (moved from legacy contact_form.php)
function get_course_options($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;
}
$product_quote = isset($_GET['product']) ? htmlspecialchars($_GET['product']) : '';
$default_message = '';
if ($product_quote) {
$default_message = "Hello,\n\nI am interested in requesting a quote for the following product:\n" . $product_quote . "\n\nPlease provide me with pricing and further details.\n\nThank you.";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - IP Solutions</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#2957A4',
dark: '#0B0F19',
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-gray-50 text-slate-800">
<?php include 'header_v2.php'; ?>
<!-- Hero Section -->
<div class="relative bg-[#0B0F19] py-20 lg:py-28 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-[50%] left-1/2 -translate-x-1/2 w-[120%] h-[120%] bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/30 via-[#0B0F19]/0 to-[#0B0F19]/0 blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Let's Start a Conversation</h1>
<p class="text-xl text-slate-400 max-w-2xl mx-auto">Have questions about our courses or need career guidance? We're here to help you navigate your IT journey.</p>
</div>
</div>
<!-- Contact Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-16 relative z-20 pb-20">
<div class="grid lg:grid-cols-3 gap-8">
<!-- Contact Info Panel -->
<div class="lg:col-span-1 space-y-6">
<!-- Info Card -->
<div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
<h3 class="text-xl font-bold text-gray-900 mb-6">Contact Information</h3>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-[#2957A4] shrink-0">
<i class="fa fa-map-marker text-lg"></i>
</div>
<div>
<h4 class="font-bold text-gray-900">Visit Us</h4>
<p class="text-gray-600 text-sm mt-1 leading-relaxed">
10, Varkana Bhavan, Bhawani Shankar Road,<br>
Opp: Kabutar Khana, Dadar-West,<br>
Mumbai-400028, India
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-[#2957A4] shrink-0">
<i class="fa fa-phone text-lg"></i>
</div>
<div>
<h4 class="font-bold text-gray-900">Call Us</h4>
<p class="text-gray-600 text-sm mt-1">
<a href="tel:02246085506" class="block hover:text-[#2957A4] transition">022 46085506</a>
<a href="tel:9820193115" class="block hover:text-[#2957A4] transition">9820193115 (Whatsapp)</a>
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-[#2957A4] shrink-0">
<i class="fa fa-envelope text-lg"></i>
</div>
<div>
<h4 class="font-bold text-gray-900">Email Us</h4>
<a href="mailto:info@ipsol.in" class="text-gray-600 text-sm mt-1 hover:text-[#2957A4] transition">info@ipsol.in</a>
</div>
</div>
</div>
<!-- Socials -->
<div class="mt-8 pt-8 border-t border-gray-100">
<h4 class="text-sm font-bold text-gray-900 mb-4">Follow Us</h4>
<div class="flex gap-3">
<a href="https://www.facebook.com/IPSolutionsIndia/" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-[#3b5998] hover:text-white flex items-center justify-center transition text-gray-400"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/ipsolin" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-[#1da1f2] hover:text-white flex items-center justify-center transition text-gray-400"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/ipsolutionscisco/" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-[#c32aa3] hover:text-white flex items-center justify-center transition text-gray-400"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Map Card -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 h-64 lg:h-80">
<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!1s0x3be7cedb4e4a416b%3A0xa4d7ba09183deb04!2sVarkana%20Bhavan!5e0!3m2!1sen!2sin!4v1415712270900" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen></iframe>
</div>
</div>
<!-- Contact Form -->
<div class="lg:col-span-2">
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-12 border border-gray-100">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Send us a Message</h2>
<p class="text-gray-500 mb-8">Fill out the form below and our team will get back to you within 24 hours.</p>
<form action="controller/contact_form.php" method="post" name="form1" onSubmit="return validateForm(this);" class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
<input type="text" name="name" id="name" placeholder="John Doe" class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 focus:bg-white focus:border-[#2957A4] focus:ring-2 focus:ring-blue-100 transition outline-none" required>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
<input type="email" name="email" id="email" placeholder="john@example.com" class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 focus:bg-white focus:border-[#2957A4] focus:ring-2 focus:ring-blue-100 transition outline-none" required>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="number" class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
<input type="text" name="number" id="number" placeholder="+91 98765 43210" class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 focus:bg-white focus:border-[#2957A4] focus:ring-2 focus:ring-blue-100 transition outline-none" required>
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 mb-2">State</label>
<div class="relative">
<select name="state" id="state" class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 focus:bg-white focus:border-[#2957A4] focus:ring-2 focus:ring-blue-100 transition outline-none appearance-none" required>
<option value="">Select State</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
</div>
<div>
<label for="course_id" class="block text-sm font-medium text-gray-700 mb-2">Interested Course (Optional)</label>
<div class="relative">
<select name="course_id" id="course_id" class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 focus:bg-white focus:border-[#2957A4] focus:ring-2 focus:ring-blue-100 transition outline-none appearance-none">
<option value="">Select Course (Optional)</option>
<?= get_course_options($con) ?>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
<textarea name="message" id="message" rows="4" placeholder="How can we help you?" class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 focus:bg-white focus:border-[#2957A4] focus:ring-2 focus:ring-blue-100 transition outline-none resize-none" required><?= $default_message ?></textarea>
</div>
<!-- <div class="g-recaptcha " data-sitekey="6Lcd98kUAAAAAEG0lbh4BuBCVQgZnFjZwsJ9DFY7"></div> -->
<button type="submit" name="submit" class="w-full py-4 px-6 rounded-xl bg-[#2957A4] hover:bg-blue-800 text-white font-bold text-lg shadow-lg hover:shadow-blue-500/30 transition transform hover:-translate-y-0.5">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
<?php include 'footer_v2.php'; ?>
<script>
function validateForm(form) {
var phoneno = /^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$/;
if(form.number.value.match(phoneno)) {
return true;
} else {
alert("Please enter a valid Phone Number");
return false;
}
}
</script>
</body>
</html>