namirasoft-site-react 1.2.35 → 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/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";

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";

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,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"}
+{"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/package.json

@@ -1,10 +1,10 @@
 {
     "name": "namirasoft-site-react",
-    "version": "1.2.35",
+    "version": "1.2.36",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",
     "dependencies": {
-        "@types/node": "^20.11.16",
+        "@types/node": "^20.11.17",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "antd": "^5.14.0",
@@ -15,7 +15,7 @@
         "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",

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,12 +1,12 @@
 .ns_footer {
 	width: 100%;
-	background: rgba(0, 0, 0, 0.3);
+	background-color: #001664;
 	padding: 16px 0 8px 0;
 	display: flex;
 	justify-content: center;
 }
 
-.ns_footer > .ns_package_footer {
+.ns_footer>.ns_package_footer {
 	padding-left: 1rem !important;
 	padding-right: 1rem !important;
 	margin-right: auto;
@@ -83,13 +83,14 @@
 }
 
 @media only screen and (min-width: 1024px) {
-	.ns_footer > .ns_package_footer {
+	.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;

package/src/components/NSHeader.module.css

@@ -1,21 +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 {
+    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;
+    margin-right: 8px;
 }
 
 .ns_navbar {
@@ -25,7 +24,7 @@
     z-index: 10;
     display: flex;
     align-items: center;
-	justify-content: center;
+    justify-content: center;
 }
 
 .ns_navbar_menu_icon {
@@ -65,24 +64,24 @@
     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;
+.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);
@@ -90,7 +89,7 @@
     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;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
 }
 
 
@@ -142,19 +141,19 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	margin-left: auto;
-	margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 @media only screen and (min-width: 1024px) {
-	
-	.ns_navbar_parent_content {
-		padding-right: 3rem;
-		padding-left: 3rem;
-	}
-	
+
+    .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

@@ -2,8 +2,7 @@
 
 import React from "react";
 import Styles from "./NSHeader.module.css";
-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';
 
@@ -74,7 +73,7 @@ export class NSHeader extends React.Component<IProps, IState> {
                         </div>
                         <div className={`${Styles.ns_navbar_login_status}`}>
                             <span className={`${Styles.ns_navbar_usersname}`}>name</span>
-                            <img src={Exit}
+                            <img src='../assets/images/exit.svg'
                                 alt="Exit"
                                 width={20}
                                 height={20}
@@ -82,7 +81,7 @@ export class NSHeader extends React.Component<IProps, IState> {
                         </div>
                         <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
                             <img
-                                src={Menu}
+                                src='../assets/images/menu.svg'
                                 alt="Menu"
                                 width={19}
                                 height={17}

package/src/components/NSInputFloat.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -6,18 +6,21 @@
     position: relative;
     max-width: 100%;
 }
-.ns_input{
+
+.ns_input {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 51%;
 }
-.ns_input_title{
+
+.ns_input_title {
     font-size: 16px;
     font-weight: 400;
 }

package/src/components/NSInputIP.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -6,17 +6,20 @@
     position: relative;
     max-width: 100%;
 }
-.ns_input{
+
+.ns_input {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 51%;
 }
+
 .ns_input_title {
     font-size: 16px;
     font-weight: 400;

package/src/components/NSInputPhone.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -6,25 +6,28 @@
     position: relative;
     max-width: 100%;
 }
-.ns_input{
+
+.ns_input {
     height: 48px !important;
     font-size: 16px !important;
     font-weight: 400;
     width: 310px !important;
 }
-.ns_input span{
+
+.ns_input span {
     color: #000 !important;
 
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 51%;
     z-index: 1;
 }
-.ns_input_title{
+
+.ns_input_title {
     color: #fff;
     font-size: 16px;
     font-weight: 400;
-}
-
+}

package/src/components/NSInputPrice.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -6,18 +6,21 @@
     position: relative;
     max-width: 100%;
 }
-.ns_input{
+
+.ns_input {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 33%;
     z-index: 1;
 }
+
 .ns_input_title {
     font-size: 16px;
     font-weight: 400;

package/src/components/NSInputString.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -6,18 +6,21 @@
     position: relative;
     max-width: 100%;
 }
-.ns_input{
+
+.ns_input {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 51%;
     z-index: 1;
 }
+
 .ns_input_title {
     font-size: 16px;
     font-weight: 400;

package/src/components/NSInputText.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -7,18 +7,21 @@
     max-width: 100%;
     padding: 8px;
 }
-.ns_input{
+
+.ns_input {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 51%;
     z-index: 1;
 }
+
 .ns_input_title {
     font-size: 16px;
     font-weight: 400;

package/src/components/NSInputTime.module.css

@@ -1,4 +1,4 @@
-.ns_input_parent{
+.ns_input_parent {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -6,18 +6,21 @@
     position: relative;
     max-width: 100%;
 }
-.ns_input{
+
+.ns_input {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
 }
-.ns_input_icon{
+
+.ns_input_icon {
     position: absolute;
     right: 20px;
     top: 51%;
     z-index: 1;
 }
+
 .ns_input_title {
     font-size: 16px;
     font-weight: 400;

package/src/components/NSLayoutHeroBanner.module.css

@@ -0,0 +1,44 @@
+.hero_holder {
+	background-color: #001664;
+	position: relative;
+}
+
+.hero_wraper {
+	padding-bottom: 24px;
+	padding-top: 24px;
+	display: flex;
+	justify-content: center;
+}
+
+.hero_text_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	color: #fff;
+	z-index: 9;
+}
+
+.hero_image_bg {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	border-radius: 24px;
+	overflow: hidden;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_hero_vector_bg {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 2;
+		background-image: url('/images/hero_banner_bg.png');
+		background-position: right bottom;
+		background-size: auto;
+		background-repeat: no-repeat;
+	}
+}