namirasoft-site-react 1.2.35 → 1.2.37

package/src/components/NSLayoutHeroBanner.tsx

@@ -1,12 +1,17 @@
 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;
 }
@@ -15,9 +20,64 @@ export function NSLayoutHeroBanner(props: IProps)
 {
 	return (
 		<NSLayout scope={props.scope} logo={props.logo} >
-			<div>
-				hero banner
+
+			<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/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;
+} */

package/src/components/NSParentCard.tsx.temp

@@ -0,0 +1,59 @@
+//// "use client"
+
+// import { Component } from 'react';
+// import Styles from './NSParentCard.module.css';
+
+// interface IPropsCard
+// {
+// 	title: string,
+// 	src: string,
+// 	alt?: string | undefined,
+// 	description?: string | undefined,
+// 	has_link: boolean,
+// 	href?: string | undefined,
+// 	target?: string | undefined
+// 	link_text?: string,
+// }
+
+// interface IProps
+// {
+// 	background?: {
+// 		backgroundColor?: string,
+// 		backgroundImage?: string,
+// 	},
+// 	section_title: string,
+// 	section_description?: string | undefined,
+// 	card: IPropsCard,
+// 	cards: IPropsCard[]
+// }
+
+// interface IState
+// { }
+
+// export class NSParentCard extends Component<IProps, IState> {
+// 	override render()
+// 	{
+// 		return (
+
+// 			<>
+// 				<section className={` ${Styles.section_card_container}`}>
+// 					<div className="ns-section-whitespace">
+// 						<div className="container mx-auto px-4 lg:px-12">
+// 							<div className={Styles.section_card_details}>
+// 								<h2> {this.props.section_title} </h2>
+// 								<p> {this.props.section_description} </p>
+// 							</div>
+// 						</div>
+// 					</div>
+// 				</section>
+
+// 				<section className={Styles.section_card_container} style={this.props.background} >
+// 					<div className={Styles.section_card_details}>
+// 						<h2> {this.props.section_title} </h2>
+// 						<p> {this.props.section_description} </p>
+// 					</div>
+// 				</section>
+// 			</>
+// 		);
+// 	}
+// };

package/src/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/src/main.ts

@@ -1,5 +1,7 @@
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButtonRed";
+export * from "./components/NSCard";
+// export * from "./components/NSParentCard";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSInputDate";