spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Agrégateur de logements à louer (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// pages/Bienvenue.tsx : intégration après la création du compte — choix du rôle5//   « Je cherche un logement » (locataire : favoris…) ou « Je gère des6//   logements » (gestionnaire : page personnalisable de sa gestion).7// -----------------------------------------------------------------------------8import { useState } from "react";9import { useNavigate } from "react-router-dom";10import { setRole } from "../api";11import { useAccount } from "../account";12import { IcoBuilding, IcoHeart, IcoHouse, IcoSliders } from "../components/Icons";1314export default function BienvenuePage() {15  const { me, loaded, refresh } = useAccount();16  const [busy, setBusy] = useState<"locataire" | "gestionnaire" | null>(null);17  const nav = useNavigate();1819  const choose = async (role: "locataire" | "gestionnaire") => {20    setBusy(role);21    await setRole(role);22    refresh();23    nav(role === "gestionnaire" ? "/gestion" : "/", { replace: true });24  };2526  if (loaded && !me) {27    return (28      <div className="container profil">29        <span className="kicker">Bienvenue</span>30        <h1>Créez d'abord votre <span className="hl">compte</span>.</h1>31        <a className="btn btn-primary" href="/api/auth/ka/login">32          Se connecter avec KA ID33        </a>34      </div>35    );36  }3738  return (39    <div className="container bienvenue">40      <span className="kicker">Bienvenue{me?.name ? `, ${me.name.split(" ")[0]}` : ""}</span>41      <h1>Vous êtes plutôt<br /><span className="hl">quel profil</span> ?</h1>42      <p className="lede">43        Une dernière étape : dites-nous comment vous utiliserez Lou-Ka.44        Vous pourrez changer d'avis plus tard dans votre profil.45      </p>4647      <div className="role-grid">48        <button49          className="role-card"50          disabled={busy !== null}51          onClick={() => choose("locataire")}52        >53          <span className="role-ico"><IcoHouse size={30} /></span>54          <span className="role-title">Je cherche un logement</span>55          <span className="role-desc">56            Locataire potentiel — magasinez parmi tous les logements du Québec.57          </span>58          <ul className="role-perks">59            <li><IcoHeart size={13} /> Favoris sur les annonces</li>60            <li><IcoSliders size={13} /> Filtres et recherche avancée</li>61            <li>Et d'autres outils à venir (alertes…)</li>62          </ul>63          <span className="role-cta">{busy === "locataire" ? "Un instant…" : "C'est moi →"}</span>64        </button>6566        <button67          className="role-card"68          disabled={busy !== null}69          onClick={() => choose("gestionnaire")}70        >71          <span className="role-ico"><IcoBuilding size={30} /></span>72          <span className="role-title">Je gère des logements</span>73          <span className="role-desc">74            Gestionnaire ou propriétaire dont les logements sont affichés sur Lou-Ka.75          </span>76          <ul className="role-perks">77            <li>Réclamez la page de votre gestion</li>78            <li>Personnalisez-la : accroche, contact, logo</li>79            <li>Votre inventaire, relié automatiquement</li>80          </ul>81          <span className="role-cta">{busy === "gestionnaire" ? "Un instant…" : "C'est moi →"}</span>82        </button>83      </div>84    </div>85  );86}87