From 2ddb76ce92ed772488e5cfac5c6bbd3cc78d75eb Mon Sep 17 00:00:00 2001
From: Kriszti <kriszti.g@mangoweb.hu>
Date: Fri, 9 Feb 2024 15:23:45 +0100
Subject: [PATCH] javascript fix, gallery fix, accordion fix

---
 .../Client/wwwroot/index.html                 |  13 +-
 .../Components/Layout/HeroComponent.razor     |   2 +-
 .../Components/Layout/JsInjectComponent.razor |  46 ++
 .../Shared/Components/Layout/MainLayout.razor |  24 +-
 .../Components/Layout/NavbarComponent.razor   |   2 +-
 .../Layout/SuperHeroComponent.razor           |  19 +-
 .../Shared/Components/Pages/Gallery.razor     | 553 +++++++++---------
 .../Shared/Components/Pages/Help.razor        |  14 +
 .../Shared/Components/Pages/Index.razor       |  14 +
 .../wwwroot/assets/css/style.css              |   3 +-
 .../wwwroot/assets/js/scripts.js              |  30 +-
 .../assets/vendor/isotope/jquery.isotope.js   |  12 +-
 12 files changed, 415 insertions(+), 317 deletions(-)
 create mode 100644 MissNationSharedUI/Shared/Components/Layout/JsInjectComponent.razor

diff --git a/MissNationBlazorWASM/Client/wwwroot/index.html b/MissNationBlazorWASM/Client/wwwroot/index.html
index 1e96581..34076ca 100644
--- a/MissNationBlazorWASM/Client/wwwroot/index.html
+++ b/MissNationBlazorWASM/Client/wwwroot/index.html
@@ -8,7 +8,7 @@
 
 
     <!-- inject:css -->
-    <link href="_content/MissNationSharedUI/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    <link href="_content/MissNationSharedUI/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/animate/animate.css">
     <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/elasic-slider/elastic.css">
     <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/iconmoon/linea-icon.css">
@@ -65,35 +65,36 @@
     <script src="_content/MissNationSharedUI/assets/vendor/flex-slider/jquery.flexslider-min.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/menuzord/menuzord.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easing/jquery.easing.1.3.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/parallax-js/parallax.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/isotope/jquery.isotope.js"></script>
     <!--script src="_content/MissNationSharedUI/assets/vendor/breakpoint/breakpoint.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/count-to/jquery.countTo.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/countdown/jquery.countdown.js"></script>
-    <script src="_content/MissNationSharedUI/assets/vendor/easing/jquery.easing.1.3.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/elasic-slider/jquery.eislideshow.js"></script>
 
     <script src="_content/MissNationSharedUI/assets/vendor/gmap/jquery.gmap.min.js"></script>
 
-    <script src="_content/MissNationSharedUI/assets/vendor/isotope/jquery.isotope.js"></script>
 
     <script src="_content/MissNationSharedUI/assets/vendor/mailchimp/jquery.ajaxchimp.min.js"></script>
 
 
     <script src="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.carousel.min.js"></script>
-    <script src="_content/MissNationSharedUI/assets/vendor/parallax-js/parallax.min.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/smooth/smooth.js"></script>
 
     <script src="_content/MissNationSharedUI/assets/vendor/touchspin/touchspin.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/typist/typist.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/visible/visible.js"></script>
-    <script src="_content/MissNationSharedUI/assets/vendor/wow/wow.min.js"></script>
+    <script-- src="_content/MissNationSharedUI/assets/vendor/wow/wow.min.js"></script-->
     <!-- endinject -->
     <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
     <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.tools.min.js"></script>
     <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.revolution.min.js"></script>
+
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-    
+
 
     <script src="_framework/blazor.webassembly.js" autostart="true"></script>
     <script src="_content/MissNationSharedUI/assets/js/scripts.js"></script>
diff --git a/MissNationSharedUI/Shared/Components/Layout/HeroComponent.razor b/MissNationSharedUI/Shared/Components/Layout/HeroComponent.razor
index 6ef553e..6810fdb 100644
--- a/MissNationSharedUI/Shared/Components/Layout/HeroComponent.razor
+++ b/MissNationSharedUI/Shared/Components/Layout/HeroComponent.razor
@@ -1,6 +1,6 @@
 <!--hero section-->
 <div class="banner-state vertical-align banner-p height-600 mt-5">
-    <div class="container-mid">
+    <div class="container-fluid">
         <div class="container">
             <div class="row">
                 <div class="col-md-6 ">
diff --git a/MissNationSharedUI/Shared/Components/Layout/JsInjectComponent.razor b/MissNationSharedUI/Shared/Components/Layout/JsInjectComponent.razor
new file mode 100644
index 0000000..edd8364
--- /dev/null
+++ b/MissNationSharedUI/Shared/Components/Layout/JsInjectComponent.razor
@@ -0,0 +1,46 @@
+
+<script src="_content/MissNationSharedUI/assets/vendor/modernizr/modernizr.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/jquery/jquery-1.10.2.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/images-loaded/imagesloaded.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/sticky/jquery.sticky.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/nav/jquery.nav.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/flex-slider/jquery.flexslider-min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/menuzord/menuzord.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easing/jquery.easing.1.3.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/parallax-js/parallax.min.js"></script>
+    <!--script src="_content/MissNationSharedUI/assets/vendor/breakpoint/breakpoint.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/count-to/jquery.countTo.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/countdown/jquery.countdown.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/elasic-slider/jquery.eislideshow.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/gmap/jquery.gmap.min.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/isotope/jquery.isotope.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/mailchimp/jquery.ajaxchimp.min.js"></script>
+
+
+    <script src="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.carousel.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/smooth/smooth.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/touchspin/touchspin.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/typist/typist.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/visible/visible.js"></script>
+    <script-- src="_content/MissNationSharedUI/assets/vendor/wow/wow.min.js"></script-->
+    <!-- endinject -->
+    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
+    <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.tools.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.revolution.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/@@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+    
+
+    <script src="_framework/blazor.webassembly.js" autostart="true"></script>
+    <script src="_content/MissNationSharedUI/assets/js/scripts.js"></script>
+
+@code {
+
+}
diff --git a/MissNationSharedUI/Shared/Components/Layout/MainLayout.razor b/MissNationSharedUI/Shared/Components/Layout/MainLayout.razor
index 7d24bee..b094d18 100644
--- a/MissNationSharedUI/Shared/Components/Layout/MainLayout.razor
+++ b/MissNationSharedUI/Shared/Components/Layout/MainLayout.razor
@@ -1,5 +1,6 @@
 @inherits LayoutComponentBase
 @using System.Runtime.InteropServices.JavaScript
+@using MissNationSharedUI.Shared.Components.Layout
 
 <!--  preloader start>
     <div id="tb-preloader">
@@ -21,33 +22,20 @@
             @Body
         </article>
         <FooterComponent/>
+        
     </main>
 </div>
 
 @code {
 
-    [Inject]
-    public IJSRuntime JSRuntime { get; set; }
+    
 
-    private IJSObjectReference _jsModule;
-
-    /*protected override async Task OnAfterRenderAsync(bool firstRender)
+    /*protected override async Task OnInitializedAsync()
     {
-        base.OnAfterRender(firstRender);
-
-        if (firstRender)
-        {
-            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
-            await _jsModule.InvokeVoidAsync("getMessage");
-        }
-    }*/
-
-    protected override async Task OnInitializedAsync()
-    {
-        await base.OnInitializedAsync();
+       
         _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
         await _jsModule.InvokeVoidAsync("getMessage");
-    }
+    }*/
 
 }
 
diff --git a/MissNationSharedUI/Shared/Components/Layout/NavbarComponent.razor b/MissNationSharedUI/Shared/Components/Layout/NavbarComponent.razor
index f0fd113..7fdcfa2 100644
--- a/MissNationSharedUI/Shared/Components/Layout/NavbarComponent.razor
+++ b/MissNationSharedUI/Shared/Components/Layout/NavbarComponent.razor
@@ -1,7 +1,7 @@
 <header class="l-header">
 
     <div class="l-navbar l-navbar_expand l-navbar_t-light l-navbar_s-center js-navbar-sticky">
-        <div class="container">
+        <div class="container-fluid">
             <nav class="menuzord js-primary-navigation poppins" role="navigation" aria-label="Primary Navigation">
 
                 <!--logo start-->
