Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Information | Bharat Tyres</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .contact-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .contact-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); | |
| } | |
| .wave-shape { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave-shape svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 150px; | |
| } | |
| .wave-shape .shape-fill { | |
| fill: #FFFFFF; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="relative w-full max-w-4xl"> | |
| <!-- Wave shape divider at bottom --> | |
| <div class="wave-shape"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| <div class="bg-white rounded-3xl overflow-hidden shadow-2xl"> | |
| <!-- Header Section --> | |
| <div class="bg-blue-600 p-8 text-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-blue-700 opacity-20"></div> | |
| <h1 class="text-4xl font-bold text-white relative z-10">Contact Bharat Tyres</h1> | |
| <p class="text-blue-100 mt-2 relative z-10">We're here to assist you with all your tyre needs</p> | |
| <div class="absolute -bottom-20 -right-20 w-40 h-40 rounded-full bg-blue-400 opacity-20"></div> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-blue-300 opacity-20"></div> | |
| </div> | |
| <!-- Contact Cards Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-8"> | |
| <!-- Phone Card 1 --> | |
| <div class="contact-card bg-white rounded-xl p-6 border-l-4 border-blue-500 flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Primary Contact Number</h3> | |
| <p class="text-gray-600 mt-1">For sales and general inquiries</p> | |
| <a href="tel:8347195666" class="block mt-3 text-blue-600 font-medium text-lg hover:text-blue-800 transition-colors"> | |
| <i class="fas fa-phone-volume mr-2"></i> 8347195666 | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Phone Card 2 --> | |
| <div class="contact-card bg-white rounded-xl p-6 border-l-4 border-green-500 flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-mobile-alt text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Secondary Contact Number</h3> | |
| <p class="text-gray-600 mt-1">For service and support</p> | |
| <a href="tel:8347195777" class="block mt-3 text-green-600 font-medium text-lg hover:text-green-800 transition-colors"> | |
| <i class="fas fa-phone mr-2"></i> 8347195777 | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Email Card --> | |
| <div class="contact-card bg-white rounded-xl p-6 border-l-4 border-purple-500 flex items-start md:col-span-2"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-purple-600 text-xl"></i> | |
| </div> | |
| <div class="w-full"> | |
| <h3 class="font-semibold text-gray-800">Email Address</h3> | |
| <p class="text-gray-600 mt-1">For written inquiries and documentation</p> | |
| <div class="mt-3 flex flex-col sm:flex-row sm:items-center justify-between"> | |
| <a href="mailto:bharattYRE777@outlook.com" class="text-purple-600 font-medium text-lg hover:text-purple-800 transition-colors"> | |
| <i class="fas fa-paper-plane mr-2"></i> bharattYRE777@outlook.com | |
| </a> | |
| <button onclick="copyEmail()" class="mt-2 sm:mt-0 px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-medium hover:bg-purple-200 transition-colors"> | |
| <i class="far fa-copy mr-1"></i> Copy Email | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <div class="bg-blue-50 p-6 text-center rounded-b-3xl"> | |
| <h3 class="text-xl font-semibold text-gray-800">Need immediate assistance?</h3> | |
| <p class="text-gray-600 mt-1">Our team is available during business hours</p> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="tel:8347195666" class="px-6 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition-colors flex items-center pulse-animation"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Now | |
| </a> | |
| <a href="mailto:bharattYRE777@outlook.com" class="px-6 py-3 bg-white text-blue-600 border border-blue-600 rounded-full font-medium hover:bg-blue-50 transition-colors flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> Email Us | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function copyEmail() { | |
| const email = 'bharattYRE777@outlook.com'; | |
| navigator.clipboard.writeText(email).then(() => { | |
| alert('Email copied to clipboard: ' + email); | |
| }).catch(err => { | |
| console.error('Failed to copy email: ', err); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BHARATTYRE/contact" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |