Hugging Face's logo

Spaces:
webwizards
/
testing-conversion
Running

App Files Community
testing-conversion
File size: 17,004 Bytes 
4c72fef
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ATG Carpentry - Quality Carpentry Services</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>
        .gold-gradient {
            background: linear-gradient(135deg, #D4AF37 0%, #F9D423 100%);
        }
        .gold-text-gradient {
            background: linear-gradient(135deg, #D4AF37 0%, #F9D423 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .nav-link:hover {
            color: #D4AF37 !important;
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .hero-section {
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="font-sans bg-white text-gray-900">
    <!-- Header/Navigation -->
    <header class="bg-gray-900 text-white shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a href="index.html" class="text-2xl font-bold">
                    <span class="gold-text-gradient">ATG</span> <span class="text-white">CARPENTRY</span>
                </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-8">
                <nav>
                    <ul class="flex space-x-8">
                        <li><a href="index.html" class="nav-link text-white hover:text-yellow-500 transition">Home</a></li>
                        <li><a href="about.html" class="nav-link text-white hover:text-yellow-500 transition">About</a></li>
                        <li class="relative group">
                            <a href="#" class="nav-link text-white hover:text-yellow-500 transition flex items-center">
                                Services <i class="fas fa-chevron-down ml-1 text-xs"></i>
                            </a>
                            <div class="absolute left-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-2 z-50 hidden group-hover:block">
                                <a href="decking.html" class="block px-4 py-2 text-white hover:bg-gray-700">Decking</a>
                                <a href="home-renovations.html" class="block px-4 py-2 text-white hover:bg-gray-700">Home Renovations</a>
                                <a href="outdoor-living.html" class="block px-4 py-2 text-white hover:bg-gray-700">Outdoor Living</a>
                                <a href="cladding.html" class="block px-4 py-2 text-white hover:bg-gray-700">Cladding</a>
                                <a href="roofing-structural-repairs.html" class="block px-4 py-2 text-white hover:bg-gray-700">Roofing & Structural Repairs</a>
                                <a href="interior-carpentry.html" class="block px-4 py-2 text-white hover:bg-gray-700">Interior Carpentry</a>
                            </div>
                        </li>
                        <li><a href="testimonials.html" class="nav-link text-white hover:text-yellow-500 transition">Testimonials</a></li>
                        <li><a href="contact.html" class="nav-link text-white hover:text-yellow-500 transition">Contact</a></li>
                    </ul>
                </nav>
                <div class="flex items-center ml-4">
                    <a href="tel:0420345645" class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-full flex items-center transition">
                        <i class="fas fa-phone mr-2 text-yellow-500"></i> 0420 345 645
                    </a>
                </div>
            </div>
            
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-white focus:outline-none">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-gray-800 pb-4">
            <div class="container mx-auto px-4">
                <a href="index.html" class="block py-2 text-white border-b border-gray-700">Home</a>
                <a href="about.html" class="block py-2 text-white border-b border-gray-700">About</a>
                <div class="py-2 border-b border-gray-700">
                    <button id="services-dropdown-button" class="flex justify-between items-center w-full text-white">
                        <span>Services</span>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div id="services-dropdown" class="hidden pl-4 pt-2">
                        <a href="decking.html" class="block py-2 text-gray-300">Decking</a>
                        <a href="home-renovations.html" class="block py-2 text-gray-300">Home Renovations</a>
                        <a href="outdoor-living.html" class="block py-2 text-gray-300">Outdoor Living</a>
                        <a href="cladding.html" class="block py-2 text-gray-300">Cladding</a>
                        <a href="roofing-structural-repairs.html" class="block py-2 text-gray-300">Roofing & Structural Repairs</a>
                        <a href="interior-carpentry.html" class="block py-2 text-gray-300">Interior Carpentry</a>
                    </div>
                </div>
                <a href="testimonials.html" class="block py-2 text-white border-b border-gray-700">Testimonials</a>
                <a href="contact.html" class="block py-2 text-white border-b border-gray-700">Contact</a>
                <a href="tel:0420345645" class="block py-2 text-white mt-2 flex items-center">
                    <i class="fas fa-phone mr-2 text-yellow-500"></i> 0420 345 645
                </a>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-section text-white py-20 md:py-32">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">Quality Carpentry Services</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Professional carpentry services for residential and commercial projects across the region.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="contact.html" class="gold-gradient text-gray-900 font-bold px-8 py-3 rounded-full hover:opacity-90 transition">Get a Free Quote</a>
                <a href="tel:0420345645" class="bg-transparent border-2 border-white text-white font-bold px-8 py-3 rounded-full hover:bg-white hover:text-gray-900 transition">Call Now</a>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Services</h2>
                <div class="w-20 h-1 gold-gradient mx-auto"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Decking -->
                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Decking" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Decking</h3>
                        <p class="text-gray-600 mb-4">Beautiful and durable decking solutions to enhance your outdoor living space.</p>
                        <a href="decking.html" class="text-gold-500 font-semibold hover:underline">Learn More</a>
                    </div>
                </div>
                
                <!-- Home Renovations -->
                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Home Renovations" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Home Renovations</h3>
                        <p class="text-gray-600 mb-4">Transform your home with our expert renovation services tailored to your needs.</p>
                        <a href="home-renovations.html" class="text-gold-500 font-semibold hover:underline">Learn More</a>
                    </div>
                </div>
                
                <!-- Outdoor Living -->
                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <img src="https://images.unsplash.com/photo-1583845112208-9ffdb1b6f78a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Outdoor Living" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Outdoor Living</h3>
                        <p class="text-gray-600 mb-4">Create your perfect outdoor oasis with our custom outdoor living solutions.</p>
                        <a href="outdoor-living.html" class="text-gold-500 font-semibold hover:underline">Learn More</a>
                    </div>
                </div>
                
                <!-- Cladding -->
                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cladding" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Cladding</h3>
                        <p class="text-gray-600 mb-4">High-quality cladding solutions to protect and beautify your property.</p>
                        <a href="cladding.html" class="text-gold-500 font-semibold hover:underline">Learn More</a>
                    </div>
                </div>
                
                <!-- Roofing & Structural Repairs -->
                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Roofing and Structural Repairs" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Roofing & Structural Repairs</h3>
                        <p class="text-gray-600 mb-4">Expert repairs to ensure the structural integrity and safety of your property.</p>
                        <a href="roofing-structural-repairs.html" class="text-gold-500 font-semibold hover:underline">Learn More</a>
                    </div>
                </div>
                
                <!-- Interior Carpentry -->
                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Interior Carpentry" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Interior Carpentry</h3>
                        <p class="text-gray-600 mb-4">Custom interior carpentry solutions to enhance your living spaces.</p>
                        <a href="interior-carpentry.html" class="text-gold-500 font-semibold hover:underline">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
                    <img src="https://images.unsplash.com/photo-1600585152915-d208b90e3d1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About ATG Carpentry" class="rounded-lg shadow-lg w-full">
                </div>
                <div class="lg:w-1/2">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">About ATG Carpentry</h2>
                    <div class="w-20 h-1 gold-gradient mb-6"></div>
                    <p class="text-gray-700 mb-4">ATG Carpentry is a family-owned business with over 15 years of experience in the carpentry industry. We take pride in delivering high-quality craftsmanship and exceptional customer service.</p>
                    <p class="text-gray-700 mb-6">Our team of skilled carpenters are dedicated to bringing your vision to life, whether it's a small repair or a large-scale renovation project.</p>
                    <div class="space-y-4 mb-8">
                        <div class="flex items-start">
                            <div class="gold-gradient rounded-full p-2 mr-4">
                                <i class="fas fa-check text-white"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Quality Materials</h4>
                                <p class="text-gray-600">We use only the highest quality materials for all our projects.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="gold-gradient rounded-full p-2 mr-4">
                                <i class="fas fa-check text-white"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Experienced Team</h4>
                                <p class="text-gray-600">Our carpenters have years of experience and training.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="gold-gradient rounded-full p-2 mr-4">
                                <i class="fas fa-check text-white"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Customer Satisfaction</h4>
                                <p class="text-gray-600">Your satisfaction is our top priority.</p>
                            </div>
                        </div>
                    </div>
                    <a href="about.html" class="gold-gradient text-gray-900 font-bold px-6 py-2 rounded-full inline-block hover:opacity-90 transition">Learn More About Us</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2>
                <div class="w-20 h-1 gold-gradient mx-auto"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-
<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=webwizards/testing-conversion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>