reza added private and public mode

src/assets/icons/emc2.svg

@@ -0,0 +1,92 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="413.887" height="472.182" viewBox="0 0 413.887 472.182">
+  <g id="Group_1797" data-name="Group 1797" transform="translate(-4.76 -1223.402)">
+    <g id="Group_1755" data-name="Group 1755" transform="translate(118.531 -904.584)">
+      <path id="Path_2431" data-name="Path 2431" d="M612.7,262.612a.8.8,0,0,0-.374-.052c-.309-.126-.617-.253-.931-.361a16.492,16.492,0,0,0,.825-10.1,19.667,19.667,0,0,0-6.281-9.69c-7.017-6.049-16.894-6.823-25.377-3.73a.735.735,0,0,0-.391.132l-.03.022c-.149.057-.3.106-.45.165a.724.724,0,0,0-.454.526c-5.764,4.65-8.157,12.872-6.862,20.043.022.123.056.241.081.364a24.671,24.671,0,0,0-14.337,16.11,23.524,23.524,0,0,0,.251,13.762,15.9,15.9,0,0,0,8.142,9.021c7.482,3.739,17.6,3.4,24.323-1.793a13.324,13.324,0,0,0,1.676,1.268,20.671,20.671,0,0,0,11.288,2.74,19.356,19.356,0,0,0,12.183-4.107,19.979,19.979,0,0,0,6.4-9.914c2.587-8.913-.378-20.716-9.683-24.409M580.913,240.22c6.989-2.6,15.012-2.524,21.463,1.5a19.7,19.7,0,0,1,7.034,7.479,14.5,14.5,0,0,1,.721,11.884c-.081.226-.17.448-.258.672a19.475,19.475,0,0,0-15.146,2.757,13.5,13.5,0,0,0-4.4-3.418,26.08,26.08,0,0,0-8-2.068,19.528,19.528,0,0,0-5.647.051.808.808,0,0,0-.826-.267c-.649.16-1.286.357-1.915.569-1.313-6.963,1.173-15,6.981-19.163m20.239,31.6a18.481,18.481,0,0,1-2.4,1.165c-.092-.419-.185-.837-.3-1.25-.106-.385-.235-.764-.361-1.143a.543.543,0,0,0,.09-.132,52.424,52.424,0,0,1,2.969-6.685.691.691,0,0,0,.077-.423,17.694,17.694,0,0,1,4.183-.548q-2.13,4.239-4.21,8.5a.707.707,0,0,0-.047.514m-24.45-6.155a5.931,5.931,0,0,1,.214-.575c.083-.2.174-.387.27-.575.2-.4.422-.778.644-1.161l1.5-2.593a.629.629,0,0,0,.071-.35,19.84,19.84,0,0,1,2.283.121c.792.087,1.592.206,2.391.345a10.018,10.018,0,0,1-1.188,1.963c-.487.713-.964,1.434-1.416,2.171a21.513,21.513,0,0,0-1.881,3.855,18.113,18.113,0,0,1-2.946-3.073,1.075,1.075,0,0,0,.059-.128m-.338-2.9c-.274.474-.53.95-.755,1.44a14.466,14.466,0,0,1-1.108-2.536c-.051-.157-.087-.321-.134-.479a.731.731,0,0,0,.459-.02,12.514,12.514,0,0,1,2.84-.657q-.652,1.125-1.3,2.252m6.6,2.784c.425-.688.879-1.357,1.337-2.022a9.047,9.047,0,0,0,1.244-2.117.969.969,0,0,0,.044-.231,22.688,22.688,0,0,1,2.77.8c.349.128.674.289,1,.443a.762.762,0,0,0-.262.223,74.51,74.51,0,0,0-5.673,8.664.8.8,0,0,0-.079.2c-.652-.385-1.3-.789-1.936-1.232-.187-.13-.361-.268-.542-.4a19.644,19.644,0,0,1,2.094-4.324m1.881,6.425a71.642,71.642,0,0,1,5.456-8.325.746.746,0,0,0,.138-.654,12.829,12.829,0,0,1,2.982,2.452c-.488.382-.965.778-1.416,1.208a20.906,20.906,0,0,0-4.658,6.725,19.782,19.782,0,0,1-2.709-1.161.825.825,0,0,0,.207-.245m4.024,1.837a20.166,20.166,0,0,1,2.423-4.032,17.9,17.9,0,0,1,3.11-3.1,16.233,16.233,0,0,1,1.875,3.478,22.179,22.179,0,0,1,.993,3.32,17.945,17.945,0,0,1-3.929.7,15.282,15.282,0,0,1-4.472-.374m2.181,1.933-2.208,2.435c-.517.57-1.039,1.137-1.551,1.711-.074.081-.144.166-.214.25a22.474,22.474,0,0,1,1.164-4.807,15.628,15.628,0,0,0,1.577.294c.412.054.822.091,1.232.117m-3.495,6.579a4.521,4.521,0,0,1,1.013-1.509c.52-.577,1.044-1.151,1.566-1.727l3.018-3.327a19.164,19.164,0,0,0,3.773-.568q-5.106,5.529-9.782,11.429a21.873,21.873,0,0,1-.278-3.864.73.73,0,0,0,.69-.434m.3,5.918q4.716-5.993,9.88-11.606a24.144,24.144,0,0,1-.1,4.874.731.731,0,0,0-.513.258l-8.526,9.7c-.179-.384-.348-.777-.5-1.184q-.323-.888-.559-1.805a.731.731,0,0,0,.32-.234m9.4-19.75a18.031,18.031,0,0,0-1.557-2.723,18.681,18.681,0,0,1,3.6-1.808q-1.125,2.215-2.038,4.531m9.684-5.253a.737.737,0,0,0,.079-.375,16.23,16.23,0,0,1,2.217.342,20.138,20.138,0,0,1-5.807,7.124q1.741-3.552,3.511-7.091m-37.48,35.137a15.632,15.632,0,0,1-8.514-6.632c-2.178-3.783-2.545-8.6-1.855-12.836A23.046,23.046,0,0,1,572.839,261.5a16.753,16.753,0,0,0,5.154,8.136,26.965,26.965,0,0,0,8.75,5.267,24.316,24.316,0,0,0-.835,13.447,16.683,16.683,0,0,0,3.78,7.562c-5.686,4.181-13.573,4.842-20.226,2.467m21.454-3.455a13.105,13.105,0,0,1-1.547-2.029.809.809,0,0,0,.171-.129l7.635-8.685a21.3,21.3,0,0,1-4.841,9.461,17.578,17.578,0,0,1-1.418,1.382m30.57-11.22c-1.106,7.89-6.737,14.436-14.793,15.551a21.9,21.9,0,0,1-11.1-1.137,13.385,13.385,0,0,1-3.538-2.111c5.87-5.386,8.2-13.692,6.982-21.463a21.328,21.328,0,0,0,11.3-10.02c.153-.29.3-.586.437-.882q.682.231,1.351.527a.773.773,0,0,0,.347.07c7.316,3.213,10.058,12,9.01,19.465" transform="translate(-379 2005)" fill="rgba(112,112,112,0.1)"/>
+      <path id="Path_2432" data-name="Path 2432" d="M597.823,252.478a3.237,3.237,0,0,0-4.3-1.967,4.378,4.378,0,0,0-2.239,1.858q-.666-4.164-.924-8.377a.784.784,0,0,0-1.562.136,85.835,85.835,0,0,0,1.419,11.172.839.839,0,0,0,.8.691c2.457,2.3,7.937.209,6.811-3.513m-5.882,2.208a4.034,4.034,0,0,1,1.685-2.508,1.774,1.774,0,0,1,2.677.7c.787,2.222-3.1,3.348-4.362,1.813" transform="translate(-379 2005)" fill="rgba(112,112,112,0.1)"/>
+      <path id="Path_2433" data-name="Path 2433" d="M578.158,280.983c-2.661-.315-3.68-3.171-4.437-5.351a.71.71,0,0,0-.464-.44.78.78,0,0,0-.97-1.059A10.086,10.086,0,0,0,568,277.351c-1.038,1.364-1.955,3.364-.725,4.915a2.314,2.314,0,0,0,2.279.86,3.532,3.532,0,0,0,2.205-1.628,12.055,12.055,0,0,0,1.434-2.989c.949,1.978,2.343,3.739,4.685,4.016,1,.118,1.287-1.424.284-1.542M570.9,279.9c-.367.675-1.737,2.66-2.495,1.253-.6-1.116.517-2.516,1.218-3.307a8.336,8.336,0,0,1,2.568-1.939A11.553,11.553,0,0,1,570.9,279.9" transform="translate(-379 2005)" fill="rgba(112,112,112,0.1)"/>
+      <path id="Path_2434" data-name="Path 2434" d="M606.743,277.538a1.194,1.194,0,0,1,1.737-.058,4.856,4.856,0,0,1,1.273,1.993c.407.916,1.882.378,1.469-.548-.69-1.552-1.656-3.265-3.565-3.361-1.964-.1-2.933,2.008-3.477,3.581a11.562,11.562,0,0,0-.615,5.518c.26,1.655.974,3.854,2.876,4.175,2.191.369,3.644-1.483,4.513-3.216.453-.9-.967-1.572-1.418-.67a5.041,5.041,0,0,1-1.481,2,1.658,1.658,0,0,1-1.767.185A3.7,3.7,0,0,1,605.2,284.9a8.3,8.3,0,0,1-.136-2.541,9.2,9.2,0,0,1,1.684-4.819" transform="translate(-379 2005)" fill="rgba(112,112,112,0.1)"/>
+    </g>
+    <g id="Group_1752" data-name="Group 1752" transform="translate(-956.831 -461.756) rotate(-21)">
+      <path id="Path_2495" data-name="Path 2495" d="M636.791,102.653a4.848,4.848,0,0,0-7.188.35,5.133,5.133,0,0,0,1.047,7.239,5.628,5.628,0,0,0,4.554.876.585.585,0,0,0,.34-.745.593.593,0,0,0-.745-.341,4.218,4.218,0,0,1-5.006-3,3.773,3.773,0,0,1,3.024-4.627,3.712,3.712,0,0,1,3.229,1.13.583.583,0,0,0,.816-.071.594.594,0,0,0-.071-.816" transform="translate(-379.232 1978.926)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2496" data-name="Path 2496" d="M646.29,101.075c0-.745-1.151-.639-1.154.1q-.021,4.59.156,9.178c.029.746,1.183.643,1.154-.1q-.177-4.588-.156-9.179" transform="translate(-385.248 1979.166)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2497" data-name="Path 2497" d="M652.928,101.348a.6.6,0,0,0-.464-.675.584.584,0,0,0-.675.465c-.092,1.608-.1,3.217-.05,4.825q-2.873-.031-5.739-.21a.6.6,0,0,0-.675.465.583.583,0,0,0,.465.675q3,.191,6,.222c.045.8.1,1.59.185,2.383a.58.58,0,0,0,1.155-.1,50.263,50.263,0,0,1-.2-8.05" transform="translate(-385.315 1979.13)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2498" data-name="Path 2498" d="M686.436,102.928a5.472,5.472,0,0,0-2.289-1.783,4.765,4.765,0,0,0-2.629-.406.731.731,0,0,0-.428-.019,3.217,3.217,0,0,0-1.9,1.365l-2.578-1.365c-.429-.227-.883-.345-.948-.876-.052-.432-.029-.882-.039-1.316q-.075-3.022-.148-6.044c-.018-.746-1.172-.642-1.154.1q.083,3.424.167,6.85a2.97,2.97,0,0,0,.208,1.243,2.047,2.047,0,0,0,.982.857q1.5.8,2.995,1.585a4.6,4.6,0,0,0,2.931,5.95,4.318,4.318,0,0,0,4.975-1.321,4.25,4.25,0,0,0-.145-4.821m-.553,3.7a2.929,2.929,0,0,1-3.38,1.492,3.641,3.641,0,0,1-2.86-2.667,3.176,3.176,0,0,1,1.322-3.448.513.513,0,0,0,.362-.015c1.252-.52,2.911.289,3.8,1.178a3.186,3.186,0,0,1,.755,3.46" transform="translate(-395.846 1982.285)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2499" data-name="Path 2499" d="M700.462,85.756c-.015-.159-.045-.318-.05-.478s.064-.248-.073-.18c.658-.331.263-1.421-.4-1.086-.683.343-.716.978-.645,1.664a23,23,0,0,1,.113,2.641c-.019,1.817-.166,3.634-.271,5.448-.043.736,1.1.952,1.14.21.093-1.583.2-3.168.26-4.753.029-.79.04-1.582.006-2.373-.015-.364-.039-.729-.075-1.092" transform="translate(-404.852 1985.198)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2500" data-name="Path 2500" d="M707.317,84.106a.592.592,0,0,0-.526.627q-.047,2.22-.189,4.435c-2.174-.1-4.35-.125-6.525-.052-.746.025-.643,1.179.1,1.153q3.171-.107,6.344.044c-.065.879-.136,1.757-.222,2.634-.073.738,1.067.952,1.14.21q.417-4.252.506-8.525a.583.583,0,0,0-.627-.527" transform="translate(-405.011 1985.142)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2501" data-name="Path 2501" d="M721.273,96.513l-4.417-.138c.213-.233.424-.468.629-.708a17.53,17.53,0,0,0,1.236-1.61,8.283,8.283,0,0,0,1.578-3.549c.142-1.529-1.3-2.253-2.633-1.9a4.676,4.676,0,0,0-1.892,1.069c-.452.408-1.176,1.143-.643,1.773.439.519,1.274,0,1.033-.529a2.244,2.244,0,0,1,.336-.347,4.124,4.124,0,0,1,.663-.494,2.055,2.055,0,0,1,1.56-.381c.576.189.445.775.3,1.229a8.98,8.98,0,0,1-.706,1.592,15.69,15.69,0,0,1-2.076,2.811c-.36.4-.937.848-.877,1.452.071.722.8.721,1.351.738l4.66.146a.582.582,0,0,0,.526-.627.593.593,0,0,0-.627-.527" transform="translate(-410.593 1983.539)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2502" data-name="Path 2502" d="M704.354,76.976q-3.406-2.083-6.739-4.282a.6.6,0,0,0-.816.071.583.583,0,0,0,.071.816q3.455,2.282,6.988,4.442a.584.584,0,0,0,.771-.276.594.594,0,0,0-.276-.771" transform="translate(-403.958 1989.331)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2503" data-name="Path 2503" d="M702.833,42.6l-5.687,3.667c-.627.4.043,1.35.669.946l5.688-3.667c.626-.4-.043-1.349-.67-.945" transform="translate(-404.041 2000.247)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2504" data-name="Path 2504" d="M718.982,34.435a22.131,22.131,0,0,1,.1-4.356c.089-.738-1.05-.95-1.139-.21A23.835,23.835,0,0,0,717.8,34.2c.055.889.241,1.81.254,2.715-.687-.965-1.359-1.941-1.994-2.943-.811-1.278-1.476-2.813-2.684-3.774a.584.584,0,0,0-.941.339,55.13,55.13,0,0,0-.194,8.345c.039.745,1.193.643,1.153-.1A53.428,53.428,0,0,1,713.478,32c.185.259.356.53.522.806.4.661.795,1.32,1.209,1.971q1.31,2.053,2.769,4.006a.587.587,0,0,0,1.043-.23,11.053,11.053,0,0,0-.038-4.122" transform="translate(-409.586 2005)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2505" data-name="Path 2505" d="M637.169,31.957a5.772,5.772,0,0,0-6.629-1.462.515.515,0,0,0-.1,0c-2.17.394-2.778,3.452-2.412,5.271a5.119,5.119,0,0,0,9.207,1.99,4.775,4.775,0,0,0-.061-5.8m-.508,4.467a3.959,3.959,0,0,1-7.206.024,4.339,4.339,0,0,1-.239-2.806c.15-.675.481-1.787,1.269-1.977a.492.492,0,0,0,.366-.043,4.5,4.5,0,0,1,4.817.544,3.015,3.015,0,0,1,1.317,2.04,4.013,4.013,0,0,1-.323,2.218" transform="translate(-379 2004.787)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2506" data-name="Path 2506" d="M647.625,73.778Q642.5,76.6,637.439,79.536a19.024,19.024,0,0,0-2.215,1.315,1.689,1.689,0,0,0-.531,1.634c.159,1.985.339,3.968.508,5.953a.58.58,0,0,0,1.154-.1q-.224-2.63-.448-5.26a3.106,3.106,0,0,1-.056-1.139c.11-.313.659-.52.934-.682q1.143-.669,2.288-1.331,4.582-2.65,9.222-5.2c.652-.359-.022-1.3-.669-.945" transform="translate(-381.452 1988.92)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2507" data-name="Path 2507" d="M679.524,44.444a.571.571,0,0,0-.869-.429q-6.877-3.475-13.586-7.266a.518.518,0,0,0-.775.366q-2.876,1.437-5.632,3.1-1.419.86-2.8,1.78a10.239,10.239,0,0,1-2.731,1.664l-3.027-1.5c-.495-.245-.991-.489-1.485-.734a5.024,5.024,0,0,1-1.239-.793c-.546-.51-1.289.379-.745.887a11.553,11.553,0,0,0,2.871,1.636l2.78,1.374q-.516,8.1-.771,16.219c-.017.539.583.626.924.354q6.258,4.118,12.675,7.986a.625.625,0,0,0,.106.065c.128.076.254.155.381.231.455.273.831-.178.785-.6q6.7-4.021,13.03-8.611s.006-.009.011-.013a.5.5,0,0,0,.324-.559c-.641-5.038.213-10.11-.227-15.157M665.5,67.972q-6.457-3.893-12.752-8.043a.507.507,0,0,0-.051-.021q.248-7.574.729-15.139a8.611,8.611,0,0,0,2.376-1.338q1.46-1,2.966-1.929,3.04-1.878,6.248-3.462,6.576,3.7,13.315,7.107a.576.576,0,0,0,.089.024c.315,4.725-.388,9.469.149,14.184q-6.341,4.595-13.067,8.616" transform="translate(-385.724 2002.363)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2508" data-name="Path 2508" d="M642.4,70.108q-4.868,2.724-9.572,5.725c-.629.4.041,1.346.669.945q4.7-3,9.573-5.725c.649-.363-.024-1.306-.67-.945" transform="translate(-380.687 1990.253)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2509" data-name="Path 2509" d="M669.575,45.554a85.148,85.148,0,0,1-8.88,5.757c-.648.366.025,1.309.669.945a85.051,85.051,0,0,0,8.88-5.757c.6-.443-.068-1.39-.669-.945" transform="translate(-390.802 1999.18)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2510" data-name="Path 2510" d="M669.528,73.162a52.839,52.839,0,0,1-7.8-4.272.6.6,0,0,0-.816.071.583.583,0,0,0,.071.816,54.516,54.516,0,0,0,8.048,4.432c.682.3,1.177-.745.495-1.048" transform="translate(-390.929 1990.712)" fill="rgba(219,219,219,0.47)"/>
+      <path id="Path_2511" data-name="Path 2511" d="M687.859,54.159q-.03,4.789-.06,9.579c-.005.745,1.149.639,1.154-.1q.03-4.788.06-9.579c0-.745-1.149-.639-1.154.1" transform="translate(-400.738 1996.236)" fill="rgba(219,219,219,0.47)"/>
+    </g>
+    <g id="Group_1751" data-name="Group 1751" transform="translate(-216.98 -751.423)" opacity="0.59">
+      <path id="Path_2293" data-name="Path 2293" d="M626.994,421.155c.825-.035.711-1.311-.111-1.276l-9.737.405a.626.626,0,0,0-.384,1.074q-.133,11.377-.048,22.756c0,.01.005.016.005.027a.633.633,0,0,0,.663.74q4.68-.29,9.373-.258c.824.006.707-1.27-.112-1.276q-4.331-.029-8.655.22c-.018-2.526-.017-5.053-.019-7.58q2.4-.144,4.81-.242a.641.641,0,1,0-.112-1.276c-1.568.061-3.135.143-4.7.237q0-6.588.068-13.176l8.959-.374" transform="translate(-379 2002.125)" fill="rgba(112,112,112,0.24)"/>
+      <path id="Path_2294" data-name="Path 2294" d="M647.43,433.465q-3.8-.123-7.6.074c-.824.042-.711,1.318.112,1.276q3.795-.2,7.6-.073a.643.643,0,0,0,.582-.694.655.655,0,0,0-.693-.582" transform="translate(-388.568 1996.415)" fill="rgba(112,112,112,0.24)"/>
+      <path id="Path_2295" data-name="Path 2295" d="M648.341,442.67a69.228,69.228,0,0,0-7.891.145.641.641,0,0,0,.111,1.276,69.233,69.233,0,0,1,7.891-.145.644.644,0,0,0,.582-.694.656.656,0,0,0-.694-.582" transform="translate(-388.828 1992.534)" fill="rgba(112,112,112,0.24)"/>
+      <path id="Path_2296" data-name="Path 2296" d="M679.885,426.788c-2.4-.59-4.677,1.1-6.038,2.925a12.6,12.6,0,0,0-1.806,3.567c-.03-.143-.05-.288-.083-.431a12.908,12.908,0,0,0-.964-3.128c-1.006-1.933-3.045-1.886-4.516-.476a13.3,13.3,0,0,0-3.425,6.7l.024-5.814c0-.824-1.273-.707-1.276.112q-.026,6.268-.051,12.534c0,.746,1.121.74,1.268.061.823-3.8,1.042-8,3.261-11.327a4.834,4.834,0,0,1,1.98-1.962c.956-.364,1.5.42,1.8,1.211a23.284,23.284,0,0,1,1.219,5.886.644.644,0,0,0,1.269.06,14.614,14.614,0,0,1,1.882-5.579c1.05-1.679,3.086-3.692,5.265-3.062,2.384.69,2.144,3.835,1.928,5.744a69.4,69.4,0,0,1-1.347,7.248c-.18.806,1.081,1.034,1.261.231a52.171,52.171,0,0,0,1.488-8.931c.1-2.278-.622-4.951-3.134-5.566" transform="translate(-398.049 1999.262)" fill="rgba(112,112,112,0.24)"/>
+      <path id="Path_2297" data-name="Path 2297" d="M711.894,428.4c-.4-1.128-.363-2.4-.987-3.449a3.033,3.033,0,0,0-2.643-1.443c-2.6-.018-4.111,2.464-4.973,4.593a16.907,16.907,0,0,0-1.119,8.281c.274,2.312,1.069,5.763,3.926,6,3.33.274,3.956-3.8,4.921-6.043.327-.757-.832-1.306-1.158-.548a35.326,35.326,0,0,1-1.419,3.792c-.649,1.13-1.947,2.03-3.191,1.164-1.192-.83-1.52-2.581-1.727-3.92a15.574,15.574,0,0,1,.925-8.175,7.679,7.679,0,0,1,2.061-3.217c.871-.694,2.36-1.01,3.163-.028.741.907.637,2.373,1.02,3.442a.641.641,0,0,0,1.2-.447" transform="translate(-415.05 2000.594)" fill="rgba(112,112,112,0.24)"/>
+      <path id="Path_2298" data-name="Path 2298" d="M726.056,421.554,723,421.548c.384-.923.9-1.793,1.273-2.721a10.2,10.2,0,0,0,.844-3.8,2.33,2.33,0,0,0-.589-1.7,1.679,1.679,0,0,0-1.689-.076,5.155,5.155,0,0,0-2.407,2.684c-.382.733.778,1.277,1.158.548a3.928,3.928,0,0,1,1.7-2.031c.09-.038.192-.052.279-.088.034-.014.149,0,.162-.028a1.861,1.861,0,0,1,.109.652,5.728,5.728,0,0,1-.178,1.485,11.957,11.957,0,0,1-.974,2.769,18.755,18.755,0,0,0-1.222,2.826c-.13.434.315.753.686.753l4.015.008c.825,0,.708-1.274-.111-1.276" transform="translate(-422.769 2005)" fill="rgba(112,112,112,0.24)"/>
+    </g>
+    <g id="Group_1754" data-name="Group 1754" transform="translate(-417.63 -501.477) rotate(-14)">
+      <path id="Path_2299" data-name="Path 2299" d="M674.559,245.58a18.729,18.729,0,0,0-3.71-10.32,14.56,14.56,0,0,0-8.7-5.4,12.8,12.8,0,0,0-2.57-.2c-1.37-4.009-2.058-8.2-3.145-12.29.457-.01.914-.019,1.369-.032a1.665,1.665,0,0,0,1.148-.34,3.394,3.394,0,0,0,.63-2.818c-.183-1.019-1.068-1.3-1.987-1.445a24.88,24.88,0,0,0-3.531-.188,63.1,63.1,0,0,0-7.151.265,7.838,7.838,0,0,0-3.087.59,2.128,2.128,0,0,0-.966,2.1,2.387,2.387,0,0,0,1.4,2.219,5.565,5.565,0,0,0,1.617.089l1.457,0q-.18,6.33-.359,12.66a22.253,22.253,0,0,0-11.743,15.077,15.079,15.079,0,0,0,1.558,11.073,19.875,19.875,0,0,0,7.968,7.084,21.339,21.339,0,0,0,20.433-.176,18.688,18.688,0,0,0,9.373-17.939m-2.39,8.8a17.789,17.789,0,0,1-5.814,7.2,19.873,19.873,0,0,1-18.9,2.251,20.912,20.912,0,0,1-8.343-5.7,13.371,13.371,0,0,1-3.286-9.935,21.07,21.07,0,0,1,9.669-15.808,20.006,20.006,0,0,1,2.116-1.175l.016-.01a.506.506,0,0,0,.092-.059.49.49,0,0,0,.213-.4q.186-6.52.369-13.04a.51.51,0,0,0-.34-.887l-1.69,0a7.111,7.111,0,0,1-1.607-.019c-.813-.2-1.1-1.676-.643-2.317a1.84,1.84,0,0,1,1.317-.527c.512-.07,1.027-.125,1.541-.176q1.6-.16,3.213-.228a55.848,55.848,0,0,1,6.525.037,7.188,7.188,0,0,1,1.363.2c.465.127.615.274.67.766a3.008,3.008,0,0,1-.027.74,1.955,1.955,0,0,1-.23.8c-.205.274-.486.244-.795.252-.561.015-1.122.027-1.685.04a.408.408,0,0,0-.415.34.479.479,0,0,0-.109.46c1.2,4.373,1.884,8.884,3.4,13.169a.46.46,0,0,0,.7.228.512.512,0,0,0,.146.026,12.91,12.91,0,0,1,9.011,3.642,16.408,16.408,0,0,1,4.689,9.186,19.489,19.489,0,0,1-1.161,10.925M643.574,256.5v.068a.359.359,0,0,0,.058.183.368.368,0,0,0,.114.148.363.363,0,0,0,.165.086.359.359,0,0,0,.19.026l.128-.029a.487.487,0,0,0,.2-.144l.068-.105a.491.491,0,0,0,.045-.251v-.068a.5.5,0,0,0-.529-.443l-.127.029a.482.482,0,0,0-.2.144l-.067.105a.477.477,0,0,0-.045.251m20.251-13.993h.068a.36.36,0,0,0,.183-.058.433.433,0,0,0,.234-.279.362.362,0,0,0,.026-.191c-.009-.042-.019-.085-.029-.128a.485.485,0,0,0-.144-.2l-.105-.067a.484.484,0,0,0-.251-.045h-.068a.537.537,0,0,0-.331.172.379.379,0,0,0-.087.165.383.383,0,0,0-.025.191l.029.127a.476.476,0,0,0,.144.2l.105.068a.484.484,0,0,0,.251.045" transform="translate(-379 2005)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2300" data-name="Path 2300" d="M663.292,215.05a46.956,46.956,0,0,1-11.8.486c-.621-.053-.8.905-.176.96a47.971,47.971,0,0,0,12.06-.474c.614-.1.535-1.075-.085-.971" transform="translate(-385.09 2004.052)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2301" data-name="Path 2301" d="M664.581,242.413a21.679,21.679,0,0,1-7.264.082.488.488,0,0,0-.176.959,22.478,22.478,0,0,0,7.525-.07c.613-.11.534-1.083-.085-.971" transform="translate(-387.293 1993.705)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2302" data-name="Path 2302" d="M672.616,261.341c-1.64-1.171-3.155.718-3.986,1.963a20.707,20.707,0,0,1-3.472,4.52,7.492,7.492,0,0,1-5.439,2c-.48-.05-.936-.18-1.094-.685a4.718,4.718,0,0,1-.043-1.363,9.421,9.421,0,0,0-.483-2.961,3.449,3.449,0,0,0-3.541-2.552c-1.683.014-3.354.917-5.04.544-1.869-.414-1.687-2.588-2.417-3.961a3.541,3.541,0,0,0-3.924-1.654,5.852,5.852,0,0,0-3.709,3.231,16.542,16.542,0,0,0-.994,2.535.469.469,0,0,0-.124.228,13.216,13.216,0,0,0,2.26,10.275,17.213,17.213,0,0,0,8.567,6.153c6.889,2.348,15.083,1.011,20.171-4.415a16.206,16.206,0,0,0,4.311-9.088c.177-1.534.39-3.751-1.042-4.773m-.315,6.674a15.1,15.1,0,0,1-1.98,4.38c-3.885,5.889-11.193,8.29-17.982,7.048-6.679-1.222-13.1-6.224-13.288-13.481a10.754,10.754,0,0,1,.189-2.239l0,0c.558-1.728,1.153-3.633,2.625-4.815,1.189-.955,3.221-1.282,4.22.144.853,1.218.633,2.887,1.769,3.969,1.089,1.037,2.747.932,4.111.655s3.378-.976,4.529.2a4.81,4.81,0,0,1,1,2.556c.142.888,0,1.785.132,2.663.257,1.744,2.139,1.857,3.556,1.655a9.012,9.012,0,0,0,4.536-2.127,16.342,16.342,0,0,0,3.168-3.921,11.557,11.557,0,0,1,1.566-2.135c.349-.348.809-.756,1.336-.571a1.473,1.473,0,0,1,.835,1.008,9.913,9.913,0,0,1-.326,5.013" transform="translate(-380.233 1988.146)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2303" data-name="Path 2303" d="M662.689,250.723a4.545,4.545,0,0,0-5.431-1.231.456.456,0,0,0-.285.374,5.294,5.294,0,0,0-1.943,4.02,3.688,3.688,0,0,0,3.335,3.765,4.785,4.785,0,0,0,4.492-2.128,4.344,4.344,0,0,0-.167-4.8m-.435,3.874a3.748,3.748,0,0,1-3.233,2.107,3.085,3.085,0,0,1-2.106-.653,2.742,2.742,0,0,1-.9-1.864,4.313,4.313,0,0,1,2.133-3.971,3.569,3.569,0,0,1,3.416.7,3.341,3.341,0,0,1,.687,3.683" transform="translate(-386.641 1991.177)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2304" data-name="Path 2304" d="M673.525,259.378a2.319,2.319,0,0,0-2.874-.272.331.331,0,0,0-.062.064,2.016,2.016,0,0,0-.91,1.869,2.073,2.073,0,0,0,.6,1.247,2.681,2.681,0,0,0,1.31.657,2.121,2.121,0,0,0,2.344-1.065,2.167,2.167,0,0,0-.409-2.5m-.353,1.775c0,.019-.036.136-.025.1a1.2,1.2,0,0,1-.413.558,1.552,1.552,0,0,1-.149.1l-.031.015c-.037.016-.073.032-.112.045s-.076.026-.114.037c.022-.006.084-.011-.014,0a1.52,1.52,0,0,1-.292.018,1.924,1.924,0,0,1-.912-.311,1.148,1.148,0,0,1-.254-.241c-.02-.028-.038-.057-.057-.085l-.023-.03s0,0-.006-.015a1.457,1.457,0,0,1-.093-.24c0-.012-.012-.053-.015-.068-.007-.044-.014-.088-.017-.133s0-.069,0-.1a.182.182,0,0,0,0-.037.19.19,0,0,0,.009-.039,1.041,1.041,0,0,1,.136-.4c.045-.085.025-.04.012-.021a1.4,1.4,0,0,1,.091-.119c.021-.025.044-.049.067-.074s.022-.026.026-.03a.2.2,0,0,0,.029-.02,1,1,0,0,1,.414-.218.4.4,0,0,0,.157-.093,1.335,1.335,0,0,1,1.137.207,1.55,1.55,0,0,1,.134.121l.044.05c.021.026.04.052.06.08s.046.069.069.1a.379.379,0,0,1,.02.033,1.6,1.6,0,0,1,.09.214c.011.032.02.063.029.095l.007.022a.139.139,0,0,0,0,.02,1.759,1.759,0,0,1,.024.221c0,.024,0,.049,0,.073s0,.037-.005.044c-.007.04-.011.081-.02.122" transform="translate(-392.177 1987.53)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2305" data-name="Path 2305" d="M672.562,252.747c-.627,0-.539.971.085.971s.539-.971-.085-.971" transform="translate(-393.109 1989.794)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2306" data-name="Path 2306" d="M677.107,249.89l-.059-.112a.492.492,0,0,0-.189-.159l-.121-.039a.49.49,0,0,0-.259.023l-.136.068a.363.363,0,0,0-.157.1.375.375,0,0,0-.114.147.545.545,0,0,0-.016.379l.058.111a.49.49,0,0,0,.19.159l.12.039a.508.508,0,0,0,.259-.022l.136-.068a.545.545,0,0,0,.271-.249.36.36,0,0,0,.042-.185.364.364,0,0,0-.026-.193" transform="translate(-394.582 1990.995)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2307" data-name="Path 2307" d="M679.115,255.922l-.068-.136a.378.378,0,0,0-.1-.158.363.363,0,0,0-.147-.113.353.353,0,0,0-.186-.042.369.369,0,0,0-.193.025l-.112.059a.5.5,0,0,0-.159.19c-.013.04-.026.08-.039.12a.489.489,0,0,0,.022.259l.068.136a.378.378,0,0,0,.1.157.367.367,0,0,0,.149.113.363.363,0,0,0,.185.042.377.377,0,0,0,.193-.026l.112-.06a.493.493,0,0,0,.16-.19c.012-.04.026-.08.038-.12a.494.494,0,0,0-.022-.258" transform="translate(-395.366 1988.764)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2308" data-name="Path 2308" d="M646.755,280.143a.368.368,0,0,0-.114-.147.358.358,0,0,0-.165-.086.362.362,0,0,0-.191-.026l-.128.029a.485.485,0,0,0-.2.143l-.067.105a.485.485,0,0,0-.045.251v.068a.36.36,0,0,0,.058.183.355.355,0,0,0,.114.147.365.365,0,0,0,.165.087.362.362,0,0,0,.191.026l.128-.029a.491.491,0,0,0,.2-.144l.067-.105a.492.492,0,0,0,.045-.251v-.068a.372.372,0,0,0-.058-.183" transform="translate(-383.166 1979.534)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2309" data-name="Path 2309" d="M650.328,276.834c-.627,0-.539.971.085.971s.539-.971-.085-.971" transform="translate(-384.701 1980.686)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2310" data-name="Path 2310" d="M653.139,287.342c-.02-.038-.039-.075-.06-.112a.484.484,0,0,0-.189-.159l-.135-.068a.356.356,0,0,0-.186-.042.5.5,0,0,0-.463.274c-.014.04-.026.08-.039.121a.489.489,0,0,0,.023.259l.058.111a.5.5,0,0,0,.19.159l.135.068a.366.366,0,0,0,.185.042.379.379,0,0,0,.193-.026.541.541,0,0,0,.271-.249c.012-.04.026-.08.038-.12a.486.486,0,0,0-.022-.258" transform="translate(-385.518 1976.858)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2311" data-name="Path 2311" d="M658.95,282.229a.484.484,0,0,0-.143-.2l-.068-.068a.37.37,0,0,0-.165-.086.375.375,0,0,0-.191-.025.371.371,0,0,0-.183.058.366.366,0,0,0-.147.114l-.068.105a.492.492,0,0,0-.045.251c.01.043.019.085.029.127a.489.489,0,0,0,.144.2l.068.068a.5.5,0,0,0,.687-.06l.068-.105a.49.49,0,0,0,.045-.251Z" transform="translate(-387.741 1978.792)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2312" data-name="Path 2312" d="M660.682,288.387c-.627,0-.539.971.085.971s.539-.971-.085-.971" transform="translate(-388.617 1976.317)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2313" data-name="Path 2313" d="M667.876,288.277c-.628,0-.539.971.085.971s.539-.971-.085-.971" transform="translate(-391.337 1976.359)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2314" data-name="Path 2314" d="M644.334,273.673c-.627,0-.539.971.085.971s.539-.971-.085-.971" transform="translate(-382.435 1981.881)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2315" data-name="Path 2315" d="M647.713,267.134c-.628,0-.539.971.085.971s.538-.971-.085-.971" transform="translate(-383.712 1984.354)" fill="rgba(112,112,112,0.15)"/>
+      <path id="Path_2316" data-name="Path 2316" d="M648.391,273.713a.5.5,0,0,0-.47-.26l-.128.029a.491.491,0,0,0-.2.144l-.067.1a.487.487,0,0,0-.045.252v.067a.36.36,0,0,0,.058.183.355.355,0,0,0,.114.147.539.539,0,0,0,.356.113l.128-.029a.491.491,0,0,0,.2-.144l.067-.1a.5.5,0,0,0,.045-.252V273.9a.373.373,0,0,0-.058-.183" transform="translate(-383.785 1981.965)" fill="rgba(112,112,112,0.15)"/>
+    </g>
+    <g id="Group_1750" data-name="Group 1750" transform="translate(-153.008 1212.205)" opacity="0.4">
+      <g id="Group_1749" data-name="Group 1749" transform="translate(490.004 11.197)">
+        <path id="Path_2438" data-name="Path 2438" d="M547.532,63.123a5.562,5.562,0,0,0-.764-4.145,5.845,5.845,0,0,0-8.908-1.014c-2.317-1.335-5.023.839-6.4,2.619a5.2,5.2,0,0,0-1.291,3.583,3.836,3.836,0,0,0,.369,1.317,3.437,3.437,0,0,0-1.105,1.969,2.751,2.751,0,0,0,1.019,2.178.421.421,0,0,0,.3.1,6.817,6.817,0,0,0,.7,4.011,5.306,5.306,0,0,0,3.6,2.692,7.685,7.685,0,0,0,5.035-.612.334.334,0,0,0,.051.059,4.7,4.7,0,0,0,4.637.26,3.238,3.238,0,0,0,1.695-1.726,5.2,5.2,0,0,0,.21-2.292,4.776,4.776,0,0,0,2.967-2.569,5.055,5.055,0,0,0-2.122-6.433m-5.606-5.856a4.8,4.8,0,0,1,4.651,5.793,3.69,3.69,0,0,1-3.43,2.8.417.417,0,0,0-.108.026c-.108-.169-.224-.335-.349-.495a6.418,6.418,0,0,0-5.513-2.335,4.886,4.886,0,0,1,4.75-5.791m-9.647,3.816a8.006,8.006,0,0,1,2.33-2.075,3.093,3.093,0,0,1,2.621-.308,5.984,5.984,0,0,0-.981,4.5,5.936,5.936,0,0,0-2.024.871.434.434,0,0,0-.164.208,7.7,7.7,0,0,0-1.876,1.845,3.088,3.088,0,0,1-1.077-2.169,4.4,4.4,0,0,1,1.171-2.871m-1.342,7.682a2.5,2.5,0,0,1-.4-.517,1.245,1.245,0,0,1-.16-.733,1.686,1.686,0,0,1,.3-.711,5.17,5.17,0,0,1,.392-.485,4.3,4.3,0,0,0,.61.6,7.977,7.977,0,0,0-.741,1.843m5.481,6.9a4.8,4.8,0,0,1-3.747-1.765,5.6,5.6,0,0,1-1.022-3.532,6.768,6.768,0,0,1,4.327-6.009.445.445,0,0,0,.211-.162,5.558,5.558,0,0,1,5.176,1.166,5.936,5.936,0,0,1,1.157,6.842,6.558,6.558,0,0,1-6.1,3.46m9.211-1.7a2.267,2.267,0,0,1-1.26,1.323,3.814,3.814,0,0,1-3.352.008,6.915,6.915,0,0,0,1.821-1.766,6.656,6.656,0,0,0,.782-1.5,4.718,4.718,0,0,0,2.125.28,4.193,4.193,0,0,1-.116,1.655m3.161-4.816a3.836,3.836,0,0,1-4.9,1.962,7.1,7.1,0,0,0-.38-4.326,4.623,4.623,0,0,0,3.7-2.664c.009-.019.014-.04.022-.059a4.073,4.073,0,0,1,1.555,5.087" transform="translate(-508.536 -28.846)" fill="#dbdbdb"/>
+        <path id="Path_2439" data-name="Path 2439" d="M536.731,80.025a3.12,3.12,0,0,1-.534-3.945.492.492,0,0,0-.059-.673.48.48,0,0,0-.672.059,4.036,4.036,0,0,0,.651,5.291c.454.416,1.067-.317.614-.732" transform="translate(-510.622 -36.251)" fill="#dbdbdb"/>
+        <path id="Path_2440" data-name="Path 2440" d="M547.7,60.947a.491.491,0,0,0-.615-.281,3.226,3.226,0,0,0-2.312,2.8.491.491,0,0,0,.384.556.483.483,0,0,0,.556-.384,2.524,2.524,0,0,1,.06-.411c.008-.034.016-.068.025-.1a.158.158,0,0,0,.006-.019s.022-.067.026-.077c.009-.027.02-.054.03-.081a2.764,2.764,0,0,1,.186-.372l.011-.021,0,.006a.45.45,0,0,1,.049-.072c.04-.057.082-.111.127-.166s.083-.1.126-.144c.024-.025.048-.05.073-.074l.017-.019-.005.007a1.343,1.343,0,0,1,.315-.244c.054-.035.108-.066.163-.1l.006,0,.006,0,.094-.044a2.626,2.626,0,0,1,.392-.138.48.48,0,0,0,.281-.615" transform="translate(-514.534 -30.523)" fill="#dbdbdb"/>
+        <path id="Path_2441" data-name="Path 2441" d="M536.54,63.259a.486.486,0,0,0-.667-.114,4.716,4.716,0,0,0-1.6,2.206.526.526,0,0,0-.016.371.489.489,0,0,0,.244.266.483.483,0,0,0,.636-.228,4.3,4.3,0,0,1,.236-.566c.046-.091.1-.181.149-.269l.016-.029s0,0,.012-.019l.005-.008a.154.154,0,0,0,.008-.013l0,.006c.026-.04.054-.079.081-.118a4.38,4.38,0,0,1,.38-.46q.056-.058.114-.115l.025-.024c-.007.006-.007,0,.015-.015h0a.159.159,0,0,0,.019-.017l-.012.012c.079-.068.159-.136.242-.2a.486.486,0,0,0,.115-.666" transform="translate(-510.415 -31.466)" fill="#dbdbdb"/>
+        <path id="Path_2442" data-name="Path 2442" d="M536.38,66.054a.16.16,0,0,0,.021-.034l0,.007a.159.159,0,0,1-.016.027" transform="translate(-511.255 -32.624)" fill="#dbdbdb"/>
+        <path id="Path_2443" data-name="Path 2443" d="M537.4,64.829l.022-.02-.007.005-.015.015" transform="translate(-511.653 -32.151)" fill="#dbdbdb"/>
+        <path id="Path_2444" data-name="Path 2444" d="M552.62,55.5c-.35-4.56-3.1-9.061-6.251-12.251a20.719,20.719,0,0,0-12.309-6.062,19.7,19.7,0,0,0-3.464-.074.6.6,0,0,0-.245.067c-8.608.186-16.2,5.764-19.947,13.451a28.094,28.094,0,0,0-2.865,13.9,18.55,18.55,0,0,0,5.6,11.868,20.631,20.631,0,0,0,12.717,6.132,34.7,34.7,0,0,0,7.629-.211,15.437,15.437,0,0,0,6.592-2.339c3.8-2.538,6.728-6.617,8.833-10.611a35.785,35.785,0,0,0,2.636-6.491A20.68,20.68,0,0,0,552.62,55.5m-3.405,10.432A33.611,33.611,0,0,1,542,76.855a14.447,14.447,0,0,1-5.487,3.585,23.972,23.972,0,0,1-6.849,1,23.05,23.05,0,0,1-7.267-.726,19.355,19.355,0,0,1-6.14-3.163,18.808,18.808,0,0,1-7.007-9.825c-1.207-4.37-.506-9.34.966-13.566,2.813-8.074,9.618-14.7,18.342-15.694a18.667,18.667,0,0,1,3.174-.1.6.6,0,0,0,.378-.11c8.437.114,15.83,6.163,18.6,14.056,1.584,4.5.267,9.356-1.5,13.619" transform="translate(-499.962 -21.309)" fill="#dbdbdb"/>
+        <path id="Path_2445" data-name="Path 2445" d="M548.515,38.831a58.5,58.5,0,0,0-3.808-18.066c-1.872-4.711-5.31-9.722-10.984-9.564a6.864,6.864,0,0,0-2.31.484c-5.266,1.5-8.16,6.665-9.96,11.547a87.266,87.266,0,0,0-4.2,18.6c-1.607,11.916-2.627,24.839,3.6,35.686a26.9,26.9,0,0,0,4.945,6.28c1.945,1.815,4.357,3.52,7.125,3.531,2.62.01,4.893-1.637,6.525-3.559a24.123,24.123,0,0,0,4.1-7.561,71.15,71.15,0,0,0,2.4-8.945q1.043-4.861,1.71-9.793a95.915,95.915,0,0,0,.861-18.633m-1.563,14.562A124.262,124.262,0,0,1,543.8,71.24a38.826,38.826,0,0,1-2.781,7.9,14.525,14.525,0,0,1-4.965,6.049c-5.027,3.1-10.173-2.366-12.853-6.182-6.652-9.469-6.6-21.578-5.337-32.606a119.94,119.94,0,0,1,3.065-17.644,48.393,48.393,0,0,1,2.951-8.3,15.507,15.507,0,0,1,5.015-6.31,10.127,10.127,0,0,1,1.665-.922.588.588,0,0,0,.457-.067,5.381,5.381,0,0,1,.7-.341c.248-.071.5-.139.753-.188a.611.611,0,0,0,.266-.125,7.638,7.638,0,0,1,5.242,1,13,13,0,0,1,4.861,5.914A51.437,51.437,0,0,1,547.1,35.974a85.12,85.12,0,0,1-.145,17.419" transform="translate(-503.301 -11.197)" fill="#dbdbdb"/>
+        <path id="Path_2446" data-name="Path 2446" d="M527.812,36.493a58.508,58.508,0,0,0-15.468-10.082c-4.655-2.007-10.63-3.119-14.53,1a6.863,6.863,0,0,0-1.291,1.975c-2.662,4.787-1.058,10.484,1.121,15.208a87.188,87.188,0,0,0,10.179,16.121C515.112,70.281,523.529,80.14,535.6,83.4a26.856,26.856,0,0,0,7.937.945c2.658-.092,5.57-.591,7.535-2.541,1.859-1.846,2.3-4.617,2.1-7.13a24.1,24.1,0,0,0-2.446-8.247,71.026,71.026,0,0,0-4.631-8.02q-2.7-4.177-5.716-8.135a95.952,95.952,0,0,0-12.566-13.784M537,47.9A124.174,124.174,0,0,1,547.4,62.741,38.816,38.816,0,0,1,551.02,70.3a14.52,14.52,0,0,1,.766,7.788c-1.36,5.751-8.867,5.52-13.46,4.718-11.4-1.992-19.922-10.594-26.83-19.282a120.085,120.085,0,0,1-10.309-14.644,48.452,48.452,0,0,1-3.785-7.958,15.513,15.513,0,0,1-.916-8.008,10.169,10.169,0,0,1,.526-1.829.589.589,0,0,0,.276-.37,5.372,5.372,0,0,1,.252-.734c.125-.225.253-.45.4-.665a.6.6,0,0,0,.1-.277,7.638,7.638,0,0,1,4.41-3,13,13,0,0,1,7.62.744,51.431,51.431,0,0,1,14.719,8.7A85.149,85.149,0,0,1,537,47.9" transform="translate(-495.134 -16.441)" fill="#dbdbdb"/>
+        <path id="Path_2447" data-name="Path 2447" d="M508.2,49.54a58.536,58.536,0,0,0-10.082,15.468c-2.006,4.655-3.119,10.629,1,14.53a6.864,6.864,0,0,0,1.976,1.291c4.787,2.663,10.484,1.058,15.208-1.121a87.218,87.218,0,0,0,16.121-10.178c9.562-7.289,19.422-15.705,22.687-27.779a26.9,26.9,0,0,0,.945-7.937c-.093-2.658-.592-5.57-2.542-7.535-1.846-1.859-4.618-2.3-7.13-2.1a24.1,24.1,0,0,0-8.247,2.446,71.027,71.027,0,0,0-8.02,4.631q-4.177,2.7-8.135,5.716A96.022,96.022,0,0,0,508.2,49.54m11.4-9.192a124.308,124.308,0,0,1,14.845-10.394A38.8,38.8,0,0,1,542,26.332a14.525,14.525,0,0,1,7.788-.767c5.75,1.36,5.521,8.867,4.718,13.461-1.992,11.4-10.594,19.922-19.283,26.83a120.012,120.012,0,0,1-14.643,10.309,48.418,48.418,0,0,1-7.958,3.785,15.513,15.513,0,0,1-8.008.916,10.144,10.144,0,0,1-1.83-.526.584.584,0,0,0-.37-.276,5.546,5.546,0,0,1-.734-.252c-.225-.125-.45-.253-.665-.4a.6.6,0,0,0-.276-.1,7.638,7.638,0,0,1-3-4.41,13.011,13.011,0,0,1,.744-7.62,51.445,51.445,0,0,1,8.7-14.719A85.215,85.215,0,0,1,519.6,40.348" transform="translate(-495.597 -16.254)" fill="#dbdbdb"/>
+      </g>
+      <path id="Path_2448" data-name="Path 2448" d="M509.643,45.171a58.5,58.5,0,0,0-18.066,3.808c-4.711,1.872-9.722,5.31-9.565,10.984a6.877,6.877,0,0,0,.484,2.31c1.5,5.267,6.665,8.161,11.546,9.96a87.233,87.233,0,0,0,18.6,4.2c11.916,1.607,24.838,2.628,35.686-3.6a26.9,26.9,0,0,0,6.279-4.944c1.815-1.945,3.521-4.357,3.531-7.125.01-2.621-1.636-4.894-3.559-6.525a24.111,24.111,0,0,0-7.56-4.1,71.14,71.14,0,0,0-8.945-2.4q-4.862-1.043-9.793-1.71a95.962,95.962,0,0,0-18.633-.861m14.562,1.563a124.264,124.264,0,0,1,17.846,3.148,38.818,38.818,0,0,1,7.9,2.781,14.523,14.523,0,0,1,6.05,4.965c3.1,5.027-2.367,10.173-6.182,12.853-9.469,6.653-21.578,6.6-32.606,5.337a120.023,120.023,0,0,1-17.644-3.066,48.425,48.425,0,0,1-8.3-2.95,15.518,15.518,0,0,1-6.31-5.015,10.126,10.126,0,0,1-.921-1.665.591.591,0,0,0-.068-.457,5.51,5.51,0,0,1-.341-.7c-.071-.248-.139-.5-.188-.752a.606.606,0,0,0-.124-.266,7.632,7.632,0,0,1,1-5.241,13,13,0,0,1,5.914-4.862,51.436,51.436,0,0,1,16.559-4.257,85.16,85.16,0,0,1,17.419.145" transform="translate(0 -13.223)" fill="#dbdbdb"/>
+    </g>
+    <g id="Group_1753" data-name="Group 1753" transform="matrix(0.788, 0.616, -0.616, 0.788, -2389.047, -7942.248)" opacity="0.53">
+      <path id="Path_2334" data-name="Path 2334" d="M142.491,284.828a8.081,8.081,0,0,0-3.866-2.936c-1.578-.615-3.262-.937-4.812-1.626a6.46,6.46,0,0,1-2.333-1.641,6.778,6.778,0,0,1-1.334-2.781,17.133,17.133,0,0,1-.019-7.512c.1-.482-.645-.662-.744-.179a19.024,19.024,0,0,0-.208,6.7,7.959,7.959,0,0,0,2.22,4.784c2.59,2.38,6.576,2.011,9.233,4.257a6.816,6.816,0,0,1,.762,9.7c-2.327,2.457-6.008,2.88-8.617,4.949a9.036,9.036,0,0,0-2.725,10.205c.181.454.914.231.731-.228a8.275,8.275,0,0,1,2.4-9.329c2.565-2.051,6.074-2.515,8.489-4.794a7.468,7.468,0,0,0,.821-9.566" transform="translate(7462 5442)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2335" data-name="Path 2335" d="M134.237,285.184a8.077,8.077,0,0,1,3.859-2.944c1.577-.618,3.26-.944,4.808-1.636a6.461,6.461,0,0,0,2.33-1.646,6.777,6.777,0,0,0,1.328-2.784,17.12,17.12,0,0,0,0-7.512c-.1-.482.644-.664.745-.181a19.042,19.042,0,0,1,.222,6.7,7.963,7.963,0,0,1-2.21,4.788c-2.585,2.386-6.572,2.024-9.225,4.276a6.816,6.816,0,0,0-.741,9.7c2.332,2.452,6.014,2.867,8.627,4.93a9.037,9.037,0,0,1,2.747,10.2c-.18.455-.913.233-.732-.226a8.275,8.275,0,0,0-2.422-9.324c-2.569-2.046-6.079-2.5-8.5-4.776a7.468,7.468,0,0,1-.841-9.564" transform="translate(7459.272 5441.771)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2336" data-name="Path 2336" d="M144.45,276.076l-15,.712c-.493.023-.425.786.067.763l15-.712c.492-.023.425-.786-.067-.763" transform="translate(7461.906 5436.295)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2337" data-name="Path 2337" d="M137.313,288.2l-6.65.246c-.493.018-.425.781.067.763l6.65-.245c.492-.018.424-.781-.067-.763" transform="translate(7461.059 5427.867)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2338" data-name="Path 2338" d="M164.333,286.568l-6.277.346c-.492.027-.425.79.066.763l6.278-.346c.492-.027.425-.79-.067-.763" transform="translate(7442.02 5429.002)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2339" data-name="Path 2339" d="M146.234,294.837a13.36,13.36,0,0,1-3.173.357q-1.711.046-3.423.071-3.44.055-6.881.048c-.493,0-.423.762.066.763q3.536.007,7.072-.051a27.016,27.016,0,0,0,6.606-.469c.475-.129.206-.847-.267-.718" transform="translate(7459.603 5423.266)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2340" data-name="Path 2340" d="M142.1,303.742l-4.629.18c-.492.019-.425.782.067.763l4.629-.18c.493-.019.425-.782-.067-.763" transform="translate(7456.33 5417.066)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2341" data-name="Path 2341" d="M162.352,303.3l-4.471.143c-.493.016-.424.778.067.763l4.471-.143c.493-.016.424-.779-.066-.763" transform="translate(7442.141 5417.371)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2342" data-name="Path 2342" d="M146.741,320.362q-4.848.455-9.642,1.323c-.481.087-.419.851.067.763q4.791-.867,9.642-1.323a.383.383,0,0,0-.067-.763" transform="translate(7456.581 5405.515)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2343" data-name="Path 2343" d="M137.963,333.733q-1.983.371-3.99.579a.383.383,0,0,0,.066.763q2.007-.207,3.991-.579a.394.394,0,0,0,.348-.415.386.386,0,0,0-.415-.348" transform="translate(7458.757 5396.224)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2344" data-name="Path 2344" d="M158.3,329.273a43.629,43.629,0,0,0-6.8,1.218c-.476.124-.206.842.267.718a42.34,42.34,0,0,1,6.6-1.173.383.383,0,0,0-.067-.763" transform="translate(7446.515 5399.322)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2345" data-name="Path 2345" d="M147.781,338.348c-4.011.674-8.018,1.384-12.041,1.981-.485.072-.422.835.067.763,4.023-.6,8.03-1.306,12.041-1.981.482-.081.42-.845-.067-.763" transform="translate(7457.528 5393.017)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2346" data-name="Path 2346" d="M145.712,349.208a52.182,52.182,0,0,0-5.859.9.4.4,0,0,0-.348.415.384.384,0,0,0,.415.348,52.189,52.189,0,0,1,5.859-.9.383.383,0,0,0-.067-.763" transform="translate(7454.68 5385.466)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2347" data-name="Path 2347" d="M167.293,347.281l-2.284.208a.383.383,0,1,0,.067.763l2.284-.208a.383.383,0,1,0-.067-.763" transform="translate(7437.195 5386.805)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2348" data-name="Path 2348" d="M148.073,369.5q-4.509.475-9.04.69c-.492.023-.425.786.067.763q4.529-.215,9.04-.69a.383.383,0,0,0-.067-.763" transform="translate(7455.241 5371.362)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2349" data-name="Path 2349" d="M136.075,382.262l-4.043.052a.386.386,0,0,0-.348.414.391.391,0,0,0,.415.348l4.044-.052a.383.383,0,1,0-.067-.763" transform="translate(7460.116 5362.491)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2350" data-name="Path 2350" d="M159.187,380.384q-3.61.338-7.237.382c-.493.006-.424.768.066.763q3.625-.044,7.237-.382a.383.383,0,0,0-.067-.763" transform="translate(7446.263 5363.798)" fill="rgba(112,112,112,0.29)"/>
+      <path id="Path_2351" data-name="Path 2351" d="M146.19,389.654a38.023,38.023,0,0,1-6.771.381l-7.016.173c-.493.012-.424.775.067.763l7.016-.173a38.024,38.024,0,0,0,6.771-.381c.476-.1.415-.863-.067-.763" transform="translate(7459.849 5357.359)" fill="rgba(112,112,112,0.29)"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/interactive.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.135" height="34.763" viewBox="0 0 35.135 34.763">
+  <g id="vuesax_linear_book" data-name="vuesax/linear/book" transform="translate(0 0)">
+    <g id="book" transform="translate(0 0)">
+      <path id="Vector" d="M29.279,20.329V2.9A2.869,2.869,0,0,0,26.1.025h-.088a27.857,27.857,0,0,0-10.35,3.422l-.249.159a1.641,1.641,0,0,1-1.552,0L13.5,3.39A27.72,27.72,0,0,0,3.162.011,2.864,2.864,0,0,0,0,2.885V20.329a2.981,2.981,0,0,0,2.547,2.859l.425.058a37.976,37.976,0,0,1,10.892,3.524l.059.029a1.6,1.6,0,0,0,1.405,0,37.631,37.631,0,0,1,10.921-3.552l.483-.058A2.981,2.981,0,0,0,29.279,20.329Z" transform="translate(2.928 3.898)" fill="none" stroke="#dae200" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0V21.959" transform="translate(17.567 7.666)" fill="none" stroke="#dae200" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-3" data-name="Vector" d="M3.294,0H0" transform="translate(25.919 12.298)" fill="none" stroke="#dae200" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-4" data-name="Vector" d="M4.392,0H0" transform="translate(24.767 16.643)" fill="none" stroke="#dae200" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-5" data-name="Vector" d="M0,0H35.135V34.763H0Z" transform="translate(35.135 34.763) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/packages.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.404" height="31.404" viewBox="0 0 31.404 31.404">
+  <g id="vuesax_linear_teacher" data-name="vuesax/linear/teacher" transform="translate(0 0)">
+    <g id="teacher" transform="translate(0 0)">
+      <path id="Vector" d="M9.771.7,1.894,5.838a4.169,4.169,0,0,0,0,6.987l7.877,5.142a5.117,5.117,0,0,0,5.156,0l7.838-5.142a4.169,4.169,0,0,0,0-6.974L14.927.708A5.086,5.086,0,0,0,9.771.7Z" transform="translate(3.379 2.615)" fill="none" stroke="#930362" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M.013,0,0,6.137A4.464,4.464,0,0,0,2.853,10.1l4.174,1.387a5.032,5.032,0,0,0,2.643,0L13.844,10.1A4.464,4.464,0,0,0,16.7,6.137V.065" transform="translate(7.354 17.115)" fill="none" stroke="#930362" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-3" data-name="Vector" d="M0,7.851V0" transform="translate(28.002 11.777)" fill="none" stroke="#930362" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H31.4V31.4H0Z" transform="translate(31.404 31.404) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/phrase.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="353.475" height="155.924" viewBox="0 0 353.475 155.924">
+  <g id="Group_1796" data-name="Group 1796" transform="translate(-51 -1963.076)">
+    <g id="Group_1756" data-name="Group 1756" transform="matrix(0.966, 0.259, -0.259, 0.966, -5416.41, -5417.826)" opacity="0.15">
+      <path id="Path_2353" data-name="Path 2353" d="M73.267,215.937c-4.987-12.11-19.38-20.05-32.257-18.415a27.32,27.32,0,0,0-4.689,1.034.712.712,0,0,0-.382.283,35.443,35.443,0,0,0-25.372,24.9c-3.574,13.568,1.315,29.863,13.891,37.069a38.563,38.563,0,0,0,21.324,4.711A29.1,29.1,0,0,0,64.3,257.1a37.043,37.043,0,0,0,9.85-18.583,50.2,50.2,0,0,0,1.117-11.308,30.452,30.452,0,0,0-2-11.269M11.241,228.943a33.666,33.666,0,0,1,21.925-27.6,32.207,32.207,0,0,1,4.278-1.233.83.83,0,0,0,.518-.344c11.739-3.091,24.866,2.767,31.576,12.657,3.874,5.712,4.534,12.718,3.969,19.446-5.87,5.962-14.445,8.366-22.5,9.544a70.049,70.049,0,0,1-27.04-1.252A36.622,36.622,0,0,1,11.08,234.4a34.293,34.293,0,0,1,.161-5.461m39.791,34.1c-6.906,1.85-14.654.955-21.288-1.545a27.533,27.533,0,0,1-14.994-13.264,33.422,33.422,0,0,1-3.518-11.756c7.069,4.711,15.877,6.514,24.232,7.1a67.447,67.447,0,0,0,27.531-3.423A32.436,32.436,0,0,0,73.247,234.3a38.327,38.327,0,0,1-6.982,18.1,28.551,28.551,0,0,1-15.233,10.647" transform="translate(7462 5442)" fill="#707070"/>
+      <path id="Path_2354" data-name="Path 2354" d="M41.11,230.431l-.006.008a.085.085,0,0,0,0,.022l.008-.016v-.013" transform="translate(7462.946 5442.989)" fill="#707070"/>
+      <path id="Path_2355" data-name="Path 2355" d="M41.115,230.431l0,0v0h0l0,0v.005" transform="translate(7462.946 5442.989)" fill="#707070"/>
+      <path id="Path_2356" data-name="Path 2356" d="M72.846,229.988l-29.167.046a2.464,2.464,0,0,0-2.144-2.152,2.813,2.813,0,0,0-.518.012.572.572,0,0,0-.3-.029,2.834,2.834,0,0,0-.843.313,2.512,2.512,0,0,0-.574.47,2.821,2.821,0,0,0-.676,1.3,2.444,2.444,0,0,0,1.061,2.606,2.737,2.737,0,0,0,2.85.095,2.277,2.277,0,0,0,.9-1l29.555-.047c1.039,0,.892-1.61-.141-1.609" transform="translate(7462.87 5442.912)" fill="#707070"/>
+      <path id="Path_2357" data-name="Path 2357" d="M41.111,230.419v.012l0-.005,0-.007" transform="translate(7462.946 5442.989)" fill="#707070"/>
+      <path id="Path_2358" data-name="Path 2358" d="M41.115,230.407v0l0,.011v0l0-.012" transform="translate(7462.946 5442.988)" fill="#707070"/>
+      <path id="Path_2359" data-name="Path 2359" d="M41.191,230.069h0" transform="translate(7462.949 5442.978)" fill="#707070"/>
+      <path id="Path_2360" data-name="Path 2360" d="M41.19,230.069l0,0,0,0" transform="translate(7462.948 5442.978)" fill="#707070"/>
+      <path id="Path_2361" data-name="Path 2361" d="M41.2,230.067l0,0,0,0h0l0,0,0,0,0,0h0l0,.008.005.005,0-.015" transform="translate(7462.949 5442.979)" fill="#707070"/>
+      <path id="Path_2362" data-name="Path 2362" d="M41.2,230.085l0,0v0h0" transform="translate(7462.949 5442.979)" fill="#707070"/>
+      <path id="Path_2363" data-name="Path 2363" d="M51.192,222.88a4.789,4.789,0,0,0-4.058,1.368c-.034.033-.062.071-.095.106.022-.712.058-1.423.124-2.135a.83.83,0,0,0-.649-.939.814.814,0,0,0-.94.649,37.985,37.985,0,0,0-.07,6.265.816.816,0,0,0,1.085.687,1.236,1.236,0,0,0,.77-.889,5.034,5.034,0,0,0,.083-.809A3.063,3.063,0,0,1,50.9,224.47a.808.808,0,0,0,.291-1.59" transform="translate(7463.075 5442.715)" fill="#707070"/>
+      <path id="Path_2364" data-name="Path 2364" d="M22.533,222.473a.822.822,0,0,0-1.04-.475q-3,.959-6.054,1.719a.814.814,0,0,0-.476,1.039.828.828,0,0,0,1.038.476q3.056-.759,6.055-1.72a.82.82,0,0,0,.477-1.039" transform="translate(7462.164 5442.736)" fill="#707070"/>
+      <path id="Path_2365" data-name="Path 2365" d="M31.357,219.418a44.173,44.173,0,0,0-5.462,1.091.816.816,0,0,0-.476,1.039.827.827,0,0,0,1.039.475,40.645,40.645,0,0,1,5.04-1,.807.807,0,1,0-.141-1.609" transform="translate(7462.476 5442.66)" fill="#707070"/>
+      <path id="Path_2366" data-name="Path 2366" d="M43.6,218.679q-2.92-.045-5.836.11a.808.808,0,1,0,.141,1.61q2.915-.156,5.836-.111a.813.813,0,0,0,.734-.874.826.826,0,0,0-.875-.734" transform="translate(7462.824 5442.638)" fill="#707070"/>
+      <path id="Path_2367" data-name="Path 2367" d="M54.917,219.777a25.918,25.918,0,0,0-5.388-1,.828.828,0,0,0-.941.648.817.817,0,0,0,.649.941,25.836,25.836,0,0,1,5.388,1,.81.81,0,0,0,.94-.649.83.83,0,0,0-.648-.94" transform="translate(7463.169 5442.641)" fill="#707070"/>
+      <path id="Path_2368" data-name="Path 2368" d="M66.683,223.86l-5.314-2.033a.83.83,0,0,0-1.075.384.816.816,0,0,0,.385,1.076l5.314,2.033a.829.829,0,0,0,1.075-.385.816.816,0,0,0-.385-1.075" transform="translate(7463.517 5442.73)" fill="#707070"/>
+    </g>
+    <text id="_" data-name="،" transform="translate(60 2066) rotate(180)" fill="#dcdcdc" font-size="53" font-family="IRANSansX-Bold, IRANSansX" font-weight="700"><tspan x="-8.215" y="0">،</tspan></text>
+  </g>
+</svg>

