diff --git a/assets/images/svg/deploy-app.svg b/assets/images/svg/deploy-app.svg new file mode 100644 index 00000000..7377aa4b --- /dev/null +++ b/assets/images/svg/deploy-app.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/deploy22.svg b/assets/images/svg/deploy22.svg new file mode 100644 index 00000000..7377aa4b --- /dev/null +++ b/assets/images/svg/deploy22.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/doc-svg.svg b/assets/images/svg/doc-svg.svg new file mode 100644 index 00000000..8585efe0 --- /dev/null +++ b/assets/images/svg/doc-svg.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/g-s-second.svg b/assets/images/svg/g-s-second.svg index 7c39a70d..44426f1b 100644 --- a/assets/images/svg/g-s-second.svg +++ b/assets/images/svg/g-s-second.svg @@ -1,55 +1,55 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/g-s-third.svg b/assets/images/svg/g-s-third.svg index 2bc4c6cf..a3d12d96 100644 --- a/assets/images/svg/g-s-third.svg +++ b/assets/images/svg/g-s-third.svg @@ -1,43 +1,43 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/get-s-first.svg b/assets/images/svg/get-s-first.svg index 04e4950e..dd3bc9e8 100644 --- a/assets/images/svg/get-s-first.svg +++ b/assets/images/svg/get-s-first.svg @@ -1,23 +1,23 @@ - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/gpu-btn-arrow.svg b/assets/images/svg/gpu-btn-arrow.svg new file mode 100644 index 00000000..5613045c --- /dev/null +++ b/assets/images/svg/gpu-btn-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/svg/gpu-lg.svg b/assets/images/svg/gpu-lg.svg new file mode 100644 index 00000000..a158091c --- /dev/null +++ b/assets/images/svg/gpu-lg.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/gpu-sm.svg b/assets/images/svg/gpu-sm.svg new file mode 100644 index 00000000..7474f6fd --- /dev/null +++ b/assets/images/svg/gpu-sm.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/gpu.svg b/assets/images/svg/gpu.svg new file mode 100644 index 00000000..935f8e9c --- /dev/null +++ b/assets/images/svg/gpu.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/svg/provider.svg b/assets/images/svg/provider.svg new file mode 100644 index 00000000..62988093 --- /dev/null +++ b/assets/images/svg/provider.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index 9265daa9..a88bd8cf 100644 --- a/assets/scss/common/_dark.scss +++ b/assets/scss/common/_dark.scss @@ -394,6 +394,19 @@ $navbar-dark-active-color: $link-color-dark; [data-dark-mode] body .available-op-desc { color: #fff; } +[data-dark-mode] .gpu-btn-arrow svg path { + stroke: #000; +} + +[data-dark-mode] .reserve-gpu-btn { + color: #000; +} + +[data-dark-mode] body .btn-console-action { + background-color: transparent; + border: 1px solid #515559; + color: #fff; +} [data-dark-mode] body .tab-button { color: lightgrey; diff --git a/assets/scss/layouts/_deploy.scss b/assets/scss/layouts/_deploy.scss index 2718e115..58db56f8 100644 --- a/assets/scss/layouts/_deploy.scss +++ b/assets/scss/layouts/_deploy.scss @@ -139,7 +139,7 @@ .console-s-btn1 .ex-link-arrow2 svg { margin-bottom: 3px; - margin-left: 2px; + margin-right: 5px; } .br-text a { @@ -321,6 +321,11 @@ line-height: 48px; } + .console-s-btn1 .ex-link-arrow2 svg { + margin-bottom: 3px; + margin-right: 5px; + } + .deploy-sub-header { text-align: center; font-size: 16px; @@ -387,6 +392,18 @@ @media (min-width: 447px) and (max-width: 767px) { .deploy-svg svg { - width: 300px; + width: 400px; } + + // .tab-content .console-resource-wrapper { + // display: flex; + // flex-direction: column; + // justify-content: center; + // align-items: center; + // } + + // .console-resource-header { + // margin: 40px auto; + // text-align: center; + // } } diff --git a/assets/scss/layouts/_getstarted.scss b/assets/scss/layouts/_getstarted.scss index 5fad93b1..ec1faf87 100644 --- a/assets/scss/layouts/_getstarted.scss +++ b/assets/scss/layouts/_getstarted.scss @@ -8,6 +8,13 @@ } .sub-pages-wrapper { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin-top: 40px; + grid-gap: 60px; +} + +.community-s-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; @@ -21,9 +28,17 @@ black-dot { margin-top: 10px; border-radius: 50%; /* This creates a circular shape */ } +.gpu-s-header, .deploy-header, .provider-s-header, -.docs-s-header, +.docs-s-header { + width: 100%; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; + margin: 20px 0; +} .insider-s-header, .validator-s-header, .ideas-s-header { @@ -50,8 +65,22 @@ black-dot { line-height: 24px; letter-spacing: 0.16px; } - -.get-s-btn button { +.get-started-btn2 button, +.get-started-btn button { + width: 100%; + height: 45px; + padding: 10px 20px 10px 20px; + border-radius: 8px; + text-align: center; + outline: none; + border: none; + font-weight: 700; + font-size: 14px; + transition: 0.3s ease; + color: #000; + margin-top: 10px; +} +.community-s-btn button { width: 380px; height: 45px; padding: 10px 20px 10px 20px; @@ -64,7 +93,7 @@ black-dot { transition: 0.3s ease; color: #000; } -.get-s-btn2 button { +.community-s-btn2 button { width: 380px; height: 45px; padding: 10px 20px 10px 20px; @@ -79,11 +108,15 @@ black-dot { margin-top: 27px; } -.get-s-btn button:hover { +.community-s-btn button:hover { + background: #ccc; + color: #1d2d35; +} +.get-started-btn button:hover { background: #ccc; color: #1d2d35; } -.get-s-btn2 button:hover { +.community-s-btn2 button:hover { background: #ccc; color: #1d2d35; } @@ -103,6 +136,10 @@ black-dot { margin: 100px auto; } +.btn-br { + margin-top: 10px; +} + // FOR LAPTOPS @media (min-width: 992px) and (max-width: 1400px) { .custom-col-13 { @@ -118,6 +155,12 @@ black-dot { border-radius: 50%; /* This creates a circular shape */ } .sub-pages-wrapper { + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin-top: 40px; + grid-gap: 40px; + } + + .community-s-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; gap: 60px; @@ -127,7 +170,7 @@ black-dot { width: 100%; } - .get-s-btn button { + .community-s-btn button { width: 340px; } .g-s-hr { @@ -135,14 +178,39 @@ black-dot { margin: 100px auto; } - .get-s-btn2 button { + .community-s-btn2 button { width: 340px; margin-top: 54px; } + + .get-started-btn button { + width: 540px; + } + + .get-started-btn2 button { + margin-top: 34px; + } + + .provider-intro, + .deploy-intro, + .validator-intro, + .doc-intro { + width: 540px; + } + + .validator-intro { + width: 350px; + } } @media (max-width: 1200px) { .sub-pages-wrapper { + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin-top: 20px; + grid-gap: 30px; + } + + .community-s-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; gap: 60px; @@ -157,11 +225,15 @@ black-dot { margin: 80px auto; } - .get-s-btn2 button { + .community-s-btn2 button { width: 350px; - margin-top: 37px; + margin-top: 35px; } - .get-s-btn button { + .community-s-btn button { + width: 350px; + margin: 10px auto; + } + .get-started-btn button { width: 350px; margin: 10px auto; } @@ -176,39 +248,83 @@ black-dot { .insider-s-intro { width: 350px; } + + .deploy-header, + .provider-s-header, + .docs-s-header { + width: 250px; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; + margin-top: -10px; + } + + .btn-br { + margin-top: 45px; + } } // FOR SMALL SCREENS @media (max-width: 767px) { .sub-pages-wrapper { + grid-template-columns: repeat(1, minmax(0, 1fr)); + margin-top: 60px; + grid-gap: 40px; + } + + .community-s-wrapper { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 40px; - gap: 60px; } .get-started-wrapper { margin-top: 50px; } - .get-s-btn2 button { + .btn-br { + margin-top: 0; + } + + .g-s-svg-sm svg { + width: 100%; + } + + .community-s-btn2 button { width: 100%; margin: 10px auto; height: 52px; } - .get-s-btn button { + .community-s-btn button { width: 100%; height: 52px; margin: 10px auto; } - .g-s-svg svg { - width: 100%; - } - .g-s-hr { width: 100%; margin: 50px auto; } + + .deploy-header, + .provider-s-header, + .docs-s-header { + width: 200px; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; + margin-top: 20px; + } + + .gpu-s-header { + width: 300px; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; + margin-top: 20px; + } } // OTHER RELATED SCREEN SIZES @@ -222,21 +338,44 @@ black-dot { align-items: center; } - .get-s-btn2 button { + .get-started-btn button { + width: 450px; + margin-bottom: 30px; + } + + .community-s-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .community-s-btn2 button { width: 380px; margin: 10px auto; color: #000; } - .get-s-btn button { + .community-s-btn button { width: 380px; margin: 10px auto; color: #000; } + .provider-intro, + .deploy-intro, + .validator-intro, + .doc-intro { + width: 400px !important; + } + + .g-s-svg-sm svg { + width: 400px; + } .provider-intro, .deploy-intro, .validator-intro, .doc-intro, + .follow-intro, .insider-s-intro { width: 380px; } diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss index 540604fe..f95c3cf7 100644 --- a/assets/scss/layouts/_header.scss +++ b/assets/scss/layouts/_header.scss @@ -74,6 +74,16 @@ left: 60px; font-weight: 700; font-size: 14px; + padding: 8px 10px; + border-radius: 8px; + background: #ccccccab; + outline: none; + border: none; + color: #000; +} +.reserve-gpu-btn:hover { + background: #ccc; + color: #1d2d35; } @media (min-width: 1180px) and (max-width: 1440px) { .reserve-gpu-btn { diff --git a/assets/scss/layouts/_pages.scss b/assets/scss/layouts/_pages.scss index 4408f12e..d3c200f3 100644 --- a/assets/scss/layouts/_pages.scss +++ b/assets/scss/layouts/_pages.scss @@ -1,12 +1,31 @@ .btn-contact-sales { background: #ccccccab; color: #1d2d35; + font-size: 18px; + border-radius: 8px; + padding: 10px 17px; + line-height: 1.33; } .btn-contact-sales:hover { background: #ccc; color: #1d2d35; } +.btn-console-action { + background-color: transparent; + border: 1px solid #ccccccab; + font-weight: 700; + transition: 0.3s ease; + padding: 10px 17px; + font-size: 18px; + border-radius: 8px; + line-height: 1.33; +} + +.btn-console-action:hover { + opacity: 0.5; +} + .section_features .feature_detail { height: 72px; width: 608px; @@ -394,6 +413,14 @@ div > div:nth-child(1) > div > h3 > span { .Latest-from-blog-main { width: 100%; } + + .btn-console-action { + font-size: 10px; + } + .btn-contact-sales button { + font-size: 10px; + padding: 10px; + } } @media (min-width: 587px) and (max-width: 592px) { .mobile-feature-wrapper { diff --git a/assets/scss/layouts/_provider.scss b/assets/scss/layouts/_provider.scss index c96bfc02..1791dfea 100644 --- a/assets/scss/layouts/_provider.scss +++ b/assets/scss/layouts/_provider.scss @@ -107,7 +107,7 @@ div .provider-breadcrumb-wrapper { .praetor-btn .ex-link-arrow2 svg { margin-bottom: 3px; - margin-left: 2px; + margin-right: 5px; } .available-op-wrapper { border-radius: 6px; @@ -280,4 +280,9 @@ div .provider-breadcrumb-wrapper { .praetor-svg svg { width: 100%; } + + .praetor-btn .ex-link-arrow2 svg { + margin-bottom: 3px; + margin-right: 5px; + } } diff --git a/i18n/en.yaml b/i18n/en.yaml index 46990a56..d96df9de 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -1,5 +1,5 @@ - id: get-started - translation: "Console" + translation: "Go to Console" - id: contact-sales translation: "Access GPUs" diff --git a/layouts/get-started/get-started.html b/layouts/get-started/get-started.html index 12156034..8418a3f2 100644 --- a/layouts/get-started/get-started.html +++ b/layouts/get-started/get-started.html @@ -4,15 +4,40 @@

Get Started

-
- {{ partial "content/svg.html" "get-s-first" }} +
+ {{ partial "content/svg.html" "gpu" }} +
+
+ {{ partial "content/svg.html" "gpu-sm" }} +
+

Access high-performance GPUs

+

+ Tap into the Akash Marketplace and deploy permissionlessly using one of the network’s open-source deployment tools. +

+
+ + +
-

Deploy Your Application

-

+

+
+
+ {{ partial "content/svg.html" "deploy-app" }} +
+
+ {{ partial "content/svg.html" "get-s-first" }} +
+

Deploy an application

+

Deploy a wide range of applications with one-click templates, including the leading AI models and web services.

-
+
+
-
{{ partial "content/svg.html" "g-s-second" }}
+
{{ partial "content/svg.html" "provider" }}
+
{{ partial "content/svg.html" "g-s-second" }}

Become a Provider

Monetize your cloud resources on the open-source Akash marketplace.

-
+
-
{{ partial "content/svg.html" "g-s-third" }}
+
{{ partial "content/svg.html" "doc-svg" }}
+
{{ partial "content/svg.html" "g-s-third" }}

Akash Documentation

For technical questions and network information, check out the Akash Docs.

-
- - - +
+ + +
+

Join A Thriving Community

-
-
+
+
{{ partial "content/svg.html" "social" }}
@@ -76,7 +100,7 @@

Join A Thriving Community

Akash Insiders are community leaders and advocates within the Akash ecosystem. Anyone interested in joining is invited to apply.

-
+