added responsiveness css for hero section and some other section created

acryldata · Sep 11, 2024 · 65228c7 · 65228c7
1 parent f16a7b8
commit 65228c7
Show file tree

Hide file tree

Showing 5 changed files with 550 additions and 29 deletions.
diff --git a/docs-website/src/pages/_components/Hero/hero.module.scss b/docs-website/src/pages/_components/Hero/hero.module.scss
@@ -7,7 +7,7 @@
     }
 
     .container {
-      background-color: #1890FF;
+      background-color: #1890ff;
       border-radius: 50px;
       max-width: 90vw !important;
       background-image: url("data:image/svg+xml,%3Csvg width='1586' height='895' viewBox='0 0 1586 895' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cmask id='mask0_312_2970' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='0' width='1578' height='887'%3E%3Crect x='1582' y='887' width='1578' height='887' rx='49.66' transform='rotate(180 1582 887)' fill='%231890FF'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_312_2970)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1258.06 -51.9644L1255.94 -49.8714L1287.88 -18.3583H1362.29C1362.88 -16.9122 1364.32 -15.8921 1366 -15.8921C1368.21 -15.8921 1370 -17.659 1370 -19.8387C1370 -22.0183 1368.21 -23.7853 1366 -23.7853C1364.32 -23.7853 1362.88 -22.7648 1362.29 -21.3183H1289.12L1258.06 -51.9644ZM1586.5 -50.9179H1583.5V51.3203L1625.38 92.64H1662V89.68H1626.62L1586.5 50.0943V-50.9179ZM905.709 -29.2115C905.116 -27.7653 903.679 -26.7452 902 -26.7452C899.791 -26.7452 898 -28.5122 898 -30.6918C898 -32.8715 899.791 -34.6384 902 -34.6384C903.679 -34.6384 905.116 -33.618 905.709 -32.1715H1240.12L1322.62 49.2273H1565.53C1566.23 48.0475 1567.52 47.2537 1569 47.2537C1571.21 47.2537 1573 49.0206 1573 51.2003C1573 53.3799 1571.21 55.1469 1569 55.1469C1567.14 55.1469 1565.57 53.8893 1565.13 52.1873H1321.38L1238.88 -29.2115H905.709ZM1401.46 -21.8116H1458.5V-24.7716H1401.87C1401.43 -26.474 1399.86 -27.7319 1398 -27.7319C1395.79 -27.7319 1394 -25.9649 1394 -23.7853C1394 -21.6056 1395.79 -19.8387 1398 -19.8387C1399.48 -19.8387 1400.77 -20.6322 1401.46 -21.8116ZM921.709 29.0009H1042.88L1092.38 77.8402H1227.54C1228.23 79.0197 1229.52 79.8132 1231 79.8132C1233.21 79.8132 1235 78.0462 1235 75.8666C1235 73.6869 1233.21 71.92 1231 71.92C1229.14 71.92 1227.57 73.1779 1227.13 74.8802H1093.62L1044.12 26.041H921.709C921.116 24.5945 919.679 23.574 918 23.574C915.791 23.574 914 25.341 914 27.5206C914 29.7003 915.791 31.4672 918 31.4672C919.679 31.4672 921.116 30.4471 921.709 29.0009ZM1305.56 60.514L1303.44 62.607L1359.88 118.293H1501.5V115.333H1361.12L1305.56 60.514ZM1580.97 107.933C1580.72 109.88 1579.04 111.386 1577 111.386C1574.79 111.386 1573 109.619 1573 107.439C1573 105.26 1574.79 103.493 1577 103.493C1578.26 103.493 1579.39 104.071 1580.12 104.973H1662V107.933H1580.97ZM938.465 130.133C937.773 131.312 936.48 132.106 935 132.106C932.791 132.106 931 130.339 931 128.159C931 125.979 932.791 124.213 935 124.213C936.864 124.213 938.43 125.47 938.874 127.173H1075.5V130.133H938.465ZM1372.5 164.378C1371.03 163.793 1370 162.375 1370 160.719C1370 158.539 1371.79 156.772 1374 156.772C1376.21 156.772 1378 158.539 1378 160.719C1378 162.375 1376.97 163.793 1375.5 164.378V233.611L1401.12 258.891H1564.88L1584.48 239.552C1584.17 238.994 1584 238.356 1584 237.677C1584 235.498 1585.79 233.731 1588 233.731C1590.21 233.731 1592 235.498 1592 237.677C1592 239.857 1590.21 241.624 1588 241.624C1587.58 241.624 1587.18 241.561 1586.8 241.445L1566.12 261.851H1399.88L1372.5 234.838V164.378ZM1283 178.479H1131.5V181.439H1283V178.479ZM1585 202.158H1490.38L1465.38 226.825H1415V229.785H1466.62L1491.62 205.118H1585V202.158ZM1337.13 232.745H1257V235.705H1337.54C1338.23 236.884 1339.52 237.677 1341 237.677C1343.21 237.677 1345 235.91 1345 233.731C1345 231.551 1343.21 229.784 1341 229.784C1339.14 229.784 1337.57 231.042 1337.13 232.745ZM1423.5 250.504H1517.5V247.544H1423.5V250.504ZM1587.87 317.597H1662V314.637H1587.47C1586.77 313.457 1585.48 312.663 1584 312.663C1581.79 312.663 1580 314.43 1580 316.61C1580 318.789 1581.79 320.556 1584 320.556C1585.86 320.556 1587.43 319.299 1587.87 317.597ZM1466 333.876H1541.38L1564.88 357.063H1639.5V354.103H1566.12L1542.62 330.916H1466V333.876ZM1640.5 522.327H1569.4L1539.4 550.446H1474.66C1474.1 549.279 1472.9 548.473 1471.5 548.473C1469.57 548.473 1468 550.019 1468 551.926C1468 553.833 1469.57 555.379 1471.5 555.379C1472.9 555.379 1474.1 554.573 1474.66 553.406H1540.6L1570.6 525.286H1640.5V522.327ZM1660 536.633H1590.88L1568.5 558.713V585.009C1566.53 585.252 1565 586.913 1565 588.925C1565 591.105 1566.79 592.872 1569 592.872C1571.21 592.872 1573 591.105 1573 588.925C1573 587.679 1572.41 586.568 1571.5 585.844V559.939L1592.12 539.593H1660V536.633ZM1481.66 567.219H1538.5V601.052C1537.03 601.638 1536 603.056 1536 604.712C1536 606.892 1537.79 608.659 1540 608.659C1542.21 608.659 1544 606.892 1544 604.712C1544 603.056 1542.97 601.638 1541.5 601.052V564.259H1481.66C1481.1 563.093 1479.9 562.286 1478.5 562.286C1476.57 562.286 1475 563.832 1475 565.739C1475 567.646 1476.57 569.193 1478.5 569.193C1479.9 569.193 1481.1 568.386 1481.66 567.219ZM1591.5 567.219H1660V564.259H1591.5V567.219ZM1609.5 588.432H1606.5V631.845H1660V628.885H1609.5V588.432ZM-70 622.472H99.7621L122.5 651.589V726.357C121.034 726.942 120 728.36 120 730.017C120 732.196 121.791 733.963 124 733.963C126.209 733.963 128 732.196 128 730.017C128 728.36 126.966 726.942 125.5 726.357V650.581L101.238 619.512H-70V622.472ZM1566.62 622.472H1398.88L1372.5 648.498V717.477C1371.03 718.063 1370 719.481 1370 721.137C1370 723.317 1371.79 725.083 1374 725.083C1376.21 725.083 1378 723.317 1378 721.137C1378 719.481 1376.97 718.063 1375.5 717.477V649.724L1400.12 625.432H1565.38L1588.18 647.931C1588.06 648.303 1588 648.7 1588 649.111C1588 651.291 1589.79 653.058 1592 653.058C1594.21 653.058 1596 651.291 1596 649.111C1596 646.932 1594.21 645.165 1592 645.165C1591.31 645.165 1590.67 645.336 1590.1 645.637L1566.62 622.472ZM1343 660.951C1341.14 660.951 1339.57 659.693 1339.13 657.991H1193.11L1145.61 703.87H958.5V700.911H1144.39L1191.89 655.031H1339.54C1340.23 653.852 1341.52 653.058 1343 653.058C1345.21 653.058 1347 654.825 1347 657.004C1347 659.184 1345.21 660.951 1343 660.951ZM1409 652.505C1410.7 652.505 1412.16 653.553 1412.73 655.031H1470.12L1495.62 680.191H1581.29C1581.88 678.745 1583.32 677.724 1585 677.724C1587.21 677.724 1589 679.491 1589 681.671C1589 683.85 1587.21 685.617 1585 685.617C1583.32 685.617 1581.88 684.597 1581.29 683.151H1494.38L1468.88 657.991H1412.68C1412.08 659.406 1410.66 660.398 1409 660.398C1406.79 660.398 1405 658.631 1405 656.451C1405 654.272 1406.79 652.505 1409 652.505ZM1619 653.058C1620.48 653.058 1621.77 653.852 1622.46 655.031H1660V657.991H1622.87C1622.43 659.693 1620.86 660.951 1619 660.951C1616.79 660.951 1615 659.184 1615 657.004C1615 654.825 1616.79 653.058 1619 653.058ZM382 753.696C383.679 753.696 385.116 754.717 385.709 756.163H573.5V759.123H385.709C385.116 760.569 383.679 761.59 382 761.59C379.791 761.59 378 759.823 378 757.643C378 755.463 379.791 753.696 382 753.696ZM1073 761.59C1071.32 761.59 1069.88 760.569 1069.29 759.123H943.621L890.621 811.416H835V808.456H889.379L942.379 756.163H1069.29C1069.88 754.717 1071.32 753.696 1073 753.696C1075.21 753.696 1077 755.463 1077 757.643C1077 759.823 1075.21 761.59 1073 761.59ZM1497.54 767.51H1353.88L1297.94 822.702L1300.06 824.795L1355.12 770.469H1497.13C1497.57 772.172 1499.14 773.429 1501 773.429C1503.21 773.429 1505 771.662 1505 769.483C1505 767.303 1503.21 765.536 1501 765.536C1499.52 765.536 1498.23 766.33 1497.54 767.51ZM1577 774.416C1578.68 774.416 1580.12 775.436 1580.71 776.883H1660V779.843H1580.71C1580.12 781.289 1578.68 782.309 1577 782.309C1574.79 782.309 1573 780.542 1573 778.363C1573 776.183 1574.79 774.416 1577 774.416ZM474.5 789.709H524.903L597.403 857.295H688V854.335H598.597L526.097 786.749H474.5V789.709ZM266.709 811.416H405.879L452.379 857.295H572.535C573.227 858.474 574.519 859.268 576 859.268C578.209 859.268 580 857.501 580 855.321C580 853.142 578.209 851.375 576 851.375C574.136 851.375 572.57 852.633 572.126 854.335H453.621L407.121 808.456H266.709C266.116 807.009 264.679 805.989 263 805.989C260.791 805.989 259 807.756 259 809.936C259 812.115 260.791 813.882 263 813.882C264.679 813.882 266.116 812.862 266.709 811.416ZM803.291 808.456C803.884 807.009 805.321 805.989 807 805.989C809.209 805.989 811 807.756 811 809.936C811 812.115 809.209 813.882 807 813.882C805.321 813.882 803.884 812.862 803.291 811.416H688V808.456H803.291ZM1232 813.882C1230.32 813.882 1228.88 812.862 1228.29 811.416H1094.62L1044.62 860.748H923.709C923.116 862.194 921.679 863.215 920 863.215C917.791 863.215 916 861.448 916 859.268C916 857.089 917.791 855.322 920 855.322C921.679 855.322 923.116 856.342 923.709 857.788H1043.38L1093.38 808.456H1228.29C1228.88 807.009 1230.32 805.989 1232 805.989C1234.21 805.989 1236 807.756 1236 809.936C1236 812.115 1234.21 813.882 1232 813.882ZM1577.5 829.175H1320.88L1233.88 915.014H906.123C905.39 914.112 904.263 913.534 903 913.534C900.791 913.534 899 915.301 899 917.481C899 919.66 900.791 921.427 903 921.427C905.04 921.427 906.723 919.921 906.969 917.974H1235.12L1322.12 832.135H1577.5V829.175ZM-66.5 833.122H169.879L254.016 916.136C254.005 916.254 254 916.373 254 916.494C254 918.674 255.791 920.44 258 920.44C260.209 920.44 262 918.674 262 916.494C262 914.314 260.209 912.547 258 912.547C257.054 912.547 256.184 912.872 255.499 913.414L171.121 830.162H-66.5V833.122ZM1366 904.161H1298.38L1265.94 936.167L1268.06 938.26L1299.62 907.121H1366V904.161ZM1396.5 907.121H1462.42L1496.99 938.306L1499.01 936.121L1463.58 904.161H1396.5V907.121ZM271 912.547C272.679 912.547 274.116 913.568 274.709 915.014H592.5V917.974H274.709C274.116 919.42 272.679 920.44 271 920.44C268.791 920.44 267 918.674 267 916.494C267 914.314 268.791 912.547 271 912.547ZM1660.5 792.669H1629.88L1583.5 838.429V934.254H1586.5V839.655L1631.12 795.629H1660.5V792.669ZM1515 639.245C1517.21 639.245 1519 637.478 1519 635.298C1519 633.119 1517.21 631.352 1515 631.352C1512.79 631.352 1511 633.119 1511 635.298C1511 637.478 1512.79 639.245 1515 639.245ZM1619 228.798C1621.21 228.798 1623 227.031 1623 224.851C1623 222.671 1621.21 220.904 1619 220.904C1616.79 220.904 1615 222.671 1615 224.851C1615 227.031 1616.79 228.798 1619 228.798ZM1606 308.716C1608.21 308.716 1610 306.949 1610 304.77C1610 302.59 1608.21 300.823 1606 300.823C1603.79 300.823 1602 302.59 1602 304.77C1602 306.949 1603.79 308.716 1606 308.716ZM1573 292.93C1573 295.11 1571.21 296.877 1569 296.877C1566.79 296.877 1565 295.11 1565 292.93C1565 290.75 1566.79 288.983 1569 288.983C1571.21 288.983 1573 290.75 1573 292.93ZM1545 284.05C1547.21 284.05 1549 282.283 1549 280.103C1549 277.924 1547.21 276.157 1545 276.157C1542.79 276.157 1541 277.924 1541 280.103C1541 282.283 1542.79 284.05 1545 284.05ZM1471 320.556C1471 322.736 1469.21 324.503 1467 324.503C1464.79 324.503 1463 322.736 1463 320.556C1463 318.377 1464.79 316.61 1467 316.61C1469.21 316.61 1471 318.377 1471 320.556ZM1112 826.709C1113.48 826.709 1114.77 825.915 1115.46 824.735H1137V821.775H1115.87C1115.43 820.073 1113.86 818.815 1112 818.815C1109.79 818.815 1108 820.582 1108 822.762C1108 824.942 1109.79 826.709 1112 826.709ZM916 809.936C916 812.115 914.209 813.882 912 813.882C909.791 813.882 908 812.115 908 809.936C908 807.756 909.791 805.989 912 805.989C914.209 805.989 916 807.756 916 809.936ZM1012 783.789H949V786.749H1012V783.789ZM1182 698.937H1221.5V701.897H1182V698.937ZM1112 723.604H1155V726.563H1112V723.604ZM1260.5 723.604H1346.5V726.563H1260.5V723.604Z' fill='white'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
@@ -51,7 +51,7 @@
       justify-content: center;
       align-items: center;
 
-      >* {
+      > * {
         margin-left: 30%;
         text-align: left;
         width: 90%;
@@ -80,12 +80,17 @@
             /* AI Governance */
             padding: 0 10px;
 
-            font-family: 'Manrope';
+            font-family: "Manrope";
             font-style: normal;
             font-weight: 700;
 
-
-            background: linear-gradient(90deg, #3B20D9 0%, #C713C6 31%, #DD567D 64.5%, #D7AC27 100%);
+            background: linear-gradient(
+              90deg,
+              #3b20d9 0%,
+              #c713c6 31%,
+              #dd567d 64.5%,
+              #d7ac27 100%
+            );
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
@@ -108,7 +113,7 @@
         }
 
         .cta__secondary {
-          background-color: rgba($color: #fff, $alpha: .2);
+          background-color: rgba($color: #fff, $alpha: 0.2);
           color: white;
           border: 1px solid white;
         }
@@ -156,5 +161,116 @@
     //     }
     //   }
     // }
+
+    @media (max-width: 480px) {
+      .container {
+        background-color: #1890ff;
+        border-radius: 25px;
+        max-width: 90vw !important;
+        height: auto !important;
+      }
+
+      .hero__content {
+        padding: 2rem 0;
+        height: 100%;
+        display: flex !important;
+        flex-direction: column !important;
+
+        .hero__text {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: start;
+
+          > * {
+            margin-left: 0%;
+            text-align: left;
+            width: 90%;
+          }
+
+          .hero__title {
+            font-size: 2rem;
+            line-height: normal;
+            font-family: Manrope;
+          }
+
+          .hero__subtitle {
+            font-size: 1rem;
+            line-height: normal;
+            font-family: Manrope;
+            margin-top: 1rem;
+            font-weight: 300;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+
+            span {
+              background: white;
+              display: inline-flex;
+              align-items: center;
+              border-radius: 4px;
+
+              span {
+                /* AI Governance */
+                padding: 0 7px;
+                font-size: 0.8rem;
+                font-family: "Manrope";
+                font-style: normal;
+                font-weight: 700;
+
+                background: linear-gradient(
+                  90deg,
+                  #3b20d9 0%,
+                  #c713c6 31%,
+                  #dd567d 64.5%,
+                  #d7ac27 100%
+                );
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                text-fill-color: transparent;
+              }
+            }
+          }
+
+          .hero__cta {
+            margin-top: 1rem;
+            width: 100%;
+            display: flex;
+            a {
+              cursor: pointer;
+              display: inline-block;
+              font-size: 0.8rem;
+              background-color: white;
+              padding: 2px 15px;
+              border-radius: 50px;
+            }
+
+            .cta__secondary {
+              background-color: rgba($color: #fff, $alpha: 0.2);
+              color: white;
+              border: 1px solid white;
+            }
+          }
+
+          .hero__footer {
+            margin-top: 1rem;
+            font-size: 1rem;
+          }
+        }
+
+        .hero__img {
+          display: flex;
+          align-items: center;
+          justify-content: start;
+          width: 100%;
+
+          img {
+            width: 100%;
+          }
+        }
+      }
+    }
   }
-}
+}
diff --git a/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss b/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss
@@ -172,5 +172,114 @@
     }
 
 
+    @media (max-width: 480px) {
+      width: 90vw;
+      margin: 2rem auto;
+
+      .quickstart__header {
+        text-align: center;
+        width: 80%;
+        margin: auto;
+
+        .quickstart__title,
+        .quickstart__subtitle {
+          font-size: 2rem;
+          line-height: normal;
+          font-family: Manrope;
+        }
+
+        .quickstart__subtitle {
+          font-size: 1rem;
+        }
+      }
+
+      .quickstart__content {
+        display: flex;
+        flex-direction: column;
+        margin-top: 3rem;
+
+        .quickstart__text {
+          &::before {
+            content: "";
+
+            height: 398px;
+            width: 10px;
+            position: absolute;
+
+            background: linear-gradient(180deg, #29B5E8 18.71%, #FFBF4C 143.37%);
+            border-radius: 10px;
+
+            /* Inside auto layout */
+            display: block;
+          }
+
+          div {
+            padding-left: 8%;
+          }
+
+          .quickstart__text__label {
+
+            /* Label */
+            font-family: 'Manrope';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 1rem;
+            line-height: normal;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+
+            color: #999EB3;
+          }
+
+          .quickstart__text__head {
+
+            /* H4 | Semibold */
+            font-family: 'Manrope';
+            font-style: normal;
+            font-weight: 600;
+            font-size: 1.5rem;
+            line-height: normal;
+
+            color: #171B2B;
+            margin-top: 0.5rem;
+          }
+
+          .quickstart__text__desc {
+
+            margin-top: 1rem;
+            font-family: 'Manrope';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 1rem;
+            line-height: normal;
+            /* Text|Light */
+            color: #838BA8;
+
+            p {
+              margin-bottom: 0.5rem;
+            }
+
+            .learn_more {
+              color: #1890FF;
+              font-weight: 500;
+              font-size: 0.8rem;
+            }
+          }
+        }
+
+        .quickstart__img {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            width: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+
+    }
+
   }
 }