From 21e87c9c1dadbff6cb5f434d1c2c5b79ffd926ad Mon Sep 17 00:00:00 2001 From: ATAKAN TEPE Date: Tue, 7 Mar 2023 13:49:25 +0300 Subject: [PATCH] landing adjustments and fixes --- assets/styles/layout/landing/_blocks.scss | 2 +- assets/styles/layout/landing/_components.scss | 8 + assets/styles/layout/landing/_designer.scss | 6 +- assets/styles/layout/landing/_features.scss | 5 + assets/styles/layout/landing/_header.scss | 17 +- assets/styles/layout/landing/_main.scss | 14 + assets/styles/layout/landing/_templates.scss | 43 +++ pages/landing/ComponentSection.vue | 316 ++++++++++-------- pages/landing/DesignerSection.vue | 12 +- pages/landing/FeaturesSection.vue | 7 +- pages/landing/FooterSection.vue | 2 +- pages/landing/HeaderSection.vue | 7 +- pages/landing/HeroSection.vue | 66 ++-- pages/landing/TemplateSection.vue | 20 +- pages/landing/ThemeSection.vue | 2 +- pages/landing/UsersSection.vue | 4 +- public/images/landing/brown-watch.png | Bin 0 -> 53915 bytes 17 files changed, 341 insertions(+), 190 deletions(-) create mode 100644 public/images/landing/brown-watch.png diff --git a/assets/styles/layout/landing/_blocks.scss b/assets/styles/layout/landing/_blocks.scss index e23d03b64..745e928ae 100644 --- a/assets/styles/layout/landing/_blocks.scss +++ b/assets/styles/layout/landing/_blocks.scss @@ -207,7 +207,7 @@ } } -@media screen and (max-width: $landingBreakpointLG) { +@media screen and (max-width: $landingBreakpointXL) { .landing-blocks .prime-blocks { margin: -24rem 0; transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg) scale(0.6); diff --git a/assets/styles/layout/landing/_components.scss b/assets/styles/layout/landing/_components.scss index 0fcd804a5..470fc868a 100644 --- a/assets/styles/layout/landing/_components.scss +++ b/assets/styles/layout/landing/_components.scss @@ -22,4 +22,12 @@ background: transparent; border-color: transparent; } +} + +@media screen and (min-width: 1660px) { + .components-main-container { + width: 1504px !important; + margin-left: auto !important; + margin-right: auto !important; + } } \ No newline at end of file diff --git a/assets/styles/layout/landing/_designer.scss b/assets/styles/layout/landing/_designer.scss index f01f75426..884e0f870 100644 --- a/assets/styles/layout/landing/_designer.scss +++ b/assets/styles/layout/landing/_designer.scss @@ -1,5 +1,4 @@ .landing-designer { - .designer-demo { --dd-primary:#4f8ff7; --dd-primary-darker:#3575dd; @@ -132,12 +131,15 @@ } .formgrid > .field { - padding: 2rem; + padding: 1rem 2rem 1rem; } .designer-editor { backdrop-filter: blur(1rem); box-shadow: var(--home-card-shadow); + max-width: 1250px !important; + margin-left: auto !important; + margin-right: auto !important; } .designer-controls { diff --git a/assets/styles/layout/landing/_features.scss b/assets/styles/layout/landing/_features.scss index 91cb74e6c..219b06476 100644 --- a/assets/styles/layout/landing/_features.scss +++ b/assets/styles/layout/landing/_features.scss @@ -2,4 +2,9 @@ .box { box-shadow: var(--home-features-card-shadow); } + .features-container{ + max-width: 1250px !important; + margin-left: auto !important; + margin-right: auto !important; + } } \ No newline at end of file diff --git a/assets/styles/layout/landing/_header.scss b/assets/styles/layout/landing/_header.scss index ac3bad61a..2f5495bc3 100644 --- a/assets/styles/layout/landing/_header.scss +++ b/assets/styles/layout/landing/_header.scss @@ -7,9 +7,13 @@ padding-top: 1rem; padding-bottom: 1rem; z-index: 100; - display: flex; - align-items: center; - justify-content: space-between; + + .landing-header-container { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + } .landing-header-logo { height: 2.5rem; @@ -97,4 +101,11 @@ } } } +} +@media screen and (min-width: 1960px) { + .landing-header-container{ + width: 1650px !important; + margin-left: auto !important; + margin-right: auto !important; + } } \ No newline at end of file diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss index 106d19421..6bb8ad09c 100644 --- a/assets/styles/layout/landing/_main.scss +++ b/assets/styles/layout/landing/_main.scss @@ -99,4 +99,18 @@ padding-left: 2rem; padding-right: 2rem; } +} + +.users-container { + max-width: 1250px !important; + margin-left: auto !important; + margin-right: auto !important; +} + +@media screen and (min-width: 1960px) { + .landing-footer{ + width: 1650px !important; + margin-left: auto !important; + margin-right: auto !important; + } } \ No newline at end of file diff --git a/assets/styles/layout/landing/_templates.scss b/assets/styles/layout/landing/_templates.scss index f5e817851..b83757e2f 100644 --- a/assets/styles/layout/landing/_templates.scss +++ b/assets/styles/layout/landing/_templates.scss @@ -193,6 +193,49 @@ } } } +@media screen and (max-width: $landingBreakpointXL) { + .landing-templates { + .templates { + .template-block { + width: 336px; + height: 171px; + border: none !important; + } + } + } +} + +@media screen and (max-width: $landingBreakpointLG) { + .landing-templates { + .templates { + transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); + .template-block { + width: 336px; + height: 171px; + border: none !important; + animation: none !important; + margin-right: 0 !important; + margin-left: 0 !important; + } + .lines { + display: none; + } + } + } +} +@media screen and (max-width: $landingBreakpointMD) { + .landing-templates { + .templates { + transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); + .template-block { + width: 354px; + height: 180px; + + } + } + } +} + @keyframes animated-block-1 { to { diff --git a/pages/landing/ComponentSection.vue b/pages/landing/ComponentSection.vue index 103c64aa3..6c7c9814a 100644 --- a/pages/landing/ComponentSection.vue +++ b/pages/landing/ComponentSection.vue @@ -1,151 +1,185 @@ diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue index d10a77799..1e373da74 100644 --- a/pages/landing/FooterSection.vue +++ b/pages/landing/FooterSection.vue @@ -1,5 +1,5 @@