Hugging Face's logo

Spaces:
BHARATTYRE
/
contact
Running

App Files Community
contact
File size: 7,978 Bytes
c066e72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<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>