sections defined and finished shopping header

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

@@ -2,7 +2,7 @@ import { Header } from '../../components/Header';
 import c from './Home.module.scss';
 import TopCompaniesSection from './sections/TopCompaniesSection';
 import EventsSection from './sections/EventsSection';
-import LocationSection from '@/components/LocationSection';
+import LocationSection from '../../components/LocationSection';
 
 const HomePage = () => {
   return (

apps/app/src/pages/ShoppingPage/ShoppingPage.module.scss

@@ -1,39 +1,2 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-}
 
-.wrapper {
-  padding-top: 4rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-bottom: 2rem;
-  background: $primary-black;
-}
 
-.title {
-  @include heading-2;
-  color: $white-text;
-}
-
-.navigation {
-  display: flex;
-  gap: 6px;
-}
-
-.navButton {
-  background: $black-90;
-  border: none;
-  border-radius: 0.5rem;
-  display: block;
-  padding: 17.5px 45px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  p {
-    @include paragraph-16;
-    color: $white-text;
-  }
-}

apps/app/src/pages/ShoppingPage/ShoppingPage.tsx

@@ -1,25 +1,12 @@
-import CrossIcon from '@/assets/icons/cross-icon.svg';
 import styles from './ShoppingPage.module.scss';
-import TransactionsIcon from '@/assets/icons/transactions-icon.svg';
-import ShoppingCartIcon from '@/assets/icons/shopping-cart-icon.svg';
+import ShoppingItems from './sections/ShoppingItems';
+import ShoppingHeader from './sections/ShoppingHeader';
 
 export const ShoppingPage = () => {
   return (
     <div className={styles.wrapper}>
-      <div className={styles.header}>
-        <h1 className={styles.title}>SHOPPING</h1>
-        <img src={CrossIcon} alt='' />
-      </div>
-      <div className={styles.navigation}>
-        <button className={styles.navButton}>
-          <img src={TransactionsIcon} alt='' />
-          <p>Transakcije</p>
-        </button>
-        <button className={styles.navButton}>
-          <img src={ShoppingCartIcon} alt='' />
-          <p>Košarica</p>
-        </button>
-      </div>
+      <ShoppingHeader />
+      <ShoppingItems />
     </div>
   );
 };

apps/app/src/pages/ShoppingPage/sections/ShoppingHeader/ShoppingHeader.module.scss

@@ -0,0 +1,41 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.headerContainer {
+  padding-top: 4rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 2rem;
+  background: $primary-black;
+  height: 300px;
+}
+
+.title {
+  @include heading-2;
+  color: $white-text;
+  font-weight: 500;
+}
+
+.navigation {
+  display: flex;
+  gap: 6px;
+}
+
+.navButton {
+  background: $black-90;
+  border: none;
+  border-radius: 0.5rem;
+  display: block;
+  padding: 17.5px 45px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  p {
+    @include paragraph-16;
+    color: $white-text;
+  }
+}

apps/app/src/pages/ShoppingPage/sections/ShoppingHeader/ShoppingHeader.tsx

@@ -0,0 +1,27 @@
+import styles from './ShoppingHeader.module.scss'
+import CrossIcon from '@/assets/icons/cross-icon.svg';
+import TransactionsIcon from '@/assets/icons/transactions-icon.svg';
+import ShoppingCartIcon from '@/assets/icons/shopping-cart-icon.svg';
+
+const ShoppingHeader = () => {
+  return (
+    <div className={styles.headerContainer}>
+        <div className={styles.header}>
+          <h1 className={styles.title}>SHOPPING</h1>
+          <img src={CrossIcon} alt='' />
+        </div>
+        <div className={styles.navigation}>
+          <button className={styles.navButton}>
+            <img src={TransactionsIcon} alt='' />
+            <p>Transakcije</p>
+          </button>
+          <button className={styles.navButton}>
+            <img src={ShoppingCartIcon} alt='' />
+            <p>Košarica</p>
+          </button>
+        </div>
+      </div>
+  )
+}
+
+export default ShoppingHeader

apps/app/src/pages/ShoppingPage/sections/ShoppingHeader/index.ts

@@ -0,0 +1,3 @@
+import ShoppingHeader from "./ShoppingHeader";
+
+export default ShoppingHeader;

apps/app/src/pages/ShoppingPage/sections/ShoppingItems/ShoppingItems.module.scss

@@ -0,0 +1,51 @@
+.shoppingItemsWrapper {
+  border-top-right-radius: 1rem;
+  border-top-left-radius: 1rem;
+  height: auto;
+  z-index: 5;
+  position: absolute;
+  top: 266px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $primary-background;
+  padding: 1.5rem;
+  /* overflow-y: scroll; */
+  display: flex;
+  flex-direction: column;
+}
+
+.shoppingUserPoints {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 10px 1.5rem;
+  background: $primary-beige;
+  border-radius: 0.5rem;
+
+  p {
+    @include paragraph-16;
+    color: $black-70;
+  }
+
+  .points {
+    display: flex;
+    gap: 3px;
+    height: 28px;
+    img {
+      height: 22px;
+      width: 22px;
+    }
+    span {
+      @include heading-2;
+    }
+  }
+}
+
+.shoppingItemsContainer {
+}
+
+.shoppingItem {
+}

apps/app/src/pages/ShoppingPage/sections/ShoppingItems/ShoppingItems.tsx

@@ -0,0 +1,18 @@
+import styles from './ShoppingItems.module.scss';
+import StarIcon from '@/assets/icons/rating-star-1.svg';
+
+const ShoppingItems = () => {
+  return (
+    <div className={styles.shoppingItemsWrapper}>
+        <div className={styles.shoppingUserPoints}>
+          <p>Tvoje stanje s bodovima</p>
+          <div className={styles.points}>
+            <img src={StarIcon} alt="" />
+            <span>299</span>
+          </div>
+        </div>
+    </div>
+  )
+}
+
+export default ShoppingItems

apps/app/src/pages/ShoppingPage/sections/ShoppingItems/index.ts

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