diff --git a/MissNationSharedUI/Shared/Components/Layout/SuperHeroComponent.razor b/MissNationSharedUI/Shared/Components/Layout/SuperHeroComponent.razor
index 828711b..7eeab64 100644
--- a/MissNationSharedUI/Shared/Components/Layout/SuperHeroComponent.razor
+++ b/MissNationSharedUI/Shared/Components/Layout/SuperHeroComponent.razor
@@ -1,22 +1,21 @@
 <!--hero section-->
 <div class="banner-state vertical-align mt-5" style="height:80vh;">
-    <div class="container-mid">
-        <div class="container">
-            <div class="row">
-                <div class="col-12">
-                    <div class="banner-title align-content-center" style="display:inline-grid; height:100%; width:100%; margin: 0 auto;">
-                        <div id="containerAnimation" class="container-overflowvisible justify-content-center" style="display:grid; height:100%; width: 100%">   
-                            <img class="right-to-left" src="_content/MissNationSharedUI/assets/img/logohotel1.png" style="animation-duration: 1725ms; opacity: 0.2; align-self:center; filter: blur(4px); max-width:400px; width:50vw" />
-                            <p style="animation-duration: 1725ms; font-size:15vw; text-align:center" class="right-to-left">#IonQP</p>  
-                            </div>
+    <div class="container-fluid">
+
+        <div class="row">
+            <div class="col-12">
+                <div class="banner-title align-content-center" style="display:inline-grid; height:100%; width:100%; margin: 0 auto;">
+                    <div id="containerAnimation" class="container-overflowvisible justify-content-center" style="display:grid; height:100%; width: 100%">
+                        <img class="right-to-left" src="_content/MissNationSharedUI/assets/img/logohotel1.png" style="animation-duration: 1725ms; opacity: 0.2; align-self:center; filter: blur(4px); max-width:400px; width:50vw" />
+                        <p style="animation-duration: 1725ms; font-size:15vw; text-align:center" class="right-to-left">#IonQP</p>
                     </div>
                 </div>
             </div>
         </div>
+
     </div>
 </div>
 <!--hero section-->
-
 @code {
 
 }
diff --git a/MissNationSharedUI/Shared/Components/Pages/Gallery.razor b/MissNationSharedUI/Shared/Components/Pages/Gallery.razor
index b6d19e7..d21c779 100644
--- a/MissNationSharedUI/Shared/Components/Pages/Gallery.razor
+++ b/MissNationSharedUI/Shared/Components/Pages/Gallery.razor
@@ -1,287 +1,308 @@
   @page "/gallery"
-     
+
 
 <!--body content start-->
 <section class="body-content page-content">
-  
 
-    <div class="portfolio portfolio-masonry col-2 col-sm-12 gutter">
+    <div class="container-fluid">
+        <div class="row">
+            
 
-        <div class="portfolio-item cat1 cat3 ">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/1.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/1.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
+                <div class="portfolio portfolio-masonry col-2 col-sm-12 gutter">
+
+                    <div class="portfolio-item cat1 cat3 ">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/1.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/1.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/1.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/1.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
 
 
-        <div class="portfolio-item cat4 cat2">
-            <div class="thumb">
+                    <div class="portfolio-item cat4 cat2">
+                        <div class="thumb">
 
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/4-1.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/4-1.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/4-1.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/4-1.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/4-1.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+
+                        </div>
                     </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/4-1.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
