diff --git a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss index 2d089833d2597..2fbae3b5b7b7e 100644 --- a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss +++ b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss @@ -91,3 +91,100 @@ } } } + +@media (max-width: 480px) { + .case_study { + display: flex; + flex-direction: column; + width: 100%; + margin: 5rem auto; + + .case_study_heading { + text-align: center; + font-family: "Manrope"; + + div { + width: 90%; + margin: auto; + font-size: 1.8rem; + line-height: normal; + font-weight: 500; + } + p { + width: 65%; + margin: auto; + font-size: 1.2rem; + line-height: 1.5rem; + margin-top: 10px; + } + } + + .card_row { + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 30px; + + .card { + position: relative; + width: 100%; + border-radius: 20px; + background: white; + padding: 5px; + padding-bottom: 15px; + + img { + width: 100%; + height: 70%; + object-fit: cover; + border-radius: 15px; + } + .card_tag { + position: absolute; + right: 0.8rem; + top: 0.8rem; + background: #edf2ff; + color: rgb(58, 57, 57); + font-size: 10px; + padding: 0.3rem; + border-radius: 0.5rem; + } + .card_heading_div { + padding: 0 10px 10px; + .card_heading { + font-size: 1.5rem; + font-weight: bold; + } + .card_para { + font-size: 1rem; + margin-top: 5px; + line-height: normal; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + + .bottom_line { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #12b0fb; + font-size: 1.1rem; + font-weight: 500; + margin-top: 50px; + margin-bottom: 10px; + + span { + line-height: 10px; + font-size: 1.5rem; + margin-left: 5px; + } + } + } +} diff --git a/docs-website/src/pages/_components/Community/community.module.scss b/docs-website/src/pages/_components/Community/community.module.scss index fbb98d98e657a..82ab420f7e3cf 100644 --- a/docs-website/src/pages/_components/Community/community.module.scss +++ b/docs-website/src/pages/_components/Community/community.module.scss @@ -108,3 +108,117 @@ } } } + +// Responsiveness +@media (max-width: 480px) { + .community_section { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: "Manrope"; + + &::before { + position: absolute; + content: ""; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 30px; + background-color: #ffffff; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + + &::after { + position: absolute; + content: ""; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 30px; + background-color: #ffffff; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + } + + .community_section_left { + padding: 50px 0; + width: 100%; + background: #3e2644; + color: white; + display: flex; + align-items: center; + justify-content: center; + + .community_section_left_content { + width: 80%; + margin: 2rem auto 5rem 2rem; + .community_section_heading { + color: rgba($color: #fff, $alpha: 0.4); + font-size: 1.7rem; + line-height: normal; + font-weight: bold; + } + p { + font-size: 0.8rem; + color: rgba($color: #fff, $alpha: 0.6); + font-weight: light; + margin-top: 10px; + } + a { + cursor: pointer; + display: inline-block; + font-size: 0.8rem; + background-color: transparent; + padding: 5px 20px; + border-radius: 50px; + margin: 0 10px 0 0; + outline: none; + border: 1px solid white; + color: white; + } + } + } + .community_section_right { + width: 100%; + background: #000000; + flex: 1; + color: white; + padding: 0px; + display: flex; + justify-content: center; + flex-direction: column; + font-family: "Manrope"; + + .community_section_heading { + width: 80%; + margin: 2rem auto 10rem 2rem; + div{ + color: white; + font-size: 1.2rem; + line-height: normal; + font-weight: bold; + } + + a { + margin-top: 10px; + font-weight: 300; + cursor: pointer; + display: inline-flex; + font-size: 0.8rem; + background-color: transparent; + padding: 5px 10px; + border-radius: 50px; + outline: none; + border: 1px solid white; + color: white; + align-items: center; + gap: 8px; + } + } + } + } +} diff --git a/docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss b/docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss index 1a01e986bb7de..f52a8e2b26be3 100644 --- a/docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss +++ b/docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss @@ -127,3 +127,128 @@ } } } + +// Responsiveness +@media (max-width: 480px) { + .ecosystem_section { + position: relative; + background: white; + + .ecosystem_section_content { + width: 100%; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem 0rem; + + .ecosystem_section_upper_content { + width: 85%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding-top: 1rem; + + .ecosystem_section_heading{ + font-size: 1.6rem; + line-height: normal; + font-family: Manrope; + } + .ecosystem_section_subtitle { + width: 70%; + font-size: 0.8rem; + margin-top: 10px; + } + .bottom_line { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + + span { + color: #12b0fb; + font-size: 0.8rem; + font-weight: 500; + margin-top: 10px; + margin-bottom: 10px; + span { + line-height: 10px; + font-size: 1.5rem; + } + } + } + } + .ecosystem_section_lower_content { + width: 100%; + display: grid; + grid-template-areas: + "item-3 item-3" + "item-3 item-3 " + "item-1 item-2" + "item-4 item-5"; + gap: 10px; + margin-top: 20px; + grid-template-columns: 1fr 1fr; + } + + .item1, + .item2, + .item3, + .item4, + .item5 { + border-radius: 10px; + display: flex; + align-items: end; + justify-content: start; + padding: 10px; + overflow: hidden; + white-space: normal; + font-size: 1rem; + min-width: 150px; + } + + .item1 { + grid-area: item-1; + background-color: rgb(238, 231, 243); + } + + .item2 { + grid-area: item-2; + background-color: rgb(247, 226, 198); + } + + .item3 { + grid-area: item-3; + aspect-ratio: 1; + background-color: #f6f8fb; + padding: 0; + } + + .item4 { + grid-area: item-4; + background-color: rgb(241, 241, 191); + } + + .item5 { + grid-area: item-5; + background-color: rgb(243, 206, 227); + } + + /* Additional: Control image size */ + .item_content img { + width: 20px; + height: 20px; + } + + /* Additional: Limit text height with ellipsis */ + .item_content span { + display: -webkit-box; + -webkit-line-clamp: 3; /* Show only 2 lines */ + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} diff --git a/docs-website/src/pages/_components/Trial/index.js b/docs-website/src/pages/_components/Trial/index.js index d0ca99f80897a..a4f2490e51480 100644 --- a/docs-website/src/pages/_components/Trial/index.js +++ b/docs-website/src/pages/_components/Trial/index.js @@ -16,7 +16,7 @@ const Trial = () => { Book a Demo Product Tour -
Get started with Core →
+
Get started with Core
diff --git a/docs-website/src/pages/_components/Trial/trial.module.scss b/docs-website/src/pages/_components/Trial/trial.module.scss index b736d41cdf8de..da3b6e18c6f26 100644 --- a/docs-website/src/pages/_components/Trial/trial.module.scss +++ b/docs-website/src/pages/_components/Trial/trial.module.scss @@ -166,3 +166,182 @@ } } } + +// Responsiveness +@media (max-width: 480px) { + + .container { + display: flex; + flex-direction: column; + background: #fafafa; + width: 90vw; + margin: 2rem auto; + } + + .trial { + height: 800px; + background: white; + display: flex; + flex-direction: column; + + .trial_left { + width: 100%; + height: 40%; + display: flex; + + .left_content { + width: 100%; + span { + color: #8088a3; + font-size: 1.5rem; + font-weight: 400; + } + p { + color: #2e2e38; + font-size: 2rem; + font-weight: 500; + line-height: normal; + } + .btn_div { + display: flex; + gap: 0rem; + margin-bottom: 1rem; + + a:first-child { + cursor: pointer; + display: inline-block; + font-size: 0.8rem; + background-color: #1890ff; + padding: 5px 15px; + border-radius: 50px; + margin: 0 10px 0 0; + color: white; + } + + a:nth-child(2) { + cursor: pointer; + display: inline-block; + font-size: 0.8rem; + padding: 5px 15px; + border-radius: 50px; + margin: 0 10px 0 0; + background-color: transparent; + color: #1890ff; + border: 1px solid #1890ff; + } + } + + .start_arrow { + margin-top: 1rem; + font-size: 1rem; + color: #1890ff; + font-weight: 500; + + span { + line-height: 10px; + font-size: 1.5rem; + margin-left: 0px; + color: #1890ff; + } + } + } + } + .trial_right { + width: 100%; + height: 60%; + + .right_content { + height: 100%; + display: flex; + gap: 1rem; + .right_l { + width: 48%; + height: 95%; + display: flex; + flex-direction: column; + gap: 1rem; + + div { + font-size: 1rem; + font-weight: 500; + color: #2e2e38; + line-height: normal; + img { + margin-bottom: 20px; + } + } + + div:first-child { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 1rem; + padding-right: 2rem; + height: 49%; + border-radius: 35px; + background-image: linear-gradient(to bottom, rgb(235, 227, 241), #d3b9e2); + } + + div:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 1rem; + padding-right: 2rem; + background-image: linear-gradient( + to bottom, + rgb(236, 224, 167), + rgb(248, 207, 152) + ); + height: 49%; + border-radius: 35px; + } + } + .right_r { + margin-top: 0px; + width: 48%; + height: 95%; + display: flex; + flex-direction: column; + gap: 1rem; + + div { + font-size: 1rem; + font-weight: 500; + color: #2e2e38; + line-height: normal; + img { + margin-bottom: 20px; + } + } + + div:first-child { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 1rem; + padding-right: 2rem; + background-image: linear-gradient(to bottom, rgb(245, 224, 224), #f8d4b3); + height: 49%; + border-radius: 35px; + } + + div:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 1rem; + padding-right: 2rem; + background-image: linear-gradient( + to bottom, + rgb(226, 167, 190), + rgb(248, 217, 217) + ); + height: 49%; + border-radius: 35px; + } + } + } + } + } +}