Kochi Premium Real Estate

{ "name": "kochi-real-estate-premium", "version": "1.0.0", "description": "Premium Real Estate Booking Website for Kochi, Kerala", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.3", "zustand": "^4.4.1", "formik": "^2.4.2", "yup": "^1.2.0", "react-icons": "^4.12.0" }, "devDependencies": { "vite": "^5.2.0", "@vitejs/plugin-react": "^4.2.1" } } import react from '@vitejs/plugin-react'; export default { plugins: [react()], server: { port: 5173 } }; Kochi Premium Real Estate

import React from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; createRoot(document.getElementById("root")).render( ); import React from "react"; import { Routes, Route, Navigate } from "react-router-dom"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; import Home from "./pages/Home"; import AllProperties from "./pages/AllProperties"; import PropertyDetails from "./pages/PropertyDetails"; import About from "./pages/About"; import Contact from "./pages/Contact"; import Blog from "./pages/Blog"; import Terms from "./pages/Terms"; import Privacy from "./pages/Privacy"; import UserDashboard from "./pages/UserDashboard"; import AdminLogin from "./pages/admin/AdminLogin"; import AdminDashboard from "./pages/admin/AdminDashboard"; import SearchResults from "./pages/SearchResults"; import { useAuthStore } from "./store/authStore"; function App() { const { isAdmin } = useAuthStore(); return (

} /> } /> } /> } /> } /> } /> } /> } /> } /> } /> : } /> } /> } />

); } export default App; :root { --primary: #0b5d1e; --accent: #f9b233; --bg: #f7f7f7; --text: #222; --header: #fff; --footer: #222; --footer-text: #fff; --border: #e0e0e0; --success: #1bbd36; --danger: #e74c3c; --kochi-green: #1a7f3c; --kochi-blue: #1e90ff; --kochi-gold: #e6b800; } html, body, #root { height: 100%; margin: 0; padding: 0; font-family: 'Segoe UI', 'Roboto', Arial, sans-serif; background: var(--bg); color: var(--text); } .app-container { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; padding-bottom: 2rem; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--accent); } .btn { background: var(--primary); color: #fff; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background 0.2s; } .btn:hover { background: var(--kochi-gold); color: var(--text); } .section { margin: 2rem 0; padding: 2rem 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border); } .input, .select, textarea { width: 100%; padding: 0.7em; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 1rem; font-size: 1rem; background: #fff; } .input:focus, .select:focus, textarea:focus { outline: 2px solid var(--primary); } .error { color: var(--danger); font-size: 0.95em; margin-bottom: 0.5em; } .success { color: var(--success); font-size: 1em; margin-bottom: 0.5em; } .status-available { color: var(--success); font-weight: bold; } .status-occupied { color: var(--danger); font-weight: bold; } @media (max-width: 900px) { .container { max-width: 98vw; padding: 0 0.5rem; } } @media (max-width: 600px) { .section { margin: 1rem 0; padding: 1rem 0; } .card { padding: 1rem; } } import { create } from "zustand"; import { v4 as uuidv4 } from "uuid"; // Sample areas in Kochi for filtering export const KOCHI_AREAS = [ "Marine Drive", "Panampilly Nagar", "Edappally", "Kakkanad", "Fort Kochi", "Vyttila", "Kadavanthra", "Palarivattom", "Aluva", "Thrippunithura" ]; // Sample property types export const PROPERTY_TYPES = [ "Apartment", "Villa", "House", "Commercial", "Land" ]; // Sample furnishing statuses export const FURNISHING_STATUSES = [ "Furnished", "Semi-furnished", "Unfurnished" ]; // Sample availability statuses export const AVAILABILITY_STATUSES = [ "Ready to Move", "Under Construction" ]; // Initial sample properties const initialProperties = [ { id: "1", title: "Luxury Waterfront Apartment", address: { area: "Marine Drive", locality: "Marine Drive, Kochi", city: "Kochi", state: "Kerala", pincode: "682031" }, type: "Apartment", bedrooms: 3, bathrooms: 3, sqft: 2100, price: 18500000, furnishing: "Furnished", availability: "Ready to Move", status: "Available", description: "Experience luxury living at Marine Drive with panoramic backwater views. Close to Lulu Mall, Metro, and top schools. Amenities: Pool, Gym, 24x7 Security.", photos: [ "/src/assets/hero-bg.jpg" ], featured: true, coordinates: { lat: 9.987, lng: 76.275 } }, { id: "2", title: "Modern Villa in Panampilly Nagar", address: { area: "Panampilly Nagar", locality: "Panampilly Nagar, Kochi", city: "Kochi", state: "Kerala", pincode: "682036" }, type: "Villa", bedrooms: 4, bathrooms: 5, sqft: 3500, price: 32000000, furnishing: "Semi-furnished", availability: "Ready to Move", status: "Available", description: "Spacious villa with landscaped garden, private parking, and premium interiors. Near South Railway Station and top hospitals.", photos: [ "/src/assets/hero-bg.jpg" ], featured: true, coordinates: { lat: 9.966, lng: 76.299 } }, { id: "3", title: "Commercial Space in Kakkanad", address: { area: "Kakkanad", locality: "Infopark Road, Kakkanad", city: "Kochi", state: "Kerala", pincode: "682030" }, type: "Commercial", bedrooms: 0, bathrooms: 2, sqft: 1800, price: 12000000, furnishing: "Unfurnished", availability: "Ready to Move", status: "Occupied", description: "Prime commercial space ideal for IT/Startups. Close to Infopark, SmartCity, and Metro. 24x7 power backup and parking.", photos: [ "/src/assets/hero-bg.jpg" ], featured: false, coordinates: { lat: 10.015, lng: 76.341 } } ]; export const usePropertyStore = create((set, get) => ({ properties: initialProperties, addProperty: (property) => set((state) => ({ properties: [ ...state.properties, { ...property, id: uuidv4(), status: "Available" } ] })), editProperty: (id, updated) => set((state) => ({ properties: state.properties.map((p) => p.id === id ? { ...p, ...updated } : p ) })), deleteProperty: (id) => set((state) => ({ properties: state.properties.filter((p) => p.id !== id) })), setStatus: (id, status) => set((state) => ({ properties: state.properties.map((p) => p.id === id ? { ...p, status } : p ) })), setFeatured: (id, featured) => set((state) => ({ properties: state.properties.map((p) => p.id === id ? { ...p, featured } : p ) })), filterProperties: (filters) => { let filtered = get().properties; if (filters.area) filtered = filtered.filter((p) => p.address.area === filters.area); if (filters.type) filtered = filtered.filter((p) => p.type === filters.type); if (filters.minPrice) filtered = filtered.filter((p) => p.price >= filters.minPrice); if (filters.maxPrice) filtered = filtered.filter((p) => p.price <= filters.maxPrice); if (filters.bedrooms) filtered = filtered.filter((p) => p.bedrooms >= filters.bedrooms); return filtered; } })); import { create } from "zustand"; // For demo: hardcoded admin credentials const ADMIN_CREDENTIALS = { username: "admin", password: "kochi@2024" }; export const useAuthStore = create((set) => ({ isAdmin: false, loginError: null, login: (username, password) => { if ( username === ADMIN_CREDENTIALS.username && password === ADMIN_CREDENTIALS.password ) { set({ isAdmin: true, loginError: null }); return true; } else { set({ loginError: "Invalid credentials" }); return false; } }, logout: () => set({ isAdmin: false, loginError: null }) })); import { create } from "zustand"; import { v4 as uuidv4 } from "uuid"; export const useInquiryStore = create((set) => ({ inquiries: [], addInquiry: (inquiry) => set((state) => ({ inquiries: [ ...state.inquiries, { ...inquiry, id: uuidv4(), date: new Date().toISOString() } ] })), markVisited: (id) => set((state) => ({ inquiries: state.inquiries.map((inq) => inq.id === id ? { ...inq, visited: true } : inq ) })) })); import { create } from "zustand"; export const useUserStore = create((set) => ({ savedProperties: [], inquiries: [], addSavedProperty: (propertyId) => set((state) => ({ savedProperties: [...new Set([...state.savedProperties, propertyId])] })), removeSavedProperty: (propertyId) => set((state) => ({ savedProperties: state.savedProperties.filter((id) => id !== propertyId) })), addUserInquiry: (inquiry) => set((state) => ({ inquiries: [...state.inquiries, inquiry] })) })); import React from "react"; import { Link, useLocation } from "react-router-dom"; import { useAuthStore } from "../store/authStore"; import { FaUserCircle } from "react-icons/fa"; const NAV_LINKS = [ { to: "/", label: "Home" }, { to: "/properties", label: "All Properties" }, { to: "/about", label: "About Us" }, { to: "/contact", label: "Contact" }, { to: "/blog", label: "Blog" }, { to: "/dashboard", label: "User Dashboard" }, { to: "/terms", label: "Terms" }, { to: "/privacy", label: "Privacy" }, { to: "/admin/login", label: "Admin Login" } ]; function Navbar() { const { isAdmin, logout } = useAuthStore(); const location = useLocation(); return (

Kochi Realty

{link.label}
Admin Dashboard

); } export default Navbar; import React from "react"; import { Link } from "react-router-dom"; import { FaFacebook, FaInstagram, FaTwitter } from "react-icons/fa"; function Footer() { return ( ); } export default Footer; import React from "react"; import { Link } from "react-router-dom"; function formatPrice(price) { return "₹" + price.toLocaleString("en-IN"); } function PropertyCard({ property }) { return (

{property.status}

{property.title}

{property.address.area}, {property.address.city}

{formatPrice(property.price)}

{property.bedrooms} Bed • {property.bathrooms} Bath • {property.sqft} sqft

View Details

); } export default PropertyCard; import React, { useState } from "react"; function PropertyGallery({ photos }) { const [main, setMain] = useState(0); return (

{photos.map((photo, idx) => ( {`Property

setMain(idx)} /> ))}

); } export default PropertyGallery; import React, { useState } from "react"; import { KOCHI_AREAS, PROPERTY_TYPES } from "../store/propertyStore"; import { useNavigate } from "react-router-dom"; function PropertySearchBar({ initial = {} }) { const [area, setArea] = useState(initial.area || ""); const [type, setType] = useState(initial.type || ""); const [minPrice, setMinPrice] = useState(initial.minPrice || ""); const [maxPrice, setMaxPrice] = useState(initial.maxPrice || ""); const [bedrooms, setBedrooms] = useState(initial.bedrooms || ""); const navigate = useNavigate(); function handleSubmit(e) { e.preventDefault(); const params = new URLSearchParams(); if (area) params.append("area", area); if (type) params.append("type", type); if (minPrice) params.append("minPrice", minPrice); if (maxPrice) params.append("maxPrice", maxPrice); if (bedrooms) params.append("bedrooms", bedrooms); navigate(`/search?${params.toString()}`); } return ( ); } export default PropertySearchBar; import React, { useState } from "react"; import { useFormik } from "formik"; import * as Yup from "yup"; import { useInquiryStore } from "../store/inquiryStore"; import { useUserStore } from "../store/userStore"; const phoneRegExp = /^(\+91)?[6-9]\d{9}$/; function InquiryForm({ propertyId, onSuccess }) { const [success, setSuccess] = useState(false); const addInquiry = useInquiryStore((s) => s.addInquiry); const addUserInquiry = useUserStore((s) => s.addUserInquiry); const formik = useFormik({ initialValues: { name: "", email: "", phone: "+91", message: "", scheduleVisit: false, propertyId: propertyId || null }, validationSchema: Yup.object({ name: Yup.string().required("Name is required"), email: Yup.string().email("Invalid email").required("Email is required"), phone: Yup.string() .matches(phoneRegExp, "Enter a valid Indian phone number") .required("Phone is required"), message: Yup.string().required("Message is required") }), onSubmit: (values, { resetForm }) => { addInquiry(values); addUserInquiry(values); setSuccess(true); resetForm(); if (onSuccess) onSuccess(); } }); return (

Enquire / Book a Visit

{success &&

Inquiry submitted! We'll contact you soon.

} {formik.touched.name && formik.errors.name && (

{formik.errors.name}

)} {formik.touched.email && formik.errors.email && (

{formik.errors.email}

)} {formik.touched.phone && formik.errors.phone && (

{formik.errors.phone}

)}

{formik.touched.message && formik.errors.message && (
            <div className="error">{formik.errors.message}</div>
          )}
          <label style={{ display: "flex", alignItems: "center", marginBottom: "1em" }}>
            <input
              type="checkbox"
              name="scheduleVisit"
              checked={formik.values.scheduleVisit}
              onChange={formik.handleChange}
              style={{ marginRight: "0.5em" }}
            />
            Schedule a site visit
          </label>
          <button className="btn" type="submit">
            Submit Inquiry
          </button>
        </form>
      );
    }

export default InquiryForm;
  </jitFile>

<jitFile type="file" filePath="src/components/Testimonials.jsx">
    import React from "react";

const testimonials = [
      {
        name: "Anjali Menon",
        photo: "/src/assets/testimonial1.jpg",
        text: "Kochi Realty helped me find my dream apartment in Marine Drive. The process was smooth and the team was very professional."
      },
      {
        name: "Ramesh Nair",
        photo: "/src/assets/testimonial2.jpg",
        text: "Their local expertise in Kochi is unmatched. I highly recommend them for anyone looking for premium properties."
      },
      {
        name: "Priya Varghese",
        photo: "/src/assets/testimonial3.jpg",
        text: "I scheduled a site visit and the team was prompt and helpful. Found a beautiful villa in Panampilly Nagar!"
      }
    ];

function Testimonials() {
      return (
        <section className="section" style={{ background: "#f3f7f3" }}>
          <div className="container">
            <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>What Our Clients Say</h2>
            <div style={{
              display: "flex",
              gap: "2rem",
              flexWrap: "wrap",
              justifyContent: "center"
            }}>
              {testimonials.map((t, idx) => (
                <div key={idx} className="card" style={{ maxWidth: 320, textAlign: "center" }}>
                  <img
                    src={t.photo}
                    alt={t.name}
                    style={{
                      width: 70,
                      height: 70,
                      borderRadius: "50%",
                      objectFit: "cover",
                      marginBottom: "1rem"
                    }}
                  />
                  <div style={{ fontWeight: 600, marginBottom: "0.5rem" }}>{t.name}</div>
                  <div style={{ fontStyle: "italic", color: "#444" }}>{t.text}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      );
    }

export default Testimonials;
  </jitFile>

<jitFile type="file" filePath="src/components/WhyChooseUs.jsx">
    import React from "react";
    import { FaMapMarkerAlt, FaHome, FaHandshake, FaStar } from "react-icons/fa";

function WhyChooseUs() {
      return (
        <section className="section" style={{ background: "#fff" }}>
          <div className="container">
            <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Why Choose Kochi Realty?</h2>
            <div style={{
              display: "flex",
              gap: "2rem",
              flexWrap: "wrap",
              justifyContent: "center"
            }}>
              <div className="card" style={{ maxWidth: 260, textAlign: "center" }}>
                <FaMapMarkerAlt size={36} color="var(--kochi-green)" />
                <h4>Local Kochi Expertise</h4>
                <p>Our team knows every corner of Kochi, ensuring you get the best property in the right location.</p>
              </div>
              <div className="card" style={{ maxWidth: 260, textAlign: "center" }}>
                <FaHome size={36} color="var(--kochi-gold)" />
                <h4>Curated Premium Listings</h4>
                <p>We handpick only the finest properties, from luxury apartments to exclusive villas and commercial spaces.</p>
              </div>
              <div className="card" style={{ maxWidth: 260, textAlign: "center" }}>
                <FaHandshake size={36} color="var(--kochi-blue)" />
                <h4>Personalized Service</h4>
                <p>From inquiry to site visit, our team provides end-to-end support tailored to your needs.</p>
              </div>
              <div className="card" style={{ maxWidth: 260, textAlign: "center" }}>
                <FaStar size={36} color="var(--accent)" />
                <h4>Trusted by Clients</h4>
                <p>Our reputation is built on trust, transparency, and successful transactions in Kochi.</p>
              </div>
            </div>
          </div>
        </section>
      );
    }

export default WhyChooseUs;
  </jitFile>

<jitFile type="file" filePath="src/pages/Home.jsx">
    import React from "react";
    import { usePropertyStore } from "../store/propertyStore";
    import PropertyCard from "../components/PropertyCard";
    import PropertySearchBar from "../components/PropertySearchBar";
    import WhyChooseUs from "../components/WhyChooseUs";
    import Testimonials from "../components/Testimonials";
    import { Link } from "react-router-dom";

function Home() {
      const properties = usePropertyStore((s) =>
        s.properties.filter((p) => p.featured && p.status === "Available")
      );

return (
        <div>
          {/* Hero Section */}
          <section
            style={{
              background: `url(/src/assets/hero-bg.jpg) center/cover no-repeat`,
              minHeight: 400,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "#fff",
              position: "relative"
            }}
          >
            <div
              style={{
                background: "rgba(0,0,0,0.45)",
                padding: "3rem 2rem",
                borderRadius: 12,
                textAlign: "center",
                maxWidth: 600
              }}
            >
              <h1 style={{ fontSize: "2.5rem", marginBottom: "1rem" }}>
                Discover Your Dream Property in Kochi
              </h1>
              <p style={{ fontSize: "1.2rem", marginBottom: "2rem" }}>
                Premium apartments, villas, and commercial spaces in Kerala's vibrant city.
              </p>
              <Link to="/properties" className="btn" style={{ fontSize: "1.1rem" }}>
                Browse Properties
              </Link>
            </div>
          </section>

{/* Property Search */}
          <section className="section" style={{ background: "#f3f7f3" }}>
            <div className="container">
              <PropertySearchBar />
            </div>
          </section>

{/* Featured Properties */}
          <section className="section">
            <div className="container">
              <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Featured Properties in Kochi</h2>
              <div style={{
                display: "flex",
                gap: "2rem",
                flexWrap: "wrap",
                justifyContent: "center"
              }}>
                {properties.length === 0 && (
                  <div>No featured properties available at the moment.</div>
                )}
                {properties.map((property) => (
                  <PropertyCard key={property.id} property={property} />
                ))}
              </div>
            </div>
          </section>

{/* Why Choose Us */}
          <WhyChooseUs />

{/* Testimonials */}
          <Testimonials />

{/* Call to Action */}
          <section className="section" style={{ background: "#fff" }}>
            <div className="container" style={{ textAlign: "center" }}>
              <h2>Ready to find your perfect property in Kochi?</h2>
              <p>Contact us today or schedule a site visit to experience our premium listings first-hand.</p>
              <Link to="/contact" className="btn" style={{ fontSize: "1.1rem" }}>
                Contact Us
              </Link>
            </div>
          </section>

{/* About Us (Brief) & Contact Info */}
          <section className="section" style={{ background: "#f3f7f3" }}>
            <div className="container" style={{
              display: "flex",
              flexWrap: "wrap",
              gap: "2rem",
              justifyContent: "space-between"
            }}>
              <div style={{ flex: "1 1 300px" }}>
                <h3>About Kochi Realty</h3>
                <p>
                  Kochi Realty is your trusted partner for premium real estate in Kochi, Kerala. With deep local expertise and a curated portfolio, we help you find the perfect home or investment in the Queen of the Arabian Sea.
                </p>
                <Link to="/about" style={{ color: "var(--kochi-blue)" }}>Learn more →</Link>
              </div>
              <div style={{ flex: "1 1 300px" }}>
                <h3>Contact Information</h3>
                <p>
                  <strong>Phone:</strong> <a href="tel:+919876543210">+91 98765 43210</a><br />
                  <strong>Email:</strong> <a href="mailto:info@kochirealty.com">info@kochirealty.com</a><br />
                  <strong>Address:</strong> 2nd Floor, Marine Drive, Kochi, Kerala 682031
                </p>
                <Link to="/contact" style={{ color: "var(--kochi-blue)" }}>Contact us →</Link>
              </div>
            </div>
          </section>
        </div>
      );
    }

export default Home;
  </jitFile>

<jitFile type="file" filePath="src/pages/AllProperties.jsx">
    import React, { useState } from "react";
    import { usePropertyStore, KOCHI_AREAS, PROPERTY_TYPES } from "../store/propertyStore";
    import PropertyCard from "../components/PropertyCard";

function AllProperties() {
      const properties = usePropertyStore((s) => s.properties);
      const [filters, setFilters] = useState({
        area: "",
        type: "",
        minPrice: "",
        maxPrice: "",
        bedrooms: ""
      });

const filtered = properties.filter((p) => {
        if (filters.area && p.address.area !== filters.area) return false;
        if (filters.type && p.type !== filters.type) return false;
        if (filters.minPrice && p.price < Number(filters.minPrice)) return false;
        if (filters.maxPrice && p.price > Number(filters.maxPrice)) return false;
        if (filters.bedrooms && p.bedrooms < Number(filters.bedrooms)) return false;
        return true;
      });

function handleChange(e) {
        setFilters({ ...filters, [e.target.name]: e.target.value });
      }

return (
        <div className="container section">
          <h1>All Properties in Kochi</h1>
          <form style={{
            display: "flex",
            gap: "1rem",
            flexWrap: "wrap",
            marginBottom: "2rem"
          }}>
            <select
              className="select"
              name="area"
              value={filters.area}
              onChange={handleChange}
              style={{ flex: "1 1 150px" }}
            >
              <option value="">All Areas</option>
              {KOCHI_AREAS.map((a) => (
                <option key={a} value={a}>{a}</option>
              ))}
            </select>
            <select
              className="select"
              name="type"
              value={filters.type}
              onChange={handleChange}
              style={{ flex: "1 1 150px" }}
            >
              <option value="">All Types</option>
              {PROPERTY_TYPES.map((t) => (
                <option key={t} value={t}>{t}</option>
              ))}
            </select>
            <input
              className="input"
              type="number"
              name="minPrice"
              placeholder="Min Price (₹)"
              value={filters.minPrice}
              onChange={handleChange}
              style={{ flex: "1 1 120px" }}
            />
            <input
              className="input"
              type="number"
              name="maxPrice"
              placeholder="Max Price (₹)"
              value={filters.maxPrice}
              onChange={handleChange}
              style={{ flex: "1 1 120px" }}
            />
            <input
              className="input"
              type="number"
              name="bedrooms"
              placeholder="Bedrooms"
              value={filters.bedrooms}
              onChange={handleChange}
              style={{ flex: "1 1 100px" }}
            />
          </form>
          <div style={{
            display: "flex",
            gap: "2rem",
            flexWrap: "wrap",
            justifyContent: "center"
          }}>
            {filtered.length === 0 && (
              <div>No properties found for the selected filters.</div>
            )}
            {filtered.map((property) => (
              <PropertyCard key={property.id} property={property} />
            ))}
          </div>
        </div>
      );
    }

export default AllProperties;
  </jitFile>

<jitFile type="file" filePath="src/pages/PropertyDetails.jsx">
    import React from "react";
    import { useParams } from "react-router-dom";
    import { usePropertyStore } from "../store/propertyStore";
    import PropertyGallery from "../components/PropertyGallery";
    import InquiryForm from "../components/InquiryForm";

function formatPrice(price) {
      return "₹" + price.toLocaleString("en-IN");
    }

function PropertyDetails() {
      const { id } = useParams();
      const property = usePropertyStore((s) =>
        s.properties.find((p) => p.id === id)
      );

if (!property) {
        return (
          <div className="container section">
            <h2>Property Not Found</h2>
            <p>The property you are looking for does not exist.</p>
          </div>
        );
      }

return (
        <div className="container section" style={{ display: "flex", flexWrap: "wrap", gap: "2rem" }}>
          <div style={{ flex: "2 1 400px", minWidth: 320 }}>
            <PropertyGallery photos={property.photos} />
            <h1>{property.title}</h1>
            <div style={{ color: "#666", fontSize: "1.1em" }}>
              {property.address.locality}, {property.address.city}
            </div>
            <div style={{ margin: "1em 0", fontWeight: 600, fontSize: "1.2em" }}>
              {formatPrice(property.price)}
            </div>
            <div>
              <span style={{ marginRight: "1em" }}>
                <strong>Type:</strong> {property.type}
              </span>
              <span style={{ marginRight: "1em" }}>
                <strong>Bedrooms:</strong> {property.bedrooms}
              </span>
              <span style={{ marginRight: "1em" }}>
                <strong>Bathrooms:</strong> {property.bathrooms}
              </span>
              <span style={{ marginRight: "1em" }}>
                <strong>Sqft:</strong> {property.sqft}
              </span>
            </div>
            <div>
              <span style={{ marginRight: "1em" }}>
                <strong>Furnishing:</strong> {property.furnishing}
              </span>
              <span style={{ marginRight: "1em" }}>
                <strong>Availability:</strong> {property.availability}
              </span>
              <span>
                <strong>Status:</strong>{" "}
                <span
                  className={
                    property.status === "Available"
                      ? "status-available"
                      : "status-occupied"
                  }
                >
                  {property.status}
                </span>
              </span>
            </div>
            <div style={{ margin: "1.5em 0" }}>
              <strong>Description:</strong>
              <p>{property.description}</p>
            </div>
            <div>
              <strong>Nearby Landmarks & Amenities:</strong>
              <ul>
                <li>Metro Station, Lulu Mall, Top Schools, Hospitals, Backwaters</li>
              </ul>
            </div>
            <div style={{ margin: "2em 0" }}>
              <strong>Location:</strong>
              <div>
                <img
                  src="/src/assets/kochi-map.png"
                  alt="Kochi Map"
                  style={{ width: 300, borderRadius: 8, marginTop: "0.5em" }}
                />
              </div>
            </div>
          </div>
          <div style={{ flex: "1 1 320px", minWidth: 320 }}>
            <InquiryForm propertyId={property.id} />
          </div>
        </div>
      );
    }

export default PropertyDetails;
  </jitFile>

<jitFile type="file" filePath="src/pages/About.jsx">
    import React from "react";

function About() {
      return (
        <div className="container section">
          <h1>About Kochi Realty</h1>
          <p>
            Kochi Realty is a premium real estate platform dedicated to the vibrant city of Kochi, Kerala. Our mission is to connect discerning buyers and investors with the finest properties in the region, from luxury waterfront apartments to exclusive villas and commercial spaces.
          </p>
          <h2>Our Team</h2>
          <p>
            Our team comprises seasoned real estate professionals with deep roots in Kochi. We leverage our local expertise, market insights, and extensive network to curate the best listings and provide personalized service to every client.
          </p>
          <h2>Our Mission</h2>
          <p>
            To make property buying, selling, and renting in Kochi seamless, transparent, and rewarding. We believe in building lasting relationships based on trust and integrity.
          </p>
          <h2>Why Kochi?</h2>
          <p>
            Kochi, the Queen of the Arabian Sea, is Kerala's commercial and cultural capital. With its booming IT sector, world-class infrastructure, and scenic beauty, Kochi is the ideal destination for your next home or investment.
          </p>
        </div>
      );
    }

export default About;
  </jitFile>

<jitFile type="file" filePath="src/pages/Contact.jsx">
    import React from "react";
    import InquiryForm from "../components/InquiryForm";

function Contact() {
      return (
        <div className="container section" style={{ display: "flex", flexWrap: "wrap", gap: "2rem" }}>
          <div style={{ flex: "1 1 350px", minWidth: 320 }}>
            <h1>Contact Us</h1>
            <p>
              <strong>Phone:</strong> <a href="tel:+919876543210">+91 98765 43210</a><br />
              <strong>Email:</strong> <a href="mailto:info@kochirealty.com">info@kochirealty.com</a><br />
              <strong>Address:</strong> 2nd Floor, Marine Drive, Kochi, Kerala 682031
            </p>
            <div>
              <img
                src="/src/assets/kochi-map.png"
                alt="Kochi Office Map"
                style={{ width: 300, borderRadius: 8, marginTop: "0.5em" }}
              />
            </div>
          </div>
          <div style={{ flex: "1 1 350px", minWidth: 320 }}>
            <InquiryForm />
          </div>
        </div>
      );
    }

export default Contact;
  </jitFile>

<jitFile type="file" filePath="src/pages/Blog.jsx">
    import React from "react";

function Blog() {
      return (
        <div className="container section">
          <h1>Kochi Real Estate Blog</h1>
          <p>
            Stay tuned for the latest updates, tips, and guides on the Kochi real estate market.
          </p>
          <div className="card" style={{ marginTop: "2rem" }}>
            <h3>Coming Soon!</h3>
            <p>
              Our blog will feature articles on buying/selling tips, local area guides, and market trends in Kochi.
            </p>
          </div>
        </div>
      );
    }

export default Blog;
  </jitFile>

<jitFile type="file" filePath="src/pages/Terms.jsx">
    import React from "react";

function Terms() {
      return (
        <div className="container section">
          <h1>Terms of Service</h1>
          <p>
            Welcome to Kochi Realty. By using our website, you agree to the following terms and conditions. Please read them carefully.
          </p>
          <ul>
            <li>All property information is provided for informational purposes and is subject to change.</li>
            <li>Booking and inquiries do not constitute a binding agreement until confirmed by our team.</li>
            <li>All transactions are subject to the laws of Kerala and India.</li>
            <li>We reserve the right to update these terms at any time.</li>
          </ul>
          <p>
            For any questions regarding our terms, please contact us at info@kochirealty.com.
          </p>
        </div>
      );
    }

export default Terms;
  </jitFile>

<jitFile type="file" filePath="src/pages/Privacy.jsx">
    import React from "react";

function Privacy() {
      return (
        <div className="container section">
          <h1>Privacy Policy</h1>
          <p>
            Kochi Realty is committed to protecting your privacy. We collect and use your data in accordance with Indian data privacy laws.
          </p>
          <ul>
            <li>We collect personal information only for property inquiries and site visits.</li>
            <li>Your data is never shared with third parties without your consent.</li>
            <li>We use secure methods to store and process your information.</li>
            <li>You may request deletion of your data at any time by contacting us.</li>
          </ul>
          <p>
            For more details, email us at info@kochirealty.com.
          </p>
        </div>
      );
    }

export default Privacy;
  </jitFile>

<jitFile type="file" filePath="src/pages/UserDashboard.jsx">
    import React from "react";
    import { useUserStore } from "../store/userStore";
    import { usePropertyStore } from "../store/propertyStore";

function UserDashboard() {
      const savedProperties = useUserStore((s) => s.savedProperties);
      const inquiries = useUserStore((s) => s.inquiries);
      const properties = usePropertyStore((s) => s.properties);

return (
        <div className="container section">
          <h1>User Dashboard</h1>
          <div style={{ marginBottom: "2rem" }}>
            <h2>Saved Properties</h2>
            {savedProperties.length === 0 && <div>No saved properties yet.</div>}
            <ul>
              {savedProperties.map((id) => {
                const prop = properties.find((p) => p.id === id);
                if (!prop) return null;
                return (
                  <li key={id}>
                    {prop.title} - {prop.address.area}, {prop.address.city}
                  </li>
                );
              })}
            </ul>
          </div>
          <div>
            <h2>Inquiries & Scheduled Visits</h2>
            {inquiries.length === 0 && <div>No inquiries yet.</div>}
            <ul>
              {inquiries.map((inq, idx) => (
                <li key={idx}>
                  {inq.message} {inq.scheduleVisit && <span>(Site Visit Requested)</span>}
                </li>
              ))}
            </ul>
          </div>
        </div>
      );
    }

export default UserDashboard;
  </jitFile>

<jitFile type="file" filePath="src/pages/SearchResults.jsx">
    import React from "react";
    import { useLocation } from "react-router-dom";
    import { usePropertyStore } from "../store/propertyStore";
    import PropertyCard from "../components/PropertyCard";

function useQuery() {
      return new URLSearchParams(useLocation().search);
    }

function SearchResults() {
      const query = useQuery();
      const area = query.get("area") || "";
      const type = query.get("type") || "";
      const minPrice = query.get("minPrice") || "";
      const maxPrice = query.get("maxPrice") || "";
      const bedrooms = query.get("bedrooms") || "";

const properties = usePropertyStore((s) => s.properties);
      const filtered = properties.filter((p) => {
        if (area && p.address.area !== area) return false;
        if (type && p.type !== type) return false;
        if (minPrice && p.price < Number(minPrice)) return false;
        if (maxPrice && p.price > Number(maxPrice)) return false;
        if (bedrooms && p.bedrooms < Number(bedrooms)) return false;
        return true;
      });

return (
        <div className="container section">
          <h1>Search Results</h1>
          <div style={{
            display: "flex",
            gap: "2rem",
            flexWrap: "wrap",
            justifyContent: "center"
          }}>
            {filtered.length === 0 && (
              <div>No properties found for the selected criteria.</div>
            )}
            {filtered.map((property) => (
              <PropertyCard key={property.id} property={property} />
            ))}
          </div>
        </div>
      );
    }

export default SearchResults;
  </jitFile>

<jitFile type="file" filePath="src/pages/admin/AdminLogin.jsx">
    import React, { useState } from "react";
    import { useAuthStore } from "../../store/authStore";
    import { useNavigate } from "react-router-dom";

function AdminLogin() {
      const [username, setUsername] = useState("");
      const [password, setPassword] = useState("");
      const { login, loginError } = useAuthStore();
      const navigate = useNavigate();

function handleSubmit(e) {
        e.preventDefault();
        if (login(username, password)) {
          navigate("/admin");
        }
      }

return (
        <div className="container section" style={{ maxWidth: 400 }}>
          <h1>Admin Login</h1>
          <form onSubmit={handleSubmit}>
            <input
              className="input"
              type="text"
              placeholder="Username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              autoFocus
            />
            <input
              className="input"
              type="password"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            {loginError && <div className="error">{loginError}</div>}
            <button className="btn" type="submit">
              Login
            </button>
          </form>
        </div>
      );
    }

export default AdminLogin;
  </jitFile>

<jitFile type="file" filePath="src/pages/admin/AdminDashboard.jsx">
    import React, { useState } from "react";
    import { usePropertyStore, KOCHI_AREAS, PROPERTY_TYPES, FURNISHING_STATUSES, AVAILABILITY_STATUSES } from "../../store/propertyStore";
    import { useInquiryStore } from "../../store/inquiryStore";

function AdminDashboard() {
      const {
        properties,
        addProperty,
        editProperty,
        deleteProperty,
        setStatus,
        setFeatured
      } = usePropertyStore();
      const { inquiries } = useInquiryStore();

const [editingId, setEditingId] = useState(null);
      const [form, setForm] = useState({
        title: "",
        address: {
          area: "",
          locality: "",
          city: "Kochi",
          state: "Kerala",
          pincode: ""
        },
        type: "",
        bedrooms: "",
        bathrooms: "",
        sqft: "",
        price: "",
        furnishing: "",
        availability: "",
        description: "",
        photos: ["/src/assets/hero-bg.jpg"],
        featured: false
      });

function handlePhotoChange(e) {
        setForm({ ...form, photos: [e.target.value] });
      }

function handleEdit(id) {
        const prop = properties.find((p) => p.id === id);
        setEditingId(id);
        setForm({ ...prop });
      }

return (
        <div className="container section">
          <h1>Admin Dashboard</h1>
          <h2>Add / Edit Property</h2>
          <form onSubmit={handleSubmit} className="card" style={{ marginBottom: "2rem" }}>
            <input
              className="input"
              name="title"
              placeholder="Title"
              value={form.title}
              onChange={handleChange}
              required
            />
            <select
              className="select"
              name="address.area"
              value={form.address.area}
              onChange={handleChange}
              required
            >
              <option value="">Select Area</option>
              {KOCHI_AREAS.map((a) => (
                <option key={a} value={a}>{a}</option>
              ))}
            </select>
            <input
              className="input"
              name="address.locality"
              placeholder="Locality"
              value={form.address.locality}
              onChange={handleChange}
              required
            />
            <input
              className="input"
              name="address.pincode"
              placeholder="Pincode"
              value={form.address.pincode}
              onChange={handleChange}
              required
            />
            <select
              className="select"
              name="type"
              value={form.type}
              onChange={handleChange}
              required
            >
              <option value="">Property Type</option>
              {PROPERTY_TYPES.map((t) => (
                <option key={t} value={t}>{t}</option>
              ))}
            </select>
            <input
              className="input"
              name="bedrooms"
              type="number"
              placeholder="Bedrooms"
              value={form.bedrooms}
              onChange={handleChange}
              required
            />
            <input
              className="input"
              name="bathrooms"
              type="number"
              placeholder="Bathrooms"
              value={form.bathrooms}
              onChange={handleChange}
              required
            />
            <input
              className="input"
              name="sqft"
              type="number"
              placeholder="Square Footage"
              value={form.sqft}
              onChange={handleChange}
              required
            />
            <input
              className="input"
              name="price"
              type="number"
              placeholder="Price (₹)"
              value={form.price}
              onChange={handleChange}
              required
            />
            <select
              className="select"
              name="furnishing"
              value={form.furnishing}
              onChange={handleChange}
              required
            >
              <option value="">Furnishing Status</option>
              {FURNISHING_STATUSES.map((f) => (
                <option key={f} value={f}>{f}</option>
              ))}
            </select>
            <select
              className="select"
              name="availability"
              value={form.availability}
              onChange={handleChange}
              required
            >
              <option value="">Availability Status</option>
              {AVAILABILITY_STATUSES.map((a) => (
                <option key={a} value={a}>{a}</option>
              ))}
            </select>
            <textarea
              className="input"
              name="description"
              placeholder="Description"
              value={form.description}
              onChange={handleChange}
              required
              rows={3}
            />
            <input
              className="input"
              name="photos"
              placeholder="Photo URL (comma separated for multiple)"
              value={form.photos.join(",")}
              onChange={(e) => setForm({ ...form, photos: e.target.value.split(",") })}
              required
            />
            <label>
              <input
                type="checkbox"
                checked={form.featured}
                onChange={(e) => setForm({ ...form, featured: e.target.checked })}
              />{" "}
              Featured Property
            </label>
            <button className="btn" type="submit">
              {editingId ? "Update Property" : "Add Property"}
            </button>
            {editingId && (
              <button
                className="btn"
                type="button"
                style={{ marginLeft: "1em", background: "var(--danger)" }}
                onClick={() => {
                  setEditingId(null);
                  setForm({
                    title: "",
                    address: {
                      area: "",
                      locality: "",
                      city: "Kochi",
                      state: "Kerala",
                      pincode: ""
                    },
                    type: "",
                    bedrooms: "",
                    bathrooms: "",
                    sqft: "",
                    price: "",
                    furnishing: "",
                    availability: "",
                    description: "",
                    photos: ["/src/assets/hero-bg.jpg"],
                    featured: false
                  });
                }}
              >
                Cancel
              </button>
            )}
          </form>

<h2>Manage Properties</h2>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead>
                <tr style={{ background: "#f3f7f3" }}>
                  <th>Title</th>
                  <th>Area</th>
                  <th>Type</th>
                  <th>Price</th>
                  <th>Status</th>
                  <th>Featured</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {properties.map((p) => (
                  <tr key={p.id} style={{ borderBottom: "1px solid #eee" }}>
                    <td>{p.title}</td>
                    <td>{p.address.area}</td>
                    <td>{p.type}</td>
                    <td>₹{Number(p.price).toLocaleString("en-IN")}</td>
                    <td>
                      <select
                        value={p.status}
                        onChange={(e) => setStatus(p.id, e.target.value)}
                      >
                        <option value="Available">Available</option>
                        <option value="Occupied">Occupied</option>
                      </select>
                    </td>
                    <td>
                      <input
                        type="checkbox"
                        checked={p.featured}
                        onChange={(e) => setFeatured(p.id, e.target.checked)}
                      />
                    </td>
                    <td>
                      <button className="btn" onClick={() => handleEdit(p.id)}>
                        Edit
                      </button>
                      <button
                        className="btn"
                        style={{ background: "var(--danger)", marginLeft: "0.5em" }}
                        onClick={() => deleteProperty(p.id)}
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

<h2 style={{ marginTop: "2rem" }}>User Inquiries & Site Visit Requests</h2>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead>
                <tr style={{ background: "#f3f7f3" }}>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Phone</th>
                  <th>Message</th>
                  <th>Site Visit</th>
                  <th>Date</th>
                </tr>
              </thead>
              <tbody>
                {inquiries.map((inq) => (
                  <tr key={inq.id} style={{ borderBottom: "1px solid #eee" }}>
                    <td>{inq.name}</td>
                    <td>{inq.email}</td>
                    <td>{inq.phone}</td>
                    <td>{inq.message}</td>
                    <td>{inq.scheduleVisit ? "Yes" : "No"}</td>
                    <td>{new Date(inq.date).toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      );
    }

export default AdminDashboard;
  </jitFile>
</jitProject>
</article></body></html>