major changes.

src/components/app/app.tsx

@@ -6,18 +6,28 @@ import PrivateRoute from '../private-route/private-route.tsx';
 import FavoritesPage from '../../pages/favorites-page/favorites-page.tsx';
 import OfferPage from '../../pages/offer-page/offer-page.tsx';
 import NotFoundPage from '../../pages/not-found-page/not-found-page.tsx';
+import {OffersShort} from '../../types/offers/offer-short.ts';
+import {OffersDetailed} from '../../types/offers/offer-detailed.ts';
 
 type AppProps = {
   rentOffersCount: number;
+  offersShort: OffersShort;
+  offersDetailed: OffersDetailed;
+  allFavorites: OffersShort;
 }
 
-function App({rentOffersCount}: AppProps): JSX.Element {
+function App({rentOffersCount, offersShort, offersDetailed, allFavorites}: AppProps): JSX.Element {
   return (
     <BrowserRouter>
       <Routes>
         <Route
           path={AppRoute.Main}
-          element={<MainPage rentOffersCount={rentOffersCount}/>}
+          element={
+            <MainPage
+              rentOffersCount={rentOffersCount}
+              offersShort={offersShort}
+            />
+          }
         />
         <Route
           path={AppRoute.Login}
@@ -27,14 +37,14 @@ function App({rentOffersCount}: AppProps): JSX.Element {
           path={AppRoute.Favourites}
           element={
             <PrivateRoute authorizationStatus={AuthStatus.NoAuth}>
-              <FavoritesPage/>
+              <FavoritesPage allFavorites={allFavorites}/>
             </PrivateRoute>
           }
         />
-        <Route
-          path={AppRoute.Offer}
-          element={<OfferPage/>}
-        />
+        <Route path={AppRoute.Offer}>
+          <Route index element={<NotFoundPage/>}/>
+          <Route path={':id'} element={<OfferPage offersDetailed={offersDetailed}/>}/>
+        </Route>
         <Route
           path='*'
           element={<NotFoundPage/>}

src/components/comment-submission-form/comment-submission-form.tsx

@@ -0,0 +1,132 @@
+import {ChangeEvent, useState} from 'react';
+
+function CommentSubmissionForm(): JSX.Element {
+  const [formData, setFormData] = useState({
+    rating: 0,
+    review: '',
+  });
+
+  function handleFieldChange<T extends HTMLInputElement | HTMLTextAreaElement>(evt: ChangeEvent<T>) {
+    const {name, value} = evt.target;
+    setFormData({...formData, [name]: value});
+  }
+
+  return (
+    <form className="reviews__form form" action="#" method="post">
+      <label className="reviews__label form__label" htmlFor="review">
+        Your review
+      </label>
+      <div className="reviews__rating-form form__rating">
+        <input
+          onChange={handleFieldChange}
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={5}
+          id="5-stars"
+          type="radio"
+        />
+        <label
+          htmlFor="5-stars"
+          className="reviews__rating-label form__rating-label"
+          title="perfect"
+        >
+          <svg className="form__star-image" width={37} height={33}>
+            <use xlinkHref="#icon-star"/>
+          </svg>
+        </label>
+        <input
+          onChange={handleFieldChange}
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={4}
+          id="4-stars"
+          type="radio"
+        />
+        <label
+          htmlFor="4-stars"
+          className="reviews__rating-label form__rating-label"
+          title="good"
+        >
+          <svg className="form__star-image" width={37} height={33}>
+            <use xlinkHref="#icon-star"/>
+          </svg>
+        </label>
+        <input
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={3}
+          id="3-stars"
+          type="radio"
+        />
+        <label
+          htmlFor="3-stars"
+          className="reviews__rating-label form__rating-label"
+          title="not bad"
+        >
+          <svg className="form__star-image" width={37} height={33}>
+            <use xlinkHref="#icon-star"/>
+          </svg>
+        </label>
+        <input
+          onChange={handleFieldChange}
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={2}
+          id="2-stars"
+          type="radio"
+        />
+        <label
+          htmlFor="2-stars"
+          className="reviews__rating-label form__rating-label"
+          title="badly"
+        >
+          <svg className="form__star-image" width={37} height={33}>
+            <use xlinkHref="#icon-star"/>
+          </svg>
+        </label>
+        <input
+          onChange={handleFieldChange}
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={1}
+          id="1-star"
+          type="radio"
+        />
+        <label
+          htmlFor="1-star"
+          className="reviews__rating-label form__rating-label"
+          title="terribly"
+        >
+          <svg className="form__star-image" width={37} height={33}>
+            <use xlinkHref="#icon-star"/>
+          </svg>
+        </label>
+      </div>
+      <textarea
+        onChange={handleFieldChange}
+        className="reviews__textarea form__textarea"
+        id="review"
+        name="review"
+        placeholder="Tell how was your stay, what you like and what can be improved"
+        defaultValue={''}
+      />
+      <div className="reviews__button-wrapper">
+        <p className="reviews__help">
+          To submit review please make sure to set{' '}
+          <span className="reviews__star">rating</span> and describe your stay with
+          at least <b className="reviews__text-amount">50 characters</b>.
+        </p>
+        <button
+          className="reviews__submit form__submit button"
+          type="submit"
+          disabled
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+
+  );
+}
+
+export default CommentSubmissionForm;

src/components/favorite-mark-button/favorite-mark-button.tsx

@@ -0,0 +1,19 @@
+type FavoriteMarkButtonProps = {
+  inFavorites?: boolean;
+}
+
+function FavoriteMarkButton({ inFavorites } : FavoriteMarkButtonProps) : JSX.Element {
+  return (
+    <button className={
+      'place-card__bookmark-button button'.concat(!inFavorites ? '' : ' place-card__bookmark-button--active')
+    } type="button"
+    >
+      <svg className="place-card__bookmark-icon" width="18" height="19">
+        <use xlinkHref="#icon-bookmark"></use>
+      </svg>
+      <span className="visually-hidden">To bookmarks</span>
+    </button>
+  );
+}
+
+export default FavoriteMarkButton;

src/components/favorite-place-card/favorite-place-card.tsx

@@ -0,0 +1,47 @@
+import {OfferShort} from '../../types/offers/offer-short.ts';
+import PremiumSign from '../premium-sign/premium-sign.tsx';
+import PlaceCardRating from '../place-card/place-card-rating.tsx';
+import PlaceCardTitle from '../place-card/place-card-title.tsx';
+import PlaceCardPrice from '../place-card/place-card-price.tsx';
+import FavoriteMarkButton from '../favorite-mark-button/favorite-mark-button.tsx';
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../const.ts';
+
+type FavoritePlaceCardProps = {
+  placeShortInfo: OfferShort;
+}
+
+function FavoritePlaceCard({ placeShortInfo } : FavoritePlaceCardProps) : JSX.Element {
+  const {
+    id,
+    type,
+    title,
+    price,
+    previewImage,
+    rating,
+    isFavorite,
+    isPremium} = placeShortInfo;
+
+  return (
+    <article key={id} className="favorites__card place-card">
+      <PremiumSign show={isPremium}/>
+      <div className="favorites__image-wrapper place-card__image-wrapper">
+        <Link to={`${AppRoute.Offer}/${id}`}>
+          <img className="place-card__image" src={previewImage} width="150" height="110"
+            alt="Place image"
+          />
+        </Link>
+      </div>
+      <div className="favorites__card-info place-card__info">
+        <div className="place-card__price-wrapper">
+          <PlaceCardPrice price={price}/>
+          <FavoriteMarkButton inFavorites={isFavorite}/>
+        </div>
+        <PlaceCardRating value={rating}/>
+        <PlaceCardTitle type={type} name={title} id={id}/>
+      </div>
+    </article>
+  );
+}
+
+export default FavoritePlaceCard;

src/components/favorites-list/favorites-list-element.tsx

@@ -0,0 +1,28 @@
+import {OffersShort} from '../../types/offers/offer-short.ts';
+import FavoritePlaceCard from '../favorite-place-card/favorite-place-card.tsx';
+
+type FavoritesListElementProps = {
+  favoritesAtCity: OffersShort;
+  cityName: string;
+}
+
+function FavoritesListElement({favoritesAtCity, cityName}: FavoritesListElementProps): JSX.Element {
+  return (
+    <li className="favorites__locations-items">
+      <div className="favorites__locations locations locations--current">
+        <div className="locations__item">
+          <a className="locations__item-link" href="#">
+            <span>{cityName}</span>
+          </a>
+        </div>
+      </div>
+      <div className="favorites__places">
+        {favoritesAtCity.map((offer) => (
+          <FavoritePlaceCard key={offer.id} placeShortInfo={offer}/>
+        ))}
+      </div>
+    </li>
+  );
+}
+
+export default FavoritesListElement;

src/components/favorites-list/favorites-list.tsx

@@ -0,0 +1,32 @@
+import {OffersShort} from '../../types/offers/offer-short.ts';
+import {AvailableCities} from '../../const.ts';
+import FavoritesListElement from './favorites-list-element.tsx';
+import {Fragment} from 'react';
+
+type FavoritesListProps = {
+  allFavorites: OffersShort;
+}
+
+function FavoritesList({ allFavorites } : FavoritesListProps) : JSX.Element {
+  const allAvailableCities = Object.keys(AvailableCities);
+  const cityFilteredFavorites =
+    allAvailableCities
+      .map((city) => (
+        {[city]: allFavorites.filter((card) => card.city.name === city)}
+      ))
+      .reduce((accumulator, value) => ({...accumulator, ...value}), {});
+
+
+  return (
+    <ul className="favorites__list">
+      {Object.keys(cityFilteredFavorites).map((city) => (
+        <Fragment key={city}>
+          {cityFilteredFavorites[city].length === 0 ? null :
+            <FavoritesListElement favoritesAtCity={cityFilteredFavorites[city]} cityName={city}/>}
+        </Fragment>
+      ))}
+    </ul>
+  );
+}
+
+export default FavoritesList;

src/components/header/header-navigation.tsx

@@ -1,14 +1,17 @@
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../const.ts';
+
 function HeaderNavigation(): JSX.Element {
   return (
     <nav className="header__nav">
       <ul className="header__nav-list">
         <li className="header__nav-item user">
-          <a className="header__nav-link header__nav-link--profile" href="#">
+          <Link className="header__nav-link header__nav-link--profile" to={AppRoute.Favourites}>
             <div className="header__avatar-wrapper user__avatar-wrapper">
             </div>
             <span className="header__user-name user__name">{'[email protected]'}</span>
             <span className="header__favorite-count">{3}</span>
-          </a>
+          </Link>
         </li>
         <li className="header__nav-item">
           <a className="header__nav-link" href="#">