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 ( +
+
+

IZLOžBENI PROSTOR

+ +

+ Nudimo ti interaktivni tlocrt konferencije kako bi se lakše mogao + snalaziti. Zoomiraj na štandove i vidi gdje se koja tvrtka nalazi. +

+ + +
+ +
+ zgrada fesba +
+
+ ); +}; + +export default LocationSection; diff --git a/apps/app/src/components/LocationSection/index.ts b/apps/app/src/components/LocationSection/index.ts new file mode 100644 index 00000000..f7182702 --- /dev/null +++ b/apps/app/src/components/LocationSection/index.ts @@ -0,0 +1,3 @@ +import LocationSection from './LocationSection'; + +export default LocationSection; diff --git a/apps/app/src/components/Navigation/Navigation.module.scss b/apps/app/src/components/Navigation/Navigation.module.scss index d8b93aa2..1233678a 100644 --- a/apps/app/src/components/Navigation/Navigation.module.scss +++ b/apps/app/src/components/Navigation/Navigation.module.scss @@ -2,11 +2,12 @@ width: 100%; height: 78px; background-color: $primary-black; - position: absolute; + position: fixed; bottom: 0px; display: flex; justify-content: space-around; align-items: center; + z-index: 2; display: none; //TEMP } diff --git a/apps/app/src/pages/Home/Home.tsx b/apps/app/src/pages/Home/Home.tsx index 0a58f648..15276b42 100644 --- a/apps/app/src/pages/Home/Home.tsx +++ b/apps/app/src/pages/Home/Home.tsx @@ -1,6 +1,7 @@ import c from './Home.module.scss'; import TopCompaniesSection from './sections/TopCompaniesSection'; import EventsSection from './sections/EventsSection'; +import LocationSection from '../../components/LocationSection'; const Home = () => { return ( @@ -8,6 +9,7 @@ const Home = () => {
+