namirasoft-site-react 1.3.177 → 1.3.178

package/src/components/{NSLayoutHeroBanner.module.css → NSBarHeroBanner.module.css}

@@ -1,43 +1,43 @@
-.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-position: right bottom;
-		background-size: auto;
-		background-repeat: no-repeat;
-	}
+.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-position: right bottom;
+		background-size: auto;
+		background-repeat: no-repeat;
+	}
 }

package/src/components/NSBarHeroBanner.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Styles from './NSBarHeroBanner.module.css'
+import { Link } from 'react-router-dom';
+
+export interface INSBarHeroBannerProps
+{
+	title: string;
+	description?: string;
+	description_last?: string;
+	banner: string;
+}
+
+export function NSBarHeroBanner(props: INSBarHeroBannerProps)
+{
+	return (
+		<div className={Styles.hero_holder}>
+			<section className={Styles.hero_wraper}>
+				<div className="container mx-auto px-4 lg:px-12">
+					<div className="flex flex-wrap lg:flex-nowrap justify-center lg:justify-between">
+						<article className={`mb-6 lg:mb-0 lg:mb-12lg:pe-12 ${Styles.hero_text_container}`} >
+							<h1 className="ns-font-32-bold  ns_font_lg_40_bold mb-6">
+								{props.title}
+							</h1>
+							<p className="ns-font-16-normal  lg:mb-4">
+								{props.description}
+							</p>
+							<p className="ns-font-16-normal">
+								{props.description_last}
+							</p>
+							<div className="hidden lg:block mt-6">
+								<Link to="#" style={{ width: "100%", marginBottom: "24px" }} >
+									Contact US
+								</Link>
+								<Link to="#" style={{ width: "100%" }} >
+									Book a Meeting With Us
+								</Link>
+							</div>
+						</article>
+						<div style={{ backgroundImage: `url(${props.banner})` }} className={`hidden lg:block lg:w-full xl:w-1/2 ${Styles.hero_image_bg}`}>
+							<div className={Styles.ns_hero_vector_bg}></div>
+						</div>
+						<div className={`block lg:hidden ${Styles.hero_img_container}`}>
+							<img
+								src={props.banner}
+								alt=""
+							/>
+						</div>
+						<div className="w-full mt-6 block lg:hidden">
+							<Link to="#" style={{ width: "100%", marginBottom: "24px" }} >
+								Contact US
+							</Link>
+							<Link to="#" style={{ width: "100%" }} >
+								Book a Meeting With Us
+							</Link>
+						</div>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}

package/src/components/{NSNotification.module.css → NSBarNotification.module.css}

@@ -1,32 +1,32 @@
-.ns_messenger {
-    background-color: #fff;
-    padding: 12px 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.ns_gray {
-    border: 3px solid gray;
-    box-shadow: 1px 1px 8px 0px gray;
-}
-
-.ns_blue {
-    border: 3px solid blue;
-    box-shadow: 1px 1px 8px 0px blue;
-}
-
-.ns_green {
-    border: 3px solid rgba(112, 224, 0, 1);
-    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
-}
-
-.ns_yellow {
-    border: 3px solid yellow;
-    box-shadow: 1px 1px 8px 0px yellow;
-}
-
-.ns_red {
-    border: 3px solid red;
-    box-shadow: 1px 1px 8px 0px red;
+.ns_messenger {
+    background-color: #fff;
+    padding: 12px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ns_gray {
+    border: 3px solid gray;
+    box-shadow: 1px 1px 8px 0px gray;
+}
+
+.ns_blue {
+    border: 3px solid blue;
+    box-shadow: 1px 1px 8px 0px blue;
+}
+
+.ns_green {
+    border: 3px solid rgba(112, 224, 0, 1);
+    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
+}
+
+.ns_yellow {
+    border: 3px solid yellow;
+    box-shadow: 1px 1px 8px 0px yellow;
+}
+
+.ns_red {
+    border: 3px solid red;
+    box-shadow: 1px 1px 8px 0px red;
 }

package/src/components/{NSNotification.tsx → NSBarNotification.tsx}

@@ -1,64 +1,64 @@
-import Styles from "./NSNotification.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSNotificationProps extends IBaseComponentProps
-{
-    text: string;
-    type: NotificationType;
-    color: NSNotificationColor;
-    onClose: () => void;
-}
-
-export enum NSNotificationColor
-{
-    GRAY = "GRAY",
-    BLUE = "BLUE",
-    GREEN = "GREEN",
-    YELLOW = "YELLOW",
-    RED = "RED",
-}
-
-export enum NotificationType
-{
-    Information = "Information",
-    Warning = "Warning",
-    Success = "Success",
-    Error = "Error",
-}
-
-export function NSNotification(props: INSNotificationProps)
-{
-    let className = Styles["ns_" + props.color.toString().toLowerCase()];
-    let type= props.type;
-    let src="";
-    switch (type)
-    {
-        case "Error":
-            src = "https://static.namirasoft.com/image/concept/close/error.svg";
-            break;
-        case "Success":
-            src = "https://static.namirasoft.com/image/concept/close/success.svg";
-            break;
-        case "Warning":
-            src = "https://static.namirasoft.com/image/concept/close/warning.svg";
-            break;
-        case "Information":
-            src = "https://static.namirasoft.com/image/concept/close/info.svg";
-    }
-    return (
-        <div id={props.id}
-            className={`${Styles.ns_messenger} ${className}`}
-            style={props.style}
-        >
-            <p className={`mb-0 ns-font-16-normal`}>{props.text}</p>
-            <img
-                className={Styles.ns_exit_icon}
-                src={src}
-                alt="exit"
-                width={32}
-                height={32}
-                onClick={props.onClose}
-            />
-        </div>
-    );
+import Styles from "./NSBarNotification.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSBarNotificationProps extends IBaseComponentProps
+{
+    text: string;
+    type: NotificationType;
+    color: NSBarNotificationColor;
+    onClose: () => void;
+}
+
+export enum NSBarNotificationColor
+{
+    GRAY = "GRAY",
+    BLUE = "BLUE",
+    GREEN = "GREEN",
+    YELLOW = "YELLOW",
+    RED = "RED",
+}
+
+export enum NotificationType
+{
+    Information = "Information",
+    Warning = "Warning",
+    Success = "Success",
+    Error = "Error",
+}
+
+export function NSBarNotification(props: INSBarNotificationProps)
+{
+    let className = Styles["ns_" + props.color.toString().toLowerCase()];
+    let type = props.type;
+    let src = "";
+    switch (type)
+    {
+        case "Error":
+            src = "https://static.namirasoft.com/image/concept/close/error.svg";
+            break;
+        case "Success":
+            src = "https://static.namirasoft.com/image/concept/close/success.svg";
+            break;
+        case "Warning":
+            src = "https://static.namirasoft.com/image/concept/close/warning.svg";
+            break;
+        case "Information":
+            src = "https://static.namirasoft.com/image/concept/close/info.svg";
+    }
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_messenger} ${className}`}
+            style={props.style}
+        >
+            <p className={`mb-0 ns-font-16-normal`}>{props.text}</p>
+            <img
+                className={Styles.ns_exit_icon}
+                src={src}
+                alt="exit"
+                width={32}
+                height={32}
+                onClick={props.onClose}
+            />
+        </div>
+    );
 }

package/src/components/{NSLayoutTitle.module.css → NSBarTitle.module.css}

@@ -1,10 +1,10 @@
-.title {
-	text-align: center;
-	color: rgba(20, 27, 92, 1);
-}
-
-.description {
-	text-align: center;
-	color: rgba(20, 27, 92, 1);
-	margin: 0px;
+.title {
+	text-align: center;
+	color: rgba(20, 27, 92, 1);
+}
+
+.description {
+	text-align: center;
+	color: rgba(20, 27, 92, 1);
+	margin: 0px;
 }

package/src/components/NSBarTitle.tsx

@@ -0,0 +1,29 @@
+import Styles from './NSBarTitle.module.css';
+
+export interface INSBarTitleProps 
+{
+	title: string;
+	description?: string;
+}
+
+export function NSBarTitle(props: INSBarTitleProps)
+{
+	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
+	return (
+		<div>
+			<h1 className={Styles.title}>{props.title}</h1>
+			{
+				props.description && lines &&
+				<p className={Styles.description}>{
+					lines.map((line, index) =>
+					{
+						return <>
+							{line.trim()}
+							{index != lines.length - 1 && <br />}
+						</>;
+					})
+				}</p>
+			}
+		</div>
+	);
+}

package/src/components/NSBox.module.css

@@ -1,77 +1,77 @@
-.ns_input_parent {
-	display: flex;
-	flex-direction: column;
-	width: fit-content;
-	color: #141B5C;
-	position: relative;
-	justify-content: center;
-	width: 272px;
-	max-width: 100%;
-}
-
-.ns_input_parent img {
-	position: absolute;
-	z-index: 2;
-	right: 5%;
-	top: 50%;
-}
-
-.ns_input_container {
-	display: flex;
-	align-items: center;
-	position: relative;
-	width: 100%;
-}
-
-.ns_input_icon_container {
-	margin: 0 !important;
-	position: absolute;
-	left: 12px;
-	right: 5%;
-	top: 25%;
-}
-
-.ns_input {
-	border-radius: 8px;
-	padding: 10px 12px 10px 12px;
-	font-size: 16px;
-	font-weight: 400;
-	border: 1px solid rgba(0, 0, 0, 1) !important;
-	height: 48px;
-	width: 272px
-}
-
-.ns_input li {
-	color: #000 !important
-}
-
-.ns_input_title {
-	font-size: 16px;
-	font-weight: 400;
-}
-
-@media only screen and (min-width: 380px) {
-	.ns_input {
-		max-width: 272px;
-	}
-}
-
-.ns_input_parent img {
-	position: absolute;
-	right: 5%;
-	top: 50%;
-}
-
-/*Start Input phone*/
-.ns_input_phone_parent input {
-	width: 100% !important;
-	height: 48px !important;
-}
-
-@media only screen and (min-width: 380px) {
-	.ns_input_phone_parent input {
-		width: 272px !important;
-	}
-}
-
+.ns_input_parent {
+	display: flex;
+	flex-direction: column;
+	width: fit-content;
+	color: #141B5C;
+	position: relative;
+	justify-content: center;
+	width: 272px;
+	max-width: 100%;
+}
+
+.ns_input_parent img {
+	position: absolute;
+	z-index: 2;
+	right: 5%;
+	top: 50%;
+}
+
+.ns_input_container {
+	display: flex;
+	align-items: center;
+	position: relative;
+	width: 100%;
+}
+
+.ns_input_icon_container {
+	margin: 0 !important;
+	position: absolute;
+	left: 12px;
+	right: 5%;
+	top: 25%;
+}
+
+.ns_input {
+	border-radius: 8px;
+	padding: 10px 12px 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	height: 48px;
+	width: 272px
+}
+
+.ns_input li {
+	color: #000 !important
+}
+
+.ns_input_title {
+	font-size: 16px;
+	font-weight: 400;
+}
+
+@media only screen and (min-width: 380px) {
+	.ns_input {
+		max-width: 272px;
+	}
+}
+
+.ns_input_parent img {
+	position: absolute;
+	right: 5%;
+	top: 50%;
+}
+
+/*Start Input phone*/
+.ns_input_phone_parent input {
+	width: 100% !important;
+	height: 48px !important;
+}
+
+@media only screen and (min-width: 380px) {
+	.ns_input_phone_parent input {
+		width: 272px !important;
+	}
+}
+
 /*End Input phone*/

package/src/components/NSBoxBoolean.module.css

@@ -1,55 +1,55 @@
-.ns_input_parent {
-	display: flex;
-	flex-direction: column;
-	width: fit-content;
-	color: #141B5C;
-	position: relative;
-	justify-content: center;
-}
-
-.ns_input_title {
-	font-size: 16px;
-	font-weight: 400;
-}
-
-.ns_checkbox_parent {
-	border-radius: 8px;
-	padding: 10px 12px 10px 12px;
-	font-size: 16px;
-	font-weight: 400;
-	border: 1px solid rgba(0, 0, 0, 1) !important;
-	background-color: #fff;
-	position: relative;
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	gap: 8px;
-	height: 48px;
-	width: 100%;
-}
-
-.ns_input {
-	width: 24px;
-	height: 24px;
-	cursor: pointer;
-}
-
-.ns_input:checked {
-	accent-color: #141B5C;
-}
-
-.ns_checkbox_parent label {
-	cursor: pointer;
-	color: #141B5C;
-	font-size: 16px;
-	font-weight: 300;
-	font-family: inherit;
-}
-
-@media only screen and (min-width: 380px) {
-	.ns_checkbox_parent {
-		width: 272px;
-	}
+.ns_input_parent {
+	display: flex;
+	flex-direction: column;
+	width: fit-content;
+	color: #141B5C;
+	position: relative;
+	justify-content: center;
+}
+
+.ns_input_title {
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.ns_checkbox_parent {
+	border-radius: 8px;
+	padding: 10px 12px 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	background-color: #fff;
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 8px;
+	height: 48px;
+	width: 100%;
+}
+
+.ns_input {
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+}
+
+.ns_input:checked {
+	accent-color: #141B5C;
+}
+
+.ns_checkbox_parent label {
+	cursor: pointer;
+	color: #141B5C;
+	font-size: 16px;
+	font-weight: 300;
+	font-family: inherit;
+}
+
+@media only screen and (min-width: 380px) {
+	.ns_checkbox_parent {
+		width: 272px;
+	}
 }