+
{caseStudies
.slice(0, Math.floor(caseStudies.length / 2))
.map((caseStudy, index) => (
diff --git a/pages/web3-teams/components/CaseStudySection/index.module.scss b/pages/web3-teams/components/CaseStudySection/index.module.scss
index d65c7c6e..69e21575 100644
--- a/pages/web3-teams/components/CaseStudySection/index.module.scss
+++ b/pages/web3-teams/components/CaseStudySection/index.module.scss
@@ -1,13 +1,25 @@
+@import "@/assets/styles/breakpoints.scss";
+
.caseStudiesSection {
- padding: 120px 0px;
+ padding: 7.5rem 0px;
border-top: 1px solid #e2e8ff;
background: #fff;
+
+ @include mobile {
+ padding: 5rem 1.5rem;
+ }
}
.caseStudiesSectionTitle {
color: #374151;
font-size: 2.5rem;
font-weight: 700;
+
+ @include mobile {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 29px;
+ }
}
.caseStudiesSectionSubtitle {
@@ -16,12 +28,25 @@
line-height: 140%;
letter-spacing: 0.64px;
margin-top: 0.5rem;
+
+ @include mobile {
+ margin-top: 1rem;
+ font-size: 1rem;
+ line-height: 22px;
+ letter-spacing: 0.04em;
+ }
}
.caseStudiesSectionContent {
display: flex;
flex-direction: column;
gap: 56px;
+ margin-top: 68px;
+
+ @include mobile {
+ gap: 3.5rem;
+ margin-top: 2.5rem;
+ }
}
.caseStudy {
@@ -48,12 +73,23 @@
.caseStudyContent {
padding: 32px 40px 38.5px;
+
+ @include mobile {
+ padding: 2rem 1.5rem;
+ }
}
.caseStudyTitle {
color: #000;
font-size: 1.5rem;
font-weight: 700;
+
+ @include mobile {
+ font-size: 1.125rem;
+ font-weight: 800;
+ line-height: 22px;
+ letter-spacing: 0.01em;
+ }
}
.caseStudyDescription {
@@ -62,15 +98,35 @@
line-height: 140%;
letter-spacing: 0.64px;
margin-top: 14.5px;
+
+ @include mobile {
+ margin-top: 0.75rem;
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.04em;
+ }
}
.caseStudyCta {
margin-top: 1.5rem;
+
+ @include mobile {
+ margin-top: 2rem;
+
+ * {
+ font-size: 0.75rem;
+ font-weight: 500;
+ }
+ }
}
.columnsContainer {
display: flex;
gap: 55px;
+
+ @include mobile {
+ flex-direction: column;
+ }
}
.column {
diff --git a/pages/web3-teams/components/DashboardsSection/index.module.scss b/pages/web3-teams/components/DashboardsSection/index.module.scss
index d96d2f16..578a3cde 100644
--- a/pages/web3-teams/components/DashboardsSection/index.module.scss
+++ b/pages/web3-teams/components/DashboardsSection/index.module.scss
@@ -1,7 +1,13 @@
+@import "@/assets/styles/breakpoints.scss";
+
.dashboardsSection {
border-top: 1px solid #e2e8ff;
background: #fff;
- padding: 120px 0px;
+ padding: 7.5rem 0px;
+
+ @include mobile {
+ padding: 5rem 1.5rem;
+ }
}
.dashboardsSectionTitle {
@@ -9,12 +15,25 @@
font-size: 2.5rem;
font-weight: 700;
margin-top: 0.5rem;
+
+ @include mobile {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 29px;
+ }
}
.dashboardsSectionSubtitle {
color: #374151;
font-size: 1.125rem;
line-height: 140%;
+
+ @include mobile {
+ margin-top: 1rem;
+ font-size: 1rem;
+ line-height: 22px;
+ letter-spacing: 0.04em;
+ }
}
.dashboardsSectionContent {
diff --git a/pages/web3-teams/components/FeatureList/index.module.scss b/pages/web3-teams/components/FeatureList/index.module.scss
index 14276e96..ec6d349e 100644
--- a/pages/web3-teams/components/FeatureList/index.module.scss
+++ b/pages/web3-teams/components/FeatureList/index.module.scss
@@ -1,3 +1,5 @@
+@import "@/assets/styles/breakpoints.scss";
+
.featureList {
position: relative;
display: grid;
@@ -11,6 +13,10 @@
&:hover {
border-color: #a8abd7 !important;
}
+
+ @include mobile {
+ grid-template-columns: 1fr;
+ }
}
.featureListMedia {
@@ -19,31 +25,66 @@
justify-content: center;
border-radius: 40px 0px 0px 40px;
height: 100%;
+
+ @include mobile {
+ max-width: 100%;
+ border-radius: 40px 40px 0px 0px;
+
+ img {
+ max-width: 100%;
+ padding: 2.375rem 1.5rem;
+ }
+ }
}
.featureListContent {
- margin: 64px 48px;
+ margin: 4rem 3rem;
flex: 1;
+
+ @include mobile {
+ margin: 2rem 1.5rem;
+ }
}
.featureListTags {
margin-bottom: 1.5rem;
+
+ @include mobile {
+ margin-bottom: 1rem;
+ }
}
.featureListTitle {
margin-bottom: 1.5rem;
+
+ @include mobile {
+ margin-bottom: 0.875rem;
+ }
}
.featureListDescription {
margin-bottom: 1.5rem;
+
+ @include mobile {
+ margin-top: 1rem;
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.04em;
+ }
}
.featureListFeatures {
+ margin: 0;
margin-bottom: 1.5rem;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
+
+ @include mobile {
+ grid-template-columns: 1fr;
+ margin-bottom: 2rem;
+ }
}
.featureListItem {
margin: 8px 0;
diff --git a/pages/web3-teams/components/FeaturesSection/index.module.scss b/pages/web3-teams/components/FeaturesSection/index.module.scss
index 27785059..b57223b0 100644
--- a/pages/web3-teams/components/FeaturesSection/index.module.scss
+++ b/pages/web3-teams/components/FeaturesSection/index.module.scss
@@ -1,6 +1,13 @@
+@import "@/assets/styles/breakpoints.scss";
+
.featuresSection {
- margin: 120px 0px;
+ padding: 120px 0px;
display: flex;
flex-direction: column;
gap: 180px;
+
+ @include mobile {
+ padding: 80px 0px;
+ gap: 3.5rem;
+ }
}
diff --git a/pages/web3-teams/components/FeautreSuiteSection/index.module.scss b/pages/web3-teams/components/FeautreSuiteSection/index.module.scss
index 5f3b06f4..03f747b1 100644
--- a/pages/web3-teams/components/FeautreSuiteSection/index.module.scss
+++ b/pages/web3-teams/components/FeautreSuiteSection/index.module.scss
@@ -1,7 +1,13 @@
+@import "@/assets/styles/breakpoints.scss";
+
.featuresSection {
border-top: 1px solid #e2e8ff;
background: #fff;
- padding: 120px 0px;
+ padding: 7.5rem 0px;
+
+ @include mobile {
+ padding: 5rem 1.5rem;
+ }
}
.featuresSectionTitle {
@@ -10,6 +16,12 @@
font-weight: 700;
margin-top: 0.5rem;
max-width: 900px;
+
+ @include mobile {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 29px;
+ }
}
.featuresSectionSubtitle {
@@ -17,10 +29,21 @@
font-size: 1.125rem;
line-height: 140%;
max-width: 520px;
+
+ @include mobile {
+ margin-top: 1rem;
+ font-size: 1rem;
+ line-height: 22.4px;
+ letter-spacing: 0.04em;
+ }
}
.featuresSectionContent {
margin-top: 2.5rem;
+
+ @include mobile {
+ margin-top: 4rem;
+ }
}
.featureList {
@@ -28,6 +51,11 @@
grid-template-columns: repeat(3, 1fr);
column-gap: 120px;
grid-auto-rows: minmax(auto, 1fr);
+
+ @include mobile {
+ grid-template-columns: 1fr;
+ row-gap: 5rem;
+ }
}
.featureListItem {
@@ -44,6 +72,10 @@
flex: 1;
display: flex;
flex-direction: column;
+
+ @include mobile {
+ margin-top: 1rem;
+ }
}
.featureListItemTitle {
@@ -58,8 +90,23 @@
line-height: 140%;
letter-spacing: 0.64px;
flex: 1;
+
+ @include mobile {
+ margin-top: 0.75rem;
+ font-size: 14px;
+ line-height: 19.6px;
+ letter-spacing: 0.04em;
+ }
}
.featureListItemCta {
margin-top: 1.5rem;
+
+ @include mobile {
+ margin-top: 2rem;
+ * {
+ font-size: 0.75rem;
+ font-weight: 500;
+ }
+ }
}
diff --git a/pages/web3-teams/components/List/index.module.scss b/pages/web3-teams/components/List/index.module.scss
index a1da2428..3f24084d 100644
--- a/pages/web3-teams/components/List/index.module.scss
+++ b/pages/web3-teams/components/List/index.module.scss
@@ -1,3 +1,5 @@
+@import "@/assets/styles/breakpoints.scss";
+
.list {
display: flex;
flex-direction: column;
@@ -23,12 +25,22 @@
letter-spacing: 0.36px;
padding: 24px 32px;
text-decoration: none;
+
+ @include mobile {
+ padding: 1rem;
+ }
}
.listItemIcon {
width: 2rem;
height: 2rem;
margin-right: 1.5rem;
+
+ @include mobile {
+ width: 1.5rem;
+ height: 1.5rem;
+ margin-right: 1rem;
+ }
}
.listItemName {
@@ -37,6 +49,13 @@
font-weight: 500;
letter-spacing: 0.36px;
flex: 1;
+
+ @include mobile {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 17px;
+ letter-spacing: 0.02em;
+ }
}
.listItemArrow {
diff --git a/pages/web3-teams/components/Web3HeroSection/index.module.scss b/pages/web3-teams/components/Web3HeroSection/index.module.scss
index 44a19306..6fedd674 100644
--- a/pages/web3-teams/components/Web3HeroSection/index.module.scss
+++ b/pages/web3-teams/components/Web3HeroSection/index.module.scss
@@ -1,3 +1,4 @@
+@import "@/assets/styles/breakpoints.scss";
@import "@/assets/styles/mixins";
.landingHeroSection {
@@ -16,6 +17,13 @@
flex-direction: column;
max-width: 588px;
width: 100%;
+
+ @include mobile {
+ align-items: center;
+ max-width: 100%;
+
+ width: 100vw;
+ }
}
.heading {
color: #374151;
@@ -24,6 +32,14 @@
font-weight: 700;
line-height: normal;
margin-top: 1.5rem;
+
+ @include mobile {
+ font-size: 2rem;
+ font-weight: 700;
+ line-height: 39px;
+ letter-spacing: 0em;
+ text-align: center;
+ }
}
.subHeading {
@@ -46,6 +62,10 @@
height: 478px;
width: 549px;
margin-left: 71px;
+
+ @include mobile {
+ display: none;
+ }
}
.scrollIcon {
diff --git a/pages/web3-teams/index.js b/pages/web3-teams/index.js
index fdeb3044..8e9d7b2e 100644
--- a/pages/web3-teams/index.js
+++ b/pages/web3-teams/index.js
@@ -34,7 +34,7 @@ const features = [
type: "link",
text: "Documentation",
target: "_blank",
- href: "https://docs.topledger.io",
+ href: "https://docs.topledger.xyz",
},
],
},
From 13dbb9831d4ab7da008bddf24665dd9d5d8cc366 Mon Sep 17 00:00:00 2001
From: manishsharma004 <51284079+manishsharma004@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:32:16 +0000
Subject: [PATCH 2/6] fixes mobile design for research page
---
components/Footer/index.js | 8 +-
components/Footer/index.module.scss | 6 +
.../components/FeautreSuiteSection/index.js | 66 ----------
.../FeautreSuiteSection/index.module.scss | 65 ----------
.../components/PrivateCloudSection/index.js | 82 +++----------
.../PrivateCloudSection/index.module.scss | 116 +++++++++++++++++-
.../ResearchHeroSection/index.module.scss | 36 +++++-
pages/research/index.js | 4 +-
8 files changed, 182 insertions(+), 201 deletions(-)
delete mode 100644 pages/research/components/FeautreSuiteSection/index.js
delete mode 100644 pages/research/components/FeautreSuiteSection/index.module.scss
diff --git a/components/Footer/index.js b/components/Footer/index.js
index d54d433a..ea495e5b 100644
--- a/components/Footer/index.js
+++ b/components/Footer/index.js
@@ -1,3 +1,5 @@
+import cx from "classnames";
+
import Button from "../Button";
import Section from "../Section";
import ContactUs from "./components/ContactUs";
@@ -84,7 +86,11 @@ const Footer = () => {
© 2024, Top Ledger, All rights reserved
-
+
Privacy Policy
diff --git a/components/Footer/index.module.scss b/components/Footer/index.module.scss
index bbab0665..91ebc3c2 100644
--- a/components/Footer/index.module.scss
+++ b/components/Footer/index.module.scss
@@ -71,3 +71,9 @@
font-weight: 400;
width: 100%;
}
+
+.privacyPolicy {
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/pages/research/components/FeautreSuiteSection/index.js b/pages/research/components/FeautreSuiteSection/index.js
deleted file mode 100644
index 97c6f323..00000000
--- a/pages/research/components/FeautreSuiteSection/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import Section from "@/components/Section";
-import UnderlinedText from "@/components/UnderlinedText";
-
-import styles from "./index.module.scss";
-import { getAction } from "@/components/ArticleCard/ArticleFooter";
-
-// const feature = {
-// media: {
-// type: "image",
-// src: "/assets/images/feature-suite/private-db.svg",
-// },
-// title: "Connect private DB",
-// description:
-// "Securely connect your private data source to the Top Ledger platform and collate it with decoded on-chain Solana data",
-// cta: [
-// {
-// type: "link",
-// text: "Supported DBs",
-// target: "_blank",
-// href: "https://docs.topledger.xyz",
-// },
-// ],
-// }
-
-const FeatureList = ({ features = [] }) => {
- return (
-
- {features.map((feature, index) => (
-
-
-
-
-
-
{feature.title}
-
- {feature.description}
-
-
- {feature.cta?.map(getAction)}
-
-
-
- ))}
-
- );
-};
-
-const FeatureSuiteSection = ({ features = [] }) => {
- return (
-
-
- Suite of features to build a connected{" "}
- analytics experience
-
-
- We add new features with one sole aim: to fuel decision-making and
- skyrocket productivity
-
-
-
-
-
- );
-};
-
-export default FeatureSuiteSection;
diff --git a/pages/research/components/FeautreSuiteSection/index.module.scss b/pages/research/components/FeautreSuiteSection/index.module.scss
deleted file mode 100644
index 5f3b06f4..00000000
--- a/pages/research/components/FeautreSuiteSection/index.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.featuresSection {
- border-top: 1px solid #e2e8ff;
- background: #fff;
- padding: 120px 0px;
-}
-
-.featuresSectionTitle {
- color: #374151;
- font-size: 2.5rem;
- font-weight: 700;
- margin-top: 0.5rem;
- max-width: 900px;
-}
-
-.featuresSectionSubtitle {
- color: #374151;
- font-size: 1.125rem;
- line-height: 140%;
- max-width: 520px;
-}
-
-.featuresSectionContent {
- margin-top: 2.5rem;
-}
-
-.featureList {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- column-gap: 120px;
- grid-auto-rows: minmax(auto, 1fr);
-}
-
-.featureListItem {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
-}
-
-.featureListItemMedia {
-}
-
-.featureListItemContent {
- margin-top: 2.5rem;
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-.featureListItemTitle {
- font-size: 1.5rem;
- font-weight: 700;
-}
-
-.featureListItemDescription {
- margin-top: 1rem;
- color: #374151;
- font-size: 1rem;
- line-height: 140%;
- letter-spacing: 0.64px;
- flex: 1;
-}
-
-.featureListItemCta {
- margin-top: 1.5rem;
-}
diff --git a/pages/research/components/PrivateCloudSection/index.js b/pages/research/components/PrivateCloudSection/index.js
index 048f5f11..1df83e90 100644
--- a/pages/research/components/PrivateCloudSection/index.js
+++ b/pages/research/components/PrivateCloudSection/index.js
@@ -1,77 +1,26 @@
-import Section from "@/components/Section";
-
-import styles from "./index.module.scss";
-import Card from "@/components/Card";
-import { getAction } from "@/components/ArticleCard/ArticleFooter";
import Image from "next/image";
-import Icon from "@/components/Icon";
+import cx from "classnames";
+
+import Section from "@/components/Section";
import Button from "@/components/Button";
import UnderlinedText from "@/components/UnderlinedText";
import QueryFormModal from "@/components/QueryForm/QueryFormModal";
-// const sections = [
-// {
-// title: "Tailored schemas to fit your specific needs",
-// features: [
-// {
-// title: "DEX trades",
-// description:
-// "Decoding perpetual swaps to analyze the derivatives ecosystem",
-// },
-// {
-// title: "NFT/cNFT mints and trades",
-// description: "Access the activities of all stablecoins and SPL tokens",
-// },
-// {
-// title: "Staking",
-// description: "Decoded data for all DePIN protocols on Solana",
-// },
-// {
-// title: "Perpetuals",
-// description:
-// "Decoding perpetual swaps to analyze the derivatives ecosystem",
-// },
-// {
-// title: "Stablecoin activities",
-// description: "Access the activities of all stablecoins and SPL tokens",
-// },
-// {
-// title: "DePIN",
-// description: "Decoded data for all DePIN protocols on Solana",
-// },
-// ],
-// },
-// {
-// title: "Powering the most advanced use cases of the industry",
-// features: [
-// {
-// title: "Market intelligence & reporting",
-// description:
-// "Fuel your research reports effortlessly, without concerning yourself with the underlying data",
-// },
-// {
-// title: "Intelligent trading strategies",
-// description:
-// "Build trading tactics and develop backtesting systems by employing data science techniques",
-// },
-// {
-// title: "AI models",
-// description:
-// "Train custom AI models from trusted and curatedon-chain data",
-// },
-// {
-// title: "Wallet profiling at scale",
-// description:
-// "Compute customized attributes and enhance your wallet profiling and cohort segmentation applications",
-// },
-// ],
-// },
-// ]
+import styles from "./index.module.scss";
const CloudSection = ({ section = [] }) => {
return (
{section.title}
+
+ {section.titleMobile ?? section.title}
+
{
const PrivateCloudSection = ({ sections = [] }) => {
return (
-
+
diff --git a/pages/research/components/PrivateCloudSection/index.module.scss b/pages/research/components/PrivateCloudSection/index.module.scss
index e3e18936..4a04889c 100644
--- a/pages/research/components/PrivateCloudSection/index.module.scss
+++ b/pages/research/components/PrivateCloudSection/index.module.scss
@@ -1,3 +1,14 @@
+@import "@/assets/styles/breakpoints.scss";
+
+.privateCloudSection {
+ margin: 7.5rem 0rem;
+
+ @include mobile {
+ margin: 5rem 1.5rem;
+ padding: 0;
+ }
+}
+
.sectionHead {
position: relative;
display: flex;
@@ -15,6 +26,12 @@
position: relative;
z-index: 1;
}
+
+ @include mobile {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 29px;
+ }
}
.sectionDescription {
@@ -25,6 +42,13 @@
letter-spacing: 0.72px;
margin-top: 0.5rem;
max-width: 500px;
+
+ @include mobile {
+ font-size: 1rem;
+ line-height: 22px;
+ letter-spacing: 0.04em;
+ margin-top: 1rem;
+ }
}
.chartIcons {
@@ -35,6 +59,13 @@
position: absolute;
right: 0;
bottom: 0;
+
+ @include mobile {
+ position: relative;
+ margin-top: 2rem;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
}
.chartIcon {
@@ -50,10 +81,18 @@
width: 24px !important;
height: 24px !important;
}
+
+ @include mobile {
+ width: 3rem;
+ height: 3rem;
+ }
}
.cultureContainer {
margin-top: 2.5rem;
+ @include mobile {
+ margin-top: 0rem;
+ }
}
.culture {
@@ -92,7 +131,9 @@
align-items: center;
gap: 1rem;
}
-
+.sectionBody {
+ margin-top: 3.5rem;
+}
.cloudSectionContainer {
display: flex;
flex-direction: column;
@@ -100,6 +141,7 @@
}
.cloudSection {
+ position: relative;
display: flex;
flex-direction: column;
margin-top: 2.5rem;
@@ -107,6 +149,11 @@
border: 1px solid #e8e9fa;
background: #fdfdff;
padding: 56px 42px;
+
+ @include mobile {
+ margin-top: 0rem;
+ padding: 1.5rem 1rem;
+ }
}
.cloudSectionTitle {
@@ -114,6 +161,38 @@
font-size: 1.125rem;
font-weight: 700;
line-height: 140%;
+
+ @include mobile {
+ font-size: 0.75rem;
+ font-weight: 500;
+ line-height: 17px;
+ color: #59b077;
+ border-radius: 4px;
+ padding: 0.5rem;
+ border: 1px solid #d4f3e0;
+ background-image: linear-gradient(0deg, #d4f3e0, #d4f3e0),
+ linear-gradient(0deg, #edfaf2, #edfaf2);
+
+ position: absolute;
+ top: 0px;
+ width: 82%;
+ left: 9%;
+ margin-top: -1rem;
+ white-space: nowrap;
+ display: none;
+ }
+}
+
+.cloudSectionTitleMobile {
+ display: none;
+
+ &:globa(.part-2) {
+ color: #cb8a5a;
+ }
+
+ @include mobile {
+ display: block;
+ }
}
.cloudSectionFeatures {
@@ -121,6 +200,10 @@
grid-template-columns: repeat(2, 1fr);
margin-top: 1.5rem;
gap: 1.5rem;
+
+ @include mobile {
+ grid-template-columns: 1fr !important;
+ }
}
.cloudSectionFeature {
@@ -132,24 +215,42 @@
border-radius: 1rem;
border: 1px solid #e8e9fa;
background: #edf2ff;
+
+ @include mobile {
+ padding: 1rem;
+ }
}
.cloudSectionFeatureTitle {
color: #374151;
font-size: 1.25rem;
font-weight: 700;
+
+ @include mobile {
+ font-size: 1rem;
+ font-weight: 700;
+ }
}
.cloudSectionFeatureDescription {
color: #374151;
font-size: 1rem;
line-height: 140%;
+
+ @include mobile {
+ font-size: 0.875rem;
+ line-height: 19.6px;
+ }
}
.cloudSectionDivider {
display: flex;
justify-content: center;
margin-top: 2.5rem;
+
+ @include mobile {
+ margin-top: 1.5rem;
+ }
}
.sectionAction {
@@ -158,6 +259,13 @@
align-items: center;
justify-content: space-between;
+ @include mobile {
+ margin-top: 2rem;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1.5rem;
+ }
+
.scheduleMessage {
color: #374151;
font-size: 1.125rem;
@@ -165,4 +273,10 @@
max-width: 600px;
display: inline-block;
}
+ @include mobile {
+ button {
+ font-size: 0.75rem;
+ line-height: 14.52px;
+ }
+ }
}
diff --git a/pages/research/components/ResearchHeroSection/index.module.scss b/pages/research/components/ResearchHeroSection/index.module.scss
index 44a19306..d79ca875 100644
--- a/pages/research/components/ResearchHeroSection/index.module.scss
+++ b/pages/research/components/ResearchHeroSection/index.module.scss
@@ -1,7 +1,9 @@
+@import "@/assets/styles/breakpoints.scss";
@import "@/assets/styles/mixins";
.landingHeroSection {
@include mesh-overlay;
+ padding: 0rem;
}
.heroSectionContainer {
@@ -9,6 +11,11 @@
padding: 96px 0px 112px;
justify-content: center;
align-items: center;
+
+ @include mobile {
+ padding: 120px 28px 143px;
+ flex-direction: column;
+ }
}
.detailsSection {
@@ -16,14 +23,24 @@
flex-direction: column;
max-width: 588px;
width: 100%;
+
+ @include mobile {
+ max-width: 100%;
+ align-items: center;
+ text-align: center;
+ }
}
.heading {
color: #374151;
font-size: 3rem;
- font-style: normal;
font-weight: 700;
- line-height: normal;
margin-top: 1.5rem;
+
+ @include mobile {
+ font-size: 2rem;
+ font-weight: 700;
+ line-height: 39px;
+ }
}
.subHeading {
@@ -32,6 +49,12 @@
font-size: 1.125rem;
line-height: 140%;
max-width: 80%;
+
+ @include mobile {
+ margin-top: 1rem;
+ font-size: 1rem;
+ line-height: 22px;
+ }
}
.description {
@@ -46,6 +69,10 @@
height: 478px;
width: 549px;
margin-left: 71px;
+
+ @include mobile {
+ display: none;
+ }
}
.scrollIcon {
@@ -58,5 +85,10 @@
.chip {
font-size: 1rem;
font-weight: 500;
+
+ @include mobile {
+ font-size: 0.875rem;
+ width: 100%;
+ }
}
}
diff --git a/pages/research/index.js b/pages/research/index.js
index ae82e63b..ef055852 100644
--- a/pages/research/index.js
+++ b/pages/research/index.js
@@ -4,8 +4,8 @@ import Page from "@/components/Page";
import ResearchHeroSection from "./components/ResearchHeroSection";
import TrialSection from "@/components/TrialSection";
-import FeatureSuiteSection from "./components/FeautreSuiteSection";
import PrivateCloudSection from "./components/PrivateCloudSection";
+import FeatureSuiteSection from "../web3-teams/components/FeautreSuiteSection";
const privateCloud = [
{
@@ -42,6 +42,8 @@ const privateCloud = [
},
{
title: "Powering the most advanced use cases of the industry",
+ titleMobile: "Powering the most advanced use cases",
+ customClass: "part-2",
features: [
{
title: "Market intelligence & reporting",
From 1a381d8e21ef7d20a99d59902433a4aa7d5ebb9b Mon Sep 17 00:00:00 2001
From: manishsharma004 <51284079+manishsharma004@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:43:11 +0000
Subject: [PATCH 3/6] fixes dashboard list mobile styles
---
.../DashboardsSection/index.module.scss | 20 +++++++++++++++-
pages/dashboard-list/index.js | 2 +-
public/assets/images/dashboards/solana.svg | 24 +++++++++++++++++++
3 files changed, 44 insertions(+), 2 deletions(-)
create mode 100644 public/assets/images/dashboards/solana.svg
diff --git a/pages/dashboard-list/components/DashboardsSection/index.module.scss b/pages/dashboard-list/components/DashboardsSection/index.module.scss
index 49398a5d..3ca513d4 100644
--- a/pages/dashboard-list/components/DashboardsSection/index.module.scss
+++ b/pages/dashboard-list/components/DashboardsSection/index.module.scss
@@ -1,7 +1,13 @@
+@import "@/assets/styles/breakpoints.scss";
+
.dashboardsSection {
border-top: 1px solid #e2e8ff;
background: #fff;
- padding: 64px 0px 120px;
+ padding: 4rem 0px 7.5rem;
+
+ @include mobile {
+ padding: 5rem 1.5rem;
+ }
}
.dashboardsSectionTitle {
@@ -9,6 +15,12 @@
font-size: 2.5rem;
font-weight: 700;
margin-top: 0.5rem;
+
+ @include mobile {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 39px;
+ }
}
.dashboardsSectionSubtitle {
@@ -16,6 +28,12 @@
font-size: 1.125rem;
line-height: 140%;
max-width: 600px;
+
+ @include mobile {
+ font-size: 1rem;
+ line-height: 22px;
+ letter-spacing: 0.04em;
+ }
}
.dashboardsSectionContent {
diff --git a/pages/dashboard-list/index.js b/pages/dashboard-list/index.js
index c677ac0e..814bf219 100644
--- a/pages/dashboard-list/index.js
+++ b/pages/dashboard-list/index.js
@@ -40,7 +40,7 @@ DashboardList.getInitialProps = async () => {
icon:
d.attributes.icon ??
DASHBOARD_ICONS[d.attributes.title] ??
- "/assets/images/dashboards/generic.svg",
+ "/assets/images/dashboards/solana.svg",
})),
};
};
diff --git a/public/assets/images/dashboards/solana.svg b/public/assets/images/dashboards/solana.svg
new file mode 100644
index 00000000..6a86f7a7
--- /dev/null
+++ b/public/assets/images/dashboards/solana.svg
@@ -0,0 +1,24 @@
+
From af11e27f888825b3c4aeb617ba9ee18addf3a04d Mon Sep 17 00:00:00 2001
From: manishsharma004 <51284079+manishsharma004@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:48:28 +0000
Subject: [PATCH 4/6] updated dashboard icons for public dashboard list
---
pages/dashboard-list/index.js | 6 ++--
.../assets/images/dashboards/drift logo.svg | 10 ++++++
public/assets/images/dashboards/drip logo.svg | 10 ++++++
.../assets/images/dashboards/flash trade.svg | 10 ++++++
public/assets/images/dashboards/solana.svg | 36 +++++++------------
.../assets/images/dashboards/tensor logo.svg | 21 +++++++++++
6 files changed, 68 insertions(+), 25 deletions(-)
create mode 100644 public/assets/images/dashboards/drift logo.svg
create mode 100644 public/assets/images/dashboards/drip logo.svg
create mode 100644 public/assets/images/dashboards/flash trade.svg
create mode 100644 public/assets/images/dashboards/tensor logo.svg
diff --git a/pages/dashboard-list/index.js b/pages/dashboard-list/index.js
index 814bf219..199a50d0 100644
--- a/pages/dashboard-list/index.js
+++ b/pages/dashboard-list/index.js
@@ -11,10 +11,12 @@ import {
const DASHBOARD_ICONS = {
Metaplex: "/assets/images/dashboards/metaplex.svg",
- Drip: "/assets/images/dashboards/drip.png",
- Drift: "/assets/images/dashboards/drift.png",
+ Drip: "/assets/images/dashboards/drip logo.svg",
+ "Drift public dashboard": "/assets/images/dashboards/drift logo.svg",
Helium: "/assets/images/dashboards/helium.png",
Phoenix: "/assets/images/dashboards/phoenix.png",
+ Tensor: "/assets/images/dashboards/tensor logo.svg",
+ "Flash Trade": "/assets/images/dashboards/flash trade.svg",
};
const DashboardList = ({ dashboards }) => {
diff --git a/public/assets/images/dashboards/drift logo.svg b/public/assets/images/dashboards/drift logo.svg
new file mode 100644
index 00000000..5c93f26a
--- /dev/null
+++ b/public/assets/images/dashboards/drift logo.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/assets/images/dashboards/drip logo.svg b/public/assets/images/dashboards/drip logo.svg
new file mode 100644
index 00000000..db01a20d
--- /dev/null
+++ b/public/assets/images/dashboards/drip logo.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/assets/images/dashboards/flash trade.svg b/public/assets/images/dashboards/flash trade.svg
new file mode 100644
index 00000000..61474860
--- /dev/null
+++ b/public/assets/images/dashboards/flash trade.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/assets/images/dashboards/solana.svg b/public/assets/images/dashboards/solana.svg
index 6a86f7a7..64628fdd 100644
--- a/public/assets/images/dashboards/solana.svg
+++ b/public/assets/images/dashboards/solana.svg
@@ -1,24 +1,14 @@
-