diff --git a/.gitignore b/.gitignore
index 4d29575..773c5ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+todo.txt
diff --git a/README.md b/README.md
index d6e792a..28fa9ba 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,17 @@
 # Космическая бургерная
 
+## Начальный коммит
 Стартовый коммит проекта с помощью [CRA](https://create-react-app.dev/docs/getting-started) с добавленными UI компонентами от [Яндекс](https://github.com/Yandex-Practicum/react-developer-burger-ui-components).   
 Кода пока никакого не написано, это начальный коммит.
+
+## Спринт1
+### Шаг1
+Создали папку [src/components](src/components/), поместили туда app.js и 3 компонента: AppHeader, BurgerContructor и BurgerIngredients.   
+Данные с бургерами поместили в файл [src/utils/data.js](src/utils/data.js).  
+Делаем начальную верстку главной страницы приложения.
+```
+git checkout sprint1/step1
+```
+
+Обсуждение [замечаний](https://github.com/miptleha/react-burger/pull/1) от ревьювера.   
+Замечания были исправлены, было предложено продолжить оставшуюся верстку в sprint1/step2
diff --git a/package-lock.json b/package-lock.json
index 67c9ecc..fc47a24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.10",
         "@ya.praktikum/react-developer-burger-ui-components": "^1.14.0",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
diff --git a/package.json b/package.json
index b2eb401..b6a3c70 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@ya.praktikum/react-developer-burger-ui-components": "^1.14.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..4548be0 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index aa069f2..26b3475 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,9 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Космическая бургерная</title>
   </head>
-  <body>
+  <body class="body">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index 2a68616..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index a53698a..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/components/app-header/app-header.jsx b/src/components/app-header/app-header.jsx
new file mode 100644
index 0000000..686e2ab
--- /dev/null
+++ b/src/components/app-header/app-header.jsx
@@ -0,0 +1,28 @@
+import styles from './app-header.module.css';
+import { Logo, BurgerIcon, ListIcon, ProfileIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+import IconLink from '../icon-link/icon-link';
+
+function AppHeader() {
+    return (
+        <header className={`${styles.header} pt-4 pb-4`}>
+            <div className={styles.container}>
+                <nav className={styles.left}>
+                    <ul className={styles.list}>
+                        <li><IconLink href="/" icon={BurgerIcon} isActive>Конструктор</IconLink></li>
+                        <li><IconLink href="/" icon={ListIcon}>Лента заказов</IconLink></li>
+                    </ul>
+                </nav>
+
+                <div className={styles.center}>
+                    <Logo />
+                </div>
+
+                <div className={styles.right}>
+                    <IconLink href="/" icon={ProfileIcon}>Личный кабинет</IconLink>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default AppHeader;
\ No newline at end of file
diff --git a/src/components/app-header/app-header.module.css b/src/components/app-header/app-header.module.css
new file mode 100644
index 0000000..60b998a
--- /dev/null
+++ b/src/components/app-header/app-header.module.css
@@ -0,0 +1,32 @@
+.header {
+    background: var(--background);
+}
+
+.container {
+    display: flex;
+    width: var(--width-outer);
+    margin: 0 auto;
+}
+
+.center {
+    flex: 0 0 content;
+}
+
+.left {
+    flex: 1 0 100px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.right {
+    flex: 1 0 100px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    list-style: none;
+}
diff --git a/src/components/app/app.jsx b/src/components/app/app.jsx
new file mode 100644
index 0000000..a627a3d
--- /dev/null
+++ b/src/components/app/app.jsx
@@ -0,0 +1,21 @@
+import styles from './app.module.css';
+import { data } from '../../utils/data';
+import AppHeader from '../app-header/app-header';
+import BurgerConstructor from '../burger-constructor/burger-constructor';
+import BurgerIngredients from '../burger-ingredients/burger-ingredients';
+
+function App() {
+        return (
+            <>
+                <AppHeader/>
+                <main className={styles.main}>
+                    <div className={styles.inner}>
+                        <BurgerIngredients data={data}/>
+                        <BurgerConstructor data={data}/>
+                    </div>
+                </main>
+            </>
+        );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/components/app/app.module.css b/src/components/app/app.module.css
new file mode 100644
index 0000000..176d814
--- /dev/null
+++ b/src/components/app/app.module.css
@@ -0,0 +1,12 @@
+.main {
+    margin: 0 auto;
+    width: var(--width-outer);
+}
+
+.inner {
+    margin-right: 20px;
+    margin-left: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
diff --git a/src/components/burger-constructor/burger-constructor.jsx b/src/components/burger-constructor/burger-constructor.jsx
new file mode 100644
index 0000000..004afac
--- /dev/null
+++ b/src/components/burger-constructor/burger-constructor.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './burger-constructor.module.css';
+import { dataPropTypes } from '../../utils/dataPropTypes';
+import { BUN } from '../../utils/dataNames';
+import { Button, ConstructorElement, CurrencyIcon, DragIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+
+
+function BurgerConstructor({ data }) {
+    const list = React.useMemo(() => data.filter(item => item.type !== BUN), [data]);
+    const bun = React.useMemo(() => data.find(item => item.type === BUN), [data]);
+    const sum = React.useMemo(() => bun.price * 2 + list.reduce((sum, item) => sum += item.price, 0), [list, bun]);
+
+    return (
+        <section className={styles.section}>
+            <div className={`${styles.burger} mt-25 ml-4`}>
+                <ConstructorElement
+                    type="top"
+                    isLocked={true}
+                    text={`${bun.name} (верх)`}
+                    price={bun.price}
+                    thumbnail={bun.image}
+                    extraClass={`${styles.ingredient} ml-8`}
+                />
+                <ul className={`${styles.scroll} mt-4 mb-4`}>
+                    {list.map((item, index) => (
+                        <li className={`${styles['list-item']} mt-4`} key={index}>
+                            <span className={styles.draggable}><DragIcon type="primary" /></span>
+                            <ConstructorElement
+                                text={item.name}
+                                price={item.price}
+                                thumbnail={item.image}
+                                extraClass={`${styles.ingredient} ml-2`}
+                            />
+                        </li>
+                    ))}
+                </ul>
+                <ConstructorElement
+                    type="bottom"
+                    isLocked={true}
+                    text={`${bun.name} (низ)`}
+                    price={bun.price}
+                    thumbnail={bun.image}
+                    extraClass={`${styles.ingredient} ml-8`}
+                />
+            </div>
+
+            <div className={`${styles.total} mr-4 mt-10`}>
+                <div className="text text_type_digits-medium mr-2 mb-1">{sum}</div>
+                <div className={`${styles['total-icon']} mr-10`}><CurrencyIcon type="primary" /></div>
+                <Button htmlType="button" type="primary">Оформить заказ</Button>
+            </div>
+        </section>
+    );
+}
+
+BurgerConstructor.propTypes = {
+    data: PropTypes.arrayOf(dataPropTypes.isRequired).isRequired
+}
+
+export default BurgerConstructor;
\ No newline at end of file
diff --git a/src/components/burger-constructor/burger-constructor.module.css b/src/components/burger-constructor/burger-constructor.module.css
new file mode 100644
index 0000000..8aca4e5
--- /dev/null
+++ b/src/components/burger-constructor/burger-constructor.module.css
@@ -0,0 +1,83 @@
+.section {
+    flex: 0 0 600px;
+}
+
+.scroll {
+    overflow-y: auto;
+    max-height: 464px;
+    scrollbar-width: thin;
+    scrollbar-color: #8585AD #2F2F37;
+    padding: 0;
+    list-style: none;
+}
+
+.scroll::-webkit-scrollbar {
+    background-color: #2F2F37;
+    width: 8px;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    background-color: #8585AD;
+}
+
+.scroll > :first-child {
+    margin-top: 0;
+}
+
+@media (max-height: 950px) {
+    .scroll {
+        max-height: 370px;
+    }
+}
+
+@media (max-height: 850px) {
+    .scroll {
+        max-height: 270px;
+    }
+}
+
+@media (max-height: 750px) {
+    .scroll {
+        max-height: 175px;
+    }
+}
+
+.burger {
+    padding: 0;
+}
+
+@media (max-height: 650px) {
+    .burger {
+        margin-top: 30px;
+    }
+
+    .total {
+        margin-top: 16px;
+    }
+}
+
+.list-item {
+    display: flex;
+    align-items: center;
+}
+
+.ingredient {
+    background: var(--background);
+}
+
+.draggable {
+    cursor: grabbing;
+}
+
+.total {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.total-icon {
+    transform: scale(1.5);
+    transform-origin: top left;
+    width: 36px;
+    height: 32px;
+}
diff --git a/src/components/burger-ingredients-item/burger-ingredients-item.jsx b/src/components/burger-ingredients-item/burger-ingredients-item.jsx
new file mode 100644
index 0000000..4cc081a
--- /dev/null
+++ b/src/components/burger-ingredients-item/burger-ingredients-item.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import styles from './burger-ingredients-item.module.css';
+import { CurrencyIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+
+function BurgerIngredientItem({ img, title, price }) {
+    return (
+        <li className={`${styles.card} mt-6 mb-8 ml-3 mr-2`}>
+            <img className={`${styles['card-image']} ml-4 mr-4 mb-1`} src={img} alt={title} />
+            <div className={`${styles['card-price']} mb-1`}>
+                <span className="text text_type_digits-default mr-2">{price}</span>
+                <CurrencyIcon type="primary" />
+            </div>
+            <div className={`${styles['card-title']} text text_type_main-default`}>{title}</div>
+        </li>
+    );
+}
+
+BurgerIngredientItem.propTypes = {
+    img: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired
+}
+
+export default BurgerIngredientItem;
\ No newline at end of file
diff --git a/src/components/burger-ingredients-item/burger-ingredients-item.module.css b/src/components/burger-ingredients-item/burger-ingredients-item.module.css
new file mode 100644
index 0000000..f94b2ef
--- /dev/null
+++ b/src/components/burger-ingredients-item/burger-ingredients-item.module.css
@@ -0,0 +1,20 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    width: 272px;
+}
+
+.card-image {
+    width: 240px;
+    height: 120px;
+}
+
+.card-price {
+    display: flex;
+    justify-content: center;
+}
+
+.card-title {
+    height: 48px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/burger-ingredients-tabs/burger-ingredients-tabs.jsx b/src/components/burger-ingredients-tabs/burger-ingredients-tabs.jsx
new file mode 100644
index 0000000..cb4cfec
--- /dev/null
+++ b/src/components/burger-ingredients-tabs/burger-ingredients-tabs.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './burger-ingredients-tabs.module.css';
+import { BUN, SAUCE, MAIN, names } from '../../utils/dataNames';
+import { Tab } from '@ya.praktikum/react-developer-burger-ui-components';
+
+function BurgerIngredientsTabs({ tabChange }) {
+    const [tab, setTab] = React.useState(BUN);
+
+    function change(type) {
+        setTab(type);
+        tabChange(type);
+    }
+
+    return (
+        <div className={`${styles.tabs} mb-8`}>
+            <Tab value={BUN} active={tab === BUN} onClick={change}>{names[BUN]}</Tab>
+            <Tab value={SAUCE} active={tab === SAUCE} onClick={change}>{names[SAUCE]}</Tab>
+            <Tab value={MAIN} active={tab === MAIN} onClick={change}>{names[MAIN]}</Tab>
+        </div>
+    );
+}
+
+BurgerIngredientsTabs.propTypes = {
+    tabChange: PropTypes.func.isRequired
+};
+
+export default BurgerIngredientsTabs;
\ No newline at end of file
diff --git a/src/components/burger-ingredients-tabs/burger-ingredients-tabs.module.css b/src/components/burger-ingredients-tabs/burger-ingredients-tabs.module.css
new file mode 100644
index 0000000..aa2f05a
--- /dev/null
+++ b/src/components/burger-ingredients-tabs/burger-ingredients-tabs.module.css
@@ -0,0 +1,3 @@
+.tabs {
+    display: flex;
+}
\ No newline at end of file
diff --git a/src/components/burger-ingredients/burger-ingredients.jsx b/src/components/burger-ingredients/burger-ingredients.jsx
new file mode 100644
index 0000000..5f6a678
--- /dev/null
+++ b/src/components/burger-ingredients/burger-ingredients.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './burger-ingredients.module.css';
+import { BUN, SAUCE, MAIN, names } from '../../utils/dataNames';
+import { dataPropTypes } from '../../utils/dataPropTypes';
+import BurgerIngredientsTabs from '../burger-ingredients-tabs/burger-ingredients-tabs';
+import BurgerIngredientsItem from '../burger-ingredients-item/burger-ingredients-item';
+
+function BurgerIngredients({ data }) {
+    const groups = React.useMemo(() => {
+        let res = {};
+        res[BUN] = data.filter(i => i.type === BUN);
+        res[SAUCE] = data.filter(i => i.type === SAUCE);
+        res[MAIN] = data.filter(i => i.type === MAIN);
+        return res;
+    }, [data]);
+    
+    const headers = {};
+    headers[BUN] = React.useRef(null);
+    headers[SAUCE] = React.useRef(null);
+    headers[MAIN] = React.useRef(null);
+
+    function tabChange(value) {
+        headers[value].current.scrollIntoView({ behavior: "smooth" });
+    }
+
+    return (
+        <section className={styles.section}>
+            <h1 className="text text_type_main-large mt-10 mb-5">Соберите бургер</h1>
+            <BurgerIngredientsTabs tabChange={tabChange} />
+
+            <div className={styles.list}>
+                {[BUN, SAUCE, MAIN].map((type, typeIndex) => (
+                    <div key={typeIndex}>
+                        <h2 className="text text_type_main-medium mt-2" ref={headers[type]}>{names[type]}</h2>
+                        <ul className={styles['group-content']}>
+                            {groups[type].map((item, index) => (
+                                <BurgerIngredientsItem title={item.name} price={item.price} img={item.image} key={type + index}/>
+                            ))}
+                        </ul>
+                    </div> 
+                ))}
+            </div>
+        </section>
+    );
+}
+
+BurgerIngredients.propTypes = {
+    data: PropTypes.arrayOf(dataPropTypes.isRequired).isRequired
+}
+
+export default BurgerIngredients;
\ No newline at end of file
diff --git a/src/components/burger-ingredients/burger-ingredients.module.css b/src/components/burger-ingredients/burger-ingredients.module.css
new file mode 100644
index 0000000..bdc10fe
--- /dev/null
+++ b/src/components/burger-ingredients/burger-ingredients.module.css
@@ -0,0 +1,56 @@
+.section {
+    flex: 0 0 600px;
+}
+
+.list {
+    overflow-y: auto;
+    max-height: 660px;
+    scrollbar-color: #8585AD #2F2F37;
+	scrollbar-width: thin;
+}
+
+.list::-webkit-scrollbar {
+    background-color: #2F2F37;
+    width: 8px;
+}
+
+.list::-webkit-scrollbar-thumb {
+    background-color: #8585AD;
+}
+
+@media (max-height: 950px) {
+    .list {
+        max-height: 560px;
+    }
+}
+
+@media (max-height: 850px) {
+    .list {
+        max-height: 460px;
+    }
+}
+
+@media (max-height: 750px) {
+    .list {
+        max-height: 360px;
+    }
+}
+
+@media (max-height: 650px) {
+    .list {
+        max-height: 260px;
+    }    
+}
+
+.list :last-child {
+    margin-bottom: 0;
+}
+
+
+.group-content {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/src/components/icon-link/icon-link.jsx b/src/components/icon-link/icon-link.jsx
new file mode 100644
index 0000000..8619439
--- /dev/null
+++ b/src/components/icon-link/icon-link.jsx
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import styles from './icon-link.module.css';
+
+function IconLink({ isActive, icon: Icon, children, href }) {
+    return (
+        <a href={href} className={`${styles.link} pt-4 pb-4 pr-5 pl-5`}>
+            <Icon type={isActive ? "primary" : "secondary"} />
+            <span className={`text text_type_main-default ml-2 ${isActive ? "text_color_primary" : "text_color_inactive"}`}>
+                {children}
+            </span>
+        </a>
+    )
+}
+
+IconLink.propTypes = {
+    isActive: PropTypes.bool,
+    icon: PropTypes.elementType.isRequired,
+    children: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired
+};
+
+export default IconLink;
\ No newline at end of file
diff --git a/src/components/icon-link/icon-link.module.css b/src/components/icon-link/icon-link.module.css
new file mode 100644
index 0000000..c7a7d98
--- /dev/null
+++ b/src/components/icon-link/icon-link.module.css
@@ -0,0 +1,10 @@
+.link {
+    display: flex;
+    border-radius: var(--common-border-radius-s);
+    text-decoration: none;
+    transition: var(--common-transition);
+}
+
+.link:hover {
+    background: var(--background-element);
+}
diff --git a/src/index.css b/src/index.css
index ec2585e..1d76e7d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+:root {
+    --width-outer: 1280px;
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 032464f..814193c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './components/app/app';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/utils/data.js b/src/utils/data.js
new file mode 100644
index 0000000..e56ff61
--- /dev/null
+++ b/src/utils/data.js
@@ -0,0 +1,212 @@
+export const data = [
+    {
+        "_id": "60666c42cc7b410027a1a9b1",
+        "name": "Краторная булка N-200i",
+        "type": "bun",
+        "proteins": 80,
+        "fat": 24,
+        "carbohydrates": 53,
+        "calories": 420,
+        "price": 1255,
+        "image": "https://code.s3.yandex.net/react/code/bun-02.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/bun-02-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/bun-02-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b5",
+        "name": "Говяжий метеорит (отбивная)",
+        "type": "main",
+        "proteins": 800,
+        "fat": 800,
+        "carbohydrates": 300,
+        "calories": 2674,
+        "price": 3000,
+        "image": "https://code.s3.yandex.net/react/code/meat-04.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/meat-04-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/meat-04-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b6",
+        "name": "Биокотлета из марсианской Магнолии",
+        "type": "main",
+        "proteins": 420,
+        "fat": 142,
+        "carbohydrates": 242,
+        "calories": 4242,
+        "price": 424,
+        "image": "https://code.s3.yandex.net/react/code/meat-01.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/meat-01-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/meat-01-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b7",
+        "name": "Соус Spicy-X",
+        "type": "sauce",
+        "proteins": 30,
+        "fat": 20,
+        "carbohydrates": 40,
+        "calories": 30,
+        "price": 90,
+        "image": "https://code.s3.yandex.net/react/code/sauce-02.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/sauce-02-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/sauce-02-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b4",
+        "name": "Мясо бессмертных моллюсков Protostomia",
+        "type": "main",
+        "proteins": 433,
+        "fat": 244,
+        "carbohydrates": 33,
+        "calories": 420,
+        "price": 1337,
+        "image": "https://code.s3.yandex.net/react/code/meat-02.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/meat-02-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/meat-02-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b9",
+        "name": "Соус традиционный галактический",
+        "type": "sauce",
+        "proteins": 42,
+        "fat": 24,
+        "carbohydrates": 42,
+        "calories": 99,
+        "price": 15,
+        "image": "https://code.s3.yandex.net/react/code/sauce-03.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/sauce-03-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/sauce-03-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b8",
+        "name": "Соус фирменный Space Sauce",
+        "type": "sauce",
+        "proteins": 50,
+        "fat": 22,
+        "carbohydrates": 11,
+        "calories": 14,
+        "price": 80,
+        "image": "https://code.s3.yandex.net/react/code/sauce-04.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/sauce-04-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/sauce-04-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9bc",
+        "name": "Плоды Фалленианского дерева",
+        "type": "main",
+        "proteins": 20,
+        "fat": 5,
+        "carbohydrates": 55,
+        "calories": 77,
+        "price": 874,
+        "image": "https://code.s3.yandex.net/react/code/sp_1.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/sp_1-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/sp_1-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9bb",
+        "name": "Хрустящие минеральные кольца",
+        "type": "main",
+        "proteins": 808,
+        "fat": 689,
+        "carbohydrates": 609,
+        "calories": 986,
+        "price": 300,
+        "image": "https://code.s3.yandex.net/react/code/mineral_rings.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/mineral_rings-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/mineral_rings-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9ba",
+        "name": "Соус с шипами Антарианского плоскоходца",
+        "type": "sauce",
+        "proteins": 101,
+        "fat": 99,
+        "carbohydrates": 100,
+        "calories": 100,
+        "price": 88,
+        "image": "https://code.s3.yandex.net/react/code/sauce-01.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/sauce-01-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/sauce-01-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9bd",
+        "name": "Кристаллы марсианских альфа-сахаридов",
+        "type": "main",
+        "proteins": 234,
+        "fat": 432,
+        "carbohydrates": 111,
+        "calories": 189,
+        "price": 762,
+        "image": "https://code.s3.yandex.net/react/code/core.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/core-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/core-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9be",
+        "name": "Мини-салат Экзо-Плантаго",
+        "type": "main",
+        "proteins": 1,
+        "fat": 2,
+        "carbohydrates": 3,
+        "calories": 6,
+        "price": 4400,
+        "image": "https://code.s3.yandex.net/react/code/salad.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/salad-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/salad-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b3",
+        "name": "Филе Люминесцентного тетраодонтимформа",
+        "type": "main",
+        "proteins": 44,
+        "fat": 26,
+        "carbohydrates": 85,
+        "calories": 643,
+        "price": 988,
+        "image": "https://code.s3.yandex.net/react/code/meat-03.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/meat-03-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/meat-03-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9bf",
+        "name": "Сыр с астероидной плесенью",
+        "type": "main",
+        "proteins": 84,
+        "fat": 48,
+        "carbohydrates": 420,
+        "calories": 3377,
+        "price": 4142,
+        "image": "https://code.s3.yandex.net/react/code/cheese.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/cheese-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/cheese-large.png",
+        "__v": 0
+    },
+    {
+        "_id": "60666c42cc7b410027a1a9b2",
+        "name": "Флюоресцентная булка R2-D3",
+        "type": "bun",
+        "proteins": 44,
+        "fat": 26,
+        "carbohydrates": 85,
+        "calories": 643,
+        "price": 988,
+        "image": "https://code.s3.yandex.net/react/code/bun-01.png",
+        "image_mobile": "https://code.s3.yandex.net/react/code/bun-01-mobile.png",
+        "image_large": "https://code.s3.yandex.net/react/code/bun-01-large.png",
+        "__v": 0
+    }
+];
\ No newline at end of file
diff --git a/src/utils/dataNames.js b/src/utils/dataNames.js
new file mode 100644
index 0000000..220a3c8
--- /dev/null
+++ b/src/utils/dataNames.js
@@ -0,0 +1,8 @@
+export const BUN = "bun";
+export const SAUCE = "sauce";
+export const MAIN = "main";
+
+export const names = {};
+names[BUN] = "Булки";
+names[SAUCE] = "Соусы";
+names[MAIN] = "Начинки";
\ No newline at end of file
diff --git a/src/utils/dataPropTypes.js b/src/utils/dataPropTypes.js
new file mode 100644
index 0000000..5d9298f
--- /dev/null
+++ b/src/utils/dataPropTypes.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+
+export const dataPropTypes = PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    proteins: PropTypes.number.isRequired,
+    fat: PropTypes.number.isRequired,
+    carbohydrates: PropTypes.number.isRequired,
+    calories: PropTypes.number.isRequired,
+    price: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
+    image_mobile: PropTypes.string.isRequired,
+    image_large: PropTypes.string.isRequired,
+    __v: PropTypes.number.isRequired
+});
