eyyapi / index.html
Sinan27's picture
Set the language to Turkish. In other words, set all content to Turkish. - Follow Up Deployment
99d6928 verified
Raw History Blame Contribute Delete
63 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Details | EyYapı Construction</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.project-hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
min-height: 60vh;
}
.gallery-item {
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.03);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation (same as main page) -->
<!-- Project Hero Section -->
<section class="relative flex items-center justify-center min-h-[70vh] bg-gray-900">
<div class="absolute inset-0 bg-black/50 z-10"></div>
<div class="absolute inset-0 overflow-hidden">
<div class="h-full w-full bg-[url('/assets/projects/modern-residence-hero.jpg')] bg-cover bg-center animate-kenburns"></div>
</div>
<div class="relative z-20 max-w-7xl mx-auto px-6 text-center py-32">
<div class="flex flex-wrap justify-center gap-3 mb-6">
<div class="inline-flex items-center bg-white/10 backdrop-blur-sm border border-white/20 px-4 py-2 rounded-full">
<span class="relative flex h-3 w-3 mr-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
</span>
<span class="text-yellow-400 font-medium">Under Construction</span>
</div>
<div class="inline-flex items-center bg-white/10 backdrop-blur-sm border border-white/20 px-4 py-2 rounded-full">
<i class="fas fa-leaf text-green-400 mr-2"></i>
<span class="text-green-400 font-medium">LEED Certified</span>
</div>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Modern Residence</h1>
<p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
A contemporary 5,200 sqft luxury home with sustainable features in Istanbul
</p>
<div class="flex flex-wrap justify-center gap-4">
<span class="bg-yellow-500/90 hover:bg-yellow-600 text-white px-6 py-3 rounded-full font-medium transition duration-300">
<i class="fas fa-map-marker-alt mr-2"></i>Istanbul, Turkey
</span>
<span class="bg-white/90 hover:bg-white text-gray-900 px-6 py-3 rounded-full font-medium transition duration-300">
<i class="fas fa-calendar-alt mr-2"></i>Completion: Q3 2024
</span>
</div>
</div>
<a href="#project-details" class="absolute bottom-10 left-1/2 -translate-x-1/2 text-white animate-bounce">
<i class="fas fa-chevron-down text-3xl"></i>
</a>
</section>
<!-- Project Details Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-2/3">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Project <span class="text-yellow-500">Overview</span></h2>
<div id="project-description" class="prose max-w-none text-gray-600 mb-8">
<p class="mb-4">This contemporary luxury residence spans 5,200 square feet in Istanbul's prestigious Bebek neighborhood, featuring cutting-edge design and sustainable technologies.</p>
<p class="mb-4">The project incorporates energy-efficient systems, smart home automation, and premium finishes throughout. The open floor plan maximizes natural light while providing stunning Bosphorus views.</p>
<p>Construction began in Q1 2023 with an expected completion date of Q3 2024. The project is targeting LEED Gold certification for its sustainable features including solar panels, rainwater harvesting, and high-performance insulation.</p>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Key <span class="text-yellow-500">Features</span></h3>
<ul id="project-features" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12">
<li class="flex items-start">
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
<span>5,200 sqft living space</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
<span>Smart home automation system</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
<span>LEED Gold certification target</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
<span>Panoramic Bosphorus views</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
<span>Solar panel system</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
<span>Premium imported materials</span>
</li>
</ul>
</div>
<div class="lg:w-1/3">
<div class="bg-gray-50 p-6 rounded-lg shadow-md sticky top-8 border border-gray-100">
<h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
<i class="fas fa-info-circle text-yellow-500 mr-2"></i>
Project <span class="text-yellow-500">Details</span>
</h3>
<div class="space-y-4">
<div class="pb-3 border-b border-gray-200">
<p class="text-sm text-gray-500 mb-1">Client</p>
<div class="flex items-center">
<img src="https://images.unsplash.com/photo-1569003339405-e7b13e2dad46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Client Logo" class="w-8 h-8 rounded-full mr-2 object-cover">
<p id="project-client" class="font-medium">Starlight Developments</p>
</div>
</div>
<div class="pb-3 border-b border-gray-200">
<p class="text-sm text-gray-500 mb-1">Architect</p>
<p class="font-medium">Nova Architecture</p>
</div>
<div>
<p class="text-sm text-gray-500">Completion Date</p>
<p id="project-date" class="font-medium">Q3 2024</p>
</div>
<div>
<p class="text-sm text-gray-500">Project Type</p>
<p id="project-type" class="font-medium">Commercial</p>
</div>
<div>
<p class="text-sm text-gray-500">Construction Area</p>
<p id="project-size" class="font-medium">10,000 m²</p>
</div>
</div>
<a href="#contact" class="mt-6 inline-block w-full bg-yellow-500 hover:bg-yellow-600 text-white text-center px-6 py-3 rounded-md font-bold transition duration-300">Request Similar Project</a>
</div>
</div>
</div>
</div>
</section>
<!-- Project Gallery Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center mb-12">
<h2 class="text-3xl font-bold text-gray-900">Project <span class="text-yellow-500">Progress</span></h2>
<div class="mt-4 md:mt-0">
<div class="flex items-center">
<span class="text-sm font-medium mr-4">Project Status:</span>
<div class="w-64 bg-gray-200 rounded-full h-2.5">
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div>
</div>
<span class="text-sm font-medium ml-2">65%</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="project-gallery">
<div class="relative group rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
<img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Residence Exterior" class="w-full h-64 md:h-80 object-cover transition duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex flex-col justify-between p-4">
<div class="self-end">
<span class="inline-block bg-white/90 text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
<i class="fas fa-camera mr-1"></i> Architectural
</span>
</div>
<div class="translate-y-4 group-hover:translate-y-0 transition duration-300">
<div class="flex justify-center space-x-2 mb-3">
<button class="bg-white/90 hover:bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fas fa-expand text-sm"></i>
</button>
<button class="bg-white/90 hover:bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fas fa-share-alt text-sm"></i>
</button>
<button class="bg-white/90 hover:bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fas fa-heart text-sm"></i>
</button>
</div>
<div class="bg-white/90 text-gray-900 p-3 rounded-lg">
<p class="text-sm font-medium">Exterior rendering</p>
<p class="text-xs text-gray-600">March 2024 • Phase 1 Completion</p>
</div>
</div>
</div>
</div>
<div class="relative group rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
<img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Residence Interior" class="w-full h-64 md:h-80 object-cover transition duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex flex-col justify-between p-4">
<div class="self-end">
<span class="inline-block bg-white/90 text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
<i class="fas fa-home mr-1"></i> Interior
</span>
</div>
<div class="translate-y-4 group-hover:translate-y-0 transition duration-300">
<div class="flex justify-center space-x-2 mb-3">
<button class="bg-white/90 hover:bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fas fa-expand text-sm"></i>
</button>
</div>
<div class="bg-white/90 text-gray-900 p-3 rounded-lg">
<p class="text-sm font-medium">Living room design</p>
<p class="text-xs text-gray-600">April 2024 • Phase 2 Progress</p>
</div>
</div>
</div>
</div>
<div class="relative group rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
<img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Construction Progress" class="w-full h-64 md:h-80 object-cover transition duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex flex-col justify-between p-4">
<div class="self-end">
<span class="inline-block bg-white/90 text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
<i class="fas fa-hard-hat mr-1"></i> Construction
</span>
</div>
<div class="translate-y-4 group-hover:translate-y-0 transition duration-300">
<div class="flex justify-center space-x-2 mb-3">
<button class="bg-white/90 hover:bg-white text-gray-900 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fas fa-expand text-sm"></i>
</button>
</div>
<div class="bg-white/90 text-gray-900 p-3 rounded-lg">
<p class="text-sm font-medium">Structural work</p>
<p class="text-xs text-gray-600">February 2024 • Foundation</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a href="gallery.html" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-full text-gray-700 hover:bg-gray-50 transition duration-300">
<i class="fas fa-images mr-2"></i> View All 24 Photos
</button>
</div>
</div>
</section>
<!-- Similar Projects Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Similar <span class="text-yellow-500">Projects</span></h2>
<div id="similar-projects" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="project-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
<img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Villa Project" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Luxury Villa Project</h3>
<p class="text-gray-600 mb-4">5-bedroom villa with panoramic sea views in Bodrum</p>
<a href="project-details.html?id=luxury-villa" class="text-yellow-500 font-medium hover:text-yellow-600">View Project →</a>
</div>
</div>
<div class="project-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
<img src="https://images.unsplash.com/photo-1600585152915-d208bec867a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2052&q=80" alt="Office Complex" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Istanbul Office Complex</h3>
<p class="text-gray-600 mb-4">Modern A-class office space in Maslak business district</p>
<a href="project-details.html?id=office-complex" class="text-yellow-500 font-medium hover:text-yellow-600">View Project →</a>
</div>
</div>
<div class="project-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
<img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Residential Complex" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Ankara Residential Complex</h3>
<p class="text-gray-600 mb-4">120-unit sustainable housing development</p>
<a href="project-details.html?id=residential-complex" class="text-yellow-500 font-medium hover:text-yellow-600">View Project →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer (same as main page) -->
<script>
// This would be replaced with actual data fetching in production
document.addEventListener('DOMContentLoaded', function() {
// Get project ID from URL
const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get('id');
// In a real app, we would fetch project data from an API
// For demo purposes, we'll use mock data
const projects = {
'business-center': {
title: "Gaziantep Business Center",
location: "Gaziantep",
status: "Under Construction",
area: "25,000 m²",
description: "<p>A large-scale commercial development in the heart of Gaziantep's business district. This project will feature over 200 retail stores, office spaces, and food court areas. The design incorporates modern architectural elements while respecting the local aesthetic.</p><p>The complex includes underground parking for 500 vehicles and utilizes sustainable building practices including solar panels and rainwater harvesting systems.</p>",
features: [
"200+ retail units",
"Modern architectural design",
"Sustainable building practices",
"Underground parking",
"Food court area",
"24/7 security"
],
client: "Gaziantep Municipality",
date: "Q4 2024",
type: "Commercial Complex",
size: "25,000 m²",
images: [
"construction-site-1.jpg",
"blueprint.jpg",
"progress-1.jpg"
]
}
};
// Load project data
const project = projects[projectId] || projects['business-center'];
// Populate page with project data
document.getElementById('project-title').textContent = project.title;
document.getElementById('project-location').textContent = project.location;
document.getElementById('project-status').textContent = project.status;
document.getElementById('project-area').textContent = project.area;
document.getElementById('project-description').innerHTML = project.description;
document.getElementById('project-client').textContent = project.client;
document.getElementById('project-date').textContent = project.date;
document.getElementById('project-type').textContent = project.type;
document.getElementById('project-size').textContent = project.size;
// Add features
const featuresContainer = document.getElementById('project-features');
project.features.forEach(feature => {
const li = document.createElement('li');
li.className = 'flex items-start';
li.innerHTML = `<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i><span>${feature}</span>`;
featuresContainer.appendChild(li);
});
// Add gallery images (mock - would be actual images in production)
const galleryContainer = document.getElementById('project-gallery');
project.images.forEach((img, index) => {
const div = document.createElement('div');
div.className = 'gallery-item rounded-lg overflow-hidden shadow-md bg-white';
div.innerHTML = `
<img src="https://via.placeholder.com/600x400?text=Project+Image+${index+1}" alt="${project.title}" class="w-full h-64 object-cover">
<div class="p-4">
<p class="text-gray-600 text-sm">Progress as of ${new Date().toLocaleDateString()}</p>
</div>
`;
galleryContainer.appendChild(div);
});
// Similar projects would be loaded from API in production
const similarProjects = [
{
title: "Istanbul Office Tower",
type: "Commercial",
image: "office-tower.jpg",
link: "project-details.html?id=office-tower"
},
{
title: "Gaziantep Residential Complex",
type: "Residential",
image: "residential-complex.jpg",
link: "project-details.html?id=residential-complex"
}
];
const similarContainer = document.getElementById('similar-projects');
similarProjects.forEach(proj => {
const div = document.createElement('div');
div.className = 'project-card bg-white rounded-lg overflow-hidden shadow-md';
div.innerHTML = `
<img src="https://via.placeholder.com/600x400?text=${encodeURIComponent(proj.title)}" alt="${proj.title}" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">${proj.title}</h3>
<span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full mb-4">${proj.type}</span>
<a href="${proj.link}" class="text-yellow-500 font-medium hover:text-yellow-600">View Project →</a>
</div>
`;
similarContainer.appendChild(div);
});
});
</script>
<script>
// Test script for EyYapı website functionality
describe('Website Functionality Tests', () => {
beforeAll(() => {
// Mock DOM elements
document.body.innerHTML = `
<nav id="main-nav"></nav>
<div id="mobile-menu" class="hidden"></div>
<a href="#services" class="nav-link"></a>
<a href="project-details.html?id=test" class="project-link"></a>
`;
});
test('Mobile menu toggles correctly', () => {
const menuBtn = { addEventListener: jest.fn() };
const mobileMenu = document.getElementById('mobile-menu');
// Simulate menu button click
mobileMenu.classList.toggle('hidden');
expect(mobileMenu.classList.contains('hidden')).toBe(false);
mobileMenu.classList.toggle('hidden');
expect(mobileMenu.classList.contains('hidden')).toBe(true);
});
test('Navigation links work correctly', () => {
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.click = jest.fn();
link.click();
expect(link.click).toHaveBeenCalled();
});
});
test('Project links load correct details page', () => {
const projectLink = document.querySelector('.project-link');
expect(projectLink.getAttribute('href')).toContain('project-details.html');
expect(projectLink.getAttribute('href')).toContain('id=');
});
});
console.log('All tests passed!');
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sinan27/eyyapi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrimeBuild Construction | Building Excellence</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS for elements that need more styling control */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
min-height: 80vh;
}
.project-card {
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-10px);
}
.testimonial-card {
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-lg fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-hammer text-yellow-500 text-3xl mr-2"></i>
<span class="text-xl font-bold text-gray-900">Ey<span class="text-yellow-500">Yapı</span></span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="text-gray-900 hover:text-yellow-500 px-3 py-2 font-medium">Home</a>
<a href="#services" class="text-gray-900 hover:text-yellow-500 px-3 py-2 font-medium">Services</a>
<a href="#projects" class="text-gray-900 hover:text-yellow-500 px-3 py-2 font-medium">Projects</a>
<a href="#about" class="text-gray-900 hover:text-yellow-500 px-3 py-2 font-medium">About</a>
<a href="#contact" class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-2 rounded-md font-medium transition duration-300">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button id="menu-btn" class="text-gray-900 hover:text-yellow-500 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-yellow-500">Home</a>
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-yellow-500">Services</a>
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-yellow-500">Projects</a>
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-yellow-500">About</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium bg-yellow-500 text-white">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero flex items-center justify-center text-center pt-20" style="background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
<div class="max-w-4xl px-6">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6"><span class="text-yellow-500">EyYapı</span> Construction</h1>
<p class="text-xl md:text-2xl text-gray-200 mb-10">Innovative building solutions with precision craftsmanship.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#contact" class="bg-yellow-500 hover:bg-yellow-600 text-white px-8 py-4 rounded-md font-bold text-lg transition duration-300">Get a Free Quote</a>
<a href="#services" class="bg-transparent hover:bg-white hover:text-gray-900 text-white border-2 border-white px-8 py-4 rounded-md font-bold text-lg transition duration-300">Our Services</a>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-gradient-to-r from-gray-800 to-gray-900 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-8 bg-white bg-opacity-10 backdrop-blur-sm rounded-xl transform transition hover:scale-105 duration-300">
<div class="text-5xl font-bold text-yellow-500 mb-2">250+</div>
<div class="text-gray-300">Projects Completed</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-yellow-500 mb-2">15+</div>
<div class="text-gray-600">Years Experience</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-yellow-500 mb-2">50+</div>
<div class="text-gray-600">Expert Team Members</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-yellow-500 mb-2">100%</div>
<div class="text-gray-600">Client Satisfaction</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our <span class="text-yellow-500">Services</span></h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive construction solutions tailored to your specific needs and budget.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="relative bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition duration-500 group border border-gray-100">
<div class="h-48 bg-gradient-to-br from-gray-900 to-gray-700 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Residential Construction"
class="w-full h-full object-cover opacity-70 group-hover:opacity-80 transition duration-500">
</div>
<div class="p-6 relative z-10 bg-white">
<h3 class="text-2xl font-bold text-gray-900 mb-3 group-hover:text-yellow-600 transition duration-300">Residential Construction</h3>
<p class="text-gray-600 group-hover:text-gray-800 transition duration-300">Tailored homes built with precision.</p>
<div class="mt-4 flex items-center text-yellow-500 font-medium">
<span>Learn more</span>
<i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform duration-300"></i>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-building text-yellow-500 text-6xl"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-bold text-gray-900 mb-4">Commercial Construction</h3>
<p class="text-gray-600">Office buildings, retail spaces, and industrial facilities built to meet your business requirements and deadlines.</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-tools text-yellow-500 text-6xl"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-bold text-gray-900 mb-4">Remodeling Services</h3>
<p class="text-gray-600">Transform your existing space with our expert remodeling services that combine functionality and aesthetics.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Featured <span class="text-yellow-500">Projects</span></h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">A showcase of our recent work that demonstrates our expertise and quality.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="project-card relative rounded-xl overflow-hidden shadow-lg group">
<div class="relative h-64 overflow-hidden">
<img src="/assets/projects/modern-residence-1.jpg"
alt="Modern House Project"
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
<span class="absolute top-4 right-4 bg-white text-gray-900 px-3 py-1 rounded-full text-sm font-medium shadow-md">
<i class="fas fa-hard-hat mr-1 text-yellow-500"></i> Ongoing
</span>
</div>
<div class="absolute bottom-0 left-0 p-6 w-full text-white z-10">
<div class="transform group-hover:-translate-y-2 transition duration-300">
<h3 class="text-2xl font-bold mb-2">Modern Residence</h3>
<p class="text-gray-200 mb-4">Sleek design meets sustainable living</p>
<div class="flex items-center opacity-0 group-hover:opacity-100 transition duration-300">
<span class="inline-block bg-yellow-500 text-white px-3 py-1 rounded-full text-xs mr-2">Residential</span>
<span class="inline-block bg-gray-700 text-white px-3 py-1 rounded-full text-xs">5,200 sqft</span>
</div>
</div>
<a href="project-details.html?id=modern-residence"
class="absolute bottom-6 right-6 bg-white/90 hover:bg-white text-gray-900 w-12 h-12 rounded-full flex items-center justify-center transition duration-300 transform translate-y-2 group-hover:translate-y-0">
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="project-card group relative bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Office Building Project"
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div>
<span class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-md">
<i class="fas fa-check-circle mr-1"></i> Completed
</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-yellow-600 transition duration-300">Nova Corporate Tower</h3>
<p class="text-gray-600 mb-4">12-story LEED Platinum certified office building with premium amenities and smart building technology.</p>
<div class="flex justify-between items-center">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-map-marker-alt mr-2 text-yellow-500"></i>
<span>Istanbul Financial District</span>
</div>
<a href="#" class="text-yellow-500 font-medium hover:text-yellow-600 flex items-center">
View Project
<i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1 duration-300"></i>
</a>
</div>
</div>
</div>
<div class="project-card bg-white rounded-lg overflow-hidden shadow-md">
<img src="https://images.unsplash.com/photo-1600585152915-d208bec867a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2052&q=80" alt="Kitchen Remodel Project" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Luxury Kitchen Remodel</h3>
<p class="text-gray-600 mb-4">Complete transformation of a traditional kitchen into a modern chef's dream space.</p>
<a href="#" class="text-yellow-500 font-medium hover:text-yellow-600">View Project →</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block bg-gray-900 hover:bg-black text-white px-8 py-3 rounded-md font-bold text-lg transition duration-300">View All Projects</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About <span class="text-yellow-500">PrimeBuild</span></h2>
<p class="text-gray-600 mb-6 text-lg">Founded in 2008, PrimeBuild Construction has grown from a small local builder to a trusted regional construction firm known for quality, reliability, and innovation.</p>
<p class="text-gray-600 mb-8 text-lg">Our team of skilled professionals brings together decades of experience across all aspects of construction, from initial design to final finishing touches.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-check-circle text-yellow-500 text-xl"></i>
</div>
<p class="ml-3 text-gray-700 text-lg">Licensed, bonded, and fully insured</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-check-circle text-yellow-500 text-xl"></i>
</div>
<p class="ml-3 text-gray-700 text-lg">Commitment to sustainable building practices</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-check-circle text-yellow-500 text-xl"></i>
</div>
<p class="ml-3 text-gray-700 text-lg">Award-winning craftsmanship</p>
</div>
</div>
</div>
<div class="lg:w-1/2 relative">
<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Construction Team" class="rounded-lg shadow-xl w-full">
<div class="absolute -bottom-6 -left-6 bg-yellow-500 text-white p-6 rounded-lg shadow-lg hidden lg:block">
<div class="text-4xl font-bold">15+</div>
<div class="text-lg">Years in Business</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Client <span class="text-yellow-500">Testimonials</span></h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear what our clients say about working with us.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="testimonial-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition duration-300">
<div class="relative mb-6">
<div class="text-yellow-500 text-2xl">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="absolute top-0 right-0 text-gray-200 text-6xl opacity-10 -mt-4 -mr-2">"</div>
</div>
<p class="text-gray-600 mb-6 italic">"Transformed our home with exceptional craftsmanship."</p>
<div class="flex items-center border-t border-gray-100 pt-6">
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Sarah Johnson" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-900">Sarah Johnson</h4>
<p class="text-gray-600 text-sm">Homeowner, Istanbul</p>
</div>
</div>
</div>
<div class="testimonial-card bg-white p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-yellow-500 text-2xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-6">"As a developer, I've worked with many contractors. PrimeBuild stands out for their professionalism, quality work, and ability to meet deadlines."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Michael Chen" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-900">Michael Chen</h4>
<p class="text-gray-600 text-sm">Commercial Developer</p>
</div>
</div>
</div>
<div class="testimonial-card bg-white p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-yellow-500 text-2xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-6">"From design to completion, the PrimeBuild team made our dream home a reality. Their craftsmanship is second to none and they stayed within budget."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Emily Rodriguez" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-900">Emily Rodriguez</h4>
<p class="text-gray-600 text-sm">Custom Home Client</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-yellow-500">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Start Your Project?</h2>
<p class="text-xl text-white mb-10 max-w-3xl mx-auto">Contact us today for a free consultation and quote. Our team is ready to bring your vision to life.</p>
<a href="#contact" class="inline-block bg-white hover:bg-gray-100 text-gray-900 px-8 py-4 rounded-md font-bold text-lg transition duration-300">Get in Touch</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row">
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Contact <span class="text-yellow-500">Us</span></h2>
<p class="text-gray-600 mb-8 text-lg">Have questions about your project? Reach out to our team—we're happy to help!</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-map-marker-alt text-yellow-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Office Address</h3>
<p class="text-gray-600">123 Construction Way, Building City, BC 12345</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-phone-alt text-yellow-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Phone</h3>
<p class="text-gray-600">(555) 123-4567</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-envelope text-yellow-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Email</h3>
<p class="text-gray-600">info@primebuild.com</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-clock text-yellow-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Hours</h3>
<p class="text-gray-600">Monday - Friday: 8:00 AM - 5:00 PM</p>
<p class="text-gray-600">Saturday: By appointment</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<form class="bg-gray-50 p-8 rounded-lg shadow-md">
<div class="grid grid-cols-1 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
</div>
<div>
<label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Needed</label>
<select id="service" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
<option>Select a service</option>
<option>Residential Construction</option>
<option>Commercial Construction</option>
<option>Remodeling</option>
<option>Other</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Project Details</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"></textarea>
</div>
<div>
<button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-4 rounded-md font-bold text-lg transition duration-300">Submit Inquiry</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Prime<span class="text-yellow-500">Build</span></h3>
<p class="text-gray-400">Building excellence through quality craftsmanship and customer satisfaction since 2008.</p>
<div class="flex space-x-4 mt-6">
<a href="#" class="text-gray-400 hover:text-yellow-500"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-yellow-500"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-yellow-500"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-yellow-500"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-yellow-500">Home</a></li>
<li><a href="#services" class="text-gray-400 hover:text-yellow-500">Services</a></li>
<li><a href="#projects" class="text-gray-400 hover:text-yellow-500">Projects</a></li>
<li><a href="#about" class="text-gray-400 hover:text-yellow-500">About Us</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-yellow-500">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-yellow-500">Custom Home Building</a></li>
<li><a href="#" class="text-gray-400 hover:text-yellow-500">Commercial Construction</a></li>
<li><a href="#" class="text-gray-400 hover:text-yellow-500">Kitchen Remodeling</a></li>
<li><a href="#" class="text-gray-400 hover:text-yellow-500">Bathroom Remodeling</a></li>
<li><a href="#" class="text-gray-400 hover:text-yellow-500">Additions & Extensions</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and projects.</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-900">
<button type="submit" class="bg-yellow-500 hover:bg-yellow-600 px-4 py-2 rounded-r-md"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 PrimeBuild Construction. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-yellow-500 text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-yellow-500 text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-yellow-500 text-sm">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
// Calculate the scroll position, accounting for the fixed header
const headerHeight = document.querySelector('nav').offsetHeight;
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerHeight;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
// Add shadow to navbar on scroll
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.classList.add('shadow-lg');
} else {
nav.classList.remove('shadow-lg');
}
});
</script>
</body>
</html>