Merge pull request #470 from dump-hr/andrea/izlozbeni-prostor

Home: Izlozbeni prostor

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;
+  }
+}

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 (
+    <div className={c.containerWrapper}>
+      <div className={c.titleWrapper}>
+        <h1 className={c.title}>IZLOžBENI PROSTOR</h1>
+
+        <p className={c.description}>
+          Nudimo ti interaktivni tlocrt konferencije kako bi se lakše mogao
+          snalaziti. Zoomiraj na štandove i vidi gdje se koja tvrtka nalazi.
+        </p>
+
+        <Button className={c.button} variant='black'>
+          ZAVIRI U NAŠ PROSTOR
+        </Button>
+      </div>
+
+      <div className={c.imageContainer}>
+        <img src={fesb} alt='zgrada fesba' className={c.image} />
+      </div>
+    </div>
+  );
+};
+
+export default LocationSection;

apps/app/src/components/LocationSection/index.ts

@@ -0,0 +1,3 @@
+import LocationSection from './LocationSection';
+
+export default LocationSection;

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
 }

apps/app/src/pages/Home/Home.tsx

@@ -1,13 +1,15 @@
 import c from './Home.module.scss';
 import TopCompaniesSection from './sections/TopCompaniesSection';
 import EventsSection from './sections/EventsSection';
+import LocationSection from '../../components/LocationSection';
 
 const Home = () => {
   return (
     <div className={c.page}>
       <header className={c.header}></header>
       <main className={c.main}>
         <EventsSection />
+        <LocationSection />
         <TopCompaniesSection />
       </main>
     </div>