namirasoft-site-react 1.2.34 → 1.2.36

package/dist/components/NSSelectBox.module.css

@@ -7,18 +7,22 @@
     height: 48px;
     width: 304px !important;
 }
-.ns_input_select span span svg path{
+
+.ns_input_select span span svg path {
     height: 24px !important;
     width: 24px !important;
 }
+
 .ns_input_select span span svg {
     height: 24px !important;
     width: 24px !important;
 }
-.ns_input_select span span span svg path{
+
+.ns_input_select span span span svg path {
     height: 12px !important;
     width: 12px !important;
 }
+
 .ns_input_select span span span svg {
     height: 12px !important;
     width: 12px !important;

package/dist/components/NSTable.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./NSTable.modules.css";
 import { Component } from 'react';

package/dist/components/NSTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,OAAO,OAAiB,SAAQ,SAA2C;IAE7E,YAAY,KAAsB;QAE9B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,OAAO,CACH,4BAAK,SAAS,EAAC,wBAAwB,gBACnC,+BAAO,SAAS,EAAC,OAAO,iBACpB,8BAAO,SAAS,EAAC,OAAO,gBACpB,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,2BAAqB,KAAK,EAAC,KAAK,gBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAvD,UAAU,CAAmD,CAAC,GACrG,IACD,EACR,8BAAO,SAAS,EAAC,OAAO,gBAEhB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,uBAEQ,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,cACtD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtD,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,IAET,KACL,IACL,CACV,CAAA;IACL,CAAC;CACJ"}
+{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,OAAO,OAAiB,SAAQ,SAA2C;IAE7E,YAAY,KAAsB;QAE9B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,OAAO,CACH,4BAAK,SAAS,EAAC,wBAAwB,gBACnC,+BAAO,SAAS,EAAC,OAAO,iBACpB,8BAAO,SAAS,EAAC,OAAO,gBACpB,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,2BAAqB,KAAK,EAAC,KAAK,gBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAvD,UAAU,CAAmD,CAAC,GACrG,IACD,EACR,8BAAO,SAAS,EAAC,OAAO,gBAEhB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,uBAEQ,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,cACtD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtD,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,IAET,KACL,IACL,CACV,CAAA;IACL,CAAC;CACJ"}

package/dist/main.d.ts

@@ -1,5 +1,6 @@
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButtonRed";
+export * from "./components/NSCard";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSInputDate";
@@ -15,6 +16,8 @@ export * from "./components/NSInputString";
 export * from "./components/NSInputText";
 export * from "./components/NSInputTime";
 export * from "./components/NSLayout";
+export * from "./components/NSLayoutHeroBanner";
+export * from "./components/NSLayoutTitle";
 export * from "./components/NSSelectBox";
 export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";

package/dist/main.js

@@ -1,5 +1,6 @@
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButtonRed";
+export * from "./components/NSCard";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSInputDate";
@@ -15,6 +16,8 @@ export * from "./components/NSInputString";
 export * from "./components/NSInputText";
 export * from "./components/NSInputTime";
 export * from "./components/NSLayout";
+export * from "./components/NSLayoutHeroBanner";
+export * from "./components/NSLayoutTitle";
 export * from "./components/NSSelectBox";
 export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/dist/pages/NSLoginPage.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./NSLoginPage.modules.css";
 import { Component } from 'react';

package/dist/pages/NSLoginPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWtC,MAAM,OAAO,WAAY,SAAQ,SAAiB;IAErC,MAAM;;QAEX,IAAI,MAAM,GAAG,mBAAK,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,MAAM,GAAG,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;aACnE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;YACvB,MAAM,GAAG,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAC;QAC1E,OAAO,CACH,4BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,gBAClD,6BAAK,SAAS,EAAC,8DAA8D,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,iBACvG,4BAAK,SAAS,EAAC,QAAQ,gBACnB,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAC,MAAM,GAAO,IACnE,EACN,wBAAK,2BAAI,SAAS,EAAC,6BAA6B,gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAM,GAAM,EAC9E,4BAAK,SAAS,EAAC,QAAQ,gBAClB,MAAM,IACL,KACJ,IACJ,CACT,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWtC,MAAM,OAAO,WAAY,SAAQ,SAAiB;IAErC,MAAM;;QAEX,IAAI,MAAM,GAAG,mBAAK,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,MAAM,GAAG,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;aACnE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;YACvB,MAAM,GAAG,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAC;QAC1E,OAAO,CACH,4BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,gBAClD,6BAAK,SAAS,EAAC,8DAA8D,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,iBACvG,4BAAK,SAAS,EAAC,QAAQ,gBACnB,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAC,MAAM,GAAO,IACnE,EACN,wBAAK,2BAAI,SAAS,EAAC,6BAA6B,gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAM,GAAM,EAC9E,4BAAK,SAAS,EAAC,QAAQ,gBAClB,MAAM,IACL,KACJ,IACJ,CACT,CAAC;IACN,CAAC;CACJ"}

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "namirasoft-site-react",
-    "version": "1.2.34",
+    "version": "1.2.36",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",
     "dependencies": {
-        "@types/node": "^20.11.5",
-        "@types/react": "^18.2.48",
-        "@types/react-dom": "^18.2.18",
-        "antd": "^5.13.2",
+        "@types/node": "^20.11.17",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
+        "antd": "^5.14.0",
         "bootstrap": "^5.3.2",
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.2.3",
@@ -15,11 +15,11 @@
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",
-        "react-bootstrap": "^2.10.0",
+        "react-bootstrap": "^2.10.1",
         "react-dom": "^18.2.0",
         "react-phone-input-2": "^2.15.1",
         "react-phone-number-input": "^3.3.9",
-        "react-router-dom": "^6.21.3",
+        "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1"
     },
     "scripts": {

package/src/App.tsx

@@ -45,7 +45,7 @@ export function App()
 
     return (
         <div className="App">
-            <NSLayout scope='Namirasoft SOP console' title="Hooman" logo=''>
+            <NSLayout scope='Namirasoft SOP console' logo=''>
                 <div className='my-4 container'>
                     {/* <NSInputText title='Text' />
                     <NSInputInteger title='Integer' />
@@ -64,7 +64,8 @@ export function App()
                     <NSButtonRed title='Delete' onClick={() => { }} />
                     <NSPagination page={1} size={25} />
                 </div>
-                asdasd</NSLayout>
+                asdasd
+            </NSLayout>
         </div>
     );
 }

package/src/components/NSButtonGreen.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Style from "./NSButtonGreen.module.css";
 
@@ -12,6 +14,8 @@ interface IState
     title: string;
 }
 
+interface IState { }
+
 export class NSButtonGreen extends React.Component<IProps, IState>
 {
     constructor(props: IProps)

package/src/components/NSButtonRed.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Style from "./NSButtonRed.module.css";
 

package/src/components/NSCard.module.css

@@ -0,0 +1,85 @@
+.ns_card {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	gap: 24px 0;
+	background-color: #fff;
+	box-shadow: 0 2px 10px 4px #00000040;
+	padding: 24px;
+	border-radius: 24px;
+}
+
+.ns_card_detail_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.ns_card_title_img {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.card_img {
+	object-fit: cover;
+	width: 100%;
+	height: 100%;
+	max-height: 310px;
+}
+
+.card_title {
+	font-style: normal;
+	font-size: 24;
+	font-weight: 700;
+	line-height: normal;
+	color: inherit;
+	text-align: inherit;
+}
+
+.card_description {
+	font-style: normal;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: normal;
+	color: inherit;
+	text-align: justify;
+}
+
+.ns_card_link {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12px 24px;
+	background-color: #3963FF;
+	box-shadow: inset 2px 2px 2px 0 #1754F3;
+	color: #fff;
+	font-weight: 400;
+	font-style: 16px;
+	line-height: normal;
+	border-radius: 24px;
+	width: 100%;
+	max-width: 310px;
+}
+
+@media only screen and (min-width: 576px) {
+	.ns_card {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	.ns_card {
+		width: 41%;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_card {
+		width: 31%;
+	}
+}

package/src/components/NSCard.tsx

@@ -0,0 +1,54 @@
+"use client"
+import { Component } from 'react';
+
+import Styles from './NSCard.module.css'
+
+interface IProps
+{
+	title: string;
+	description?: string;
+	image: {
+		src: string;
+		alt: string;
+	};
+	link?:
+	{
+		text: string;
+		href: string;
+		target?: string;
+	}
+}
+
+interface IStart
+{ }
+
+export default class NSCard extends Component<IProps, IStart> {
+	override render()
+	{
+		const { title, image, description, link } = this.props;
+		return (
+			<>
+				<article className={Styles.ns_card}>
+					<div className={Styles.ns_card_detail_container}>
+						<div className={Styles.ns_card_title_img}>
+							<h3 className={Styles.card_title}>
+								{title}
+							</h3>
+							<img className={Styles.card_img} src={image.src} alt={image.alt} />
+						</div>
+						<p className={Styles.card_description}>
+							{description}
+						</p>
+					</div>
+					{link &&
+						<div >
+							<a className={Styles.ns_card_link} href={link.href} target={link.target ?? "_self"} >
+								{link.text}
+							</a>
+						</div>
+					}
+				</article >
+			</>
+		);
+	}
+}

package/src/components/NSFooter.module.css

@@ -1,36 +1,102 @@
 .ns_footer {
-    width: 100%;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 16px 0 8px 0;
+	width: 100%;
+	background-color: #001664;
+	padding: 16px 0 8px 0;
+	display: flex;
+	justify-content: center;
 }
 
-.footns_footer li {
-    color: #fff;
+.ns_footer>.ns_package_footer {
+	padding-left: 1rem !important;
+	padding-right: 1rem !important;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+.ns_footer_parent_items {
+	display: flex;
+	justify-content: space-between;
+	gap: 64px;
+}
+
+.ns_footer_project_logo_tablet {
+	display: none;
+}
+
+.ns_footer_menu_container {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+	gap: 48px;
+}
+
+.ns_footer_namira_logo_tablet {
+	display: none;
+}
+
+.ns_footer_logos_mobile {
+	display: flex;
+	justify-content: center;
+	gap: 24px;
+	margin-bottom: 16px;
+}
+
+.ns_footer_menu_container ul {
+	list-style: none;
+	color: #fff;
+	padding: 0;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: normal;
 }
 
-.ns_footer ul {
-    list-style: none;
-    color: #fff;
-    padding: 0;
+.ns_footer_menu_container li {
+	font-size: 12px !important;
+	font-weight: 300 !important;
 }
 
 .ns_footer_copyright {
-    color: #fff !important;
-    text-align: center;
-    justify-content: center;
-    width: 100%;
+	color: #fff !important;
+	text-align: center;
+	width: 100%;
 }
 
-.ns_footer_parent_items {
-    gap: 64px;
+.ns_footer_copyright span,
+.ns_footer_copyright a {
+	color: #fff !important;
+	text-align: center;
 }
 
-.ns_footer li {
-    font-size: 12px !important;
-    font-weight: 300 !important;
+@media only screen and (min-width: 768px) {
+	.ns_footer_project_logo_tablet {
+		display: block;
+	}
+
+	.ns_footer_namira_logo_tablet {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.ns_footer_logos_mobile {
+		display: none;
+	}
 }
 
+@media only screen and (min-width: 1024px) {
+	.ns_footer>.ns_package_footer {
+		padding-left: 3rem !important;
+		padding-right: 3rem !important;
+		margin-right: auto;
+		margin-left: auto;
+	}
+}
+
+/* Is these two exist ?  */
 .ns_footer h5 {
-    font-size: 16px !important;
-    font-weight: 600 !important;
+	font-size: 16px !important;
+	font-weight: 600 !important;
+}
+
+.footns_footer li {
+	color: #fff;
 }

package/src/components/NSFooter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSFooter.module.css";
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
@@ -44,39 +46,38 @@ export class NSFooter extends React.Component<IProps, IState>
     {
         return (
             <div className={Styles.ns_footer}>
-                <div className="container">
-                    <div className={`d-flex justify-content-between ${Styles.ns_footer_parent_items}`}>
-                        <div className="d-none d-md-block">
-                            <div>
-                                <a href="/">
-                                    <img src={this.props.logo} alt='footer' width={80} height={80} />
-                                </a>
-                            </div>
+                <div className={`container ${Styles.ns_package_footer}`}>
+                    <div className={`${Styles.ns_footer_parent_items}`}>
+                        <div className={`${Styles.ns_footer_project_logo_tablet}`}>
+                            <a href="/">
+                                <img src={this.props.logo} alt='Logo' width={80} height={80} />
+                            </a>
                         </div>
-                        <div className="d-flex flex-wrap w-100 gap-5">
+                        <div className={`${Styles.ns_footer_menu_container}`}>
                             {this.render_menu(0, null)}
                         </div>
-                        <div className="justify-content-end d-none d-md-flex">
-                            <div>
-                                <a href="/">
-                                    <img src="https://static.namirasoft.com/logo/namirasoft/name.png" alt='footer' width={80} height={80} />
-                                </a>
-                            </div>
+                        <div className={`${Styles.ns_footer_namira_logo_tablet}`}>
+                            <a href="/">
+                                <img src="https://static.namirasoft.com/logo/namirasoft/name.png" alt='Namira Software Corporation Logo' width={80} height={80} />
+                            </a>
                         </div>
                     </div>
-                    <div className="d-flex justify-content-center gap-4 mb-3 d-block d-md-none">
+                    <div className={`${Styles.ns_footer_logos_mobile}`}>
                         <div>
                             <a href="/">
-                                <img src={this.props.logo} alt='footer' width={80} height={80} />
+                                <img src={this.props.logo} alt='Logo' width={80} height={80} />
                             </a>
                         </div>
                         <div>
                             <a href="/">
-                                <img src="https://static.namirasoft.com/logo/namirasoft/name.png" alt='footer' width={80} height={80} />
+                                <img src="https://static.namirasoft.com/logo/namirasoft/name.png" alt='Namira Software Corporation Logo' width={80} height={80} />
                             </a>
                         </div>
                     </div>
-                    <div className={`row ${Styles.ns_footer_copyright}`}>©Copyright 2010 - 2023 Namira Software Corporation. All rights reserved.</div>
+                    <div className={`${Styles.ns_footer_copyright}`}>
+                        <span> ©Copyright 2010 - {new Date().getFullYear()} </span>
+                        <a href="https://namirasoft.com/" target="_blank" rel="noopener noreferrer"> Namira Software Corporation</a>. All rights reserved.
+                    </div>
                 </div>
             </div>
         );
@@ -116,7 +117,7 @@ export class NSFooter extends React.Component<IProps, IState>
         else
         {
             return (
-                <li className="mb-2">{filter.name}</li>
+                <a href={filter.link?.url}><li className="mb-2">{filter.name}</li></a>
             );
         }
     }

package/src/components/NSHeader.module.css

@@ -1,7 +1,20 @@
+.ns_navbar_content {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.ns_navbar_login_status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .ns_navbar_usersname {
     color: #fff !important;
     font-size: 16px;
     font-weight: 400;
+    margin-right: 8px;
 }
 
 .ns_navbar {
@@ -11,6 +24,7 @@
     z-index: 10;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .ns_navbar_menu_icon {
@@ -50,13 +64,43 @@
     background-color: #574c4c;
 }
 
+.ns_navbar_items_container {
+    margin-right: auto;
+    margin-inline-end: auto;
+    --bs-nav-link-padding-x: 1rem;
+    --bs-nav-link-padding-y: 0.5rem;
+    --bs-nav-link-font-weight: ;
+    --bs-nav-link-color: var(--bs-link-color);
+    --bs-nav-link-hover-color: var(--bs-link-hover-color);
+    --bs-nav-link-disabled-color: var(--bs-secondary-color);
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+}
+
+.ns_navbar_items_link {
+    display: block;
+    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+    font-size: var(--bs-nav-link-font-size);
+    font-weight: var(--bs-nav-link-font-weight);
+    color: var(--bs-nav-link-color);
+    text-decoration: none;
+    background: 0 0;
+    border: 0;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
+}
+
+
+
 @media (max-width: 768px) {
     .ns_navbar_elements ul li:not(:last-child) {
         margin-right: 30px;
     }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 1024px) {
     .ns_navbar_menu_icon {
         display: block;
         cursor: pointer;
@@ -97,9 +141,19 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-@media only screen and (min-width: 991px) {
+@media only screen and (min-width: 1024px) {
+
+    .ns_navbar_parent_content {
+        padding-right: 3rem;
+        padding-left: 3rem;
+    }
+
     .ns_nav_second_item .dropdown-menu {
         margin-top: -20% !important;
         margin-left: 100%;

package/src/components/NSHeader.tsx

@@ -1,8 +1,8 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSHeader.module.css";
-import Nav from 'react-bootstrap/Nav';
-import Menu from '../assets/images/menu.svg';
-import Exit from '../assets/images/exit.svg';
+
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
 
@@ -63,26 +63,26 @@ export class NSHeader extends React.Component<IProps, IState> {
                 <div className={`${Styles.ns_navbar_parent_content} container`}>
                     <img
                         src={this.props.logo}
-                        alt="logo"
+                        alt="Logo"
                         width={48}
                         height={48}
                     />
-                    <div className={`${Styles.ns_navbar_content} gap-2 d-flex justify-content-between`} >
+                    <div className={`${Styles.ns_navbar_content} `} >
                         <div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
                             {this.render_menu(0, null)}
                         </div>
-                        <div className="d-flex justify-content-center align-items-center">
-                            <span className={`me-2 ${Styles.ns_navbar_usersname}`}>name</span>
-                            <img src={Exit}
-                                alt="exit"
+                        <div className={`${Styles.ns_navbar_login_status}`}>
+                            <span className={`${Styles.ns_navbar_usersname}`}>name</span>
+                            <img src='../assets/images/exit.svg'
+                                alt="Exit"
                                 width={20}
                                 height={20}
                             />
                         </div>
                         <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
                             <img
-                                src={Menu}
-                                alt="menu"
+                                src='../assets/images/menu.svg'
+                                alt="Menu"
                                 width={19}
                                 height={17}
                             />
@@ -96,9 +96,9 @@ export class NSHeader extends React.Component<IProps, IState> {
     {
         let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
         return (
-            <Nav className="me-auto" >
+            <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
                 {(fs?.map(f => this.render_menuItem(level, f)))}
-            </Nav>
+            </div>
         );
     }
     private render_menuItem(level: number, filter: FilterLinkRow)
@@ -128,7 +128,7 @@ export class NSHeader extends React.Component<IProps, IState> {
         } else
         {
             return (
-                <Nav.Link className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item} href={filter.link?.url}>{filter.name}</Nav.Link>
+                <a className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
             );
         }
     }