feat: complete UI/UX improvements and localization
This commit is contained in:
AyrisAI
@@ -0,0 +1,69 @@
|
||||
# Design Brief — Sitar Apart & Otel
|
||||
|
||||
`/design-demo` skill'ine doğrudan girdi olarak verilebilir.
|
||||
|
||||
---
|
||||
|
||||
📐 **Estetik Yön: Warm Coastal** (Warm/Organic + kıyı tonu karışımı — lüks otel değil, samimi butik apart)
|
||||
|
||||
- **Neden:** Broşürdeki gerçek görseller (ahşap balkonlar, yeşillik, deniz-dağ manzarası, havlu üzerine serpiştirilmiş buğunvil çiçekleri) samimi, ev sıcaklığında bir apart havası veriyor. "Luxury/Refined" bu işletme için fazla iddialı — 1+0/1+1 self-catering daireler satıyoruz, 5 yıldızlı otel değil.
|
||||
- **Karakter:** Yuvarlatılmış köşeler, toprak + turkuaz tonları, bol doğal ışık hissi, gerçekçi/samimi fotoğraf ağırlıklı
|
||||
|
||||
🎨 **Palet (OKLCH):**
|
||||
```css
|
||||
:root {
|
||||
--background: oklch(0.97 0.012 80); /* kirli beyaz/krem */
|
||||
--foreground: oklch(0.16 0.01 40); /* koyu ahşap-kahve */
|
||||
--primary: oklch(0.62 0.09 200); /* turkuaz — broşür logosu/bantları */
|
||||
--primary-foreground: oklch(0.98 0.01 80);
|
||||
--secondary: oklch(0.40 0.05 40); /* koyu ahşap balkon tonu */
|
||||
--accent: oklch(0.68 0.14 15); /* buğunvil pembe-mor — vurgu/CTA'da nokta atışı kullan */
|
||||
--muted: oklch(0.92 0.01 80);
|
||||
--muted-foreground: oklch(0.48 0.01 60);
|
||||
--border: oklch(0.87 0.01 80);
|
||||
--radius: 0.75rem; /* organik, yuvarlak */
|
||||
}
|
||||
.dark {
|
||||
--background: oklch(0.14 0.01 40);
|
||||
--foreground: oklch(0.95 0.01 80);
|
||||
--primary: oklch(0.68 0.10 200);
|
||||
--border: oklch(0.24 0.01 40);
|
||||
}
|
||||
```
|
||||
|
||||
🔤 **Font:**
|
||||
- Başlık: **Lora** (700) — sıcak serif, otel siteleri için klişe olmayan seçim
|
||||
- Body: **Nunito** (400/600) — yuvarlak, samimi sans
|
||||
|
||||
**Tipografi tonu:** Büyük başlıklarda serif ağırlık, gövde metinde yumuşak sans. Aşırı ince/keskin geometrik font yok — sıcaklık hissi korunmalı.
|
||||
|
||||
---
|
||||
|
||||
## Unforgettable Element (Farklılaştırıcı Detay)
|
||||
|
||||
**Buğunvil çiçeği motifi** — broşürdeki gerçek fotoğraflarda havlu/yatak üzerine serpiştirilmiş çiçekler işletmenin kendine has, samimi bir dokunuşu. Bunu jenerik "gradient blob" yerine tekrar eden görsel imza olarak kullan:
|
||||
- Hero'da başlık etrafında ince, elle çizilmiş çiçek/dal SVG detayı (Magic UI değil, custom)
|
||||
- Section divider'larda minimal çiçek ikonu
|
||||
- Daire kartlarında hover'da hafif yaprak/çiçek parçacık animasyonu (abartısız, `prefers-reduced-motion` ile kapanır)
|
||||
|
||||
Bu, "jenerik AI otel sitesi" hissinden kaçınmak için PRD'deki gerçek marka detayına dayanıyor — uydurma değil.
|
||||
|
||||
---
|
||||
|
||||
## Bölüm Bazlı Yönlendirme
|
||||
|
||||
- **Hero:** Broşürdeki balkon/manzara fotoğrafı (veya benzeri) full-bleed, hafif koyu overlay, ortalanmış serif başlık + "Akyaka'nın Huzuru Sizinle" alt başlık + rezervasyon/iletişim CTA. Transparent navbar, scroll'da frosted glass.
|
||||
- **Daire kartları:** 3/2 oranlı büyük görsel, shadcn Carousel, `whileHover scale-[1.02]`, minimal metin (ad + kapasite + "Detaylar" linki)
|
||||
- **Olanaklar (Amenity) bandı:** Ana sayfada ikon + kısa etiket şeklinde yatay şerit (Havuz, Wifi, Özel Mutfak, Balkon)
|
||||
- **Konum/Galeri:** Editorial düzen, bol whitespace, masonry veya kategori tab'lı galeri
|
||||
- **Footer:** Koyu ahşap-kahve arka plan (`--secondary` bazlı), serif logo, adres + telefon + WhatsApp butonu
|
||||
|
||||
## Anti-Klişe Kontrol
|
||||
- `bg-gradient-to-r from-blue-500 to-purple-600` yok — palet OKLCH sabitlerinden
|
||||
- Sistem fontu yok — `next/font` ile Lora + Nunito
|
||||
- Her section `py-20 text-center` tekrarı yok — ritim değişken
|
||||
- Stok "genel otel" görseli yerine broşürdeki gerçek fotoğraflar önceliklendirilir
|
||||
|
||||
---
|
||||
|
||||
**Sonraki adım:** Bu brief + `docs/prd.md` ile `/design-demo` çalıştırılabilir.
|
||||
+187
@@ -0,0 +1,187 @@
|
||||
# PRD — Sitar Apart & Otel Web Sitesi
|
||||
|
||||
## 1. Proje Özeti
|
||||
|
||||
**İşletme:** Sitar Apart & Otel
|
||||
**Konum:** Akyaka, İnişdibi Cd. No:46, Ula/Muğla
|
||||
**Telefon:** 0 530 510 98 42
|
||||
**Mevcut domain:** www.akyakastarapart.com
|
||||
**Slogan:** "Akyaka'nın Huzuru Sizinle!"
|
||||
|
||||
Akyaka'da, denize 10 dakika yürüme mesafesinde, merkezi konumda (market, pazaryeri, kafelere yakın) faaliyet gösteren self-catering apart otel. Kaynak içerik: işletmenin mevcut tanıtım broşüründen (sitar apart.pdf) çıkarıldı.
|
||||
|
||||
**Site tipi:** Otel / Apart Otel (self-catering)
|
||||
|
||||
## 2. Marka Bilgileri
|
||||
|
||||
- **Logo:** Ev/dalga siluetli çizgi logo, turkuaz (#2FB6C4 civarı) renkte, "SİTAR APART & OTEL" yazısı
|
||||
- **Ana renk:** Turkuaz / camgöbeği (broşürde üst-alt bantlarda kullanılan turkuaz)
|
||||
- **Yardımcı renkler:** Kirli beyaz / krem arka plan, koyu kahve (ahşap balkon detayları)
|
||||
- **Ton:** Sıcak, sade, huzurlu — butik apart otel havası (5 yıldızlı lüks otel değil)
|
||||
|
||||
## 3. Site Haritası (Sayfa Envanteri)
|
||||
|
||||
| Route | Açıklama |
|
||||
|---|---|
|
||||
| `/` | Ana Sayfa — hero, kısa tanıtım, olanaklar özeti, öne çıkan daireler, CTA (rezervasyon/iletişim) |
|
||||
| `/dairelerimiz` | Tüm daire tiplerinin listesi (1+0, 1+1 x2 varyant) |
|
||||
| `/dairelerimiz/[slug]` | Daire detay sayfası — galeri, açıklama, olanaklar, kapasite, rezervasyon formu |
|
||||
| `/galeri` | Fotoğraf galerisi (kategorili: daireler, dış cephe, manzara, balkon) |
|
||||
| `/konum` | Akyaka & ulaşım bilgisi, harita gömme, çevredeki market/pazaryeri/kafeler |
|
||||
| `/iletisim` | İletişim formu, adres, telefon, WhatsApp linki, harita |
|
||||
| `/admin/*` | Yönetim paneli (bkz. Bölüm 8) |
|
||||
|
||||
Not: Bu işletme restoran/spa gibi ek hizmetler sunmuyor (self-catering apart), bu yüzden "Hizmetlerimiz" sayfası yerine olanaklar (amenities) ana sayfada ve daire detayında gösterilir.
|
||||
|
||||
## 4. Dil Seçenekleri
|
||||
|
||||
`tr`, `en`, `de` (Akyaka bölgesi yoğun Alman turist trafiği alıyor, DE desteği önemli)
|
||||
|
||||
→ next-intl locales: `['tr', 'en', 'de']`
|
||||
→ `messages/tr.json`, `en.json`, `de.json`
|
||||
|
||||
## 5. Servisler / Olanaklar (Amenity)
|
||||
|
||||
Broşürden çıkarılan olanaklar:
|
||||
|
||||
- Yüzme Havuzu (Pool)
|
||||
- Wifi
|
||||
- Özel Mutfak Alanı (Private Kitchen Area)
|
||||
- Balkon (fotoğraflarda görünüyor, tüm dairelerde var)
|
||||
- Klima (Akyaka yaz sıcaklarında standart, eklenmesi önerilir — teyit gerekir)
|
||||
|
||||
→ Prisma: `model Amenity { slug, labelTr, labelEn, labelDe, icon }`
|
||||
→ Room modeli üzerinde `amenities String[]` veya `RoomAmenity` join tablosu
|
||||
|
||||
## 6. Daire Tipleri (Room)
|
||||
|
||||
Broşürden 3 daire konfigürasyonu çıkarıldı:
|
||||
|
||||
| Slug | Ad (TR) | Açıklama | Kapasite (tahmini) |
|
||||
|---|---|---|---|
|
||||
| `1-0-daire` | 1+0 Dairemiz | Stüdyo tip, tek yatak, mini mutfak, banyo | 1-2 kişi |
|
||||
| `1-1-daire-a` | 1+1 Dairemiz | Yatak odası + ayrı mutfak köşesi, balkon | 2 kişi |
|
||||
| `1-1-daire-b` | 1+1 Dairemiz (2 Oda) | 2 kişilik ve 1 kişilik olmak üzere 2 oda, balkon | 3-4 kişi |
|
||||
|
||||
Ortak özellikler (broşürden): Denize 10 dk yürüme mesafesi, merkezi konum, market/pazaryeri/kafelere yakınlık.
|
||||
|
||||
→ Prisma:
|
||||
```prisma
|
||||
enum RoomType {
|
||||
STUDIO_1_0
|
||||
SUITE_1_1
|
||||
}
|
||||
|
||||
model Room {
|
||||
id String @id @default(cuid())
|
||||
slug String @unique
|
||||
type RoomType
|
||||
nameTr String
|
||||
nameEn String
|
||||
nameDe String
|
||||
descriptionTr String
|
||||
descriptionEn String
|
||||
descriptionDe String
|
||||
capacity Int
|
||||
price Int? // gecelik fiyat (varsa; broşürde fiyat yok, admin'den girilecek)
|
||||
imageUrl String?
|
||||
images String[]
|
||||
amenities String[]
|
||||
available Boolean @default(true)
|
||||
featured Boolean @default(false)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
}
|
||||
```
|
||||
|
||||
**Not:** Broşürde gecelik fiyat bilgisi yok. İşletme sahibinden fiyat teyidi alınmalı; alınana kadar mock data'da placeholder fiyat kullanılacak ve "Fiyat için iletişime geçin" ibaresi eklenmesi önerilir.
|
||||
|
||||
## 7. Rezervasyon Formu Alanları
|
||||
|
||||
Bu bir self-catering apart, online ödeme/anlık onay yok — **rezervasyon talebi** (inquiry) formu olarak kurgulanmalı, otomatik onay değil.
|
||||
|
||||
Alanlar: `checkIn`, `checkOut`, `adults`, `children`, `roomId` (daire tipi seçimi), `fullName`, `email`, `phone`, `message`
|
||||
|
||||
→ Prisma:
|
||||
```prisma
|
||||
enum ReservationStatus {
|
||||
PENDING
|
||||
CONFIRMED
|
||||
CANCELLED
|
||||
}
|
||||
|
||||
model Reservation {
|
||||
id String @id @default(cuid())
|
||||
roomId String
|
||||
room Room @relation(fields: [roomId], references: [id])
|
||||
checkIn DateTime
|
||||
checkOut DateTime
|
||||
adults Int
|
||||
children Int @default(0)
|
||||
fullName String
|
||||
email String
|
||||
phone String
|
||||
message String?
|
||||
status ReservationStatus @default(PENDING)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
}
|
||||
```
|
||||
→ API: `POST /api/reservations` (public), `GET /api/admin/reservations` (liste)
|
||||
→ Zod: `ReservationSchema`
|
||||
|
||||
## 8. İletişim Formu Alanları
|
||||
|
||||
`fullName`, `email`, `phone`, `message`
|
||||
|
||||
→ Prisma: `model ContactMessage { fullName, email, phone, message, read Boolean @default(false), ... }`
|
||||
→ API: `POST /api/contact` (public), `GET /api/admin/messages`
|
||||
|
||||
## 9. Admin / Yönetim İhtiyaçları
|
||||
|
||||
Standart admin paneli (her projede sabit) + bu proje için:
|
||||
|
||||
- `/admin/rooms` — daire tipleri CRUD (ad, açıklama TR/EN/DE, kapasite, fiyat, olanaklar, görseller)
|
||||
- `/admin/reservations` — rezervasyon talepleri listesi, durum güncelleme (PENDING/CONFIRMED/CANCELLED)
|
||||
- `/admin/gallery` — galeri görselleri CRUD, kategori bazlı
|
||||
- `/admin/messages` — iletişim mesajları listesi, okundu işaretleme
|
||||
- `/admin/amenities` — olanaklar listesi (opsiyonel, sabit liste de olabilir)
|
||||
- Dashboard: toplam daire sayısı, bekleyen rezervasyon sayısı, okunmamış mesaj sayısı
|
||||
|
||||
## 10. Sosyal Medya / 3. Parti Entegrasyonlar
|
||||
|
||||
- **WhatsApp click-to-chat:** `0 530 510 98 42` numarasına yönlenen buton (header + iletişim sayfası)
|
||||
- **Google Maps embed:** Akyaka, İnişdibi Cd. No:46, Ula/Muğla konumu
|
||||
- Instagram/Facebook hesabı broşürde belirtilmemiş — işletme sahibinden teyit alınmalı, varsa footer'a eklenir
|
||||
|
||||
→ Env: `NEXT_PUBLIC_WHATSAPP_NUMBER`, `NEXT_PUBLIC_MAPS_EMBED_URL`
|
||||
|
||||
## 11. Teknik Notlar
|
||||
|
||||
- Mevcut domain `www.akyakastarapart.com` — yeni site bu domain üzerine yayınlanacak (Coolify deploy sürecinde teyit edilmeli)
|
||||
- Broşürdeki fotoğraflar (3 sayfa, düşük-orta çözünürlük) başlangıç mock görseli olarak kullanılabilir; ancak production için işletmeden yüksek çözünürlüklü orijinal fotoğraf talep edilmesi önerilir
|
||||
- Fiyat bilgisi eksik — admin panelinden sonradan girilecek şekilde `price` alanı nullable
|
||||
- Tek işletme, çoklu şube yok — `Location`/`Branch` modeline gerek yok
|
||||
|
||||
## 12. Rebranding / Öncelik Sırası (Todo)
|
||||
|
||||
1. Ana Sayfa + Daireler listesi + Daire detay (temel akış)
|
||||
2. Rezervasyon talep formu + admin onay ekranı
|
||||
3. Galeri sayfası
|
||||
4. İletişim sayfası + WhatsApp/Harita entegrasyonu
|
||||
5. Admin panel (rooms, reservations, gallery, messages)
|
||||
6. TR/EN/DE içerik doldurma
|
||||
7. Openinary görsel yükleme entegrasyonu
|
||||
8. Coolify deploy (bkz. `/coolify-deploy` skill)
|
||||
|
||||
---
|
||||
|
||||
## PRD'den Çıkarılanlar (Özet)
|
||||
|
||||
- **Modeller:** Room, Reservation, Amenity, Gallery, ContactMessage
|
||||
- **Lokaller:** tr, en, de
|
||||
- **Admin sayfaları:** rooms, reservations, gallery, messages, amenities
|
||||
- **Özel route'lar:** `/api/reservations` (public POST), `/api/contact` (public POST)
|
||||
- **Eksik / teyit gereken bilgiler:** gecelik fiyatlar, sosyal medya hesapları, klima olup olmadığı, yüksek çözünürlüklü görseller
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
name: Aegean Coastal Sanctuary
|
||||
colors:
|
||||
surface: '#f6fafb'
|
||||
surface-dim: '#d7dbdc'
|
||||
surface-bright: '#f6fafb'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f1f4f5'
|
||||
surface-container: '#ebeef0'
|
||||
surface-container-high: '#e5e9ea'
|
||||
surface-container-highest: '#dfe3e4'
|
||||
on-surface: '#181c1d'
|
||||
on-surface-variant: '#3e494b'
|
||||
inverse-surface: '#2d3132'
|
||||
inverse-on-surface: '#eef1f2'
|
||||
outline: '#6e797c'
|
||||
outline-variant: '#bdc8cb'
|
||||
surface-tint: '#006877'
|
||||
primary: '#006574'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#088092'
|
||||
on-primary-container: '#f8fdff'
|
||||
inverse-primary: '#78d4e7'
|
||||
secondary: '#705a4c'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#f8dac8'
|
||||
on-secondary-container: '#755e50'
|
||||
tertiary: '#8a4c17'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#a7642e'
|
||||
on-tertiary-container: '#fffbff'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#a3eeff'
|
||||
primary-fixed-dim: '#78d4e7'
|
||||
on-primary-fixed: '#001f25'
|
||||
on-primary-fixed-variant: '#004e5a'
|
||||
secondary-fixed: '#fbddca'
|
||||
secondary-fixed-dim: '#dec1af'
|
||||
on-secondary-fixed: '#28180d'
|
||||
on-secondary-fixed-variant: '#574335'
|
||||
tertiary-fixed: '#ffdcc5'
|
||||
tertiary-fixed-dim: '#ffb782'
|
||||
on-tertiary-fixed: '#301400'
|
||||
on-tertiary-fixed-variant: '#703802'
|
||||
background: '#f6fafb'
|
||||
on-background: '#181c1d'
|
||||
surface-variant: '#dfe3e4'
|
||||
typography:
|
||||
headline-xl:
|
||||
fontFamily: Literata
|
||||
fontSize: 48px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1.2'
|
||||
headline-lg:
|
||||
fontFamily: Literata
|
||||
fontSize: 32px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1.3'
|
||||
headline-md:
|
||||
fontFamily: Literata
|
||||
fontSize: 24px
|
||||
fontWeight: '500'
|
||||
lineHeight: '1.4'
|
||||
body-lg:
|
||||
fontFamily: Nunito Sans
|
||||
fontSize: 18px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.6'
|
||||
body-md:
|
||||
fontFamily: Nunito Sans
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.6'
|
||||
label-lg:
|
||||
fontFamily: Nunito Sans
|
||||
fontSize: 14px
|
||||
fontWeight: '700'
|
||||
lineHeight: '1.2'
|
||||
letterSpacing: 0.05em
|
||||
headline-lg-mobile:
|
||||
fontFamily: Literata
|
||||
fontSize: 28px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1.3'
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
unit: 8px
|
||||
container-max: 1200px
|
||||
gutter: 24px
|
||||
margin-mobile: 20px
|
||||
section-gap: 80px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system embodies the "Warm Coastal" aesthetic, specifically tailored for the slow-living atmosphere of Akyaka. It departs from sterile corporate luxury in favor of an **Authentic & Boutique** personality. The visual language is tactile and inviting, evoking the feeling of sun-drenched stone walls, turquoise waters, and the iconic bougainvillea of the Turkish coast.
|
||||
|
||||
The style leverages **soft minimalism** paired with **organic accents**. Large, evocative photography of the Aegean landscape is grounded by generous whitespace and soft, rounded geometry. A signature line-art motif of a bougainvillea branch is used sparingly to anchor section headers, adding a human, illustrative touch to the digital interface.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is derived directly from the Akyaka landscape:
|
||||
- **Primary (Turquoise):** Represents the Azmak River and the Aegean sea. Used for primary branding and navigational elements.
|
||||
- **Secondary (Dark Wood):** Inspired by the traditional Ula-style architecture and woodwork. Used for deep contrast, footers, and high-priority text.
|
||||
- **Accent (Bougainvillea Pink):** Reserved specifically for call-to-action buttons and highlights to ensure they pop against the neutral base.
|
||||
- **Background (Cream):** An off-white, paper-like base that feels warmer and more organic than pure white.
|
||||
|
||||
## Typography
|
||||
|
||||
The typographic hierarchy balances a literary, authoritative serif with a friendly, accessible sans-serif.
|
||||
|
||||
- **Headlines:** Use **Literata** (or Lora) to convey a sense of history and boutique quality. Larger headlines should use tighter tracking, while smaller subheads benefit from more breathing room.
|
||||
- **Body & UI:** Use **Nunito Sans**. Its rounded terminals mirror the "soft" shape language of the UI and ensure high readability for room descriptions and booking details.
|
||||
- **Accents:** Use all-caps labels with slight letter spacing for categories or "small print" to maintain a clean, organized appearance.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
This design system uses a **Fluid-Fixed hybrid grid**. On desktop, content is contained within a 1200px max-width container to maintain focus, while background elements can bleed to the edges.
|
||||
|
||||
- **Rhythm:** A base 8px unit dictates all spacing.
|
||||
- **Sectioning:** Large gaps (80px-120px) are used between major content blocks to evoke a sense of calm and "unhurried" browsing.
|
||||
- **Mobile:** Margins shrink to 20px, and vertical spacing is compressed slightly to 64px between sections to maintain momentum.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Visual hierarchy is established through **Tonal Layers** and **Ambient Shadows**.
|
||||
|
||||
- **Surfaces:** Cards and floating elements sit on the Cream background with extremely soft, diffused shadows (Blur: 32px, Opacity: 4%, Color: Secondary Brown).
|
||||
- **Glassmorphism:** The primary navigation bar uses a frosted glass effect (Backdrop Blur: 12px) with a semi-transparent cream tint (85% opacity). This allows the colors of the hero imagery to bleed through subtly.
|
||||
- **Depth Levels:**
|
||||
- Level 0: Background (#F7F4EF).
|
||||
- Level 1: Flat cards with a 1px #E5E0D5 border.
|
||||
- Level 2: Raised elements (interactive cards) with the ambient shadow.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is consistently "Soft-Organic."
|
||||
|
||||
- **Corner Radii:** Standard components (buttons, input fields) use 12px. Larger components (cards, image containers) use 24px.
|
||||
- **Images:** Always utilize the `rounded-xl` (24px) radius to soften the edges of the photography, making the imagery feel more like "windows" into the hotel.
|
||||
- **Icons:** Use rounded icon sets (e.g., Feather or Lucide) with a 2px stroke weight to match the body typography weight.
|
||||
|
||||
## Components
|
||||
|
||||
### Navbar
|
||||
The navbar is a fixed-top element with a frosted glass background. The logo (Sitar) is placed on the left, with primary navigation links in the center (Secondary Brown) and a "Book Now" CTA in the Accent Pink on the right.
|
||||
|
||||
### Buttons
|
||||
- **Primary:** Filled Accent Pink (#D46A8C) with Cream text. 24px rounded corners. Minimum height 48px.
|
||||
- **Secondary:** Outlined Primary Teal (#3A9CAE) with 1.5px border.
|
||||
- **Text:** Underlined Serif (Literata) for a sophisticated "Read More" feel.
|
||||
|
||||
### Cards
|
||||
Room and amenity cards use a vertical stack:
|
||||
1. **Image:** 3:2 aspect ratio with a 24px corner radius.
|
||||
2. **Content:** Cream background, 12px padding.
|
||||
3. **Typography:** Headline-MD for titles, Body-MD for descriptions.
|
||||
|
||||
### Input Fields
|
||||
Soft cream background (#F2EEE5) with no border until focused. On focus, a 1.5px Primary Teal border appears. Label text sits above the field in Nunito Sans Bold (12px).
|
||||
|
||||
### Footer
|
||||
A high-contrast block using the Dark Wood Brown (#3D2B1F). Text is rendered in Cream (#F7F4EF) at 80% opacity for secondary info, and 100% for links and titles.
|
||||
|
||||
### Motifs
|
||||
Small SVG line-art bougainvillea branches should be placed at a -5 degree angle above H2 section headers, slightly overlapping the text to create a hand-crafted, scrapbook feel.
|
||||
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Sitar Apart & Otel - 1+1 Premium Apartment</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-container": "#fffbff",
|
||||
"on-secondary-fixed": "#28180d",
|
||||
"on-secondary-fixed-variant": "#574335",
|
||||
"on-primary-fixed": "#001f25",
|
||||
"surface-dim": "#d7dbdc",
|
||||
"secondary-container": "#f8dac8",
|
||||
"on-tertiary-fixed": "#301400",
|
||||
"tertiary-container": "#a7642e",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-fixed": "#a3eeff",
|
||||
"inverse-on-surface": "#eef1f2",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#dfe3e4",
|
||||
"surface-bright": "#f6fafb",
|
||||
"surface": "#f6fafb",
|
||||
"on-primary-container": "#f8fdff",
|
||||
"on-secondary-container": "#755e50",
|
||||
"surface-container": "#ebeef0",
|
||||
"on-surface-variant": "#3e494b",
|
||||
"primary-fixed-dim": "#78d4e7",
|
||||
"secondary-fixed": "#fbddca",
|
||||
"outline": "#6e797c",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#dec1af",
|
||||
"outline-variant": "#bdc8cb",
|
||||
"surface-container-highest": "#dfe3e4",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f1f4f5",
|
||||
"on-surface": "#181c1d",
|
||||
"tertiary-fixed-dim": "#ffb782",
|
||||
"primary": "#006574",
|
||||
"inverse-surface": "#2d3132",
|
||||
"tertiary-fixed": "#ffdcc5",
|
||||
"on-primary-fixed-variant": "#004e5a",
|
||||
"background": "#f6fafb",
|
||||
"on-error": "#ffffff",
|
||||
"on-background": "#181c1d",
|
||||
"surface-tint": "#006877",
|
||||
"on-tertiary-fixed-variant": "#703802",
|
||||
"inverse-primary": "#78d4e7",
|
||||
"surface-container-high": "#e5e9ea",
|
||||
"secondary": "#705a4c",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary": "#8a4c17",
|
||||
"primary-container": "#088092",
|
||||
"accent-pink": "#D46A8C"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "12px",
|
||||
"2xl": "24px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"container-max": "1200px",
|
||||
"margin-mobile": "20px",
|
||||
"section-gap": "80px",
|
||||
"unit": "8px",
|
||||
"gutter": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Literata"],
|
||||
"label-lg": ["Nunito Sans"],
|
||||
"headline-xl": ["Literata"],
|
||||
"headline-md": ["Literata"],
|
||||
"body-lg": ["Nunito Sans"],
|
||||
"body-md": ["Nunito Sans"],
|
||||
"headline-lg-mobile": ["Literata"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #F7F4EF; /* Overriding with brand background */
|
||||
color: #3D2B1F;
|
||||
}
|
||||
.bougainvillea-motif {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: -12px;
|
||||
transform: rotate(-5deg);
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
.glass-nav {
|
||||
backdrop-filter: blur(12px);
|
||||
background-color: rgba(247, 244, 239, 0.85);
|
||||
}
|
||||
.custom-shadow {
|
||||
box-shadow: 0 32px 64px -12px rgba(112, 90, 76, 0.04);
|
||||
}
|
||||
.carousel-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-secondary">
|
||||
<!-- TopNavBar Navigation Shell -->
|
||||
<nav class="fixed top-0 w-full z-50 glass-nav border-b border-outline-variant/20 shadow-sm">
|
||||
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||
<div class="font-headline-md text-headline-md text-secondary italic">Sitar Apart & Otel</div>
|
||||
<div class="hidden md:flex gap-8 items-center">
|
||||
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Apartments</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Gallery</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-accent-pink text-on-tertiary px-6 py-2.5 rounded-full font-label-lg text-label-lg hover:opacity-80 transition-opacity">
|
||||
Book Now
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-24 pb-section-gap px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||
<!-- Hero Section / Breadcrumb -->
|
||||
<div class="mb-8">
|
||||
<nav class="flex text-on-surface-variant font-label-lg text-[12px] uppercase tracking-widest gap-2 mb-4">
|
||||
<a class="hover:text-primary transition-colors" href="#">Home</a>
|
||||
<span>/</span>
|
||||
<a class="hover:text-primary transition-colors" href="#">Apartments</a>
|
||||
<span>/</span>
|
||||
<span class="text-secondary font-bold">1+1 Premium Apartment</span>
|
||||
</nav>
|
||||
<div class="relative inline-block">
|
||||
<!-- Motif Asset Simulation -->
|
||||
<svg class="bougainvillea-motif w-16 h-16" fill="none" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 80C20 80 40 40 80 20M30 60C30 60 50 70 70 50" stroke="#D46A8C" stroke-linecap="round" stroke-width="2"></path>
|
||||
<circle cx="80" cy="20" fill="#D46A8C" r="4"></circle>
|
||||
<circle cx="70" cy="50" fill="#D46A8C" r="3"></circle>
|
||||
</svg>
|
||||
<h1 class="font-headline-xl text-headline-xl md:text-headline-xl text-secondary mt-2">1+1 Premium Apartment</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Layout Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
<!-- Content Column -->
|
||||
<div class="lg:col-span-2 space-y-12">
|
||||
<!-- Image Carousel Placeholder -->
|
||||
<section class="relative group">
|
||||
<div class="carousel-container flex overflow-x-auto snap-x snap-mandatory gap-4 pb-4 scroll-smooth">
|
||||
<div class="flex-shrink-0 w-full aspect-[16/9] snap-center rounded-2xl overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A sun-drenched balcony of a boutique Mediterranean apartment in Akyaka. The scene features a small cafe table with a white ceramic coffee cup and an open book. Lush vibrant pink bougainvillea spills over the dark wood railing. In the background, calm turquoise sea waters meet a densely forested green coastline under golden hour sunlight, creating a warm, tranquil, and authentic coastal living atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAwFWBl0TtXeuhwpDeP5XxCX-pRxKOvatQRMjYNDW5Qs_BEXSictnCPy-X218OaW5yq0COlgrggDtcTA2zm7YpODg3vJ7DCn-ZLuaaJmE1ON7MBvvAP2xsSBjd_-K9FXWTclgJsyakeW5BGSfdiVIBejX5ZARSPZgl6xf4Tc-d5bBEEkrXLzDXhvJ4kvH-SkXthN9y50NRk_iW0bJKWmH8nCwV1_bKypjy78Wrm2crlMdzvtU2JWORPDb5PNVE4xfZsz4RztzRY9M4"/>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-full aspect-[16/9] snap-center rounded-2xl overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A warm, minimalist interior of a 1+1 boutique apartment. The living area features soft cream-colored stone walls and natural light flooding through large windows. A contemporary linen sofa in a sandy tone sits on a textured rug. Subtle teal accents appear in throw pillows, while a small sprig of bougainvillea rests in a handmade clay vase on a dark wood coffee table. The mood is airy, clean, and unhurried." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCrZkzMyjNJCiAJfvWFrNA4Wjhl3RZVQjjobhbQhHQYCnbMRt4uzsVyFKjFo4IGRRq6a-iFoxu-SFcsuLMpx_fNZsd5QWPtMdPEqCH6dIUwcys5UZFk45wqlUGS4wKKOcoviXBMMbo0OZFHQImKWsmTd6gHdfZlWB5hUlvWlxBRK6RmTljPwGdRqUtZJuZ7oH7EUL3FJZ-Fr4prhjBo-CFcRqCjU2_VJ8KqXMZJ6Q_DqeDgxGbeV5AwHXA8rDDiZ3BtFX7AsQBLBd0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center gap-2 mt-4">
|
||||
<span class="w-2 h-2 rounded-full bg-accent-pink"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Description -->
|
||||
<section class="space-y-6">
|
||||
<div class="flex items-center gap-6 py-4 border-y border-outline-variant/30">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="groups">groups</span>
|
||||
<span class="font-label-lg text-secondary">Up to 4 Guests</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="square_foot">square_foot</span>
|
||||
<span class="font-label-lg text-secondary">55 m²</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="bed">bed</span>
|
||||
<span class="font-label-lg text-secondary">1 Bedroom</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-secondary">A Sanctuary of Slow Living</h2>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
||||
Our 1+1 Premium Apartment is designed for those who seek the authentic Akyaka experience. Combining traditional Aegean architecture with soft modern minimalism, this space offers a private balcony overlooking the forest-meets-sea horizon. The interiors are crafted with natural materials—exposed stone, cedarwood, and linen—to create a tactile, grounding atmosphere.
|
||||
</p>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
||||
Whether you are waking up to the scent of salt air or spending an afternoon reading under the bougainvillea, every detail in this apartment invites you to slow down and embrace the rhythm of the Turkish coast.
|
||||
</p>
|
||||
</section>
|
||||
<!-- Amenities -->
|
||||
<section class="space-y-8">
|
||||
<h3 class="font-headline-md text-headline-md text-secondary">Apartment Amenities</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="wifi">wifi</span>
|
||||
<span class="font-body-md">High-speed Wi-Fi</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="ac_unit">ac_unit</span>
|
||||
<span class="font-body-md">Air Conditioning</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="kitchen">kitchen</span>
|
||||
<span class="font-body-md">Fully Equipped Kitchen</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="local_laundry_service">local_laundry_service</span>
|
||||
<span class="font-body-md">Washing Machine</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="coffee_maker">coffee_maker</span>
|
||||
<span class="font-body-md">Espresso Machine</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="balcony">balcony</span>
|
||||
<span class="font-body-md">Private Balcony</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Inquiry Sidebar -->
|
||||
<aside class="relative">
|
||||
<div class="sticky top-28 bg-surface-container-lowest p-8 rounded-2xl border border-outline-variant/30 custom-shadow space-y-6">
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-headline-md text-headline-md text-secondary">Inquiry Form</h3>
|
||||
<p class="font-body-md text-on-surface-variant">Check availability for your stay.</p>
|
||||
</div>
|
||||
<form action="#" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Check-In</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" type="date"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Check-Out</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" type="date"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Adults</label>
|
||||
<select class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md">
|
||||
<option>1 Adult</option>
|
||||
<option selected="">2 Adults</option>
|
||||
<option>3 Adults</option>
|
||||
<option>4 Adults</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Children</label>
|
||||
<select class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md">
|
||||
<option>None</option>
|
||||
<option>1 Child</option>
|
||||
<option>2 Children</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Full Name</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="John Doe" type="text"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Email Address</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="hello@example.com" type="email"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Phone Number</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="+90 ..." type="tel"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block font-label-lg text-[12px] text-primary uppercase">Your Message</label>
|
||||
<textarea class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="Tell us about your needs..." rows="3"></textarea>
|
||||
</div>
|
||||
<button class="w-full bg-accent-pink text-white font-label-lg text-label-lg py-4 rounded-2xl hover:opacity-90 transition-opacity shadow-lg shadow-accent-pink/20" type="submit">
|
||||
Submit Inquiry
|
||||
</button>
|
||||
</form>
|
||||
<div class="pt-4 text-center">
|
||||
<a class="font-headline-md text-primary italic border-b border-primary/30 pb-0.5 hover:border-primary transition-all" href="#">WhatsApp Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Shell -->
|
||||
<footer class="bg-inverse-surface dark:bg-on-surface w-full py-section-gap">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||
<div class="space-y-4">
|
||||
<div class="font-headline-md text-headline-md text-surface-container-lowest">Sitar Apart & Otel</div>
|
||||
<p class="text-surface-container-low/80 font-body-md">© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest.</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h4 class="text-surface-container-lowest font-headline-md">Explore</h4>
|
||||
<div class="flex flex-col gap-2">
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">Apartments</a>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">Location</a>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">Contact Us</a>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">WhatsApp Support</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-surface-container-lowest font-headline-md">Follow Us</h4>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-surface-container-lowest cursor-pointer hover:opacity-70" data-icon="photo_camera">photo_camera</span>
|
||||
<span class="material-symbols-outlined text-surface-container-lowest cursor-pointer hover:opacity-70" data-icon="share">share</span>
|
||||
</div>
|
||||
<p class="text-surface-container-low/80 text-sm">Experience the magic of Akyaka's architecture and nature.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Simple micro-interaction for the carousel
|
||||
const carousel = document.querySelector('.carousel-container');
|
||||
const dots = document.querySelectorAll('.flex.justify-center.gap-2.mt-4 span');
|
||||
|
||||
carousel.addEventListener('scroll', () => {
|
||||
const scrollPos = carousel.scrollLeft;
|
||||
const width = carousel.offsetWidth;
|
||||
const index = Math.round(scrollPos / width);
|
||||
|
||||
dots.forEach((dot, i) => {
|
||||
if(i === index) {
|
||||
dot.classList.add('bg-accent-pink');
|
||||
dot.classList.remove('bg-outline-variant');
|
||||
} else {
|
||||
dot.classList.remove('bg-accent-pink');
|
||||
dot.classList.add('bg-outline-variant');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="scroll-smooth" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Gallery | Sitar Apart & Otel Akyaka</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Nunito+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-container": "#fffbff",
|
||||
"on-secondary-fixed": "#28180d",
|
||||
"on-secondary-fixed-variant": "#574335",
|
||||
"on-primary-fixed": "#001f25",
|
||||
"surface-dim": "#d7dbdc",
|
||||
"secondary-container": "#f8dac8",
|
||||
"on-tertiary-fixed": "#301400",
|
||||
"tertiary-container": "#a7642e",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-fixed": "#a3eeff",
|
||||
"inverse-on-surface": "#eef1f2",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#dfe3e4",
|
||||
"surface-bright": "#f6fafb",
|
||||
"surface": "#f6fafb",
|
||||
"on-primary-container": "#f8fdff",
|
||||
"on-secondary-container": "#755e50",
|
||||
"surface-container": "#ebeef0",
|
||||
"on-surface-variant": "#3e494b",
|
||||
"primary-fixed-dim": "#78d4e7",
|
||||
"secondary-fixed": "#fbddca",
|
||||
"outline": "#6e797c",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#dec1af",
|
||||
"outline-variant": "#bdc8cb",
|
||||
"surface-container-highest": "#dfe3e4",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f1f4f5",
|
||||
"on-surface": "#181c1d",
|
||||
"tertiary-fixed-dim": "#ffb782",
|
||||
"primary": "#006574",
|
||||
"inverse-surface": "#2d3132",
|
||||
"tertiary-fixed": "#ffdcc5",
|
||||
"on-primary-fixed-variant": "#004e5a",
|
||||
"background": "#f6fafb",
|
||||
"on-error": "#ffffff",
|
||||
"on-background": "#181c1d",
|
||||
"surface-tint": "#006877",
|
||||
"on-tertiary-fixed-variant": "#703802",
|
||||
"inverse-primary": "#78d4e7",
|
||||
"surface-container-high": "#e5e9ea",
|
||||
"secondary": "#705a4c",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary": "#8a4c17",
|
||||
"primary-container": "#088092"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"container-max": "1200px",
|
||||
"margin-mobile": "20px",
|
||||
"section-gap": "80px",
|
||||
"unit": "8px",
|
||||
"gutter": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Literata"],
|
||||
"label-lg": ["Nunito Sans"],
|
||||
"headline-xl": ["Literata"],
|
||||
"headline-md": ["Literata"],
|
||||
"body-lg": ["Nunito Sans"],
|
||||
"body-md": ["Nunito Sans"],
|
||||
"headline-lg-mobile": ["Literata"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f6fafb; /* surface / cream background */
|
||||
color: #181c1d; /* on-surface */
|
||||
}
|
||||
.masonry-grid {
|
||||
columns: 1;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.masonry-grid {
|
||||
columns: 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.masonry-grid {
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
.masonry-item {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.bougainvillea-motif {
|
||||
transform: rotate(-5deg);
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
.glass-nav {
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md antialiased overflow-x-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-surface/85 backdrop-blur-xl border-b border-outline-variant/20 shadow-sm transition-all duration-300 ease-in-out">
|
||||
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||
<a class="font-headline-md text-headline-md text-secondary italic" href="#">Sitar Apart & Otel</a>
|
||||
<!-- Desktop Links -->
|
||||
<div class="hidden md:flex gap-8 items-center">
|
||||
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Apartments</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Gallery</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-[#D46A8C] text-surface-container-lowest px-6 py-2 rounded-full font-label-lg text-label-lg hover:opacity-80 transition-opacity">
|
||||
Book Now
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-32 pb-section-gap px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||
<!-- Header Section -->
|
||||
<header class="relative mb-16 max-w-2xl">
|
||||
<div class="bougainvillea-motif">
|
||||
<svg fill="none" height="60" viewbox="0 0 100 100" width="60" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 90C30 70 50 85 90 10" stroke="#D46A8C" stroke-linecap="round" stroke-width="2"></path>
|
||||
<path d="M40 60C35 55 25 58 20 65C15 72 20 80 28 78C36 76 42 68 40 60Z" fill="#D46A8C" fill-opacity="0.2" stroke="#D46A8C" stroke-width="1"></path>
|
||||
<path d="M65 35C60 30 50 33 45 40C40 47 45 55 53 53C61 51 67 43 65 35Z" fill="#D46A8C" fill-opacity="0.2" stroke="#D46A8C" stroke-width="1"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="font-headline-xl text-headline-xl text-secondary mb-4">Slow Living Captured</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
|
||||
Explore the tranquil atmosphere of Akyaka through our lens. From sun-drenched balconies to our boutique interiors, every corner of Sitar is designed for authentic comfort.
|
||||
</p>
|
||||
</header>
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-wrap items-center gap-4 mb-12" id="gallery-filters">
|
||||
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-primary text-primary transition-all active-filter bg-primary/10" data-filter="all">All</button>
|
||||
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="rooms">Rooms</button>
|
||||
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="exterior">Exterior</button>
|
||||
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="view">View</button>
|
||||
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="balcony">Balcony</button>
|
||||
</div>
|
||||
<!-- Masonry Gallery -->
|
||||
<div class="masonry-grid" id="gallery-grid">
|
||||
<!-- Item 1: Rooms -->
|
||||
<div class="masonry-item group cursor-pointer" data-category="rooms">
|
||||
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="A serene boutique hotel room in Akyaka with white linens, soft morning light streaming through wooden shutters, and a palette of cream, teal, and earthy brown tones. The aesthetic is warm coastal minimalism with high-end textures and sun-drenched stone walls in the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1aEElwzEj1OO6C3NKAnkKmGutSgmyOrciZa_kG2hHFEF9S5G1ENVfI6-yV86TEQzx5K-RrCupJrV2LmAgEqcdhVQob36ZGwcOUTyZCnr_iev7VxDcFzkHCeuSSjDVExhSxJvlsDaic4p03Z71vM6uD7Iw0bdJXpEjSuC1u6creV0oNXpb3hACVc_uKDQvmoID8jhzf2AGuzuOtGYZ9ejE-hbi4j2w9pMVdfQn0qYiKZGqAphOf2oUtWdeF7nniTh5mIWXjyjRx6k"/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||
<span class="text-surface-container-lowest font-headline-md text-headline-md">Boutique Interior</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 2: Exterior -->
|
||||
<div class="masonry-item group cursor-pointer" data-category="exterior">
|
||||
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="The exterior of a traditional Muğla-style stone house in Akyaka, featuring ornate wooden balconies and vibrant pink bougainvillea draping over the walls. The scene is bathed in golden hour sunlight, highlighting the turquoise accents and the warm, inviting boutique atmosphere of the property." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD4BZHDKlEkRMvcPb0tSot5HHJuWr7_Pj_qkr7w7iEamd1YMRcSzSYok-2dc6Mo9t3ahx32kzrgB0C3ofVzn5KtlHMMqC8MXB_ghvMahdP4TfCJhDF1uRC4PrDY2G-gCNpTcmRPv_M8h5ZwbsWUDyMud-x-IZQxlltB-AfCeSDrEbjKVh7wVa3qo3GH0i4_1iECtiebc9GrwcZIjsbbvJSm5eneJXZBqwlIoxhFWGimT7YcZc6VF0j6nfBpP3LZq1VFgFkgqaDZgc"/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||
<span class="text-surface-container-lowest font-headline-md text-headline-md">The Architecture</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 3: View -->
|
||||
<div class="masonry-item group cursor-pointer" data-category="view">
|
||||
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="A panoramic view of the Azmak River meeting the Aegean sea in Akyaka, Turkey. The water is a brilliant crystal-clear turquoise, surrounded by lush green reeds and distant hazy mountains. The lighting is bright and airy, capturing the essence of slow living and coastal tranquility." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBNcdY2wPycoAqYz4JBr7X6FN4huXhXiIlEYtcZqcW_3eFaqId6olZp6iYD4hMapBqcLkGs14-1A8k5l47367MFsKw2SicImjat1JvJe9-QdBT87VoyG1gTyMgJVUtfwdGGD-OQrsX4HEM1aGKDAgdejUnuoB8q18yrbBe0lZhXga5TvGzNlxybMs3d1Uq2cU7cUGp4AYNSvUBKr9Yu7JqZfh1YkvmVOPpl-9aNI7bjmYJQ7tZDZHn5UM9XW0kKu98JGrV-8sR03ds"/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||
<span class="text-surface-container-lowest font-headline-md text-headline-md">Coastal Vistas</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 4: Balcony -->
|
||||
<div class="masonry-item group cursor-pointer" data-category="balcony">
|
||||
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="A private balcony with a small wooden table and two chairs, overlooking a garden of bougainvillea and olive trees. A tray with Turkish coffee and a small vase of flowers sits on the table. The lighting is soft and diffused, creating a peaceful and intimate boutique hotel vibe." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAcy0OEgSo9Ur2xJdcrcVUC0646swAod5YG8zW7vYwuCQ271NwflGxRImcG76GQYv_lxKBHl581Yl06Uk5FqZJbxOZP9GiP2vq0dHC-dPU6cP5J1B61DxBksgk6uIOrNzbCdOJ_AjCW4srQp8ZR-R9aEw9fuI0hAw3wGu08BXdpC0nvK8AsmkFandeKoSTV9zUcB0N6Uws2i_kXh4NdfEjTYCpy-a2xWtkei6azHAWTACDevkQ3sSi4NsBoRZRcdIFv8w44aS9-r0"/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||
<span class="text-surface-container-lowest font-headline-md text-headline-md">Morning Coffee Spot</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 5: Rooms -->
|
||||
<div class="masonry-item group cursor-pointer" data-category="rooms">
|
||||
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="Detail shot of a boutique apartment bathroom featuring organic textures, stone basins, and teal-colored handcrafted tiles. The lighting is warm and spa-like, emphasizing the slow living aesthetic and high-end natural materials used in the interior design." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBo5eye6UD8H6-bMRp5ABMrkKgwcMZ1r7jimRL2M_kxmV7z9U7AbxTRnvu5_TprSCs53QvaqmueFB6-t6iHdTQb5s_02FTOWF-rfN5ShTGlYjPRzhmzDOgTWeOO1YPe6gAmks_x00Q6yZvLeyb1p93ZowIpJpYSqLTuZh-brLT-lDpytaxtgBkM2rWBQL5MEVeG2Z3t8JZIEyVpVOBHgOt-jx-xf2JzuNJUZqpcmdLJjER_HQFbsXCXbF21OrcLJTBLoJGA10Ti2_Y"/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||
<span class="text-surface-container-lowest font-headline-md text-headline-md">Organic Details</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 6: View -->
|
||||
<div class="masonry-item group cursor-pointer" data-category="view">
|
||||
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="Aerial view of Akyaka village nestled between pine-covered mountains and the bright blue Aegean Sea. The red-tiled roofs of traditional houses contrast beautifully with the vibrant greens and blues. The overall mood is serene, idyllic, and perfectly representative of the Turkish Riviera." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJ5db8rxbn6-31ZqKfZMq1fzqbJ_Jvg6ocB9Bz7jdO7ydqtZUVQuBcpaxfBaQpzZkalbKlnfRsxfSwpiicLtZFKTI7Q_02gU3vLkeSc43voN8SZLhe_3FUCpvPL_A02hENSAQbZPrrqvQCJTCIdiF8SJvpMu9S6vyLzdW4cpC3hBHAe0Ft0Fl2n4VMNWkfUy2iawZj1A5-LYgnqR3JZaVwTEFgR75AKbJZu8AdOG-V3d5bsAbH3h1xEfI5TiR59nYmfdpgxSU4chk"/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||
<span class="text-surface-container-lowest font-headline-md text-headline-md">Village Panorama</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-inverse-surface dark:bg-on-surface w-full py-section-gap">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto text-surface-container-lowest">
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-headline-md text-headline-md text-surface-container-lowest">Sitar Apart & Otel</h3>
|
||||
<p class="text-surface-container-low/80 font-body-md text-body-md">
|
||||
Experience the art of slow living in the heart of Akyaka. Authentic hospitality meets coastal charm.
|
||||
</p>
|
||||
<div class="pt-4">
|
||||
<span class="font-body-md text-body-md text-surface-container-low/60 italic">© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<h4 class="font-label-lg text-label-lg text-surface-container-lowest uppercase tracking-wider mb-2">Explore</h4>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Apartments</a>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Location</a>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Contact Us</a>
|
||||
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">WhatsApp Support</a>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<h4 class="font-label-lg text-label-lg text-surface-container-lowest uppercase tracking-wider">Stay Connected</h4>
|
||||
<div class="flex gap-4">
|
||||
<a class="w-10 h-10 rounded-full border border-surface-container-low/30 flex items-center justify-center hover:bg-surface-container-low/10 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">photo_camera</span>
|
||||
</a>
|
||||
<a class="w-10 h-10 rounded-full border border-surface-container-low/30 flex items-center justify-center hover:bg-surface-container-low/10 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">face_nod</span>
|
||||
</a>
|
||||
<a class="w-10 h-10 rounded-full border border-surface-container-low/30 flex items-center justify-center hover:bg-surface-container-low/10 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">map</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-low/5 rounded-xl border border-surface-container-low/10">
|
||||
<p class="text-label-lg text-label-lg">Contact:</p>
|
||||
<p class="text-body-md text-body-md">+90 252 243 XXXX</p>
|
||||
<p class="text-body-md text-body-md">Akyaka, Muğla, Turkey</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Interactive Scripts -->
|
||||
<script>
|
||||
// Gallery Filter Logic
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const galleryItems = document.querySelectorAll('.masonry-item');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// UI update
|
||||
filterBtns.forEach(b => {
|
||||
b.classList.remove('bg-primary/10', 'active-filter', 'border-primary');
|
||||
b.classList.add('border-transparent');
|
||||
b.classList.remove('text-primary');
|
||||
b.classList.add('text-secondary');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-secondary');
|
||||
btn.classList.add('bg-primary/10', 'active-filter', 'border-primary', 'text-primary');
|
||||
|
||||
const filter = btn.getAttribute('data-filter');
|
||||
|
||||
// Filter items
|
||||
galleryItems.forEach(item => {
|
||||
if (filter === 'all' || item.getAttribute('data-category') === filter) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'translateY(0)';
|
||||
}, 50);
|
||||
} else {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
item.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize with all items visible
|
||||
galleryItems.forEach(item => {
|
||||
item.style.transition = 'all 0.4s ease-out';
|
||||
});
|
||||
|
||||
// Simple scroll reveal for navbar
|
||||
let lastScroll = 0;
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
const nav = document.querySelector('nav');
|
||||
|
||||
if (currentScroll <= 0) {
|
||||
nav.classList.remove('shadow-lg');
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentScroll > lastScroll) {
|
||||
nav.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
nav.style.transform = 'translateY(0)';
|
||||
nav.classList.add('shadow-lg');
|
||||
}
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="scroll-smooth" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Location & Contact | Sitar Apart & Otel Akyaka</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-container": "#fffbff",
|
||||
"on-secondary-fixed": "#28180d",
|
||||
"on-secondary-fixed-variant": "#574335",
|
||||
"on-primary-fixed": "#001f25",
|
||||
"surface-dim": "#d7dbdc",
|
||||
"secondary-container": "#f8dac8",
|
||||
"on-tertiary-fixed": "#301400",
|
||||
"tertiary-container": "#a7642e",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-fixed": "#a3eeff",
|
||||
"inverse-on-surface": "#eef1f2",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#dfe3e4",
|
||||
"surface-bright": "#f6fafb",
|
||||
"surface": "#f6fafb",
|
||||
"on-primary-container": "#f8fdff",
|
||||
"on-secondary-container": "#755e50",
|
||||
"surface-container": "#ebeef0",
|
||||
"on-surface-variant": "#3e494b",
|
||||
"primary-fixed-dim": "#78d4e7",
|
||||
"secondary-fixed": "#fbddca",
|
||||
"outline": "#6e797c",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#dec1af",
|
||||
"outline-variant": "#bdc8cb",
|
||||
"surface-container-highest": "#dfe3e4",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f1f4f5",
|
||||
"on-surface": "#181c1d",
|
||||
"tertiary-fixed-dim": "#ffb782",
|
||||
"primary": "#006574",
|
||||
"inverse-surface": "#2d3132",
|
||||
"tertiary-fixed": "#ffdcc5",
|
||||
"on-primary-fixed-variant": "#004e5a",
|
||||
"background": "#f6fafb",
|
||||
"on-error": "#ffffff",
|
||||
"on-background": "#181c1d",
|
||||
"surface-tint": "#006877",
|
||||
"on-tertiary-fixed-variant": "#703802",
|
||||
"inverse-primary": "#78d4e7",
|
||||
"surface-container-high": "#e5e9ea",
|
||||
"secondary": "#705a4c",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary": "#8a4c17",
|
||||
"primary-container": "#088092"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"container-max": "1200px",
|
||||
"margin-mobile": "20px",
|
||||
"section-gap": "80px",
|
||||
"unit": "8px",
|
||||
"gutter": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Literata"],
|
||||
"label-lg": ["Nunito Sans"],
|
||||
"headline-xl": ["Literata"],
|
||||
"headline-md": ["Literata"],
|
||||
"body-lg": ["Nunito Sans"],
|
||||
"body-md": ["Nunito Sans"],
|
||||
"headline-lg-mobile": ["Literata"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-nav {
|
||||
background-color: rgba(246, 250, 251, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.motif-branch {
|
||||
transform: rotate(-5deg);
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ambient-shadow {
|
||||
box-shadow: 0 32px 64px -12px rgba(112, 90, 76, 0.08);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md selection:bg-secondary-container">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-surface/85 backdrop-blur-xl border-b border-outline-variant/20 shadow-sm transition-all duration-300 ease-in-out">
|
||||
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||
<a class="font-headline-md text-headline-md text-secondary italic" href="#">Sitar Apart & Otel</a>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Apartments</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Gallery</a>
|
||||
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-[#D46A8C] text-surface-container-lowest px-6 py-2.5 rounded-full font-label-lg hover:opacity-80 transition-opacity">
|
||||
Book Now
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-24">
|
||||
<!-- Hero Section -->
|
||||
<section class="px-margin-mobile md:px-gutter max-w-container-max mx-auto pt-12 pb-section-gap">
|
||||
<div class="relative inline-block mb-4">
|
||||
<span class="absolute -top-6 -left-4 motif-branch text-tertiary-container/30">
|
||||
<span class="material-symbols-outlined text-4xl">eco</span>
|
||||
</span>
|
||||
<h1 class="font-headline-xl text-headline-xl text-on-surface">Find Us in Akyaka</h1>
|
||||
</div>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
||||
Nestled in the heart of Akyaka's slow-living paradise, Sitar offers the perfect balance between serene seclusion and coastal proximity.
|
||||
</p>
|
||||
</section>
|
||||
<!-- Location Grid -->
|
||||
<section class="bg-surface-container-low py-section-gap">
|
||||
<div class="px-margin-mobile md:px-gutter max-w-container-max mx-auto grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
|
||||
<!-- Map Container -->
|
||||
<div class="lg:col-span-8 rounded-[24px] overflow-hidden aspect-video ambient-shadow border border-outline-variant/30 relative">
|
||||
<div class="absolute inset-0 z-0 bg-surface-variant/50" data-location="Akyaka, Mugla, Turkey" style="">
|
||||
<div class="w-full h-full flex items-center justify-center bg-surface-container-high">
|
||||
<span class="material-symbols-outlined text-secondary-container text-6xl">map</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mock Map Interaction Layer -->
|
||||
<div class="absolute bottom-6 left-6 bg-surface/90 backdrop-blur-md p-4 rounded-xl shadow-lg border border-outline-variant/20 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary">
|
||||
<span class="material-symbols-outlined">location_on</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface text-xs uppercase tracking-wider">Our Address</p>
|
||||
<p class="font-body-md text-secondary">Karanfil Sokak No: 12, Akyaka</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Highlights List -->
|
||||
<div class="lg:col-span-4 space-y-8">
|
||||
<div class="relative">
|
||||
<h2 class="font-headline-md text-headline-md text-secondary">Walking Distance</h2>
|
||||
<div class="h-1 w-12 bg-tertiary-container mt-2 rounded-full"></div>
|
||||
</div>
|
||||
<ul class="space-y-6">
|
||||
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||
<span class="material-symbols-outlined text-primary mt-1">waves</span>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface">Akyaka Blue Flag Beach</p>
|
||||
<p class="font-body-md text-outline">10 minute gentle stroll through pine trees.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||
<span class="material-symbols-outlined text-primary mt-1">shopping_basket</span>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface">Local Organic Market</p>
|
||||
<p class="font-body-md text-outline">5 minutes to fresh citrus and village honey.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||
<span class="material-symbols-outlined text-primary mt-1">coffee</span>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface">Azmak Riverside Cafes</p>
|
||||
<p class="font-body-md text-outline">8 minutes to the iconic crystal-clear springs.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||
<span class="material-symbols-outlined text-primary mt-1">directions_run</span>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface">Forest Hiking Trails</p>
|
||||
<p class="font-body-md text-outline">Trailhead begins just 200m behind the otel.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Contact Section -->
|
||||
<section class="py-section-gap">
|
||||
<div class="px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<!-- Contact Form Card -->
|
||||
<div class="bg-surface p-8 md:p-12 rounded-[32px] ambient-shadow border border-outline-variant/20">
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-8">Send us a message</h3>
|
||||
<form class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Full Name</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="John Doe" type="text"/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Email Address</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="john@example.com" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Subject</label>
|
||||
<input class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="Booking Inquiry" type="text"/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Message</label>
|
||||
<textarea class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="Tell us how we can help..." rows="4"></textarea>
|
||||
</div>
|
||||
<button class="w-full bg-[#D46A8C] text-on-tertiary py-4 rounded-full font-label-lg hover:opacity-90 transition-all transform hover:-translate-y-1 shadow-md" type="submit">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Contact Details & Visual -->
|
||||
<div class="space-y-12">
|
||||
<div class="space-y-6">
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface">Let's Connect</h3>
|
||||
<p class="font-body-lg text-on-surface-variant">
|
||||
Whether you're planning your first visit to Akyaka or returning for another slow-living escape, our team is here to assist with every detail.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-secondary-container/30 flex items-center justify-center text-secondary">
|
||||
<span class="material-symbols-outlined">call</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface text-xs uppercase">Call Us</p>
|
||||
<p class="font-headline-md text-[18px] text-secondary">+90 252 243 00 00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-secondary-container/30 flex items-center justify-center text-secondary">
|
||||
<span class="material-symbols-outlined">mail</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-lg text-on-surface text-xs uppercase">Email</p>
|
||||
<p class="font-headline-md text-[18px] text-secondary">hello@sitarakyaka.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6">
|
||||
<a class="inline-flex items-center gap-4 bg-primary text-on-primary px-8 py-4 rounded-full font-label-lg hover:opacity-90 transition-all shadow-lg group" href="#">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
Chat on WhatsApp
|
||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Atmospheric Image -->
|
||||
<div class="rounded-[24px] overflow-hidden aspect-[16/9] mt-8 grayscale hover:grayscale-0 transition-all duration-700">
|
||||
<img class="w-full h-full object-cover" data-alt="A tranquil, sun-drenched close-up of a boutique Mediterranean hotel entrance in Akyaka. The scene features warm, textured stone walls adorned with vibrant pink bougainvillea branches casting soft shadows in the afternoon light. In the foreground, a rustic wooden table holds a single glass of refreshing mint tea. The aesthetic is warm, authentic, and evocative of slow living, using a palette of soft creams, secondary browns, and pops of floral pink." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7ipAnrNarVoDiN6J62EFCdU_fZklSZx84GYzhIohBwBbNZIs8gKz_xCraS8tcBwqqOusUeWcsOXWpdvsPlAHEWXQS-JkCo-Gjsd5slkk9oJel7mK2-tYpmnPzRG62X_9-7_777J2snWuEERsPmRWfyTPtagKFokEZZ4uySdjBmnJmPUHaSAe_6X3BwNLsUIODoeRRdyl2_k343_9XdH7Q1EICnmJIvP8DRTku0le9IU4LsjlAlCMTvzZutf5PKkZi8tesAyp18bQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-inverse-surface dark:bg-on-surface w-full py-section-gap mt-section-gap">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||
<div class="space-y-6">
|
||||
<h2 class="font-headline-md text-headline-md text-surface-container-lowest">Sitar Apart & Otel</h2>
|
||||
<p class="font-body-md text-body-md text-surface-container-low/80 max-w-xs">
|
||||
Experience the rhythm of Akyaka. Boutique apartments designed for comfort, slow living, and Aegean soul.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="space-y-4">
|
||||
<p class="font-label-lg text-surface-container-lowest/50 uppercase tracking-widest text-[10px]">Explore</p>
|
||||
<ul class="space-y-2">
|
||||
<li><a class="font-body-md text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all" href="#">Apartments</a></li>
|
||||
<li><a class="font-body-md text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all" href="#">Location</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="font-label-lg text-surface-container-lowest/50 uppercase tracking-widest text-[10px]">Support</p>
|
||||
<ul class="space-y-2">
|
||||
<li><a class="font-body-md text-surface-container-lowest font-bold hover:underline transition-all" href="#">Contact Us</a></li>
|
||||
<li><a class="font-body-md text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all" href="#">WhatsApp Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6 flex flex-col items-start md:items-end">
|
||||
<div class="flex gap-4">
|
||||
<a class="w-10 h-10 rounded-full border border-surface-container-low/20 flex items-center justify-center text-surface-container-low hover:bg-surface-container-lowest hover:text-inverse-surface transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">public</span>
|
||||
</a>
|
||||
<a class="w-10 h-10 rounded-full border border-surface-container-low/20 flex items-center justify-center text-surface-container-low hover:bg-surface-container-lowest hover:text-inverse-surface transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">camera</span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-surface-container-low/80 text-left md:text-right">
|
||||
© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Subtle scroll animation for navbar
|
||||
window.onscroll = function() {
|
||||
const nav = document.querySelector('nav');
|
||||
if (window.pageYOffset > 50) {
|
||||
nav.classList.add('py-2', 'shadow-md');
|
||||
nav.classList.remove('py-4', 'shadow-sm');
|
||||
} else {
|
||||
nav.classList.add('py-4', 'shadow-sm');
|
||||
nav.classList.remove('py-2', 'shadow-md');
|
||||
}
|
||||
};
|
||||
|
||||
// Micro-interaction for form focus
|
||||
const inputs = document.querySelectorAll('input, textarea');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('focus', () => {
|
||||
input.parentElement.querySelector('label').classList.add('text-primary');
|
||||
});
|
||||
input.addEventListener('blur', () => {
|
||||
input.parentElement.querySelector('label').classList.remove('text-primary');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="scroll-smooth" lang="tr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Sitar Apart & Otel | Akyaka'nın Huzuru Sizinle</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-container": "#fffbff",
|
||||
"on-secondary-fixed": "#28180d",
|
||||
"on-secondary-fixed-variant": "#574335",
|
||||
"on-primary-fixed": "#001f25",
|
||||
"surface-dim": "#d7dbdc",
|
||||
"secondary-container": "#f8dac8",
|
||||
"on-tertiary-fixed": "#301400",
|
||||
"tertiary-container": "#a7642e",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-fixed": "#a3eeff",
|
||||
"inverse-on-surface": "#eef1f2",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#dfe3e4",
|
||||
"surface-bright": "#f6fafb",
|
||||
"surface": "#f6fafb",
|
||||
"on-primary-container": "#f8fdff",
|
||||
"on-secondary-container": "#755e50",
|
||||
"surface-container": "#ebeef0",
|
||||
"on-surface-variant": "#3e494b",
|
||||
"primary-fixed-dim": "#78d4e7",
|
||||
"secondary-fixed": "#fbddca",
|
||||
"outline": "#6e797c",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#dec1af",
|
||||
"outline-variant": "#bdc8cb",
|
||||
"surface-container-highest": "#dfe3e4",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f1f4f5",
|
||||
"on-surface": "#181c1d",
|
||||
"tertiary-fixed-dim": "#ffb782",
|
||||
"primary": "#006574",
|
||||
"inverse-surface": "#2d3132",
|
||||
"tertiary-fixed": "#ffdcc5",
|
||||
"on-primary-fixed-variant": "#004e5a",
|
||||
"background": "#f6fafb",
|
||||
"on-error": "#ffffff",
|
||||
"on-background": "#181c1d",
|
||||
"surface-tint": "#006877",
|
||||
"on-tertiary-fixed-variant": "#703802",
|
||||
"inverse-primary": "#78d4e7",
|
||||
"surface-container-high": "#e5e9ea",
|
||||
"secondary": "#705a4c",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary": "#8a4c17",
|
||||
"primary-container": "#088092",
|
||||
"accent-pink": "#D46A8C"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"container-max": "1200px",
|
||||
"margin-mobile": "20px",
|
||||
"section-gap": "80px",
|
||||
"unit": "8px",
|
||||
"gutter": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Literata"],
|
||||
"label-lg": ["Nunito Sans"],
|
||||
"headline-xl": ["Literata"],
|
||||
"headline-md": ["Literata"],
|
||||
"body-lg": ["Nunito Sans"],
|
||||
"body-md": ["Nunito Sans"],
|
||||
"headline-lg-mobile": ["Literata"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.bougainvillea-motif {
|
||||
transform: rotate(-5deg);
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
.glass-nav {
|
||||
background-color: rgba(247, 244, 239, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to bottom, rgba(61, 43, 31, 0.4) 0%, rgba(61, 43, 31, 0.2) 50%, rgba(61, 43, 31, 0.6) 100%);
|
||||
}
|
||||
.ambient-shadow {
|
||||
box-shadow: 0 32px 64px -12px rgba(112, 90, 76, 0.04);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F7F4EF] text-on-surface font-body-md selection:bg-accent-pink selection:text-white">
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 glass-nav border-b border-outline-variant/20 shadow-sm transition-all duration-300">
|
||||
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||
<div class="font-headline-md text-headline-md text-secondary italic">Sitar Apart & Otel</div>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Apartments</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary hover:text-tertiary transition-colors" href="#">Gallery</a>
|
||||
<a class="font-label-lg text-label-lg text-secondary hover:text-tertiary transition-colors" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-accent-pink text-on-tertiary px-6 py-3 rounded-full font-label-lg text-label-lg hover:opacity-80 transition-opacity">Book Now</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Hero Section -->
|
||||
<header class="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 w-full h-full bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLuIVRCovTeLHlXlZb7jkKPLtpwyf8OfI_UDAMbeTkPjKt7Npz-5l-5UD_cA3TPQqKW4hf4049NNiHwv7V2lhY3_5PaB_wcUD1lrooFf3JNM3cZASakeM7HHlOK5bC2Akmw77vNn3s81CpzlNYHyKQ1agxdXJQby1_8JGUX3c_dIBhgoP8sTljwWIQlaznOHSuyf5V-Rk_IiTHpe6wTWKdxDc9qfahLkbnbF4-bcBddyzXHGhhAIMdijgw')"></div>
|
||||
<div class="absolute inset-0 hero-gradient"></div>
|
||||
<div class="relative z-10 text-center px-margin-mobile max-w-3xl">
|
||||
<h1 class="font-headline-xl text-headline-xl md:text-6xl text-white mb-6 drop-shadow-lg">
|
||||
Akyaka'nın Huzuru Sizinle
|
||||
</h1>
|
||||
<p class="font-body-lg text-body-lg text-white/90 mb-10 max-w-xl mx-auto leading-relaxed">
|
||||
Experience authentic slow living in the heart of Akyaka. Nestled between the mountains and the turquoise Aegean, discover the art of unhurried travel.
|
||||
</p>
|
||||
<a class="inline-block bg-accent-pink text-white px-10 py-5 rounded-full font-label-lg text-lg hover:scale-105 transition-transform shadow-xl" href="#booking">
|
||||
Book Your Stay
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white">
|
||||
<span class="material-symbols-outlined text-4xl">keyboard_double_arrow_down</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Amenities Strip -->
|
||||
<section class="bg-surface-container-lowest py-12 relative z-20 -mt-10 mx-margin-mobile md:mx-auto max-w-container-max rounded-xl ambient-shadow border border-outline-variant/20">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 px-gutter">
|
||||
<div class="flex flex-col items-center text-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">pool</span>
|
||||
</div>
|
||||
<span class="font-label-lg text-secondary">Outdoor Pool</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">wifi</span>
|
||||
</div>
|
||||
<span class="font-label-lg text-secondary">Free WiFi</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">flatware</span>
|
||||
</div>
|
||||
<span class="font-label-lg text-secondary">Private Kitchen</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">balcony</span>
|
||||
</div>
|
||||
<span class="font-label-lg text-secondary">Private Balcony</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Apartments Section -->
|
||||
<section class="py-section-gap px-margin-mobile max-w-container-max mx-auto overflow-visible">
|
||||
<div class="relative mb-16 text-center">
|
||||
<!-- Bougainvillea Motif Placeholder -->
|
||||
<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 bougainvillea-motif flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-6xl text-accent-pink">spa</span>
|
||||
</div>
|
||||
<h2 class="font-headline-lg text-headline-lg md:text-4xl text-secondary mb-4 relative z-10">Konaklama Seçeneklerimiz</h2>
|
||||
<p class="text-on-surface-variant max-w-xl mx-auto">Modern konforun geleneksel dokunuşlarla buluştuğu, her ihtiyaca uygun geniş apart dairelerimiz.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
<!-- Card 1 -->
|
||||
<div class="group bg-surface-container-lowest rounded-[24px] overflow-hidden ambient-shadow border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2">
|
||||
<div class="aspect-[3/2] overflow-hidden">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="A beautiful boutique hotel room in Akyaka with white linens, wooden furniture, and sun-drenched stone walls. The room is decorated in a warm coastal aesthetic with soft teal accents and views of green mountains through the window. The atmosphere is peaceful, light-filled, and evokes slow living." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBR9KtvxpmOEpuRqQ0aC9jvZTrWyuKa4ZbIRltl51unfeywjPhq3FDQNyJSSv8ubfP2qr5l5rGFFT78FUfegN4RGbwlCLqdMax-sFAZkQqHC9M5GvCPdyJnnt7EHqUemPjtXw_U_yujTRVttdo9Jv0yPe_6cm_RdvQfKHicMRgShdXwDNbPAWgZ8XxZg17Vv7hTpsY-EHFgNNNfzlO6-t6xWCKftj0tSSPkyGYUd1xwZIdDf8rPNA0RC88IzDRbmhFajRQ546-ZasY"/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="font-headline-md text-headline-md text-secondary">1+0 Studio Apart</h3>
|
||||
<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Popüler</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant mb-6">
|
||||
<span class="material-symbols-outlined text-xl">group</span>
|
||||
<span class="font-label-lg">2 Misafir</span>
|
||||
</div>
|
||||
<a class="inline-block font-headline-md text-primary underline underline-offset-8 decoration-1 hover:text-accent-pink transition-colors" href="#">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="group bg-surface-container-lowest rounded-[24px] overflow-hidden ambient-shadow border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2">
|
||||
<div class="aspect-[3/2] overflow-hidden">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="A spacious 1+1 apartment interior with a separate living area and bedroom. The design features light wood flooring, turquoise textiles, and handmade ceramics on open shelving. Warm Aegean sunlight streams in through floor-to-ceiling windows, highlighting the minimalist and rustic boutique charm of the space." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7lJi5pDELmSz9JddepycZrw7NqUXUnR_rTH-NcGmTShh4j1Lk681qkMN32_GQpr7mK_ZkwQ2ixdViy0T9wSi3AGaU2F5VCWqJUchgyg3n2cH3PI6NrybUDiR7J1gD7JKj1_QmJFa_5FVf46KtuvBzSr6UVsomxpGMagSNuQP-Q_8Dqwci-2o5IdVUYKDxHvBPO4W0cQLxtZK00yusIEYuDMNDTr07SFz6V__DadCilxoHrEz7dMRQTm8VVs3FBXEc29xcgRS2BrU"/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="font-headline-md text-headline-md text-secondary mb-4">1+1 Standart Apart</h3>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant mb-6">
|
||||
<span class="material-symbols-outlined text-xl">group</span>
|
||||
<span class="font-label-lg">3 Misafir</span>
|
||||
</div>
|
||||
<a class="inline-block font-headline-md text-primary underline underline-offset-8 decoration-1 hover:text-accent-pink transition-colors" href="#">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="group bg-surface-container-lowest rounded-[24px] overflow-hidden ambient-shadow border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2">
|
||||
<div class="aspect-[3/2] overflow-hidden">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="A luxury 2-room apartment at a boutique Turkish hotel, featuring a large private balcony with a wooden pergola. The balcony is draped in vibrant pink bougainvillea and overlooks a serene bay and pine-covered hills. The interior visible through the door is airy with cream walls and boutique coastal decor." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9d5Ct1kK_kzDYg-HgxAAVXyMZt3TxkJgWyhSfJ5XFGiZOeLTIlfIGNAbqrpDLPF3gU_F3jTwwYkVrbvpwpZQrjZkkmQj_MwEyhxcEd3yF-u_LsitHwp4gAK4DeWOuZeJ_pbGXlbPEasnzQ9E_jFq5mkf0VZ0uFwA-0yvtMmo-ImFVNkprf_HcdPFwSbwZOgx1NOVK2EIPnjmkjOzpP_rinlwCxVW3CbiNhK03M5QrXya1o1QqLPkFADfwrvjagZa0SOK35pM4-yI"/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="font-headline-md text-headline-md text-secondary mb-4">1+1 Geniş (2 Oda)</h3>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant mb-6">
|
||||
<span class="material-symbols-outlined text-xl">group</span>
|
||||
<span class="font-label-lg">4 Misafir</span>
|
||||
</div>
|
||||
<a class="inline-block font-headline-md text-primary underline underline-offset-8 decoration-1 hover:text-accent-pink transition-colors" href="#">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA / Contact Section -->
|
||||
<section class="py-section-gap bg-primary-container/10">
|
||||
<div class="max-w-container-max mx-auto px-margin-mobile grid grid-cols-1 md:grid-cols-2 gap-gutter items-center">
|
||||
<div class="rounded-[32px] overflow-hidden h-[400px] ambient-shadow">
|
||||
<img class="w-full h-full object-cover" data-alt="A serene landscape of Akyaka, Turkey, showing the Azmak river meeting the sea at sunset. The sky is painted in soft oranges and purples, reflecting in the crystal clear water. High pine mountains surround the bay, and traditional Muğla-style houses with white walls and red-tiled roofs are nestled in the greenery." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfPt1cFJbc0Rk5h1Fekc6yDFsYOhs-ahlFTZYkvWEoOAey4jtuy2DbMoIO8dbJm3sE2MqmIqhuBl4kISADrBR-Jt_5rGfDFzRGKyFryYR-eoTzeneccAGjKYTfaz29ktJQe0zx4sHXUEJDV7afuK1UO1qFeJrOfTsSkkQJVYzCy9nUfXmLPHp-fL9WtSZBuN8ucKFVDkgS1G3zrtJ07XPR20JaOqSaXvm73MLOXakUxuEHApo7lLPK8hYcXACvBjEpY0xFyx83iYM"/>
|
||||
</div>
|
||||
<div class="md:pl-12">
|
||||
<div class="relative inline-block mb-6">
|
||||
<span class="material-symbols-outlined absolute -top-8 -left-8 text-4xl text-accent-pink/30">favorite</span>
|
||||
<h2 class="font-headline-lg text-headline-lg text-secondary">Doğanın Kalbinde Bir Tatil</h2>
|
||||
</div>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 leading-relaxed">
|
||||
Azmak Çayı'nın serinliği, Akyaka'nın eşsiz mimarisi ve Sitar Apart'ın samimi misafirperverliği ile unutulmaz bir tatile davetlisiniz.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button class="bg-primary text-white px-8 py-4 rounded-full font-label-lg text-label-lg hover:bg-primary-container transition-colors shadow-lg">WhatsApp ile Ulaşın</button>
|
||||
<button class="border-2 border-primary text-primary px-8 py-4 rounded-full font-label-lg text-label-lg hover:bg-primary hover:text-white transition-all">Konumu Gör</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#3D2B1F] w-full py-section-gap text-surface-container-lowest">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||
<div>
|
||||
<div class="font-headline-md text-headline-md text-surface-container-lowest mb-6">Sitar Apart & Otel</div>
|
||||
<p class="text-surface-dim/80 font-body-md max-w-xs leading-relaxed">
|
||||
© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest. Experience the authentic spirit of the Aegean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h4 class="font-label-lg text-surface-container-lowest tracking-widest uppercase mb-2">Hızlı Menü</h4>
|
||||
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Apartments</a>
|
||||
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Location</a>
|
||||
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Contact Us</a>
|
||||
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">WhatsApp Support</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h4 class="font-label-lg text-surface-container-lowest tracking-widest uppercase mb-2">Bize Ulaşın</h4>
|
||||
<p class="text-surface-dim/80">Akyaka Mah. Atatürk Cad. No:12 <br/>Ula, Muğla - Türkiye</p>
|
||||
<p class="text-surface-dim/80">+90 252 243 XXXX</p>
|
||||
<div class="flex gap-4 mt-4">
|
||||
<a class="w-10 h-10 rounded-full border border-surface-dim/20 flex items-center justify-center hover:bg-surface-container-lowest hover:text-secondary transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-lg">share</span>
|
||||
</a>
|
||||
<a class="w-10 h-10 rounded-full border border-surface-dim/20 flex items-center justify-center hover:bg-surface-container-lowest hover:text-secondary transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-lg">alternate_email</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Smooth navbar appearance on scroll
|
||||
const nav = document.querySelector('nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('py-2', 'shadow-md');
|
||||
nav.classList.remove('py-4', 'shadow-sm');
|
||||
} else {
|
||||
nav.classList.add('py-4', 'shadow-sm');
|
||||
nav.classList.remove('py-2', 'shadow-md');
|
||||
}
|
||||
});
|
||||
|
||||
// Simple interaction for detail links
|
||||
document.querySelectorAll('a[href="#"]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
console.log('Navigating to apartment details...');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 932 KiB |
Reference in New Issue
Block a user