`views/properties-luna.ejs`

166 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luna - Nosara Beachfront Rentals</title>
    <meta name="description" content="Explore Luna property at Nosara Beachfront Rentals. Luxury beachfront accommodation in Nosara, Costa Rica.">

    <!-- 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=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/gallery.css">

    <style>
        .property-header {
            text-align: center;
            padding: 4rem 0 2rem;
            background: linear-gradient(135deg, rgba(44, 95, 141, 0.05) 0%, rgba(22, 160, 133, 0.05) 100%);
        }

        .property-header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            color: var(--dark);
            margin-bottom: 1rem;
        }

        .property-content {
            padding: 3rem 0;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 0 auto;
            max-width: 1200px;
            padding: 0 2rem;
        }

        .image-grid-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .image-grid-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        }

        .image-grid-item img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .property-header h1 {
                font-size: 2rem;
            }

            .image-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                padding: 0 1rem;
            }

            .image-grid-item img {
                height: 300px;
            }
        }

        @media (max-width: 480px) {
            .property-header h1 {
                font-size: 1.75rem;
            }

            .image-grid-item img {
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h2><a href="/" style="text-decoration: none; color: inherit;">Nosara Beachfront</a></h2>
            </div>
            <ul class="nav-menu">
                <li><a href="/" class="nav-link">Home</a></li>
                <li class="nav-dropdown">
                    <a href="/#properties" class="nav-link">Properties <i class="fas fa-chevron-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="/properties/luna">Luna</a></li>
                        <li><a href="/properties/sol">Sol</a></li>
                        <li><a href="/properties/casita">Casita</a></li>
                        <li><a href="/properties/main-house">Main House</a></li>
                    </ul>
                </li>
                <li><a href="/beaches" class="nav-link">Beaches</a></li>
                <li><a href="/#contact" class="nav-link">Contact</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- Property Header -->
    <section class="property-header">
        <div class="container">
            <h1>Luna</h1>
        </div>
    </section>

    <!-- Property Content -->
    <section class="property-content">
        <div class="container">
            <div class="image-grid">
                <div class="image-grid-item">
                    <img src="/images/properties/luna/luna-1-bed.jpg"
                         alt="Luna property bedroom with comfortable bedding and ocean views"
                         loading="lazy">
                </div>
                <div class="image-grid-item">
                    <img src="/images/properties/luna/luna-2-view.jpg"
                         alt="Luna property ocean view from balcony with tropical landscape"
                         loading="lazy">
                </div>
                <div class="image-grid-item">
                    <img src="/images/properties/luna/luna-3-interior.jpg"
                         alt="Luna property interior living space with modern furnishings"
                         loading="lazy">
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer style="background: var(--dark); color: white; padding: 2rem 0; text-align: center;">
        <div class="container">
            <p>&copy; <%= currentYear %> Nosara Beachfront Rentals. All rights reserved.</p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="/js/main.js"></script>
</body>
</html>