From 59c6d2e76f11bc9c834bfdf3792cded029a43145 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 8 Apr 2024 12:33:03 +0300 Subject: [PATCH] Template page updates --- assets/styles/layout/_mixins.scss | 8 +- assets/styles/layout/layout.scss | 10 + assets/styles/layout/templates/_apollo.scss | 31 + assets/styles/layout/templates/_atlantis.scss | 49 + assets/styles/layout/templates/_avalon.scss | 60 + assets/styles/layout/templates/_diamond.scss | 45 + assets/styles/layout/templates/_freya.scss | 33 + assets/styles/layout/templates/_poseidon.scss | 47 + assets/styles/layout/templates/_sakai.scss | 54 + .../styles/layout/templates/_templates.scss | 1637 +++++++++++++++++ assets/styles/layout/templates/_ultima.scss | 39 + assets/styles/layout/templates/_verona.scss | 48 + components/template/Configuration.vue | 37 + .../template/Features/Animation/Inline.vue | 94 + .../template/Features/Animation/index.vue | 141 ++ components/template/Features/index.vue | 60 + components/template/Hero/Light.vue | 58 + components/template/Hero/Rectangle.vue | 18 + components/template/Hero/index.vue | 42 + components/template/License.vue | 38 + components/template/Related.vue | 25 + components/template/Separator.vue | 7 + components/template/Youtube.vue | 66 + doc/templates/ApolloSeparator.vue | 19 + doc/templates/AtlantisSeparator.vue | 22 + doc/templates/AvalonSeparator.vue | 1267 +++++++++++++ doc/templates/DiamondSeparator.vue | 27 + doc/templates/FreyaSeparator.vue | 17 + doc/templates/PoseidonSeparator.vue | 18 + doc/templates/SakaiSeparator.vue | 30 + doc/templates/UltimaSeparator.vue | 22 + doc/templates/VeronaSeparator.vue | 45 + pages/templates/apollo/index.vue | 255 +++ pages/templates/atlantis/index.vue | 243 +++ pages/templates/avalon/index.vue | 243 +++ pages/templates/diamond/index.vue | 232 +++ pages/templates/freya/index.vue | 229 +++ pages/templates/index.vue | 38 +- pages/templates/poseidon/index.vue | 194 ++ pages/templates/sakai/index.vue | 161 ++ pages/templates/ultima/index.vue | 233 +++ pages/templates/verona/index.vue | 230 +++ 42 files changed, 6152 insertions(+), 20 deletions(-) create mode 100644 assets/styles/layout/templates/_apollo.scss create mode 100644 assets/styles/layout/templates/_atlantis.scss create mode 100644 assets/styles/layout/templates/_avalon.scss create mode 100644 assets/styles/layout/templates/_diamond.scss create mode 100644 assets/styles/layout/templates/_freya.scss create mode 100644 assets/styles/layout/templates/_poseidon.scss create mode 100644 assets/styles/layout/templates/_sakai.scss create mode 100644 assets/styles/layout/templates/_templates.scss create mode 100644 assets/styles/layout/templates/_ultima.scss create mode 100644 assets/styles/layout/templates/_verona.scss create mode 100644 components/template/Configuration.vue create mode 100644 components/template/Features/Animation/Inline.vue create mode 100644 components/template/Features/Animation/index.vue create mode 100644 components/template/Features/index.vue create mode 100644 components/template/Hero/Light.vue create mode 100644 components/template/Hero/Rectangle.vue create mode 100644 components/template/Hero/index.vue create mode 100644 components/template/License.vue create mode 100644 components/template/Related.vue create mode 100644 components/template/Separator.vue create mode 100644 components/template/Youtube.vue create mode 100644 doc/templates/ApolloSeparator.vue create mode 100644 doc/templates/AtlantisSeparator.vue create mode 100644 doc/templates/AvalonSeparator.vue create mode 100644 doc/templates/DiamondSeparator.vue create mode 100644 doc/templates/FreyaSeparator.vue create mode 100644 doc/templates/PoseidonSeparator.vue create mode 100644 doc/templates/SakaiSeparator.vue create mode 100644 doc/templates/UltimaSeparator.vue create mode 100644 doc/templates/VeronaSeparator.vue create mode 100644 pages/templates/apollo/index.vue create mode 100644 pages/templates/atlantis/index.vue create mode 100644 pages/templates/avalon/index.vue create mode 100644 pages/templates/diamond/index.vue create mode 100644 pages/templates/freya/index.vue create mode 100644 pages/templates/poseidon/index.vue create mode 100644 pages/templates/sakai/index.vue create mode 100644 pages/templates/ultima/index.vue create mode 100644 pages/templates/verona/index.vue diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss index cafb39b8b..7093f943b 100644 --- a/assets/styles/layout/_mixins.scss +++ b/assets/styles/layout/_mixins.scss @@ -16,4 +16,10 @@ &:hover { text-decoration: underline; } -} \ No newline at end of file +} + +@mixin mobile { + @media (max-width: 900px) { + @content; + } +} diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss index 39ea4e9d6..ba42978e3 100644 --- a/assets/styles/layout/layout.scss +++ b/assets/styles/layout/layout.scss @@ -15,3 +15,13 @@ @import './_responsive'; @import './_animation'; @import './landing/_landing'; +@import './templates/_templates'; +@import './templates/_apollo'; +@import './templates/_atlantis'; +@import './templates/_avalon'; +@import './templates/_diamond'; +@import './templates/_freya'; +@import './templates/_poseidon'; +@import './templates/_sakai'; +@import './templates/_ultima'; +@import './templates/_verona'; diff --git a/assets/styles/layout/templates/_apollo.scss b/assets/styles/layout/templates/_apollo.scss new file mode 100644 index 000000000..a4da19e74 --- /dev/null +++ b/assets/styles/layout/templates/_apollo.scss @@ -0,0 +1,31 @@ +.apollo { + .template { + &-hero { + &-pattern { + width: 96rem; + height: auto; + position: absolute; + bottom: 0; + left: 0; + z-index: 6; + mix-blend-mode: overlay; + } + } + } + +} + +@media only screen and (max-width: 768px) { + .apollo { + .template { + &-hero { + &-pattern { + width: 90rem; + bottom: 20rem; + } + + } + } + + } +} diff --git a/assets/styles/layout/templates/_atlantis.scss b/assets/styles/layout/templates/_atlantis.scss new file mode 100644 index 000000000..44ddb0ab0 --- /dev/null +++ b/assets/styles/layout/templates/_atlantis.scss @@ -0,0 +1,49 @@ +.atlantis { + .template { + &-hero { + &-pattern { + width: 50rem; + height: auto; + position: absolute; + bottom: -7rem; + left: -7rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + border-radius: 1.12rem; + } + } + } + +} + +@media only screen and (max-width: 1200px) { + .atlantis { + .template{ + &-hero { + &-pattern { + width: 45rem; + bottom: -5.75rem; + left: -9.5rem; + } + } + } + + } +} + +@media only screen and (max-width: 768px) { + .atlantis { + .template{ + &-hero { + &-pattern { + width: 50rem; + bottom: 16.75rem; + left: -10.5rem; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_avalon.scss b/assets/styles/layout/templates/_avalon.scss new file mode 100644 index 000000000..2e4397741 --- /dev/null +++ b/assets/styles/layout/templates/_avalon.scss @@ -0,0 +1,60 @@ +.avalon { + .template { + &-hero { + &-pattern { + width: 56rem; + height: auto; + position: absolute; + bottom: 0px; + left: -3.06; + z-index: 6; + + + } + &-rectangle{ + opacity: 0.5; + } + &-light{ + opacity: 0.75; + } + } + &-separator { + &-icon { + width: 7rem; + height: 3.5rem; + border-radius: 99px; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .avalon { + .template{ + &-hero { + &-pattern { + width: 68rem; + height: auto; + bottom: -8rem; + left: -12rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .avalon { + .template{ + &-hero { + &-pattern { + width: 88rem; + height: auto; + bottom: 0rem; + left: -16rem; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_diamond.scss b/assets/styles/layout/templates/_diamond.scss new file mode 100644 index 000000000..a4702d263 --- /dev/null +++ b/assets/styles/layout/templates/_diamond.scss @@ -0,0 +1,45 @@ +.diamond { + .template { + &-hero { + &-pattern { + width: 62.3125rem; + height: 44.8125rem; + position: absolute; + top: -3.62; + left: -3.06; + z-index: 6; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .diamond { + .template{ + &-hero { + &-pattern { + width: 60rem; + height: auto; + bottom: -8rem; + left: -8rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .diamond { + .template{ + &-hero { + &-pattern { + width: 64rem; + height: auto; + bottom: 2rem; + left: -8rem; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_freya.scss b/assets/styles/layout/templates/_freya.scss new file mode 100644 index 000000000..052683627 --- /dev/null +++ b/assets/styles/layout/templates/_freya.scss @@ -0,0 +1,33 @@ +.freya { + .template { + &-hero { + + &-pattern { + height: auto; + width: 45rem; + position: absolute; + bottom: -9rem; + left: 0rem; + z-index: 6; + } + } + } + +} + +@media only screen and (max-width: 768px) { + .freya { + .template { + &-hero { + + &-pattern { + width: 55rem; + height: auto; + bottom: -2rem; + left: 0; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_poseidon.scss b/assets/styles/layout/templates/_poseidon.scss new file mode 100644 index 000000000..6f6aaa58d --- /dev/null +++ b/assets/styles/layout/templates/_poseidon.scss @@ -0,0 +1,47 @@ +.poseidon { + .template { + &-hero { + &-pattern { + width: 102.3125rem; + height: auto; + position: absolute; + bottom: 0rem; + left: -26rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 45rem; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .poseidon { + .template{ + &-hero { + &-pattern { + height: auto; + bottom: 0rem; + left: -34rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .poseidon { + .template{ + &-hero { + &-pattern { + height: auto; + bottom: 21rem; + left: -35rem; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_sakai.scss b/assets/styles/layout/templates/_sakai.scss new file mode 100644 index 000000000..4de81a9f0 --- /dev/null +++ b/assets/styles/layout/templates/_sakai.scss @@ -0,0 +1,54 @@ +.sakai { + .template { + &-hero { + &-pattern { + width: 72.3125rem; + height: auto; + position: absolute; + bottom: -1rem; + left: -1rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 42rem; + } + } + &-features-horizontal-card{ + width: 30rem; + } + } + +} + +@media only screen and (max-width: 1200px) { + .sakai { + .template { + &-hero { + &-pattern { + width: 72.3125rem; + height: auto; + bottom: -1rem; + left: -2rem; + } + } + } + + } +} + +@media only screen and (max-width: 768px) { + .sakai { + .template { + &-hero { + &-pattern { + width: 64.3125rem; + height: auto; + bottom: 20rem; + left: -2rem; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_templates.scss b/assets/styles/layout/templates/_templates.scss new file mode 100644 index 000000000..0b3b696e2 --- /dev/null +++ b/assets/styles/layout/templates/_templates.scss @@ -0,0 +1,1637 @@ +.template { + display: flex; + flex-direction: column; + gap: 2.19rem; +} + +// TEMPLATE YOUTUBE +.template { + &-youtube { + &-wrapper { + padding: 5rem 0; + background-color: var(--card-background); + border-radius: 2rem; + } + + &-title { + h2 { + margin: 0; + text-align: center; + font-size: 3rem; + font-weight: 600; + color: var(--p-surface-900); + + @include mobile { + font-size: 1.5rem; + } + } + } + + &-video { + position: relative; + padding-bottom: 56.25%; + height: 100%; + overflow: hidden; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0.5rem; + } + } + + &-description { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + text-align: center; + color: var(--p-surface-900); + width: 45rem; + margin: 1.25rem auto 0; + + @include mobile { + font-size: 0.875rem; + line-height: 1.25rem; + width: 96%; + } + } + + &-screen { + margin: 3rem auto 0; + width: 75%; + max-width: 70rem; + box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02); + cursor: pointer; + position: relative; + background-color: var(--p-primary-100); + padding: 1.88rem 1.88rem 0; + border-radius: 1.5rem; + overflow: hidden; + + &-blur { + width: 100%; + position: absolute; + height: 100%; + top: 0; + left: 0; + z-index: 4; + backdrop-filter: blur(1.4px); + background: rgba(255, 255, 255, 0.06); + border-radius: inherit; + } + + &:hover &-play svg { + transform: scale(1.6); + } + + &-play { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 5; + transform-origin: center; + + svg { + width: 180px; + height: 180px; + transition: all 0.2s ease; + } + } + + img { + width: 100%; + height: auto; + border-top-right-radius: 1rem; + border-top-left-radius: 1rem; + margin-bottom: -0.25rem; + box-shadow: 0px 0px 120px 0px rgba(0, 0, 0, 0.08); + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-youtube { + &-wrapper { + padding: 3rem 0 1.5rem; + border-radius: 1.25rem; + } + + &-title { + h2 { + @include mobile { + font-size: 1.5rem; + } + } + } + + &-description { + @include mobile { + font-size: 0.875rem; + line-height: 1.25rem; + width: 90%; + } + } + + &-screen { + width: 90%; + padding: 1.25rem 1.25rem 0; + border-radius: 1rem; + + &-blur { + backdrop-filter: blur(0.5px); + } + + &-play { + svg { + width: 100px; + height: 100px; + } + } + + img { + border-top-right-radius: 0.5rem; + border-top-left-radius: 0.5rem; + } + } + } + } +} + +// TEMPLATE FEATURES TYPE 1 +.template { + &-features-horizontal { + &-wrapper { + padding: 5rem 2rem; + border-radius: 2rem; + background: var(--card-background, #FFF); + } + + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1.5rem; + margin: 0 auto; + width: fit-content; + + &-card { + width: 21.125rem; + padding: 1.25rem; + border-radius: 1.3125rem; + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); + + &-top { + width: 100%; + margin-bottom: 1.25rem; + background: var(--p-surface-100, #FFF); + border-radius: 0.65625rem; + overflow: hidden; + display: flex; + + img { + width: 100%; + border-radius: inherit; + } + } + + &-bottom { + &-title { + color: var(--p-surface-900); + font-size: 1.09375rem; + font-weight: 600; + line-height: 1.3125rem; + margin-top: 0; + margin-bottom: 0.75rem; + } + + &-description { + color: var(--p-surface-600); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3125rem; + margin: 0; + } + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-features-horizontal { + &-wrapper { + padding: 2rem 1.25rem; + border-radius: 1.25rem; + } + + &-card { + padding: 1rem; + border-radius: 1rem; + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-features-horizontal { + &-wrapper { + padding: 1.5rem 1rem; + } + + width: 98%; + + &-card { + width: 100%; + } + } + } +} + +// TEMPLATE FEATURES TYPE 2 +.template { + &-features-vertical { + &-wrapper { + padding: 7rem 2rem; + border-radius: 2rem; + background: var(--card-background, #FFF); + } + + margin: 0 auto; + width: 70%; + max-width: 52.75rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1.5rem; + + &-col { + display: flex; + flex-direction: column; + gap: 1.5rem; + flex: 1; + + &:last-child { + margin-top: 7.5rem; + } + } + + &-card { + width: 100%; + padding: 1.25rem; + border-radius: 1.3125rem; + border: 1px solid var(--border-color); + background: var(--p-surface-0); + + &-image { + width: auto; + background: var(--p-surface-100); + border-radius: 0.65625rem; + display: flex; + + img { + border-radius: inherit; + width: 100%; + height: auto; + } + } + + h2 { + margin: 1.25rem 0 0; + color: var(--p-surface-900, var(--p-surface-900, #212121)); + font-size: 1.09375rem; + font-weight: 600; + line-height: 1.3125rem; + } + + p { + margin: 0.75rem 0 0; + color: var(--p-surface-600, #757575); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3125rem; + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-features-vertical { + &-wrapper { + padding: 2.5rem 1rem; + border-radius: 1.25rem; + } + + max-width: 100%; + width: 100%; + align-items: center; + justify-content: center; + + &-card { + padding: 1rem; + border-radius: 1rem; + + &-img { + height: auto; + width: 100%; + border-radius: 0.5rem; + } + + &-withMargin { + margin-top: 0rem; + } + + &-withoutMargin { + margin-top: 0rem; + } + } + } + } +} + +@media only screen and (max-width: 768px) { + .template { + &-features-vertical { + width: 70%; + flex-direction: column; + + &-col { + &:last-child { + margin-top: 0rem; + } + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-features-vertical { + flex-direction: column; + width: 100%; + } + } +} + +// TEMPLATE RELATED +.template { + &-related { + &-wrapper { + padding: 5rem 2rem; + border-radius: 2rem; + background: var(--card-background, #FFF); + } + + &-title { + text-align: center; + color: var(--p-surface-900); + font-size: 3rem; + font-weight: 600; + } + + &-slide { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + width: fit-content; + margin: 3rem auto 0; + gap: 1.5rem; + + &-card { + border-radius: 1.3125rem; + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); + padding: 1.25rem; + display: flex; + img { + width: 18.625rem; + height: auto; + border-radius: 0.65625rem; + } + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-related { + &-wrapper { + padding: 2.5rem 1.25rem; + border-radius: 1.25rem; + } + + &-title { + padding-top: 1.5rem; + font-size: 1.5rem; + } + + &-slide { + gap: 2rem; + + width: 90%; + margin: 2rem auto 0; + + &-card { + border-radius: 1rem; + padding: 1rem; + max-width: 24rem; + + img { + width: 100%; + height: auto; + border-radius: 0.5rem; + } + } + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-related { + &-wrapper { + padding: 1.5rem 1rem; + } + + &-slide { + width: 98%; + max-width: 100%; + margin: 2rem auto 0; + + &-card { + max-width: 100%; + width: 100%; + } + } + } + } +} + +// TEMPLATE CONFIGURATION +.p-dark { + .template { + &-configuration { + background-color: var(--p-surface-900); + + &-screen { + &-bottom { + background: var(--card-background) !important; + + p { + color: var(--p-surface-0); + } + } + + &-top { + background: var(--card-background); + } + } + + &-title { + color: var(--p-surface-0); + } + + &-description { + color: var(--p-surface-200); + } + } + + &-license { + &-card { + border-color: var(--p-surface-800); + + span, h2 { + color: var(--p-surface-0); + } + + button { + background-color: var(--p-surface-0); + color: var(--p-surface-900); + + &:hover { + background-color: var(--p-surface-100); + } + } + + &-included { + p { + color: var(--p-surface-300); + } + } + } + + &-description { + color: var(--p-surface-300); + } + } + + &-features { + &-animation { + &-left-card { + &-active { + background-color: var(--p-surface-700); + } + + &-content { + h5 { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-400); + } + } + + &:hover { + background-color: var(--p-surface-700); + } + } + } + + &-horizontal { + &-card { + background-color: var(--p-surface-900); + + &-bottom-title { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-200); + } + } + } + + &-vertical { + &-card { + background-color: var(--p-surface-900); + + &-image { + background-color: var(--p-surface-700); + } + + h2 { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-200); + } + } + } + } + + &-related { + h2 { + color: var(--p-surface-0); + } + &-slide-card { + background-color: var(--p-surface-900); + } + } + } +} + +.template { + &-configuration { + &-wrapper { + padding: 5rem 2rem; + border-radius: 2rem; + background: var(--card-background, #FFF); + } + + padding: 2rem; + border-radius: 1.75rem; + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); + width: 49.25rem; + margin: 0 auto; + + &-title { + font-size: 1.53125rem; + font-weight: 700; + line-height: 1.8125rem; + color: var(--p-surface-900, var(--p-surface-900, #212121)); + } + + &-description { + color: var(--p-surface-600, #757575); + font-size: 1.09375rem; + font-weight: 400; + line-height: 1.64375rem; + margin: 0.75rem 0 0; + } + + &-screen { + border-radius: 0.875rem; + border: 1px solid var(--border-color, #DFE7EF); + + &-top { + border-radius: 0.75rem 0.75rem 0rem 0rem; + background: var(--p-surface-0, #FFF); + padding: 0.25rem 1.5rem; + height: 3.5rem; + display: flex; + align-items: center; + gap: 0.5rem; + + &-circle { + width: 0.75rem; + height: 0.75rem; + border-radius: 999px; + } + + &-close { + background-color: #ED6B5D; + } + + &-minimize { + background-color: #F4BE50; + } + + &-zoom { + background-color: #61C554; + } + } + + &-bottom { + padding: 1.5rem; + background: var(--p-surface-900); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + display: flex; + flex-direction: column; + gap: 1rem; + position: relative; + + p { + color: var(--p-surface-0); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.0625rem; + margin: 0; + } + + &-logo { + width: 7.5rem; + height: 7.5rem; + position: absolute; + right: 1.5rem; + bottom: 1.38rem; + } + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-configuration { + &-wrapper { + padding: 2.5rem 1.25rem; + border-radius: 1.25rem; + } + + &-title { + font-size: 1.25rem; + } + + &-description { + font-size: 0.85rem; + line-height: 1.25rem; + } + + width: 80%; + padding: 1rem; + border-radius: 1rem; + + &-screen { + border-radius: 0.5rem; + + &-top { + border-radius: 0.5rem 0.5rem 0rem 0rem; + } + + &-bottom { + border-radius: 0rem 0rem 0.5rem 0.5rem; + + + } + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-configuration { + &-wrapper { + padding: 1.5rem 1rem; + } + + width: 98%; + + &-screen { + &-bottom { + &-logo { + width: 5.25rem; + height: 5.25rem; + right: 0.88rem; + bottom: 0.88rem; + } + } + } + } + } +} + +// TEMPLATE FEATURES ANIMATION +.template { + &-features-animation { + &-wrapper { + border-radius: 2rem; + background: var(--card-background, #FFF); + padding: 5rem 2rem; + } + + &-title { + max-width: 45rem; + margin: 0 auto 3rem; + + h2 { + margin: 0; + color: var(--p-surface-900); + text-align: center; + font-size: 3rem; + font-weight: 600; + text-align: center; + } + } + + display: flex; + gap: 2.5rem; + width: fit-content; + margin: 0 auto; + padding: 1.75rem; + border-radius: 1.75rem; + border: 1px solid var(--border-color, #EEE); + + &-left { + width: 100%; + max-width: 30rem; + display: flex; + flex-direction: column; + gap: 1rem; + + &-card { + padding: 1rem; + display: flex; + align-items: flex-start; + gap: 1.5rem; + cursor: pointer; + transition: all 0.2s ease; + + &-active { + border-radius: 0.75rem; + background: var(--p-surface-100, #F5F5F5); + transition: all 0.2s ease; + } + + &:hover { + border-radius: 0.75rem; + background: var(--p-surface-100, #F5F5F5); + } + + &:hover &-order { + + div { + &:nth-child(2) { + color: var(--p-surface-100); + + } + + &:nth-child(3) { + animation: FeaturesOrderAnimation 2.5s ease-in-out; + color: var(--p-primary-400); + } + } + } + + &-active &-order { + div { + &:nth-child(2) { + color: var(--p-surface-100); + + } + + &:nth-child(3) { + animation: FeaturesOrderAnimation 2.5s ease-in-out; + color: var(--p-primary-400); + } + } + } + + &-order { + width: 3.5rem; + height: 100%; + margin-top: -0.25rem; + position: relative; + transition: all 0.2s ease; + + div { + font-size: 2.5rem; + font-weight: 700; + position: absolute; + top: 0; + left: 0; + + &:nth-child(1) { + color: var(--p-primary-400); + -webkit-text-stroke: 1.2px var(--p-primary-400); + } + + &:nth-child(2) { + color: var(--card-background); + transition: all 0.2s ease; + } + + &:nth-child(3) { + color: transparent; + } + } + } + + + + &-content { + flex: 1; + + h5 { + color: var(--p-surface-900, var(--color-surface-900, #212121)); + font-size: 1.09375rem; + font-weight: 600; + line-height: 1.3125rem; + margin: 0; + } + + p { + color: var(--p-surface-600, #757575); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3125rem; + margin: 0.38rem 0 0; + + a { + color: var(--p-primary-400); + + &:hover { + text-decoration: underline; + } + } + } + + } + } + } + + &-right { + width: 30rem; + height: fit-content; + border-radius: 0.875rem; + background-color: var(--p-surface-100); + display: flex; + overflow: hidden; + img { + width: 100%; + height: auto; + } + + &-inline { + width: 100%; + padding: 2rem 0; + border-radius: 0.75rem; + background: var(--p-surface-100); + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &-image { + width: 90%; + overflow: hidden; + position: relative; + display: flex; + margin-top: 1.25rem; + border-radius: 0.5rem; + box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.08); + + img { + max-height: 24rem; + } + } + + &-tabs { + display: flex; + align-items: center; + gap: 0.25rem; + border-radius: 2.5rem; + border: 1px solid var(--border-color); + background: var(--p-surface-0); + padding: 0.25rem; + width: 90%; + + button { + flex: 1; + width: 100%; + padding: 0.21875rem 0.5rem; + border-radius: 2.25rem; + color: var(--p-surface-900); + background: var(--p-surface-0); + border: none; + outline: none; + font-size: 0.75rem; + font-weight: 500; + line-height: 1rem; + letter-spacing: -0.015rem; + cursor: pointer; + transition: all 0.15s ease; + + &:hover { + background: var(--p-surface-100); + } + + + } + + &-btnActive { + background: var(--p-surface-100) !important; + + } + } + } + } + } +} + +@keyframes FeaturesOrderAnimation { + 0% { + clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, + 100% 100%, 0% 100%); + } + + 20% { + clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, + 100% 100%, 0% 100%); + } + + 40% { + clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); + } + + 60% { + clip-path: polygon(0 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0 100%); + } + + 100% { + clip-path: polygon(0 0, 18% 0, 39% 0, 53% 0, 62% 0, 87% 0, 100% 0, 100% 100%, 0 100%); + } +} + +@media only screen and (max-width: 1440px) { + .template { + &-features-animation { + + &-left { + flex: 0.4; + } + + &-right { + flex: 0.6; + &-inline { + &-image { + width: 92%; + } + + &-tabs { + width: 92%; + + button { + padding: 0.21875rem 0.25rem; + } + } + } + } + + + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-features-animation { + &-wrapper { + padding: 2.5rem 1.25rem; + } + + &-title { + padding-top: 1.5rem; + + h2 { + font-size: 1.5rem; + } + } + + flex-direction: column-reverse; + gap: 1.31rem; + padding: 1rem; + border-radius: 1rem; + width: 70%; + + &-left { + width: 100%; + max-width: 100%; + } + + &-right { + border-radius: 0.75rem; + width: 100%; + min-width: 0rem; + max-width: 100%; + + &-inline { + height: fit-content; + padding: 2rem 0; + + &-image { + width: 90%; + margin: 0; + height: auto; + } + + &-tabs { + display: none; + } + } + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-features-animation { + &-wrapper { + padding: 1.5rem 1rem; + } + + width: 98%; + + + } + } +} + +// TEMPLATE HERO +.template { + display: flex; + flex-direction: column; + gap: 2.19rem; + + &-hero { + width: 100%; + height: 36.25rem; + background: var(--p-primary-500); + border-radius: 2rem; + position: relative; + overflow: hidden; + + &-card { + position: relative; + z-index: 15; + width: 29rem; + margin-left: 10rem; + margin-top: 9.81rem; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--p-primary-400)/0.8 100%), rgba(255, 255, 255, 0.10); + box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 48px 80px 0px rgba(0, 0, 0, 0.08), 0px -5px 13px -2px rgba(255, 255, 255, 0.55) inset; + backdrop-filter: blur(2px); + padding: 2.25rem 1.75rem; + + + &-logo { + height: 2.5rem; + + svg { + height: 100%; + width: auto; + } + } + + p { + font-size: 0.875rem; + font-weight: 400; + line-height: normal; + margin: 1rem 0 0; + color: var(--p-primary-inverse-color); + } + + &-buttons { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 2rem; + + a { + text-decoration: none; + height: 2.5rem; + flex: 1; + border-radius: 3rem; + + font-size: 0.875rem; + font-weight: 700; + line-height: 1.0625rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + + &-btn1 { + border: 1px solid #212121; + background: #212121; + color: white; + + &:hover { + border-color: #444444; + background-color: #444444; + } + } + + &-btn2 { + background-color: var(--p-primary-600); + border-color: var(--p-primary-600); + color: var(--p-primary-inverse-color); + + &:hover { + background-color: var(--p-primary-700); + border-color: var(--p-primary-700); + } + } + + } + + &-links { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 1rem; + + a { + display: flex; + align-items: flex-end; + gap: 0.5rem; + color: var(--p-primary-inverse-color); + + span { + font-size: 0.75rem; + font-weight: 300; + line-height: normal; + text-decoration-line: underline; + } + } + } + } + + &-rectangle { + position: absolute; + top: 0rem; + left: -8rem; + z-index: 4; + height: 100%; + width: auto; + } + + &-light { + position: absolute; + top: -4rem; + left: 6rem; + z-index: 5; + + } + + &-dashboard1 { + z-index: 9; + position: absolute; + top: 2.02rem; + left: 60rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + border-radius: 0.25rem; + } + + &-dashboard2 { + z-index: 8; + position: absolute; + top: 2.02rem; + left: 42rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + border-radius: 0.25rem; + } + } + +} + +@media only screen and (max-width: 1440px) { + .template { + &-hero { + height: 32.25rem; + + &-card { + margin-left: 3.5rem; + margin-top: 7.81rem; + padding: 2rem 1.5rem; + border-radius: 1.25rem; + width: 26.25rem; + } + + &-rectangle { + left: -8rem; + } + + &-light { + left: 2rem; + } + + &-dashboard1 { + top: 2.5rem; + left: 44rem; + width: 36rem; + } + + &-dashboard2 { + top: 2.5rem; + left: 32rem; + width: 36rem; + } + } + } +} + +@media only screen and (max-width: 768px) { + .template { + &-hero { + height: 53.25rem; + padding: 7.5rem 1.25rem 1.25rem; + border-radius: 1rem; + + &-card { + width: 100%; + margin-left: 0rem; + margin-top: 0rem; + padding: 2rem 1.5rem; + border-radius: 1.25rem; + + &-links { + justify-content: center; + } + } + + &-rectangle { + left: -2rem; + height: auto; + width: 80rem; + } + + &-light { + left: 50%; + transform: translateX(-50%); + } + + &-dashboard1 { + top: 28.5rem; + left: 12rem; + width: 80%; + } + + &-dashboard2 { + top: 28.5rem; + left: 1.5rem; + width: 80%; + } + } + + } +} + +@media only screen and (max-width: 576px) { + .template { + &-hero { + &-rectangle { + left: -10rem; + } + + &-dashboard1 { + width: 36rem; + } + + &-dashboard2 { + width: 36rem; + } + } + + } +} + +//TEMPLATE INTRO +.template { + &-intro { + border-radius: 2rem; + background: var(--card-background, #FFF); + padding: 5rem 2rem; + + h2 { + color: var(--p-surface-900); + text-align: center; + font-size: 3.42857rem; + font-weight: 600; + line-height: 4rem; + margin: 0; + } + + p { + color: var(--p-surface-900); + text-align: center; + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + max-width: 50rem; + margin: 1.5rem auto 0; + } + + &-image { + position: relative; + background-color: var(--p-primary-600); + max-width: 75rem; + margin: 3.5rem auto 0; + border-radius: 1.15rem; + display: flex; + + &::after { + content: ''; + position: absolute; + inset: 0; + z-index: 5; + background-color: var(--p-primary-100); + opacity: 0.15; + border-radius: inherit; + } + + img { + width: 100%; + height: auto; + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-intro { + padding: 2.5rem 1.25rem; + + h2 { + font-size: 1.5rem; + line-height: normal; + } + + p { + line-height: 1.5; + margin: 1rem auto 0; + font-size: 1rem; + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-intro { + padding: 3rem 1rem; + + h2 { + font-size: 1.5rem; + } + + &-image { + margin: 1.5rem auto 0; + } + } + } +} + +// TEMPALTE SEPARATOR +.template { + &-separator { + gap: 1.5rem; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + &::before { + content: ''; + flex: 1; + height: 1px; + background-color: var(--border-color) + } + + &::after { + content: ''; + flex: 1; + height: 1px; + background-color: var(--border-color) + } + + &-icon { + width: 3rem; + height: 3rem; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--border-color); + border-radius: 100%; + background-color: var(--card-background); + } + } + + +} + +//TEMPLATE LICENCE +.template { + &-license { + &-wrapper { + padding: 5rem 2rem; + border-radius: 2rem; + background: var(--card-background, #FFF); + } + + &-cards { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 1.5rem; + } + + &-card { + width: 21.25rem; + padding: 1.5rem; + border-radius: 1rem; + border: 1px solid var(--p-surface-200); + background-color: var(--card-background); + + span { + color: var(--p-surface-900); + font-weight: 600; + line-height: 1.5rem; + } + + h2 { + color: var(--p-surface-900); + font-size: 2.5rem; + font-weight: 600; + line-height: 3rem; + letter-spacing: -0.025rem; + margin: 1rem 0 1.25rem; + } + + button { + padding: 0.25rem 0.75rem; + border-radius: 0.375rem; + background: var(--p-surface-900); + text-align: center; + width: 100%; + outline: none; + border: none; + min-height: 2rem; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: var(--p-surface-700); + } + + color: var(--p-surface-0); + text-align: center; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + } + + &-included { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1.25rem; + + p { + color: var(--p-surface-500); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + margin: 0; + } + } + } + + &-description { + color: var(--p-surface-500); + text-align: center; + font-size: 0.875rem; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + max-width: 46.75rem; + margin: 1.5rem auto 0; + } + + &-visit { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + text-align: center; + margin: 1.5rem auto 0; + + a { + color: var(--p-primary-500); + text-decoration-line: underline; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + color: var(--p-primary-300); + } + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-license { + &-wrapper { + padding: 2.5rem 1.25rem; + border-radius: 1.25rem; + } + &-description{ + max-width: 36.5rem; + } + } + } +} + +@media only screen and (max-width: 721px) { + .template { + &-license { + &-card { + width: 80%; + } + &-description{ + max-width: 32rem; + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-license { + &-wrapper { + padding: 1.5rem 1rem; + } + + &-card { + width: 100%; + padding: 1.25rem; + border-radius: 0.75rem; + } + } + } +} diff --git a/assets/styles/layout/templates/_ultima.scss b/assets/styles/layout/templates/_ultima.scss new file mode 100644 index 000000000..7a94dc552 --- /dev/null +++ b/assets/styles/layout/templates/_ultima.scss @@ -0,0 +1,39 @@ +.ultima { + .template { + &-hero { + + &-pattern { + width: 80rem; + height: auto; + position: absolute; + bottom: -26rem; + left: -22.5rem; + z-index: 6; + mix-blend-mode: overlay; + } + + &-dashboard1, + &-dashboard2{ + border-radius: 0.42857rem; + } + + } + } + +} + +@media only screen and (max-width: 768px) { + .ultima { + .template { + &-hero { + + &-pattern { + width: 90rem; + left: -25rem; + bottom: -10rem; + } + } + } + + } +} diff --git a/assets/styles/layout/templates/_verona.scss b/assets/styles/layout/templates/_verona.scss new file mode 100644 index 000000000..d500cb31e --- /dev/null +++ b/assets/styles/layout/templates/_verona.scss @@ -0,0 +1,48 @@ +.verona { + .template { + &-hero { + + &-pattern { + width: 110rem; + height: auto; + position: absolute; + bottom: -2rem; + left: -1rem; + z-index: 6; + } + + } + } + +} + +@media only screen and (max-width: 1200px) { + .verona { + .template { + &-hero { + &-pattern { + width: 120rem; + left: -7.5rem; + bottom: -10rem; + } + } + } + + } +} + +@media only screen and (max-width: 768px) { + .verona { + .template { + &-hero { + + &-pattern { + width: 124rem; + left: -8.5rem; + bottom: 0; + } + } + } + + } +} diff --git a/components/template/Configuration.vue b/components/template/Configuration.vue new file mode 100644 index 000000000..7647134ea --- /dev/null +++ b/components/template/Configuration.vue @@ -0,0 +1,37 @@ + + + diff --git a/components/template/Features/Animation/Inline.vue b/components/template/Features/Animation/Inline.vue new file mode 100644 index 000000000..467393c90 --- /dev/null +++ b/components/template/Features/Animation/Inline.vue @@ -0,0 +1,94 @@ + + + diff --git a/components/template/Features/Animation/index.vue b/components/template/Features/Animation/index.vue new file mode 100644 index 000000000..64df0968c --- /dev/null +++ b/components/template/Features/Animation/index.vue @@ -0,0 +1,141 @@ + + + diff --git a/components/template/Features/index.vue b/components/template/Features/index.vue new file mode 100644 index 000000000..5c9dd5b1d --- /dev/null +++ b/components/template/Features/index.vue @@ -0,0 +1,60 @@ + + + diff --git a/components/template/Hero/Light.vue b/components/template/Hero/Light.vue new file mode 100644 index 000000000..c483ef5f9 --- /dev/null +++ b/components/template/Hero/Light.vue @@ -0,0 +1,58 @@ + diff --git a/components/template/Hero/Rectangle.vue b/components/template/Hero/Rectangle.vue new file mode 100644 index 000000000..9284dbb30 --- /dev/null +++ b/components/template/Hero/Rectangle.vue @@ -0,0 +1,18 @@ + diff --git a/components/template/Hero/index.vue b/components/template/Hero/index.vue new file mode 100644 index 000000000..595ee5336 --- /dev/null +++ b/components/template/Hero/index.vue @@ -0,0 +1,42 @@ + + + diff --git a/components/template/License.vue b/components/template/License.vue new file mode 100644 index 000000000..274986f7d --- /dev/null +++ b/components/template/License.vue @@ -0,0 +1,38 @@ + + + diff --git a/components/template/Related.vue b/components/template/Related.vue new file mode 100644 index 000000000..75ff8d1c0 --- /dev/null +++ b/components/template/Related.vue @@ -0,0 +1,25 @@ + + + diff --git a/components/template/Separator.vue b/components/template/Separator.vue new file mode 100644 index 000000000..735f0c262 --- /dev/null +++ b/components/template/Separator.vue @@ -0,0 +1,7 @@ + diff --git a/components/template/Youtube.vue b/components/template/Youtube.vue new file mode 100644 index 000000000..9ab7da4c7 --- /dev/null +++ b/components/template/Youtube.vue @@ -0,0 +1,66 @@ +