diff --git a/public/img/svg/books/1/f7_exclamationmark.svg b/public/img/svg/books/1/f7_exclamationmark.svg
new file mode 100644
index 0000000..368d1e0
--- /dev/null
+++ b/public/img/svg/books/1/f7_exclamationmark.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.0104 33.4059C26.1254 33.4059 26.9047 32.6698 26.9253 31.5332L27.1139 7.02002C27.1139 5.82058 26.1254 5 24.9888 5C23.8738 5 22.8853 5.82058 22.8853 7.02002L23.116 31.5332C23.1376 32.6698 23.9151 33.4059 25.0104 33.4059ZM24.9888 44.9999C25.3829 45.0025 25.7737 44.9272 26.1385 44.7782C26.5034 44.6293 26.8353 44.4096 27.1149 44.1319C27.3946 43.8543 27.6166 43.524 27.7682 43.1602C27.9198 42.7964 27.998 42.4062 27.9982 42.0121C27.9982 40.3503 26.6722 39.0243 24.9888 39.0243C24.5964 39.024 24.2077 39.1012 23.8451 39.2512C23.4825 39.4013 23.1531 39.6214 22.8756 39.8989C22.5981 40.1764 22.378 40.5058 22.2279 40.8684C22.0779 41.231 22.0007 41.6197 22.001 42.0121C22.0038 42.8037 22.3195 43.562 22.8792 44.1217C23.4389 44.6814 24.1973 44.9971 24.9888 44.9999Z" fill="#E51E7D"/>
+</svg>
diff --git a/public/img/svg/books/1/lucide_star.svg b/public/img/svg/books/1/lucide_star.svg
new file mode 100644
index 0000000..21725cb
--- /dev/null
+++ b/public/img/svg/books/1/lucide_star.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.1466 8.36767C24.2254 8.20832 24.3473 8.07418 24.4983 7.98039C24.6494 7.88661 24.8237 7.83691 25.0015 7.83691C25.1793 7.83691 25.3535 7.88661 25.5046 7.98039C25.6557 8.07418 25.7775 8.20832 25.8564 8.36767L30.014 16.789C30.2875 17.3436 30.6917 17.8234 31.1918 18.1871C31.6919 18.5508 32.2728 18.7875 32.8847 18.8768L42.1826 20.2375C42.3588 20.263 42.5243 20.3373 42.6604 20.452C42.7966 20.5667 42.8979 20.7172 42.9529 20.8865C43.008 21.0558 43.0146 21.2371 42.972 21.41C42.9293 21.5828 42.8392 21.7403 42.7117 21.8645L35.9876 28.4123C35.5438 28.8442 35.2117 29.3776 35.0201 29.9665C34.8285 30.5553 34.7831 31.182 34.8879 31.7924L36.4753 41.0435C36.5064 41.2195 36.4874 41.4008 36.4204 41.5666C36.3535 41.7324 36.2412 41.8761 36.0966 41.9812C35.9519 42.0862 35.7806 42.1485 35.6022 42.161C35.4238 42.1734 35.2455 42.1354 35.0877 42.0514L26.7761 37.6814C26.2285 37.3935 25.6192 37.2431 25.0006 37.2431C24.3819 37.2431 23.7726 37.3935 23.225 37.6814L14.9153 42.0514C14.7575 42.1349 14.5794 42.1725 14.4013 42.1598C14.2232 42.1471 14.0523 42.0848 13.9079 41.9798C13.7635 41.8747 13.6515 41.7313 13.5846 41.5658C13.5177 41.4003 13.4985 41.2193 13.5294 41.0435L15.115 31.7942C15.2201 31.1835 15.1749 30.5565 14.9833 29.9673C14.7917 29.3781 14.4595 28.8444 14.0153 28.4123L7.29121 21.8663C7.16269 21.7422 7.07162 21.5845 7.02837 21.4111C6.98512 21.2378 6.99143 21.0557 7.04658 20.8858C7.10173 20.7158 7.2035 20.5648 7.3403 20.4498C7.47711 20.3349 7.64344 20.2607 7.82036 20.2357L17.1164 18.8768C17.7289 18.788 18.3107 18.5516 18.8114 18.1879C19.3122 17.8241 19.7169 17.3441 19.9908 16.789L24.1466 8.36767Z" stroke="#E51E7D" stroke-width="3.90819" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/svg/books/1/mdi_heart-outline.svg b/public/img/svg/books/1/mdi_heart-outline.svg
new file mode 100644
index 0000000..b92bbe4
--- /dev/null
+++ b/public/img/svg/books/1/mdi_heart-outline.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.18 36.4754L25 36.6554L24.802 36.4754C16.252 28.7174 10.6 23.5874 10.6 18.3854C10.6 14.7854 13.3 12.0854 16.9 12.0854C19.672 12.0854 22.372 13.8854 23.326 16.3334H26.674C27.628 13.8854 30.328 12.0854 33.1 12.0854C36.7 12.0854 39.4 14.7854 39.4 18.3854C39.4 23.5874 33.748 28.7174 25.18 36.4754ZM33.1 8.48535C29.968 8.48535 26.962 9.94335 25 12.2294C23.038 9.94335 20.032 8.48535 16.9 8.48535C11.356 8.48535 7 12.8234 7 18.3854C7 25.1714 13.12 30.7334 22.39 39.1394L25 41.5154L27.61 39.1394C36.88 30.7334 43 25.1714 43 18.3854C43 12.8234 38.644 8.48535 33.1 8.48535Z" fill="#E51E7D"/>
+</svg>
diff --git a/public/img/svg/books/1/meteor-icons_message.svg b/public/img/svg/books/1/meteor-icons_message.svg
new file mode 100644
index 0000000..b10f823
--- /dev/null
+++ b/public/img/svg/books/1/meteor-icons_message.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.625 29.875C39.625 30.737 39.2826 31.5636 38.6731 32.1731C38.0636 32.7826 37.237 33.125 36.375 33.125H16.875L10.375 39.625V13.625C10.375 12.763 10.7174 11.9364 11.3269 11.3269C11.9364 10.7174 12.763 10.375 13.625 10.375H36.375C37.237 10.375 38.0636 10.7174 38.6731 11.3269C39.2826 11.9364 39.625 12.763 39.625 13.625V29.875Z" stroke="#E51E7D" stroke-width="3.52857" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/svg/books/1/stash_target.svg b/public/img/svg/books/1/stash_target.svg
new file mode 100644
index 0000000..7d854fc
--- /dev/null
+++ b/public/img/svg/books/1/stash_target.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 9.89927C22.5261 9.89819 20.0898 10.5048 17.9052 11.6657C15.7207 12.8267 13.8547 14.5065 12.4713 16.5574C11.088 18.6084 10.2296 20.9678 9.97157 23.4282C9.71356 25.8886 10.0638 28.3747 10.9916 30.668C11.0759 30.8595 11.1208 31.0659 11.1238 31.275C11.1267 31.4842 11.0877 31.6918 11.0089 31.8856C10.9302 32.0793 10.8133 32.2553 10.6653 32.4031C10.5172 32.5509 10.341 32.6674 10.1471 32.7458C9.9532 32.8242 9.74552 32.8629 9.53638 32.8595C9.32724 32.8562 9.1209 32.8109 8.9296 32.7263C8.7383 32.6417 8.56593 32.5196 8.4227 32.3671C8.27948 32.2147 8.16832 32.0351 8.09581 31.8389C6.51986 27.9412 6.33956 23.6187 7.58547 19.6034C8.83138 15.588 11.4269 12.1268 14.9324 9.80587C18.4379 7.48496 22.6378 6.44706 26.8209 6.86799C31.004 7.28892 34.9129 9.14279 37.8857 12.1156C40.8585 15.0884 42.7124 18.9974 43.1333 23.1804C43.5543 27.3635 42.5164 31.5635 40.1955 35.0689C37.8746 38.5744 34.4133 41.17 30.398 42.4159C26.3827 43.6618 22.0601 43.4815 18.1625 41.9055C17.7867 41.7443 17.4891 41.4423 17.3335 41.0641C17.1779 40.686 17.1767 40.2619 17.3302 39.883C17.4837 39.504 17.7796 39.2003 18.1545 39.037C18.5294 38.8737 18.9534 38.8639 19.3354 39.0097C21.4006 39.8433 23.6246 40.2098 25.8481 40.0831C28.0716 39.9564 30.2396 39.3396 32.1968 38.2767C34.1539 37.2139 35.8518 35.7314 37.1689 33.9355C38.4859 32.1395 39.3895 30.0745 39.8148 27.8884C40.2402 25.7023 40.1769 23.4492 39.6294 21.2904C39.082 19.1317 38.0639 17.1207 36.648 15.4015C35.2322 13.6823 33.4538 12.2975 31.44 11.3463C29.4263 10.3951 27.2271 9.90092 25 9.89927Z" fill="#E51E7D"/>
+<path d="M13.021 25.002C13.021 27.7458 13.9439 30.2749 15.496 32.2958L14.5189 33.2728L14.4585 33.3353H12.021C11.1925 33.3361 10.3982 33.6658 9.81269 34.252L6.40227 37.6624C6.18403 37.8809 6.03544 38.1592 5.97526 38.4621C5.91509 38.7651 5.94603 39.079 6.06417 39.3644C6.18232 39.6497 6.38238 39.8936 6.63908 40.0653C6.89578 40.237 7.19761 40.3288 7.50644 40.3291H9.67311V42.4958C9.67338 42.8046 9.76516 43.1064 9.93687 43.3631C10.1086 43.6198 10.3525 43.8199 10.6378 43.938C10.9232 44.0562 11.2371 44.0871 11.5401 44.0269C11.843 43.9668 12.1213 43.8182 12.3398 43.5999L15.7502 40.1874C16.3359 39.6024 16.6656 38.809 16.6669 37.9812V35.5437L16.7294 35.4833L17.7064 34.5083C19.8515 36.1547 22.4906 37.027 25.1943 36.9831C27.8981 36.9393 30.5075 35.982 32.5981 34.2669C34.6887 32.5518 36.1375 30.1798 36.7089 27.5368C37.2803 24.8937 36.9406 22.1351 35.7451 19.7096C34.5496 17.2841 32.5687 15.3344 30.1245 14.1777C27.6803 13.021 24.9166 12.7253 22.283 13.3386C19.6494 13.952 17.3007 15.4384 15.6191 17.556C13.9375 19.6736 13.0218 22.2979 13.021 25.002ZM25.0002 16.1478C26.3897 16.1482 27.7595 16.4756 28.999 17.1036C30.2385 17.7315 31.3128 18.6423 32.1351 19.7624C32.9573 20.8825 33.5045 22.1803 33.7322 23.551C33.9599 24.9217 33.8618 26.3267 33.4458 27.6525C33.0299 28.9783 32.3078 30.1875 31.3379 31.1825C30.368 32.1774 29.1776 32.9302 27.8628 33.3798C26.5481 33.8294 25.146 33.9633 23.77 33.7707C22.3939 33.578 21.0825 33.0642 19.9419 32.2708L23.371 28.8395C24.2612 29.2172 25.2551 29.2735 26.1823 28.9987C27.1095 28.7239 27.9122 28.1352 28.4529 27.3335C28.9936 26.5317 29.2386 25.5668 29.1459 24.6043C29.0531 23.6417 28.6285 22.7413 27.9447 22.0575C27.2609 21.3737 26.3605 20.9491 25.3979 20.8563C24.4354 20.7636 23.4705 21.0086 22.6687 21.5493C21.867 22.09 21.2782 22.8927 21.0035 23.8199C20.7287 24.7471 20.785 25.7409 21.1627 26.6312L17.7294 30.0583C16.8056 28.7303 16.2632 27.1746 16.1613 25.5602C16.0593 23.9457 16.4016 22.3342 17.1509 20.9005C17.9003 19.4669 19.0281 18.2659 20.4118 17.428C21.7956 16.5902 23.3825 16.1474 25.0002 16.1478ZM14.4585 35.4187L14.5835 35.5416V37.9791C14.5829 38.2551 14.4728 38.5196 14.2773 38.7145L11.7564 41.2353V39.2874C11.7564 39.0112 11.6467 38.7462 11.4513 38.5509C11.256 38.3555 10.991 38.2458 10.7148 38.2458H8.76477L11.2856 35.7249C11.3823 35.6279 11.4973 35.5509 11.6238 35.4983C11.7504 35.4458 11.8861 35.4187 12.0231 35.4187H14.4585Z" fill="#E51E7D"/>
+</svg>
diff --git a/public/img/svg/books/2/game-icons_heart-key.svg b/public/img/svg/books/2/game-icons_heart-key.svg
new file mode 100644
index 0000000..cef36bf
--- /dev/null
+++ b/public/img/svg/books/2/game-icons_heart-key.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.594 3.89004C17.1877 3.90567 15.8498 4.35977 14.6975 5.08145C12.0705 6.74551 10.5764 9.79532 11.6897 12.3832L12.3537 13.9359L10.801 13.2719C8.6975 12.3637 6.28734 13.184 4.56859 14.932C4.17504 15.3422 3.80883 15.7914 3.49828 16.2797C1.84105 18.9164 1.59887 22.5199 4.78246 25.7035C7.05394 27.9691 11.5237 28.4672 16.0159 28.3598C18.2717 28.3012 20.4983 28.1156 22.4514 27.9984C22.9397 27.9691 23.4084 27.9398 23.8577 27.9203L42.051 46.1137L44.5315 43.6332L44.5217 43.6234L47.7053 40.4496L45.2248 37.9691L42.0412 41.143L40.2444 39.3461L42.3147 37.2758L39.8342 34.7953L37.7639 36.8656L36.1037 35.2055L41.4846 29.8148L39.0041 27.3344L33.6233 32.725L26.3381 25.4398C26.3577 24.9906 26.387 24.5219 26.4162 24.0336C26.5334 22.0805 26.719 19.8539 26.7776 17.5981C26.8752 13.1156 26.387 8.63809 24.1213 6.36563C22.3342 4.57461 20.4006 3.87051 18.594 3.89004Z" fill="#E51E7D"/>
+</svg>
diff --git a/public/img/svg/books/2/icon-park-outline_turn-on.svg b/public/img/svg/books/2/icon-park-outline_turn-on.svg
new file mode 100644
index 0000000..2d96d68
--- /dev/null
+++ b/public/img/svg/books/2/icon-park-outline_turn-on.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8752 44.7917C16.9523 42.951 12.8471 36.651 10.7919 32.9615C9.90435 31.3677 10.3721 29.4115 11.796 28.2719C12.5627 27.6588 13.5285 27.35 14.5086 27.4044C15.4887 27.4587 16.4144 27.8726 17.1085 28.5667L18.7502 30.2083V18.2292C18.7502 17.5385 19.0246 16.8761 19.5129 16.3877C20.0013 15.8994 20.6637 15.625 21.3544 15.625C22.045 15.625 22.7074 15.8994 23.1958 16.3877C23.6842 16.8761 23.9585 17.5385 23.9585 18.2292V24.4792C23.9585 23.7885 24.2329 23.1261 24.7213 22.6377C25.2096 22.1494 25.872 21.875 26.5627 21.875C27.2534 21.875 27.9157 22.1494 28.4041 22.6377C28.8925 23.1261 29.1669 23.7885 29.1669 24.4792V26.5625C29.1669 25.8718 29.4412 25.2095 29.9296 24.7211C30.418 24.2327 31.0804 23.9583 31.771 23.9583C32.4617 23.9583 33.1241 24.2327 33.6124 24.7211C34.1008 25.2095 34.3752 25.8718 34.3752 26.5625V28.6458C34.3752 27.9552 34.6496 27.2928 35.1379 26.8044C35.6263 26.316 36.2887 26.0417 36.9794 26.0417C37.67 26.0417 38.3324 26.316 38.8208 26.8044C39.3092 27.2928 39.5835 27.9552 39.5835 28.6458V36.8417C39.5835 37.9562 39.3075 39.0583 38.6648 39.9698C37.5991 41.4792 35.6835 43.7854 33.3335 44.7917C29.6877 46.3542 26.4273 46.4937 21.8752 44.7917Z" stroke="#E51E7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 9.37533L15.625 12.5003M19.7917 4.16699L20.8333 10.417M28.125 8.33366L26.0417 11.4587" stroke="#E51E7D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/svg/books/2/icon-park_play-cycle.svg b/public/img/svg/books/2/icon-park_play-cycle.svg
new file mode 100644
index 0000000..690e4c8
--- /dev/null
+++ b/public/img/svg/books/2/icon-park_play-cycle.svg
@@ -0,0 +1,6 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16699 26.042C4.16699 19.1151 9.78808 13.542 16.667 13.542H45.8337" stroke="#E51E7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.584 7.29199L45.834 13.542L39.584 19.792" stroke="#E51E7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M45.8337 23.959C45.8337 30.8859 40.2126 36.459 33.3337 36.459H4.16699" stroke="#E51E7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.417 42.709L4.16699 36.459L10.417 30.209" stroke="#E51E7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/svg/books/2/iconoir_sparks.svg b/public/img/svg/books/2/iconoir_sparks.svg
new file mode 100644
index 0000000..caefc2a
--- /dev/null
+++ b/public/img/svg/books/2/iconoir_sparks.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.667 31.2503C26.8232 31.2503 31.2503 26.9774 31.2503 16.667C31.2503 26.9774 35.6462 31.2503 45.8337 31.2503C35.6462 31.2503 31.2503 35.6462 31.2503 45.8337C31.2503 35.6462 26.8232 31.2503 16.667 31.2503ZM4.16699 13.542C10.6962 13.542 13.542 10.7962 13.542 4.16699C13.542 10.7962 16.3691 13.542 22.917 13.542C16.3691 13.542 13.542 16.3691 13.542 22.917C13.542 16.3691 10.6962 13.542 4.16699 13.542Z" stroke="#E51E7D" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/svg/books/2/material-symbols_heart-plus-outline-rounded.svg b/public/img/svg/books/2/material-symbols_heart-plus-outline-rounded.svg
new file mode 100644
index 0000000..825d774
--- /dev/null
+++ b/public/img/svg/books/2/material-symbols_heart-plus-outline-rounded.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.08301 17.6562C2.08301 14.3924 3.17676 11.6757 5.36426 9.50625C7.55176 7.33681 10.2775 6.25139 13.5413 6.25C15.3469 6.25 17.0656 6.63194 18.6976 7.39583C20.3295 8.15972 21.7358 9.23611 22.9163 10.625C24.0969 9.23611 25.5031 8.15972 27.1351 7.39583C28.767 6.63194 30.4858 6.25 32.2913 6.25C34.7566 6.25 36.8747 6.86667 38.6455 8.1C40.4163 9.33333 41.7531 10.9215 42.6559 12.8646C42.899 13.3854 42.9163 13.9153 42.708 14.4542C42.4997 14.9931 42.1351 15.3833 41.6143 15.625C41.0934 15.8667 40.5636 15.884 40.0247 15.6771C39.4858 15.4701 39.0955 15.1056 38.8538 14.5833C38.2288 13.1944 37.3087 12.1528 36.0934 11.4583C34.8781 10.7639 33.6108 10.4167 32.2913 10.4167C30.6941 10.4167 29.2358 10.8681 27.9163 11.7708C26.5969 12.6736 25.4511 13.7847 24.4788 15.1042C24.3052 15.3819 24.0795 15.5819 23.8018 15.7042C23.524 15.8264 23.2288 15.8861 22.9163 15.8833C22.6038 15.8806 22.3087 15.8111 22.0309 15.675C21.7531 15.5389 21.5275 15.3479 21.3538 15.1021C20.3816 13.7826 19.2358 12.6715 17.9163 11.7688C16.5969 10.866 15.1386 10.4153 13.5413 10.4167C11.5622 10.4167 9.85245 11.1028 8.41217 12.475C6.9719 13.8472 6.25106 15.5736 6.24967 17.6542C6.24967 18.8 6.49273 19.9632 6.97884 21.1438C7.46495 22.3243 8.33301 23.6875 9.58301 25.2333C10.833 26.7792 12.5344 28.5847 14.6872 30.65C16.84 32.7153 19.583 35.2069 22.9163 38.125L27.5518 34.0625C27.9684 33.6806 28.4545 33.5069 29.0101 33.5417C29.5656 33.5764 30.0344 33.7847 30.4163 34.1667C30.833 34.5833 31.033 35.0958 31.0163 35.7042C30.9997 36.3125 30.765 36.8069 30.3122 37.1875L25.6768 41.3021C25.2948 41.6493 24.8608 41.9097 24.3747 42.0833C23.8886 42.2569 23.4025 42.3438 22.9163 42.3438C22.4302 42.3438 21.9441 42.2569 21.458 42.0833C20.9719 41.9097 20.5379 41.6319 20.1559 41.25C18.5934 39.8611 16.7795 38.2812 14.7143 36.5104C12.649 34.7396 10.6781 32.8389 8.80176 30.8083C6.92537 28.7778 5.33717 26.6507 4.03717 24.4271C2.73717 22.2035 2.08579 19.9465 2.08301 17.6562ZM37.4997 29.1667H33.333C32.7427 29.1667 32.2483 28.9667 31.8497 28.5667C31.4511 28.1667 31.2511 27.6722 31.2497 27.0833C31.2483 26.4944 31.4483 26 31.8497 25.6C32.2511 25.2 32.7455 25 33.333 25H37.4997V20.8333C37.4997 20.2431 37.6997 19.7486 38.0997 19.35C38.4997 18.9514 38.9941 18.7514 39.583 18.75C40.1719 18.7486 40.667 18.9486 41.0684 19.35C41.4698 19.7514 41.6691 20.2458 41.6663 20.8333V25H45.833C46.4233 25 46.9184 25.2 47.3184 25.6C47.7184 26 47.9177 26.4944 47.9163 27.0833C47.915 27.6722 47.715 28.1674 47.3163 28.5688C46.9177 28.9701 46.4233 29.1694 45.833 29.1667H41.6663V33.3333C41.6663 33.9236 41.4663 34.4187 41.0663 34.8187C40.6663 35.2187 40.1719 35.4181 39.583 35.4167C38.9941 35.4153 38.4997 35.2153 38.0997 34.8167C37.6997 34.4181 37.4997 33.9236 37.4997 33.3333V29.1667Z" fill="#E51E7D"/>
+</svg>
diff --git a/public/img/svg/books/book-formats.svg b/public/img/svg/books/book-formats.svg
new file mode 100644
index 0000000..a15e1a1
--- /dev/null
+++ b/public/img/svg/books/book-formats.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="33" viewBox="0 0 24 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.19223 17.578H4.30762V15.3809H5.19223C5.42685 15.3809 5.65185 15.4966 5.81775 15.7026C5.98365 15.9086 6.07685 16.1881 6.07685 16.4794C6.07685 16.7708 5.98365 17.0502 5.81775 17.2562C5.65185 17.4622 5.42685 17.578 5.19223 17.578ZM11.3845 21.9722V15.3809H12.2692C12.5038 15.3809 12.7288 15.4966 12.8947 15.7026C13.0606 15.9086 13.1538 16.1881 13.1538 16.4794V20.8737C13.1538 21.165 13.0606 21.4444 12.8947 21.6504C12.7288 21.8565 12.5038 21.9722 12.2692 21.9722H11.3845Z" fill="#C01F64"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.769531 3.29567C0.769531 2.42161 1.04913 1.58334 1.54682 0.965281C2.04452 0.347222 2.71953 0 3.42338 0L17.9435 0L23.7695 7.2351V29.6611C23.7695 30.5351 23.4899 31.3734 22.9922 31.9915C22.4945 32.6095 21.8195 32.9567 21.1157 32.9567H3.42338C2.71953 32.9567 2.04452 32.6095 1.54682 31.9915C1.04913 31.3734 0.769531 30.5351 0.769531 29.6611V3.29567ZM5.19261 13.1827H2.53876V24.1683H4.30799V19.774H5.19261C5.89645 19.774 6.57147 19.4268 7.06916 18.8088C7.56685 18.1907 7.84645 17.3524 7.84645 16.4784C7.84645 15.6043 7.56685 14.766 7.06916 14.148C6.57147 13.5299 5.89645 13.1827 5.19261 13.1827ZM12.2695 13.1827H9.61568V24.1683H12.2695C12.9734 24.1683 13.6484 23.8211 14.1461 23.203C14.6438 22.5849 14.9234 21.7467 14.9234 20.8726V16.4784C14.9234 15.6043 14.6438 14.766 14.1461 14.148C13.6484 13.5299 12.9734 13.1827 12.2695 13.1827ZM16.6926 24.1683V13.1827H22.0003V15.3798H18.4618V17.5769H20.2311V19.774H18.4618V24.1683H16.6926Z" fill="#C01F64"/>
+</svg>
diff --git a/public/img/svg/books/book-illustrations.svg b/public/img/svg/books/book-illustrations.svg
new file mode 100644
index 0000000..40d6e2b
--- /dev/null
+++ b/public/img/svg/books/book-illustrations.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="31" viewBox="0 0 24 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.862 1.01361C10.4118 0.54615 9.85883 0.301357 9.29362 0.319278H3.26314C2.93561 0.31897 2.61125 0.406925 2.30861 0.578112C2.00597 0.749299 1.73099 1.00036 1.49939 1.31693C1.26779 1.63351 1.08412 2.00939 0.958888 2.42307C0.833653 2.83675 0.769307 3.28013 0.769532 3.72783V27.23C0.770437 28.1336 1.03345 28.9999 1.50089 29.6389C1.96834 30.2778 2.60207 30.6373 3.26314 30.6386H21.2759C21.937 30.6373 22.5707 30.2778 23.0382 29.6389C23.5056 28.9999 23.7686 28.1336 23.7695 27.23V8.20711C23.7686 7.30348 23.5056 6.43722 23.0382 5.79826C22.5707 5.1593 21.937 4.79979 21.2759 4.79856H12.119L11.7735 2.91193C11.6367 2.15634 11.3151 1.48504 10.862 1.01361ZM17.161 16.801C16.4806 16.801 15.828 16.4315 15.3469 15.7739C14.8658 15.1162 14.5955 14.2243 14.5955 13.2942C14.5955 12.3642 14.8658 11.4722 15.3469 10.8146C15.828 10.1569 16.4806 9.78748 17.161 9.78748C17.8414 9.78748 18.4939 10.1569 18.975 10.8146C19.4561 11.4722 19.7264 12.3642 19.7264 13.2942C19.7264 14.2243 19.4561 15.1162 18.975 15.7739C18.4939 16.4315 17.8414 16.801 17.161 16.801ZM9.81013 15.9804L19.1586 27.7163H3.26314C3.16906 27.7151 3.0791 27.6634 3.01258 27.5725C2.94605 27.4816 2.90829 27.3586 2.9074 27.23V21.3925L8.52399 15.9804C8.7056 15.778 8.93274 15.6674 9.16706 15.6674C9.40139 15.6674 9.62853 15.778 9.81013 15.9804Z" fill="#C01F64"/>
+</svg>
diff --git a/public/img/svg/books/book-pages.svg b/public/img/svg/books/book-pages.svg
new file mode 100644
index 0000000..ec9a0e9
--- /dev/null
+++ b/public/img/svg/books/book-pages.svg
@@ -0,0 +1,14 @@
+<svg width="31" height="28" viewBox="0 0 31 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.3585 3.16504H7.69186C6.1457 3.16504 3.8457 4.05678 3.8457 6.51325V22.1383C3.8457 24.5947 6.1457 25.4865 7.69186 25.4865H26.9226V23.2543H7.70724C7.11493 23.2409 6.40981 23.0378 6.40981 22.1383C6.40981 22.0255 6.42134 21.9251 6.44058 21.8336C6.58416 21.1907 7.18929 21.0333 7.70724 21.0222H26.9226V5.39718C26.9226 4.80518 26.6525 4.23743 26.1716 3.81882C25.6908 3.40021 25.0386 3.16504 24.3585 3.16504ZM24.3585 13.2097L21.7944 12.0936L19.2303 13.2097V5.39718H24.3585V13.2097Z" fill="url(#paint0_linear_868_364)"/>
+<path d="M24.3585 3.16504H7.69186C6.1457 3.16504 3.8457 4.05678 3.8457 6.51325V22.1383C3.8457 24.5947 6.1457 25.4865 7.69186 25.4865H26.9226V23.2543H7.70724C7.11493 23.2409 6.40981 23.0378 6.40981 22.1383C6.40981 22.0255 6.42134 21.9251 6.44058 21.8336C6.58416 21.1907 7.18929 21.0333 7.70724 21.0222H26.9226V5.39718C26.9226 4.80518 26.6525 4.23743 26.1716 3.81882C25.6908 3.40021 25.0386 3.16504 24.3585 3.16504ZM24.3585 13.2097L21.7944 12.0936L19.2303 13.2097V5.39718H24.3585V13.2097Z" fill="url(#paint1_radial_868_364)" fill-opacity="0.2"/>
+<defs>
+<linearGradient id="paint0_linear_868_364" x1="15.3842" y1="34.2754" x2="15.3842" y2="-25.1728" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E20C66"/>
+<stop offset="1" stop-color="#E20C66" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint1_radial_868_364" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.3842 14.3258) rotate(50.5894) scale(14.4454 118.907)">
+<stop stop-color="#EE70A4"/>
+<stop offset="1" stop-color="#FF33AD"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/img/svg/books/download.svg b/public/img/svg/books/download.svg
new file mode 100644
index 0000000..614ac42
--- /dev/null
+++ b/public/img/svg/books/download.svg
@@ -0,0 +1,3 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.147 34.2992L11.6706 22.8262L13.9666 20.4913L21.5256 28.0503V0H24.7684V28.0503L32.3241 20.4946L34.6233 22.8262L23.147 34.2992ZM5.68765 45.3994C4.1938 45.3994 2.94747 44.9 1.94869 43.9012C0.949901 42.9024 0.449428 41.655 0.447266 40.159V32.3017H3.69008V40.159C3.69008 40.6584 3.89762 41.1167 4.3127 41.534C4.72778 41.9512 5.18501 42.1587 5.68441 42.1566H40.6095C41.1067 42.1566 41.564 41.949 41.9812 41.534C42.3985 41.1189 42.606 40.6606 42.6038 40.159V32.3017H45.8466V40.159C45.8466 41.6529 45.3473 42.8992 44.3485 43.898C43.3497 44.8968 42.1023 45.3972 40.6063 45.3994H5.68765Z" fill="white"/>
+</svg>
diff --git a/public/img/svg/books/read.svg b/public/img/svg/books/read.svg
new file mode 100644
index 0000000..1069423
--- /dev/null
+++ b/public/img/svg/books/read.svg
@@ -0,0 +1,10 @@
+<svg width="63" height="45" viewBox="0 0 63 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.60144 7.38058C8.04021 6.15329 12.9711 4.8298 17.7659 4.41849C22.9338 3.97401 27.3168 4.62746 29.858 6.91288V39.2405C26.2249 37.4825 21.6205 37.2404 17.3735 37.6052C12.7884 38.0033 8.16455 39.1344 4.60144 40.2953V7.38058ZM33.7436 6.91288C36.2848 4.62746 40.6678 3.97401 45.8356 4.41849C50.6305 4.8298 55.5613 6.15329 59.0001 7.38058V40.2953C55.4331 39.1344 50.8131 38 46.2281 37.6086C41.9772 37.2404 37.3766 37.4792 33.7436 39.2405V6.91288ZM31.8008 3.9143C27.9734 1.10479 22.4248 0.686844 17.3735 1.11806C11.4906 1.62556 5.55342 3.34709 1.85431 4.78336C1.51489 4.91514 1.22707 5.12751 1.0252 5.39513C0.823323 5.66274 0.715924 5.9743 0.71582 6.2926V42.7798C0.71591 43.0573 0.797563 43.3303 0.953298 43.5739C1.10903 43.8175 1.33387 44.0238 1.60722 44.174C1.88057 44.3242 2.19369 44.4134 2.51791 44.4335C2.84212 44.4536 3.16705 44.4039 3.46295 44.289C6.89007 42.9622 12.4115 41.3667 17.762 40.9057C23.2369 40.4347 27.8258 41.1942 30.2854 43.8147C30.4674 44.0084 30.6981 44.1647 30.9604 44.2721C31.2227 44.3796 31.5099 44.4353 31.8008 44.4353C32.0917 44.4353 32.3789 44.3796 32.6412 44.2721C32.9034 44.1647 33.1341 44.0084 33.3162 43.8147C35.7758 41.1942 40.3647 40.4347 45.8356 40.9057C51.19 41.3667 56.7154 42.9622 60.1386 44.289C60.4345 44.4039 60.7594 44.4536 61.0836 44.4335C61.4079 44.4134 61.721 44.3242 61.9943 44.174C62.2677 44.0238 62.4925 43.8175 62.6483 43.5739C62.804 43.3303 62.8856 43.0573 62.8857 42.7798V6.2926C62.8856 5.9743 62.7782 5.66274 62.5764 5.39513C62.3745 5.12751 62.0867 4.91514 61.7472 4.78336C58.0481 3.34709 52.1109 1.62556 46.2281 1.11806C41.1768 0.683527 35.6281 1.10479 31.8008 3.9143Z" fill="white"/>
+<path d="M4.60144 7.38058C8.04021 6.15329 12.9711 4.8298 17.7659 4.41849C22.9338 3.97401 27.3168 4.62746 29.858 6.91288V39.2405C26.2249 37.4825 21.6205 37.2404 17.3735 37.6052C12.7884 38.0033 8.16455 39.1344 4.60144 40.2953V7.38058ZM33.7436 6.91288C36.2848 4.62746 40.6678 3.97401 45.8356 4.41849C50.6305 4.8298 55.5613 6.15329 59.0001 7.38058V40.2953C55.4331 39.1344 50.8131 38 46.2281 37.6086C41.9772 37.2404 37.3766 37.4792 33.7436 39.2405V6.91288ZM31.8008 3.9143C27.9734 1.10479 22.4248 0.686844 17.3735 1.11806C11.4906 1.62556 5.55342 3.34709 1.85431 4.78336C1.51489 4.91514 1.22707 5.12751 1.0252 5.39513C0.823323 5.66274 0.715924 5.9743 0.71582 6.2926V42.7798C0.71591 43.0573 0.797563 43.3303 0.953298 43.5739C1.10903 43.8175 1.33387 44.0238 1.60722 44.174C1.88057 44.3242 2.19369 44.4134 2.51791 44.4335C2.84212 44.4536 3.16705 44.4039 3.46295 44.289C6.89007 42.9622 12.4115 41.3667 17.762 40.9057C23.2369 40.4347 27.8258 41.1942 30.2854 43.8147C30.4674 44.0084 30.6981 44.1647 30.9604 44.2721C31.2227 44.3796 31.5099 44.4353 31.8008 44.4353C32.0917 44.4353 32.3789 44.3796 32.6412 44.2721C32.9034 44.1647 33.1341 44.0084 33.3162 43.8147C35.7758 41.1942 40.3647 40.4347 45.8356 40.9057C51.19 41.3667 56.7154 42.9622 60.1386 44.289C60.4345 44.4039 60.7594 44.4536 61.0836 44.4335C61.4079 44.4134 61.721 44.3242 61.9943 44.174C62.2677 44.0238 62.4925 43.8175 62.6483 43.5739C62.804 43.3303 62.8856 43.0573 62.8857 42.7798V6.2926C62.8856 5.9743 62.7782 5.66274 62.5764 5.39513C62.3745 5.12751 62.0867 4.91514 61.7472 4.78336C58.0481 3.34709 52.1109 1.62556 46.2281 1.11806C41.1768 0.683527 35.6281 1.10479 31.8008 3.9143Z" fill="url(#paint0_radial_984_378)" fill-opacity="0.2"/>
+<defs>
+<radialGradient id="paint0_radial_984_378" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.8008 22.7048) rotate(41.336) scale(32.9053 273.844)">
+<stop stop-color="#EE70A4"/>
+<stop offset="1" stop-color="#FF33AD"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/img/svg/books/ruble.svg b/public/img/svg/books/ruble.svg
new file mode 100644
index 0000000..e48b214
--- /dev/null
+++ b/public/img/svg/books/ruble.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="42" viewBox="0 0 29 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3499 26.5879C20.1816 26.5879 22.8973 25.1873 24.8996 22.6942C26.9019 20.2011 28.0268 16.8197 28.0268 13.294C28.0268 9.76818 26.9019 6.38681 24.8996 3.89371C22.8973 1.40061 20.1816 0 17.3499 0H7.34035C6.80941 0 6.30022 0.262614 5.92478 0.730071C5.54935 1.19753 5.33844 1.83153 5.33844 2.49262V21.6027H2.00191C1.47097 21.6027 0.961779 21.8653 0.586347 22.3328C0.210915 22.8002 0 23.4342 0 24.0953C0 24.7564 0.210915 25.3904 0.586347 25.8578C0.961779 26.3253 1.47097 26.5879 2.00191 26.5879H5.33844V29.9114H2.00191C1.47097 29.9114 0.961779 30.174 0.586347 30.6415C0.210915 31.1089 0 31.7429 0 32.404C0 33.0651 0.210915 33.6991 0.586347 34.1666C0.961779 34.634 1.47097 34.8966 2.00191 34.8966H5.33844V39.051C5.33844 39.7121 5.54935 40.3461 5.92478 40.8136C6.30022 41.281 6.80941 41.5436 7.34035 41.5436C7.87129 41.5436 8.38049 41.281 8.75592 40.8136C9.13135 40.3461 9.34227 39.7121 9.34227 39.051V34.8966H16.6826C17.2136 34.8966 17.7228 34.634 18.0982 34.1666C18.4736 33.6991 18.6845 33.0651 18.6845 32.404C18.6845 31.7429 18.4736 31.1089 18.0982 30.6415C17.7228 30.174 17.2136 29.9114 16.6826 29.9114H9.34227V26.5879H17.3499ZM9.34227 4.98523H17.3499C19.1197 4.98523 20.817 5.86062 22.0685 7.4188C23.3199 8.97699 24.023 11.0903 24.023 13.294C24.023 15.4976 23.3199 17.6109 22.0685 19.1691C20.817 20.7273 19.1197 21.6027 17.3499 21.6027H9.34227V4.98523Z" fill="white"/>
+</svg>
diff --git a/public/img/svg/books/titles.svg b/public/img/svg/books/titles.svg
new file mode 100644
index 0000000..bac03c2
--- /dev/null
+++ b/public/img/svg/books/titles.svg
@@ -0,0 +1,4 @@
+<svg width="53" height="49" viewBox="0 0 53 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.983398 1.61647C0.983398 1.18776 1.1537 0.776601 1.45685 0.473454C1.76 0.170306 2.17116 0 2.59987 0L31.6964 0C32.1251 0 32.5362 0.170306 32.8394 0.473454C33.1425 0.776601 33.3128 1.18776 33.3128 1.61647C33.3128 2.04519 33.1425 2.45634 32.8394 2.75949C32.5362 3.06264 32.1251 3.23294 31.6964 3.23294H2.59987C2.17116 3.23294 1.76 3.06264 1.45685 2.75949C1.1537 2.45634 0.983398 2.04519 0.983398 1.61647ZM43.0117 1.61647C43.0117 1.18776 43.182 0.776601 43.4851 0.473454C43.7883 0.170306 44.1994 0 44.6282 0L51.094 0C51.5228 0 51.9339 0.170306 52.2371 0.473454C52.5402 0.776601 52.7105 1.18776 52.7105 1.61647C52.7105 2.04519 52.5402 2.45634 52.2371 2.75949C51.9339 3.06264 51.5228 3.23294 51.094 3.23294H44.6282C44.1994 3.23294 43.7883 3.06264 43.4851 2.75949C43.182 2.45634 43.0117 2.04519 43.0117 1.61647ZM0.983398 8.08236C0.983398 7.65365 1.1537 7.24249 1.45685 6.93934C1.76 6.6362 2.17116 6.46589 2.59987 6.46589H28.4634C28.8921 6.46589 29.3033 6.6362 29.6064 6.93934C29.9096 7.24249 30.0799 7.65365 30.0799 8.08236C30.0799 8.51108 29.9096 8.92223 29.6064 9.22538C29.3033 9.52853 28.8921 9.69883 28.4634 9.69883H2.59987C2.17116 9.69883 1.76 9.52853 1.45685 9.22538C1.1537 8.92223 0.983398 8.51108 0.983398 8.08236ZM43.0117 8.08236C43.0117 7.65365 43.182 7.24249 43.4851 6.93934C43.7883 6.6362 44.1994 6.46589 44.6282 6.46589H51.094C51.5228 6.46589 51.9339 6.6362 52.2371 6.93934C52.5402 7.24249 52.7105 7.65365 52.7105 8.08236C52.7105 8.51108 52.5402 8.92223 52.2371 9.22538C51.9339 9.52853 51.5228 9.69883 51.094 9.69883H44.6282C44.1994 9.69883 43.7883 9.52853 43.4851 9.22538C43.182 8.92223 43.0117 8.51108 43.0117 8.08236ZM0.983398 14.5483C0.983398 14.1195 1.1537 13.7084 1.45685 13.4052C1.76 13.1021 2.17116 12.9318 2.59987 12.9318H34.9293C35.358 12.9318 35.7692 13.1021 36.0723 13.4052C36.3755 13.7084 36.5458 14.1195 36.5458 14.5483C36.5458 14.977 36.3755 15.3881 36.0723 15.6913C35.7692 15.9944 35.358 16.1647 34.9293 16.1647H2.59987C2.17116 16.1647 1.76 15.9944 1.45685 15.6913C1.1537 15.3881 0.983398 14.977 0.983398 14.5483ZM43.0117 14.5483C43.0117 14.1195 43.182 13.7084 43.4851 13.4052C43.7883 13.1021 44.1994 12.9318 44.6282 12.9318H51.094C51.5228 12.9318 51.9339 13.1021 52.2371 13.4052C52.5402 13.7084 52.7105 14.1195 52.7105 14.5483C52.7105 14.977 52.5402 15.3881 52.2371 15.6913C51.9339 15.9944 51.5228 16.1647 51.094 16.1647H44.6282C44.1994 16.1647 43.7883 15.9944 43.4851 15.6913C43.182 15.3881 43.0117 14.977 43.0117 14.5483ZM0.983398 21.0141C0.983398 20.5854 1.1537 20.1743 1.45685 19.8711C1.76 19.568 2.17116 19.3977 2.59987 19.3977H25.2305C25.6592 19.3977 26.0704 19.568 26.3735 19.8711C26.6766 20.1743 26.847 20.5854 26.847 21.0141C26.847 21.4429 26.6766 21.854 26.3735 22.1572C26.0704 22.4603 25.6592 22.6306 25.2305 22.6306H2.59987C2.17116 22.6306 1.76 22.4603 1.45685 22.1572C1.1537 21.854 0.983398 21.4429 0.983398 21.0141ZM43.0117 21.0141C43.0117 20.5854 43.182 20.1743 43.4851 19.8711C43.7883 19.568 44.1994 19.3977 44.6282 19.3977H51.094C51.5228 19.3977 51.9339 19.568 52.2371 19.8711C52.5402 20.1743 52.7105 20.5854 52.7105 21.0141C52.7105 21.4429 52.5402 21.854 52.2371 22.1572C51.9339 22.4603 51.5228 22.6306 51.094 22.6306H44.6282C44.1994 22.6306 43.7883 22.4603 43.4851 22.1572C43.182 21.854 43.0117 21.4429 43.0117 21.0141ZM0.983398 27.48C0.983398 27.0513 1.1537 26.6402 1.45685 26.337C1.76 26.0339 2.17116 25.8636 2.59987 25.8636H25.2305C25.6592 25.8636 26.0704 26.0339 26.3735 26.337C26.6766 26.6402 26.847 27.0513 26.847 27.48C26.847 27.9087 26.6766 28.3199 26.3735 28.623C26.0704 28.9262 25.6592 29.0965 25.2305 29.0965H2.59987C2.17116 29.0965 1.76 28.9262 1.45685 28.623C1.1537 28.3199 0.983398 27.9087 0.983398 27.48ZM43.0117 27.48C43.0117 27.0513 43.182 26.6402 43.4851 26.337C43.7883 26.0339 44.1994 25.8636 44.6282 25.8636H51.094C51.5228 25.8636 51.9339 26.0339 52.2371 26.337C52.5402 26.6402 52.7105 27.0513 52.7105 27.48C52.7105 27.9087 52.5402 28.3199 52.2371 28.623C51.9339 28.9262 51.5228 29.0965 51.094 29.0965H44.6282C44.1994 29.0965 43.7883 28.9262 43.4851 28.623C43.182 28.3199 43.0117 27.9087 43.0117 27.48ZM0.983398 33.9459C0.983398 33.5172 1.1537 33.106 1.45685 32.8029C1.76 32.4997 2.17116 32.3294 2.59987 32.3294H31.6964C32.1251 32.3294 32.5362 32.4997 32.8394 32.8029C33.1425 33.106 33.3128 33.5172 33.3128 33.9459C33.3128 34.3746 33.1425 34.7858 32.8394 35.0889C32.5362 35.3921 32.1251 35.5624 31.6964 35.5624H2.59987C2.17116 35.5624 1.76 35.3921 1.45685 35.0889C1.1537 34.7858 0.983398 34.3746 0.983398 33.9459ZM43.0117 33.9459C43.0117 33.5172 43.182 33.106 43.4851 32.8029C43.7883 32.4997 44.1994 32.3294 44.6282 32.3294H51.094C51.5228 32.3294 51.9339 32.4997 52.2371 32.8029C52.5402 33.106 52.7105 33.5172 52.7105 33.9459C52.7105 34.3746 52.5402 34.7858 52.2371 35.0889C51.9339 35.3921 51.5228 35.5624 51.094 35.5624H44.6282C44.1994 35.5624 43.7883 35.3921 43.4851 35.0889C43.182 34.7858 43.0117 34.3746 43.0117 33.9459ZM0.983398 40.4118C0.983398 39.9831 1.1537 39.5719 1.45685 39.2688C1.76 38.9656 2.17116 38.7953 2.59987 38.7953H18.7646C19.1933 38.7953 19.6045 38.9656 19.9076 39.2688C20.2108 39.5719 20.3811 39.9831 20.3811 40.4118C20.3811 40.8405 20.2108 41.2517 19.9076 41.5548C19.6045 41.858 19.1933 42.0283 18.7646 42.0283H2.59987C2.17116 42.0283 1.76 41.858 1.45685 41.5548C1.1537 41.2517 0.983398 40.8405 0.983398 40.4118ZM43.0117 40.4118C43.0117 39.9831 43.182 39.5719 43.4851 39.2688C43.7883 38.9656 44.1994 38.7953 44.6282 38.7953H51.094C51.5228 38.7953 51.9339 38.9656 52.2371 39.2688C52.5402 39.5719 52.7105 39.9831 52.7105 40.4118C52.7105 40.8405 52.5402 41.2517 52.2371 41.5548C51.9339 41.858 51.5228 42.0283 51.094 42.0283H44.6282C44.1994 42.0283 43.7883 41.858 43.4851 41.5548C43.182 41.2517 43.0117 40.8405 43.0117 40.4118ZM0.983398 46.8777C0.983398 46.449 1.1537 46.0378 1.45685 45.7347C1.76 45.4315 2.17116 45.2612 2.59987 45.2612H34.9293C35.358 45.2612 35.7692 45.4315 36.0723 45.7347C36.3755 46.0378 36.5458 46.449 36.5458 46.8777C36.5458 47.3064 36.3755 47.7176 36.0723 48.0207C35.7692 48.3239 35.358 48.4942 34.9293 48.4942H2.59987C2.17116 48.4942 1.76 48.3239 1.45685 48.0207C1.1537 47.7176 0.983398 47.3064 0.983398 46.8777ZM43.0117 46.8777C43.0117 46.449 43.182 46.0378 43.4851 45.7347C43.7883 45.4315 44.1994 45.2612 44.6282 45.2612H51.094C51.5228 45.2612 51.9339 45.4315 52.2371 45.7347C52.5402 46.0378 52.7105 46.449 52.7105 46.8777C52.7105 47.3064 52.5402 47.7176 52.2371 48.0207C51.9339 48.3239 51.5228 48.4942 51.094 48.4942H44.6282C44.1994 48.4942 43.7883 48.3239 43.4851 48.0207C43.182 47.7176 43.0117 47.3064 43.0117 46.8777Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.983398 1.61647C0.983398 1.18776 1.1537 0.776601 1.45685 0.473454C1.76 0.170306 2.17116 0 2.59987 0L31.6964 0C32.1251 0 32.5362 0.170306 32.8394 0.473454C33.1425 0.776601 33.3128 1.18776 33.3128 1.61647C33.3128 2.04519 33.1425 2.45634 32.8394 2.75949C32.5362 3.06264 32.1251 3.23294 31.6964 3.23294H2.59987C2.17116 3.23294 1.76 3.06264 1.45685 2.75949C1.1537 2.45634 0.983398 2.04519 0.983398 1.61647ZM43.0117 1.61647C43.0117 1.18776 43.182 0.776601 43.4851 0.473454C43.7883 0.170306 44.1994 0 44.6282 0L51.094 0C51.5228 0 51.9339 0.170306 52.2371 0.473454C52.5402 0.776601 52.7105 1.18776 52.7105 1.61647C52.7105 2.04519 52.5402 2.45634 52.2371 2.75949C51.9339 3.06264 51.5228 3.23294 51.094 3.23294H44.6282C44.1994 3.23294 43.7883 3.06264 43.4851 2.75949C43.182 2.45634 43.0117 2.04519 43.0117 1.61647ZM0.983398 8.08236C0.983398 7.65365 1.1537 7.24249 1.45685 6.93934C1.76 6.6362 2.17116 6.46589 2.59987 6.46589H28.4634C28.8921 6.46589 29.3033 6.6362 29.6064 6.93934C29.9096 7.24249 30.0799 7.65365 30.0799 8.08236C30.0799 8.51108 29.9096 8.92223 29.6064 9.22538C29.3033 9.52853 28.8921 9.69883 28.4634 9.69883H2.59987C2.17116 9.69883 1.76 9.52853 1.45685 9.22538C1.1537 8.92223 0.983398 8.51108 0.983398 8.08236ZM43.0117 8.08236C43.0117 7.65365 43.182 7.24249 43.4851 6.93934C43.7883 6.6362 44.1994 6.46589 44.6282 6.46589H51.094C51.5228 6.46589 51.9339 6.6362 52.2371 6.93934C52.5402 7.24249 52.7105 7.65365 52.7105 8.08236C52.7105 8.51108 52.5402 8.92223 52.2371 9.22538C51.9339 9.52853 51.5228 9.69883 51.094 9.69883H44.6282C44.1994 9.69883 43.7883 9.52853 43.4851 9.22538C43.182 8.92223 43.0117 8.51108 43.0117 8.08236ZM0.983398 14.5483C0.983398 14.1195 1.1537 13.7084 1.45685 13.4052C1.76 13.1021 2.17116 12.9318 2.59987 12.9318H34.9293C35.358 12.9318 35.7692 13.1021 36.0723 13.4052C36.3755 13.7084 36.5458 14.1195 36.5458 14.5483C36.5458 14.977 36.3755 15.3881 36.0723 15.6913C35.7692 15.9944 35.358 16.1647 34.9293 16.1647H2.59987C2.17116 16.1647 1.76 15.9944 1.45685 15.6913C1.1537 15.3881 0.983398 14.977 0.983398 14.5483ZM43.0117 14.5483C43.0117 14.1195 43.182 13.7084 43.4851 13.4052C43.7883 13.1021 44.1994 12.9318 44.6282 12.9318H51.094C51.5228 12.9318 51.9339 13.1021 52.2371 13.4052C52.5402 13.7084 52.7105 14.1195 52.7105 14.5483C52.7105 14.977 52.5402 15.3881 52.2371 15.6913C51.9339 15.9944 51.5228 16.1647 51.094 16.1647H44.6282C44.1994 16.1647 43.7883 15.9944 43.4851 15.6913C43.182 15.3881 43.0117 14.977 43.0117 14.5483ZM0.983398 21.0141C0.983398 20.5854 1.1537 20.1743 1.45685 19.8711C1.76 19.568 2.17116 19.3977 2.59987 19.3977H25.2305C25.6592 19.3977 26.0704 19.568 26.3735 19.8711C26.6766 20.1743 26.847 20.5854 26.847 21.0141C26.847 21.4429 26.6766 21.854 26.3735 22.1572C26.0704 22.4603 25.6592 22.6306 25.2305 22.6306H2.59987C2.17116 22.6306 1.76 22.4603 1.45685 22.1572C1.1537 21.854 0.983398 21.4429 0.983398 21.0141ZM43.0117 21.0141C43.0117 20.5854 43.182 20.1743 43.4851 19.8711C43.7883 19.568 44.1994 19.3977 44.6282 19.3977H51.094C51.5228 19.3977 51.9339 19.568 52.2371 19.8711C52.5402 20.1743 52.7105 20.5854 52.7105 21.0141C52.7105 21.4429 52.5402 21.854 52.2371 22.1572C51.9339 22.4603 51.5228 22.6306 51.094 22.6306H44.6282C44.1994 22.6306 43.7883 22.4603 43.4851 22.1572C43.182 21.854 43.0117 21.4429 43.0117 21.0141ZM0.983398 27.48C0.983398 27.0513 1.1537 26.6402 1.45685 26.337C1.76 26.0339 2.17116 25.8636 2.59987 25.8636H25.2305C25.6592 25.8636 26.0704 26.0339 26.3735 26.337C26.6766 26.6402 26.847 27.0513 26.847 27.48C26.847 27.9087 26.6766 28.3199 26.3735 28.623C26.0704 28.9262 25.6592 29.0965 25.2305 29.0965H2.59987C2.17116 29.0965 1.76 28.9262 1.45685 28.623C1.1537 28.3199 0.983398 27.9087 0.983398 27.48ZM43.0117 27.48C43.0117 27.0513 43.182 26.6402 43.4851 26.337C43.7883 26.0339 44.1994 25.8636 44.6282 25.8636H51.094C51.5228 25.8636 51.9339 26.0339 52.2371 26.337C52.5402 26.6402 52.7105 27.0513 52.7105 27.48C52.7105 27.9087 52.5402 28.3199 52.2371 28.623C51.9339 28.9262 51.5228 29.0965 51.094 29.0965H44.6282C44.1994 29.0965 43.7883 28.9262 43.4851 28.623C43.182 28.3199 43.0117 27.9087 43.0117 27.48ZM0.983398 33.9459C0.983398 33.5172 1.1537 33.106 1.45685 32.8029C1.76 32.4997 2.17116 32.3294 2.59987 32.3294H31.6964C32.1251 32.3294 32.5362 32.4997 32.8394 32.8029C33.1425 33.106 33.3128 33.5172 33.3128 33.9459C33.3128 34.3746 33.1425 34.7858 32.8394 35.0889C32.5362 35.3921 32.1251 35.5624 31.6964 35.5624H2.59987C2.17116 35.5624 1.76 35.3921 1.45685 35.0889C1.1537 34.7858 0.983398 34.3746 0.983398 33.9459ZM43.0117 33.9459C43.0117 33.5172 43.182 33.106 43.4851 32.8029C43.7883 32.4997 44.1994 32.3294 44.6282 32.3294H51.094C51.5228 32.3294 51.9339 32.4997 52.2371 32.8029C52.5402 33.106 52.7105 33.5172 52.7105 33.9459C52.7105 34.3746 52.5402 34.7858 52.2371 35.0889C51.9339 35.3921 51.5228 35.5624 51.094 35.5624H44.6282C44.1994 35.5624 43.7883 35.3921 43.4851 35.0889C43.182 34.7858 43.0117 34.3746 43.0117 33.9459ZM0.983398 40.4118C0.983398 39.9831 1.1537 39.5719 1.45685 39.2688C1.76 38.9656 2.17116 38.7953 2.59987 38.7953H18.7646C19.1933 38.7953 19.6045 38.9656 19.9076 39.2688C20.2108 39.5719 20.3811 39.9831 20.3811 40.4118C20.3811 40.8405 20.2108 41.2517 19.9076 41.5548C19.6045 41.858 19.1933 42.0283 18.7646 42.0283H2.59987C2.17116 42.0283 1.76 41.858 1.45685 41.5548C1.1537 41.2517 0.983398 40.8405 0.983398 40.4118ZM43.0117 40.4118C43.0117 39.9831 43.182 39.5719 43.4851 39.2688C43.7883 38.9656 44.1994 38.7953 44.6282 38.7953H51.094C51.5228 38.7953 51.9339 38.9656 52.2371 39.2688C52.5402 39.5719 52.7105 39.9831 52.7105 40.4118C52.7105 40.8405 52.5402 41.2517 52.2371 41.5548C51.9339 41.858 51.5228 42.0283 51.094 42.0283H44.6282C44.1994 42.0283 43.7883 41.858 43.4851 41.5548C43.182 41.2517 43.0117 40.8405 43.0117 40.4118ZM0.983398 46.8777C0.983398 46.449 1.1537 46.0378 1.45685 45.7347C1.76 45.4315 2.17116 45.2612 2.59987 45.2612H34.9293C35.358 45.2612 35.7692 45.4315 36.0723 45.7347C36.3755 46.0378 36.5458 46.449 36.5458 46.8777C36.5458 47.3064 36.3755 47.7176 36.0723 48.0207C35.7692 48.3239 35.358 48.4942 34.9293 48.4942H2.59987C2.17116 48.4942 1.76 48.3239 1.45685 48.0207C1.1537 47.7176 0.983398 47.3064 0.983398 46.8777ZM43.0117 46.8777C43.0117 46.449 43.182 46.0378 43.4851 45.7347C43.7883 45.4315 44.1994 45.2612 44.6282 45.2612H51.094C51.5228 45.2612 51.9339 45.4315 52.2371 45.7347C52.5402 46.0378 52.7105 46.449 52.7105 46.8777C52.7105 47.3064 52.5402 47.7176 52.2371 48.0207C51.9339 48.3239 51.5228 48.4942 51.094 48.4942H44.6282C44.1994 48.4942 43.7883 48.3239 43.4851 48.0207C43.182 47.7176 43.0117 47.3064 43.0117 46.8777Z" fill="white" fill-opacity="0.2"/>
+</svg>
diff --git a/public/img/webp/books/1.webp b/public/img/webp/books/1.webp
new file mode 100644
index 0000000..cc93fbf
Binary files /dev/null and b/public/img/webp/books/1.webp differ
diff --git a/public/img/webp/books/2.webp b/public/img/webp/books/2.webp
new file mode 100644
index 0000000..cf253a6
Binary files /dev/null and b/public/img/webp/books/2.webp differ
diff --git a/src/assets/img/webp/vino-galante.webp b/src/assets/img/webp/vino-galante.webp
new file mode 100644
index 0000000..aad923b
Binary files /dev/null and b/src/assets/img/webp/vino-galante.webp differ
diff --git a/src/config/router/routes.ts b/src/config/router/routes.ts
index 96e2900..d79c138 100644
--- a/src/config/router/routes.ts
+++ b/src/config/router/routes.ts
@@ -4,14 +4,21 @@ interface Route {
   path: string
   name: string
   component: () => Promise<Component>
+  props?: boolean
 }
 
 const routes: Route[] = [
   {
     path: '/',
-    name: '/',
+    name: 'home',
     component: () => import('@/pages/mainPage/indexPage.vue'),
   },
+  {
+    path: '/books/:slug',
+    name: 'book-detail',
+    component: () => import('@/pages/books/_slug/indexBookPage.vue'),
+    props: true,
+  },
 ]
 
 export default routes
