diff --git a/apps/app/src/assets/images/fesb pozadina desktop.png b/apps/app/src/assets/images/fesb pozadina desktop.png new file mode 100644 index 00000000..06149005 Binary files /dev/null and b/apps/app/src/assets/images/fesb pozadina desktop.png differ diff --git a/apps/app/src/assets/images/fesb pozadina.png b/apps/app/src/assets/images/fesb pozadina.png new file mode 100644 index 00000000..405c5706 Binary files /dev/null and b/apps/app/src/assets/images/fesb pozadina.png differ diff --git a/apps/app/src/assets/images/fesb-pozadina-desktop.png b/apps/app/src/assets/images/fesb-pozadina-desktop.png new file mode 100644 index 00000000..06149005 Binary files /dev/null and b/apps/app/src/assets/images/fesb-pozadina-desktop.png differ diff --git a/apps/app/src/assets/images/fesb-pozadina.png b/apps/app/src/assets/images/fesb-pozadina.png new file mode 100644 index 00000000..405c5706 Binary files /dev/null and b/apps/app/src/assets/images/fesb-pozadina.png differ diff --git a/apps/app/src/assets/images/fesb.png b/apps/app/src/assets/images/fesb.png new file mode 100644 index 00000000..ad1da66a Binary files /dev/null and b/apps/app/src/assets/images/fesb.png differ diff --git a/apps/app/src/components/LocationSection/LocationSection.module.scss b/apps/app/src/components/LocationSection/LocationSection.module.scss new file mode 100644 index 00000000..94ce2b31 --- /dev/null +++ b/apps/app/src/components/LocationSection/LocationSection.module.scss @@ -0,0 +1,100 @@ +.containerWrapper { + position: relative; + width: 100%; + display: flex; + flex-direction: column; + background-color: $primary-muted-orange; + border-radius: 16px; + overflow: visible; + min-height: auto; + padding-bottom: 40px; + + @media (min-width: $breakpoint-tablet) { + align-items: center; + border-radius: 20px; + padding-bottom: 60px; + } +} + +.titleWrapper { + display: flex; + flex-direction: column; + width: 100%; + max-width: 480px; + z-index: 2; + padding: 48px 24px; + margin: 0 auto; +} + +.title { + color: $primary-white; + @include heading-2; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.24px; + text-transform: uppercase; + margin-bottom: 12px; +} + +.description { + color: $primary-white; + @include paragraph-16; + font-style: normal; + font-weight: 400; + line-height: 22px; + letter-spacing: -0.16px; + margin-bottom: 32px; +} + +.button { + display: flex; + height: 52px; + justify-content: center; + align-items: center; +} + +.imageContainer { + position: relative; + width: 100%; + display: flex; + justify-content: center; + align-items: flex-end; + height: auto; + + &::before { + content: ''; + position: absolute; + top: 40px; + left: 0; + width: 100%; + height: 100%; + background-image: url('../../assets/images/fesb-pozadina.png'); + background-repeat: no-repeat; + background-position: center top; + background-size: 100% 70%; + z-index: 1; + + @media (min-width: $breakpoint-tablet) { + background-image: url('../../assets/images/fesb-pozadina-desktop.png'); + top: 35px; + } + } +} + +.image { + position: relative; + width: 100%; + height: auto; + object-fit: contain; + transform: scale(1.2) translate(-20px, 0); + z-index: 2; + max-width: 500px; + margin-bottom: 40px; + + @media (min-width: $breakpoint-tablet) { + max-width: 550px; + transform: none; + margin-bottom: 60px; + } +} diff --git a/apps/app/src/components/LocationSection/LocationSection.tsx b/apps/app/src/components/LocationSection/LocationSection.tsx new file mode 100644 index 00000000..08e1da33 --- /dev/null +++ b/apps/app/src/components/LocationSection/LocationSection.tsx @@ -0,0 +1,28 @@ +import c from './LocationSection.module.scss'; +import fesb from '../../assets/images/fesb.png'; +import Button from '../Button'; + +const LocationSection = () => { + return ( +
+ Nudimo ti interaktivni tlocrt konferencije kako bi se lakše mogao + snalaziti. Zoomiraj na štandove i vidi gdje se koja tvrtka nalazi. +
+ + +