+
+                    <div class="portfolio-item cat2 cat4">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/2.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="portfolio-single.html">
+                                        <i class="icon-basic_link"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="portfolio-single.html">External link</a></h4>
+                                    <p>
+                                        <a href="#">category 1</a> , <a href="#">category 2</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+
+                    <div class="portfolio-item cat1 cat4">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/3.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a class="popup-vimeo" href="https://vimeo.com/45830194">
+                                        <i class="icon-arrows_keyboard_right"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a class="popup-vimeo" href="https://vimeo.com/45830194">Video lightbox</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat4">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/5.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/5.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/5.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category 3</a> , <a href="#">category 4</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat3 ">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/7.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="portfolio-single.html">
+                                        <i class="icon-basic_link"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="portfolio-single.html">External link</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div class="portfolio-item cat1 cat4 cat3 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/8.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/8.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/8.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category 5</a> , <a href="#">category 6</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/9.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/9.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/9.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!---->
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/10.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/10.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/10.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/11.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/11.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/11.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/12.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/12.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/12.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/13.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/13.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/13.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/14.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/14.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/14.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="portfolio-item cat2 cat5">
+                        <div class="thumb">
+                            <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/15.jpg" alt="">
+                            <div class="portfolio-hover">
+                                <div class="action-btn">
+                                    <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/15.jpg" class="popup-link" title="lightbox view">
+                                        <i class="icon-basic_magnifier"></i>
+                                    </a>
+                                </div>
+                                <div class="portfolio-description">
+                                    <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/15.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
+                                    <p>
+                                        <a href="#">category</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
 
-            </div>
+          
         </div>
-
-        <div class="portfolio-item cat2 cat4">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/2.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="portfolio-single.html">
-                            <i class="icon-basic_link"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="portfolio-single.html">External link</a></h4>
-                        <p>
-                            <a href="#">category 1</a> , <a href="#">category 2</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat1 cat4">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/3.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a class="popup-vimeo" href="https://vimeo.com/45830194">
-                            <i class="icon-arrows_keyboard_right"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a class="popup-vimeo" href="https://vimeo.com/45830194">Video lightbox</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat4">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/5.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/5.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/5.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category 3</a> , <a href="#">category 4</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat3 ">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/7.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="portfolio-single.html">
-                            <i class="icon-basic_link"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="portfolio-single.html">External link</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-       
-        <div class="portfolio-item cat1 cat4 cat3 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/8.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/8.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/8.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category 5</a> , <a href="#">category 6</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/9.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/9.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/9.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!---->
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/10.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/10.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/10.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/11.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/11.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/11.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/12.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/12.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/12.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/13.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/13.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/13.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/14.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/14.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/14.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="portfolio-item cat2 cat5">
-            <div class="thumb">
-                <img src="_content/MissNationSharedUI/assets/img/portfolio/masonry/15.jpg" alt="">
-                <div class="portfolio-hover">
-                    <div class="action-btn">
-                        <a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/15.jpg" class="popup-link" title="lightbox view">
-                            <i class="icon-basic_magnifier"></i>
-                        </a>
-                    </div>
-                    <div class="portfolio-description">
-                        <h4><a href="_content/MissNationSharedUI/assets/img/portfolio/masonry/15.jpg" class="popup-link" title="The Cleaner">lightbox view</a></h4>
-                        <p>
-                            <a href="#">category</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
     </div>
+
 </section>
 <!--body content end-->
-
 @code {
+    [Inject]
+    public IJSRuntime JSRuntime { get; set; }
 
+    private IJSObjectReference _jsModule;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+
+        if (firstRender)
+        {
+            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
+            await _jsModule.InvokeVoidAsync("getMessage");
+        }
+    }
 }
diff --git a/MissNationSharedUI/Shared/Components/Pages/Help.razor b/MissNationSharedUI/Shared/Components/Pages/Help.razor
index eb0433c..303a6b8 100644
--- a/MissNationSharedUI/Shared/Components/Pages/Help.razor
+++ b/MissNationSharedUI/Shared/Components/Pages/Help.razor
@@ -166,5 +166,19 @@
 <!--body content end-->
 
 @code {
+    [Inject]
+    public IJSRuntime JSRuntime { get; set; }
 
+    private IJSObjectReference _jsModule;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+
+        if (firstRender)
+        {
+            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
+            await _jsModule.InvokeVoidAsync("getMessage");
+        }
+    }
 }
diff --git a/MissNationSharedUI/Shared/Components/Pages/Index.razor b/MissNationSharedUI/Shared/Components/Pages/Index.razor
index 8006d32..4115382 100644
--- a/MissNationSharedUI/Shared/Components/Pages/Index.razor
+++ b/MissNationSharedUI/Shared/Components/Pages/Index.razor
@@ -114,5 +114,19 @@
 
 <!--footer 1 end-->
 @code {
+    [Inject]
+    public IJSRuntime JSRuntime { get; set; }
 
+    private IJSObjectReference _jsModule;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+
+        if (firstRender)
+        {
+            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
+            await _jsModule.InvokeVoidAsync("getMessage");
+        }
+    }
 }