diff --git a/src/layout/UiLayout.vue b/src/layout/UiLayout.vue
index 45cc83c..5762ed0 100644
--- a/src/layout/UiLayout.vue
+++ b/src/layout/UiLayout.vue
@@ -1,18 +1,26 @@
 <template>
   <div
-    class="min-h-svh overflow-x-hidden bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-40"
+    class="min-h-svh overflow-x-hidden lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-40"
+    :class="
+      route.path === '/'
+        ? 'bg-black-50'
+        : 'bg-[linear-gradient(135deg,rgba(17,17,30,1)_10%,rgba(183,32,76,1)_170%)]'
+    "
   >
     <div
+      v-if="route.path === '/'"
       class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain"
     />
     <div
+      v-if="route.path === '/'"
       class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[1120px] after:h-[1800px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover"
     />
     <div
+      v-if="route.path === '/'"
       class="relative z-40 before:content-[''] before:absolute before:top-0 before:left-0 before:w-[1120px] before:h-[1000px] before:bg-[url(/src/assets/img/webp/hero-flowers.webp)] before:bg-no-repeat before:bg-left before:bg-contain"
     />
     <UiHeader class="relative z-50" />
-    <UiMain class="!min-h-[1800px] text-primary relative">
+    <UiMain class="!min-h-[1200px] text-primary relative">
       <slot />
     </UiMain>
     <UiFooter />
@@ -23,4 +31,7 @@
 import UiFooter from './UiFooter/UiFooter.vue'
 import UiHeader from './UiHeader/UiHeader.vue'
 import UiMain from './UiMain/UiMain.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 </script>
diff --git a/src/pages/books/_slug/_data/1.json b/src/pages/books/_slug/_data/1.json
new file mode 100644
index 0000000..4b8b024
--- /dev/null
+++ b/src/pages/books/_slug/_data/1.json
@@ -0,0 +1,38 @@
+{
+  "id": 1,
+  "title": "Как влюбить в себя любого\nКнига I",
+  "metaTitle": "Как влюбить в себя любого - Книга I",
+  "subtitle": "ОТКРОВЕНИЯ БЫВШЕГО КАЗАНОВЫ",
+  "subdesc": "💡 Ты красивая, умная, но он не пишет? Эта книга покажет, как влюбить в себя любого — без игр и унижений",
+  "description": "Думаешь Vino Galante - правнук легендарного Джакомо Казановы? Да, такие слухи ходят. Но здесь дело не в итальянской крови. Просто Galante - очень «тонкий» соблазнитель. Зная все тонкости этого искусства, он филигранно работает «кончиками пальцев».\n\nА эту книгу (ты не поверишь!!) он написал специально для девушек. Однажды влюбившись, Vino перестал соблазнять. Так у тебя появилась возможность узнать основы тонкого искусства соблазнения из легендарного первоисточника.",
+  "img": "/img/webp/books/1.webp",
+  "price": "520 ",
+  "buttonText": "Хочу знать, как работает мужская психология",
+  "buttonFormat": "PDF + EPUB сразу после оплаты",
+  "pages": "210 страниц",
+  "illust": "11 иллюстраций",
+  "format": "PDF + EPUB",
+  "whoUKnows": [
+    {
+      "text": "Как устроено мужское влечение на самом деле",
+      "svg": "/img/svg/books/1/mdi_heart-outline.svg"
+    },
+    {
+      "text": "Почему красивые девушки часто одиноки — и что с этим делать",
+      "svg": "/img/svg/books/1/f7_exclamationmark.svg"
+    },
+    {
+      "text": "Как флиртовать тонко, не теряя себя",
+      "svg": "/img/svg/books/1/meteor-icons_message.svg"
+    },
+    {
+      "text": "Что делает девушку запоминающейся",
+      "svg": "/img/svg/books/1/lucide_star.svg"
+    },
+    {
+      "text": "Как не попадать в «запас» и быть единственной",
+      "svg": "/img/svg/books/1/stash_target.svg"
+    }
+  ],
+  "href": "https://www.litres.ru/58125553/"
+}
diff --git a/src/pages/books/_slug/_data/2.json b/src/pages/books/_slug/_data/2.json
new file mode 100644
index 0000000..21fb5db
--- /dev/null
+++ b/src/pages/books/_slug/_data/2.json
@@ -0,0 +1,38 @@
+{
+  "id": 2,
+  "title": "Как влюбить в себя любого\nКнига II",
+  "metaTitle": "Как влюбить в себя любого - Книга II",
+  "subtitle": "ТОНКАЯ ИГРА",
+  "subdesc": "💡 Если ты устала от “не готов к отношениям” — начни играть по своим правилам",
+  "description": "Ты бывала свидетелем такого, что у красивой девушки личная жизнь не складывается, а у, казалось бы, дурнушки и семья хорошая, и муж и любит, и обеспечивает? Да такое сплошь и рядом!\n\nХочешь узнать, как построить отношения с любым парнем в наш век, когда вокруг полно красавиц, а все мужчины/парни избалованы?\nОтветы ты найдешь в этой книге.",
+  "img": "/img/webp/books/2.webp",
+  "price": "520 ",
+  "buttonText": "Скачать сейчас — и начать менять игру",
+  "buttonFormat": "PDF + EPUB сразу после оплаты",
+  "pages": "210 страниц",
+  "illust": "11 иллюстраций",
+  "format": "PDF + EPUB",
+  "whoUKnows": [
+    {
+      "text": "Как выстроить притяжение с любым мужчиной",
+      "svg": "/img/svg/books/1/mdi_heart-outline.svg"
+    },
+    {
+      "text": "Как включить его чувства, а не просто понравиться",
+      "svg": "/img/svg/books/1/f7_exclamationmark.svg"
+    },
+    {
+      "text": "Какие фишки работают — и почему",
+      "svg": "/img/svg/books/1/meteor-icons_message.svg"
+    },
+    {
+      "text": "Почему мужчины уходят от «идеальных» и возвращаются к «опасным»",
+      "svg": "/img/svg/books/1/lucide_star.svg"
+    },
+    {
+      "text": "Как говорить и вести себя, чтобы остаться в его сердце",
+      "svg": "/img/svg/books/1/stash_target.svg"
+    }
+  ],
+  "href": "https://www.litres.ru/vino-galante/kak-vlubit-v-sebya-lubogo-tonkaya-igra/"
+}
diff --git a/src/pages/books/_slug/indexBookPage.vue b/src/pages/books/_slug/indexBookPage.vue
new file mode 100644
index 0000000..3da0e2d
--- /dev/null
+++ b/src/pages/books/_slug/indexBookPage.vue
@@ -0,0 +1,214 @@
+<template>
+  <div v-if="book" class="relative z-50 min-h-screen text-white mb-[208px]">
+    <!--верхний блок-->
+    <section
+      class="flex flex-row relative z-40 before:content-[''] before:absolute before:top-[-140px] before:bg-top before:left-0 before:w-[1200px] before:h-[1000px] before:bg-[url(/src/assets/img/webp/vino-galante.webp)] before:bg-no-repeat before:bg-contain mt-40"
+    >
+      <!--левый блок контента-->
+      <section class="relative top-[-20px] min-w-[570px]">
+        <div class="flex flex-col items-center">
+          <img :src="book.img" :alt="book.buttonText" width="100%" height="100%" />
+        </div>
+      </section>
+      <!--правый блок контента-->
+      <section>
+        <div class="w-11/12 h-full flex flex-col justify-start">
+          <div>
+            <UiHeading tag="H1" class="whitespace-pre-line [&]:font-bold" size="300">
+              {{ book.title }}
+            </UiHeading>
+            <UiParagraph class="mb-10" size="250">
+              {{ book.subtitle }}
+            </UiParagraph>
+            <UiParagraph size="250" class="mb-20">
+              {{ book.subdesc }}
+            </UiParagraph>
+            <UiParagraph size="250" class="whitespace-pre-line min-h-62">
+              {{ book.description }}
+            </UiParagraph>
+          </div>
+        </div>
+      </section>
+    </section>
+    <!--средний блок-->
+    <section class="flex flex-row items-center ml-18 justify-between">
+      <!--левый-->
+      <div class="flex flex-col items-center min-h-[310px]">
+        <div class="flex flex-row">
+          <UiParagraph class="[&]:text-6xl">{{ book.price }}&nbsp;</UiParagraph>
+          <img src="/img/svg/books/ruble.svg" />
+        </div>
+        <div class="mr-10 flex items-center flex-col gap-3">
+          <UiButton class="max-w-[380px] !font-normal !px-2 !py-4 mt-24">
+            {{ book.buttonText }}
+          </UiButton>
+          <UiParagraph size="200">
+            {{ book.buttonFormat }}
+          </UiParagraph>
+        </div>
+      </div>
+      <!--правый-->
+      <div class="min-h-[310px]">
+        <!--о книге-->
+        <div>
+          <ul class="flex flex-row mr-14 items-center justify-between lg:whitespace-nowrap">
+            <li class="flex flex-row mr-14 gap-3 items-center">
+              <img src="/img/svg/books/book-pages.svg" alt="страниц" width="100%" height="100%" />
+              <UiParagraph size="250" as="span">
+                {{ book.pages }}
+              </UiParagraph>
+            </li>
+            <li class="flex flex-row mr-14 gap-3 items-center">
+              <img
+                src="/img/svg/books/book-illustrations.svg"
+                alt="иллюстраций"
+                width="100%"
+                height="100%"
+              />
+              <UiParagraph size="250" as="span">
+                {{ book.illust }}
+              </UiParagraph>
+            </li>
+            <li class="flex flex-row mr-14 gap-3 items-center">
+              <img src="/img/svg/books/book-formats.svg" alt="формат" width="100%" height="100%" />
+              <UiParagraph size="250" as="span">
+                {{ book.format }}
+              </UiParagraph>
+            </li>
+          </ul>
+        </div>
+
+        <!--навигация по книге-->
+        <div class="mt-24">
+          <ul class="flex flex-row mr-32 items-end justify-between lg:whitespace-nowrap">
+            <li class="flex flex-row gap-3 items-center">
+              <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
+                <img src="/img/svg/books/read.svg" alt="Читай отрывок" width="100%" height="100%" />
+                <UiParagraph size="250" as="span"> Читай отрывок </UiParagraph>
+              </RouterLink>
+            </li>
+            <li class="flex flex-row gap-3 items-center">
+              <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
+                <img
+                  src="/img/svg/books/download.svg"
+                  alt="Скачай отрывок"
+                  width="100%"
+                  height="100%"
+                />
+                <UiParagraph size="250" as="span"> Скачай отрывок </UiParagraph>
+              </RouterLink>
+            </li>
+            <li class="flex flex-row gap-3 items-center">
+              <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
+                <img src="/img/svg/books/titles.svg" alt="Содержание" width="100%" height="100%" />
+                <UiParagraph size="250" as="span"> Содержание </UiParagraph>
+              </RouterLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <!--нижний блок-->
+    <section class="ml-18 mt-32">
+      <div>
+        <UiHeading tag="H2" size="300" class="text-three"> Что ты узнаешь </UiHeading>
+        <ul class="flex mt-20 flex-row items-center justify-between">
+          <li
+            class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
+            v-for="({ svg, text }, index) in book.whoUKnows"
+            :key="index"
+          >
+            <UiParagraph class="text-center" size="250">
+              {{ text }}
+            </UiParagraph>
+            <img :src="`${svg}`" alt="Вопрос" width="101" height="101" />
+          </li>
+        </ul>
+      </div>
+      <div class="flex justify-center text-center mt-36">
+        <UiParagraph>
+          Или купи на ЛитРес - <br /><a class="text-three" :href="book.href" target="_blank"
+            >Реферальная ссылка для поддержки автора</a
+          >
+        </UiParagraph>
+      </div>
+    </section>
+  </div>
+  <div v-else class="text-white text-center py-20">Книга не найдена.</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiButton from '@/components/UiButton/UiButton.vue'
+import { useHead } from '@vueuse/head'
+
+interface BookDetail {
+  id: number
+  title: string
+  metaTitle: string
+  subtitle: string
+  subdesc: string
+  description: string
+  img: string
+  price: string
+  buttonText: string
+  buttonFormat: string
+  pages: string
+  illust: string
+  format: string
+  whoUKnows: Array<{
+    text: string
+    svg: string
+  }>
+  href: string
+}
+
+const route = useRoute()
+
+const currentBookData = ref<BookDetail | null>(null)
+
+const book = computed(() => currentBookData.value)
+
+const loadBookData = async (slug: string) => {
+  try {
+    const module = await import(`./_data/${slug}.json`)
+    currentBookData.value = module.default as BookDetail
+  } catch (error) {
+    console.error(`Ошибка при загрузке книги с slug '${slug}':`, error)
+    currentBookData.value = null
+  }
+}
+
+watch(
+  () => route.params.slug,
+  async (newSlug) => {
+    if (newSlug) {
+      await loadBookData(newSlug as string)
+    }
+  },
+  { immediate: true },
+)
+
+watch(book, (newBook) => {
+  if (newBook) {
+    useHead({
+      title: `${newBook.metaTitle} | Vino Galante`,
+      meta: [
+        {
+          name: 'description',
+          content: 'Онлайн магазин книг автора Vino Galante',
+        },
+      ],
+      link: [
+        {
+          rel: 'canonical',
+          href: `https://ebook.miduway.space/books/${route.params.slug}`,
+        },
+      ],
+    })
+  }
+})
+</script>
diff --git a/src/pages/mainPage/indexPage.vue b/src/pages/mainPage/indexPage.vue
index 40430d0..ef190bf 100644
--- a/src/pages/mainPage/indexPage.vue
+++ b/src/pages/mainPage/indexPage.vue
@@ -21,5 +21,11 @@ import { useHead } from '@vueuse/head'
 useHead({
   title: 'Vino Galante',
   meta: [{ name: 'description', content: 'Онлайн магазин книг автора Vino Galante' }],
+  link: [
+    {
+      rel: 'canonical',
+      href: `https://ebook.miduway.space/`,
+    },
+  ],
 })
 </script>