-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[feat] add Landing Page for first mobile scss - added generic BasicBu…
…ttom and LittleLogo and added translate
- Loading branch information
1 parent
7345b91
commit bc19883
Showing
17 changed files
with
330 additions
and
69 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions
10
frontend/src/components/atoms/BasicButton/BasicButton.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @import '@assets/variables.scss'; | ||
|
|
||
| .basic-button{ | ||
| @include big-content-bold; | ||
| background: $secondary; | ||
| color: $white; | ||
| border-radius: 10px; | ||
| padding: 14px 24px; | ||
| border: none; | ||
| } |
5 changes: 5 additions & 0 deletions
5
frontend/src/components/atoms/BasicButton/BasicButton.type.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export interface BasicButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| children: React.ReactNode; | ||
| width?: number; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import type { BasicButtonProps } from "./BasicButton.type"; | ||
| import "./BasicButton.scss"; | ||
|
|
||
| function BasicButton({ children, width = 300, ...props }: BasicButtonProps) { | ||
| return ( | ||
| <button | ||
| className="basic-button" | ||
| type="button" | ||
| style={{ width: width }} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </button> | ||
| ); | ||
| } | ||
|
|
||
| export default BasicButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ | |
|
|
||
| &__title{ | ||
| @include content-bold; | ||
| color: $prymary-color; | ||
| color: $prymary; | ||
| margin: 0; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,4 @@ | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| @import '@assets/variables.scss'; | ||
|
|
||
| .landing-page { | ||
| background: linear-gradient(82deg, rgba(255,255,252,1) 0%, rgba(68,119,232,1) 100%); | ||
|
|
||
| &__first-view { | ||
| height: 100vh; | ||
|
|
||
| &__glob{ | ||
| position: absolute; | ||
| right: 0; | ||
| width: 268px; | ||
| top: 145px; | ||
| overflow: hidden; | ||
| z-index: 0; | ||
|
|
||
| &__img{ | ||
| width: 440px; | ||
| height: 347px; | ||
| } | ||
| } | ||
|
|
||
| &__girl{ | ||
| position: absolute; | ||
| right: 0; | ||
| top: 300px; | ||
| width: 268px; | ||
| z-index: 0; | ||
| overflow: hidden; | ||
|
|
||
| &__img{ | ||
| width: 400px; | ||
| height: 500px; | ||
| } | ||
| } | ||
|
|
||
| &__header{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| padding: 32px 0 40px; | ||
|
|
||
| &__connect{ | ||
| @include big-content-bold; | ||
| color: $white; | ||
| } | ||
| } | ||
|
|
||
| &__description{ | ||
| @include big-title; | ||
| position: relative; | ||
| z-index: 1; | ||
| color: $prymary; | ||
| width: 180px; | ||
| text-align: center; | ||
| margin-left: 7%; | ||
| } | ||
|
|
||
| &__buttom{ | ||
| position: absolute; | ||
| display: flex; | ||
| justify-content: center; | ||
| z-index: 1; | ||
| bottom: 4%; | ||
| width: 100%; | ||
|
|
||
|
|
||
| } | ||
| } | ||
|
|
||
| &__second-view { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| height: 100vh; | ||
|
|
||
| &__description{ | ||
| @include title-medium-bold; | ||
| color: $prymary; | ||
| text-align: center; | ||
| margin: 94px 16px 43px; | ||
| } | ||
|
|
||
| &__step{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 34px; | ||
|
|
||
| &__content{ | ||
| @include title-medium-bold; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| color: $white; | ||
| background: $prymary; | ||
| border-radius: 10px; | ||
| width: 178px; | ||
| height: 150px; | ||
| padding: 0 16px; | ||
| text-align: center; | ||
|
|
||
| } | ||
| } | ||
|
|
||
| &__glob{ | ||
| position: absolute; | ||
| right: 0; | ||
| left: 0; | ||
| bottom: -100vh; | ||
| height: 124px; | ||
| z-index: 0; | ||
| overflow: hidden; | ||
|
|
||
| &__img{ | ||
| width: 440px; | ||
| height: 360px; | ||
| } | ||
| } | ||
|
|
||
| &__buttom{ | ||
| position: absolute; | ||
| display: flex; | ||
| justify-content: center; | ||
| z-index: 1; | ||
| bottom: -94%; | ||
| width: 100%; | ||
|
|
||
|
|
||
| } | ||
| } | ||
| } |
Oops, something went wrong.