diff --git a/MissNationSharedUI/wwwroot/assets/css/style.css b/MissNationSharedUI/wwwroot/assets/css/style.css
index f3c2dfc..3311784 100644
--- a/MissNationSharedUI/wwwroot/assets/css/style.css
+++ b/MissNationSharedUI/wwwroot/assets/css/style.css
@@ -2567,6 +2567,7 @@ body {
 
 .portfolio .portfolio-item {
     float: left;
+    width: auto;
 }
 
 .portfolio .portfolio-item .thumb {
@@ -2675,7 +2676,7 @@ body {
 /*portfolio 2 grid*/
 
 .portfolio.col-2 .portfolio-item {
-    width: 49.99%;
+    width: 47.49%;
 }
 
 
diff --git a/MissNationSharedUI/wwwroot/assets/js/scripts.js b/MissNationSharedUI/wwwroot/assets/js/scripts.js
index 5c4e350..aa5ec8d 100644
--- a/MissNationSharedUI/wwwroot/assets/js/scripts.js
+++ b/MissNationSharedUI/wwwroot/assets/js/scripts.js
@@ -1,3 +1,5 @@
+
+let x = 1;
 function initMassive() {
 
     var $window, $document, $body;
@@ -11,17 +13,20 @@ function initMassive() {
     /*==============================================
      Retina support added
      ===============================================*/
-    if (window.devicePixelRatio > 1) {
-        $(".retina").imagesLoaded(function () {
-            $(".retina").each(function () {
-                var src = $(this).attr("src").replace(".", "@2x.");
-                var h = $(this).height();
-                $(this).attr("src", src).css({ height: h, width: "auto" });
+    if (x == 1) {
+        if (window.devicePixelRatio > 1) {
+            $(".retina").imagesLoaded(function () {
+                $(".retina").each(function () {
+                    var src = $(this).attr("src").replace(".", "@2x.");
+                    var h = $(this).height();
+                    $(this).attr("src", src).css({ height: h, width: "auto" });
+                });
             });
-        });
+        }
     }
 
 
+
     /*==============================================
      Smooth scroll init
      ===============================================*/
@@ -33,7 +38,10 @@ function initMassive() {
     /*==============================================
      Menuzord init
      ===============================================*/
-    $(".js-primary-navigation").menuzord();
+    if (x == 1) {
+
+        $(".js-primary-navigation").menuzord();
+    }
 
 
     /*==============================================
@@ -165,7 +173,7 @@ function initMassive() {
     /*==============================================
      Portfolio filterable grid init
      ===============================================*/
-    /*var $portfolioGeneral = $(".portfolio:not(.portfolio-masonry)").isotope({
+    var $portfolioGeneral = $(".portfolio:not(.portfolio-masonry)").isotope({
         itemSelector: ".portfolio-item",
         layoutMode: "fitRows",
         filter: "*"
@@ -198,7 +206,7 @@ function initMassive() {
                 $portfolioMasonry.isotope("layout");
             }, 400);
         });
-    }*/
+    }
 
     if (typeof imagesLoaded == "function") {
         console.log("Images loaded on documentready");
@@ -542,8 +550,8 @@ function initMassive() {
      ===============================================*/
     initMailer();
     initRev();
-
     Blazor.start();
+    x++;
 }
 
 function initMailer() {
diff --git a/MissNationSharedUI/wwwroot/assets/vendor/isotope/jquery.isotope.js b/MissNationSharedUI/wwwroot/assets/vendor/isotope/jquery.isotope.js
index 8bfdc83..b88ef38 100644
--- a/MissNationSharedUI/wwwroot/assets/vendor/isotope/jquery.isotope.js
+++ b/MissNationSharedUI/wwwroot/assets/vendor/isotope/jquery.isotope.js
@@ -1518,10 +1518,16 @@
             clean: {},
             onEnd: {}
         };
+        if ($(window).width() < 400) {
+            
+        }
+        else {
+            this.css({
+                position: 'absolute'
+            });
+        }
+        
 
-        this.css({
-            position: 'absolute'
-        });
     };
 
     // trigger specified handler for event type