Hugging Face's logo

Spaces:
brtapardi
/
dreambuild-constructors
Running

App Files Community
brtapardi commited on
Commit
7a9052d
·
verified ·
1 Parent(s): 14d0955

Siteyi geliştirelim

Browse files
Files changed (1) hide show
  1. index.html +494 -129
index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -8,11 +9,14 @@
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://unpkg.com/feather-icons"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
 
11
  <style>
12
  .hero-bg {
13
  background-image: url('https://birbeninsaat.com/wp-content/uploads/2025/05/AdobeStock_286096432-scaled-1.jpeg');
14
  background-size: cover;
15
  background-position: center;
 
16
  }
17
  .service-card:hover {
18
  transform: translateY(-5px);
@@ -24,179 +28,387 @@
24
  .testimonial-card:hover {
25
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </style>
28
  </head>
29
  <body class="font-sans antialiased text-gray-800">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  <!-- Navigation -->
31
- <nav class="bg-white shadow-md sticky top-0 z-50">
32
- <div class="container mx-auto px-6 py-3">
33
  <div class="flex justify-between items-center">
34
- <div class="text-2xl font-bold" style="color: #0D3B66">BİRBEN İNŞAAT</div>
35
- <div class="hidden md:flex space-x-8">
36
- <a href="#" class="text-blue-800 font-medium hover:text-blue-600">Ana Sayfa</a>
37
- <a href="#" class="text-gray-600 hover:text-blue-800">Hizmetlerimiz</a>
38
- <a href="#" class="text-gray-600 hover:text-blue-800">Projelerimiz</a>
39
- <a href="#" class="text-gray-600 hover:text-blue-800">Hakkımızda</a>
40
- <a href="#" class="text-gray-600 hover:text-blue-800">İletişim</a>
 
 
41
  </div>
42
  <div class="md:hidden">
43
- <button class="text-gray-600">
44
  <i data-feather="menu"></i>
45
  </button>
46
  </div>
47
  </div>
48
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </nav>
50
-
51
  <!-- Hero Section -->
52
- <section class="hero-bg h-screen flex items-center relative">
53
- <div class="absolute inset-0 bg-black bg-opacity-40"></div>
54
  <div class="container mx-auto px-6 relative z-10 text-white">
55
- <h1 class="text-4xl md:text-6xl font-bold mb-6">Hayalindeki Eve Sahip Ol</h1>
56
- <p class="text-xl md:text-2xl mb-8 max-w-2xl">Modern mimari anlayışıyla sürdürülebilir ve estetik çözümler sunuyoruz.</p>
57
- <button class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
58
- Projelerimizi İncele
59
- </button>
 
 
 
 
 
 
 
 
 
 
60
  </div>
61
  </section>
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <!-- Services Section -->
64
- <section class="py-20 bg-gray-50">
65
  <div class="container mx-auto px-6">
66
- <h2 class="text-3xl font-bold text-center mb-16" style="color: #0D3B66">Hizmetlerimiz</h2>
67
- <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto mb-16">
68
- İnşaatın her aşamasında güven, kalite ve estetiği bir araya getiren kapsamlı hizmetler sunuyoruz.
69
- </p>
 
 
70
 
71
  <div class="grid md:grid-cols-3 gap-10">
72
  <!-- Service 1 -->
73
- <div class="service-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300">
74
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/06/AdobeStock_214958121-scaled.jpeg" alt="Kentsel Dönüşüm" class="w-full h-48 object-cover">
 
 
 
75
  <div class="p-6">
76
- <h3 class="text-xl font-bold mb-3" style="color: #0D3B66">Kentsel Dönüşüm Hizmetleri</h3>
77
- <p class="text-gray-600">
 
 
 
78
  Deprem yönetmeliğine uygun, güvenli ve modern yaşam alanları inşa ediyoruz. Mevcut yapıları analiz ederek, yerine dayanıklı ve estetik binalar kazandırıyoruz.
79
  </p>
80
  </div>
81
  </div>
82
 
83
  <!-- Service 2 -->
84
- <div class="service-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300">
85
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/06/AdobeStock_297495776-scaled.jpeg" alt="Yeni Nesil Mimari" class="w-full h-48 object-cover">
 
 
 
86
  <div class="p-6">
87
- <h3 class="text-xl font-bold mb-3" style="color: #0D3B66">Yeni Nesil Mimari Projeler</h3>
88
- <p class="text-gray-600">
 
 
 
89
  Konut, ofis, ticari yapı ve karma projelerde modern mimari yaklaşımlar sunuyoruz. Estetik, fonksiyonellik ve kullanıcı konforunu ön planda tutuyoruz.
90
  </p>
91
  </div>
92
  </div>
93
 
94
  <!-- Service 3 -->
95
- <div class="service-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300">
96
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/06/AdobeStock_324305882-scaled.jpeg" alt="Proje Yönetimi" class="w-full h-48 object-cover">
 
 
 
97
  <div class="p-6">
98
- <h3 class="text-xl font-bold mb-3" style="color: #0D3B66">Proje ve Uygulama Yönetimi</h3>
99
- <p class="text-gray-600">
 
 
 
100
  İnşaat sürecinin tüm aşamalarını planlıyor, takip ediyor ve yönetiyoruz. Zamanında teslim, maliyet kontrolü ve kalite standartlarına bağlılıkla çalışıyoruz.
101
  </p>
102
  </div>
103
  </div>
104
- </div>
105
  </div>
106
  </section>
107
-
108
  <!-- Our Story Section -->
109
- <section class="py-20 bg-white">
110
  <div class="container mx-auto px-6">
111
  <div class="flex flex-col md:flex-row items-center">
112
- <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
113
- <h2 class="text-3xl font-bold mb-6" style="color: #0D3B66">Hikayemiz...</h2>
114
- <p class="text-gray-600 mb-4">
115
- 2004 yılında kaliteli, güvenilir ve sürdürülebilir yapılar inşa etme hedefiyle yola çıktık. Kurulduğumuz günden bu yana, hem kentsel dönüşüm projelerinde hem de modern mimari yapılarda imzamızı gururla taşıyoruz.
116
- </p>
117
- <p class="text-gray-600">
118
- Tecrübemizi teknolojiyle birleştirerek, şehirlerin dönüşümüne katkı sağlıyor, her projede insan odaklı ve estetik çözümler sunuyoruz.
119
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  </div>
121
- <div class="md:w-1/2">
122
- <img src="https://static.photos/construction/1200x630/1" alt="Construction Site" class="rounded-lg shadow-xl">
 
 
 
 
 
 
123
  </div>
124
  </div>
125
  </div>
126
  </section>
127
-
128
  <!-- Quality Section -->
129
- <section class="py-20 bg-gray-100">
130
- <div class="container mx-auto px-6">
131
- <h2 class="text-3xl font-bold text-center mb-16" style="color: #0D3B66">Kalitemiz...</h2>
132
- <div class="grid md:grid-cols-3 gap-8">
133
- <div class="bg-white p-6 rounded-lg shadow-md text-center">
134
- <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
135
- <i data-feather="award" class="text-blue-700 w-8 h-8"></i>
136
- </div>
137
- <h3 class="text-xl font-bold mb-3" style="color: #0D3B66">Deneyim ve Güven</h3>
138
- <p class="text-gray-600">
139
- 2004 yılından bu yana edindiğimiz tecrübeyle, her projeyi zamanında ve güvenle tamamlıyoruz.
140
  </p>
141
  </div>
142
-
143
- <div class="bg-white p-6 rounded-lg shadow-md text-center">
144
- <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
145
- <i data-feather="tool" class="text-blue-700 w-8 h-8"></i>
 
 
 
 
 
146
  </div>
147
- <h3 class="text-xl font-bold mb-3" style="color: #0D3B66">Kaliteli İşçilik</h3>
148
- <p class="text-gray-600">
149
- Malzeme seçiminden uygulamaya kadar tüm süreçlerde yüksek kalite standartlarıyla çalışıyoruz.
150
- </p>
151
- </div>
152
-
153
- <div class="bg-white p-6 rounded-lg shadow-md text-center">
154
- <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
155
- <i data-feather="layout" class="text-blue-700 w-8 h-8"></i>
 
 
 
 
 
 
 
 
 
 
156
  </div>
157
- <h3 class="text-xl font-bold mb-3" style="color: #0D3B66">Modern Tasarımlar</h3>
158
- <p class="text-gray-600">
159
- Estetik, konfor ve kullanım kolaylığını bir araya getiren yapılar inşa ediyoruz.
160
- </p>
161
  </div>
162
  </div>
163
  </div>
164
  </section>
165
-
166
  <!-- Projects Section -->
167
- <section class="py-20 bg-white">
168
  <div class="container mx-auto px-6">
169
- <h2 class="text-3xl font-bold text-center mb-16" style="color: #0D3B66">Biten Projelerimiz...</h2>
170
- <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto mb-16">
171
- Hayata geçirdiğimiz projelerle gurur duyuyoruz; işte tamamladığımız bazı örnekler.
172
- </p>
 
 
173
 
174
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
175
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.18.52.jpeg" alt="Project 1" class="rounded-lg shadow-md hover:shadow-xl transition duration-300">
176
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.18.50.jpeg" alt="Project 2" class="rounded-lg shadow-md hover:shadow-xl transition duration-300">
177
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.18.49.jpeg" alt="Project 3" class="rounded-lg shadow-md hover:shadow-xl transition duration-300">
178
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.17.59.jpeg" alt="Project 4" class="rounded-lg shadow-md hover:shadow-xl transition duration-300">
179
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.17.58-1.jpeg" alt="Project 5" class="rounded-lg shadow-md hover:shadow-xl transition duration-300">
180
- <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.17.58.jpeg" alt="Project 6" class="rounded-lg shadow-md hover:shadow-xl transition duration-300">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  </div>
182
  </div>
183
  </section>
184
-
185
  <!-- Testimonials Section -->
186
  <section class="py-20 bg-gray-50">
187
  <div class="container mx-auto px-6">
188
- <h2 class="text-3xl font-bold text-center mb-16" style="color: #0D3B66">Memnun Müşteri Yorumları</h2>
189
- <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto mb-16">
190
- 2004 Yılından beri birlikte çalıştığımız değerli müşterilerimizin memnuniyeti, işimize duyduğumuz güvenin en büyük göstergesidir.
191
- </p>
 
 
192
 
193
  <div class="grid md:grid-cols-3 gap-8">
194
  <!-- Testimonial 1 -->
195
- <div class="testimonial-card bg-white p-8 rounded-lg shadow-md">
196
  <div class="flex items-center mb-4">
197
  <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/testimonials2-150x150-1-1.jpg" alt="Ayşe K." class="w-16 h-16 rounded-full mr-4">
198
  <div>
199
- <h4 class="font-bold text-blue-800">Ayşe K., İstanbul</h4>
 
 
 
 
 
 
 
200
  </div>
201
  </div>
202
  <p class="text-gray-600 italic">
@@ -205,11 +417,18 @@
205
  </div>
206
 
207
  <!-- Testimonial 2 -->
208
- <div class="testimonial-card bg-white p-8 rounded-lg shadow-md">
209
  <div class="flex items-center mb-4">
210
  <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/testimonials3-1.jpg" alt="Mehmet Y." class="w-16 h-16 rounded-full mr-4">
211
  <div>
212
- <h4 class="font-bold text-blue-800">Mehmet Y., İstanbul</h4>
 
 
 
 
 
 
 
213
  </div>
214
  </div>
215
  <p class="text-gray-600 italic">
@@ -218,76 +437,222 @@
218
  </div>
219
 
220
  <!-- Testimonial 3 -->
221
- <div class="testimonial-card bg-white p-8 rounded-lg shadow-md">
222
  <div class="flex items-center mb-4">
223
  <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/testimonials1-1.jpg" alt="Elif B." class="w-16 h-16 rounded-full mr-4">
224
  <div>
225
- <h4 class="font-bold text-blue-800">Elif B., İstanbul</h4>
 
 
 
 
 
 
 
226
  </div>
227
  </div>
228
  <p class="text-gray-600 italic">
229
  "İnşaat öncesi projelendirmeden teslimat sürecine kadar her adımda yanımızda oldular. Dürüst, disiplinli ve işinin ehli bir firma. Çok memnun kaldık."
230
  </p>
231
  </div>
232
- </div>
233
  </div>
234
  </section>
235
-
236
  <!-- CTA Section -->
237
- <section class="py-16 bg-blue-800 text-white">
238
- <div class="container mx-auto px-6 text-center">
239
- <h2 class="text-3xl font-bold mb-6">Hayalinizdeki Projeyi Konuşalım</h2>
 
 
 
 
240
  <p class="text-xl mb-8 max-w-2xl mx-auto">Profesyonel ekibimizle projeniz hakkında görüşmek için hemen iletişime geçin.</p>
241
- <button class="bg-white text-blue-800 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105">
242
- Bize Ulaşın <i data-feather="arrow-right" class="inline ml-2"></i>
243
- </button>
 
 
 
 
 
244
  </div>
245
  </section>
246
-
247
  <!-- Footer -->
248
  <footer class="bg-gray-900 text-white py-12">
249
  <div class="container mx-auto px-6">
250
  <div class="grid md:grid-cols-4 gap-8">
251
  <div>
252
- <h3 class="text-xl font-bold mb-4">BİRBEN İNŞAAT</h3>
253
- <p class="text-gray-400">2004'ten beri güvenilir ve kaliteli yapılar inşa ediyoruz.</p>
 
 
 
 
 
 
 
 
 
 
 
254
  </div>
255
  <div>
256
- <h4 class="font-bold mb-4">Hızlı Linkler</h4>
257
  <ul class="space-y-2">
258
- <li><a href="#" class="text-gray-400 hover:text-white">Ana Sayfa</a></li>
259
- <li><a href="#" class="text-gray-400 hover:text-white">Hizmetlerimiz</a></li>
260
- <li><a href="#" class="text-gray-400 hover:text-white">Projelerimiz</a></li>
261
- <li><a href="#" class="text-gray-400 hover:text-white">Hakkımızda</a></li>
262
- <li><a href="#" class="text-gray-400 hover:text-white">İletişim</a></li>
263
  </ul>
264
  </div>
265
  <div>
266
- <h4 class="font-bold mb-4">İletişim</h4>
267
  <ul class="space-y-2 text-gray-400">
268
- <li class="flex items-center"><i data-feather="map-pin" class="mr-2 w-4 h-4"></i> İstanbul, Türkiye</li>
269
- <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +90 212 123 4567</li>
270
- <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> info@birbeninsaat.com</li>
271
  </ul>
272
  </div>
273
  <div>
274
- <h4 class="font-bold mb-4">Sosyal Medya</h4>
275
- <div class="flex space-x-4">
276
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook" class="w-5 h-5"></i></a>
277
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter" class="w-5 h-5"></i></a>
278
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram" class="w-5 h-5"></i></a>
279
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin" class="w-5 h-5"></i></a>
280
- </div>
 
281
  </div>
282
  </div>
283
  <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
284
- <p>&copy; 2023 Birben İnşaat. Tüm hakları saklıdır.</p>
285
  </div>
286
  </div>
287
  </footer>
288
 
 
 
 
 
 
289
  <script>
290
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  </script>
292
  </body>
293
  </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
  <style>
15
  .hero-bg {
16
  background-image: url('https://birbeninsaat.com/wp-content/uploads/2025/05/AdobeStock_286096432-scaled-1.jpeg');
17
  background-size: cover;
18
  background-position: center;
19
+ background-attachment: fixed;
20
  }
21
  .service-card:hover {
22
  transform: translateY(-5px);
 
28
  .testimonial-card:hover {
29
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
  }
31
+ .scroll-reveal {
32
+ opacity: 0;
33
+ transform: translateY(30px);
34
+ transition: all 0.8s ease;
35
+ }
36
+ .scroll-reveal.active {
37
+ opacity: 1;
38
+ transform: translateY(0);
39
+ }
40
+ .parallax {
41
+ background-attachment: fixed;
42
+ background-position: center;
43
+ background-repeat: no-repeat;
44
+ background-size: cover;
45
+ }
46
+ .floating {
47
+ animation: float 6s ease-in-out infinite;
48
+ }
49
+ @keyframes float {
50
+ 0% { transform: translateY(0px); }
51
+ 50% { transform: translateY(-20px); }
52
+ 100% { transform: translateY(0px); }
53
+ }
54
+ .gradient-text {
55
+ background: linear-gradient(45deg, #0D3B66, #1E5F8E);
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ background-clip: text;
59
+ }
60
+ .mobile-menu {
61
+ transform: translateX(-100%);
62
+ transition: transform 0.3s ease;
63
+ }
64
+ .mobile-menu.active {
65
+ transform: translateX(0);
66
+ }
67
+ .project-overlay {
68
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
69
+ }
70
  </style>
71
  </head>
72
  <body class="font-sans antialiased text-gray-800">
73
+ <!-- Top Bar -->
74
+ <div class="bg-blue-900 text-white py-2 text-sm">
75
+ <div class="container mx-auto px-6 flex justify-between items-center">
76
+ <div class="hidden md:flex space-x-4">
77
+ <span><i class="fas fa-phone mr-2"></i>+90 212 123 4567</span>
78
+ <span><i class="fas fa-envelope mr-2"></i>info@birbeninsaat.com</span>
79
+ </div>
80
+ <div class="flex space-x-3">
81
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-facebook"></i></a>
82
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-instagram"></i></a>
83
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-linkedin"></i></a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
  <!-- Navigation -->
89
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
90
+ <div class="container mx-auto px-6 py-4">
91
  <div class="flex justify-between items-center">
92
+ <div class="flex items-center">
93
+ <div class="text-3xl font-bold gradient-text">BİRBEN İNŞAAT</div>
94
+ </div>
95
+ <div class="hidden md:flex space-x-8">
96
+ <a href="#home" class="nav-link text-blue-800 font-medium hover:text-blue-600 transition">Ana Sayfa</a>
97
+ <a href="#services" class="nav-link text-gray-600 hover:text-blue-800 transition">Hizmetlerimiz</a>
98
+ <a href="#projects" class="nav-link text-gray-600 hover:text-blue-800 transition">Projelerimiz</a>
99
+ <a href="#about" class="nav-link text-gray-600 hover:text-blue-800 transition">Hakkımızda</a>
100
+ <a href="#contact" class="nav-link text-gray-600 hover:text-blue-800 transition">İletişim</a>
101
  </div>
102
  <div class="md:hidden">
103
+ <button id="mobile-menu-btn" class="text-gray-600">
104
  <i data-feather="menu"></i>
105
  </button>
106
  </div>
107
  </div>
108
  </div>
109
+ <!-- Mobile Menu -->
110
+ <div id="mobile-menu" class="mobile-menu fixed top-0 left-0 w-64 h-full bg-white shadow-2xl md:hidden z-50">
111
+ <div class="p-6">
112
+ <button id="close-menu" class="absolute top-4 right-4 text-gray-600">
113
+ <i data-feather="x"></i>
114
+ </button>
115
+ <div class="text-2xl font-bold mb-8 gradient-text">BİRBEN İNŞAAT</div>
116
+ <div class="space-y-4">
117
+ <a href="#home" class="block text-gray-600 hover:text-blue-800 transition">Ana Sayfa</a>
118
+ <a href="#services" class="block text-gray-600 hover:text-blue-800 transition">Hizmetlerimiz</a>
119
+ <a href="#projects" class="block text-gray-600 hover:text-blue-800 transition">Projelerimiz</a>
120
+ <a href="#about" class="block text-gray-600 hover:text-blue-800 transition">Hakkımızda</a>
121
+ <a href="#contact" class="block text-gray-600 hover:text-blue-800 transition">İletişim</a>
122
+ </div>
123
+ </div>
124
+ </div>
125
  </nav>
 
126
  <!-- Hero Section -->
127
+ <section id="home" class="hero-bg h-screen flex items-center relative overflow-hidden">
128
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
129
  <div class="container mx-auto px-6 relative z-10 text-white">
130
+ <div class="max-w-3xl">
131
+ <h1 class="text-4xl md:text-7xl font-bold mb-6 floating">Hayalindeki Eve Sahip Ol</h1>
132
+ <p class="text-xl md:text-2xl mb-8 leading-relaxed">Modern mimari anlayışıyla sürdürülebilir ve estetik çözümler sunuyoruz. 20 yıllık tecrübemizle güvenli yaşam alanları inşa ediyoruz.</p>
133
+ <div class="flex flex-col sm:flex-row gap-4">
134
+ <button class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105 shadow-lg">
135
+ <i class="fas fa-building mr-2"></i>Projelerimizi İncele
136
+ </button>
137
+ <button class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-800 text-white font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105">
138
+ <i class="fas fa-phone mr-2"></i>Hemen İletişime Geç
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
144
+ <i class="fas fa-chevron-down text-white text-2xl"></i>
145
  </div>
146
  </section>
147
 
148
+ <!-- Stats Section -->
149
+ <section class="py-16 bg-gradient-to-r from-blue-800 to-blue-900 text-white">
150
+ <div class="container mx-auto px-6">
151
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
152
+ <div class="scroll-reveal">
153
+ <div class="text-4xl font-bold mb-2 counter" data-target="500">0</div>
154
+ <p class="text-blue-200">Tamamlanan Proje</p>
155
+ </div>
156
+ <div class="scroll-reveal">
157
+ <div class="text-4xl font-bold mb-2 counter" data-target="20">0</div>
158
+ <p class="text-blue-200">Yıllık Tecrübe</p>
159
+ </div>
160
+ <div class="scroll-reveal">
161
+ <div class="text-4xl font-bold mb-2 counter" data-target="10000">0</div>
162
+ <p class="text-blue-200">Mutlu Müşteri</p>
163
+ </div>
164
+ <div class="scroll-reveal">
165
+ <div class="text-4xl font-bold mb-2">100%</div>
166
+ <p class="text-blue-200">Müşteri Memnuniyeti</p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </section>
171
  <!-- Services Section -->
172
+ <section id="services" class="py-20 bg-gray-50">
173
  <div class="container mx-auto px-6">
174
+ <div class="text-center mb-16 scroll-reveal">
175
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Hizmetlerimiz</h2>
176
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
177
+ İnşaatın her aşamasında güven, kalite ve estetiği bir araya getiren kapsamlı hizmetler sunuyoruz.
178
+ </p>
179
+ </div>
180
 
181
  <div class="grid md:grid-cols-3 gap-10">
182
  <!-- Service 1 -->
183
+ <div class="service-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300 scroll-reveal">
184
+ <div class="relative group">
185
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/06/AdobeStock_214958121-scaled.jpeg" alt="Kentsel Dönüşüm" class="w-full h-48 object-cover group-hover:scale-110 transition duration-500">
186
+ <div class="absolute inset-0 bg-blue-800 bg-opacity-0 group-hover:bg-opacity-30 transition duration-300"></div>
187
+ </div>
188
  <div class="p-6">
189
+ <div class="text-blue-800 mb-3">
190
+ <i class="fas fa-city text-3xl"></i>
191
+ </div>
192
+ <h3 class="text-xl font-bold mb-3 gradient-text">Kentsel Dönüşüm Hizmetleri</h3>
193
+ <p class="text-gray-600">
194
  Deprem yönetmeliğine uygun, güvenli ve modern yaşam alanları inşa ediyoruz. Mevcut yapıları analiz ederek, yerine dayanıklı ve estetik binalar kazandırıyoruz.
195
  </p>
196
  </div>
197
  </div>
198
 
199
  <!-- Service 2 -->
200
+ <div class="service-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300 scroll-reveal">
201
+ <div class="relative group">
202
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/06/AdobeStock_297495776-scaled.jpeg" alt="Yeni Nesil Mimari" class="w-full h-48 object-cover group-hover:scale-110 transition duration-500">
203
+ <div class="absolute inset-0 bg-blue-800 bg-opacity-0 group-hover:bg-opacity-30 transition duration-300"></div>
204
+ </div>
205
  <div class="p-6">
206
+ <div class="text-blue-800 mb-3">
207
+ <i class="fas fa-building text-3xl"></i>
208
+ </div>
209
+ <h3 class="text-xl font-bold mb-3 gradient-text">Yeni Nesil Mimari Projeler</h3>
210
+ <p class="text-gray-600">
211
  Konut, ofis, ticari yapı ve karma projelerde modern mimari yaklaşımlar sunuyoruz. Estetik, fonksiyonellik ve kullanıcı konforunu ön planda tutuyoruz.
212
  </p>
213
  </div>
214
  </div>
215
 
216
  <!-- Service 3 -->
217
+ <div class="service-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300 scroll-reveal">
218
+ <div class="relative group">
219
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/06/AdobeStock_324305882-scaled.jpeg" alt="Proje Yönetimi" class="w-full h-48 object-cover group-hover:scale-110 transition duration-500">
220
+ <div class="absolute inset-0 bg-blue-800 bg-opacity-0 group-hover:bg-opacity-30 transition duration-300"></div>
221
+ </div>
222
  <div class="p-6">
223
+ <div class="text-blue-800 mb-3">
224
+ <i class="fas fa-hard-hat text-3xl"></i>
225
+ </div>
226
+ <h3 class="text-xl font-bold mb-3 gradient-text">Proje ve Uygulama Yönetimi</h3>
227
+ <p class="text-gray-600">
228
  İnşaat sürecinin tüm aşamalarını planlıyor, takip ediyor ve yönetiyoruz. Zamanında teslim, maliyet kontrolü ve kalite standartlarına bağlılıkla çalışıyoruz.
229
  </p>
230
  </div>
231
  </div>
232
+ </div>
233
  </div>
234
  </section>
 
235
  <!-- Our Story Section -->
236
+ <section id="about" class="py-20 bg-white">
237
  <div class="container mx-auto px-6">
238
  <div class="flex flex-col md:flex-row items-center">
239
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10 scroll-reveal">
240
+ <h2 class="text-4xl font-bold mb-6 gradient-text">Hikayemiz...</h2>
241
+ <div class="space-y-4 text-gray-600">
242
+ <p>
243
+ 2004 yılında kaliteli, güvenilir ve sürdürülebilir yapılar inşa etme hedefiyle yola çıktık. Kurulduğumuz günden bu yana, hem kentsel dönüşüm projelerinde hem de modern mimari yapılarda imzamızı gururla taşıyoruz.
244
+ </p>
245
+ <p>
246
+ Tecrübemizi teknolojiyle birleştirerek, şehirlerin dönüşümüne katkı sağlıyor, her projede insan odaklı ve estetik çözümler sunuyoruz.
247
+ </p>
248
+ <div class="flex flex-wrap gap-4 mt-6">
249
+ <div class="flex items-center">
250
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
251
+ <span>Lisanslı ve Sigortalı</span>
252
+ </div>
253
+ <div class="flex items-center">
254
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
255
+ <span>20 Yıllık Tecrübe</span>
256
+ </div>
257
+ <div class="flex items-center">
258
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
259
+ <span>Garanti ve Destek</span>
260
+ </div>
261
+ </div>
262
+ </div>
263
  </div>
264
+ <div class="md:w-1/2 scroll-reveal">
265
+ <div class="relative">
266
+ <img src="https://static.photos/construction/1200x630/1" alt="Construction Site" class="rounded-lg shadow-xl">
267
+ <div class="absolute -bottom-6 -left-6 bg-blue-800 text-white p-6 rounded-lg shadow-xl">
268
+ <div class="text-3xl font-bold">20+</div>
269
+ <div class="text-blue-200">Yıllık Tecrübe</div>
270
+ </div>
271
+ </div>
272
  </div>
273
  </div>
274
  </div>
275
  </section>
 
276
  <!-- Quality Section -->
277
+ <section class="py-20 bg-gray-100 parallax" style="background-image: url('https://static.photos/construction/1200x630/2');">
278
+ <div class="bg-white bg-opacity-95">
279
+ <div class="container mx-auto px-6 py-20">
280
+ <div class="text-center mb-16 scroll-reveal">
281
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Kalitemiz...</h2>
282
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
283
+ Sektördeki 20 yıllık tecrübemizle kaliteli ve güvenilir hizmet sunuyoruz.
 
 
 
 
284
  </p>
285
  </div>
286
+ <div class="grid md:grid-cols-3 gap-8">
287
+ <div class="bg-white p-8 rounded-lg shadow-lg text-center hover:shadow-xl transition duration-300 scroll-reveal">
288
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
289
+ <i data-feather="award" class="text-white w-10 h-10"></i>
290
+ </div>
291
+ <h3 class="text-xl font-bold mb-3 gradient-text">Deneyim ve Güven</h3>
292
+ <p class="text-gray-600">
293
+ 2004 yılından bu yana edindiğimiz tecrübeyle, her projeyi zamanında ve güvenle tamamlıyoruz.
294
+ </p>
295
  </div>
296
+
297
+ <div class="bg-white p-8 rounded-lg shadow-lg text-center hover:shadow-xl transition duration-300 scroll-reveal">
298
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
299
+ <i data-feather="tool" class="text-white w-10 h-10"></i>
300
+ </div>
301
+ <h3 class="text-xl font-bold mb-3 gradient-text">Kaliteli İşçilik</h3>
302
+ <p class="text-gray-600">
303
+ Malzeme seçiminden uygulamaya kadar tüm süreçlerde yüksek kalite standartlarıyla çalışıyoruz.
304
+ </p>
305
+ </div>
306
+
307
+ <div class="bg-white p-8 rounded-lg shadow-lg text-center hover:shadow-xl transition duration-300 scroll-reveal">
308
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
309
+ <i data-feather="layout" class="text-white w-10 h-10"></i>
310
+ </div>
311
+ <h3 class="text-xl font-bold mb-3 gradient-text">Modern Tasarımlar</h3>
312
+ <p class="text-gray-600">
313
+ Estetik, konfor ve kullanım kolaylığını bir araya getiren yapılar inşa ediyoruz.
314
+ </p>
315
  </div>
 
 
 
 
316
  </div>
317
  </div>
318
  </div>
319
  </section>
 
320
  <!-- Projects Section -->
321
+ <section id="projects" class="py-20 bg-white">
322
  <div class="container mx-auto px-6">
323
+ <div class="text-center mb-16 scroll-reveal">
324
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Biten Projelerimiz...</h2>
325
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
326
+ Hayata geçirdiğimiz projelerle gurur duyuyoruz; işte tamamladığımız bazı örnekler.
327
+ </p>
328
+ </div>
329
 
330
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
331
+ <div class="relative group overflow-hidden rounded-lg shadow-lg scroll-reveal">
332
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.18.52.jpeg" alt="Project 1" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
333
+ <div class="absolute inset-0 project-overlay opacity-0 group-hover:opacity-100 transition duration-300 flex items-end">
334
+ <div class="p-6 text-white">
335
+ <h3 class="text-xl font-bold mb-2">Modern Konut Projesi</h3>
336
+ <p class="text-sm">İstanbul, 2023</p>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div class="relative group overflow-hidden rounded-lg shadow-lg scroll-reveal">
341
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.18.50.jpeg" alt="Project 2" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
342
+ <div class="absolute inset-0 project-overlay opacity-0 group-hover:opacity-100 transition duration-300 flex items-end">
343
+ <div class="p-6 text-white">
344
+ <h3 class="text-xl font-bold mb-2">Ofis Binası</h3>
345
+ <p class="text-sm">İstanbul, 2023</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <div class="relative group overflow-hidden rounded-lg shadow-lg scroll-reveal">
350
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.18.49.jpeg" alt="Project 3" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
351
+ <div class="absolute inset-0 project-overlay opacity-0 group-hover:opacity-100 transition duration-300 flex items-end">
352
+ <div class="p-6 text-white">
353
+ <h3 class="text-xl font-bold mb-2">Villa Projesi</h3>
354
+ <p class="text-sm">İstanbul, 2022</p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ <div class="relative group overflow-hidden rounded-lg shadow-lg scroll-reveal">
359
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.17.59.jpeg" alt="Project 4" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
360
+ <div class="absolute inset-0 project-overlay opacity-0 group-hover:opacity-100 transition duration-300 flex items-end">
361
+ <div class="p-6 text-white">
362
+ <h3 class="text-xl font-bold mb-2">Karma Proje</h3>
363
+ <p class="text-sm">İstanbul, 2022</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ <div class="relative group overflow-hidden rounded-lg shadow-lg scroll-reveal">
368
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.17.58-1.jpeg" alt="Project 5" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
369
+ <div class="absolute inset-0 project-overlay opacity-0 group-hover:opacity-100 transition duration-300 flex items-end">
370
+ <div class="p-6 text-white">
371
+ <h3 class="text-xl font-bold mb-2">Ticari Merkez</h3>
372
+ <p class="text-sm">İstanbul, 2021</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="relative group overflow-hidden rounded-lg shadow-lg scroll-reveal">
377
+ <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/WhatsApp-Image-2025-05-27-at-14.17.58.jpeg" alt="Project 6" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
378
+ <div class="absolute inset-0 project-overlay opacity-0 group-hover:opacity-100 transition duration-300 flex items-end">
379
+ <div class="p-6 text-white">
380
+ <h3 class="text-xl font-bold mb-2">Site Projesi</h3>
381
+ <p class="text-sm">İstanbul, 2021</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
  </div>
386
  </div>
387
  </section>
 
388
  <!-- Testimonials Section -->
389
  <section class="py-20 bg-gray-50">
390
  <div class="container mx-auto px-6">
391
+ <div class="text-center mb-16 scroll-reveal">
392
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Memnun Müşteri Yorumları</h2>
393
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
394
+ 2004 Yılından beri birlikte çalıştığımız değerli müşterilerimizin memnuniyeti, işimize duyduğumuz güvenin en büyük göstergesidir.
395
+ </p>
396
+ </div>
397
 
398
  <div class="grid md:grid-cols-3 gap-8">
399
  <!-- Testimonial 1 -->
400
+ <div class="testimonial-card bg-white p-8 rounded-lg shadow-lg scroll-reveal">
401
  <div class="flex items-center mb-4">
402
  <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/testimonials2-150x150-1-1.jpg" alt="Ayşe K." class="w-16 h-16 rounded-full mr-4">
403
  <div>
404
+ <h4 class="font-bold gradient-text">Ayşe K., İstanbul</h4>
405
+ <div class="text-yellow-400">
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ </div>
412
  </div>
413
  </div>
414
  <p class="text-gray-600 italic">
 
417
  </div>
418
 
419
  <!-- Testimonial 2 -->
420
+ <div class="testimonial-card bg-white p-8 rounded-lg shadow-lg scroll-reveal">
421
  <div class="flex items-center mb-4">
422
  <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/testimonials3-1.jpg" alt="Mehmet Y." class="w-16 h-16 rounded-full mr-4">
423
  <div>
424
+ <h4 class="font-bold gradient-text">Mehmet Y., İstanbul</h4>
425
+ <div class="text-yellow-400">
426
+ <i class="fas fa-star"></i>
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ </div>
432
  </div>
433
  </div>
434
  <p class="text-gray-600 italic">
 
437
  </div>
438
 
439
  <!-- Testimonial 3 -->
440
+ <div class="testimonial-card bg-white p-8 rounded-lg shadow-lg scroll-reveal">
441
  <div class="flex items-center mb-4">
442
  <img src="https://birbeninsaat.com/wp-content/uploads/2025/05/testimonials1-1.jpg" alt="Elif B." class="w-16 h-16 rounded-full mr-4">
443
  <div>
444
+ <h4 class="font-bold gradient-text">Elif B., İstanbul</h4>
445
+ <div class="text-yellow-400">
446
+ <i class="fas fa-star"></i>
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ </div>
452
  </div>
453
  </div>
454
  <p class="text-gray-600 italic">
455
  "İnşaat öncesi projelendirmeden teslimat sürecine kadar her adımda yanımızda oldular. Dürüst, disiplinli ve işinin ehli bir firma. Çok memnun kaldık."
456
  </p>
457
  </div>
458
+ </div>
459
  </div>
460
  </section>
 
461
  <!-- CTA Section -->
462
+ <section id="contact" class="py-20 bg-gradient-to-r from-blue-800 to-blue-900 text-white relative overflow-hidden">
463
+ <div class="absolute inset-0 opacity-10">
464
+ <div class="absolute top-10 left-10 w-32 h-32 bg-white rounded-full"></div>
465
+ <div class="absolute bottom-10 right-10 w-48 h-48 bg-white rounded-full"></div>
466
+ </div>
467
+ <div class="container mx-auto px-6 text-center relative z-10">
468
+ <h2 class="text-4xl font-bold mb-6">Hayalinizdeki Projeyi Konuşalım</h2>
469
  <p class="text-xl mb-8 max-w-2xl mx-auto">Profesyonel ekibimizle projeniz hakkında görüşmek için hemen iletişime geçin.</p>
470
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
471
+ <button class="bg-white text-blue-800 font-bold py-4 px-8 rounded-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105 shadow-lg">
472
+ <i class="fas fa-phone mr-2"></i>Hemen Ara
473
+ </button>
474
+ <button class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-800 text-white font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105">
475
+ <i class="fas fa-envelope mr-2"></i>Mail Gönder
476
+ </button>
477
+ </div>
478
  </div>
479
  </section>
 
480
  <!-- Footer -->
481
  <footer class="bg-gray-900 text-white py-12">
482
  <div class="container mx-auto px-6">
483
  <div class="grid md:grid-cols-4 gap-8">
484
  <div>
485
+ <h3 class="text-2xl font-bold mb-4 gradient-text">BİRBEN İNŞAAT</h3>
486
+ <p class="text-gray-400">2004'ten beri güvenilir ve kaliteli yapılar inşa ediyoruz. Tecrübe ve güvenin adresi.</p>
487
+ <div class="flex space-x-3 mt-4">
488
+ <a href="#" class="bg-blue-800 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition">
489
+ <i class="fab fa-facebook-f"></i>
490
+ </a>
491
+ <a href="#" class="bg-blue-800 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition">
492
+ <i class="fab fa-instagram"></i>
493
+ </a>
494
+ <a href="#" class="bg-blue-800 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition">
495
+ <i class="fab fa-linkedin-in"></i>
496
+ </a>
497
+ </div>
498
  </div>
499
  <div>
500
+ <h4 class="font-bold mb-4 text-lg">Hızlı Linkler</h4>
501
  <ul class="space-y-2">
502
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Ana Sayfa</a></li>
503
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Hizmetlerimiz</a></li>
504
+ <li><a href="#projects" class="text-gray-400 hover:text-white transition">Projelerimiz</a></li>
505
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">Hakkımızda</a></li>
506
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">İletişim</a></li>
507
  </ul>
508
  </div>
509
  <div>
510
+ <h4 class="font-bold mb-4 text-lg">İletişim</h4>
511
  <ul class="space-y-2 text-gray-400">
512
+ <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> İstanbul, Türkiye</li>
513
+ <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +90 212 123 4567</li>
514
+ <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@birbeninsaat.com</li>
515
  </ul>
516
  </div>
517
  <div>
518
+ <h4 class="font-bold mb-4 text-lg">Bülten</h4>
519
+ <p class="text-gray-400 mb-4">Projelerimiz ve haberlerimizden haberdar olun.</p>
520
+ <form class="flex">
521
+ <input type="email" placeholder="Email adresiniz" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg flex-1 focus:outline-none focus:bg-gray-700">
522
+ <button type="submit" class="bg-blue-800 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition">
523
+ <i class="fas fa-paper-plane"></i>
524
+ </button>
525
+ </form>
526
  </div>
527
  </div>
528
  <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
529
+ <p>&copy; 2024 Birben İnşaat. Tüm hakları saklıdır. | Tasarım ve Geliştirme</p>
530
  </div>
531
  </div>
532
  </footer>
533
 
534
+ <!-- Back to Top Button -->
535
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-800 hover:bg-blue-700 text-white p-4 rounded-full shadow-lg transition duration-300 transform hover:scale-110 opacity-0 invisible">
536
+ <i class="fas fa-arrow-up"></i>
537
+ </button>
538
+
539
  <script>
540
  feather.replace();
541
+
542
+ // Mobile Menu Toggle
543
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
544
+ const mobileMenu = document.getElementById('mobile-menu');
545
+ const closeMenu = document.getElementById('close-menu');
546
+
547
+ mobileMenuBtn.addEventListener('click', () => {
548
+ mobileMenu.classList.add('active');
549
+ });
550
+
551
+ closeMenu.addEventListener('click', () => {
552
+ mobileMenu.classList.remove('active');
553
+ });
554
+
555
+ // Smooth Scrolling for Navigation Links
556
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
557
+ anchor.addEventListener('click', function (e) {
558
+ e.preventDefault();
559
+ const target = document.querySelector(this.getAttribute('href'));
560
+ if (target) {
561
+ target.scrollIntoView({
562
+ behavior: 'smooth',
563
+ block: 'start'
564
+ });
565
+ // Close mobile menu if open
566
+ mobileMenu.classList.remove('active');
567
+ }
568
+ });
569
+ });
570
+
571
+ // Scroll Reveal Animation
572
+ const scrollReveal = () => {
573
+ const reveals = document.querySelectorAll('.scroll-reveal');
574
+ reveals.forEach(element => {
575
+ const windowHeight = window.innerHeight;
576
+ const elementTop = element.getBoundingClientRect().top;
577
+ const elementVisible = 150;
578
+
579
+ if (elementTop < windowHeight - elementVisible) {
580
+ element.classList.add('active');
581
+ }
582
+ });
583
+ };
584
+
585
+ window.addEventListener('scroll', scrollReveal);
586
+ scrollReveal(); // Initial check
587
+
588
+ // Counter Animation
589
+ const counters = document.querySelectorAll('.counter');
590
+ const speed = 200;
591
+
592
+ const countUp = () => {
593
+ counters.forEach(counter => {
594
+ const updateCount = () => {
595
+ const target = +counter.getAttribute('data-target');
596
+ const count = +counter.innerText;
597
+ const inc = target / speed;
598
+
599
+ if (count < target) {
600
+ counter.innerText = Math.ceil(count + inc);
601
+ setTimeout(updateCount, 1);
602
+ } else {
603
+ counter.innerText = target;
604
+ }
605
+ };
606
+ updateCount();
607
+ });
608
+ };
609
+
610
+ // Trigger counter animation when stats section is visible
611
+ const statsSection = document.querySelector('.counter').parentElement.parentElement.parentElement;
612
+ const observer = new IntersectionObserver((entries) => {
613
+ entries.forEach(entry => {
614
+ if (entry.isIntersecting) {
615
+ countUp();
616
+ observer.unobserve(entry.target);
617
+ }
618
+ });
619
+ }, { threshold: 0.5 });
620
+
621
+ observer.observe(statsSection);
622
+
623
+ // Back to Top Button
624
+ const backToTopBtn = document.getElementById('backToTop');
625
+
626
+ window.addEventListener('scroll', () => {
627
+ if (window.pageYOffset > 300) {
628
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
629
+ backToTopBtn.classList.add('opacity-100', 'visible');
630
+ } else {
631
+ backToTopBtn.classList.add('opacity-0', 'invisible');
632
+ backToTopBtn.classList.remove('opacity-100', 'visible');
633
+ }
634
+ });
635
+
636
+ backToTopBtn.addEventListener('click', () => {
637
+ window.scrollTo({
638
+ top: 0,
639
+ behavior: 'smooth'
640
+ });
641
+ });
642
+
643
+ // Add loading animation
644
+ window.addEventListener('load', () => {
645
+ document.body.classList.add('loaded');
646
+ });
647
+
648
+ // Parallax effect for hero section
649
+ window.addEventListener('scroll', () => {
650
+ const scrolled = window.pageYOffset;
651
+ const hero = document.querySelector('.hero-bg');
652
+ if (hero) {
653
+ hero.style.transform = `translateY(${scrolled * 0.5}px)`;
654
+ }
655
+ });
656
  </script>
657
  </body>
658
  </html>