Download index.html from WebAppNov/KEYACorp: direct link, hf CLI and curl.
- Browser
- Download file 66 kB
-
https://huggingface.co/spaces/WebAppNov/KEYACorp/resolve/main/index.html
- Command line
-
hf download hf://spaces/WebAppNov/KEYACorp/index.html
-
curl -L -o index.html https://huggingface.co/spaces/WebAppNov/KEYACorp/resolve/main/index.html
66 kB
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KEYA İnşaat | Modern Mimari & Prestijli Projeler</title> | |
| <!-- Raleway Font Import --> | |
| <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;600;700;800&display=swap" | |
| rel="stylesheet"> | |
| <link rel="icon" type="image/png" href="images/favicon.png"> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| :root { | |
| --primary-turquoise: #40E0D0; | |
| --brand-dark: #111111; | |
| --brand-gray: #f4f7f6; | |
| } | |
| body { | |
| font-family: 'Raleway', sans-serif; | |
| scroll-behavior: smooth; | |
| overflow-x: hidden; | |
| } | |
| .text-turquoise { | |
| color: var(--primary-turquoise); | |
| } | |
| .bg-turquoise { | |
| background-color: var(--primary-turquoise); | |
| } | |
| .bg-brand-dark { | |
| background-color: var(--brand-dark); | |
| } | |
| /* Premium Header Effects */ | |
| .header-scrolled { | |
| background-color: rgba(255, 255, 255, 0.98); | |
| box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| } | |
| /* Hero Zoom Effect */ | |
| .hero-bg { | |
| animation: slowZoom 20s infinite alternate; | |
| } | |
| @keyframes slowZoom { | |
| from { | |
| transform: scale(1); | |
| } | |
| to { | |
| transform: scale(1.1); | |
| } | |
| } | |
| /* Reveal on Scroll */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Project Overlays */ | |
| .project-card .overlay-content { | |
| transform: translateY(20px); | |
| transition: all 0.4s ease; | |
| } | |
| .project-card:hover .overlay-content { | |
| transform: translateY(0); | |
| } | |
| .whatsapp-float { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background-color: #25d366; | |
| color: white; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3); | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| .whatsapp-float:hover { | |
| transform: scale(1.1) rotate(10deg); | |
| } | |
| /* Language content toggling */ | |
| [data-lang="en"] { | |
| display: none; | |
| } | |
| html[lang="en"] [data-lang="tr"] { | |
| display: none; | |
| } | |
| html[lang="en"] [data-lang="en"] { | |
| display: block; | |
| } | |
| html[lang="tr"] [data-lang="tr"] { | |
| display: block; | |
| } | |
| /* Lightbox Styles */ | |
| .lightbox { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.95); | |
| z-index: 2000; | |
| padding: 2rem; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .lightbox.active { | |
| display: flex; | |
| } | |
| .lightbox-content { | |
| max-width: 90%; | |
| max-height: 80vh; | |
| position: relative; | |
| } | |
| .lightbox-img { | |
| max-width: 100%; | |
| max-height: 80vh; | |
| object-fit: contain; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .lightbox-close { | |
| position: absolute; | |
| top: -40px; | |
| right: 0; | |
| color: white; | |
| font-size: 2rem; | |
| cursor: pointer; | |
| line-height: 1; | |
| } | |
| .lightbox-nav { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| border-radius: 50%; | |
| } | |
| .lightbox-nav:hover { | |
| background: var(--primary-turquoise); | |
| color: var(--brand-dark); | |
| } | |
| .lightbox-prev { | |
| left: -70px; | |
| } | |
| .lightbox-next { | |
| right: -70px; | |
| } | |
| @media (max-width: 768px) { | |
| .lightbox-nav { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .lightbox-prev { | |
| left: -10px; | |
| } | |
| .lightbox-next { | |
| right: -10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-900 selection:bg-turquoise selection:text-white"> | |
| <!-- Top Bar --> | |
| <div class="bg-brand-dark text-white py-2 hidden md:block border-b border-white/5"> | |
| <div | |
| class="container mx-auto px-6 flex justify-between items-center text-[11px] uppercase tracking-[0.2em] font-semibold opacity-70"> | |
| <div class="flex space-x-6"> | |
| <span class="flex items-center gap-2"> | |
| <svg class="w-3 h-3 text-turquoise" fill="currentColor" viewBox="0 0 24 24"> | |
| <path | |
| d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /> | |
| </svg> | |
| GÜNCELLENECEK, TÜRKİYE | |
| </span> | |
| <span class="flex items-center gap-2"> | |
| <svg class="w-3 h-3 text-turquoise" fill="currentColor" viewBox="0 0 24 24"> | |
| <path | |
| d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" /> | |
| </svg> | |
| +90 507 738 0059 | |
| </span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')" | |
| class="hover:text-turquoise transition-colors">INSTAGRAM</a> | |
| <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')" | |
| class="hover:text-turquoise transition-colors">LINKEDIN</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header & Navigation --> | |
| <header id="mainHeader" class="sticky top-0 w-full z-50 transition-all duration-500 py-6"> | |
| <div class="container mx-auto px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')" class="flex items-center gap-3"> | |
| <img src="images/logo.png" alt="Logo" class="h-12 w-auto"> | |
| <!-- | |
| <div class="flex flex-col leading-none"> | |
| <span class="text-3xl font-extrabold tracking-tighter text-brand-dark"> | |
| KEYA | |
| </span> | |
| <span class="text-xs tracking-[0.6em] text-turquoise mt-1 font-bold"> | |
| İNŞAAT | |
| </span> | |
| </div> | |
| --> | |
| </a> | |
| </div> | |
| <nav class="hidden lg:flex space-x-10 text-[13px] font-bold uppercase tracking-widest text-brand-dark/80"> | |
| <a href="#home" class="nav-link hover:text-turquoise transition-colors"><span | |
| data-lang="tr">Anasayfa</span><span data-lang="en">Home</span></a> | |
| <a href="#about" class="nav-link hover:text-turquoise transition-colors"><span | |
| data-lang="tr">Kurumsal</span><span data-lang="en">Corporate</span></a> | |
| <a href="#projects" class="nav-link hover:text-turquoise transition-colors"><span | |
| data-lang="tr">Projeler</span><span data-lang="en">Projects</span></a> | |
| <a href="#services" class="nav-link hover:text-turquoise transition-colors"><span | |
| data-lang="tr">Hizmetler</span><span data-lang="en">Services</span></a> | |
| <a href="#contact" class="nav-link hover:text-turquoise transition-colors"><span | |
| data-lang="tr">İletişim</span><span data-lang="en">Contact</span></a> | |
| </nav> | |
| <div class="flex items-center space-x-6"> | |
| <button onclick="switchLanguage()" | |
| class="group flex items-center space-x-2 text-[12px] font-extrabold tracking-widest"> | |
| <span class="w-8 h-[1px] bg-brand-dark/20 group-hover:bg-turquoise transition-all"></span> | |
| <span id="langBtnText">ENGLISH</span> | |
| </button> | |
| <div class="hidden md:block"> | |
| <a href="#contact" | |
| class="inline-flex items-center justify-center bg-brand-dark text-white px-8 py-4 text-sm font-bold uppercase tracking-widest hover:bg-turquoise hover:text-brand-dark transition-all duration-300 rounded-md"> | |
| <span data-lang="tr">TEKLİF AL</span> | |
| <span data-lang="en">GET QUOTE</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative h-[90vh] flex items-center overflow-hidden bg-brand-dark"> | |
| <div class="absolute inset-0 z-0"> | |
| <img src="images/home.png" alt="Construction Hero" class="w-full h-full object-cover hero-bg opacity-50"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-brand-dark via-brand-dark/40 to-transparent"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-4xl"> | |
| <span class="text-turquoise text-sm font-extrabold tracking-[0.5em] uppercase mb-6 block reveal"> | |
| <span data-lang="tr">PRESTİJLİ YAŞAM ALANLARI</span> | |
| <span data-lang="en">PRESTIGIOUS LIVING SPACES</span> | |
| </span> | |
| <h1 class="text-5xl md:text-8xl font-extrabold text-white mb-8 leading-[1.1] tracking-tighter reveal" | |
| style="transition-delay: 200ms;"> | |
| <span data-lang="tr">Geleceği <br><span class="text-turquoise">İnşa Ediyoruz.</span></span> | |
| <span data-lang="en">Building <br><span class="text-turquoise">The Future.</span></span> | |
| </h1> | |
| <div class="flex flex-wrap gap-6 reveal" style="transition-delay: 600ms;"> | |
| <a href="#projects" | |
| class="bg-turquoise text-brand-dark font-extrabold px-10 py-5 hover:bg-white transition-all uppercase tracking-widest text-[11px] shadow-xl"> | |
| <span data-lang="tr">PORTFOLYOMUZ</span><span data-lang="en">OUR PORTFOLIO</span> | |
| </a> | |
| <a href="#about" | |
| class="group flex items-center space-x-4 text-white font-extrabold tracking-widest text-[11px] uppercase"> | |
| <span data-lang="tr">HAKKIMIZDA DAHA FAZLA</span><span data-lang="en">LEARN MORE ABOUT US</span> | |
| <span | |
| class="w-12 h-[1px] bg-white/30 group-hover:bg-turquoise group-hover:w-16 transition-all"></span> | |
| </a> | |
| </div><br> | |
| <p class="text-lg text-white mb-12 max-w-xl font-light leading-relaxed reveal" | |
| style="transition-delay: 400ms;"> | |
| <span data-lang="tr">2018'den beri estetik ve güveni bir araya getirerek, modern mimarinin | |
| sınırlarını zorlayan konut ve villa projeleri geliştiriyoruz.</span> | |
| <span data-lang="en">Since 2018, we combine aesthetics and trust to develop residential and villa | |
| projects that push the boundaries of modern architecture.</span> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Bottom Stat Decor --> | |
| <div class="absolute bottom-0 left-0 w-full hidden lg:block z-20"> | |
| <div class="container mx-auto px-6 grid grid-cols-3 border-t border-white/10"> | |
| <div class="py-10 border-r border-white/10 pr-10"> | |
| <div class="text-turquoise text-4xl font-extrabold mb-1">2018</div> | |
| <div class="text-white/40 text-[10px] uppercase font-bold tracking-[0.3em]"><span | |
| data-lang="tr">KURULUŞ YILI</span><span data-lang="en">FOUNDED YEAR</span></div> | |
| </div> | |
| <div class="py-10 border-r border-white/10 px-10"> | |
| <div class="text-white text-4xl font-extrabold mb-1">100+</div> | |
| <div class="text-white/40 text-[10px] uppercase font-bold tracking-[0.3em]"><span | |
| data-lang="tr">MUTLU YATIRIMCI</span><span data-lang="en">HAPPY INVESTORS</span></div> | |
| </div> | |
| <div class="py-10 pl-10"> | |
| <div class="text-white text-4xl font-extrabold mb-1">12k+</div> | |
| <div class="text-white/40 text-[10px] uppercase font-bold tracking-[0.3em]"><span | |
| data-lang="tr">TAMAMLANAN M²</span><span data-lang="en">COMPLETED M²</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-32 bg-white relative overflow-hidden"> | |
| <div class="container mx-auto px-6"> | |
| <!-- Hakkımızda Core --> | |
| <div class="grid lg:grid-cols-12 gap-16 items-center mb-32"> | |
| <div class="lg:col-span-5 relative reveal"> | |
| <div class="absolute -top-10 -left-10 w-40 h-40 bg-turquoise/5 -z-10 rounded-full"></div> | |
| <img src="images/Noa Star/6.png" alt="Quality Work" | |
| class="shadow-2xl grayscale hover:grayscale-0 transition-all duration-700"> | |
| <div class="absolute -bottom-10 -right-10 bg-brand-dark text-white p-12 hidden md:block"> | |
| <span class="text-6xl font-black text-turquoise block mb-2">08</span> | |
| <span class="text-xs tracking-widest uppercase font-bold opacity-60"><span data-lang="tr">YILLIK | |
| TECRÜBE</span><span data-lang="en">YEARS EXPERIENCE</span></span> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-7 reveal" style="transition-delay: 200ms;"> | |
| <h2 | |
| class="text-sm font-extrabold text-turquoise tracking-[0.4em] uppercase mb-6 flex items-center gap-4"> | |
| <span class="w-10 h-[2px] bg-turquoise"></span> | |
| <span data-lang="tr">HAKKIMIZDA</span><span data-lang="en">ABOUT US</span> | |
| </h2> | |
| <h3 class="text-3xl md:text-5xl font-extrabold text-brand-dark mb-8 leading-tight tracking-tighter"> | |
| <span data-lang="tr">Kalite, Güven ve <br> Sürdürülebilir Değer.</span> | |
| <span data-lang="en">Quality, Trust and <br> Sustainable Value.</span> | |
| </h3> | |
| <div class="space-y-6 text-gray-500 font-medium text-lg leading-relaxed"> | |
| <p> | |
| <span data-lang="tr">2018 yılından bu yana inşaat sektöründe faaliyet gösteren Keya İnşaat, | |
| kalite, güven ve sürdürülebilir değer üretme anlayışıyla projeler geliştirmektedir. | |
| Kurulduğumuz günden itibaren özellikle kat karşılığı inşaat modeliyle arsa sahiplerine | |
| yüksek kazanç sağlayan, yatırımcılar için ise prestijli yaşam alanları sunan projelere | |
| imza atmaktayız.</span> | |
| <span data-lang="en">Operating in the construction sector since 2018, Keya Construction | |
| develops projects with an understanding of creating quality, trust, and sustainable | |
| value. Since our establishment, we have undertaken projects that provide high returns to | |
| landowners, especially through the land-for-flats construction model, while offering | |
| prestigious living spaces for investors.</span> | |
| </p> | |
| <p> | |
| <span data-lang="tr">Başta, İzmir’in değer kazanan lokasyonlarında; lüks konut ve villa | |
| projeleri geliştiriyor, projelerimizin satış ve pazarlama süreçlerini de profesyonel | |
| ekibimizle başarıyla yönetiyoruz. Modern mimari anlayışını, sağlam mühendislik altyapısı | |
| ve estetik tasarım çizgileriyle buluşturan Keya İnşaat; her projesinde yaşam kalitesini | |
| artırmayı, bulunduğu bölgeye değer katmayı ve yatırımcısına kazandırmayı | |
| hedeflemektedir.</span> | |
| <span data-lang="en">Primarily in Izmir's appreciating locations, we develop luxury | |
| residential and villa projects, successfully managing their sales and marketing | |
| processes with our professional team. Combining modern architecture with robust | |
| engineering and aesthetic design, Keya Construction aims to improve the quality of life, | |
| add value to its region, and provide profits to its investors in every project.</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vizyon & Misyon --> | |
| <div class="grid md:grid-cols-2 gap-16 mb-32 reveal"> | |
| <div class="bg-brand-gray p-12 border-l-4 border-turquoise"> | |
| <h4 class="text-2xl font-extrabold text-brand-dark mb-6 tracking-tighter uppercase"><span | |
| data-lang="tr">VİZYONUMUZ</span><span data-lang="en">OUR VISION</span></h4> | |
| <p class="text-gray-500 leading-relaxed font-medium"> | |
| <span data-lang="tr">İnşaat ve gayrimenkul geliştirme sektöründe; yenilikçi, güvenilir ve marka | |
| değeri yüksek projeler üreten öncü firmalardan biri olmak. Faaliyet gösterdiğimiz tüm | |
| lokasyonlarda mimari estetik, yapı kalitesi ve yatırım getirisi açısından referans | |
| gösterilen projelere imza atarak; hem arsa sahiplerinin hem de konut alıcılarının ilk tercih | |
| ettiği çözüm ortağı konumuna yükselmek temel vizyonumuzu oluşturmaktadır.</span> | |
| <span data-lang="en">To be one of the pioneering companies producing innovative, reliable, and | |
| high brand value projects in the construction and real estate sector. Our fundamental vision | |
| is to become the first-choice solution partner for both landowners and home buyers by | |
| creating reference projects in terms of architectural aesthetics, construction quality, and | |
| ROI in all locations we operate.</span> | |
| </p> | |
| </div> | |
| <div class="bg-brand-gray p-12 border-l-4 border-brand-dark"> | |
| <h4 class="text-2xl font-extrabold text-brand-dark mb-6 tracking-tighter uppercase"><span | |
| data-lang="tr">MİSYONUMUZ</span><span data-lang="en">OUR MISSION</span></h4> | |
| <ul class="space-y-4 text-gray-500 font-medium"> | |
| <li class="flex items-start gap-3"> | |
| <span class="text-turquoise mt-1">✓</span> | |
| <span data-lang="tr">Arsa sahiplerine şeffaf, kazançlı ve güven esaslı kat karşılığı proje | |
| modelleri sunmak.</span> | |
| <span data-lang="en">Offering transparent, profitable, and trust-based land-for-flats | |
| project models to landowners.</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <span class="text-turquoise mt-1">✓</span> | |
| <span data-lang="tr">Lüks konut ve villa projelerinde kalite standartlarını en üst seviyede | |
| tutmak.</span> | |
| <span data-lang="en">Maintaining the highest quality standards in luxury residential and | |
| villa projects.</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <span class="text-turquoise mt-1">✓</span> | |
| <span data-lang="tr">Modern mimariyi, fonksiyonel yaşam alanlarıyla birleştirmek.</span> | |
| <span data-lang="en">Combining modern architecture with functional living spaces.</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <span class="text-turquoise mt-1">✓</span> | |
| <span data-lang="tr">Projelendirme aşamasından satış sonrası hizmetlere kadar tüm süreçleri | |
| profesyonel yönetmek.</span> | |
| <span data-lang="en">Managing all processes professionally, from design to after-sales | |
| services.</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <span class="text-turquoise mt-1">✓</span> | |
| <span data-lang="tr">Bulunduğumuz bölgelere değer katan, sürdürülebilir yapılar inşa | |
| etmek.</span> | |
| <span data-lang="en">Building sustainable structures that add value to the regions we | |
| operate in.</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Değerlerimiz --> | |
| <div class="reveal"> | |
| <div class="text-center mb-16"> | |
| <span class="text-turquoise text-[11px] font-extrabold tracking-[0.5em] uppercase mb-4 block"><span | |
| data-lang="tr">İLKELERİMİZ</span><span data-lang="en">OUR PRINCIPLES</span></span> | |
| <h3 class="text-4xl font-extrabold tracking-tighter uppercase text-brand-dark"><span | |
| data-lang="tr">DEĞERLERİMİZ</span><span data-lang="en">OUR VALUES</span></h3> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10"> | |
| <!-- Value 1 --> | |
| <div class="border border-gray-100 p-8 hover:shadow-xl transition-all duration-300 group"> | |
| <div | |
| class="text-4xl font-black text-gray-100 group-hover:text-turquoise transition-colors mb-4"> | |
| 01</div> | |
| <h5 class="text-xl font-extrabold text-brand-dark mb-4 uppercase"><span | |
| data-lang="tr">Güven</span><span data-lang="en">Trust</span></h5> | |
| <p class="text-gray-500 text-sm leading-relaxed"><span data-lang="tr">Tüm iş süreçlerimizin | |
| temelini güven oluşturur. Arsa sahipleri, yatırımcılar ve konut alıcılarıyla kurduğumuz | |
| ilişkilerde şeffaflık ve dürüstlük ilkesiyle hareket ederiz.</span><span | |
| data-lang="en">Trust forms the basis of all our business processes. We act with | |
| transparency and honesty in our relations with landowners, investors, and home | |
| buyers.</span></p> | |
| </div> | |
| <!-- Value 2 --> | |
| <div class="border border-gray-100 p-8 hover:shadow-xl transition-all duration-300 group"> | |
| <div | |
| class="text-4xl font-black text-gray-100 group-hover:text-turquoise transition-colors mb-4"> | |
| 02</div> | |
| <h5 class="text-xl font-extrabold text-brand-dark mb-4 uppercase"><span | |
| data-lang="tr">Kalite</span><span data-lang="en">Quality</span></h5> | |
| <p class="text-gray-500 text-sm leading-relaxed"><span data-lang="tr">Kullandığımız malzemeden | |
| mühendislik çözümlerine, mimari tasarımdan işçilik detaylarına kadar her aşamada yüksek | |
| kalite standartlarını esas alırız.</span><span data-lang="en">We base our work on high | |
| quality standards at every stage, from materials to engineering solutions, architectural | |
| design to craftsmanship details.</span></p> | |
| </div> | |
| <!-- Value 3 --> | |
| <div class="border border-gray-100 p-8 hover:shadow-xl transition-all duration-300 group"> | |
| <div | |
| class="text-4xl font-black text-gray-100 group-hover:text-turquoise transition-colors mb-4"> | |
| 03</div> | |
| <h5 class="text-xl font-extrabold text-brand-dark mb-4 uppercase"><span | |
| data-lang="tr">Şeffaflık</span><span data-lang="en">Transparency</span></h5> | |
| <p class="text-gray-500 text-sm leading-relaxed"><span data-lang="tr">Projelendirme, sözleşme ve | |
| inşaat süreçlerinin tamamında açık, anlaşılır ve denetlenebilir bir yönetim anlayışı | |
| benimseriz.</span><span data-lang="en">We adopt an open, understandable, and auditable | |
| management approach in all project design, contract, and construction processes.</span> | |
| </p> | |
| </div> | |
| <!-- Value 4 --> | |
| <div class="border border-gray-100 p-8 hover:shadow-xl transition-all duration-300 group"> | |
| <div | |
| class="text-4xl font-black text-gray-100 group-hover:text-turquoise transition-colors mb-4"> | |
| 04</div> | |
| <h5 class="text-xl font-extrabold text-brand-dark mb-4 uppercase"><span | |
| data-lang="tr">Sürdürülebilirlik</span><span data-lang="en">Sustainability</span></h5> | |
| <p class="text-gray-500 text-sm leading-relaxed"><span data-lang="tr">Doğaya ve çevreye duyarlı, | |
| uzun ömürlü ve enerji verimliliği yüksek yapılar inşa ederek geleceğe değer bırakmayı | |
| hedefleriz.</span><span data-lang="en">We aim to leave value for the future by building | |
| environmentally friendly, long-lasting, and highly energy-efficient structures.</span> | |
| </p> | |
| </div> | |
| <!-- Value 5 --> | |
| <div class="border border-gray-100 p-8 hover:shadow-xl transition-all duration-300 group"> | |
| <div | |
| class="text-4xl font-black text-gray-100 group-hover:text-turquoise transition-colors mb-4"> | |
| 05</div> | |
| <h5 class="text-xl font-extrabold text-brand-dark mb-4 uppercase"><span data-lang="tr">Estetik & | |
| Fonksiyonellik</span><span data-lang="en">Aesthetics & Function</span></h5> | |
| <p class="text-gray-500 text-sm leading-relaxed"><span data-lang="tr">Modern mimariyi, | |
| kullanışlı yaşam alanlarıyla birleştirir; hem görsel hem işlevsel açıdan tatmin edici | |
| projeler geliştiririz.</span><span data-lang="en">We combine modern architecture with | |
| useful living spaces; developing projects that are both visually and functionally | |
| satisfying.</span></p> | |
| </div> | |
| <!-- Value 6 --> | |
| <div class="border border-gray-100 p-8 hover:shadow-xl transition-all duration-300 group"> | |
| <div | |
| class="text-4xl font-black text-gray-100 group-hover:text-turquoise transition-colors mb-4"> | |
| 08</div> | |
| <h5 class="text-xl font-extrabold text-brand-dark mb-4 uppercase"><span data-lang="tr">Yatırım | |
| Değeri</span><span data-lang="en">Investment Value</span></h5> | |
| <p class="text-gray-500 text-sm leading-relaxed"><span data-lang="tr">Geliştirdiğimiz her | |
| projede, konforlu yaşam alanları sunmanın yanı sıra yatırımcılarına yüksek prim | |
| potansiyeli sağlamayı amaçlarız.</span><span data-lang="en">In every project, we aim to | |
| provide high premium potential to investors along with offering comfortable living | |
| spaces.</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Project Section (WP Style Grid) --> | |
| <section id="projects" class="py-32 bg-brand-gray"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-8 reveal"> | |
| <div class="max-w-xl"> | |
| <span | |
| class="text-turquoise text-[11px] font-extrabold tracking-[0.5em] uppercase mb-4 block">SEÇİLMİŞ | |
| ÇALIŞMALAR</span> | |
| <h2 class="text-4xl md:text-5xl font-extrabold tracking-tighter uppercase"><span | |
| data-lang="tr">PROJE PORTFOLYOMUZ</span><span data-lang="en">OUR PROJECT PORTFOLIO</span> | |
| </h2> | |
| </div> | |
| <div class="flex flex-wrap gap-4 text-[10px] font-black tracking-widest uppercase"> | |
| <button onclick="filterProjects('all')" | |
| class="filter-btn px-6 py-3 border-b-2 border-turquoise text-brand-dark">ALL</button> | |
| <button onclick="filterProjects('cesme')" | |
| class="filter-btn px-6 py-3 border-b-2 border-transparent text-gray-400 hover:text-brand-dark transition-all">ÇEŞME</button> | |
| <button onclick="filterProjects('izmir')" | |
| class="filter-btn px-6 py-3 border-b-2 border-transparent text-gray-400 hover:text-brand-dark transition-all">İZMİR</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10" id="projectContainer"> | |
| <!-- Project Card 1: NOA TERRACE --> | |
| <div class="project-card relative overflow-hidden bg-white group reveal" data-year="cesme"> | |
| <div class="aspect-[4/5] overflow-hidden"> | |
| <img src="images/Noa Terrace/2.png" alt="Noa Terrace" | |
| class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"> | |
| </div> | |
| <div | |
| class="absolute inset-0 bg-brand-dark/90 opacity-0 group-hover:opacity-100 transition-all duration-500 p-12 flex flex-col justify-end text-white"> | |
| <div class="overlay-content"> | |
| <span class="text-turquoise text-[10px] font-bold tracking-[0.4em] mb-4 block">ÇEŞME / | |
| AYASARANDA</span> | |
| <h4 class="text-3xl font-extrabold mb-4 tracking-tighter uppercase">Noa Terrace</h4> | |
| <div class="h-[1px] w-12 bg-turquoise mb-4"></div> | |
| <p class="text-xs text-gray-300 font-bold tracking-widest uppercase mb-8 leading-loose"> | |
| <span data-lang="tr">Deniz Manzarasıyla Bütünleşen Rüya Gibi Bir Yaşam</span> | |
| <span data-lang="en">A Dream-like Life Integrated with Sea Views</span> | |
| </p> | |
| <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')" | |
| class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW | |
| PROJECT</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 2: NOA STAR --> | |
| <div class="project-card relative overflow-hidden bg-white group reveal" | |
| style="transition-delay: 200ms;" data-year="cesme"> | |
| <div class="aspect-[4/5] overflow-hidden"> | |
| <img src="images/Noa Star/7.png" alt="Noa Star" | |
| class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"> | |
| </div> | |
| <div | |
| class="absolute inset-0 bg-brand-dark/90 opacity-0 group-hover:opacity-100 transition-all duration-500 p-12 flex flex-col justify-end text-white"> | |
| <div class="overlay-content"> | |
| <span class="text-turquoise text-[10px] font-bold tracking-[0.4em] mb-4 block">ÇEŞME</span> | |
| <h4 class="text-3xl font-extrabold mb-4 tracking-tighter uppercase">Noa Star</h4> | |
| <div class="h-[1px] w-12 bg-turquoise mb-4"></div> | |
| <p class="text-xs text-gray-300 font-bold tracking-widest uppercase mb-8 leading-loose"> | |
| <span data-lang="tr">Mavi Sonsuzluğa Uyanmak</span> | |
| <span data-lang="en">Waking up to the Blue Infinity</span> | |
| </p> | |
| <a href="javascript:void(0)" onclick="openLightbox('noa-star')" | |
| class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW | |
| PROJECT</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 3: SOM BLU (SOM ÇEŞME) --> | |
| <div class="project-card relative overflow-hidden bg-white group reveal" | |
| style="transition-delay: 400ms;" data-year="cesme"> | |
| <div class="aspect-[4/5] overflow-hidden"> | |
| <img src="images/Som Blu/9.png" alt="Som Blu" | |
| class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"> | |
| </div> | |
| <div | |
| class="absolute inset-0 bg-brand-dark/90 opacity-0 group-hover:opacity-100 transition-all duration-500 p-12 flex flex-col justify-end text-white"> | |
| <div class="overlay-content"> | |
| <span class="text-turquoise text-[10px] font-bold tracking-[0.4em] mb-4 block">DALYAN / | |
| SAKIZLIKÖY</span> | |
| <h4 class="text-3xl font-extrabold mb-4 tracking-tighter uppercase">Som Blu</h4> | |
| <div class="h-[1px] w-12 bg-turquoise mb-4"></div> | |
| <p class="text-xs text-gray-300 font-bold tracking-widest uppercase mb-8 leading-loose"> | |
| <span data-lang="tr">Lüks Yaşamın En Saf Hali</span> | |
| <span data-lang="en">The Purest Form of Luxury Living</span> | |
| </p> | |
| <a href="javascript:void(0)" onclick="openLightbox('som-blu')" | |
| class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW | |
| PROJECT</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 4: İZMİR 35 --> | |
| <div class="project-card relative overflow-hidden bg-white group reveal" data-year="izmir"> | |
| <div class="aspect-[4/5] overflow-hidden"> | |
| <img src="images/İzmir 35/17.png" alt="İzmir 35 Narlıdere" | |
| class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"> | |
| </div> | |
| <div | |
| class="absolute inset-0 bg-brand-dark/90 opacity-0 group-hover:opacity-100 transition-all duration-500 p-12 flex flex-col justify-end text-white"> | |
| <div class="overlay-content"> | |
| <span class="text-turquoise text-[10px] font-bold tracking-[0.4em] mb-4 block">İZMİR / | |
| NARLIDERE</span> | |
| <h4 class="text-3xl font-extrabold mb-4 tracking-tighter uppercase">İzmir 35</h4> | |
| <div class="h-[1px] w-12 bg-turquoise mb-4"></div> | |
| <p class="text-xs text-gray-300 font-bold tracking-widest uppercase mb-8 leading-loose"> | |
| <span data-lang="tr">Körfez ve Orman Manzaralı Ferah Yaşam</span> | |
| <span data-lang="en">Spacious Living with Gulf and Forest Views</span> | |
| </p> | |
| <a href="javascript:void(0)" onclick="openLightbox('izmir-35')" | |
| class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW | |
| PROJECT</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 5: KEYA BORNOVA --> | |
| <div class="project-card relative overflow-hidden bg-white group reveal" | |
| style="transition-delay: 200ms;" data-year="izmir"> | |
| <div class="aspect-[4/5] overflow-hidden"> | |
| <img src="images/Keya Bornova/22.png" alt="Keya Bornova" | |
| class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"> | |
| </div> | |
| <div | |
| class="absolute inset-0 bg-brand-dark/90 opacity-0 group-hover:opacity-100 transition-all duration-500 p-12 flex flex-col justify-end text-white"> | |
| <div class="overlay-content"> | |
| <span class="text-turquoise text-[10px] font-bold tracking-[0.4em] mb-4 block">İZMİR / | |
| BORNOVA</span> | |
| <h4 class="text-3xl font-extrabold mb-4 tracking-tighter uppercase">Keya Bornova</h4> | |
| <div class="h-[1px] w-12 bg-turquoise mb-4"></div> | |
| <p class="text-xs text-gray-300 font-bold tracking-widest uppercase mb-8 leading-loose"> | |
| <span data-lang="tr">Şehrin Kalbinde Özel Yaşam Alanları</span> | |
| <span data-lang="en">Private Spaces in the Heart of the City</span> | |
| </p> | |
| <a href="javascript:void(0)" onclick="openLightbox('keya-bornova')" | |
| class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW | |
| PROJECT</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services (Minimal Architecture Style) --> | |
| <section id="services" class="py-32 bg-brand-dark text-white overflow-hidden"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center max-w-3xl mx-auto mb-20 reveal"> | |
| <span class="text-turquoise text-[11px] font-extrabold tracking-[0.5em] uppercase mb-4 block"><span | |
| data-lang="tr">UZMANLIK ALANIMIZ</span><span data-lang="en">OUR EXPERTISE</span></span> | |
| <h3 class="text-4xl md:text-5xl font-extrabold tracking-tighter uppercase leading-none"> | |
| <span data-lang="tr">Hizmetlerimiz</span> | |
| <span data-lang="en">Our Services</span> | |
| </h3> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 reveal" style="transition-delay: 200ms;"> | |
| <!-- Service 1 --> | |
| <div | |
| class="bg-white/5 border border-white/10 p-10 hover:border-turquoise transition-all duration-500 group"> | |
| <div | |
| class="w-12 h-12 bg-turquoise/10 text-turquoise flex items-center justify-center rounded-sm mb-8 group-hover:bg-turquoise group-hover:text-brand-dark transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"> | |
| </path> | |
| </svg> | |
| </div> | |
| <h4 class="text-xl font-extrabold mb-4 tracking-wide uppercase"><span data-lang="tr">Kat Karşılığı | |
| İnşaat</span><span data-lang="en">Landowner Projects</span></h4> | |
| <p class="text-gray-400 text-sm leading-relaxed"><span data-lang="tr">Arsa sahipleriyle karşılıklı | |
| güven ve kazanç esasına dayalı kat karşılığı anlaşmalar yaparak; arsaların en verimli | |
| şekilde projelendirilmesini sağlıyoruz.</span><span data-lang="en">We ensure the most | |
| efficient design of lands by making land-for-flats agreements based on mutual trust and | |
| profit with landowners.</span></p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div | |
| class="bg-white/5 border border-white/10 p-10 hover:border-turquoise transition-all duration-500 group"> | |
| <div | |
| class="w-12 h-12 bg-turquoise/10 text-turquoise flex items-center justify-center rounded-sm mb-8 group-hover:bg-turquoise group-hover:text-brand-dark transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"> | |
| </path> | |
| </svg> | |
| </div> | |
| <h4 class="text-xl font-extrabold mb-4 tracking-wide uppercase"><span data-lang="tr">Lüks Konut | |
| Projeleri</span><span data-lang="en">Luxury Residential</span></h4> | |
| <p class="text-gray-400 text-sm leading-relaxed"><span data-lang="tr">Modern mimari, kaliteli | |
| malzeme ve üst segment yaşam standartlarıyla tasarlanan lüks daire projeleri | |
| geliştiriyoruz.</span><span data-lang="en">We develop luxury apartment projects designed | |
| with modern architecture, quality materials, and upper-segment living standards.</span></p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div | |
| class="bg-white/5 border border-white/10 p-10 hover:border-turquoise transition-all duration-500 group"> | |
| <div | |
| class="w-12 h-12 bg-turquoise/10 text-turquoise flex items-center justify-center rounded-sm mb-8 group-hover:bg-turquoise group-hover:text-brand-dark transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <h4 class="text-xl font-extrabold mb-4 tracking-wide uppercase"><span data-lang="tr">Villa | |
| Projeleri</span><span data-lang="en">Villa Projects</span></h4> | |
| <p class="text-gray-400 text-sm leading-relaxed"><span data-lang="tr">Özel yaşam beklentilerine | |
| hitap eden, müstakil ve prestijli villa projeleri üretiyoruz. Doğayla iç içe konseptler | |
| tasarlıyoruz.</span><span data-lang="en">We produce detached and prestigious villa projects | |
| for special living expectations. We design concepts intertwined with nature.</span></p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div | |
| class="bg-white/5 border border-white/10 p-10 hover:border-turquoise transition-all duration-500 group"> | |
| <div | |
| class="w-12 h-12 bg-turquoise/10 text-turquoise flex items-center justify-center rounded-sm mb-8 group-hover:bg-turquoise group-hover:text-brand-dark transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <h4 class="text-xl font-extrabold mb-4 tracking-wide uppercase"><span data-lang="tr">Proje & | |
| Konsept</span><span data-lang="en">Concept Design</span></h4> | |
| <p class="text-gray-400 text-sm leading-relaxed"><span data-lang="tr">Arsanın lokasyonu ve imar | |
| durumu doğrultusunda en doğru mimari konsepti oluşturuyor, fizibilite analizlerini | |
| yapıyoruz.</span><span data-lang="en">We create the most accurate architectural concept in | |
| line with the location and zoning status, performing feasibility analysis.</span></p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div | |
| class="bg-white/5 border border-white/10 p-10 hover:border-turquoise transition-all duration-500 group"> | |
| <div | |
| class="w-12 h-12 bg-turquoise/10 text-turquoise flex items-center justify-center rounded-sm mb-8 group-hover:bg-turquoise group-hover:text-brand-dark transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <h4 class="text-xl font-extrabold mb-4 tracking-wide uppercase"><span data-lang="tr">Satış & | |
| Pazarlama</span><span data-lang="en">Sales Management</span></h4> | |
| <p class="text-gray-400 text-sm leading-relaxed"><span data-lang="tr">Geliştirdiğimiz projelerin | |
| satış süreçlerini kendi bünyemizde yöneterek; doğru hedef kitleye ve stratejiyle | |
| ulaşılmasını sağlıyoruz.</span><span data-lang="en">By managing the sales processes of our | |
| projects in-house, we ensure reaching the right target audience with the right | |
| strategy.</span></p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div | |
| class="bg-white/5 border border-white/10 p-10 hover:border-turquoise transition-all duration-500 group"> | |
| <div | |
| class="w-12 h-12 bg-turquoise/10 text-turquoise flex items-center justify-center rounded-sm mb-8 group-hover:bg-turquoise group-hover:text-brand-dark transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <h4 class="text-xl font-extrabold mb-4 tracking-wide uppercase"><span data-lang="tr">Anahtar Teslim | |
| İnşaat</span><span data-lang="en">Turnkey Construction</span></h4> | |
| <p class="text-gray-400 text-sm leading-relaxed"><span data-lang="tr">Projelerimizi söz verdiğimiz | |
| süre ve kalite standartlarında tamamlayarak, eksiksiz şekilde teslim ediyoruz.</span><span | |
| data-lang="en">We complete and flawlessly deliver our projects within the promised timeframe | |
| and quality standards.</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact (WP-90 Style) --> | |
| <section id="contact" class="py-32 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid lg:grid-cols-2 gap-20"> | |
| <div class="reveal"> | |
| <h2 class="text-5xl font-extrabold tracking-tighter mb-12 uppercase leading-none"> | |
| <span data-lang="tr">Hayalinizdeki <br> Projeyi <span | |
| class="text-turquoise">Tartışalım.</span></span> | |
| <span data-lang="en">Let's Discuss <br> Your <span class="text-turquoise">Dream | |
| Project.</span></span> | |
| </h2> | |
| <div class="space-y-10"> | |
| <div> | |
| <h4 class="text-[10px] font-black tracking-[0.4em] uppercase text-gray-400 mb-4">ADRES | |
| </h4> | |
| <p class="text-xl font-bold text-brand-dark">GÜNCELLENECEK, TÜRKİYE</p> | |
| </div> | |
| <div> | |
| <h4 class="text-[10px] font-black tracking-[0.4em] uppercase text-gray-400 mb-4">TELEFON | |
| </h4> | |
| <p class="text-xl font-bold text-brand-dark">0507 738 0059</p> | |
| </div> | |
| <div> | |
| <h4 class="text-[10px] font-black tracking-[0.4em] uppercase text-gray-400 mb-4">YETKİLİ | |
| </h4> | |
| <p class="text-xl font-bold text-brand-dark">KEMAL FİDAN / ARJEN KAHRAMANER</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="reveal" style="transition-delay: 300ms;"> | |
| <form action="https://formspree.io/f/your_id_here" method="POST" onsubmit="handleForm(event)" | |
| class="space-y-8"> | |
| <div | |
| class="relative border-b-2 border-gray-100 focus-within:border-turquoise transition-all py-2"> | |
| <label | |
| class="text-[10px] font-black tracking-[0.3em] uppercase text-gray-400">NAME</label> | |
| <input type="text" name="name" required | |
| class="w-full bg-transparent outline-none py-2 font-bold text-brand-dark"> | |
| </div> | |
| <div | |
| class="relative border-b-2 border-gray-100 focus-within:border-turquoise transition-all py-2"> | |
| <label | |
| class="text-[10px] font-black tracking-[0.3em] uppercase text-gray-400">EMAIL</label> | |
| <input type="email" name="email" required | |
| class="w-full bg-transparent outline-none py-2 font-bold text-brand-dark"> | |
| </div> | |
| <div | |
| class="relative border-b-2 border-gray-100 focus-within:border-turquoise transition-all py-2"> | |
| <label | |
| class="text-[10px] font-black tracking-[0.3em] uppercase text-gray-400">MESSAGE</label> | |
| <textarea name="message" rows="3" required | |
| class="w-full bg-transparent outline-none py-2 font-bold text-brand-dark resize-none"></textarea> | |
| </div> | |
| <button type="submit" | |
| class="bg-brand-dark text-white px-12 py-5 text-[11px] font-extrabold tracking-[0.3em] uppercase hover:bg-turquoise hover:text-brand-dark transition-all duration-300"> | |
| <span data-lang="tr">MESAJI GÖNDER</span><span data-lang="en">SEND MESSAGE</span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-brand-dark text-white py-20 border-t border-white/5"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="mb-12"> | |
| <span class="text-4xl font-extrabold tracking-tighter">KEYA <span | |
| class="text-turquoise">İNŞAAT</span></span> | |
| </div> | |
| <div | |
| class="flex flex-wrap justify-center gap-10 text-[11px] font-extrabold tracking-widest text-gray-500 uppercase mb-16"> | |
| <a href="#home" class="hover:text-white transition-colors">HOME</a> | |
| <a href="#about" class="hover:text-white transition-colors">ABOUT</a> | |
| <a href="#projects" class="hover:text-white transition-colors">PROJECTS</a> | |
| <a href="#services" class="hover:text-white transition-colors">SERVICES</a> | |
| <a href="#contact" class="hover:text-white transition-colors">CONTACT</a> | |
| </div> | |
| <div class="text-[10px] font-bold tracking-[0.4em] text-gray-600 uppercase"> | |
| © 2018 - 2026 KEYA REKLAMCILIK DEMİR GELİK SANAYİ TİC. LTD. ŞTİ. ALL RIGHTS RESERVED. | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- WhatsApp Button --> | |
| <a href="https://wa.me/905077380059" target="_blank" class="whatsapp-float"> | |
| <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"> | |
| <path | |
| d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.608.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.085 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.308 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.008-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.438 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.937 3.672 1.433 5.662 1.433h.005c6.554 0 11.89-5.335 11.893-11.892a11.826 11.826 0 00-3.393-8.417"> | |
| </path> | |
| </svg> | |
| </a> | |
| <!-- Notification system --> | |
| <div id="toast" | |
| class="fixed top-24 right-6 bg-turquoise text-brand-dark px-8 py-4 rounded-sm shadow-2xl transform translate-x-[200%] transition-transform duration-700 z-[100] font-black text-xs tracking-widest uppercase"> | |
| Mesajınız başarıyla gönderildi! | |
| </div> | |
| <script> | |
| // Project Gallery Data | |
| const projectGalleries = { | |
| "noa-terrace": ["images/Noa Terrace/1.png", "images/Noa Terrace/2.png", "images/Noa Terrace/3.png", "images/Noa Terrace/4.png", "images/Noa Terrace/5.png"], | |
| "noa-star": ["images/Noa Star/6.png", "images/Noa Star/7.png", "images/Noa Star/8.png"], | |
| "som-blu": ["images/Som Blu/9.png", "images/Som Blu/10.png", "images/Som Blu/11.png", "images/Som Blu/12.png", "images/Som Blu/14.png"], | |
| "izmir-35": ["images/İzmir 35/17.png", "images/İzmir 35/18.png", "images/İzmir 35/19.png", "images/İzmir 35/20.png"], | |
| "keya-bornova": ["images/Keya Bornova/22.png", "images/Keya Bornova/23.png"] | |
| }; | |
| let currentGallery = []; | |
| let currentIndex = 0; | |
| function openLightbox(projectId) { | |
| currentGallery = projectGalleries[projectId]; | |
| currentIndex = 0; | |
| updateLightbox(); | |
| document.getElementById("lightbox").classList.add("active"); | |
| document.body.style.overflow = "hidden"; | |
| } | |
| function closeLightbox() { | |
| document.getElementById("lightbox").classList.remove("active"); | |
| document.body.style.overflow = "auto"; | |
| } | |
| function changeImage(step) { | |
| currentIndex = (currentIndex + step + currentGallery.length) % currentGallery.length; | |
| updateLightbox(); | |
| } | |
| function updateLightbox() { | |
| document.getElementById("lightboxImg").src = currentGallery[currentIndex]; | |
| } | |
| // Language State Management | |
| let currentLang = 'tr'; | |
| function switchLanguage() { | |
| currentLang = currentLang === 'tr' ? 'en' : 'tr'; | |
| document.documentElement.setAttribute('lang', currentLang); | |
| document.getElementById('langBtnText').innerText = currentLang === 'tr' ? 'ENGLISH' : 'TÜRKÇE'; | |
| } | |
| // Project Filtering Logic | |
| function filterProjects(category) { | |
| const cards = document.querySelectorAll('.project-card'); | |
| const btns = document.querySelectorAll('.filter-btn'); | |
| // Update UI buttons | |
| btns.forEach(btn => { | |
| btn.classList.remove('border-turquoise', 'text-brand-dark'); | |
| btn.classList.add('border-transparent', 'text-gray-400'); | |
| }); | |
| event.currentTarget.classList.add('border-turquoise', 'text-brand-dark'); | |
| event.currentTarget.classList.remove('text-gray-400'); | |
| cards.forEach(card => { | |
| if (category === 'all' || card.getAttribute('data-year') === category) { | |
| card.style.display = 'block'; | |
| setTimeout(() => card.style.opacity = '1', 10); | |
| } else { | |
| card.style.display = 'none'; | |
| card.style.opacity = '0'; | |
| } | |
| }); | |
| } | |
| // Header Scroll Effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('mainHeader'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('header-scrolled'); | |
| } else { | |
| header.classList.remove('header-scrolled'); | |
| } | |
| }); | |
| // Reveal on Scroll Logic | |
| function reveal() { | |
| var reveals = document.querySelectorAll(".reveal"); | |
| for (var i = 0; i < reveals.length; i++) { | |
| var windowHeight = window.innerHeight; | |
| var elementTop = reveals[i].getBoundingClientRect().top; | |
| var elementVisible = 150; | |
| if (elementTop < windowHeight - elementVisible) { | |
| reveals[i].classList.add("active"); | |
| } | |
| } | |
| } | |
| window.addEventListener("scroll", reveal); | |
| // Trigger initial reveal | |
| window.onload = reveal; | |
| // Form Handling | |
| async function handleForm(event) { | |
| // 1. Stop the browser from redirecting/reloading | |
| event.preventDefault(); | |
| const form = event.target; | |
| const data = new FormData(form); | |
| const toast = document.getElementById('toast'); | |
| // 2. Send the data to Formspree using AJAX | |
| try { | |
| const response = await fetch(form.action, { | |
| method: form.method, | |
| body: data, | |
| headers: { | |
| 'Accept': 'application/json' | |
| } | |
| }); | |
| // 3. Handle the success animation | |
| if (response.ok) { | |
| toast.innerText = currentLang === 'tr' ? "MESAJINIZ BAŞARIYLA İLETİLDİ!" : "YOUR MESSAGE HAS BEEN SENT!"; | |
| toast.style.transform = "translateX(0)"; | |
| // Hide toast after 4 seconds | |
| setTimeout(() => { | |
| toast.style.transform = "translateX(200%)"; | |
| }, 4000); | |
| form.reset(); | |
| } else { | |
| const errorData = await response.json(); | |
| alert(errorData.error || "Oops! There was a problem submitting your form"); | |
| } | |
| } catch (error) { | |
| alert("Network error. Please try again later."); | |
| } | |
| } | |
| </script> | |
| <!-- Lightbox Modal --> | |
| <div id="lightbox" class="lightbox" onclick="closeLightbox()"> | |
| <span class="lightbox-close" onclick="closeLightbox()">×</span> | |
| <div class="lightbox-content" onclick="event.stopPropagation()"> | |
| <img id="lightboxImg" src="" alt="Project Image" class="lightbox-img"> | |
| <div class="lightbox-nav lightbox-prev" onclick="changeImage(-1)">❮</div> | |
| <div class="lightbox-nav lightbox-next" onclick="changeImage(1)">❯</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |