Enhance sidebar UI and layout

Web/Areas/Admin/Controllers/AdminController.cs

@@ -10,7 +10,7 @@ using Web.ViewModel.DashboardVM;
 
 namespace Web.Areas.Admin.Controllers
 {
-    [Authorize(Roles = "Admin")]
+    [Authorize(Roles = "Admin,Demo")]
     public class AdminController : Controller
     {
         private readonly SignInManager<ApplicationUser> _signInManager;

Web/Areas/Admin/Controllers/FooterController.cs

@@ -16,6 +16,7 @@ namespace Web.Areas.Admin.Controllers
 {
 
 
+    
     public class FooterController : Controller
     {
         private readonly IFooterRepository _footer;

Web/Areas/Admin/Controllers/NewslettersController.cs

@@ -77,6 +77,7 @@ namespace Web.Areas.Admin.Controllers
             return View(listViewModel);
         }
 
+        [Authorize(Roles = "Admin")]
         public IActionResult Create()
         {
             var totalSubscribedUsers = _context.Subscriptions.Count(s => s.IsSubscribed);
@@ -102,7 +103,7 @@ namespace Web.Areas.Admin.Controllers
         }
 
 
-
+        [Authorize(Roles = "Admin")]
         [HttpPost]
         public async Task<IActionResult> Create(SendNewsLetterViewModel viewModel)
         {

Web/Areas/Admin/Controllers/QuestionnaireController.cs

@@ -97,6 +97,7 @@ namespace Web.Areas.Admin.Controllers
             });
         }
         [HttpGet]
+        [Authorize(Roles = "Admin")]
         public IActionResult Create()
 
 
@@ -120,6 +121,7 @@ namespace Web.Areas.Admin.Controllers
             return View(questionnaire);
         }
         [HttpPost]
+        [Authorize(Roles = "Admin")]
         public async Task<IActionResult> Create(QuestionnaireViewModel viewmodel)
         {
             if (ModelState.IsValid)
@@ -172,6 +174,7 @@ namespace Web.Areas.Admin.Controllers
         }
 
         [HttpGet]
+        [Authorize(Roles = "Admin")]
         public IActionResult Edit(int id)
         {
             var questionTypes = Enum.GetValues(typeof(QuestionType))
@@ -214,7 +217,7 @@ namespace Web.Areas.Admin.Controllers
 
             return View(viewModel);
         }
-
+        [Authorize(Roles = "Admin")]
         [HttpPost]
         public async Task<IActionResult> Edit(EditQuestionnaireViewModel viewModel)
         {
@@ -510,6 +513,7 @@ namespace Web.Areas.Admin.Controllers
             }
         }
         [HttpGet]
