feat: add pages for print

package.json

@@ -14,7 +14,9 @@
     "@types/react-dom": "^18.0.11",
     "classnames": "^2.3.2",
     "csstype": "^3.1.2",
+    "downloadjs": "^1.4.7",
     "framer-motion": "^10.11.2",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -53,6 +55,7 @@
     ]
   },
   "devDependencies": {
+    "@types/downloadjs": "^1.4.3",
     "@types/react-slick": "^0.23.10",
     "@types/react-transition-group": "^4.4.5",
     "@typescript-eslint/eslint-plugin": "^5.53.0",

src/components/App/App.tsx

@@ -42,6 +42,7 @@ import { getStickers } from '../../store/stickersSlice';
 import { IStickersState } from '../../interfaces/IStickersState';
 
 import styles from './App.module.scss';
+import { PreviewForDownLoad } from '../PreviewForDownLoad/PreviewForDownLoad';
 
 const App: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -127,6 +128,14 @@ const App: React.FC = () => {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path={'/download'}
+              element={
+                <ProtectedRoute redirectPath='/'>
+                  <PreviewForDownLoad />
+                </ProtectedRoute>
+              }
+            />
             <Route path='*' element={<Navigate to={PAGE_404} />} />
             <Route path={PAGE_404} element={<PageNotFound />} />
             <Route path='/' element={<MainPage />} />

src/components/MainHero/MainHero.module.scss

@@ -57,7 +57,7 @@
 }
 
 .button {
-  @media screen and (max-width: 420px) {
+  @media screen and (max-width: 375px) {
     width: 100%;
     padding: 14px 10px;
   }

src/components/NewSticker/NewSticker.module.scss

@@ -9,6 +9,14 @@
   padding: 40px 40px 40px 30px;
   box-shadow: 3px 3px 10px 0px rgba(212, 73, 0, 0.1);
   border-radius: 10px;
+
+  @media screen and (max-width: 1010px) {
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 24px 16px;
+  }
 }
 
 .card_unactive {
@@ -66,9 +74,13 @@
     grid-template-columns: 255px repeat(1, 1fr);
     grid-template-rows: repeat(4, max-content);
   }
-  @media screen and (max-width: 845px) {
+  @media screen and (max-width: 768px) {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  @media screen and (max-width: 550px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .info_unactive {
@@ -85,9 +97,12 @@
   @media screen and (max-width: 1010px) {
     grid-row: 1/1;
   }
-  @media screen and (max-width: 845px) {
+  @media screen and (max-width: 768px) {
     grid-column: 1/3;
   }
+  @media screen and (max-width: 550px) {
+    grid-column: 1/1;
+  }
 }
 
 .flex {
@@ -110,9 +125,12 @@
   @media screen and (max-width: 1010px) {
     grid-column: 2/3;
   }
-  @media screen and (max-width: 845px) {
+  @media screen and (max-width: 768px) {
     grid-column: 1/3;
   }
+  @media screen and (max-width: 550px) {
+    grid-column: 1/1;
+  }
 }
 .shapes {
   display: flex;

src/components/PreviewForDownLoad/PreviewForDownLoad.module.scss

@@ -0,0 +1,46 @@
+@import '../../utils/_scss-variables.scss';
+
+.page {
+  margin: 30px auto;
+}
+.button {
+  margin-left: 120px;
+}
+
+.container {
+  display: grid;
+  grid-auto-flow: row dense;
+  background-color: #fff;
+  margin: 30px auto;
+}
+
+.border {
+  box-sizing: border-box;
+  background-color: #fff;
+
+  &_rounded_square {
+    border-radius: 5px;
+  }
+
+  &_circle {
+    border-radius: 50%;
+  }
+
+  &_red {
+    border: 1px solid red;
+  }
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  &_rounded_square {
+    border-radius: 5px;
+  }
+
+  &_circle {
+    border-radius: 50%;
+  }
+}