Spaces:

leon325
/

deepsite-project-ntshn

Running

App Files Files Community

leon325 commited on Feb 26

Commit

66041ed

verified ·

1 Parent(s): 76a509e

Initial DeepSite commit

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +1003 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project Ntshn
-emoji: 🌍
 colorFrom: gray
-colorTo: yellow
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
 colorFrom: gray
+colorTo: green
 sdk: static
+emoji: 📱
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,1003 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DALES | Luxury Real Estate Croatia</title>
+  <meta name="description" content="DALES - Premium real estate agency specializing in luxury houses across Croatia. Find your dream property with us.">
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <!-- Tailwind Config -->
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            serif: ['Playfair Display', 'serif'],
+            sans: ['Inter', 'sans-serif'],
+          },
+          colors: {
+            dales: {
+              gold: '#C9A962',
+              dark: '#1A1A1A',
+              darker: '#0D0D0D',
+              light: '#F5F5F5',
+              cream: '#FAF9F6',
+            }
+          },
+          animation: {
+            'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
+            'fade-in': 'fadeIn 1s ease-out forwards',
+            'slide-in-right': 'slideInRight 0.6s ease-out forwards',
+          },
+          keyframes: {
+            fadeInUp: {
+              '0%': { opacity: '0', transform: 'translateY(30px)' },
+              '100%': { opacity: '1', transform: 'translateY(0)' },
+            },
+            fadeIn: {
+              '0%': { opacity: '0' },
+              '100%': { opacity: '1' },
+            },
+            slideInRight: {
+              '0%': { opacity: '0', transform: 'translateX(50px)' },
+              '100%': { opacity: '1', transform: 'translateX(0)' },
+            },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .hero-gradient {
+      background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(13,13,13,0.85) 50%, rgba(26,26,26,0.7) 100%);
+    }
+    .gold-gradient-text {
+      background: linear-gradient(135deg, #C9A962 0%, #E8D5A3 50%, #C9A962 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .property-card:hover .property-image {
+      transform: scale(1.05);
+    }
+    .nav-scrolled {
+      background: rgba(26, 26, 26, 0.98);
+      backdrop-filter: blur(20px);
+    }
+    .luxury-border {
+      position: relative;
+    }
+    .luxury-border::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, #C9A962, transparent);
+    }
+    .scroll-reveal {
+      opacity: 0;
+      transform: translateY(30px);
+      transition: all 0.8s ease-out;
+    }
+    .scroll-reveal.revealed {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  </style>
+</head>
+<body class="font-sans text-gray-800 bg-dales-cream antialiased">
+  <!-- Navigation -->
+  <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-transparent">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-20 lg:h-24">
+        <!-- Logo -->
+        <a href="#" class="flex items-center space-x-3">
+          <div class="w-10 h-10 bg-dales-gold rounded-sm flex items-center justify-center">
+            <span class="text-dales-dark font-serif font-bold text-xl">D</span>
+          </div>
+          <span class="text-white font-serif text-2xl tracking-wider">DALES</span>
+        </a>
+        <!-- Desktop Menu -->
+        <div class="hidden lg:flex items-center space-x-8">
+          <a href="#properties" class="text-white/90 hover:text-dales-gold transition-colors text-sm tracking-wide uppercase">Properties</a>
+          <a href="#about" class="text-white/90 hover:text-dales-gold transition-colors text-sm tracking-wide uppercase">About</a>
+          <a href="#services" class="text-white/90 hover:text-dales-gold transition-colors text-sm tracking-wide uppercase">Services</a>
+          <a href="#locations" class="text-white/90 hover:text-dales-gold transition-colors text-sm tracking-wide uppercase">Locations</a>
+          <a href="#contact" class="px-6 py-3 bg-dales-gold text-dales-dark font-medium text-sm tracking-wide hover:bg-white transition-all duration-300">Contact Us</a>
+        </div>
+        <!-- Mobile Menu Button -->
+        <button id="mobile-menu-btn" class="lg:hidden text-white p-2">
+          <i data-lucide="menu" class="w-6 h-6"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="lg:hidden hidden bg-dales-dark/98 backdrop-blur-xl">
+      <div class="px-4 py-6 space-y-4">
+        <a href="#properties" class="block text-white/90 hover:text-dales-gold py-2 text-lg">Properties</a>
+        <a href="#about" class="block text-white/90 hover:text-dales-gold py-2 text-lg">About</a>
+        <a href="#services" class="block text-white/90 hover:text-dales-gold py-2 text-lg">Services</a>
+        <a href="#locations" class="block text-white/90 hover:text-dales-gold py-2 text-lg">Locations</a>
+        <a href="#contact" class="block text-dales-gold py-2 text-lg font-medium">Contact Us</a>
+      </div>
+    </div>
+  </nav>
+  <!-- Hero Section -->
+  <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+    <!-- Background Image -->
+    <div class="absolute inset-0">
+      <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1920&q=80" alt="Luxury Villa" class="w-full h-full object-cover">
+      <div class="absolute inset-0 hero-gradient"></div>
+    </div>
+    <!-- Content -->
+    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-6 animate-fade-in">Premium Real Estate Agency</p>
+      <h1 class="font-serif text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-white font-medium leading-tight mb-6 animate-fade-in-up" style="animation-delay: 0.2s;">
+        Discover Your Dream<br>
+        <span class="gold-gradient-text">Luxury Home</span> in Croatia
+      </h1>
+      <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10 font-light animate-fade-in-up" style="animation-delay: 0.4s;">
+        Exclusive collection of premium properties along the stunning Croatian coastline and historic inland regions.
+      </p>
+      <!-- Search Bar -->
+      <div class="bg-white/10 backdrop-blur-md rounded-lg p-2 max-w-4xl mx-auto animate-fade-in-up" style="animation-delay: 0.6s;">
+        <div class="flex flex-col md:flex-row gap-2">
+          <div class="flex-1 flex items-center px-4 py-3 bg-white/10 rounded-md">
+            <i data-lucide="map-pin" class="w-5 h-5 text-dales-gold mr-3"></i>
+            <select class="bg-transparent text-white w-full outline-none appearance-none cursor-pointer">
+              <option value="" class="text-dales-dark">All Locations</option>
+              <option value="dubrovnik" class="text-dales-dark">Dubrovnik</option>
+              <option value="split" class="text-dales-dark">Split</option>
+              <option value="hvar" class="text-dales-dark">Hvar</option>
+              <option value="zadar" class="text-dales-dark">Zadar</option>
+              <option value="zagreb" class="text-dales-dark">Zagreb</option>
+            </select>
+          </div>
+          <div class="flex-1 flex items-center px-4 py-3 bg-white/10 rounded-md">
+            <i data-lucide="home" class="w-5 h-5 text-dales-gold mr-3"></i>
+            <select class="bg-transparent text-white w-full outline-none appearance-none cursor-pointer">
+              <option value="" class="text-dales-dark">Property Type</option>
+              <option value="villa" class="text-dales-dark">Luxury Villa</option>
+              <option value="apartment" class="text-dales-dark">Apartment</option>
+              <option value="estate" class="text-dales-dark">Estate</option>
+              <option value="penthouse" class="text-dales-dark">Penthouse</option>
+            </select>
+          </div>
+          <div class="flex-1 flex items-center px-4 py-3 bg-white/10 rounded-md">
+            <i data-lucide="euro" class="w-5 h-5 text-dales-gold mr-3"></i>
+            <select class="bg-transparent text-white w-full outline-none appearance-none cursor-pointer">
+              <option value="" class="text-dales-dark">Price Range</option>
+              <option value="500k-1m" class="text-dales-dark">€500K - €1M</option>
+              <option value="1m-2m" class="text-dales-dark">€1M - €2M</option>
+              <option value="2m-5m" class="text-dales-dark">€2M - €5M</option>
+              <option value="5m+" class="text-dales-dark">€5M+</option>
+            </select>
+          </div>
+          <button class="px-8 py-3 bg-dales-gold text-dales-dark font-medium rounded-md hover:bg-white transition-all duration-300 flex items-center justify-center gap-2">
+            <i data-lucide="search" class="w-5 h-5"></i>
+            Search
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Scroll Indicator -->
+    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+      <i data-lucide="chevron-down" class="w-6 h-6 text-white/60"></i>
+    </div>
+  </section>
+  <!-- Featured Properties -->
+  <section id="properties" class="py-20 lg:py-32 bg-dales-cream">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Section Header -->
+      <div class="text-center mb-16 scroll-reveal">
+        <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-4">Exclusive Listings</p>
+        <h2 class="font-serif text-4xl md:text-5xl text-dales-dark mb-6 luxury-border inline-block">Featured Properties</h2>
+        <p class="text-gray-600 max-w-2xl mx-auto">Handpicked selection of the finest luxury properties available in Croatia's most prestigious locations.</p>
+      </div>
+      <!-- Properties Grid -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- Property 1 -->
+        <div class="property-card group bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 scroll-reveal">
+          <div class="relative overflow-hidden h-72">
+            <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=800&q=80" alt="Luxury Villa" class="property-image w-full h-full object-cover transition-transform duration-700">
+            <div class="absolute top-4 left-4">
+              <span class="px-4 py-2 bg-dales-gold text-dales-dark text-sm font-medium rounded">Featured</span>
+            </div>
+            <div class="absolute top-4 right-4">
+              <button class="w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors">
+                <i data-lucide="heart" class="w-5 h-5 text-dales-dark"></i>
+              </button>
+            </div>
+            <div class="absolute bottom-4 left-4 right-4">
+              <div class="flex items-center gap-4 text-white text-sm">
+                <span class="flex items-center gap-1"><i data-lucide="bed" class="w-4 h-4"></i> 5</span>
+                <span class="flex items-center gap-1"><i data-lucide="bath" class="w-4 h-4"></i> 4</span>
+                <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-4 h-4"></i> 450 m²</span>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center gap-2 text-dales-gold text-sm mb-2">
+              <i data-lucide="map-pin" class="w-4 h-4"></i>
+              <span>Dubrovnik, Croatia</span>
+            </div>
+            <h3 class="font-serif text-xl text-dales-dark mb-2 group-hover:text-dales-gold transition-colors">Seaside Villa with Infinity Pool</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-2">Stunning contemporary villa with panoramic Adriatic views, private beach access, and world-class amenities.</p>
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+              <span class="font-serif text-2xl text-dales-dark">€4,200,000</span>
+              <button class="text-dales-gold hover:text-dales-dark transition-colors font-medium text-sm flex items-center gap-1">
+                View Details <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Property 2 -->
+        <div class="property-card group bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 scroll-reveal">
+          <div class="relative overflow-hidden h-72">
+            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80" alt="Modern Estate" class="property-image w-full h-full object-cover transition-transform duration-700">
+            <div class="absolute top-4 right-4">
+              <button class="w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors">
+                <i data-lucide="heart" class="w-5 h-5 text-dales-dark"></i>
+              </button>
+            </div>
+            <div class="absolute bottom-4 left-4 right-4">
+              <div class="flex items-center gap-4 text-white text-sm">
+                <span class="flex items-center gap-1"><i data-lucide="bed" class="w-4 h-4"></i> 6</span>
+                <span class="flex items-center gap-1"><i data-lucide="bath" class="w-4 h-4"></i> 5</span>
+                <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-4 h-4"></i> 680 m²</span>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center gap-2 text-dales-gold text-sm mb-2">
+              <i data-lucide="map-pin" class="w-4 h-4"></i>
+              <span>Hvar Island, Croatia</span>
+            </div>
+            <h3 class="font-serif text-xl text-dales-dark mb-2 group-hover:text-dales-gold transition-colors">Contemporary Hilltop Estate</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-2">Architectural masterpiece perched above the Dalmatian coast with vineyards and olive groves.</p>
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+              <span class="font-serif text-2xl text-dales-dark">€6,800,000</span>
+              <button class="text-dales-gold hover:text-dales-dark transition-colors font-medium text-sm flex items-center gap-1">
+                View Details <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Property 3 -->
+        <div class="property-card group bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 scroll-reveal">
+          <div class="relative overflow-hidden h-72">
+            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&q=80" alt="Historic Villa" class="property-image w-full h-full object-cover transition-transform duration-700">
+            <div class="absolute top-4 left-4">
+              <span class="px-4 py-2 bg-dales-dark text-white text-sm font-medium rounded">New</span>
+            </div>
+            <div class="absolute top-4 right-4">
+              <button class="w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors">
+                <i data-lucide="heart" class="w-5 h-5 text-dales-dark"></i>
+              </button>
+            </div>
+            <div class="absolute bottom-4 left-4 right-4">
+              <div class="flex items-center gap-4 text-white text-sm">
+                <span class="flex items-center gap-1"><i data-lucide="bed" class="w-4 h-4"></i> 4</span>
+                <span class="flex items-center gap-1"><i data-lucide="bath" class="w-4 h-4"></i> 3</span>
+                <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-4 h-4"></i> 320 m²</span>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center gap-2 text-dales-gold text-sm mb-2">
+              <i data-lucide="map-pin" class="w-4 h-4"></i>
+              <span>Split, Croatia</span>
+            </div>
+            <h3 class="font-serif text-xl text-dales-dark mb-2 group-hover:text-dales-gold transition-colors">Restored Historic Palace</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-2">Meticulously restored 16th-century palace in the heart of Diocletian's Palace with modern luxury.</p>
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+              <span class="font-serif text-2xl text-dales-dark">€2,950,000</span>
+              <button class="text-dales-gold hover:text-dales-dark transition-colors font-medium text-sm flex items-center gap-1">
+                View Details <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Property 4 -->
+        <div class="property-card group bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 scroll-reveal">
+          <div class="relative overflow-hidden h-72">
+            <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=800&q=80" alt="Waterfront Villa" class="property-image w-full h-full object-cover transition-transform duration-700">
+            <div class="absolute top-4 right-4">
+              <button class="w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors">
+                <i data-lucide="heart" class="w-5 h-5 text-dales-dark"></i>
+              </button>
+            </div>
+            <div class="absolute bottom-4 left-4 right-4">
+              <div class="flex items-center gap-4 text-white text-sm">
+                <span class="flex items-center gap-1"><i data-lucide="bed" class="w-4 h-4"></i> 7</span>
+                <span class="flex items-center gap-1"><i data-lucide="bath" class="w-4 h-4"></i> 6</span>
+                <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-4 h-4"></i> 850 m²</span>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center gap-2 text-dales-gold text-sm mb-2">
+              <i data-lucide="map-pin" class="w-4 h-4"></i>
+              <span>Zadar, Croatia</span>
+            </div>
+            <h3 class="font-serif text-xl text-dales-dark mb-2 group-hover:text-dales-gold transition-colors">Waterfront Masterpiece</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-2">Exceptional waterfront property with private marina, spa, and direct access to the crystal-clear Adriatic.</p>
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+              <span class="font-serif text-2xl text-dales-dark">€8,500,000</span>
+              <button class="text-dales-gold hover:text-dales-dark transition-colors font-medium text-sm flex items-center gap-1">
+                View Details <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Property 5 -->
+        <div class="property-card group bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 scroll-reveal">
+          <div class="relative overflow-hidden h-72">
+            <img src="https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=800&q=80" alt="Mountain Retreat" class="property-image w-full h-full object-cover transition-transform duration-700">
+            <div class="absolute top-4 left-4">
+              <span class="px-4 py-2 bg-dales-gold text-dales-dark text-sm font-medium rounded">Exclusive</span>
+            </div>
+            <div class="absolute top-4 right-4">
+              <button class="w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors">
+                <i data-lucide="heart" class="w-5 h-5 text-dales-dark"></i>
+              </button>
+            </div>
+            <div class="absolute bottom-4 left-4 right-4">
+              <div class="flex items-center gap-4 text-white text-sm">
+                <span class="flex items-center gap-1"><i data-lucide="bed" class="w-4 h-4"></i> 5</span>
+                <span class="flex items-center gap-1"><i data-lucide="bath" class="w-4 h-4"></i> 4</span>
+                <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-4 h-4"></i> 520 m²</span>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center gap-2 text-dales-gold text-sm mb-2">
+              <i data-lucide="map-pin" class="w-4 h-4"></i>
+              <span>Istria, Croatia</span>
+            </div>
+            <h3 class="font-serif text-xl text-dales-dark mb-2 group-hover:text-dales-gold transition-colors">Tuscan-Style Estate</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-2">Magnificent estate surrounded by truffle forests and vineyards with authentic Istrian architecture.</p>
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+              <span class="font-serif text-2xl text-dales-dark">€3,750,000</span>
+              <button class="text-dales-gold hover:text-dales-dark transition-colors font-medium text-sm flex items-center gap-1">
+                View Details <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Property 6 -->
+        <div class="property-card group bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 scroll-reveal">
+          <div class="relative overflow-hidden h-72">
+            <img src="https://images.unsplash.com/photo-1600573472550-8090b5e0745e?w=800&q=80" alt="Penthouse" class="property-image w-full h-full object-cover transition-transform duration-700">
+            <div class="absolute top-4 right-4">
+              <button class="w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors">
+                <i data-lucide="heart" class="w-5 h-5 text-dales-dark"></i>
+              </button>
+            </div>
+            <div class="absolute bottom-4 left-4 right-4">
+              <div class="flex items-center gap-4 text-white text-sm">
+                <span class="flex items-center gap-1"><i data-lucide="bed" class="w-4 h-4"></i> 3</span>
+                <span class="flex items-center gap-1"><i data-lucide="bath" class="w-4 h-4"></i> 3</span>
+                <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-4 h-4"></i> 280 m²</span>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center gap-2 text-dales-gold text-sm mb-2">
+              <i data-lucide="map-pin" class="w-4 h-4"></i>
+              <span>Zagreb, Croatia</span>
+            </div>
+            <h3 class="font-serif text-xl text-dales-dark mb-2 group-hover:text-dales-gold transition-colors">Luxury City Penthouse</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-2">Ultra-modern penthouse in Zagreb's most prestigious district with 360° city views and private terrace.</p>
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+              <span class="font-serif text-2xl text-dales-dark">€1,850,000</span>
+              <button class="text-dales-gold hover:text-dales-dark transition-colors font-medium text-sm flex items-center gap-1">
+                View Details <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- View All Button -->
+      <div class="text-center mt-12 scroll-reveal">
+        <button class="px-8 py-4 border-2 border-dales-dark text-dales-dark font-medium hover:bg-dales-dark hover:text-white transition-all duration-300">
+          View All Properties
+        </button>
+      </div>
+    </div>
+  </section>
+  <!-- About Section -->
+  <section id="about" class="py-20 lg:py-32 bg-dales-dark relative overflow-hidden">
+    <!-- Background Pattern -->
+    <div class="absolute inset-0 opacity-5">
+      <div class="absolute top-0 left-0 w-96 h-96 bg-dales-gold rounded-full blur-3xl"></div>
+      <div class="absolute bottom-0 right-0 w-96 h-96 bg-dales-gold rounded-full blur-3xl"></div>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      <div class="grid lg:grid-cols-2 gap-16 items-center">
+        <!-- Image -->
+        <div class="relative scroll-reveal">
+          <div class="relative">
+            <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&q=80" alt="DALES Team" class="rounded-lg shadow-2xl">
+            <div class="absolute -bottom-8 -right-8 bg-dales-gold p-8 rounded-lg hidden md:block">
+              <p class="font-serif text-4xl text-dales-dark font-bold">15+</p>
+              <p class="text-dales-dark/80 text-sm">Years of Excellence</p>
+            </div>
+          </div>
+        </div>
+        <!-- Content -->
+        <div class="scroll-reveal">
+          <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-4">About DALES</p>
+          <h2 class="font-serif text-4xl md:text-5xl text-white mb-6">Your Trusted Partner in Luxury Real Estate</h2>
+          <p class="text-white/70 text-lg mb-6 leading-relaxed">
+            Founded in 2009, DALES has established itself as Croatia's premier luxury real estate agency. We specialize in exceptional properties that define the art of fine living along the stunning Adriatic coast and beyond.
+          </p>
+          <p class="text-white/70 mb-8 leading-relaxed">
+            Our team of dedicated professionals combines deep local knowledge with international standards of service, ensuring every client discovers their perfect property with complete confidence and peace of mind.
+          </p>
+          <!-- Stats -->
+          <div class="grid grid-cols-3 gap-8 mb-8">
+            <div>
+              <p class="font-serif text-3xl text-dales-gold">500+</p>
+              <p class="text-white/60 text-sm">Properties Sold</p>
+            </div>
+            <div>
+              <p class="font-serif text-3xl text-dales-gold">€2B+</p>
+              <p class="text-white/60 text-sm">Total Sales</p>
+            </div>
+            <div>
+              <p class="font-serif text-3xl text-dales-gold">98%</p>
+              <p class="text-white/60 text-sm">Client Satisfaction</p>
+            </div>
+          </div>
+          <button class="px-8 py-4 bg-dales-gold text-dales-dark font-medium hover:bg-white transition-all duration-300">
+            Learn More About Us
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Services Section -->
+  <section id="services" class="py-20 lg:py-32 bg-dales-cream">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Section Header -->
+      <div class="text-center mb-16 scroll-reveal">
+        <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-4">What We Offer</p>
+        <h2 class="font-serif text-4xl md:text-5xl text-dales-dark mb-6 luxury-border inline-block">Our Services</h2>
+        <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive real estate services tailored to meet the unique needs of discerning clients.</p>
+      </div>
+      <!-- Services Grid -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <!-- Service 1 -->
+        <div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 group scroll-reveal">
+          <div class="w-16 h-16 bg-dales-gold/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-dales-gold transition-colors duration-300">
+            <i data-lucide="search" class="w-8 h-8 text-dales-gold group-hover:text-dales-dark transition-colors"></i>
+          </div>
+          <h3 class="font-serif text-xl text-dales-dark mb-3">Property Search</h3>
+          <p class="text-gray-600 text-sm leading-relaxed">Personalized property search based on your specific requirements and lifestyle preferences.</p>
+        </div>
+        <!-- Service 2 -->
+        <div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 group scroll-reveal">
+          <div class="w-16 h-16 bg-dales-gold/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-dales-gold transition-colors duration-300">
+            <i data-lucide="file-text" class="w-8 h-8 text-dales-gold group-hover:text-dales-dark transition-colors"></i>
+          </div>
+          <h3 class="font-serif text-xl text-dales-dark mb-3">Legal Support</h3>
+          <p class="text-gray-600 text-sm leading-relaxed">Complete legal assistance throughout the purchasing process, ensuring secure transactions.</p>
+        </div>
+        <!-- Service 3 -->
+        <div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 group scroll-reveal">
+          <div class="w-16 h-16 bg-dales-gold/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-dales-gold transition-colors duration-300">
+            <i data-lucide="trending-up" class="w-8 h-8 text-dales-gold group-hover:text-dales-dark transition-colors"></i>
+          </div>
+          <h3 class="font-serif text-xl text-dales-dark mb-3">Investment Advisory</h3>
+          <p class="text-gray-600 text-sm leading-relaxed">Strategic investment advice to maximize returns on your real estate portfolio in Croatia.</p>
+        </div>
+        <!-- Service 4 -->
+        <div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 group scroll-reveal">
+          <div class="w-16 h-16 bg-dales-gold/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-dales-gold transition-colors duration-300">
+            <i data-lucide="key" class="w-8 h-8 text-dales-gold group-hover:text-dales-dark transition-colors"></i>
+          </div>
+          <h3 class="font-serif text-xl text-dales-dark mb-3">Property Management</h3>
+          <p class="text-gray-600 text-sm leading-relaxed">Full-service property management for owners seeking hassle-free rental income.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Locations Section -->
+  <section id="locations" class="py-20 lg:py-32 bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Section Header -->
+      <div class="text-center mb-16 scroll-reveal">
+        <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-4">Prime Destinations</p>
+        <h2 class="font-serif text-4xl md:text-5xl text-dales-dark mb-6 luxury-border inline-block">Featured Locations</h2>
+        <p class="text-gray-600 max-w-2xl mx-auto">Discover Croatia's most sought-after regions for luxury real estate investment.</p>
+      </div>
+      <!-- Locations Grid -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Location 1 -->
+        <div class="group relative overflow-hidden rounded-lg h-80 cursor-pointer scroll-reveal">
+          <img src="https://images.unsplash.com/photo-1555992336-fb0d29498b13?w=800&q=80" alt="Dubrovnik" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+          <div class="absolute inset-0 bg-gradient-to-t from-dales-dark/90 via-dales-dark/40 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6">
+            <h3 class="font-serif text-2xl text-white mb-2">Dubrovnik</h3>
+            <p class="text-white/80 text-sm mb-4">The Pearl of the Adriatic</p>
+            <div class="flex items-center gap-4 text-white/70 text-sm">
+              <span>24 Properties</span>
+              <span class="w-1 h-1 bg-dales-gold rounded-full"></span>
+              <span>From €1.2M</span>
+            </div>
+          </div>
+        </div>
+        <!-- Location 2 -->
+        <div class="group relative overflow-hidden rounded-lg h-80 cursor-pointer scroll-reveal">
+          <img src="https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?w=800&q=80" alt="Split" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+          <div class="absolute inset-0 bg-gradient-to-t from-dales-dark/90 via-dales-dark/40 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6">
+            <h3 class="font-serif text-2xl text-white mb-2">Split</h3>
+            <p class="text-white/80 text-sm mb-4">Historic Coastal Gem</p>
+            <div class="flex items-center gap-4 text-white/70 text-sm">
+              <span>18 Properties</span>
+              <span class="w-1 h-1 bg-dales-gold rounded-full"></span>
+              <span>From €890K</span>
+            </div>
+          </div>
+        </div>
+        <!-- Location 3 -->
+        <div class="group relative overflow-hidden rounded-lg h-80 cursor-pointer scroll-reveal">
+          <img src="https://images.unsplash.com/photo-1515859005217-8a1f08870f59?w=800&q=80" alt="Hvar" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+          <div class="absolute inset-0 bg-gradient-to-t from-dales-dark/90 via-dales-dark/40 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6">
+            <h3 class="font-serif text-2xl text-white mb-2">Hvar Island</h3>
+            <p class="text-white/80 text-sm mb-4">Mediterranean Paradise</p>
+            <div class="flex items-center gap-4 text-white/70 text-sm">
+              <span>12 Properties</span>
+              <span class="w-1 h-1 bg-dales-gold rounded-full"></span>
+              <span>From €2.1M</span>
+            </div>
+          </div>
+        </div>
+        <!-- Location 4 -->
+        <div class="group relative overflow-hidden rounded-lg h-80 cursor-pointer scroll-reveal">
+          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80" alt="Zadar" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+          <div class="absolute inset-0 bg-gradient-to-t from-dales-dark/90 via-dales-dark/40 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6">
+            <h3 class="font-serif text-2xl text-white mb-2">Zadar</h3>
+            <p class="text-white/80 text-sm mb-4">Sunset Capital</p>
+            <div class="flex items-center gap-4 text-white/70 text-sm">
+              <span>15 Properties</span>
+              <span class="w-1 h-1 bg-dales-gold rounded-full"></span>
+              <span>From €750K</span>
+            </div>
+          </div>
+        </div>
+        <!-- Location 5 -->
+        <div class="group relative overflow-hidden rounded-lg h-80 cursor-pointer scroll-reveal">
+          <img src="https://images.unsplash.com/photo-1564507592333-c60657eea523?w=800&q=80" alt="Istria" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+          <div class="absolute inset-0 bg-gradient-to-t from-dales-dark/90 via-dales-dark/40 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6">
+            <h3 class="font-serif text-2xl text-white mb-2">Istria</h3>
+            <p class="text-white/80 text-sm mb-4">Tuscany of Croatia</p>
+            <div class="flex items-center gap-4 text-white/70 text-sm">
+              <span>28 Properties</span>
+              <span class="w-1 h-1 bg-dales-gold rounded-full"></span>
+              <span>From €680K</span>
+            </div>
+          </div>
+        </div>
+        <!-- Location 6 -->
+        <div class="group relative overflow-hidden rounded-lg h-80 cursor-pointer scroll-reveal">
+          <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&q=80" alt="Zagreb" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+          <div class="absolute inset-0 bg-gradient-to-t from-dales-dark/90 via-dales-dark/40 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6">
+            <h3 class="font-serif text-2xl text-white mb-2">Zagreb</h3>
+            <p class="text-white/80 text-sm mb-4">Vibrant Capital City</p>
+            <div class="flex items-center gap-4 text-white/70 text-sm">
+              <span>32 Properties</span>
+              <span class="w-1 h-1 bg-dales-gold rounded-full"></span>
+              <span>From €450K</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Testimonials -->
+  <section class="py-20 lg:py-32 bg-dales-dark relative overflow-hidden">
+    <div class="absolute inset-0">
+      <img src="https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=1920&q=80" alt="Background" class="w-full h-full object-cover opacity-10">
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      <div class="text-center mb-16 scroll-reveal">
+        <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-4">Testimonials</p>
+        <h2 class="font-serif text-4xl md:text-5xl text-white mb-6">What Our Clients Say</h2>
+      </div>
+      <div class="grid md:grid-cols-3 gap-8">
+        <!-- Testimonial 1 -->
+        <div class="bg-white/5 backdrop-blur-sm p-8 rounded-lg border border-white/10 scroll-reveal">
+          <div class="flex gap-1 mb-4">
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+          </div>
+          <p class="text-white/80 mb-6 leading-relaxed">"DALES made our dream of owning a coastal villa in Croatia a reality. Their expertise and dedication throughout the process was exceptional."</p>
+          <div class="flex items-center gap-4">
+            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&q=80" alt="Client" class="w-12 h-12 rounded-full object-cover">
+            <div>
+              <p class="text-white font-medium">Marcus Weber</p>
+              <p class="text-white/60 text-sm">Germany</p>
+            </div>
+          </div>
+        </div>
+        <!-- Testimonial 2 -->
+        <div class="bg-white/5 backdrop-blur-sm p-8 rounded-lg border border-white/10 scroll-reveal">
+          <div class="flex gap-1 mb-4">
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+          </div>
+          <p class="text-white/80 mb-6 leading-relaxed">"Professional, knowledgeable, and truly committed to finding the perfect property. DALES exceeded all our expectations."</p>
+          <div class="flex items-center gap-4">
+            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80" alt="Client" class="w-12 h-12 rounded-full object-cover">
+            <div>
+              <p class="text-white font-medium">Sarah Mitchell</p>
+              <p class="text-white/60 text-sm">United Kingdom</p>
+            </div>
+          </div>
+        </div>
+        <!-- Testimonial 3 -->
+        <div class="bg-white/5 backdrop-blur-sm p-8 rounded-lg border border-white/10 scroll-reveal">
+          <div class="flex gap-1 mb-4">
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+            <i data-lucide="star" class="w-5 h-5 text-dales-gold fill-dales-gold"></i>
+          </div>
+          <p class="text-white/80 mb-6 leading-relaxed">"From the first consultation to the final handshake, DALES provided unparalleled service. Highly recommended for luxury real estate."</p>
+          <div class="flex items-center gap-4">
+            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80" alt="Client" class="w-12 h-12 rounded-full object-cover">
+            <div>
+              <p class="text-white font-medium">Antonio Rossi</p>
+              <p class="text-white/60 text-sm">Italy</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Contact Section -->
+  <section id="contact" class="py-20 lg:py-32 bg-dales-cream">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid lg:grid-cols-2 gap-16">
+        <!-- Contact Info -->
+        <div class="scroll-reveal">
+          <p class="text-dales-gold text-sm tracking-[0.3em] uppercase mb-4">Get In Touch</p>
+          <h2 class="font-serif text-4xl md:text-5xl text-dales-dark mb-6">Let's Discuss Your Property Goals</h2>
+          <p class="text-gray-600 mb-8 leading-relaxed">
+            Whether you're looking to buy, sell, or invest in Croatian luxury real estate, our team is ready to assist you every step of the way.
+          </p>
+          <div class="space-y-6">
+            <div class="flex items-start gap-4">
+              <div class="w-12 h-12 bg-dales-gold/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <i data-lucide="map-pin" class="w-5 h-5 text-dales-gold"></i>
+              </div>
+              <div>
+                <h4 class="font-medium text-dales-dark mb-1">Visit Our Office</h4>
+                <p class="text-gray-600 text-sm">Ulica Andrije Hebranga 15, 20000 Dubrovnik, Croatia</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-4">
+              <div class="w-12 h-12 bg-dales-gold/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <i data-lucide="phone" class="w-5 h-5 text-dales-gold"></i>
+              </div>
+              <div>
+                <h4 class="font-medium text-dales-dark mb-1">Call Us</h4>
+                <p class="text-gray-600 text-sm">+385 20 123 456</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-4">
+              <div class="w-12 h-12 bg-dales-gold/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                <i data-lucide="mail" class="w-5 h-5 text-dales-gold"></i>
+              </div>
+              <div>
+                <h4 class="font-medium text-dales-dark mb-1">Email Us</h4>
+                <p class="text-gray-600 text-sm">info@dales-realestate.hr</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Contact Form -->
+        <div class="bg-white p-8 lg:p-10 rounded-lg shadow-xl scroll-reveal">
+          <form id="contact-form" class="space-y-6">
+            <div class="grid md:grid-cols-2 gap-6">
+              <div>
+                <label class="block text-sm font-medium text-dales-dark mb-2">First Name</label>
+                <input type="text" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-dales-gold transition-colors" placeholder="John">
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-dales-dark mb-2">Last Name</label>
+                <input type="text" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-dales-gold transition-colors" placeholder="Doe">
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-dales-dark mb-2">Email Address</label>
+              <input type="email" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-dales-gold transition-colors" placeholder="john@example.com">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-dales-dark mb-2">Phone Number</label>
+              <input type="tel" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-dales-gold transition-colors" placeholder="+1 234 567 890">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-dales-dark mb-2">I'm Interested In</label>
+              <select class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-dales-gold transition-colors">
+                <option value="">Select an option</option>
+                <option value="buy">Buying a Property</option>
+                <option value="sell">Selling a Property</option>
+                <option value="rent">Renting a Property</option>
+                <option value="invest">Investment Opportunities</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-dales-dark mb-2">Message</label>
+              <textarea rows="4" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-dales-gold transition-colors resize-none" placeholder="Tell us about your requirements..."></textarea>
+            </div>
+            <button type="submit" class="w-full py-4 bg-dales-gold text-dales-dark font-medium rounded-lg hover:bg-dales-dark hover:text-white transition-all duration-300">
+              Send Message
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-dales-dark py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
+        <!-- Brand -->
+        <div>
+          <a href="#" class="flex items-center space-x-3 mb-6">
+            <div class="w-10 h-10 bg-dales-gold rounded-sm flex items-center justify-center">
+              <span class="text-dales-dark font-serif font-bold text-xl">D</span>
+            </div>
+            <span class="text-white font-serif text-2xl tracking-wider">DALES</span>
+          </a>
+          <p class="text-white/60 text-sm leading-relaxed mb-6">
+            Croatia's premier luxury real estate agency, specializing in exceptional properties along the stunning Adriatic coast.
+          </p>
+          <div class="flex gap-4">
+            <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors group">
+              <i data-lucide="facebook" class="w-5 h-5 text-white group-hover:text-dales-dark"></i>
+            </a>
+            <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors group">
+              <i data-lucide="instagram" class="w-5 h-5 text-white group-hover:text-dales-dark"></i>
+            </a>
+            <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors group">
+              <i data-lucide="linkedin" class="w-5 h-5 text-white group-hover:text-dales-dark"></i>
+            </a>
+            <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-dales-gold transition-colors group">
+              <i data-lucide="youtube" class="w-5 h-5 text-white group-hover:text-dales-dark"></i>
+            </a>
+          </div>
+        </div>
+        <!-- Quick Links -->
+        <div>
+          <h4 class="text-white font-medium mb-6">Quick Links</h4>
+          <ul class="space-y-3">
+            <li><a href="#properties" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Properties</a></li>
+            <li><a href="#about" class="text-white/60 hover:text-dales-gold transition-colors text-sm">About Us</a></li>
+            <li><a href="#services" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Services</a></li>
+            <li><a href="#locations" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Locations</a></li>
+            <li><a href="#contact" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Contact</a></li>
+          </ul>
+        </div>
+        <!-- Property Types -->
+        <div>
+          <h4 class="text-white font-medium mb-6">Property Types</h4>
+          <ul class="space-y-3">
+            <li><a href="#" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Luxury Villas</a></li>
+            <li><a href="#" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Waterfront Homes</a></li>
+            <li><a href="#" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Historic Properties</a></li>
+            <li><a href="#" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Penthouses</a></li>
+            <li><a href="#" class="text-white/60 hover:text-dales-gold transition-colors text-sm">Investment Properties</a></li>
+          </ul>
+        </div>
+        <!-- Newsletter -->
+        <div>
+          <h4 class="text-white font-medium mb-6">Newsletter</h4>
+          <p class="text-white/60 text-sm mb-4">Subscribe to receive exclusive property listings and market insights.</p>
+          <form class="flex gap-2">
+            <input type="email" placeholder="Your email" class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-dales-gold text-sm">
+            <button type="submit" class="px-4 py-3 bg-dales-gold text-dales-dark rounded-lg hover:bg-white transition-colors">
+              <i data-lucide="send" class="w-5 h-5"></i>
+            </button>
+          </form>
+        </div>
+      </div>
+      <!-- Bottom Bar -->
+      <div class="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
+        <p class="text-white/40 text-sm">© 2024 DALES Real Estate. All rights reserved.</p>
+        <div class="flex gap-6">
+          <a href="#" class="text-white/40 hover:text-dales-gold transition-colors text-sm">Privacy Policy</a>
+          <a href="#" class="text-white/40 hover:text-dales-gold transition-colors text-sm">Terms of Service</a>
+          <a href="#" class="text-white/40 hover:text-dales-gold transition-colors text-sm">Cookie Policy</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <!-- JavaScript -->
+  <script>
+    // Initialize Lucide Icons
+    lucide.createIcons();
+    // Navbar scroll effect
+    const navbar = document.getElementById('navbar');
+    let lastScroll = 0;
+    window.addEventListener('scroll', () => {
+      const currentScroll = window.pageYOffset;
+      if (currentScroll > 100) {
+        navbar.classList.add('nav-scrolled');
+      } else {
+        navbar.classList.remove('nav-scrolled');
+      }
+      lastScroll = currentScroll;
+    });
+    // Mobile menu toggle
+    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+    const mobileMenu = document.getElementById('mobile-menu');
+    mobileMenuBtn.addEventListener('click', () => {
+      mobileMenu.classList.toggle('hidden');
+    });
+    // Close mobile menu when clicking a link
+    mobileMenu.querySelectorAll('a').forEach(link => {
+      link.addEventListener('click', () => {
+        mobileMenu.classList.add('hidden');
+      });
+    });
+    // Scroll reveal animation
+    const scrollRevealElements = document.querySelectorAll('.scroll-reveal');
+    const revealOnScroll = () => {
+      scrollRevealElements.forEach(element => {
+        const elementTop = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        if (elementTop < windowHeight - 100) {
+          element.classList.add('revealed');
+        }
+      });
+    };
+    window.addEventListener('scroll', revealOnScroll);
+    window.addEventListener('load', revealOnScroll);
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+      });
+    });
+    // Contact form submission
+    const contactForm = document.getElementById('contact-form');
+    contactForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      // Show success message
+      const button = contactForm.querySelector('button[type="submit"]');
+      const originalText = button.textContent;
+      button.textContent = 'Message Sent!';
+      button.classList.add('bg-green-600', 'text-white');
+      button.classList.remove('bg-dales-gold', 'text-dales-dark');
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.classList.remove('bg-green-600', 'text-white');
+        button.classList.add('bg-dales-gold', 'text-dales-dark');
+        contactForm.reset();
+      }, 3000);
+    });
+    // Property card hover effects
+    document.querySelectorAll('.property-card').forEach(card => {
+      const image = card.querySelector('.property-image');
+      card.addEventListener('mouseenter', () => {
+        image.style.transform = 'scale(1.05)';
+      });
+      card.addEventListener('mouseleave', () => {
+        image.style.transform = 'scale(1)';
+      });
+    });
+  </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>