+        [Authorize(Roles = "Admin")]
         public IActionResult Delete(int id)
         {
             var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>();
@@ -830,6 +834,7 @@ namespace Web.Areas.Admin.Controllers
         // Add these methods to your existing QuestionnaireController class
 
         [HttpGet]
+        [Authorize(Roles = "Admin")]
         public IActionResult SetLogic(int id)
         {
             var questionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(id);

Web/Areas/Admin/Controllers/UsersController.cs

@@ -9,6 +9,7 @@ using Web.ViewModel.AccountVM;
 namespace Web.Areas.Admin.Controllers
 {
 
+    [Authorize(Roles = "Admin")]
     public class UsersController : Controller
     {
         private readonly UserManager<ApplicationUser> _userManager;

Web/Areas/Admin/Views/Shared/_AdminLayout.cshtml

@@ -9,54 +9,419 @@
     <link rel="stylesheet" href="~/Web.styles.css" asp-append-version="true" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+
+    <style>
+        /* Override default styles while preserving functionality */
+      
+
+        /* Modern Glassmorphism Sidebar - Icons only by default */
+        #sidebar {
+            position: sticky !important;
+            top: 0 !important;
+            height: 100vh !important;
+            min-width: 80px; /* Small width by default - icons only */
+            max-width: 80px;
+            background: rgba(10, 15, 25, 0.85) !important;
+            backdrop-filter: blur(25px) saturate(1.8) !important;
+            border-right: 1px solid rgba(59, 130, 246, 0.15) !important;
+            box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
+            color: #fff;
+            -webkit-transition: all 0.3s;
+            -o-transition: all 0.3s;
+            transition: all 0.3s;
+            overflow-y: auto;
+            overflow-x: hidden;
+            z-index: 1000;
+            text-align: center; /* Center icons by default */
+        }
+
+            #sidebar::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
+                z-index: -1;
+            }
+
+            /* Default: Hide text, show only icons centered */
+            #sidebar ul.components li a {
+                padding: 15px 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: rgba(255, 255, 255, 0.85);
+                text-decoration: none;
+                font-weight: 500;
+                font-size: 0.9rem;
+                border-radius: 12px;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                position: relative;
+                overflow: hidden;
+                background: rgba(255, 255, 255, 0.02);
+                backdrop-filter: blur(10px);
+                border: 1px solid transparent;
+                margin: 4px 8px;
+            }
+
+                #sidebar ul.components li a span.bi {
+                    margin-right: 0;
+                    margin-bottom: 0;
+                    font-size: 1.2rem;
+                }
+
+                /* Hide text by default */
+                #sidebar ul.components li a .nav-text {
+                    display: none;
+                }
+
+            /* Expanded state: Show both icons and text */
+            #sidebar.active {
+                min-width: 280px; /* Wide when expanded */
+                max-width: 280px;
+                text-align: left;
+            }
+
+                #sidebar.active ul.components li a {
+                    padding: 14px 18px;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: flex-start;
+                    margin: 4px 12px;
+                }
+
+                    #sidebar.active ul.components li a span.bi {
+                        margin-right: 15px;
+                        margin-bottom: 0;
+                        font-size: 1.1rem;
+                    }
+
+                    #sidebar.active ul.components li a .nav-text {
+                        display: inline; /* Show text when expanded */
+                    }
+
+            /* Logo styling */
+            #sidebar .logo {
+                display: block;
+                color: #fff !important;
+                font-weight: 900;
+                font-size: 1.2rem !important; /* Smaller by default */
+                padding: 20px 0;
+                -webkit-transition: 0.3s;
+                -o-transition: 0.3s;
+                transition: 0.3s;
+                text-decoration: none;
+                background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                letter-spacing: -0.02em;
+                text-transform: uppercase;
+                border-bottom: 1px solid rgba(59, 130, 246, 0.15);
+                margin-bottom: 10px;
+            }
+
+            #sidebar.active .logo {
+                font-size: 1.8rem !important; /* Larger when expanded */
+                padding: 20px 30px;
+            }
+
+            /* Navigation List Styling */
+            #sidebar ul.components {
+                padding: 0;
+                -webkit-transition: 0.3s;
+                -o-transition: 0.3s;
+                transition: 0.3s;
+            }
+
+            #sidebar ul li {
+                font-size: 16px;
+            }
+
+                #sidebar ul li > ul {
+                    margin-left: 10px;
+                }
+
+                    #sidebar ul li > ul li {
+                        font-size: 14px;
+                    }
+
+                #sidebar ul li a:hover {
+                    color: #fff;
+                    background: rgba(59, 130, 246, 0.12) !important;
+                    transform: translateX(4px);
+                    border: 1px solid rgba(59, 130, 246, 0.2);
+                    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+                }
+
+                #sidebar ul li.active > a {
+                    background: rgba(20, 184, 166, 0.15) !important;
+                    color: #fff;
+                    border: 1px solid rgba(20, 184, 166, 0.3);
+                    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
+                }
+
+        /* Responsive behavior */
+        @@media (max-width: 991.98px) {
+            #sidebar {
+                position: fixed !important;
+                height: 100vh;
+                z-index: 1001;
+                left: -80px !important; /* Hide by default on mobile */
+            }
+
+                #sidebar.active {
+                    left: 0 !important; /* Show when active on mobile */
+                }
+
+            #sidebarCollapse span {
+                display: none;
+            }
+        }
+
+        /* Content Area */
+        .wrapper {
+            width: 100%;
+        }
+
+        #content {
+            width: 100%;
+            padding: 0;
+            min-height: 100vh;
+            -webkit-transition: all 0.3s;
+            -o-transition: all 0.3s;
+            transition: all 0.3s;
+        }
+
+        /* Modern Navbar Styling */
+        .navbar {
+            padding: 15px 10px;
+            background: rgba(5, 8, 18, 0.85) !important;
+            backdrop-filter: blur(25px) saturate(1.8);
+            border: none;
+            border-radius: 0;
+            margin-bottom: 40px;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.15);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+        }
+
+            .navbar::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
+                border-radius: inherit;
+                z-index: -1;
+            }
+
+        /* Modern Button Styling */
+        .btn.btn-primary {
+            background: linear-gradient(135deg, #3b82f6, #14b8a6) !important;
+            border: 1px solid rgba(59, 130, 246, 0.3) !important;
+            color: #ffffff !important;
+            font-weight: 600;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(15px);
+        }
+
+            .btn.btn-primary:hover,
+            .btn.btn-primary:focus {
+                background: linear-gradient(135deg, #2563eb, #0d9488) !important;
+                border-color: rgba(59, 130, 246, 0.5) !important;
+                transform: translateY(-1px);
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+            }
+
+        .btn-danger {
+            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
+            border: 1px solid rgba(239, 68, 68, 0.3) !important;
+            color: #ffffff !important;
+            font-weight: 600;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+
+            .btn-danger:hover {
+                background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
+                border-color: rgba(239, 68, 68, 0.5) !important;
+                transform: translateY(-1px);
+                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+            }
+
+        /* Dropdown Styling */
+        .dropdown-menu {
+            background: rgba(5, 8, 18, 0.95) !important;
+            backdrop-filter: blur(25px) saturate(1.8) !important;
+            border: 1px solid rgba(59, 130, 246, 0.2) !important;
+            border-radius: 12px !important;
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1) !important;
+            padding: 8px !important;
+        }
+
+        .dropdown-item {
+            color: rgba(255, 255, 255, 0.85) !important;
+            font-weight: 500;
+            padding: 10px 12px;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            margin: 2px 0;
+        }
+
+            .dropdown-item:hover {
+                background: rgba(59, 130, 246, 0.15) !important;
+                color: #ffffff !important;
+            }
+
+        /* Badge Styling */
+        .badge-danger {
+            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
+            color: white !important;
+            border-radius: 50%;
+            padding: 4px 8px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        /* Text colors */
+        .text-white {
+            color: rgba(255, 255, 255, 0.9) !important;
+        }
+
+        /* Custom Scrollbar */
+        #sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        #sidebar::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        #sidebar::-webkit-scrollbar-thumb {
+            background: rgba(59, 130, 246, 0.3);
+            border-radius: 2px;
+        }
+
+            #sidebar::-webkit-scrollbar-thumb:hover {
+                background: rgba(59, 130, 246, 0.5);
+            }
+
+        /* Preserve original footer styling */
+        .footer {
+            padding: 0 30px;
+        }
+
+        @@media (max-width: 991.98px) {
+            .footer {
+                display: block;
+            }
+        }
+
+        /* Preserve original dropdown toggle */
+        a[data-toggle="collapse"] {
+            position: relative;
+        }
+
+        .dropdown-toggle::after {
+            display: block;
+            position: absolute;
+            top: 50%;
+            right: 0;
+            -webkit-transform: translateY(-50%);
+            -ms-transform: translateY(-50%);
+            transform: translateY(-50%);
+        }
+
+        /* Navbar button styling */
+        .navbar-btn {
+            -webkit-box-shadow: none;
+            box-shadow: none;
+            outline: none !important;
+            border: none;
+        }
+    </style>
 
 </head>
 <body>
 
     <div class="wrapper d-flex align-items-stretch">
-        <nav id="sidebar" class="active">
+        <nav id="sidebar">
-            <h1><a class="logo">OS</a></h1>
+            <h1><a class="logo">NVKN</a></h1>
             <ul class="list-unstyled components mb-5">
                 <li class="sidebarCollapse">
-                    <a asp-controller="admin" asp-action="index"><span class="bi bi-speedometer"></span> Admin</a>
+                    <a asp-controller="admin" asp-action="index">
+                        <span class="bi bi-speedometer"></span>
+                        <span class="nav-text">Admin</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="Page" asp-action="index"><span class="bi bi-file-earmark-fill"></span> Pages</a>
+                    <a asp-controller="Page" asp-action="index">
+                        <span class="bi bi-file-earmark-fill"></span>
+                        <span class="nav-text">Pages</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="banner" asp-action="index"><span class="bi bi-card-image"></span> Banners</a>
+                    <a asp-controller="banner" asp-action="index">
+                        <span class="bi bi-card-image"></span>
+                        <span class="nav-text">Banners</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="footer" asp-action="index"><span class="bi bi-c-circle-fill"></span> Footer</a>
+                    <a asp-controller="footer" asp-action="index">
+                        <span class="bi bi-c-circle-fill"></span>
+                        <span class="nav-text">Footer</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="address" asp-action="index"><span class="bi bi-pin-map"></span> Address</a>
+                    <a asp-controller="address" asp-action="index">
+                        <span class="bi bi-pin-map"></span>
+                        <span class="nav-text">Address</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="SocialMedia" asp-action="index"><span class="bi bi-collection-play-fill"></span> Social Media</a>
+                    <a asp-controller="SocialMedia" asp-action="index">
+                        <span class="bi bi-collection-play-fill"></span>
+                        <span class="nav-text">Social Media</span>
+                    </a>
                 </li>
                 <li>
-             
+                    <a asp-controller="Questionnaire" asp-action="index">
-                    <a asp-controller="Questionnaire" asp-action="index"><span class="bi bi-question-circle"></span> Survey</a>
+                        <span class="bi bi-question-circle"></span>
+                        <span class="nav-text">Survey</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="SurveyAnalysis" asp-action="index"><span class="bi bi-graph-up-arrow"></span> Analyzer</a>
+                    <a asp-controller="SurveyAnalysis" asp-action="index">
+                        <span class="bi bi-graph-up-arrow"></span>
+                        <span class="nav-text">Analyzer</span>
+                    </a>
                 </li>
                 <li>
-
+                    <a asp-controller="UserResponse" asp-action="index">
-                    <a asp-controller="UserResponse" asp-action="index"><span class="bi bi-clipboard-data"></span> Response</a>
+                        <span class="bi bi-clipboard-data"></span>
+                        <span class="nav-text">Response</span>
+                    </a>
                 </li>
                 <li>
-
+                    <a asp-controller="UserResponseStatus" asp-action="index">
-                    <a asp-controller="UserResponseStatus" asp-action="index"><span class="bi bi-heart-pulse"></span> User status</a>
+                        <span class="bi bi-heart-pulse"></span>
+                        <span class="nav-text">User status</span>
+                    </a>
                 </li>
                 <li>
-                    <a asp-controller="newsletters" asp-action="index"><span class="bi bi-newspaper"></span> Subscibers</a>
+                    <a asp-controller="newsletters" asp-action="index">
+                        <span class="bi bi-newspaper"></span>
+                        <span class="nav-text">Subscibers</span>
+                    </a>
                 </li>
-               
             </ul>
-
-           
         </nav>
 
         <!-- Page Content  -->
@@ -86,7 +451,6 @@
                                         <a class="dropdown-item" href="#">
 
                                             <div id="notifications">
-                                               
                                             </div>
                                         </a>
                                     </li>
@@ -221,95 +585,6 @@
     </script>
 
 
-    @* <script type="text/javascript">
-        // Establish a connection to the SignalR hub
-        const connection = new signalR.HubConnectionBuilder()
-            .withUrl("/notificationHub")
-            .build();
-
-        // Function to load notifications from local storage
-        function loadNotifications() {
-            const notificationsList = document.getElementById("notifications");
-            const notificationCount = document.getElementById("notificationCount");
-
-            // Retrieve notifications from local storage
-            const storedNotifications = JSON.parse(localStorage.getItem("notifications")) || [];
-
-            // Update the notification count
-            notificationCount.textContent = storedNotifications.length;
-
-            // Add each stored notification to the list
-            storedNotifications.forEach(notification => {
-                const div = document.createElement("div");
-                div.className = "list-group-item";
-                div.textContent = notification.text;
-
-                // Add click event to remove notification
-                div.addEventListener("click", () => {
-                    removeNotification(div, notification.id);
-                });
-
-                notificationsList.appendChild(div);
-            });
-        }
-
-        // Function to add a notification to the list
-        function addNotification(userName, email) {
-            const notificationsList = document.getElementById("notifications");
-            const notificationCount = document.getElementById("notificationCount");
-
-            // Create a unique ID for the notification
-            const notificationId = Date.now();
-
-            // Create notification item
-            const div = document.createElement("div");
-            div.className = "list-group-item";
-            div.textContent = `New submission from ${userName}`;
-
-            // Add click event to remove notification
-            div.addEventListener("click", () => {
-                removeNotification(div, notificationId);
-            });
-
-            // Append the new notification
-            notificationsList.appendChild(div);
-
-            // Update the notification count
-            notificationCount.textContent = parseInt(notificationCount.textContent) + 1;
-
-            // Store the notification in local storage
-            const storedNotifications = JSON.parse(localStorage.getItem("notifications")) || [];
-            storedNotifications.push({ id: notificationId, text: div.textContent });
-            localStorage.setItem("notifications", JSON.stringify(storedNotifications));
-        }
-
-        // Function to remove a notification
-        function removeNotification(div, id) {
-            div.remove();
-
-            // Update the notification count
-            const notificationCount = document.getElementById("notificationCount");
-            notificationCount.textContent = parseInt(notificationCount.textContent) - 1;
-
-            // Remove the notification from local storage
-            let storedNotifications = JSON.parse(localStorage.getItem("notifications")) || [];
-            storedNotifications = storedNotifications.filter(notification => notification.id !== id);
-            localStorage.setItem("notifications", JSON.stringify(storedNotifications));
-        }
-
-        // Receive notification from the server
-        connection.on("ReceiveNotification", function (userName, email) {
-            addNotification(userName, email);
-        });
-
-        // Start the connection
-        connection.start().then(loadNotifications).catch(function (err) {
-            return console.error(err.toString());
-        });
-    </script> *@
-
-
-
     @await RenderSectionAsync("Scripts", required: false)
     @await RenderSectionAsync("Styles", required: false)
 

Web/Areas/Admin/Views/Shared/_AdminLayout.cshtml.css

@@ -1,48 +1 @@
-/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+
-for details on configuring this project to bundle and minify static web assets. */
-
-a.navbar-brand {
-  white-space: normal;
-  text-align: center;
-  word-break: break-all;
-}
-
-a {
-  color: #0077cc;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.border-top {
-  border-top: 1px solid #e5e5e5;
-}
-.border-bottom {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.box-shadow {
-  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}
-
-button.accept-policy {
-  font-size: 1rem;
-  line-height: inherit;
-}
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  white-space: nowrap;
-  line-height: 60px;
-}

Web/Controllers/DemoRequestController.cs

@@ -0,0 +1,444 @@
+using Data;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using Model;
+using Services.EmailSend;
+using Services.Interaces;
+using System.Text;
+
+namespace Web.Controllers
+{
+    public class DemoRequestController : Controller
+    {
+        private readonly UserManager<ApplicationUser> _userManager;
+        private readonly SurveyContext _context;
+        private readonly IEmailServices _emailService;
+
+        public DemoRequestController(UserManager<ApplicationUser> userManager, SurveyContext context, IEmailServices emailService)
+        {
+            _userManager = userManager;
+            _context = context;
+            _emailService = emailService;
+        }
+
+        // Danish Demo Endpoint
+        [HttpPost]
+        public async Task<IActionResult> RequestDemo([FromBody] DemoRequest request)
+        {
+            return await CreateDemoAccount(request, "da");
+        }
+
+        // English Demo Endpoint
+        [HttpPost]
+        public async Task<IActionResult> RequestDemoEN([FromBody] DemoRequest request)
+        {
+            return await CreateDemoAccount(request, "en");
+        }
+
+        // Shared logic for both languages
+        private async Task<IActionResult> CreateDemoAccount(DemoRequest request, string language)
+        {
+            try
+            {
+                // Validate email
+                if (string.IsNullOrEmpty(request.Email))
+                {
+                    var errorMsg = language == "da" ? "Email er påkrævet" : "Email is required";
+                    return Json(new { success = false, message = errorMsg });
+                }
+
+                // Check if user already exists
+                var existingUser = await _userManager.FindByEmailAsync(request.Email);
+                if (existingUser != null)
+                {
+                    var existsMsg = language == "da" ? "Email allerede i brug" : "Email already in use";
+                    return Json(new { success = false, message = existsMsg });
+                }
+
+                // Generate password
+                string demoPassword = GeneratePassword();
+
+                // Create demo user
+                var demoUser = new ApplicationUser
+                {
+                    UserName = request.Email,
+                    Email = request.Email,
+                    EmailConfirmed = true,
+                    FirstName = "Demo",
+                    LastName = "User"
+                };
+
+                // Create user
+                var result = await _userManager.CreateAsync(demoUser, demoPassword);
+
+                if (result.Succeeded)
+                {
+                    // Assign Demo role
+                    await _userManager.AddToRoleAsync(demoUser, "Demo");
+
+                    // Send email with credentials (language-specific)
+                    bool emailSent = await SendDemoCredentialsEmail(demoUser.Email, demoPassword, language);
+
+                    if (emailSent)
+                    {
+                        var successMsg = language == "da"
+                            ? "Demo konto oprettet! Check din email for login detaljer."
+                            : "Demo account created! Check your email for login details.";
+                        return Json(new { success = true, message = successMsg });
+                    }
+                    else
+                    {
+                        var emailErrorMsg = language == "da"
+                            ? "Demo konto oprettet, men email kunne ikke sendes. Kontakt support."
+                            : "Demo account created, but email could not be sent. Please contact support.";
+                        return Json(new { success = true, message = emailErrorMsg });
+                    }
+                }
+                else
+                {
+                    var errors = string.Join(", ", result.Errors.Select(e => e.Description));
+                    var userErrorMsg = language == "da"
+                        ? "Fejl ved oprettelse af bruger: " + errors
+                        : "Error creating user: " + errors;
+                    return Json(new { success = false, message = userErrorMsg });
+                }
+            }
+            catch (Exception ex)
+            {
+                var exceptionMsg = language == "da" ? "Fejl: " + ex.Message : "Error: " + ex.Message;
+                return Json(new { success = false, message = exceptionMsg });
+            }
+        }
+
+        // Language-aware email sending
+        private async Task<bool> SendDemoCredentialsEmail(string email, string password, string language)
+        {
+            if (language == "da")
+            {
+                return await SendDanishDemoEmail(email, password);
+            }
+            else
+            {
+                return await SendEnglishDemoEmail(email, password);
+            }
+        }
+
+        // Danish email template
+        private async Task<bool> SendDanishDemoEmail(string email, string password)
+        {
+            var subject = "🚀 Din A-Survey Demo Konto er Klar!";
+
+            var htmlBody = $@"
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <style>
+        body {{ 
+            font-family: Arial, sans-serif; 
+            line-height: 1.6; 
+            color: #333; 
+            margin: 0; 
+            padding: 0; 
+        }}
+        .container {{ 
+            max-width: 600px; 
+            margin: 0 auto; 
+            padding: 20px; 
+        }}
+        .header {{ 
+            background: linear-gradient(135deg, #6441a5, #2a9d8f); 
+            color: white; 
+            padding: 30px; 
+            text-align: center; 
+            border-radius: 10px 10px 0 0; 
+        }}
+        .content {{ 
+            background: #f9f9f9; 
+            padding: 30px; 
+            border-radius: 0 0 10px 10px; 
+        }}
+        .credentials {{ 
+            background: white; 
+            padding: 20px; 
+            border-radius: 8px; 
+            margin: 20px 0; 
+            border-left: 4px solid #3498db; 
+        }}
+        .btn {{ 
+            display: inline-block; 
+            background: linear-gradient(135deg, #00d2ff, #3a7bd5); 
+            color: white; 
+            padding: 15px 30px; 
+            text-decoration: none; 
+            border-radius: 8px; 
+            font-weight: bold; 
+            margin: 20px 0; 
+        }}
+        .warning {{ 
+            background: #fff3cd; 
+            border: 1px solid #ffeaa7; 
+            padding: 15px; 
+            border-radius: 8px; 
+            margin: 20px 0; 
+        }}
+        .footer {{ 
+            text-align: center; 
+            color: #666; 
+            margin-top: 30px; 
+            border-top: 1px solid #ddd; 
+            padding-top: 20px; 
+        }}
+    </style>
+</head>
+<body>
+    <div class='container'>
+        <div class='header'>
+            <h1>🎯 Velkommen til A-Survey Demo!</h1>
+            <p>Din demo konto er klar til brug med fulde AI-funktioner</p>
+        </div>
+        
+        <div class='content'>
+            <h2>🔐 Login Detaljer</h2>
+            
+            <div class='credentials'>
+                <p><strong>📧 Email:</strong> {email}</p>
+                <p><strong>🔑 Adgangskode:</strong> <code style='background: #f4f4f4; padding: 5px; border-radius: 4px; font-family: monospace; font-weight: bold; color: #e74c3c;'>{password}</code></p>
+            </div>
+            
+            <div style='text-align: center; margin: 30px 0;'>
+                <a href='https://unabused-terina-wavier.ngrok-free.dev/Account/Login' class='btn'>
+                    🚀 Log Ind til A-Survey
+                </a>
+            </div>
+            
+            <div class='warning'>
+                <h3>📅 Demo Information:</h3>
+                <ul style='margin: 10px 0; padding-left: 20px;'>
+                    <li>✨ <strong>Demo periode:</strong> 14 dage fra i dag</li>
+                    <li>🧠 <strong>AI-funktioner:</strong> Alle tilgængelige</li>
+                    <li>📊 <strong>Analytics:</strong> Komplet dashboard inkluderet</li>
+                    <li>📋 <strong>Surveys:</strong> Ubegrænset oprettelse</li>
+                    <li>🔄 <strong>Opgradering:</strong> Kan opgraderes til fuld version</li>
+                </ul>
+            </div>
+
+            <div style='background: #e8f4fd; border: 1px solid #bee5eb; padding: 15px; border-radius: 8px; margin: 20px 0;'>
+                <h3>💡 Kom Hurtigt i Gang:</h3>
+                <ol style='margin: 10px 0; padding-left: 20px;'>
+                    <li>Klik på login linket ovenfor</li>
+                    <li>Indtast din email og adgangskode</li>
+                    <li>Udforsk de forudindlæste demo surveys</li>
+                    <li>Test AI-analyse funktionerne</li>
+                    <li>Opret dine egne surveys</li>
+                </ol>
+            </div>
+            
+            <p><strong>Har du spørgsmål eller brug for hjælp?</strong><br>
+            Kontakt os på: <a href='mailto:info@seosoft.dk'>info@seosoft.dk</a><br>
+            Telefon: +45 61 77 73 36</p>
+        </div>
+
+        <div class='footer'>
+            <p>
+                Med venlig hilsen<br>
+                <strong>A-Survey Team</strong><br>
+                SeoSoft ApS<br>
+                <small>Intelligent Survey Platform med AI-indsigter</small>
+            </p>
+        </div>
+    </div>
+</body>
+</html>";
+
+            try
+            {
+                var emailToSend = new EmailToSend(email, subject, htmlBody);
+                return await _emailService.SendConfirmationEmailAsync(emailToSend);
+            }
+            catch (Exception ex)
+            {
+                return false;
+            }
+        }
+
+        // English email template
+        private async Task<bool> SendEnglishDemoEmail(string email, string password)
+        {
+            var subject = "🚀 Your A-Survey Demo Account is Ready!";
+
+            var htmlBody = $@"
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <style>
+        body {{ 
+            font-family: Arial, sans-serif; 
+            line-height: 1.6; 
+            color: #333; 
+            margin: 0; 
+            padding: 0; 
+        }}
+        .container {{ 
+            max-width: 600px; 
+            margin: 0 auto; 
+            padding: 20px; 
+        }}
+        .header {{ 
+            background: linear-gradient(135deg, #6441a5, #2a9d8f); 
+            color: white; 
+            padding: 30px; 
+            text-align: center; 
+            border-radius: 10px 10px 0 0; 
+        }}
+        .content {{ 
+            background: #f9f9f9; 
+            padding: 30px; 
+            border-radius: 0 0 10px 10px; 
+        }}
+        .credentials {{ 
+            background: white; 
+            padding: 20px; 
+            border-radius: 8px; 
+            margin: 20px 0; 
+            border-left: 4px solid #3498db; 
+        }}
+        .btn {{ 
+            display: inline-block; 
+            background: linear-gradient(135deg, #00d2ff, #3a7bd5); 
+            color: white; 
+            padding: 15px 30px; 
+            text-decoration: none; 
+            border-radius: 8px; 
+            font-weight: bold; 
+            margin: 20px 0; 
+        }}
+        .warning {{ 
+            background: #fff3cd; 
+            border: 1px solid #ffeaa7; 
+            padding: 15px; 
+            border-radius: 8px; 
+            margin: 20px 0; 
+        }}
+        .footer {{ 
+            text-align: center; 
+            color: #666; 
+            margin-top: 30px; 
+            border-top: 1px solid #ddd; 
+            padding-top: 20px; 
+        }}
+    </style>
+</head>
+<body>
+    <div class='container'>
+        <div class='header'>
+            <h1>🎯 Welcome to A-Survey Demo!</h1>
+            <p>Your demo account is ready with full AI capabilities</p>
+        </div>
+        
+        <div class='content'>
+            <h2>🔐 Login Credentials</h2>
+            
+            <div class='credentials'>
+                <p><strong>📧 Email:</strong> {email}</p>
+                <p><strong>🔑 Password:</strong> <code style='background: #f4f4f4; padding: 5px; border-radius: 4px; font-family: monospace; font-weight: bold; color: #e74c3c;'>{password}</code></p>
+            </div>
+            
+            <div style='text-align: center; margin: 30px 0;'>
+                <a href='https://unabused-terina-wavier.ngrok-free.dev/Account/Login' class='btn'>
+                    🚀 Login to A-Survey
+                </a>
+            </div>
+            
+            <div class='warning'>
+                <h3>📅 Demo Information:</h3>
+                <ul style='margin: 10px 0; padding-left: 20px;'>
+                    <li>✨ <strong>Demo period:</strong> 14 days from today</li>
+                    <li>🧠 <strong>AI features:</strong> All available</li>
+                    <li>📊 <strong>Analytics:</strong> Complete dashboard included</li>
+                    <li>📋 <strong>Surveys:</strong> Unlimited creation</li>
+                    <li>🔄 <strong>Upgrade:</strong> Convert to full version anytime</li>
+                </ul>
+            </div>
+
+            <div style='background: #e8f4fd; border: 1px solid #bee5eb; padding: 15px; border-radius: 8px; margin: 20px 0;'>
+                <h3>💡 Quick Start Guide:</h3>
+                <ol style='margin: 10px 0; padding-left: 20px;'>
+                    <li>Click the login button above</li>
+                    <li>Enter your email and password</li>
+                    <li>Explore the pre-loaded demo surveys</li>
+                    <li>Test the AI analysis features</li>
+                    <li>Create your own surveys</li>
+                </ol>
+            </div>
+            
+            <p><strong>Questions or need help?</strong><br>
+            Contact us at: <a href='mailto:info@seosoft.dk'>info@seosoft.dk</a><br>
+            Phone: +45 61 77 73 36</p>
+        </div>
+
+        <div class='footer'>
+            <p>
+                Best regards,<br>
+                <strong>A-Survey Team</strong><br>
+                SeoSoft ApS<br>
+                <small>Intelligent Survey Platform with AI Insights</small>
+            </p>
+        </div>
+    </div>
+</body>
+</html>";
+
+            try
+            {
+                var emailToSend = new EmailToSend(email, subject, htmlBody);
+                return await _emailService.SendConfirmationEmailAsync(emailToSend);
+            }
+            catch (Exception ex)
+            {
+                return false;
+            }
+        }
+
+        private string GeneratePassword()
+        {
+            var random = new Random();
+
+            // Ensure password meets all ASP.NET Identity requirements
+            var digits = "0123456789";
+            var lowercase = "abcdefghijklmnopqrstuvwxyz";
+            var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+            var special = "!@#$%";
+
+            // Guarantee at least one of each required type
+            var password = new StringBuilder();
+            password.Append(digits[random.Next(digits.Length)]);        // At least 1 digit
+            password.Append(lowercase[random.Next(lowercase.Length)]);  // At least 1 lowercase
+            password.Append(uppercase[random.Next(uppercase.Length)]);  // At least 1 uppercase
+            password.Append(special[random.Next(special.Length)]);      // At least 1 special char
+
+            // Fill the rest with random characters
+            var allChars = digits + lowercase + uppercase + special;
+            for (int i = 0; i < 4; i++) // Add 4 more random chars
+            {
+                password.Append(allChars[random.Next(allChars.Length)]);
+            }
+
+            // Shuffle the password to randomize position of guaranteed chars
+            var passwordArray = password.ToString().ToCharArray();
+            for (int i = passwordArray.Length - 1; i > 0; i--)
+            {
+                int j = random.Next(i + 1);
+                (passwordArray[i], passwordArray[j]) = (passwordArray[j], passwordArray[i]);
+            }
+
+            return $"Demo{new string(passwordArray)}";
+        }
+    }
+
+    public class DemoRequest
+    {
+        public string Email { get; set; }
+    }
+}

Web/Program.cs

@@ -41,7 +41,15 @@ builder.Services.AddSignalR();
 builder.Services.ConfigureAIAnalysis();
 
 
-
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowSeoSoft", policy =>
+    {
+        policy.WithOrigins("https://seosoft.dk", "https://unabused-terina-wavier.ngrok-free.dev")
+              .AllowAnyMethod()
+              .AllowAnyHeader();
+    });
+});
 
 var app = builder.Build();
 
@@ -65,7 +73,7 @@ app.UseAuthorization();
 
 app.MapRazorPages();
 app.MapControllers();
-
+app.UseCors("AllowSeoSoft");
 
 app.MapControllerRoute(
     name: "page",

Web/Views/Account/Login.cshtml

@@ -1,192 +1,473 @@
 @model Web.ViewModel.AccountVM.LoginViewModel
-
 @{
     ViewData["Title"] = "Login";
     Layout = "~/Views/Shared/_LoginLayout.cshtml";
 }
 
 <style>
-    body {
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
-        height: 100% !important;
+
-        background-repeat: no-repeat;
+    #BannerBackground {
-        background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important
+        font-family: 'Inter', sans-serif;
+        background: linear-gradient(135deg, #000000 0%, #0a0e1a 30%, #000000 70%, #000101 100%);
+        color: white;
+        min-height: 100vh;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 0;
     }
 
-    #rowSectionError {
+    #BannerBackground::before {
-        display: flex;
+        content: '';
-        flex-wrap: nowrap;
+        position: absolute;
-        justify-content: space-around;
+        top: 0;
-        align-items: center;
+        left: 0;
-        align-content: center;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 40%);
+        z-index: 1;
+    }
+
+    /* Floating elements animation */
+    .floating-elements {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        pointer-events: none;
+        overflow: hidden;
+    }
+
+    .floating-element {
+        position: absolute;
+        border-radius: 50%;
+        background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08));
+        animation: float 20s infinite linear;
+    }
+
+        .floating-element:nth-child(1) {
+            width: 100px;
+            height: 100px;
+            top: 10%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+
+        .floating-element:nth-child(2) {
+            width: 60px;
+            height: 60px;
+            top: 70%;
+            right: 10%;
+            animation-delay: -7s;
+        }
+
+        .floating-element:nth-child(3) {
+            width: 80px;
+            height: 80px;
+            bottom: 20%;
+            left: 20%;
+            animation-delay: -14s;
+        }
+
+    @@keyframes float {
+        0%, 100%
+
+    {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0.3;
+    }
+
+    50% {
+        transform: translateY(-20px) rotate(180deg);
+        opacity: 0.6;
+    }
+
+    }
+
+    /* Main login container */
+    .login-container {
+        position: relative;
+        z-index: 10;
         width: 100%;
-        flex-direction: row;
+        max-width: 450px;
+        margin: 0 auto;
+        padding: 0 20px;
     }
 
-    #Errocard {
+    /* Modern glassmorphic login card */
-       
+    .login-card {
-       
+        background: rgba(5, 8, 18, 0.85);
-        box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
+        backdrop-filter: blur(25px) saturate(1.8);
-        -webkit-box-shadow: 0px 0px 20px 2px rgba(20, 101, 230, 1);
+        border: 1px solid rgba(59, 130, 246, 0.2);
-        border-radius: 10px;
+        border-radius: 20px;
-        background-color: transparent;
+        padding: 40px;
-        height: 400px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-        flex-wrap: nowrap;
+        position: relative;
-        align-items: center;
+        overflow: hidden;
-        padding: 87px 50px 0 50px;
-        margin: 150px 0px 0px 0px;
-        color: white;
-        justify-content: flex-start;
     }
 
-  
+        .login-card::before {
-    #boxError{
+            content: '';
-        display: inline;
+            position: absolute;
-        flex-direction: row;
+            top: 0;
-        flex-wrap: nowrap;
+            left: 0;
-        justify-content: space-around;
+            right: 0;
-        align-items: center;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, transparent 30%, rgba(20, 184, 166, 0.04) 70%, rgba(249, 115, 22, 0.02) 100%);
+            border-radius: inherit;
+            z-index: -1;
         }
 
+    /* Login header */
+    .login-header {
+        text-align: center;
+        margin-bottom: 32px;
+    }
 
+    .login-title {
+        font-size: 2.2rem;
+        font-weight: 900;
+        background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 8px;
+        letter-spacing: -0.02em;
+    }
 
+    .login-subtitle {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 1rem;
+        font-weight: 500;
+        margin-bottom: 0;
+    }
 
+    /* Modern form group styling */
+    .form-group {
+        margin-bottom: 24px;
+    }
 
-    @@media (max-width: 792px) {
+    /* Form labels */
+    .form-label {
+        color: rgba(255, 255, 255, 0.8) !important;
+        font-weight: 600 !important;
+        font-size: 0.9rem !important;
+        margin-bottom: 8px !important;
+        display: block !important;
+        letter-spacing: 0.3px !important;
+    }
 
+    /* Modern form control styling */
+    .form-control {
+        background: rgba(255, 255, 255, 0.08) !important;
+        border: 1px solid rgba(255, 255, 255, 0.2) !important;
+        border-radius: 12px !important;
+        color: rgba(255, 255, 255, 0.95) !important;
+        padding: 16px 20px !important;
+        font-size: 1rem !important;
+        font-weight: 500 !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        backdrop-filter: blur(15px);
+        height: 56px !important;
+        line-height: 1.5 !important;
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        outline: none !important;
+        -webkit-appearance: none !important;
+        -moz-appearance: none !important;
+        appearance: none !important;
+    }
 
-        #Errocard {
+        /* Remove autofill styling */
+        .form-control:-webkit-autofill,
+        .form-control:-webkit-autofill:hover,
+        .form-control:-webkit-autofill:focus {
+            -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
+            -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
+            transition: background-color 5000s ease-in-out 0s !important;
+        }
+
+        .form-control:focus {
+            background: rgba(255, 255, 255, 0.12) !important;
+            border-color: rgba(59, 130, 246, 0.6) !important;
+            color: rgba(255, 255, 255, 1) !important;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 30px rgba(59, 130, 246, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+            transform: translateY(-2px);
+            outline: none !important;
+        }
+
+        .form-control::placeholder {
+            color: rgba(255, 255, 255, 0.4) !important;
+            font-weight: 400 !important;
+            font-size: 0.95rem !important;
+        }
+
+    /* Modern checkbox styling */
+    .form-check {
+        margin: 20px 0 24px 0;
         display: flex;
-            flex-direction: column;
-            flex-wrap: wrap;
-            justify-content: center;
         align-items: center;
-            align-content: center;
+        gap: 10px;
-            height: 70vh;
-            padding: 70 20px 0 20px;
     }
 
-        #boxError {
+    .form-check-input {
-            width: auto;
+        background: rgba(255, 255, 255, 0.08) !important;
-            height: 30%;
+        border: 1px solid rgba(255, 255, 255, 0.2) !important;
-            margin: 5px;
+        border-radius: 6px !important;
-        }
+        width: 18px !important;
+        height: 18px !important;
+        transition: all 0.3s ease !important;
+        cursor: pointer !important;
+        outline: none !important;
     }
 
-    @@media (max-width: 800px) {
+        .form-check-input:checked {
-
+            background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%) !important;
-
+            border-color: rgba(59, 130, 246, 0.6) !important;
-        #Errocard {
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
-            display: flex;
-            flex-direction: column;
-            flex-wrap: nowrap;
-            justify-content: center;
-            align-items: center;
-            align-content: center;
-            height: 70vh;
-            padding: 0 20px 0 20px;
         }
 
-        #boxError {
+        .form-check-input:focus {
-            width: auto;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
-            height: 30%;
+            outline: none !important;
-            margin: 5px;
-        }
         }
 
-
+    .form-check-label {
-    @@media (max-width: 1300px) {
+        color: rgba(255, 255, 255, 0.8) !important;
-
+        font-size: 0.9rem !important;
-
+        font-weight: 500 !important;
-        #Errocard {
+        cursor: pointer !important;
-           
+        margin-bottom: 0 !important;
-            box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
+        user-select: none !important;
-            -webkit-box-shadow: 0px 0px 20px 2px rgba(20,101,230,1);
-            border-radius: 10px;
-            background-color: transparent;
-            height: 400px;
-            flex-wrap: nowrap;
-            align-items: center;
-            padding: 89px 0px 0 0px;
-            margin: 50px 0px 0px 0px;
-            color: white;
     }
 
-        #boxError {
+    /* Modern submit button */
-            width: auto;
+    .login-submit-btn {
-            margin: 5px;
+        background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, var(--bs-primary-text-emphasis) 100%) !important;
+        border: none !important;
+        border-radius: 12px !important;
+        color: white !important;
+        font-weight: 700 !important;
+        font-size: 1.1rem !important;
+        padding: 16px 32px !important;
+        width: 100% !important;
+        text-transform: uppercase !important;
+        letter-spacing: 0.5px !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        cursor: pointer !important;
+        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
+        outline: none !important;
     }
 
-
+        .login-submit-btn::before {
-        #boxBanner {
+            content: '';
-            display: block;
+            position: absolute;
-            width: auto;
+            top: 0;
-            margin: 5px;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.6s ease;
         }
 
+        .login-submit-btn:hover::before {
+            left: 100%;
+        }
+
+        .login-submit-btn:hover {
+            transform: translateY(-3px) !important;
+            box-shadow: 0 12px 40px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.15) !important;
+            background: linear-gradient(135deg, #2563eb 0%, #059669 50%, #ea580 100%) !important;
+            outline: none !important;
+        }
+
+        .login-submit-btn:active {
+            transform: translateY(-1px) !important;
+            outline: none !important;
+        }
+
+        .login-submit-btn:focus {
+            outline: none !important;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 12px 40px rgba(59, 130, 246, 0.3) !important;
+        }
+
+    /* Validation messages styling */
+    .text-danger {
+        color: rgba(239, 68, 68, 0.9) !important;
+        font-size: 0.85rem !important;
+        font-weight: 500 !important;
+        margin-top: 6px !important;
+        display: block !important;
+    }
+
+    .validation-summary-errors {
+        background: rgba(239, 68, 68, 0.1) !important;
+        border: 1px solid rgba(239, 68, 68, 0.3) !important;
+        border-radius: 8px !important;
+        padding: 12px 16px !important;
+        margin-bottom: 24px !important;
+        backdrop-filter: blur(10px);
+    }
+
+        .validation-summary-errors ul {
+            margin: 0 !important;
+            padding-left: 0 !important;
+            list-style: none !important;
+        }
+
+        .validation-summary-errors li {
+            color: rgba(239, 68, 68, 0.9) !important;
+            font-size: 0.85rem !important;
+            font-weight: 500 !important;
+            margin-bottom: 4px !important;
+        }
+
+            .validation-summary-errors li:before {
+                content: '⚠ ';
+                margin-right: 6px;
+            }
+
+    /* Notification styling */
+    .alert {
+        background: rgba(59, 130, 246, 0.1) !important;
+        border: 1px solid rgba(59, 130, 246, 0.3) !important;
+        border-radius: 12px !important;
+        color: rgba(255, 255, 255, 0.9) !important;
+        backdrop-filter: blur(15px);
+        margin-bottom: 20px;
+    }
+
+    /* Responsive design */
+    @@media (max-width: 768px) {
+        #BannerBackground
+
+    {
+        padding: 20px 0;
+        min-height: calc(100vh - 40px);
+    }
+
+    .login-card {
+        padding: 32px 24px;
+        border-radius: 16px;
+        margin: 0 16px;
+    }
+
+    .login-title {
+        font-size: 1.8rem;
+    }
+
+    .login-subtitle {
+        font-size: 0.9rem;
     }
 
     .form-control {
-        display: block;
+        padding: 14px 16px !important;
-        width: 100%;
+        font-size: 0.95rem !important;
-        height: calc(1.5em + 0.75rem + 2px);
+        height: 52px !important;
-        padding: 0.375rem 0.75rem;
+    }
-        font-size: 1rem;
+
-        font-weight: 400;
+    .login-submit-btn {
-        line-height: 1.5;
+        padding: 14px 28px !important;
-        color: #495057;
+        font-size: 1rem !important;
-        background-color: #73494900 !important;
+    }
-        background-clip: padding-box;
+
-        border: 1px solid #115caf;
+    .floating-element {
-        border-radius: 0.25rem;
+        display: none;
-        -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+    }
-        transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+
-        -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
-        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
-        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+    @@media (max-width: 480px) {
+        .login-card
+
+    {
+        padding: 24px 20px;
+        margin: 0 12px;
+    }
+
+    .login-title {
+        font-size: 1.6rem;
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-control {
+        padding: 12px 14px !important;
+        font-size: 0.9rem !important;
+        height: 48px !important;
+    }
+
+    .login-submit-btn {
+        padding: 12px 24px !important;
+        font-size: 0.95rem !important;
+    }
+
     }
 </style>
 
-
-
 <div class="d-flex flex-column" id="BannerBackground">
+    <!-- Floating background elements -->
+    <div class="floating-elements">
+        <div class="floating-element"></div>
+        <div class="floating-element"></div>
+        <div class="floating-element"></div>
+    </div>
 
-    <!-- FOR DEMO PURPOSE -->
+    <!-- Main login section -->
     <section class="text-white">
         <div class="container py-1">
+            <div class="login-container">
+                <div class="login-card">
+                    <!-- Login header -->
+                    <div class="login-header">
+                        <h1 class="login-title">Welcome Back</h1>
+                        <p class="login-subtitle">Sign in to your account to continue</p>
+                    </div>
+
+                    <!-- Notifications -->
                     <partial name="_Notification" />
 
-            <div class="" id="Errocard">
+                    <!-- Login form -->
-                <div class="col-lg-6 col-md-6 offset-md-3 offset-lg-3  col-sm-12">
                     <form asp-action="Login">
-                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+                        <div asp-validation-summary="ModelOnly" class="text-danger validation-summary-errors"></div>
-                        <div class="form-floating mb-3">
+
-                            <input asp-for="Email" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+                        <div class="form-group">
-                            <label for="floatingInput">Email address</label>
+                            <label asp-for="Email" class="form-label">Email Address</label>
+                            <input asp-for="Email" type="email" class="form-control" placeholder="Enter your email address">
                             <span asp-validation-for="Email" class="text-danger"></span>
                         </div>
-                        <div class="form-floating">
+
-                            <input type="password" asp-for="Password" class="form-control" id="floatingPassword" placeholder="Password">
+                        <div class="form-group">
-                            <label for="floatingPassword">Password</label>
+                            <label asp-for="Password" class="form-label">Password</label>
+                            <input asp-for="Password" type="password" class="form-control" placeholder="Enter your password">
                             <span asp-validation-for="Password" class="text-danger"></span>
                         </div>
-                        <div class="form-group form-check mt-2">
+
-                            <label class="form-check-label">
+                        <div class="form-check">
-                                <input class="form-check-input" asp-for="RememberMe" /> @Html.DisplayNameFor(model => model.RememberMe)
+                            <input class="form-check-input" asp-for="RememberMe" type="checkbox" id="rememberMe">
+                            <label class="form-check-label" for="rememberMe">
+                                @Html.DisplayNameFor(model => model.RememberMe)
                             </label>
                         </div>
+
                         <div class="form-group">
-                            <input type="submit" value="Login" class="btn btn-outline-info btn-sm" />
+                            <button type="submit" class="btn login-submit-btn">
+                                Sign In
+                            </button>
                         </div>
                     </form>
-
                 </div>
-             
             </div>
-
-
         </div>
     </section>
-
 </div>
 
 @section Scripts {

Web/Views/Home/Index.cshtml

@@ -3,37 +3,198 @@
     ViewData["Title"] = "Home Page";
 }
 
+<style>
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+    #MainContent {
+        background: #000000;
+        font-family: 'Inter', sans-serif;
+        position: relative;
+        min-height: 60vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 0;
+    }
+
+    #MainContent::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 35%), radial-gradient(circle at 75% 75%, rgba(20, 184, 166, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 40%), linear-gradient(135deg, #010203 0%, #050812 30%, #010203 70%, #000101 100%);
+        z-index: 0;
+    }
+
+    .tech-pattern-main {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 2px), radial-gradient(circle at 70% 70%, rgba(20, 184, 166, 0.06) 0%, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
+        background-size: 120px 120px, 150px 150px, 60px 60px, 60px 60px;
+        z-index: 1;
+    }
+
+    .container-fluid {
+        position: relative;
+        z-index: 10;
+    }
+
+    .main-content-wrapper {
+        background: rgba(59, 130, 246, 0.05);
+        backdrop-filter: blur(25px);
+        border: 1px solid rgba(59, 130, 246, 0.15);
+        border-radius: 24px;
+        padding: 40px 40px;
+        text-align: center;
+        max-width: 900px;
+        margin: 0 auto;
+        transition: all 0.3s ease;
+        position: relative;
+        z-index: 10;
+    }
+
+        .main-content-wrapper:hover {
+            background: rgba(59, 130, 246, 0.08);
+            border-color: rgba(59, 130, 246, 0.25);
+            transform: translateY(-5px);
+            box-shadow: 0 25px 50px rgba(59, 130, 246, 0.1);
+        }
+
+    .main-title {
+        font-size: clamp(1.5rem, 3vw, 2.5rem);
+        font-weight: 900;
+        line-height: 1.2;
+        margin-bottom: 20px;
+        letter-spacing: -0.02em;
+        color: #ffffff !important;
+    }
+
+    .main-content {
+        font-size: 1.2rem;
+        color: rgba(255, 255, 255, 0.9) !important;
+        line-height: 1.7;
+        margin-bottom: 30px;
+        position: relative;
+        z-index: 10;
+    }
+
+    .btn-main {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        color: white !important;
+        padding: 16px 40px;
+        border: 1px solid rgba(59, 130, 246, 0.3);
+        border-radius: 12px;
+        font-weight: 700;
+        font-size: 1.1rem;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.3s ease;
+        box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        position: relative;
+        z-index: 10;
+    }
+
+        .btn-main:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 30px rgba(30, 41, 59, 0.6);
+            color: white !important;
+            text-decoration: none;
+            background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+            border-color: rgba(59, 130, 246, 0.5);
+        }
 
    
    
