namirasoft-site-react 1.2.34 → 1.2.36

package/src/components/NSInputDate.module.css

@@ -1,32 +1,36 @@
-.ns_parent_input{
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
+.ns_parent_input {
+	display: flex;
+	flex-direction: column;
+	width: 326px;
+	color: #fff;
+	position: relative;
+	max-width: 100%;
 }
-.ns_input{
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
+
+.ns_input {
+	border-radius: 8px;
+	padding: 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
 }
-.ns_input_icon{
-    position: absolute;
-    right: 20px;
-    top: 51%;
+
+.ns_input_icon {
+	position: absolute;
+	right: 20px;
+	top: 51%;
 }
+
 .ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
+	font-size: 16px;
+	font-weight: 400;
 }
-input[type="date"]::-webkit-calendar-picker-indicator {
-    display: block;
-    background: url(../assets/images/icon-input-date.svg) no-repeat;
-    width: 24px;
-    height: 24px;
-    position: relative;
-    top: 3px;
-    left: 4px;
+
+.ns_input::-webkit-calendar-picker-indicator {
+	display: block;
+	background: url(../assets/images/icon-input-date.svg) no-repeat;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	top: 3px;
+	left: 4px;
 }

package/src/components/NSInputDate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputDate.module.css";
 
@@ -44,7 +46,8 @@ export class NSInputDate extends React.Component<IProps, IState> {
                     onChange={this.setValue}
                     type="date"
                     className={Styles.ns_input}
-                    placeholder="YYYY/MM/DD"
+					placeholder="YYYY/MM/DD"
+					id="ns-input-date"
                 />
             </div>
         );

package/src/components/NSInputDuration.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputDuration.module.css";
 import IconInputDuration from '../assets/images/icon-input-duration.svg';

package/src/components/NSInputEmail.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';

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/NSInputFloat.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';

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/NSInputIP.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputIP.module.css";
 import IconInputId from '../assets/images/icon-input-id.svg';

package/src/components/NSInputInteger.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputInteger.module.css";
 import IconInputInteger from '../assets/images/icon-input-integer.svg';

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/NSInputPhone.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputPhone.module.css";
 import IconInputPhone from '../assets/images/icon-input-phone.svg';

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/NSInputPrice.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputPrice.module.css";
 import IconInputPrice from '../assets/images/icon-input-price.svg';

package/src/components/NSInputSearch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputSearch.module.css";
 import IconInputSearch from '../assets/images/icon-input-search.svg';

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/NSInputString.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputString.module.css";
 import IconInputString from '../assets/images/icon-input-string.svg';

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/NSInputText.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputText.module.css";
 import IconInputText from '../assets/images/icon-input-text.svg';

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/NSInputTime.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputTime.module.css";
 import IconInputTime from '../assets/images/icon-input-time.svg';

package/src/components/NSLayout.module.css

@@ -1,7 +1,14 @@
 .ns_container {
     min-height: 100vh;
+    width: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+}
+
+.ns_header {
+    margin-bottom: auto;
+    width: 100%;
 }
 
 .ns_footer {

package/src/components/NSLayout.tsx

@@ -1,37 +1,28 @@
 import Styles from './NSLayout.module.css';
-import { Component, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { NSHeader } from './NSHeader';
 import { NSFooter } from './NSFooter';
 
 interface IProps
 {
-    scope: string;
-    logo: string;
-    title: string;
-    description?: string;
-    children: ReactNode;
+	scope: string;
+	logo: string;
+	children: ReactNode;
 }
 
-export class NSLayout extends Component<IProps>
+export function NSLayout(props: IProps)
 {
-    override render()
-    {
-        return (
-            <div className={Styles.ns_container}>
-                <div className="d-flex flex-column text-white">
-                    <NSHeader scope={this.props.scope} name="Header" logo={this.props.logo} />
-                    <div>
-                        <h1 className='text-center'>{this.props.title}</h1>
-                        <h4 className="page-description">{this.props.description}</h4>
-                    </div>
-                    <main className="container">
-                        {this.props.children}
-                    </main>
-                </div >
-                <div className={Styles.ns_footer}>
-                    <NSFooter scope={this.props.scope} name="Footer" logo={this.props.logo} />
-                </div>
-            </div>
-        );
-    }
+	return (
+		<div className={Styles.ns_container}>
+			<header className={Styles.ns_header}>
+				<NSHeader scope={props.scope} name="Header" logo={props.logo} />
+			</header>
+			<main className="d-flex flex-column text-white">
+				{props.children}
+			</main>
+			<footer className={Styles.ns_footer}>
+				<NSFooter scope={props.scope} name="Footer" logo={props.logo} />
+			</footer>
+		</div >
+	);
 }

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;
+	}
+}

package/src/components/NSLayoutHeroBanner.tsx

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import { NSLayout } from './NSLayout';
+
+import Styles from './NSLayoutHeroBanner.module.css'
+import { Link } from 'react-router-dom';
+// import { NSHeader } from './NSHeader';
+
+interface IProps
+{
+	scope: string;
+	logo: string;
+	title: string;
+	description?: string;
+	description_last?: string;
+	banner: string;
+	children: ReactNode;
+}
+
+export function NSLayoutHeroBanner(props: IProps)
+{
+	return (
+		<NSLayout scope={props.scope} logo={props.logo} >
+
+			<div className={Styles.hero_holder}>
+				{/* <NSHeader name='Header' scope='Namira Software Corporation' logo='https://static.namirasoft.com/logo/namirasoft/base.png' /> */}
+				<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>
+
+
+
+			{props.children}
+		</NSLayout>
+	);
+}

package/src/components/NSLayoutTitle.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { NSLayout } from './NSLayout';
+
+interface IProps
+{
+	scope: string;
+	logo: string;
+	title: string;
+	description?: string;
+	children: ReactNode;
+}
+
+export function NSLayoutTitle(props: IProps)
+{
+	return (
+		<NSLayout scope={props.scope} logo={props.logo} >
+			<div>
+				<h1 className='text-black text-center'>{props.title}</h1>
+				<p className='text-black page-description'>{props.description}</p>
+			</div>
+			{props.children}
+		</NSLayout>
+	);
+}

package/src/components/NSLinkGreen.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Style from "./NSLinkGreen.module.css";
 import React from "react";
 import { Link } from "react-router-dom";

package/src/components/NSLinkRed.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Style from "./NSLinkRed.module.css";
 import React from "react";
 import { Link } from "react-router-dom";

package/src/components/NSPagination.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import './NSPagination.module.css';
 import { Component } from 'react';
 

package/src/components/NSParentCard.module.css

@@ -0,0 +1,35 @@
+/* .section_card_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 48px 0;
+	gap: 48px;
+}
+
+.section_card_details>h2 {
+	color: inherit;
+	font-size: 32px;
+	font-weight: 700;
+	line-height: normal;
+	font-style: normal;
+	text-align: center;
+	margin-bottom: 16px;
+}
+
+.section_card_details>p {
+	color: inherit;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: normal;
+	font-style: normal;
+	margin-bottom: 0;
+}
+
+.ns_card_container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 24px;
+} */