Adding data in data.json for presentation and adjusting UI & adding S…

…EO to home page

frontend/src/app/components/location-card/location-card.component.html

@@ -1,11 +1,11 @@
-<div class="w-full max-w-5xl mx-auto rounded-xl p-4 shadow-md hover:shadow-sm transition-shadow duration-300 mb-4 bg-white cursor-pointer location-list" 
+<div class="w-full max-w-5xl mx-auto rounded-xl p-4 shadow-md hover:shadow-sm transition-shadow border-l-6  border-white-500 duration-300 mb-4 bg-white cursor-pointer location-list" 
      (click)="onSelectLocation()" 
-     [ngClass]="{'shadow-none border-l-8 border-blue-500 text-white' : isSelected}">
+     [ngClass]="{'shadow-none border-blue-500 text-white' : isSelected}">
 
   <!-- Title -->
-  <div class="text-lg text-black font-semibold mb-2">
+  <h3 class="font-semibold mb-2 uppercase">
     {{ location.name }}
-  </div>
+  </h3>
 
   <!-- Content Container -->
   <div class="sm:flex sm:space-x-6">
@@ -20,7 +20,7 @@
       </span> -->
       <span class="inline-flex items-center bg-gray-50 px-1 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 tracking-widest location-type">{{ location.type }}</span>
       <p class="text-gray-600 text-sm text-slate-500 description">
-        {{ location.description | slice:0:100 }}...
+        {{ location.description | slice:0:300 }}
       </p>
     </div>
   </div>

frontend/src/app/components/location-card/location-card.component.scss

@@ -1,8 +1,13 @@
 .location-list {
     font-size: 10px;
+    h3 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #434343;
+    }
     .location-detail {
         .description {
-            line-height: 1;
+            line-height: 1.3;
         }
         .location-type {
             font-weight: bold;

frontend/src/app/home/pages/home/home.component.ts

@@ -4,6 +4,7 @@ import { RouterLink } from '@angular/router';
 import { ItemListComponent } from 'src/app/components/item-list/item-list.component';
 import { Location } from 'src/app/shared/models/location.model';
 import { LocationService } from 'src/app/shared/services/location.service';
+import { Title, Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-home',
@@ -14,8 +15,14 @@ import { LocationService } from 'src/app/shared/services/location.service';
 })
 export class HomeComponent implements OnInit {
   locations: Location[] = [];
-  constructor(private locationService: LocationService) {}
-
+  constructor(private locationService: LocationService, private title: Title, private meta: Meta) {
+    this.title.setTitle('Početna - Dobro došli');
+    this.meta.addTags([
+      { name: 'description', content: 'Sve informacije na jednom mjestu o izletištu Smetovi kod Zenice' },
+      { name: 'keywords', content: 'Smetovi, Izletište, Zenica, Snijeg' }
+    ]);
+  }
+
   ngOnInit() {
     this.locationService.getLocations().subscribe(data => {
       this.locations = data.locations; // Assuming 'locations' is the key in your JSON

frontend/src/app/home/pages/location/location.component.html

@@ -1,6 +1,6 @@
 <main class="flex items-center justify-center bg-gray-100">
   <div class="w-full lg:flex container">
-    <div class="lg:w-1/2 py-6 px-4">
+    <div class="py-6 px-4">
       <ng-container *ngFor="let locationItem of locations; let i = index">
         <app-location-card 
           [location]="locationItem"

frontend/src/assets/data/data.json

@@ -2,21 +2,21 @@
     "locations": [
       {
         "name": "Konjički klub 'Smet'",
-        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "description": "Predstavlja savršeno mjesto za ljubitelje životinja i prirode. Osim konja, klub se ponosi velikim brojem različitih životinja, što ga čini pravim malim zoološkim vrtom. Posjetitelji mogu uživati u bliskom susretu s brojnim životinjama.",
         "type": "Rekreacija",
         "image": "/assets/images/smet.jpg",
         "coordinates": { "lat": 44.241592, "lng": 17.969323 }
       },
       {
         "name": "Spomen obilježje",
-        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "description": "Spomen obilježje u Zenici posvećeno je čuvanju sjećanja na hrabre ljude i događaje koji su obilježili historiju ovog kraja. Ovaj prostor nudi mirnu atmosferu za razmišljanje i odavanje počasti onima koji su dali svoje živote za bolje sutra.",
         "type": "Rekreacija",
         "image": "/assets/images/spomenik.jpg",
         "coordinates": { "lat": 44.244918, "lng": 17.959509 }
       },
       {
         "name": "Restoran 960",
-        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "description": "Moderno uređen restoran koji posjetiteljima nudi bogat izbor hrane i pića, uz jedinstven i ugodan ambijent. Idealno mjesto za opuštanje i uživanje u ukusnim specijalitetima u prijatnom okruženju uz predivan pogled.",
         "image": "/assets/images/restoran_960.jpg",
         "type": "Restoran",
         "coordinates": { "lat": 44.242418, "lng": 17.97361 },
@@ -32,14 +32,14 @@
       },
       {
         "name": "Dom Saveza Izviđača i Radioamatera",
-        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "description": "Smješten u prelijepom okruženju, dom nudi idealan prostor za kampovanje, edukaciju i druženje. Posjetitelji mogu uživati u miru i prirodnim ljepotama, kao i u bogatom programu aktivnosti koje promovišu izviđačke i radioamaterske vještine.",
         "type": "Smještaj",
         "image": "/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg",
         "coordinates": { "lat": 44.245125, "lng": 17.978405 }
       },
       {
         "name": "Planinarski dom Smet",
-        "description": "Planinarski dom Smet se nalazi na poznatom izletištu Smetovi. Ovo izletište je proglašeno i za jedinstvenu zeničku zračnu banju. Planinarski dom Smet se nalazi na nadmorskoj visini od 964 metara. Dom posjeduje restoran, salu, terasu, igralište, parkove za djecu te prostor za roštilj. Domom upravlja planinarsko društvo Željezara iz Zenice.",
+        "description": "Planinarski dom Smet se nalazi na nadmorskoj visini od 964 metara. Dom posjeduje restoran, salu, terasu, igralište, parkove za djecu te prostor za roštilj. Domom upravlja planinarsko društvo Željezara iz Zenice. Dom je otvoren tokom cijele godine.",
         "type": "Smještaj",
         "image": "/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg",
         "coordinates": { "lat": 44.247535, "lng": 17.971122 }

frontend/src/styles.scss

@@ -8,6 +8,7 @@
 body {
     padding: 0;
     margin: 0;
+    font-family: Poppins, sans-serif;
 }
 
 button, .button {