Arlleane Sidney's Relaxation Home — Website

A modern, elegant, and fully responsive transient rental website for Arlleane Sidney's Poblacion Manaoag Transient.

---

Tech Stack

• React 18 + Vite 5
• Tailwind CSS 3
• Framer Motion 11 — page & scroll animations
• React Router v6 — multi-page routing
• Swiper.js 11 — room cards & testimonial carousels
• Lucide React — clean professional icons

---

Pages

Route	Page
/	Home (all sections)
/rooms	Rooms & Rates
/gallery	Photo Gallery
/about	About Us
/contact	Contact & Booking

---

Getting Started

1. Install dependencies

npm install

2. Run development server

npm run dev

Open http://localhost:5173

3. Build for production

npm run build

4. Preview production build

npm run preview

---

Project Structure

src/
├── components/
│   ├── layout/
│   │   ├── Navbar.jsx          # Sticky transparent → solid navbar
│   │   └── Footer.jsx          # Full footer with links & back-to-top
│   └── ui/
│       ├── LoadingScreen.jsx   # Elegant animated loading screen
│       ├── MessengerFloat.jsx  # Floating Messenger CTA button
│       ├── PageWrapper.jsx     # Framer Motion page transitions
│       ├── ScrollProgress.jsx  # Gold scroll progress bar
│       └── StarRating.jsx      # Star rating component
├── sections/
│   ├── HeroSection.jsx         # Fullscreen hero with animations
│   ├── StatsBar.jsx            # Animated counters bar
│   ├── AboutSection.jsx        # Split layout about + feature cards
│   ├── RoomsSection.jsx        # Room cards with Swiper on mobile
│   ├── AmenitiesSection.jsx    # Dark grid with Lucide icons
│   ├── GallerySection.jsx      # Masonry gallery + lightbox modal
│   ├── TestimonialsSection.jsx # Autoplay Swiper testimonials
│   ├── LocationSection.jsx     # Map + contact info
│   ├── FAQSection.jsx          # Animated accordion
│   └── CTASection.jsx          # Booking call-to-action
├── pages/
│   ├── Home.jsx
│   ├── Rooms.jsx
│   ├── Gallery.jsx
│   ├── About.jsx
│   └── Contact.jsx
├── data/
│   └── siteData.js             # All site content (rooms, gallery, etc.)
├── hooks/
│   ├── useScrollY.js           # Scroll position hook
│   └── useInView.js            # Intersection observer hook
├── App.jsx
├── main.jsx
└── index.css

---

Customization

Update Contact Info

Edit src/data/siteData.js → CONTACT object:

export const CONTACT = {
  phone:     '0970 723 0063',
  tel:       'tel:09707230063',
  email:     'arlenecatada36@gmail.com',
  messenger: 'https://m.me/YOUR_PAGE_NAME',  // ← update this
  address:   '181 Soriano St., Manaoag, Pangasinan, Philippines 2430',
  mapEmbed:  '...',  // ← paste your Google Maps embed URL
}

Update Rooms / Prices

Edit the ROOMS array in src/data/siteData.js.

Update Gallery Images

Edit the GALLERY array in src/data/siteData.js.
To use real photos, place them in public/images/ and reference as /images/photo.jpg.

Update Google Maps Embed

1. Go to Google Maps
2. Search for your address
3. Click Share → Embed a map → Copy the src URL
4. Paste it into CONTACT.mapEmbed in siteData.js

Update Messenger Link

Replace https://m.me/ with your Facebook Page's Messenger URL, e.g. https://m.me/YourPageName.

---

Deployment

The built output is in dist/. Deploy to:

• Vercel: vercel --prod or connect your GitHub repo
• Netlify: drag & drop the dist/ folder
• cPanel/hosting: upload contents of dist/ to public_html/

---

License

All rights reserved — Arlleane Sidney's Relaxation Home © 2025