src/assets/icons/test.svg

@@ -0,0 +1,10 @@
+<svg id="vuesax_linear_task-square" data-name="vuesax/linear/task-square" xmlns="http://www.w3.org/2000/svg" width="33.323" height="32.317" viewBox="0 0 33.323 32.317">
+  <g id="task-square">
+    <path id="Vector" d="M7.069,0H0" transform="translate(8.933 11.957)" fill="none" stroke="#00bca3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,2.02.9,3.03,3.584,0" transform="translate(21.063 9.931)" fill="none" stroke="#00bca3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-3" data-name="Vector" d="M7.069,0H0" transform="translate(8.933 21.383)" fill="none" stroke="#00bca3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-4" data-name="Vector" d="M0,2.02.9,3.03,3.584,0" transform="translate(21.063 19.357)" fill="none" stroke="#00bca3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-5" data-name="Vector" d="M18.159,26.931H9.778C2.794,26.931,0,24.238,0,17.505V9.426C0,2.693,2.794,0,9.778,0h8.381c6.984,0,9.778,2.693,9.778,9.426v8.079C27.936,24.238,25.143,26.931,18.159,26.931Z" transform="translate(2.693 2.693)" fill="none" stroke="#00bca3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-6" data-name="Vector" d="M33.323,0H0V32.317H33.323Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/assets/icons/video.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.575" height="27.615" viewBox="0 0 31.575 27.615">
+  <g id="Group_1796" data-name="Group 1796" transform="translate(1 1)">
+    <g id="vuesax_linear_music-playlist" data-name="vuesax/linear/music-playlist">
+      <g id="music-playlist" transform="translate(0)">
+        <path id="Vector" d="M22.181,25.615H7.394C2.957,25.615,0,23.053,0,17.077V8.538C0,2.561,2.957,0,7.394,0H22.181c4.436,0,7.394,2.561,7.394,8.538v8.538C29.575,23.053,26.617,25.615,22.181,25.615Z" fill="none" stroke="#2a91f3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </g>
+    </g>
+    <path id="Vector-2" data-name="Vector" d="M0,4.57V2.7A2.643,2.643,0,0,1,1.419.111a2.618,2.618,0,0,1,2.357.4L5.4,1.449l1.623.936c2.075,1.2,2.075,3.168,0,4.369L5.4,7.691l-1.623.936C1.7,9.829,0,8.846,0,6.443V4.57Z" transform="translate(10.498 8.237)" fill="none" stroke="#2a91f3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

