-
+
+
+
+
+
+
+
+ {dictionary.title}
+
+
+ {dictionary.description}
+
-
- )}
+
+ {dictionary.ctaButton.label}
+
+
+
+
+
-
-
+
);
};
diff --git a/src/features/common/components/auth0-cta/auth0-cta.module.scss b/src/features/common/components/auth0-cta/auth0-cta.module.scss
index 8f79f1ef..5f5f328a 100644
--- a/src/features/common/components/auth0-cta/auth0-cta.module.scss
+++ b/src/features/common/components/auth0-cta/auth0-cta.module.scss
@@ -1,11 +1,22 @@
@use "@/libs/theme/styles/variables" as *;
@use "@/libs/theme/styles/mixins" as *;
-.container {
- @include Container;
+.cta_container {
position: relative;
overflow: hidden;
background: var(--color_bg_auth0-cta);
+ grid-column: span 8;
+ border-radius: 1rem;
+ max-width: 1008px;
+ border: 1px solid var(--color_border_default);
+ box-shadow: 0 2px 12px -4px rgba(0,0,0,.08),0 2px 1px -.5px rgba(0,0,0,.04),0 2px 4px -4px rgba(0,0,0,.05),inset -.5px -.5px 2px rgba(0,0,0,.04);
+
+ @media #{$breakpoint-dimension-md} {
+ margin: 0 auto;
+ &:before {
+ background: none;
+ }
+ }
&:before {
position: absolute;
@@ -15,83 +26,20 @@
width: 100%;
height: 100%;
}
-
- :global(html[data-theme="light"]) &:before {
- background-image: url("/images/mobile.light.auth0-flow-bg.svg");
- background-size: cover;
- }
- :global(html[data-theme="system-light"]) &:before {
- background-image: url("/images/mobile.light.auth0-flow-bg.svg");
- background-size: cover;
- }
- :global(html[data-theme="dark"]) &:before {
- background-image: url("/images/mobile.dark.auth0-flow-bg.svg");
- background-size: cover;
- }
- :global(html[data-theme="system-dark"]) &:before {
- background-image: url("/images/mobile.dark.auth0-flow-bg.svg");
- background-size: cover;
- }
-
- @media #{$breakpoint-dimension-sm} {
- :global(html[data-theme="light"]) &:before {
- background-image: url("/images/tablet.light.auth0-flow-bg.svg");
- background-size: cover;
- }
- :global(html[data-theme="system-light"]) &:before {
- background-image: url("/images/tablet.light.auth0-flow-bg.svg");
- background-size: cover;
- }
- :global(html[data-theme="dark"]) &:before {
- background-image: url("/images/tablet.dark.auth0-flow-bg.svg");
- background-size: cover;
- }
- :global(html[data-theme="system-dark"]) &:before {
- background-image: url("/images/tablet.dark.auth0-flow-bg.svg");
- background-size: cover;
- }
- }
-
- @media #{$breakpoint-dimension-md} {
- padding-bottom: 7.5rem;
- background: unset;
-
- &:before {
- background: none;
- }
-
- :global(html[data-theme="light"]) &:before {
- background-image: none;
- }
- :global(html[data-theme="system-light"]) &:before {
- background-image: none;
- }
- :global(html[data-theme="dark"]) &:before {
- background-image: none;
- }
- :global(html[data-theme="system-dark"]) &:before {
- background-image: none;
- }
-
- &:after {
- display: none;
- background: none;
- }
- }
}
-.wrapper {
- @include ExtendedGrid;
+.cta_wrapper {
+ max-width: 1536px;
+ margin: 0 auto;
position: relative;
justify-content: center;
-
- border-radius: 0;
+ border-radius: 1rem;
overflow: hidden;
+ width: 100%;
+ height: 100%;
@media #{$breakpoint-dimension-md} {
background: var(--color_bg_auth0-cta);
- border-radius: 1.5rem;
-
&:before {
position: absolute;
bottom: 0;
@@ -100,83 +48,63 @@
width: 100%;
height: 100%;
}
-
- :global(html[data-theme="light"]) &:before {
- background: url("/images/light.auth0-flow-bg.svg") no-repeat right
- bottom;
- background-size: cover;
- }
- :global(html[data-theme="system-light"]) &:before {
- background: url("/images/light.auth0-flow-bg.svg") no-repeat right
- bottom;
- background-size: cover;
- }
- :global(html[data-theme="dark"]) &:before {
- background: url("/images/dark.auth0-flow-bg.svg") no-repeat right
- bottom;
- background-size: cover;
- }
- :global(html[data-theme="system-dark"]) &:before {
- background: url("/images/dark.auth0-flow-bg.svg") no-repeat right
- bottom;
- background-size: cover;
- }
}
}
-.content {
- @include InnerContentFlex;
+.cta_content {
+ display: flex;
justify-content: center;
+ width: 100%;
+ height: 100%;
- @media #{$breakpoint-dimension-sm} {
- @include InnerContentGrid;
+ @media #{$breakpoint-dimension-md} {
+ display: grid;
+ grid-template-columns: repeat(12,minmax(0,1fr));
+ width: 100%;
}
}
-.cta {
+.cta_cta {
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
- padding: 2.5rem 0;
+ padding: .25rem;
align-items: center;
gap: 2rem;
- @media #{$breakpoint-dimension-sm} {
- padding: 3rem 0;
- grid-column: 1 / -1;
+ @media #{$breakpoint-dimension-md} {
+ grid-column: 1/-1;
display: grid;
grid-template-columns: subgrid;
}
-
- @media #{$breakpoint-dimension-md} {
- padding: 4rem 0;
- }
}
.cta__copy {
- grid-column: 1 / -1;
+ grid-column: 1/-1;
display: flex;
flex-direction: column;
gap: 1.5rem;
- align-items: center;
-
- @media #{$breakpoint-dimension-sm} {
- align-items: unset;
- }
+ align-items: flex-start;
+ padding: 2.5rem;
@media #{$breakpoint-dimension-md} {
- align-items: center;
- flex-direction: row;
+ grid-column: span 6;
+ align-items: flex-start;
+ flex-direction: column;
gap: 2.5rem;
}
+
+ @media #{$breakpoint-dimension-sm} {
+ align-items: unset;
+ }
}
.cta__text {
width: 100%;
display: flex;
flex-direction: column;
- gap: 0.75rem;
+ gap: .75rem;
@media #{$breakpoint-dimension-sm} {
gap: 1rem;
@@ -187,26 +115,15 @@
width: 100%;
margin: 0;
text-align: left;
- font-size: 2.25rem;
- line-height: 2.75rem;
- letter-spacing: -0.03rem;
- font-weight: 400;
- color: var(--color_fg_bold);
+ font-size: 1.5rem;
+ line-height: 1.15;
+ color: #fff;
+ font-feature-settings: lining-nums proportional-nums;
font-variant-numeric: lining-nums proportional-nums;
font-style: normal;
- :global(html[lang="ja"]) & {
- @include LocaleLineHeight("ja", 2.25rem);
- }
-
- @media #{$breakpoint-dimension-sm} {
- font-size: 2.5rem;
- line-height: 3rem;
- letter-spacing: -0.08rem;
-
- :global(html[lang="ja"]) & {
- @include LocaleLineHeight("ja", 2.5rem);
- }
+ @media #{$breakpoint-dimension-lg} {
+ font-size: 2.5rem;
}
}
@@ -216,167 +133,42 @@
line-height: 1.5rem;
font-weight: 400;
- :global(html[lang="ja"]) & {
- @include LocaleLineHeight("ja", 1rem);
- }
-
@media #{$breakpoint-dimension-sm} {
max-width: 40rem;
- font-size: 1.25rem;
- line-height: 1.75rem;
- letter-spacing: 0.01rem;
-
- :global(html[lang="ja"]) & {
- @include LocaleLineHeight("ja", 1.25rem);
- }
- }
-
- @media #{$breakpoint-dimension-md} {
- font-size: 1.25rem;
- line-height: 1.75rem;
- letter-spacing: 0.1px;
-
- :global(html[lang="ja"]) & {
- @include LocaleLineHeight("ja", 1.25rem);
- }
- }
-}
-
-.cta__media {
- position: relative;
- grid-column: 1 / -1;
- align-self: center;
- justify-self: center;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 2.4rem;
-
- overflow: hidden;
-
- width: 100%;
-
- background-size: 100%;
-
- aspect-ratio: 281 / 547;
-
- :global(html[lang="en"][data-theme="light"]) & {
- background-image: url("/images/mobile.en.light.auth0-flow.svg");
- }
- :global(html[lang="en"][data-theme="dark"]) & {
- background-image: url("/images/mobile.en.dark.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="light"]) & {
- background-image: url("/images/mobile.ja.light.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="dark"]) & {
- background-image: url("/images/mobile.ja.dark.auth0-flow.svg");
- }
-
- :global(html[lang="en"][data-theme="system-light"]) & {
- background-image: url("/images/mobile.en.light.auth0-flow.svg");
- }
- :global(html[lang="en"][data-theme="system-dark"]) & {
- background-image: url("/images/mobile.en.dark.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="system-light"]) & {
- background-image: url("/images/mobile.ja.light.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="system-dark"]) & {
- background-image: url("/images/mobile.ja.dark.auth0-flow.svg");
- }
-
- @media #{$breakpoint-dimension-sm} {
- aspect-ratio: 672 / 251;
-
- :global(html[lang="en"][data-theme="light"]) & {
- background-image: url("/images/tablet.en.light.auth0-flow.svg");
- }
- :global(html[lang="en"][data-theme="dark"]) & {
- background-image: url("/images/tablet.en.dark.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="light"]) & {
- background-image: url("/images/tablet.ja.light.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="dark"]) & {
- background-image: url("/images/tablet.ja.dark.auth0-flow.svg");
- }
-
- :global(html[lang="en"][data-theme="system-light"]) & {
- background-image: url("/images/tablet.en.light.auth0-flow.svg");
- }
- :global(html[lang="en"][data-theme="system-dark"]) & {
- background-image: url("/images/tablet.en.dark.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="system-light"]) & {
- background-image: url("/images/tablet.ja.light.auth0-flow.svg");
- }
- :global(html[lang="ja"][data-theme="system-dark"]) & {
- background-image: url("/images/tablet.ja.dark.auth0-flow.svg");
- }
+ font-size: 1rem;
+ line-height: 1.5rem;
+ letter-spacing: -.01rem;
}
@media #{$breakpoint-dimension-md} {
- aspect-ratio: 3216 / 861;
-
- :global(html[lang="en"][data-theme="light"]) & {
- background-image: url("/images/en.light.auth0-flow.png");
- }
- :global(html[lang="en"][data-theme="dark"]) & {
- background-image: url("/images/en.dark.auth0-flow.png");
- }
- :global(html[lang="ja"][data-theme="light"]) & {
- background-image: url("/images/ja.light.auth0-flow.png");
- }
- :global(html[lang="ja"][data-theme="dark"]) & {
- background-image: url("/images/ja.dark.auth0-flow.png");
- }
-
- :global(html[lang="en"][data-theme="system-light"]) & {
- background-image: url("/images/en.light.auth0-flow.png");
- }
- :global(html[lang="en"][data-theme="system-dark"]) & {
- background-image: url("/images/en.dark.auth0-flow.png");
- }
- :global(html[lang="ja"][data-theme="system-light"]) & {
- background-image: url("/images/ja.light.auth0-flow.png");
- }
- :global(html[lang="ja"][data-theme="system-dark"]) & {
- background-image: url("/images/ja.dark.auth0-flow.png");
- }
+ font-size: 1rem;
+ line-height: 1.5rem;
+ letter-spacing: -.1px;
}
}
-.button {
+.cta__button {
display: flex;
- padding: 1rem 2rem;
+ padding: .25rem .75rem;
justify-content: center;
align-items: center;
- gap: 0.5rem;
- flex-shrink: 0;
-
- border: 1px solid var(--color_border_button_outline);
- border-radius: 0.375rem;
- background: transparent;
- backdrop-filter: blur(1.5rem);
-
- color: var(--color_fg_on_button_outline);
- font-size: 1rem;
- line-height: 1.5rem;
- font-style: normal;
+ gap: .5rem;
+ border-radius: 9999px;
+ background: var(--color_bg_layer);
+ border: 1px solid var(--color_border_default);
+ box-shadow: 0 1px 1px -.5px rgba(0,0,0,.04),0 3px 3px -1.5px rgba(0,0,0,.04),0 6px 6px -3px rgba(0,0,0,.04),0 12px 12px -6px rgba(0,0,0,.04),0 24px 24px -12px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.08);
+ color: var(--color_fg_default);
+ font-size: .875rem;
+ font-weight: 700;
+ line-height: 1.375rem;
font-weight: 500;
- letter-spacing: 0.2px;
-
- width: 100%;
+ letter-spacing: -.2px;
+ transition: all .3s ease-in-out;
- :global(html[lang="ja"]) & {
- @include LocaleLineHeight("ja", 1rem);
- }
-
- &:focus-visible {
- outline: solid 1px var(--color_border_focus);
- outline-offset: 0.125rem;
- border-radius: 0.125rem;
+ &:hover {
+ border: 1px solid var(--color_border_bold);
+ box-shadow: 0 0 0 4px var(--color_button_focus_inverse);
+ transition: all .2s ease-out;
}
@media #{$breakpoint-dimension-sm} {
@@ -384,34 +176,34 @@
}
}
-.button__arrow {
- flex-shrink: 0;
+.cta__media {
+ position: relative;
+ grid-column: 1/-1;
+ align-self: center;
+ justify-self: center;
display: flex;
align-items: center;
justify-content: center;
- height: 0.75rem;
- width: 0.75rem;
-
- svg {
- height: 0.75rem;
- width: 0.75rem;
+ gap: 2.4rem;
+ min-height: 348px;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ border-radius: .75rem;
+ background-size: cover;
+ background-position: 50%;
+ background-image: url("/images/diagram.png");
+ background-repeat: no-repeat;
- path {
- fill: var(--color_fg_on_button_outline);
- }
+ @media #{$breakpoint-dimension-md} {
+ border-bottom-left-radius: 12rem;
+ grid-column: span 6;
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 2.5rem;
}
@media #{$breakpoint-dimension-sm} {
- height: 1rem;
- width: 1rem;
-
- svg {
- height: 0.875rem;
- width: 0.875rem;
- }
- }
-
- &[data-rotation="true"] {
- animation: rotate 2s linear infinite;
+ align-items: unset;
}
-}
+}
\ No newline at end of file
diff --git a/src/features/home/components/assets/assets.component.tsx b/src/features/home/components/assets/assets.component.tsx
index e1ba6e3a..441e7795 100644
--- a/src/features/home/components/assets/assets.component.tsx
+++ b/src/features/home/components/assets/assets.component.tsx
@@ -16,139 +16,53 @@ import iconWithLabelImg from "./jwt-label.icon.png";
import { createUrlPath } from "@/libs/utils/path.utils";
import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
import { Button } from "react-aria-components";
-
-interface DownloadButtonProps {
- asset: StaticImageData;
- filename: string;
-}
-
-const DownloadButton: React.FC
= ({ asset, filename }) => {
- const downloadSVG = useCallback(
- (image: StaticImageData, filename: string) => {
- const link = document.createElement("a");
- link.href = image.src;
- link.download = filename;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- },
- [],
- );
-
- return (
-
- );
-};
+import { ArrowHeadIconComponent } from "@/features/common/assets/arrow-head-icon.component";
+import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
+import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
type AssetsComponentProps = {
languageCode: string;
- dictionary: JwtDictionaryModel;
+ jwtDictionary: JwtDictionaryModel;
+ auth0Dictionary: Auth0DictionaryModel;
};
export const AssetsComponent: React.FC = ({
languageCode,
- dictionary,
+ jwtDictionary,
+ auth0Dictionary,
}) => {
const libraryLinkPath = createUrlPath([
languageCode === DEFAULT_LANGUAGE_CODE ? "" : languageCode,
- dictionary.libraries.ctaButton.path
- ? dictionary.libraries.ctaButton.path
+ jwtDictionary.libraries.ctaButton.path
+ ? jwtDictionary.libraries.ctaButton.path
: "",
]);
return (
-
+
- {dictionary.libraries.title}
+ {jwtDictionary.libraries.title}
- {dictionary.libraries.description}
+ {jwtDictionary.libraries.description}
- {dictionary.libraries.ctaButton.label}
+ {jwtDictionary.libraries.ctaButton.label}
+
-
-
- {dictionary.assets.badges.title}
-
-
-
-
-
- {dictionary.assets.logotype.title}
-
-
-
-
+
+
);
};
diff --git a/src/features/home/components/assets/assets.module.scss b/src/features/home/components/assets/assets.module.scss
index b4d0b408..5654af3f 100644
--- a/src/features/home/components/assets/assets.module.scss
+++ b/src/features/home/components/assets/assets.module.scss
@@ -6,22 +6,45 @@
}
.content {
- @include InnerContentGrid;
- padding-top: 4rem;
- padding-bottom: 4rem;
+ display: flex;
+ width: calc(100% - 2rem);
+ max-width: 1312px;
+ margin: 0 auto;
+ flex-direction: column;
row-gap: 2rem;
+
@media #{$breakpoint-dimension-sm} {
+ width: calc(100% - 4rem);
+ grid-template-columns: repeat(12,minmax(0,1fr));
+ }
+
+ @media #{$breakpoint-dimension-lg} {
+ width: calc(100% - 128px);
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ grid-column-gap: 1rem;
+ column-gap: 1rem;
+ width: calc(100% - 2rem);
+ max-width: 1312px;
+ margin: 0 auto;
+ grid-row-gap: unset;
row-gap: unset;
}
+
}
.assets__column {
- grid-column: span 6;
+ grid-column: span 1;
color: var(--color_fg_default);
display: flex;
flex-direction: column;
gap: 1.25rem;
+ border: 1px solid var(--color_border_default);
+ border-radius: 1rem;
+ padding: 2.5rem;
+ background-color: var(--color_bg_layer);
+ box-shadow: 0 2px 12px -4px rgba(0,0,0,.08),0 2px 1px -.5px rgba(0,0,0,.04),0 2px 4px -4px rgba(0,0,0,.05),inset -.5px -.5px 2px rgba(0,0,0,.04);
@media #{$breakpoint-dimension-sm} {
grid-column: span 4;
@@ -30,14 +53,19 @@
}
.assets__title {
- color: var(--color_fg_bold);
+ width: 100%;
+ margin: 0;
+ text-align: left;
font-size: 1.5rem;
- line-height: 2rem;
- font-style: normal;
+ line-height: 1.15;
font-weight: 500;
- letter-spacing: -0.5px;
+ color: var(--color_fg_bold);
+ font-feature-settings: lining-nums proportional-nums;
+ font-variant-numeric: lining-nums proportional-nums;
+ font-style: normal;
- @media #{$breakpoint-dimension-sm} {
+ @media #{$breakpoint-dimension-lg} {
+ font-size: 2.5rem;
}
}
@@ -49,22 +77,19 @@
.asset__link {
width: fit-content;
display: flex;
- height: 48px;
- padding: 1rem 1rem;
+ padding: .25rem .75rem;
justify-content: center;
align-items: center;
- gap: 0.5rem;
-
- border-radius: 6px;
- background: var(--color_bg_button_primary);
- color: var(--color_fg_on_button_primary);
- border: 1px solid var(--color_border_button);
-
- font-size: 1rem;
- font-style: normal;
- font-weight: 400;
- line-height: 1.5rem;
- letter-spacing: 0.32px;
+ gap: .25rem;
+ border-radius: 9999px;
+ background: var(--color_bg_layer);
+ border: 1px solid var(--color_border_default);
+ font-size: .875rem;
+ font-weight: 700;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: -.2px;
+ transition: all .3s ease-in-out;
&:focus-visible {
outline: solid 1px var(--color_border_focus);
@@ -72,6 +97,12 @@
border-radius: 0.125rem;
}
+ &:hover {
+ border: 1px solid var(--color_border_bold);
+ box-shadow: 0 0 0 4px rgba(0,0,0,.12);
+ transition: all .2s ease-out;
+ }
+
@media #{$breakpoint-dimension-sm} {
margin-top: 40px;
}
@@ -114,19 +145,3 @@
padding: 2rem 15px;
}
}
-
-.downloadButton {
- background: var(--color_bg_layer);
- border-radius: 0.25rem;
- outline: none;
- border: none;
-
- height: 2rem;
- width: 2rem;
-
- &:focus-visible {
- outline: solid 1px var(--color_border_focus);
- outline-offset: 0.125rem;
- border-radius: 0.125rem;
- }
-}
diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx
index ee47837c..eb24a20f 100644
--- a/src/features/home/components/home-page/home-page.component.tsx
+++ b/src/features/home/components/home-page/home-page.component.tsx
@@ -148,13 +148,10 @@ export const HomePageComponent: React.FC = ({
dictionary={auth0Dictionary.ebook}
/>
-
{/**/}
diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss
index 7915f0b2..91ecf07f 100644
--- a/src/libs/theme/styles/globals.scss
+++ b/src/libs/theme/styles/globals.scss
@@ -208,7 +208,7 @@ html[data-theme="system-light"] {
--color_border_selected: #3f59e4;
--color_border_focus: #3f59e4;
- --color_bg_auth0-cta: var(--functional-gray-150);
+ --color_bg_auth0-cta: var(--functional-gray-950);
--color_bg_layer: var(--functional-gray-0);
--color_bg_layer_bold: var(--functional-gray-250);
@@ -222,6 +222,8 @@ html[data-theme="system-light"] {
--color_bg_layer_highlight3: var(--violet);
--color_bg_layer_highlight4: #a35125;
+ --color_button_focus_inverse: hsla(0, 0%, 100%, .24);
+
--color_border_default: #e8e8e8;
--color_border_bold: var(--functional-gray-250);
--color_border_inverse_static: var(--functional-gray-550);