diff --git a/src/components/app.tsx b/src/components/app.tsx
new file mode 100644
index 0000000..87c46b8
--- /dev/null
+++ b/src/components/app.tsx
@@ -0,0 +1,17 @@
+import MainPage from '../pages/main-page';
+import FavoritePage from '../pages/favorite-page';
+import OfferPage from '../pages/offer-page';
+import LoginPage from '../pages/login-page';
+
+type TAppProps = {
+ count: number;
+}
+
+export default function App({ count }: TAppProps) {
+ return (
+
+ //
+ //
+ //
+ );
+}
diff --git a/src/components/card.tsx b/src/components/card.tsx
new file mode 100644
index 0000000..c9f51bc
--- /dev/null
+++ b/src/components/card.tsx
@@ -0,0 +1,41 @@
+import Rating from './rating';
+type TCardProps = {
+ cardClass?: string;
+ cardPremium?: boolean;
+}
+
+export default function Card({ cardClass, cardPremium = false }: TCardProps) {
+ return (
+
+ {cardPremium ?
+
+ Premium
+
: ''}
+
+
+
+
+
+ €120
+ / night
+
+
+
+
+
+ To bookmarks
+
+
+
+
+
Apartment
+
+
+ );
+}
diff --git a/src/components/container.tsx b/src/components/container.tsx
new file mode 100644
index 0000000..b71b2d3
--- /dev/null
+++ b/src/components/container.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import Header from './header';
+
+type TContainerProps = {
+ children: ReactNode;
+ pageClass?: string;
+ mainClass?: string;
+ navigation?: boolean;
+}
+
+export default function Container({ children, pageClass, mainClass, navigation }: TContainerProps) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/components/favorite-items.tsx b/src/components/favorite-items.tsx
new file mode 100644
index 0000000..36617eb
--- /dev/null
+++ b/src/components/favorite-items.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+type TFavoriteItemsProps = {
+ children: ReactNode;
+}
+export default function FavoriteItems({ children }: TFavoriteItemsProps) {
+ return (
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..5feee06
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,41 @@
+type THeaderProps = {
+ navigation: boolean;
+}
+
+export default function Header({ navigation }: THeaderProps) {
+ return (
+
+
+
+
+ {navigation ?
+ (
+
+
+
+ ) : ''}
+
+
+
+ );
+}
+
+
diff --git a/src/components/offer-inside.tsx b/src/components/offer-inside.tsx
new file mode 100644
index 0000000..ff92066
--- /dev/null
+++ b/src/components/offer-inside.tsx
@@ -0,0 +1,11 @@
+type TOfferInside = {
+ textOffer: string;
+}
+
+export default function OfferInside({ textOffer }: TOfferInside) {
+ return (
+
+ {textOffer}
+
+ );
+}
diff --git a/src/components/rating.tsx b/src/components/rating.tsx
new file mode 100644
index 0000000..75057f0
--- /dev/null
+++ b/src/components/rating.tsx
@@ -0,0 +1,17 @@
+type TRating = {
+ ratingClass: string;
+ isRatingValue?: boolean;
+}
+
+export default function Rating({ ratingClass, isRatingValue }: TRating) {
+ return (
+
+
+
+ Rating
+
+ {isRatingValue ?
+
4.8 : ''}
+
+ );
+}
diff --git a/src/index.tsx b/src/index.tsx
index be81a6e..8cecd79 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
+import App from './components/app';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
@@ -7,6 +8,6 @@ const root = ReactDOM.createRoot(
root.render(
- Hello, World!
+
);
diff --git a/src/pages/favorite-page.tsx b/src/pages/favorite-page.tsx
new file mode 100644
index 0000000..e4baf96
--- /dev/null
+++ b/src/pages/favorite-page.tsx
@@ -0,0 +1,30 @@
+import Container from '../components/container';
+import Card from '../components/card';
+import FavoriteItems from '../components/favorite-items';
+
+export default function FavoritePage() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/login-page.tsx b/src/pages/login-page.tsx
new file mode 100644
index 0000000..1f3a1cd
--- /dev/null
+++ b/src/pages/login-page.tsx
@@ -0,0 +1,31 @@
+import Container from '../components/container';
+
+export default function LoginPage() {
+ return (
+
+
+
+ )
+}
diff --git a/src/pages/main-page.tsx b/src/pages/main-page.tsx
new file mode 100644
index 0000000..54e931f
--- /dev/null
+++ b/src/pages/main-page.tsx
@@ -0,0 +1,83 @@
+import Container from '../components/container';
+import Card from '../components/card';
+
+type TMainPageProps = {
+ count: number;
+}
+
+export default function MainPage({ count }: TMainPageProps) {
+ return (
+
+ Cities
+
+
+
+
+ Places
+ {count} places to stay in Amsterdam
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/offer-page.tsx b/src/pages/offer-page.tsx
new file mode 100644
index 0000000..ab2465b
--- /dev/null
+++ b/src/pages/offer-page.tsx
@@ -0,0 +1,185 @@
+import Container from '../components/container';
+import Card from '../components/card';
+import OfferInside from '../components/offer-inside';
+import Rating from '../components/rating';
+
+export default function OfferPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Premium
+
+
+
+ Beautiful & luxurious studio at great location
+
+
+
+
+
+ To bookmarks
+
+
+
+
+
+ Apartment
+
+
+ 3 Bedrooms
+
+
+ Max 4 adults
+
+
+
+ €120
+ night
+
+
+
+
Meet the host
+
+
+
+
+
+ Angelina
+
+
+ Pro
+
+
+
+
+ A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+
+
+ An independent House, strategically located between Rembrand Square and National Opera, but where the bustle of the city comes to rest in this alley flowery and colorful.
+
+
+
+
+ Reviews · 1
+
+
+
+
+
+
+
+ Max
+
+
+
+
+
+ A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+
+
April 2019
+
+
+
+
+
+
+
+
+
+
+
+ Other places in the neighbourhood
+
+
+
+
+
+
+
+
+
+ );
+}