-    <!-- FOR DEMO PURPOSE -->
+
+    @@media (max-width: 768px) {
+        #MainContent
+
+    {
+        padding: 30px 20px;
+    }
+
+    .main-content-wrapper {
+        padding: 30px 25px;
+        margin: 0 15px;
+        max-width: 90%;
+    }
+
+    .main-title {
+        font-size: 16px;
+        margin-bottom: 20px;
+    }
+
+    .main-content {
+        font-size: 1rem;
+        margin-bottom: 25px;
+    }
+
+    .btn-main {
+        padding: 14px 32px;
+        font-size: 1rem;
+        width: 100%;
+        max-width: 250px;
+    }
+
+    .floating-elements-main {
+        display: none;
+    }
+
+    
+
+    @@media (max-width: 480px) {
+        .main-content-wrapper
+
+    {
+        padding: 25px 20px;
+        margin: 0 10px;
+        max-width: 95%;
+    }
+
+    .main-title {
+        font-size: 16px;
+        margin-bottom: 15px;
+    }
+
+    .main-content {
+        font-size: 0.9rem;
+        margin-bottom: 20px;
+    }
+
+    .btn-main {
+        padding: 12px 28px;
+        font-size: 0.9rem;
+    }
+
+    }
+</style>
+
 <section id="MainContent" class="text-white">
-        <div class="container py-1">
+    <div class="tech-pattern-main"></div>
-            @*   <div class="col-12" id="boxBanner">
-            <h1 class="display-6 text-white font-weight-bold">@Model.Description.ToUpper()</h1>
-            </div> *@
-            <div id="rowSectionMain">
-
-                <div class="col-lg-12" id="boxMain">
-                    <h4 class="font-weight-bold text-white">@Model.Title.ToUpper()</h4>
-                    
-
-                    @*   <p class="fst-italic text-muted">@Html.Raw(Model.Content) <a class="text-primary" href="@Model.Sitecopyright" target="_blank">SeoSoft</a></p> *@
-                    <p class="text-white">@Html.Raw(Model.Content)</p>
-                <a href="#" class="btn btn-sm mt-1" id="HomeButon"> Contact</a>
 
+    <div class="floating-elements-main">
+        <div class="floating-element-main"></div>
+        <div class="floating-element-main"></div>
+        <div class="floating-element-main"></div>
     </div>
 
+    <div class="container-fluid py-1">
+        <div class="main-content-wrapper">
+            <h4 class="main-title">@Model.Title.ToUpper()</h4>
+            <p class="main-content">@Html.Raw(Model.Content)</p>
+            <a href="#" class="btn-main">Contact</a>
         </div>
     </div>
-    </section>
+</section>
-
-
-
 
 @section Scripts {
-
-
     @{
         <partial name="_ValidationScriptsPartial" />
     }

Web/Views/Shared/Components/Address/Default.cshtml

@@ -4,7 +4,7 @@
 
 
 
-    <div class="col-lg-2 col-md-6">
+    <div>
         <h5 class="text-white mb-3">Address</h5>
         @foreach (var item in Model.Take(1))
         {
@@ -20,7 +20,7 @@
             </p>
         }
     </div>
-    <div class="col-lg-2 col-md-6">
+    <div>
         <h5 class="text-white mb-3">Contact</h5>
         @foreach (var item in Model.Take(1))
         {

Web/Views/Shared/Components/Banner/Default.cshtml

@@ -1,31 +1,446 @@
 @model Banner
 
-<div class="d-flex flex-column" id="BannerBackground">
+<style>
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
-    <!-- FOR DEMO PURPOSE -->
+    * {
-    <section class="hero text-white">
+        margin: 0;
-        <div class="container py-1">
+        padding: 0;
-          @*   <div class="col-12" id="boxBanner">
+        box-sizing: border-box;
-                <h1 class="display-6 text-white font-weight-bold">@Model.Description.ToUpper()</h1>
+    }
-            </div> *@
-            <div id="rowSectionBanner">
 
-                <div class="col-lg-6" id="boxBanner">
+    body {
-                    <h4 class="display-6 font-weight-bold" id="BtnColor">@Model.Title.ToUpper()</h4>
+        font-family: 'Inter', sans-serif;
-                    <h6 class="text-white font-weight-bold">@Model.Description.ToUpper()</h6>
+        background: #000000;
+        color: white;
+        line-height: 1.6;
+    }
 
-                    @*   <p class="fst-italic text-muted">@Html.Raw(Model.Content) <a class="text-primary" href="@Model.Sitecopyright" target="_blank">SeoSoft</a></p> *@
+    .page-container {
-                    <p class="text-white">@Html.Raw(Model.Content)</p>
+        min-height: 100vh;
-                    <a href="@Model.LinkUrl" class="btn btn-sm mt-1" id="BannerButon"> Contact <i class="bi bi-ui-checks"></i></a>
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
+
+        .page-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.08) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 40%), linear-gradient(135deg, #010203 0%, #050812 30%, #010203 70%, #000101 100%);
+            z-index: 0;
+        }
+
+    .tech-pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        
+        background-size: 100px 100px, 130px 130px, 50px 50px, 50px 50px;
+        z-index: 1;
+    }
+
+    .hero-section {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 60px 24px;
+        position: relative;
+        z-index: 10;
+    }
+
+    .hero-content {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+        gap: 40px;
+        align-items: center;
+        min-height: 80vh;
+        width: 100%;
+        text-align: center;
+    }
+
+    @@media (min-width: 1200px) {
+        .hero-content
+
+    {
+        gap: 45px;
+    }
+
+    .description-cards {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+        max-width: 900px;
+        margin: 0 auto 32px auto;
+    }
+
+    .hero-title {
+        font-size: clamp(2.5rem, 4vw, 4.5rem);
+    }
+
+    }
+
+    @@media (min-width: 1025px) and (max-width: 1199px) {
+        .hero-content
+
+    {
+        gap: 40px;
+    }
+
+    .description-cards {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 18px;
+        max-width: 800px;
+        margin: 0 auto 32px auto;
+    }
+
+    .hero-title {
+        font-size: clamp(2.2rem, 4vw, 4rem);
+    }
+
+    }
+
+    .left-column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        order: 1;
+    }
+
+    .right-column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        order: 2;
+    }
+
+    .hero-title {
+        font-size: clamp(1.5rem, 4vw, 4rem);
+        font-weight: 900;
+        line-height: 1.1;
+        margin-bottom: 16px;
+        letter-spacing: -0.02em;
+        color: #ffffff;
+        text-align: center;
+    }
+
+    .title-accent {
+        display: block;
+        background: linear-gradient(135deg, #3b82f6 0%, #147bb8 50%, #f97316 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .hero-description {
+        display: none;
+    }
+
+    .description-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 16px;
+        margin-bottom: 32px;
+        max-width: 100%;
+    }
+
+    .description-card {
+        background: rgba(59, 130, 246, 0.08);
+        backdrop-filter: blur(15px);
+        border: 1px solid rgba(59, 130, 246, 0.2);
+        border-radius: 10px;
+        padding: 12px 16px;
+        transition: all 0.3s ease;
+        font-size: 0.85rem;
+        color: rgba(255, 255, 255, 0.9);
+        line-height: 1.4;
+    }
+
+        .description-card:hover {
+            background: rgba(59, 130, 246, 0.12);
+            border-color: rgba(59, 130, 246, 0.3);
+            transform: translateY(-1px);
+        }
+
+        .description-card:nth-child(2n) {
+            background: rgba(20, 184, 166, 0.08);
+            border-color: rgba(20, 184, 166, 0.2);
+        }
+
+            .description-card:nth-child(2n):hover {
+                background: rgba(20, 184, 166, 0.12);
+                border-color: rgba(20, 184, 166, 0.3);
+            }
+
+    .btn-primary {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        color: white !important;
+        padding: 16px 40px;
+        border: 1px solid rgba(59, 130, 246, 0.3);
+        border-radius: 12px;
+        font-weight: 700;
+        font-size: 1.1rem;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.3s ease;
+        box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        position: relative;
+        z-index: 10;
+    }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
+            color: white;
+            text-decoration: none;
+        }
+
+    .animation-container {
+        background: transparent;
+        border: none;
+        padding: 30px;
+        transition: all 0.3s ease;
+        max-width: 600px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+        .animation-container:hover {
+            background: transparent;
+            border: none;
+            transform: none;
+            box-shadow: none;
+        }
+
+    dotlottie-player {
+        width: 100%;
+        height: auto;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .floating-elements {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        pointer-events: none;
+    }
+
+    
+
+   
+
+    @@media (max-width: 1024px) {
+        .hero-content
+
+    {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+        gap: 35px;
+    }
+
+    .hero-section {
+        padding: 40px 20px;
+    }
+
+    .hero-title {
+        font-size: clamp(2rem, 5vw, 3.5rem);
+        text-align: center;
+    }
+
+    .description-cards {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 14px;
+        padding: 0 20px;
+    }
+
+    .animation-container {
+        max-width: 500px;
+        margin: 0 auto;
+    }
+
+    .left-column,
+    .right-column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .left-column {
+        order: 1;
+    }
+
+    .right-column {
+        order: 2;
+    }
+
+    }
+
+    @@media (max-width: 768px) {
+        .page-container
+
+    {
+        padding: 20px 15px;
+    }
+
+    .hero-section {
+        padding: 20px 0;
+    }
+
+    .hero-content {
+        gap: 20px;
+    }
+
+    .hero-title {
+        font-size: clamp(1.4rem, 5vw, 2.2rem);
+        margin-bottom: 15px;
+    }
+
+    .description-cards {
+        grid-template-columns: 1fr;
+        gap: 12px;
+        margin-bottom: 20px;
+        padding: 0 10px;
+    }
+
+    .btn-primary {
+        padding: 12px 24px;
+        font-size: 0.9rem;
+    }
+
+    .animation-container {
+        padding: 15px;
+        min-height: 220px;
+        max-width: 350px;
+        margin: 0 auto;
+    }
+
+    dotlottie-player {
+        width: 100% !important;
+        height: auto !important;
+        min-height: 180px !important;
+        max-width: 320px !important;
+    }
+
+    }
+
+    @@media (max-width: 480px) {
+        .page-container
+
+    {
+        padding: 15px 10px;
+    }
+
+    .hero-section {
+        padding: 15px 0;
+    }
+
+    .hero-content {
+        gap: 15px;
+    }
+
+    .hero-title {
+        font-size: clamp(1.2rem, 6vw, 2rem);
+        margin-bottom: 12px;
+    }
+
+    .description-cards {
+        grid-template-columns: 1fr;
+        gap: 10px;
+        margin-bottom: 15px;
+        padding: 0 5px;
+    }
+
+    .description-card {
+        padding: 10px 14px;
+        font-size: 0.8rem;
+    }
+
+    .btn-primary {
+        padding: 10px 20px;
+        font-size: 0.8rem;
+    }
+
+    .animation-container {
+        padding: 10px;
+        min-height: 180px;
+        max-width: 280px;
+        margin: 0 auto;
+    }
+
+    dotlottie-player {
+        width: 100% !important;
+        height: auto !important;
+        min-height: 160px !important;
+        max-width: 260px !important;
+    }
+
+    .floating-elements {
+        display: none;
+    }
+
+    }
+</style>
+
+<div class="page-container">
+    <div class="tech-pattern"></div>
+
+    <div class="floating-elements">
+        <div class="floating-element"></div>
+        <div class="floating-element"></div>
+        <div class="floating-element"></div>
     </div>
-                <div class="col-lg-6" id="boxBanner">
+
+    <div class="hero-section">
+        <div class="hero-content">
+            <div class="left-column">
+                <h1 class="hero-title">
+                    @Model.Title.ToUpper()
+                    <span class="title-accent">@Model.Description.ToUpper()</span>
+                </h1>
+
+                <div class="description-cards">
+                  
+                    <div class="description-card">
+                     @Html.Raw(Model.Content)
+                    </div>
+                  
+                </div>
+
+                <a href="tel:+4561777336" class="btn-primary">
+                    Request Demo
+                </a>
+
+            </div>
+
+            <div class="right-column">
+                <div class="animation-container">
                     <script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
-                    <dotlottie-player src="@Model.ImageUrl" class="img-fluid" speed="1" style="width: auto; height: auto;" direction="1" playMode="normal" loop autoplay></dotlottie-player>
+                    <dotlottie-player src="@Model.ImageUrl"
+                                      speed="1"
+                                      direction="1"
+                                      playMode="normal"
+                                      loop
+                                      autoplay>
+                    </dotlottie-player>
                 </div>
             </div>
         </div>
-    </section>
-
     </div>
-
+</div>
-

Web/Views/Shared/Components/Footer/Default.cshtml

@@ -1,97 +1,524 @@
 @model Footer
 
+<style>
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+    #Background {
+        font-family: 'Inter', sans-serif;
+        background: linear-gradient(135deg, #000000 0%, #0a0e1a 30%, #000000 70%, #000101 100%);
+        color: white;
+        min-height: 100vh;
+        position: relative;
+        overflow: hidden;
+    }
+
+    #Background::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 40%);
+        z-index: 1;
+    }
+
+    /* Hero Section Styles */
+    .glass-hero-section {
+        position: relative;
+        z-index: 10;
+        padding: 80px 0;
+        background: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+    }
+
+    .glass-hero-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 60px;
+        align-items: center;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 24px;
+    }
+
+    .glass-hero-text h4 {
+        font-size: clamp(2rem, 4vw, 3.5rem);
+        font-weight: 900;
+        line-height: 1.1;
+        margin-bottom: 24px;
+        letter-spacing: -0.02em;
+        background: linear-gradient(135deg, #3b82f6 0%, #147bb8 50%, #f97316 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .glass-hero-text p {
+        font-size: 1.1rem;
+        line-height: 1.7;
+        color: rgba(255, 255, 255, 0.85);
+        margin-bottom: 16px;
+    }
+
+    .glass-hero-text .fst-italic {
+        font-size: 0.95rem;
+        color: rgba(255, 255, 255, 0.6);
+        font-style: italic;
+        margin-top: 24px;
+    }
+
+    .glass-hero-animation {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
 
        
 
+    dotlottie-player {
+        width: 100%;
+        max-width: 400px;
+        height: auto;
+    }
+
+    /* Footer Styles */
+    .glass-footer-container {
+        position: relative;
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(20px);
+        border-top: 1px solid rgba(59, 130, 246, 0.15);
+        padding: 60px 0 0 0;
+    }
+
+    .glass-footer-wrapper {
+        max-width: 1200px;
+        margin: 0 auto;
+      
+    }
+
+    .glass-footer-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 40px;
+        margin-bottom: 50px;
+    }
+
+    /* Glassmorphic cards restored */
+    .glass-footer-section {
+        background: rgba(59, 130, 246, 0.06);
+        backdrop-filter: blur(15px);
+        border: 1px solid rgba(59, 130, 246, 0.15);
+        border-radius: 16px;
+        padding: 32px;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .glass-footer-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #3b82f6, #14b8a6, #f97316);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .glass-footer-section:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-color: rgba(59, 130, 246, 0.25);
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+        }
+
+            .glass-footer-section:hover::before {
+                opacity: 1;
+            }
+
+        .glass-footer-section:nth-child(even) {
+            background: rgba(20, 184, 166, 0.06);
+            border-color: rgba(20, 184, 166, 0.15);
+        }
+
+            .glass-footer-section:nth-child(even):hover {
+                background: rgba(20, 184, 166, 0.1);
+                border-color: rgba(20, 184, 166, 0.25);
+            }
+
+    .glass-footer-heading {
+        font-size: 1.4rem;
+        font-weight: 700;
+        color: #ffffff;
+        margin-bottom: 20px;
+        position: relative;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+        .glass-footer-heading::after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 0;
+            width: 60px;
+            height: 2px;
+            background: linear-gradient(90deg, #3b82f6, #14b8a6);
+            border-radius: 1px;
+        }
+
+    .glass-footer-section:nth-child(2) .glass-footer-heading::after {
+        background: linear-gradient(90deg, #14b8a6, #f97316);
+    }
+
+    .glass-footer-section:nth-child(3) .glass-footer-heading::after {
+        background: linear-gradient(90deg, #f97316, #3b82f6);
+    }
+
+    /* Style ViewComponent content */
+    .glass-footer-section h5,
+    .glass-footer-section h6 {
+        color: rgba(255, 255, 255, 0.9);
+        font-weight: 600;
+        margin-bottom: 12px;
+        font-size: 1.1rem;
+    }
+
+    .glass-footer-section p,
+    .glass-footer-section span,
+    .glass-footer-section div {
+        color: rgba(255, 255, 255, 0.8);
+        line-height: 1.6;
+        margin-bottom: 8px;
+    }
+
+    .glass-footer-section a {
+        color: rgba(255, 255, 255, 0.75);
+        text-decoration: none;
+        transition: all 0.3s ease;
+        position: relative;
+        padding: 4px 0;
+        display: inline-block;
+    }
+
+        .glass-footer-section a:hover {
+            color: #ffffff;
+            text-decoration: none;
+            padding-left: 10px;
+        }
+
+        .glass-footer-section a::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 2px;
+            background: linear-gradient(90deg, #3b82f6, #14b8a6);
+            transition: width 0.3s ease;
+            border-radius: 1px;
+        }
+
+        .glass-footer-section a:hover::before {
+            width: 6px;
+        }
+
+    /* Special styling for social media links */
+    .glass-footer-section ul {
+        list-style: none;
+        padding: 0;
+        margin: 20px 0 0 0;
+    }
+
+    .glass-footer-section li {
+        margin-bottom: 10px;
+    }
+
+    /* Newsletter input styling */
+    .glass-footer-section input[type="email"],
+    .glass-footer-section input[type="text"] {
+        background: rgba(255, 255, 255, 0.08) !important;
+        border: 1px solid rgba(255, 255, 255, 0.15) !important;
+        border-radius: 8px !important;
+        color: white !important;
+        padding: 12px 16px !important;
+        margin-bottom: 10px !important;
+        width: 100% !important;
+        transition: all 0.3s ease;
+        font-size: 1rem !important;
+    }
+
+        .glass-footer-section input[type="email"]:focus,
+        .glass-footer-section input[type="text"]:focus {
+            background: rgba(255, 255, 255, 0.12) !important;
+            border-color: rgba(59, 130, 246, 0.5) !important;
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.2) !important;
+            outline: none !important;
+        }
+
+    .glass-footer-section input::placeholder {
+        color: rgba(255, 255, 255, 0.5) !important;
+    }
+
+    .glass-footer-section button,
+    .glass-footer-section .btn {
+        background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%) !important;
+        border: none !important;
+        border-radius: 8px !important;
+        color: white !important;
+        padding: 12px 20px !important;
+        font-weight: 600 !important;
+        cursor: pointer !important;
+        transition: all 0.3s ease !important;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        text-decoration: none !important;
+        display: inline-block !important;
+    }
+
+        .glass-footer-section button:hover,
+        .glass-footer-section .btn:hover {
+            transform: scale(1.05) !important;
+            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;
+            color: white !important;
+        }
+
+    /* Footer Bottom with Cards */
+    .glass-footer-bottom {
+        background: rgba(0, 0, 0, 0.8);
+        backdrop-filter: blur(15px);
+        border-top: 1px solid rgba(59, 130, 246, 0.1);
+        padding: 32px 0;
+        margin-top: 40px;
+    }
+
+    .glass-footer-bottom-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 24px;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        text-align: center;
+    }
+
+    .glass-footer-info-card {
+        background: rgba(59, 130, 246, 0.08);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(59, 130, 246, 0.15);
+        border-radius: 12px;
+        padding: 16px 20px;
+        transition: all 0.3s ease;
+    }
+
+        .glass-footer-info-card:hover {
+            background: rgba(59, 130, 246, 0.12);
+            border-color: rgba(59, 130, 246, 0.25);
+            transform: translateY(-2px);
+        }
+
+    .glass-footer-info-text {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 0.95rem;
+        margin: 0;
+        font-weight: 500;
+    }
+
+    .glass-footer-info-label {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 0.8rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 4px;
+        display: block;
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 1024px) {
+        .glass-hero-content
+
+    {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        text-align: center;
+    }
+
+    .glass-footer-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 30px;
+    }
+
+    }
+
+    @@media (max-width: 768px) {
+        .glass-hero-section
+
+    {
+        padding: 60px 0;
+    }
+
+    .glass-hero-content {
+        padding: 0 16px;
+        gap: 30px;
+    }
+
+    .glass-hero-text h4 {
+        font-size: clamp(1.8rem, 5vw, 2.5rem);
+        margin-bottom: 20px;
+    }
+
+    .glass-hero-animation {
+        padding: 24px;
+    }
+
+    .glass-footer-wrapper {
+        padding: 0 16px 32px 16px;
+    }
+
+    .glass-footer-grid {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+
+    .glass-footer-section {
+        padding: 24px;
+    }
+
+    .glass-footer-bottom-content {
+        grid-template-columns: 1fr;
+        gap: 16px;
+        padding: 0 16px;
+    }
+
+    }
+
+    @@media (max-width: 480px) {
+        .glass-hero-section
+
+    {
+        padding: 40px 0;
+    }
+
+    .glass-hero-content {
+        padding: 0 12px;
+        gap: 24px;
+    }
+
+    .glass-hero-text h4 {
+        font-size: clamp(1.5rem, 6vw, 2rem);
+        margin-bottom: 16px;
+    }
+
+    .glass-hero-animation {
+        padding: 16px;
+    }
+
+    .glass-footer-wrapper {
+        padding: 0 12px 24px 12px;
+    }
+
+    .glass-footer-section {
+        padding: 20px;
+    }
+
+    .glass-footer-heading {
+        font-size: 1.2rem;
+        margin-bottom: 16px;
+    }
+
+    }
+</style>
+
 <div class="d-flex flex-column" id="Background">
-
+    <!-- HERO SECTION -->
-    <!-- FOR DEMO PURPOSE -->
+    <section class="glass-hero-section flex-grow-1">
-    <section class="text-white  flex-grow-1">
+        <div class="glass-hero-content">
-        <div class="container py-4">
+            <div class="glass-hero-text">
-            <div id="rowSection">
+                <h4>@Model.Title.ToUpper()</h4>
-                <div class="col-lg-6" id="box">
-                    <h4 class=" font-weight-bold" id="BtnColor">@Model.Title.ToUpper()</h4>
-
                 <p>@Html.Raw(Model.Content)</p>
-                    <p class="fst-italic text-muted">@Model.Sitecopyright</p>
+                <p class="fst-italic">@Model.Sitecopyright</p>
             </div>
-                <div class="col-lg-6" id="box">
+            <div class="glass-hero-animation">
                 <script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
-                    <dotlottie-player src="https://lottie.host/f2df0cd6-fbde-4071-ab90-d9e74a075d5a/ygq5zJ9mzx.json" class="img-fluid" speed="1" style="width: auto; height: auto;" direction="1" playMode="normal" loop autoplay></dotlottie-player>
+                <dotlottie-player src="https://lottie.host/f2df0cd6-fbde-4071-ab90-d9e74a075d5a/ygq5zJ9mzx.json"
-                </div>
+                                  speed="1"
+                                  direction="1"
+                                  playMode="normal"
+                                  loop
+                                  autoplay>
+                </dotlottie-player>
             </div>
         </div>
     </section>
 
-    <!-- FOOTER -->
+    <!-- MODERN FOOTER -->
-    <footer class="w-100 py-4 flex-shrink-0">
+    <footer class="glass-footer-container w-100 flex-shrink-0">
-        <div class="container-fluid">
+        <div class="glass-footer-wrapper">
-            <div class="row justify-content-around">
+            <div class="glass-footer-grid">
+                <!-- Address Section with Card -->
+                <div class="glass-footer-section">
+                    <h3 class="glass-footer-heading">Contact Info</h3>
                     <vc:address></vc:address>
-                <div class="col-lg-2 col-md-6">
+                </div>
+
+                <!-- Navigation Section with Card -->
+                <div class="glass-footer-section">
+                    <h3 class="glass-footer-heading">Quick Links</h3>
                     <vc:navigation-footer></vc:navigation-footer>
                 </div>
 
-                <div class="col-lg-4 col-md-6">
+                <!-- Newsletter Section with Card -->
-                    <h5 class="text-white">Newsletter</h5>
+                <div class="glass-footer-section">
-                   
+                    <h3 class="glass-footer-heading">Newsletter</h3>
                     <vc:subscription></vc:subscription>
-                  @*   <form action="#">
-                        <div class="input-group mb-3">
-                            <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Email" aria-describedby="button-addon2">
-                            <button class="btn" id="BannerButon" type="button">Subscribe</button>
-                        </div>
-                    </form> *@
 
-                        <ul class="list-unstyled text-muted">
+                    <!-- Social Media Section -->
+                    <h6 style="color: rgba(255, 255, 255, 0.9); font-weight: 600; margin: 24px 0 12px 0; font-size: 1.1rem;">Follow Us</h6>
+                    <ul>
                         @foreach (var footerSocialMedia in Model.FooterSocialMedias)
                         {
-                            <li class="nav-item">
+                            <li>
-                                <a id="LinkColor" href="@footerSocialMedia.SocialMedia.Url" target="_blank">@footerSocialMedia.SocialMedia.Name</a>
+                                <a href="@footerSocialMedia.SocialMedia.Url" target="_blank">
+                                    @footerSocialMedia.SocialMedia.Name
+                                </a>
                             </li>
                         }
-                       
                     </ul>
-
                 </div>
             </div>
         </div>
 
-        <div class="container">
+        <!-- Footer Bottom with Cards -->
-            <hr class="border border-primary border-start-0 border-1 opacity-35">
+        <div class="glass-footer-bottom">
-            <div class="row d-flex justify-content-around">
+            <div class="glass-footer-bottom-content">
-                
+                <div class="glass-footer-info-card">
-                <div class="col-lg-2 col-md-3">
+                    <span class="glass-footer-info-label">Designed By</span>
-                    <span class="text-muted">Designed by @Model.CreatedBy</span>
+                    <p class="glass-footer-info-text">@Model.CreatedBy</p>
-                
                 </div>
-                <div class="col-lg-2 col-md-3">
+                <div class="glass-footer-info-card">
-                    <span class="text-muted">Update by @Model.UpdatedBy</span>
+                    <span class="glass-footer-info-label">Updated By</span>
-                
+                    <p class="glass-footer-info-text">@Model.UpdatedBy</p>
                 </div>
+                <div class="glass-footer-info-card">
+                    <span class="glass-footer-info-label">Last Updated</span>
                     @using System.Globalization
-
+                    <p class="glass-footer-info-text">
-                <div class="col-lg-2 col-md-3">
+                        @Model.LastUpdated.ToString("dd-MM-yyyy HH:mm", new CultureInfo("da-DK"))
-                    <span class="text-muted">
+                    </p>
-                        Updated @Model.LastUpdated.ToString("dd-MM-yyyy HH:mm", new CultureInfo("da-DK"))
-                    </span>
                 </div>
-
+                <div class="glass-footer-info-card">
-                <div class="col-lg-2 col-md-3">
+                    <span class="glass-footer-info-label">Owner</span>
-                    <span class=" text-muted">Owner @Model.Owner</span>
+                    <p class="glass-footer-info-text">@Model.Owner</p>
-                 
                 </div>
             </div>
         </div>
     </footer>
 </div>
-
-
-
-
-
-
-
-
-
-   

Web/Views/Shared/_Layout.cshtml

@@ -10,74 +10,605 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: #000000;
+            color: white;
+            position: relative;
+        }
+
+            /* Background Effects */
+            body::before {
+                content: '';
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.03) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.02) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.01) 0%, transparent 40%);
+                z-index: -1;
+            }
+
+        /* Ultra Modern Glassmorphism Navbar */
+        .navbar {
+            background: rgba(5, 8, 18, 0.85) !important;
+            backdrop-filter: blur(25px) saturate(1.8);
+            border-bottom: 1px solid rgba(59, 130, 246, 0.15);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            padding: 14px 0;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+
+            .navbar::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
+                border-radius: inherit;
+                z-index: -1;
+            }
+
+        /* Enhanced Brand Styling */
+        .navbar-brand {
+            font-weight: 900;
+            font-size: 1.5rem;
+            color: #ffffff !important;
+            text-decoration: none;
+            background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.02em;
+            text-transform: uppercase;
+            position: relative;
+            transition: all 0.4s ease;
+        }
+
+            .navbar-brand::after {
+                content: '';
+                position: absolute;
+                bottom: -4px;
+                left: 0;
+                width: 0;
+                height: 2px;
+                background: linear-gradient(90deg, #3b82f6, #14b8a6, #f97316);
+                transition: width 0.4s ease;
+                border-radius: 1px;
+            }
+
+            .navbar-brand:hover::after {
+                width: 100%;
+            }
+
+            .navbar-brand:hover {
+                transform: translateY(-2px) scale(1.02);
+                filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
+            }
+
+        /* Compact Modern Toggle Button */
+        .navbar-toggler {
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            border-radius: 8px;
+            padding: 6px 10px;
+            background: rgba(59, 130, 246, 0.08);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            width: 42px;
+            height: 36px;
+        }
+
+            .navbar-toggler::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+                transition: left 0.5s ease;
+            }
+
+            .navbar-toggler:hover::before {
+                left: 100%;
+            }
+
+            .navbar-toggler:focus {
+                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+                border-color: rgba(59, 130, 246, 0.5);
+            }
+
+            .navbar-toggler:hover {
+                background: rgba(59, 130, 246, 0.15);
+                border-color: rgba(59, 130, 246, 0.5);
+                transform: scale(1.05);
+            }
+
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2859, 130, 246, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+            transition: all 0.3s ease;
+            width: 22px;
+            height: 18px;
+        }
+
+        /* Enhanced Navigation Links */
+        .navbar-nav .nav-link {
+            color: rgba(255, 255, 255, 0.85) !important;
+            font-weight: 500;
+            padding: 8px 14px !important;
+            border-radius: 8px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            margin: 0 3px;
+            position: relative;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(10px);
+            font-size: 0.9rem;
+        }
+
+            .navbar-nav .nav-link::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.1));
+                transition: left 0.5s ease;
+                z-index: -1;
+            }
+
+            .navbar-nav .nav-link:hover::before {
+                left: 100%;
+            }
+
+            .navbar-nav .nav-link:hover {
+                background: rgba(59, 130, 246, 0.15);
+                color: #ffffff !important;
+                transform: translateY(-1px);
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+                border: 1px solid rgba(59, 130, 246, 0.2);
+            }
+
+            .navbar-nav .nav-link.active {
+                background: rgba(59, 130, 246, 0.2);
+                color: #ffffff !important;
+                box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+                border: 1px solid rgba(59, 130, 246, 0.3);
+            }
+
+        /* Modern Account Dropdown */
+        .account-dropdown {
+            position: relative;
+        }
+
+        .account-dropdown-toggle {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08)) !important;
+            border: 1px solid rgba(59, 130, 246, 0.3) !important;
+            color: rgba(255, 255, 255, 0.9) !important;
+            font-weight: 600;
+            border-radius: 8px !important;
+            padding: 8px 14px !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-decoration: none;
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(15px);
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+            font-size: 0.85rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+            .account-dropdown-toggle::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+                transition: left 0.6s ease;
+            }
+
+            .account-dropdown-toggle:hover::before {
+                left: 100%;
+            }
+
+            .account-dropdown-toggle:hover {
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18)) !important;
+                border-color: rgba(59, 130, 246, 0.5) !important;
+                color: #ffffff !important;
+                transform: translateY(-2px);
+                box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
+            }
+
+            .account-dropdown-toggle:focus {
+                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+            }
+
+            .account-dropdown-toggle::after {
+                border: none !important;
+                content: '\f078' !important;
+                font-family: 'Font Awesome 6 Free' !important;
+                font-weight: 900 !important;
+                font-size: 0.7rem !important;
+                margin-left: 4px !important;
+                transition: transform 0.3s ease !important;
+            }
+
+            .account-dropdown-toggle[aria-expanded="true"]::after {
+                transform: rotate(180deg) !important;
+            }
+
+        .account-icon {
+            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        /* Modern Dropdown Menu */
+        .dropdown-menu {
+            background: rgba(5, 8, 18, 0.95) !important;
+            backdrop-filter: blur(25px) saturate(1.8) !important;
+            border: 1px solid rgba(59, 130, 246, 0.2) !important;
+            border-radius: 12px !important;
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1) !important;
+            padding: 8px !important;
+            margin-top: 8px !important;
+            min-width: 240px !important;
+            animation: dropdownFadeIn 0.3s ease-out;
+        }
+
+        @@keyframes dropdownFadeIn {
+            from
+
+        {
+            opacity: 0;
+            transform: translateY(-10px) scale(0.95);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+
+        }
+
+        .dropdown-menu::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 30%, rgba(20, 184, 166, 0.03) 70%, rgba(249, 115, 22, 0.02) 100%);
+            border-radius: inherit;
+            z-index: -1;
+        }
+
+        /* User Info in Dropdown */
+        .user-info {
+            background: rgba(59, 130, 246, 0.1) !important;
+            border: 1px solid rgba(59, 130, 246, 0.2) !important;
+            border-radius: 8px !important;
+            padding: 12px !important;
+            margin-bottom: 8px !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+        }
+
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            font-weight: 700;
+            color: white;
+            flex-shrink: 0;
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+        }
+
+        .user-details h6 {
+            color: rgba(255, 255, 255, 0.95) !important;
+            font-weight: 600 !important;
+            margin: 0 !important;
+            font-size: 0.9rem !important;
+        }
+
+        .user-details small {
+            color: rgba(255, 255, 255, 0.6) !important;
+            font-size: 0.75rem !important;
+            text-transform: uppercase !important;
+            letter-spacing: 0.5px !important;
+            font-weight: 500 !important;
+        }
+
+        .dropdown-header {
+            color: rgba(255, 255, 255, 0.7) !important;
+            font-weight: 600 !important;
+            font-size: 0.75rem !important;
+            text-transform: uppercase !important;
+            letter-spacing: 0.5px !important;
+            padding: 8px 12px 4px 12px !important;
+            margin-bottom: 4px !important;
+        }
+
+        .dropdown-item {
+            color: rgba(255, 255, 255, 0.85) !important;
+            font-weight: 500 !important;
+            padding: 10px 12px !important;
+            border-radius: 8px !important;
+            transition: all 0.3s ease !important;
+            margin: 2px 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+            font-size: 0.85rem !important;
+            position: relative !important;
+            overflow: hidden !important;
+        }
+
+            .dropdown-item::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.1));
+                transition: left 0.5s ease;
+                z-index: -1;
+            }
+
+            .dropdown-item:hover::before {
+                left: 100%;
+            }
+
+            .dropdown-item:hover {
+                background: rgba(59, 130, 246, 0.15) !important;
+                color: #ffffff !important;
+                transform: translateX(4px) !important;
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
+            }
+
+            .dropdown-item:focus {
+                background: rgba(59, 130, 246, 0.2) !important;
+                color: #ffffff !important;
+                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
+            }
+
+            .dropdown-item.danger-item {
+                color: rgba(239, 68, 68, 0.9) !important;
+            }
+
+                .dropdown-item.danger-item::before {
+                    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08), rgba(239, 68, 68, 0.1));
+                }
+
+                .dropdown-item.danger-item:hover {
+                    background: rgba(239, 68, 68, 0.15) !important;
+                    color: rgba(255, 255, 255, 0.95) !important;
+                    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
+                }
+
+            .dropdown-item.admin-item {
+                color: rgba(20, 184, 166, 0.9) !important;
+            }
+
+                .dropdown-item.admin-item::before {
+                    background: linear-gradient(90deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.08), rgba(20, 184, 166, 0.1));
+                }
+
+                .dropdown-item.admin-item:hover {
+                    background: rgba(20, 184, 166, 0.15) !important;
+                    color: rgba(255, 255, 255, 0.95) !important;
+                    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2) !important;
+                }
+
+        .dropdown-divider {
+            border-color: rgba(59, 130, 246, 0.2) !important;
+            margin: 8px 0 !important;
+        }
+
+        /* Sign In Button for unauthenticated users */
+        .btn-outline-info.signin-btn {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08));
+            border: 1px solid rgba(59, 130, 246, 0.4);
+            color: rgba(255, 255, 255, 0.9) !important;
+            font-weight: 600;
+            border-radius: 8px;
+            padding: 8px 14px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-decoration: none;
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(15px);
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+            font-size: 0.85rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+            .btn-outline-info.signin-btn:hover {
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18));
+                border-color: rgba(59, 130, 246, 0.6);
+                color: #ffffff !important;
+                transform: translateY(-2px);
+                box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
+            }
+
+        /* Icon styling */
+        .dropdown-item i {
+            width: 16px;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        /* Smooth Navbar Scroll Effect */
+        .navbar.scrolled {
+            background: rgba(2, 4, 12, 0.95) !important;
+            backdrop-filter: blur(30px) saturate(2);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(59, 130, 246, 0.08);
+            padding: 10px 0;
+        }
+
+        /* Responsive Design */
+        @@media (max-width: 768px) {
+            .navbar
+
+        {
+            padding: 10px 10px;
+        }
+
+        .navbar-brand {
+            font-size: 1.3rem;
+        }
+
+        .navbar-collapse {
+            background: rgba(5, 8, 18, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 12px;
+            margin-top: 12px;
+            padding: 16px;
+            border: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .dropdown-menu {
+            min-width: 200px !important;
+            margin-top: 4px !important;
+        }
+
+        .account-dropdown-toggle {
+            padding: 6px 12px !important;
+            font-size: 0.8rem;
+        }
+
+        .user-avatar {
+            width: 28px;
+            height: 28px;
+            font-size: 0.8rem;
+        }
+
+        .user-details h6 {
+            font-size: 0.8rem !important;
+        }
+
+        .user-details small {
+            font-size: 0.7rem !important;
+        }
+
+        }
+
+        /* Ultra smooth collapse animation */
+        .navbar-collapse {
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .collapsing {
+            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+    </style>
+
+    <script>
+        // Add scroll effect to navbar
+        window.addEventListener('scroll', function() {
+            const navbar = document.querySelector('.navbar');
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        });
+    </script>
 </head>
 <body>
     <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light shadow-lg">
+        <nav class="navbar navbar-expand-sm navbar-toggleable-sm">
             <div class="container-fluid">
-                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online survey</a>
+                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online Survey</a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon text-white"></span>
+                    <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
                         <vc:navigation></vc:navigation>
-
                     </ul>
                     <ul class="navbar-nav">
                         @if (User.Identity.IsAuthenticated)
                         {
-                            <li class="nav-item text-white">
+                            <li class="nav-item dropdown account-dropdown">
-                              
+                                <button class="btn dropdown-toggle account-dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <span class="badge mt-3">Hi @User.Identity.Name</span> 
+                                    <i class="bi bi-person-circle account-icon"></i>
-                              
+                                    <span>Account</span>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li class="user-info">
+                                        <div class="user-avatar">
+                                            @(User.Identity.Name?.Substring(0, 1).ToUpper() ?? "U")
+                                        </div>
+                                        <div class="user-details">
+                                            <h6>@User.Identity.Name</h6>
+                                            <small>Account Holder</small>
+                                        </div>
                                     </li>
-                            <li class="nav-item text-white m-2">
+                                    <li><hr class="dropdown-divider"></li>
-
+                                    <li><h6 class="dropdown-header">Actions</h6></li>
-                                <a asp-controller="Admin" asp-action="Index" asp-area="Admin" class="btn btn-outline-info btn-sm " id="BannerButton">
+                                    <li>
-                                   @*  <span class="text-white navbar-text">Admin Dashboard</span> *@
+                                        <a class="dropdown-item admin-item" asp-controller="Admin" asp-action="Index" asp-area="Admin">
-                                    <span class="bi bi-gear"></span> Admin Dashboard
+                                            <i class="bi bi-gear"></i>Admin Dashboard
                                         </a>
                                     </li>
-                            <li class="nav-item m-2">
+                                    <li><hr class="dropdown-divider"></li>
-                                <form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post">
+                                    <li>
-                                    <button type="submit" class="btn btn-danger btn-sm"> <span class="bi bi-box-arrow-left"></span> Logout</button>
+                                        <form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post" class="d-inline w-100">
+                                            <button type="submit" class="dropdown-item danger-item w-100" style="border: none; background: none;">
+                                                <i class="bi bi-box-arrow-left"></i>Logout
+                                            </button>
                                         </form>
                                     </li>
-
+                                </ul>
+                            </li>
                         }
                         else
                         {
                             <li class="nav-item">
-                                <a asp-controller="Account" asp-action="Login" class="btn btn-outline-info btn-sm" id="BannerButton">
+                                <a asp-controller="Account" asp-action="Login" class="btn btn-outline-info signin-btn">
-                                    <span class="bi bi-box-arrow-right"></span> Sign in
+                                    <i class="bi bi-box-arrow-right"></i>Sign In
                                 </a>
                             </li>
                         }
                     </ul>
-                   
-
                 </div>
             </div>
         </nav>
     </header>
 
     <main role="main">
-
         <vc:banner></vc:banner>
         <partial name="_Notification" />
-
         @RenderBody()
-     
     </main>
 
-
-    
-     
     <vc:footer></vc:footer>
 
-  
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>

Web/Views/Shared/_Layout.cshtml.css

@@ -1,48 +1 @@
-/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+
-for details on configuring this project to bundle and minify static web assets. */
-
-a.navbar-brand {
-  white-space: normal;
-  text-align: center;
-  word-break: break-all;
-}
-
-a {
-  color: #0077cc;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.border-top {
-  border-top: 1px solid #e5e5e5;
-}
-.border-bottom {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.box-shadow {
-  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}
-
-button.accept-policy {
-  font-size: 1rem;
-  line-height: inherit;
-}
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  white-space: nowrap;
-  line-height: 60px;
-}

Web/Views/Shared/_LoginLayout.cshtml

@@ -8,49 +8,489 @@
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/Web.styles.css" asp-append-version="true" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: #000000;
+            color: white;
+            position: relative;
+            min-height: 100vh;
+        }
+
+            /* Background Effects */
+            body::before {
+                content: '';
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.03) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.02) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.01) 0%, transparent 40%);
+                z-index: -1;
+            }
+
+        /* Ultra Modern Glassmorphism Navbar */
+        .navbar {
+            background: rgba(5, 8, 18, 0.85) !important;
+            backdrop-filter: blur(25px) saturate(1.8);
+            border-bottom: 1px solid rgba(59, 130, 246, 0.15);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            padding: 14px 0;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+
+            .navbar::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
+                border-radius: inherit;
+                z-index: -1;
+            }
+
+        /* Enhanced Brand Styling */
+        .navbar-brand {
+            font-weight: 900;
+            font-size: 1.5rem;
+            color: #ffffff !important;
+            text-decoration: none;
+            background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.02em;
+            text-transform: uppercase;
+            position: relative;
+            transition: all 0.4s ease;
+        }
+
+            .navbar-brand::after {
+                content: '';
+                position: absolute;
+                bottom: -4px;
+                left: 0;
+                width: 0;
+                height: 2px;
+                background: linear-gradient(90deg, #3b82f6, #14b8a6, #f97316);
+                transition: width 0.4s ease;
+                border-radius: 1px;
+            }
+
+            .navbar-brand:hover::after {
+                width: 100%;
+            }
+
+            .navbar-brand:hover {
+                transform: translateY(-2px) scale(1.02);
+                filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
+            }
+
+        /* Compact Modern Toggle Button */
+        .navbar-toggler {
+            border: 1px solid rgba(59, 130, 246, 0.3) !important;
+            border-radius: 8px !important;
+            padding: 6px 10px !important;
+            background: rgba(59, 130, 246, 0.08) !important;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            width: 42px;
+            height: 36px;
+        }
+
+            .navbar-toggler::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+                transition: left 0.5s ease;
+            }
+
+            .navbar-toggler:hover::before {
+                left: 100%;
+            }
+
+            .navbar-toggler:focus {
+                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+                border-color: rgba(59, 130, 246, 0.5) !important;
+            }
+
+            .navbar-toggler:hover {
+                background: rgba(59, 130, 246, 0.15) !important;
+                border-color: rgba(59, 130, 246, 0.5) !important;
+                transform: scale(1.05);
+            }
+
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2859, 130, 246, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+            transition: all 0.3s ease;
+            width: 22px !important;
+            height: 18px !important;
+        }
+
+        /* Modern Account Dropdown */
+        .account-dropdown {
+            position: relative;
+        }
+
+        .account-dropdown-toggle {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08)) !important;
+            border: 1px solid rgba(59, 130, 246, 0.3) !important;
+            color: rgba(255, 255, 255, 0.9) !important;
+            font-weight: 600;
+            border-radius: 8px !important;
+            padding: 8px 14px !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-decoration: none;
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(15px);
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+            font-size: 0.85rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+            .account-dropdown-toggle:hover {
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18)) !important;
+                border-color: rgba(59, 130, 246, 0.5) !important;
+                color: #ffffff !important;
+                transform: translateY(-2px);
+                box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
+            }
+
+            .account-dropdown-toggle::after {
+                border: none !important;
+                content: '\f078' !important;
+                font-family: 'Font Awesome 6 Free' !important;
+                font-weight: 900 !important;
+                font-size: 0.7rem !important;
+                margin-left: 4px !important;
+                transition: transform 0.3s ease !important;
+            }
+
+            .account-dropdown-toggle[aria-expanded="true"]::after {
+                transform: rotate(180deg) !important;
+            }
+
+        /* Modern Dropdown Menu */
+        .dropdown-menu {
+            background: rgba(5, 8, 18, 0.95) !important;
+            backdrop-filter: blur(25px) saturate(1.8) !important;
+            border: 1px solid rgba(59, 130, 246, 0.2) !important;
+            border-radius: 12px !important;
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1) !important;
+            padding: 8px !important;
+            margin-top: 8px !important;
+            min-width: 240px !important;
+            animation: dropdownFadeIn 0.3s ease-out;
+        }
+
+        @@keyframes dropdownFadeIn {
+            from
+
+        {
+            opacity: 0;
+            transform: translateY(-10px) scale(0.95);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+
+        }
+
+        /* User Info in Dropdown */
+        .user-info {
+            background: rgba(59, 130, 246, 0.1) !important;
+            border: 1px solid rgba(59, 130, 246, 0.2) !important;
+            border-radius: 8px !important;
+            padding: 12px !important;
+            margin-bottom: 8px !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+        }
+
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            font-weight: 700;
+            color: white;
+            flex-shrink: 0;
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+        }
+
+        .user-details h6 {
+            color: rgba(255, 255, 255, 0.95) !important;
+            font-weight: 600 !important;
+            margin: 0 !important;
+            font-size: 0.9rem !important;
+        }
+
+        .user-details small {
+            color: rgba(255, 255, 255, 0.6) !important;
+            font-size: 0.75rem !important;
+            text-transform: uppercase !important;
+            letter-spacing: 0.5px !important;
+            font-weight: 500 !important;
+        }
+
+        .dropdown-header {
+            color: rgba(255, 255, 255, 0.7) !important;
+            font-weight: 600 !important;
+            font-size: 0.75rem !important;
+            text-transform: uppercase !important;
+            letter-spacing: 0.5px !important;
+            padding: 8px 12px 4px 12px !important;
+            margin-bottom: 4px !important;
+        }
+
+        .dropdown-item {
+            color: rgba(255, 255, 255, 0.85) !important;
+            font-weight: 500 !important;
+            padding: 10px 12px !important;
+            border-radius: 8px !important;
+            transition: all 0.3s ease !important;
+            margin: 2px 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+            font-size: 0.85rem !important;
+            position: relative !important;
+            overflow: hidden !important;
+        }
+
+            .dropdown-item:hover {
+                background: rgba(59, 130, 246, 0.15) !important;
+                color: #ffffff !important;
+                transform: translateX(4px) !important;
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
+            }
+
+            .dropdown-item.danger-item {
+                color: rgba(239, 68, 68, 0.9) !important;
+            }
+
+                .dropdown-item.danger-item:hover {
+                    background: rgba(239, 68, 68, 0.15) !important;
+                    color: rgba(255, 255, 255, 0.95) !important;
+                    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
+                }
+
+            .dropdown-item.admin-item {
+                color: rgba(20, 184, 166, 0.9) !important;
+            }
+
+                .dropdown-item.admin-item:hover {
+                    background: rgba(20, 184, 166, 0.15) !important;
+                    color: rgba(255, 255, 255, 0.95) !important;
+                    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2) !important;
+                }
+
+        .dropdown-divider {
+            border-color: rgba(59, 130, 246, 0.2) !important;
+            margin: 8px 0 !important;
+        }
+
+        /* Sign In Button for unauthenticated users */
+        .btn-outline-info.signin-btn {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08)) !important;
+            border: 1px solid rgba(59, 130, 246, 0.4) !important;
+            color: rgba(255, 255, 255, 0.9) !important;
+            font-weight: 600;
+            border-radius: 8px !important;
+            padding: 8px 14px !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-decoration: none;
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(15px);
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+            font-size: 0.85rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+            .btn-outline-info.signin-btn:hover {
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18)) !important;
+                border-color: rgba(59, 130, 246, 0.6) !important;
+                color: #ffffff !important;
+                transform: translateY(-2px);
+                box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
+            }
+
+        /* Main content styling */
+        main {
+            min-height: calc(100vh - 80px);
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Icon styling */
+        .dropdown-item i {
+            width: 16px;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .bi {
+            margin-right: 6px;
+        }
+
+        /* Smooth Navbar Scroll Effect */
+        .navbar.scrolled {
+            background: rgba(2, 4, 12, 0.95) !important;
+            backdrop-filter: blur(30px) saturate(2);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(59, 130, 246, 0.08);
+            padding: 10px 0;
+        }
+
+        /* Responsive Design */
+        @@media (max-width: 768px) {
+            .navbar
+
+        {
+            padding: 10px 0;
+        }
+
+        .navbar-brand {
+            font-size: 1.3rem;
+        }
+
+        .navbar-collapse {
+            background: rgba(5, 8, 18, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 12px;
+            margin-top: 12px;
+            padding: 16px;
+            border: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .dropdown-menu {
+            min-width: 200px !important;
+            margin-top: 4px !important;
+        }
+
+        .account-dropdown-toggle {
+            padding: 6px 12px !important;
+            font-size: 0.8rem;
+        }
+
+        .user-avatar {
+            width: 28px;
+            height: 28px;
+            font-size: 0.8rem;
+        }
+
+        .user-details h6 {
+            font-size: 0.8rem !important;
+        }
+
+        .user-details small {
+            font-size: 0.7rem !important;
+        }
+
+        }
+
+        /* Ultra smooth collapse animation */
+        .navbar-collapse {
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .collapsing {
+            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+    </style>
+
+    <script>
+        // Add scroll effect to navbar
+        window.addEventListener('scroll', function() {
+            const navbar = document.querySelector('.navbar');
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        });
+    </script>
 </head>
 <body>
     <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light shadow-lg">
+        <nav class="navbar navbar-expand-sm navbar-toggleable-sm">
             <div class="container-fluid">
-                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online survey</a>
+                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online Survey</a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon text-white"></span>
+                    <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
-                    
-
                     </ul>
                     <ul class="navbar-nav">
                         @if (User.Identity.IsAuthenticated)
                         {
-                            <li class="nav-item text-white">
+                            <li class="nav-item dropdown account-dropdown">
-
+                                <button class="btn dropdown-toggle account-dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <span class="badge mt-3">Hi @User.Identity.Name</span>
+                                    <i class="bi bi-person-circle"></i>
-
+                                    <span>Account</span>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li class="user-info">
+                                        <div class="user-avatar">
+                                            @(User.Identity.Name?.Substring(0, 1).ToUpper() ?? "U")
+                                        </div>
+                                        <div class="user-details">
+                                            <h6>@User.Identity.Name</h6>
+                                            <small>Account Holder</small>
+                                        </div>
                                     </li>
-                            <li class="nav-item text-white m-2">
+                                    <li><hr class="dropdown-divider"></li>
-
+                                    <li><h6 class="dropdown-header">Actions</h6></li>
-                                <a asp-controller="Admin" asp-action="Index" asp-area="Admin" class="btn btn-outline-info btn-sm " id="BannerButton">
+                                    <li>
-                                    @*  <span class="text-white navbar-text">Admin Dashboard</span> *@
+                                        <a class="dropdown-item admin-item" asp-controller="Admin" asp-action="Index" asp-area="Admin">
-                                    <span class="bi bi-gear"></span> Admin Dashboard
+                                            <i class="bi bi-gear"></i>Admin Dashboard
                                         </a>
                                     </li>
-                            <li class="nav-item m-2">
+                                    <li><hr class="dropdown-divider"></li>
-                                <form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post">
+                                    <li>
-                                    <button type="submit" class="btn btn-danger btn-sm"> <span class="bi bi-box-arrow-left"></span> Logout</button>
+                                        <form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post" class="d-inline w-100">
+                                            <button type="submit" class="dropdown-item danger-item w-100" style="border: none; background: none;">
+                                                <i class="bi bi-box-arrow-left"></i>Logout
+                                            </button>
                                         </form>
                                     </li>
-
+                                </ul>
+                            </li>
                         }
                         else
                         {
                             <li class="nav-item">
-                                <a asp-controller="Account" asp-action="Login" class="btn btn-outline-info btn-sm" id="BannerButton">
+                                <a asp-controller="Account" asp-action="Login" class="btn btn-outline-info signin-btn">
-                                    <span class="bi bi-box-arrow-right"></span> Sign in
+                                    <i class="bi bi-box-arrow-right"></i>Sign In
                                 </a>
                             </li>
                         }
@@ -61,16 +501,9 @@
     </header>
 
     <main role="main">
-
         @RenderBody()
     </main>
 
-
-    
-     
-     
-     
-  
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>

Web/wwwroot/css/site.css

@@ -35,12 +35,141 @@
     --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 /*_______________________________________________________________________________start of the custom CSS_____________________________________________________________*/
-/* Additional Footer Improvements - Compact Version */
 
-/* Footer section styling */
+
-footer {
+
-    background: linear-gradient(135deg, #141c27 0%, #1a2332 100%);
+
-    position: relative;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Enhanced Navbar Styles */
+.bg-gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.sidebar-toggle {
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    transition: all 0.3s ease;
+}
+
+    .sidebar-toggle:hover {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        border-color: rgba(255, 255, 255, 0.4) !important;
+        transform: translateY(-1px);
+    }
+
+.notification-btn {
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    transition: all 0.3s ease;
+    padding: 8px 12px !important;
+}
+
+    .notification-btn:hover {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        transform: translateY(-1px);
+    }
+
+.notification-badge {
+    font-size: 0.6rem !important;
+    min-width: 18px;
+    height: 18px;
+    line-height: 18px;
+}
+
+.notification-dropdown {
+    min-width: 320px;
+    border: 0;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    border-radius: 10px;
+}
+
+.notification-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+    .notification-list:empty::after {
+        content: "No new notifications";
+        display: block;
+        text-align: center;
+        color: #6c757d;
+        padding: 20px;
+        font-style: italic;
+    }
+
+.account-btn {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
+    border: none !important;
+    transition: all 0.3s ease;
+    padding: 8px 16px !important;
+}
+
+    .account-btn:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
+    }
+
+.account-dropdown {
+    min-width: 220px;
+    border: 0;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    border-radius: 10px;
+}
+
+.logout-btn {
+    border: 1px solid rgba(220, 53, 69, 0.3) !important;
+    color: #dc3545 !important;
+    transition: all 0.3s ease;
+    padding: 8px 16px !important;
+}
+
+    .logout-btn:hover {
+        background-color: #dc3545 !important;
+        color: white !important;
+        transform: translateY(-1px);
+        box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
+    }
+
+.navbar-brand {
+    font-size: 1.1rem;
+    letter-spacing: 0.5px;
+}
+
+.dropdown-header {
+    font-size: 0.85rem;
+    font-weight: 600 !important;
+    color: #495057 !important;
+}
+
+.dropdown-item {
+    transition: all 0.2s ease;
+    padding: 10px 16px;
+}
+
+    .dropdown-item:hover {
+        background-color: rgba(0, 123, 255, 0.1);
+        transform: translateX(5px);
+    }
+
+.dropdown-footer {
+    padding: 10px 16px;
+    background-color: #f8f9fa;
+    border-radius: 0 0 10px 10px;
 }
 
     footer::before {
@@ -74,112 +203,10 @@ footer {
 }
 
 /* Compact footer headings */
-footer h5 {
-    color: #33b3ae !important;
-    font-weight: 600;
-    font-size: 1.1rem;
-    position: relative;
-    padding-bottom: 5px;
-}
 
-    footer h5::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 25px;
-        height: 2px;
-        background: #33b3ae;
-    }
-
-footer h6 {
-    color: #ffffff !important;
-    font-weight: 500;
-    font-size: 0.95rem;
-}
-
-/* Compact social media links styling */
-footer .d-flex a {
-    padding: 6px 10px;
-    border: 1px solid rgba(51, 179, 174, 0.3);
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    background: rgba(51, 179, 174, 0.1);
-    font-size: 0.85rem;
-}
-
-    footer .d-flex a:hover {
-        background: #33b3ae;
-        color: #ffffff !important;
-        transform: translateY(-1px);
-        box-shadow: 0 2px 4px rgba(51, 179, 174, 0.3);
-    }
-
-/* Compact navigation links styling */
-footer .nav-item a {
-    transition: all 0.3s ease;
-    padding: 2px 0;
-    display: block;
-    font-size: 0.9rem;
-}
-
-    footer .nav-item a:hover {
-        color: #33b3ae !important;
-        padding-left: 5px;
-    }
-
-/* Compact contact links styling */
-footer a[href^="mailto:"],
-footer a[href^="tel:"] {
-    transition: all 0.3s ease;
-    font-size: 0.85rem;
-}
-
-    footer a[href^="mailto:"]:hover,
-    footer a[href^="tel:"]:hover {
-        color: #33b3ae !important;
-    }
-
-/* Compact bottom section styling */
-footer hr {
-    margin: 1rem 0 0.5rem 0;
-    opacity: 0.3;
-}
-
-footer .row:last-child span {
-    font-size: 0.8rem;
-    display: flex;
-    align-items: center;
-}
-
-/* Compact text styling */
-footer .small {
-    font-size: 0.85rem !important;
-}
-
-footer .text-muted.small {
-    font-size: 0.8rem !important;
-}
 
 /* Responsive improvements for compact design */
-@media (max-width: 992px) {
-    #rowSection {
-        flex-direction: column;
-    }
 
-    #box {
-        width: 100% !important;
-        margin-bottom: 1.5rem;
-    }
-
-    footer .container-fluid .row {
-        text-align: center;
-    }
-
-    footer .d-flex {
-        justify-content: center !important;
-    }
-}
 
 /* Compact animation for footer elements */
 @keyframes fadeInUp {
@@ -194,26 +221,7 @@ footer .text-muted.small {
     }
 }
 
-footer .col-lg-3,
-footer .col-lg-2,
-footer .col-lg-4 {
-    animation: fadeInUp 0.5s ease forwards;
-}
 
-    footer .col-lg-3:nth-child(1) {
-        animation-delay: 0.1s;
-    }
-
-    footer .col-lg-2:nth-child(2) {
-        animation-delay: 0.15s;
-    }
-
-    footer .col-lg-4:nth-child(3) {
-        animation-delay: 0.2s;
-    }
-#Background {
-    background-color: #141c27 !important;
-}
 .navbar-light .navbar-text{
     color:white !important;
 }
@@ -576,9 +584,8 @@ body, html {
 .navbar {
     margin-bottom: 0px !important;
     background-color: #16202d !important;
-    box-shadow: 0px 2px 5px 0px rgba(140,140,140,0.79) !important;
+  
-    -webkit-box-shadow: 0px 2px 5px 0px rgba(140,140,140,0.79) !important;
+  
-    -moz-box-shadow: 0px 2px 5px 0px rgba(140,140,140,0.79) !important;
 }
 .navbar-brand {
     color: #33b3ae !important;
@@ -12088,7 +12095,7 @@ body, html {
                     #sidebar.active ul.components li a span {
                         margin-right: 0;
                         display: block;
-                        font-size: 24px;
+                       
                     }
 
             #sidebar.active .logo {