src/components/JolPlayer/index.js

@@ -51,7 +51,7 @@ function Video({ fileIds, posterId, autoPlay }) {
         option={{
           videoSrc: `https://dnvn.ir/api/v1/file/${fileIds}`,
           width: "100%",
-          height: window.innerWidth > 1024 ? window.innerHeight - 200 : 250,
+          height: window.innerWidth > 1024 ? window.innerHeight - 200 : window.innerHeight / 3.6,
           theme: "#4dd35b",
           language: "en",
           isShowMultiple: window.innerWidth > 700,

src/components/Navbar/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import _ from "lodash";
@@ -13,8 +13,29 @@ import hamburgerIcon from "../../assets/icons/hamburger.svg";
 import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg";
 
 function Navbar({ pages, isDark, isLogin }) {
+  const [top, setTop] = useState(false);
+  useEffect(() => {
+    if (window.scrollY === 0) {
+      setTop(() => true);
+    }
+    window.addEventListener("scroll", () => {
+      if (window.scrollY === 0) {
+        setTop(() => true);
+      } else {
+        setTop(() => false);
+      }
+    });
+  }, []);
   return (
-    <div className="z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full bg-opacity-20 lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10">
+    <div
+      className={_.join(
+        [
+          "z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300",
+          !top ? "bg-white" : "",
+        ],
+        " "
+      )}
+    >
       {/* landscape start */}
       <div className="flex-row items-center hidden lg:flex">
         <Link to="/">
@@ -64,27 +85,41 @@ function Navbar({ pages, isDark, isLogin }) {
             <Link
               to="/qr"
               className={_.join(
-                ["rounded-sm", isDark ? "bg-gray36  ml-2" : "ml-1.5"],
+                [
+                  "rounded-sm p-1.5",
+                  isDark
+                    ? "bg-gray36  ml-2"
+                    : "bg-blueFF1 ml-3 shadow-sm",
+                ],
                 " "
               )}
+              style={{
+                border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
+              }}
             >
               <img
                 src={isDark ? qrIcon : qrBlueIcon}
                 alt=""
-                className={_.join([isDark ? "w-5" : "w-7"], " ")}
+                className={_.join(["w-6"], " ")}
               />
             </Link>
             <Link
               to="/ar"
               className={_.join(
-                ["rounded-sm", isDark ? "bg-gray36  ml-2" : "ml-1.5"],
+                [
+                  "rounded-sm p-1.5",
+                  isDark ? "bg-gray36" : "bg-blueFF1 shadow-sm",
+                ],
                 " "
               )}
+              style={{
+                border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
+              }}
             >
               <img
                 src={isDark ? arIcon : arBlueIcon}
                 alt=""
-                className={_.join([isDark ? "w-5" : "w-7"], " ")}
+                className={_.join(['w-6'], " ")}
               />
             </Link>
           </div>

src/components/Progress/index.js

@@ -0,0 +1,20 @@
+import React, { useState, useEffect } from "react";
+
+function Progress({ percent }) {
+  const [delayPercent, setDelayPercent] = useState(0);
+  useEffect(() => {
+    setTimeout(() => {
+      setDelayPercent(() => percent);
+    }, 1000);
+  }, [percent]);
+  return (
+    <div className="w-full h-1.5 rounded-full overflow-hidden my-3" style={{ backgroundColor: '#D3E9FF' }}>
+      <div
+        className="h-full bg-blueEB transition-all duration-500"
+        style={{ width: delayPercent + "%" }}
+      ></div>
+    </div>
+  );
+}
+
+export default Progress;

src/views/Home/Landscape/Page1/Book/index.js

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 export default function Book({ book }) {
   return (
     <Link to={`{/products/${book.name}}`} className="flex group relative cursor-pointer">
-      <img src={book.imageUrl} alt={book.name} className="w-40 lg:w-auto" />
+      <img src={book.imageUrl} alt={book.name} className="lg:w-auto" />
       <button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
         مشاهده و خرید
       </button>

src/views/Home/Landscape/Page1/Lights/index.js

@@ -6,7 +6,7 @@ import _ from "lodash";
 export default function Lights({ degrees}) {
   return (
     <div className="w-full">
-      <header className="container hidden flex-row justify-between z-20 transform lg:-translate-y-24">
+      <header className="container hidden flex-row px-12 lg:px-0 justify-between z-20 transform -translate-y-16 lg:-translate-y-24">
         {degrees.map((light, index) => (
           <Light degree={light} key={index} />
         ))}

src/views/Home/Portrait/Private/Blogs/index.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { blog } from "../../../../../redux/actions";
+import _ from 'lodash';
+import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
+
+function Blogs({ list, getList }) {
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <div className="w-full pr-4">
+      <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
+        <header className="w-full flex flex-row justify-between items-center pl-4">
+          <strong className="text-blueC0 font-bold text-lg">خواندنی‌ها</strong>
+          <img src={arrowBlueIcon} alt="" className="transform rotate-180" />
+        </header>
+        <ul className="list-none w-full overflow-x-scroll pt-3 flex flex-row pb-10">
+          {list.map((blog, index) => (
+            <Blog blog={blog} key={index} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+const Blog = ({ blog }) => {
+  return (
+    <li className="flex flex-col ml-3">
+      <Link
+        to={"/blogs/" + blog.name}
+        className="flex flex-row justify-center items-end rounded-md"
+        style={{
+          background: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`,
+          backgroundPosition: "contain",
+          backgroundSize: "100% 100%",
+          minWidth: "calc(100vw / 1.3)",
+          minHeight: "calc(100vw / 1.3 * 2 / 3)",
+        }}
+      >
+        <div className="w-11/12 bg-white rounded-md shadow-md flex flex-col transform translate-y-1/2 p-2">
+          <h2 className="text-xs font-semibold text-blue5F">{blog.title}</h2>
+          <div className="w-full flex flex-row justify-between items-center mt-3">
+            <div className="flex flex-row items-center">
+              <img
+                src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`}
+                alt=""
+                className="w-5 h-5 rounded-full ml-2"
+              />
+              <span className="text-blueC0 text-xs font-light">{"حامد دژبانی نسب"}</span>
+            </div>
+            <div className="flex flex-row items-center">
+              <span className="text-xs font-light">{_.join(['زمان مناسب', '30' ], " ")}</span>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </li>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  list: state.publicApi.blogList,
+});
+
+export default connect(mapStateToProps, { getList: blog.list })(Blogs);

src/views/Home/Portrait/Private/MyBooks/index.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { book } from "../../../../../redux/actions";
+import Progress from '../../../../../components/Progress';
+
+function MyBooks({ list, getList, grades }) {
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <div className="w-full px-4 mb-5">
+      <div className="w-full flex flex-col rounded-md pt-4  px-2 bg-blueFF1 overflow-hidden">
+        <strong className="text-blueC0 font-bold text-lg">کتابهای من</strong>
+        <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row">
+          {list.map((book, index) => (
+            <Book book={book} key={index} grades={grades} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+const Book = ({ book, grades }) => {
+  return (
+    <li className="flex flex-col ml-3">
+      <Link to={"/products/" + book.name}>
+        <img
+          src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+          alt=""
+          className="rounded-sm"
+          style={{
+            minHeight: "calc(100vh / 5)",
+            minWidth: "calc(100vh / 5 * 3 / 4)",
+          }}
+        />
+        <h2 className="mt-2 text-sm font-semibold text-blue5F">{book.name}</h2>
+        <p className="font-medium text-blueC0 text-xs mt-1">{`پایه ${grades[book.gradeId]}`}</p>
+        <Progress percent={60} />
+      </Link>
+    </li>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  list: state.book.list,
+  grades : state.publicApi.grades
+});
+
+export default connect(mapStateToProps, { getList: book.list })(MyBooks);

src/views/Home/Portrait/Private/Shop/index.js

@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { book } from "../../../../../redux/actions";
+import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
+
+function Shop({ list, getList, grades }) {
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <div className="w-full pr-4">
+      <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
+        <header className="w-full flex flex-row justify-between items-center pl-4">
+          <strong className="text-blueC0 font-bold text-lg">فروشگاه</strong>
+          <img src={arrowBlueIcon} alt="" className="transform rotate-180" />
+        </header>
+        <ul
+          className="list-none w-full overflow-x-scroll pt-3 flex flex-col flex-wrap"
+          style={{
+            maxHeight: "calc(100vh / 3 + 12px)",
+          }}
+        >
+          {list.map((book, index) => (
+            <Book
+              book={book}
+              key={index}
+              grades={grades}
+              index={Number(index)}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+const Book = ({ book, index }) => {
+  return (
+    <li className="flex flex-col ml-2">
+      <Link to={"/products/" + book.name}>
+        {index === 0 ? (
+          <img
+            src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+            alt=""
+            className="rounded-sm"
+            style={{
+              minWidth: "calc(100vh / 3 * 3 / 5)",
+              maxHeight: "calc(100vh / 3)",
+            }}
+          />
+        ) : (
+          <img
+            src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+            alt=""
+            className="rounded-sm"
+            style={{
+              minWidth: "calc(100vh / 6 * 3 / 5)",
+              maxHeight: "calc(100vh / 6 - 5px)",
+              marginBottom: index % 2 !== 0 ? "8px" : "0px",
+            }}
+          />
+        )}
+      </Link>
+    </li>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  list: state.book.list,
+});
+
+export default connect(mapStateToProps, { getList: book.list })(Shop);

src/views/Home/Portrait/Private/Videos/index.js

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { book } from "../../../../../redux/actions";
+import Progress from "../../../../../components/Progress";
+import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
+
+function Videos({ list, getList, grades }) {
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <div className="w-full px-4">
+      <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
+        <header className="w-full flex flex-row justify-between items-center">
+          <strong className="text-blueC0 font-bold text-lg">دوره‌های ویدئویی شما</strong>
+          <img src={arrowBlueIcon} alt="" className="transform rotate-180" />
+        </header>
+        <ul
+          className="list-none w-full overflow-x-scroll pt-3 flex flex-row"
+        >
+          {list.map((book, index) => (
+            <Book
+              book={book}
+              key={index}
+              grades={grades}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+const Book = ({ book, grades }) => {
+  return (
+    <li className="flex flex-col ml-3">
+      <Link to={"/products/" + book.name}>
+        <img
+          src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+          alt=""
+          className="rounded-sm"
+          style={{
+            maxHeight: "calc(100vw / 2 * 2 / 3)",
+            minWidth: "calc(100vw / 2 )",
+          }}
+        />
+        <h2 className="mt-2 text-sm font-semibold text-blue5F">{book.name}</h2>
+        <p className="font-medium text-blueC0 text-xs mt-1">{`پایه ${grades[book.gradeId]}`}</p>
+        <Progress percent={60} />
+      </Link>
+    </li>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  list: state.book.list,
+  grades : state.publicApi.grades
+
+});
+
+export default connect(mapStateToProps, { getList: book.list })(Videos);

src/views/Home/Portrait/Private/index.js

@@ -1,9 +1,16 @@
-import React from 'react'
+import React from 'react';
+import MyBooks from './MyBooks';
+import Shop from './Shop';
+import Videos from './Videos';
+import Blogs from './Blogs';
 
 function Private() {
   return (
-    <div>
+    <div className="w-full flex-1 pt-20 pb-6">
-      
+      <MyBooks />
+      <Shop />
+      <Videos />
+      <Blogs />
     </div>
   )
 }

src/views/Home/Portrait/Public/App/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import bazarImage from '../../../../../assets/images/bazar.svg';
+import appStoreImage from '../../../../../assets/images/app-store.svg';
+
+function App() {
+  return <div className="w-full flex flex-col items-center">
+    <img src={bazarImage} alt="" className="w-1/2 mb-5" />
+    <img src={appStoreImage} alt="" className="w-1/2" />
+  </div>;
+}
+
+export default App;

src/views/Home/Portrait/Public/Features/index.js

@@ -0,0 +1,68 @@
+import React from "react";
+import videoIcon from "../../../../../assets/icons/video.svg";
+import packageIcon from "../../../../../assets/icons/packages.svg";
+import testIcon from "../../../../../assets/icons/test.svg";
+import interactiveIcon from "../../../../../assets/icons/interactive.svg";
+
+function Features({ features }) {
+  return (
+    <div className="w-full flex flex-row flex-wrap justify-between px-2">
+      {features.map((feature, index) => (
+        <Feature feature={feature} key={index} />
+      ))}
+    </div>
+  );
+}
+
+const Feature = ({ feature }) => {
+  return (
+    <div className="flex flex-col mt-4" style={{ width: "48%" }}>
+      <div className="p-4 rounded-md w-16" style={{ backgroundColor: feature.backgroundColor }}>
+        <img src={feature.icon} className="w-8 h-8" alt="" />
+      </div>
+      <strong
+        className="mt-3 font-semibold text-sm"
+        style={{ color: feature.color }}
+      >
+        {feature.title}
+      </strong>
+      <p className="mt-1 font-light text-gray1 text-xs">{feature.text}</p>
+    </div>
+  );
+};
+
+export default Features;
+
+Features.defaultProps = {
+  features: [
+    {
+      icon: interactiveIcon,
+      backgroundColor: "#FFFDC4",
+      color: "#C0C700",
+      title: "کتاب‌های تعاملی",
+      text: "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نماید",
+    },
+    {
+      icon: videoIcon,
+      backgroundColor: "#A1DDFF",
+      color: "#196EC0",
+      title: "",
+      title: "ویدئوهای مربوط به هر درس",
+      text: "انتخاب رنگ در حوزه طراحی کار بسیار عجیبی است و کاربران همه روزه با آن دسته پنجه نرم می کنند",
+    },
+    {
+      icon: testIcon,
+      backgroundColor: "#C4FFF7",
+      color: "#06A38E",
+      title: "آزمون ",
+      text: "این پلتفرم می تواند تاریخ جشن تولد خود شما، دوستان شما و حتی خانواده شما را به شما یادآوری نمایید",
+    },
+    {
+      icon: packageIcon,
+      backgroundColor: "#FFC4EB",
+      color: "#930362",
+      title: "پکیج ‌های آموزشی ",
+      text: "همه پایه های تحصیلی باید توسط کاربران انتخاب شود تا به آنها اینکار را یادآوری نماید",
+    },
+  ],
+};

src/views/Home/Portrait/Public/GradiantText/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import phraseImage from "../../../../../assets/icons/phrase.svg";
+
+function GradiantText() {
+  return (
+    <div
+      className="w-full flex flex-col items-center py-10"
+      style={{ background: `url(${phraseImage})` }}
+    >
+      <h2 class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-900 to-blue-300">
+        یادگیری بدون وقفه
+      </h2>
+      <h2 class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-300 to-blue-900">
+        لذت یادگیری هوشمند
+      </h2>
+    </div>
+  );
+}
+
+export default GradiantText;

src/views/Home/Portrait/Public/Header/index.js

@@ -3,33 +3,41 @@ import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
 import Book from "../../../Landscape/Page1/Book";
 import Lights from "../../../Landscape/Page1/Lights";
+import Video from "../../../../../components/JolPlayer";
 import arrow from "../../../../../assets/icons/slider-arrow.svg";
 import olum1Image from "../../../../../assets/images/olum-1.svg";
 import olum2Image from "../../../../../assets/images/olum-2.svg";
 import olum4Image from "../../../../../assets/images/olum-4.svg";
 import olum7Image from "../../../../../assets/images/olum-7.svg";
 import zist11Image from "../../../../../assets/images/zist-11.svg";
+import sheffImage from "../../../../../assets/images/sheff.svg";
+import flatFlower from "../../../../../assets/icons/flat-flower-white.svg";
+import jojoImage from "../../../../../assets/images/jojo.svg";
 
 function Header({ list }) {
   const [show, setShow] = useState(2);
 
   return (
     <div
-      className="flex flex-col w-full rounded-md items-center justify-center"
+      className="flex flex-col w-full rounded-md items-center justify-center relative pt-36 mb-28"
       style={{
-        height: "calc(100vh * 6 / 7)",
+        // minHeight: "calc(100vh * 6 / 7)",
         background:
           "linear-gradient(135deg, rgba(147,176,255,0.3435749299719888) 0%, rgba(183,199,242,0.6264880952380952) 15%, rgba(67,207,227,0.27914915966386555) 68%, rgba(226,236,233,0.68531162464986) 100%)",
       }}
     >
-      <Lights degrees={[0,0]} />
+      <img
-      <div className="flex flex-col lg:px-8">
+        src={flatFlower}
-        <div className="container relative z-10 px-4" style={{ direction: "ltr" }}>
+        alt=""
+        className="absolute transform left-1/2 top-0 -translate-x-1/2 opacity-30"
+      />
+      <Lights degrees={[0, 0]} />
+      <div className="w-full flex flex-col lg:px-8 relative">
+        <div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}>
           <Carousel
             show={show}
             slide={1}
             swiping={true}
-            
             // useArrowKeys={true}
             transition={0.5}
             rightArrow={
@@ -52,6 +60,46 @@ function Header({ list }) {
             ))}
           </Carousel>
         </div>
+        <img src={sheffImage} alt="" className="w-full absolute bottom-0" />
+      </div>
+      <div className="w-full flex justify-center mt-5">
+        <Link
+          to="/products"
+          className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40  px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end"
+        >
+          ورود به فروشگاه
+        </Link>
+      </div>
+      <div className="flex flex-col items-center text-center font-extrabold text-blue5F text-2xl mt-3 transform translate-y-4">
+        <div className="flex flex-row">
+          <div className="relative">
+            <h1 className="inline z-50 pb-1">یادگیری &nbsp;</h1>
+            <span className="h-1 w-full absolute bottom-0 left-0 bg-yellow3"></span>
+          </div>
+          <h1 className="inline">با طعم لذت</h1>
+        </div>
+        <div className="flex flex-row mt-0.5">
+          <h1 className="inline">از اول تا یازدهم &nbsp;</h1>
+          <div className="relative">
+            <h1 className="inline z-50 pb-1">کنارتونیم</h1>
+            <span className="h-1 w-full absolute bottom-0 left-0 bg-orange1"></span>
+          </div>
+        </div>
+        <div className="flex flex-row">
+          <div className="relative">
+            <h1 className="inline z-50 pb-1">یادگیری جذاب &nbsp;</h1>
+            <span className="h-1 w-full absolute bottom-0 left-0 bg-green1"></span>
+          </div>
+          <h1 className="inline">و تعاملی</h1>
+        </div>
+      </div>
+      <div className="w-full p-4 transform translate-y-1/3 relative">
+        <img
+          src={jojoImage}
+          alt=""
+          className="w-full z-10 absolute top-0 left-0"
+        />
+        <Video />
       </div>
     </div>
   );
@@ -90,4 +138,4 @@ Header.defaultProps = {
       imageUrl: olum4Image,
     },
   ],
-}
+};

src/views/Home/Portrait/Public/Platforms/index.js

@@ -0,0 +1,60 @@
+import React from "react";
+import arBlue from "../../../../../assets/icons/ar-blue.svg";
+import qrGreen from "../../../../../assets/icons/qr-green.svg";
+
+function Platforms({ platforms }) {
+  return (
+    <div className="w-full mt-10 flex flex-col">
+      {platforms.map((platform, index) => (
+        <Platform platform={platform} key={index} />
+      ))}
+    </div>
+  );
+}
+
+const Platform = ({ platform }) => {
+  return (
+    <div
+      className="w-full flex flex-row rounded-sm p-4 items-start mb-5"
+      style={{
+        backgroundColor: platform.backgroundColor,
+        border: `1px solid ${platform.borderColor}`,
+      }}
+    >
+      <img src={platform.icon} alt="" className="w-8 h-8 m-1" />
+      <div className="flex-1 flex flex-col pr-3">
+        <strong className="text-sm" style={{ color: platform.titleColor }}>
+          {platform.title}
+        </strong>
+        <p className="text-xs" style={{ color: platform.textColor }}>
+          {platform.text}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Platforms;
+
+Platforms.defaultProps = {
+  platforms: [
+    {
+      backgroundColor: "#E6F2FF",
+      textColor: "#00366B",
+      titleColor: "#1072DC",
+      borderColor: "#196EC044",
+      title: "استفاده از تکنولوژی واقعیت افزوده",
+      text: "با استفاده از این تکنولوژی شما پس از نصب اپلیکیشن ما و گرفتن گوشیتون روی محتوای ویدئویی کتاب فیلم رو داخل گوشیتون ببینید",
+      icon: arBlue,
+    },
+    {
+      backgroundColor: "#E9FFE6",
+      textColor: "#0B5900",
+      titleColor: "#118A00",
+      borderColor: "#118A0044",
+      title: "محتوای قابل دریافت  باحال و جذاب",
+      text: "تقریبا بالا گوشه هر صفحه از کتاب ما یک کد کیو آر براتون گذاشتیم که با اسکن کد شما می‌تونید محتویات ضمیمه شده اون رو ببینید",
+      icon: qrGreen,
+    },
+  ],
+};

src/views/Home/Portrait/Public/Responsive/index.js

@@ -0,0 +1,44 @@
+import React from "react";
+import emc2Image from "../../../../../assets/icons/emc2.svg";
+
+function Responsive() {
+  return (
+    <div
+      className="w-full flex flex-col items-center mt-10 px-2"
+      style={{
+        background: `url(${emc2Image})`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "0px 0px",
+        
+      }}
+    >
+      <div className="flex flex-col items-center text-center font-extrabold text-blue5F text-lg mt-3 transform translate-y-4">
+        <div className="flex flex-row">
+          <h1 className="inline z-50">
+            از طریق موبایل یا کامپیوتر میتونی
+          </h1>
+        </div>
+        <div className="flex flex-row">
+          <div className="relative">
+            <h1 className="inline z-50 pb-1">به محتوای دیجیتال &nbsp;</h1>
+            <span className="h-1 w-full absolute bottom-0 left-0 bg-green1"></span>
+          </div>
+          <h1 className="inline">کتابها به راحتی</h1>
+        </div>
+        <div className="flex flex-row">
+          <h1 className="inline"> دسترسی داشته باشی</h1>
+        </div>
+      </div>
+      <div className="w-full relative mt-16" style={{ height : 'calc(100vh / 4)' }}>
+        <div className="absolute left-0 bottom-0 rounded-md" style={{ backgroundColor: '#E3E3E3', height : 'calc(100vh / 4)', width : 'calc(100vw / 1.2)' }}>
+
+        </div>
+        <div className="absolute right-0 bottom-0 rounded-md" style={{ backgroundColor: '#EEEEEE', height : 'calc(100vh / 5.2)', width : 'calc(100vw / 6)' }}>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Responsive;

src/views/Home/Portrait/Public/index.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import Header from './Header';
+import Features from './Features';
+import Responsive from './Responsive';
+import Platforms from './Platforms';
+import App from './App';
+import GradiantText from './GradiantText';
 
 function Public() {
   return (
-    <div className="w-full flex-1 px-2 pt-2">
+    <div className="w-full flex-1 px-2 pt-2 pb-6">
       <Header />
+      <Features />
+      <Responsive />
+      <Platforms />
+      <GradiantText />
+      <App />
     </div>
   )
 }

tailwind.config.js

@@ -7,11 +7,16 @@ module.exports = {
       blueC0: "#196EC0",
       blueB0 : "#517AB0",
       blue90: "#235A90",
+      blueEB : '#2B8DEB',
       blueFF : '#E8FCFF',
+      blueFF1 : '#E9F0FF',
       redFF : '#FFE6E6',
       redFF1 : '#FF2020',
       yellow2 : '#FDFFDA',
-      gray36 : '#363636'
+      yellow3 : '#EFFF00',
+      gray36 : '#363636',
+      orange1 : '#FF6600',
+      green1 : '#00FF80'
     }),
     textColor : (theme) => ({
       ...theme("colors"),
@@ -23,6 +28,7 @@ module.exports = {
       green71 : '#067182',
       red5F : '#5F1A05',
       yellow1 : '#5F5F05',
+      gray1 : '#333333'
     }),
     borderColor : (theme) => ({
       ...theme("colors"),