# Lake Land Immersion CDN-only React luxury resort website for Lake Land Inn in Bishoftu, Ethiopia, with hash routing, glassmorphism, smooth scrolling, motion, and immersive visual gradients. ## Masterplan - Present Lake Land Inn as a premium, minimalist garden-and-lakeside resort in Bishoftu at `QX4C+7F9`. - Serve prospective guests looking for rooms, dining, cafe/bar experiences, events, and reservation contact details. - Create a luxury hospitality feel without real image assets by using 3D-inspired gradient visual cards, masonry tiles, glass overlays, and motion. - Keep deployment simple: static HTML/CSS/JS with all React dependencies loaded from CDNs. - Prioritize exploration paths: Home → Rooms/Gallery, Restaurant & Bar → Contact, About → Contact. ## Tech Stack & Architecture - **Runtime:** Static CDN app served from `index.html`; no build step currently required. - **UI:** React `19.2.0` via `esm.sh`, `htm` template literals through `src/jsx.js`. - **Routing:** `HashRouter` from `react-router-dom@7.13.0`; all routes are client-side hash routes. - **Styling:** Tailwind CDN configured in `index.html` plus custom CSS in `styles/main.css`. - **Animation:** Framer Motion via `esm.sh` for page/section/carousel transitions. - **Smooth scroll:** Lenis via `@studio-freight/lenis`, initialized once in `src/components/Layout.js`. - **Icons:** `lucide-react` via `esm.sh`. - **Assets:** No image files. The app uses CSS gradients and generated visual surfaces through `VisualArt`, `gallery` data tones, and `map-grid`. ### How files connect - `index.html` loads Tailwind CDN, applies Tailwind font config, loads `styles/main.css`, and mounts `src/main.js`. - `src/main.js` renders `` into `#root`. - `src/App.js` defines route hierarchy under `Layout`. - `src/components/Layout.js` wraps every routed page with `CustomCursor`, `Navbar`, ``, and `Footer`. - Shared content lives in `src/data/siteData.js` and is consumed by `Navbar`, `About`, `Rooms`, and `Gallery`. - Shared presentation components: - `Logo.js`: brand mark and wordmark. - `SectionTitle.js`: consistent section headings. - `VisualArt.js`: reusable 3D-inspired gradient image substitute. ### State management - No global state. - Local UI state only: - `Navbar.js`: mobile menu open/closed and scroll opacity/shrink state. - `Rooms.js`: current carousel index. - `Contact.js`: form submission confirmation message. - Route changes are tracked via `useLocation()` in `Layout` and `Navbar`. ### Key patterns and gotchas - JSX is not compiled. Components must use `html` from `src/jsx.js` with HTM syntax. - Use CDN imports directly, e.g. `https://esm.sh/react@19.2.0`. - Routing paths must be hash-compatible and added to both `src/App.js` and `src/data/siteData.js` if they should appear in navigation. - `Layout.js` calls `window.scrollTo({ top: 0, behavior: 'instant' })` on route changes. If browser support is a concern, replace `'instant'` with `'auto'`. - Custom cursor hides native cursor on desktop for `button, a, input, textarea, select`; ensure new interactive controls are included in `CustomCursor.js` hover detection if using custom roles. - Despite the original prompt mentioning Next.js and `next/image`, the generated app is **not** Next.js and does **not** use real optimized images. ## File Structure ```text index.html # Static shell; Tailwind CDN config, SEO meta, root mount, main module load. styles/main.css # Brand tokens, glassmorphism, cursor, visual cards, masonry, map grid, motion reduction. src/main.js # ReactDOM entry; renders Providers and App. src/mainProviders.js # Placeholder provider wrapper; currently no context/providers. src/jsx.js # Binds htm to React.createElement for no-build JSX-like templates. src/App.js # HashRouter route table for six pages plus NotFound under Layout. src/data/siteData.js # navItems, rooms carousel data, gallery tiles, amenities. src/components/Layout.js # Global shell; Lenis init/destroy, route scroll reset, navbar/footer/cursor. src/components/Navbar.js # Floating glass nav; scroll shrink/opacity; responsive mobile menu. src/components/Footer.js # Resort summary, address, phone, reservation links. src/components/CustomCursor.js # Desktop-only gold ring cursor with interactive hover expansion. src/components/Logo.js # SVG house-over-waves logo and Lake Land Inn wordmark. src/components/SectionTitle.js # Reusable centered eyebrow/title/body component. src/components/VisualArt.js # Gradient-based immersive visual card using --art-gradient. src/pages/Home.js # Hero, CTA links, depth cards, signature mood feature cards. src/pages/About.js # Garden/lakeside narrative and amenities grid. src/pages/RestaurantBar.js # Split cafe vs dark bar/restaurant experience. src/pages/Rooms.js # Animated room carousel with details and navigation buttons. src/pages/Gallery.js # CSS masonry 3D-hover gallery using gradient tiles. src/pages/Contact.js # Map-style section, reservation form, contact info. src/pages/NotFound.js # Branded 404 page. ``` ## Key Features ### Six routed pages Routes are defined in `src/App.js`: - `/` → `Home` - `/about` → `About` - `/restaurant-bar` → `RestaurantBar` - `/rooms` → `Rooms` - `/gallery` → `Gallery` - `/contact` → `Contact` - `*` → `NotFound` Because the app uses `HashRouter`, deployed URLs look like `/#/rooms`. ### Global layout `Layout.js` provides: - Persistent floating navbar. - Persistent footer. - Desktop custom cursor. - Lenis smooth scrolling. - Scroll-to-top behavior on route change. ### Navigation `Navbar.js`: - Uses `navItems` from `src/data/siteData.js`. - Becomes smaller and more opaque after `window.scrollY > 40`. - Desktop: inline links plus “Book a Stay”. - Mobile/tablet: menu button opens a `glass-dark` dropdown. - Closes the mobile menu whenever `location.pathname` changes. ### Brand logo `Logo.js` implements the required Lake Land Inn mark: - Minimal white SVG. - Two-story house outline. - Water waves underneath. - Floating animation via `.logo-float` in `styles/main.css`. ### Home `Home.js`: - Full-screen luxury gradient hero. - Bishoftu location eyebrow. - Primary CTA to `/rooms`. - Secondary CTA to `/gallery`. - Two depth-layer `VisualArt` cards. - Three signature feature cards: Garden scale, Cafe culture, Restful rooms. ### About `About.js`: - Narrative positioning around massive green gardens and Bishoftu lake proximity. - Framer Motion reveal on the main garden visual. - Amenity chips from `amenities` in `siteData.js`. ### Restaurant & Bar `RestaurantBar.js`: - Split-screen layout: - Left: bright cafe aesthetic, cream background. - Right: dark green/gold bar aesthetic using `.glass-dark`. - Local arrays define featured cafe and bar/menu items. - Uses `Coffee`, `Martini`, and `Utensils` Lucide icons. ### Rooms `Rooms.js`: - Carousel data from `rooms` in `src/data/siteData.js`. - Current room tracked by local `index`. - `next` and `prev` wrap around using modulo. - `AnimatePresence` and `motion.div` animate room visual changes. - Displays room price, size, sleeps count, and details. Room model: ```js { id: string, name: string, price: string, size: string, sleeps: string, tone: string, // CSS gradient used by VisualArt details: string[] } ``` ### Gallery `Gallery.js`: - Uses `gallery` data from `src/data/siteData.js`. - CSS columns create masonry behavior. - Each tile has variable height and gradient tone. - `.masonry-item:hover` adds translate/rotate/scale/brightness for 3D depth. Gallery model: ```js { id: string, title: string, height: string, // Tailwind height class, e.g. h-96 tone: string // CSS background gradient } ``` ### Contact `Contact.js`: - Uses CSS-generated `map-grid` as an interactive-style map substitute, not a real map API. - Shows a fixed “Lake Land Inn” map pin. - Reservation form is local-only: - Prevents default submit. - Shows confirmation text. - Resets fields. - No backend, email delivery, or persistence currently exists. Contact information currently displayed: - Address/code: `QX4C+7F9`, Bishoftu, Oromia, Ethiopia. - Phone: `+251 91 184 2024`. - Email: `reservations@lakelandinn.et`. ## Design Guidelines ### Visual style - Luxury minimalist hospitality. - Heavy use of glassmorphism overlays: - `.glass` for light transparent cards. - `.glass-dark` for dark forest-green/gold panels. - No photographic assets; use gradients as abstract resort imagery. - Surfaces should feel dimensional through blur, radial highlights, noise texture, hover scaling, and perspective. ### Colors Defined as HSL CSS variables in `styles/main.css`: - Primary deep forest green: `--primary: 146 30% 15%` approximates `#1A3021`. - Champagne gold: `--secondary: 40 48% 56%` approximates `#C5A059`. - Background: warm off-white `--background: 42 30% 94%`. - Foreground: dark green/charcoal `--foreground: 146 30% 10%`. Use Tailwind arbitrary HSL values already established: ```html text-[hsl(var(--secondary))] bg-[hsl(var(--primary))] text-[hsl(var(--muted-foreground))] ``` ### Typography - Body: `Inter` via Tailwind config fallback stack. - Display headings: `Playfair Display` configured as `font-display`. - Note: `index.html` config references Playfair Display, but no external Google Fonts link is currently included; browsers will fall back to Georgia/serif unless the font is added. ### Layout and responsiveness - Page top padding is usually `pt-36` to clear fixed navbar. - Main content width generally uses `max-w-6xl`. - Horizontal page padding uses `px-6`. - Desktop grids switch at `lg`. - Mobile navigation is active below `lg`. - Custom cursor is disabled at `max-width: 768px`. ### Motion - Framer Motion is used selectively; CSS hover/micro-interactions do most of the visual work. - `prefers-reduced-motion: reduce` in `styles/main.css` effectively disables animations/transitions and hides the cursor ring. - Lenis smooth scrolling is global; avoid adding conflicting smooth-scroll libraries. ## App Flow ### Primary journeys 1. **Explore resort** - User lands on `/`. - Reads hero positioning. - Opens `/gallery` via CTA or navbar. - Explores visual masonry tiles. - Goes to `/contact`. 2. **Book a room** - User lands on `/` or navigates to `/rooms`. - Cycles through room carousel using arrow buttons. - Reviews price, size, occupancy, and details. - Clicks navbar “Book a Stay” or navigates to `/contact`. - Submits reservation request form. - Receives local confirmation message. 3. **Dining discovery** - User opens `/restaurant-bar`. - Compares cafe morning side and bar evening side. - Proceeds to `/contact` for restaurant booking. 4. **Brand/location validation** - User opens `/about`. - Reads garden-first narrative and amenities. - Footer or navbar leads to `/contact`. ### Navigation - All main navigation items come from `navItems`. - Active nav state compares `location.pathname === item.to`. - Footer links point to Rooms, Restaurant & Bar, and Contact. - Unknown hash routes render `NotFound`. ### Edge cases - Room carousel safely falls back to `rooms[0]` if `rooms[index]` is missing. - Mobile menu closes on route changes but not on outside click. - Contact form does not validate dates, phone numbers, or booking availability. - Contact `select` text may inherit white styling; browser option dropdown rendering can vary. - There is no real map; the map is a branded CSS visual. - There are no real images, so “lazy loading” and image optimization requirements from the original prompt do not apply in current state. ## Conventions ### Component conventions - Use named exports for components: ```js export function NewComponent() { ... } ``` - Import HTM helper in every component that returns UI: ```js import { html } from '../jsx.js'; ``` - For Framer Motion components, assign aliases before returning templates: ```js const MotionDiv = motion.div; ``` Then use: ```js <${MotionDiv} initial=${...}>... ``` ### Styling conventions - Prefer Tailwind utility classes for layout, spacing, and typography. - Put reusable visual effects and brand primitives in `styles/main.css`. - Use existing CSS variables instead of hard-coded brand colors where possible. - For custom gradient visuals, pass CSS gradient strings through `tone` to `VisualArt`. - Preserve `rounded-[var(--radius-md)]` and `rounded-[var(--radius-lg)]` for premium card consistency. - Add `focus-ring` to interactive elements that need keyboard accessibility. ### Data conventions - Shared navigation/content data belongs in `src/data/siteData.js`. - Keep room and gallery IDs stable; they are used as React keys and animation keys. - Gallery tile heights should be Tailwind classes already available through CDN, e.g. `h-64`, `h-72`, `h-80`, `h-96`. ### Adding a new page 1. Create `src/pages/NewPage.js`. 2. Export a named component: ```js import { html } from '../jsx.js'; import { SectionTitle } from '../components/SectionTitle.js'; export function NewPage() { return html`

<${SectionTitle} eyebrow="..." title="..." body="..." />

`; } ``` 3. Import it in `src/App.js`. 4. Add a ``} />`. 5. If it belongs in global nav, add `{ label: 'New Page', to: '/new-page' }` to `navItems` in `src/data/siteData.js`. 6. Verify mobile menu, footer links if needed, and active nav state. ### Adding a new room Edit `rooms` in `src/data/siteData.js`: - Add a unique `id`. - Provide `name`, `price`, `size`, `sleeps`. - Provide a `tone` gradient; this is the “image.” - Add 2–4 concise `details`. No changes to `Rooms.js` are needed. ### Adding gallery content Edit `gallery` in `src/data/siteData.js`: - Add unique `id`. - Add display `title`. - Set `height` to a Tailwind height class. - Set `tone` to a CSS gradient. No changes to `Gallery.js` are needed. ### Backend/API surface There is currently **no backend and no API**. - Contact form is client-only. - Reservations are not stored or emailed. - Map is not integrated with Google Maps, Mapbox, or OpenStreetMap. - All app content is static JavaScript data. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.