ui improved for mobile

src/App.js

@@ -82,6 +82,8 @@ const App = () => {
                 <Routes>
                     <Route path={`${process.env.PUBLIC_URL + "/ngs"}`} element={<NGS/>} />
                     <Route path={`${process.env.PUBLIC_URL + "/"}`} element={<Company/>} />
+                    <Route path={`${process.env.PUBLIC_URL + "/contact"}`} element={<Contact/>} />
+
                     <Route path={`${process.env.PUBLIC_URL + "/business-consulting"}`} element={HomeDefault} />
                     <Route path={`${process.env.PUBLIC_URL + "/business-consulting-2"}`} element={BusinessConsulting2} />
                     <Route path={`${process.env.PUBLIC_URL + "/corporate"}`} element={Corporate} />
@@ -127,7 +129,6 @@ const App = () => {
                     <Route path={`${process.env.PUBLIC_URL + "/call-to-action"}`} element={CalltoAction} />
                     <Route path={`${process.env.PUBLIC_URL + "/video-popup"}`} element={Video} />
                     <Route path={`${process.env.PUBLIC_URL + "/gallery"}`} element={Gallery} />
-                    <Route path={`${process.env.PUBLIC_URL + "/contact"}`} element={Contact} />
                     <Route path={`${process.env.PUBLIC_URL + "/brand"}`} element={Brand} />
                     <Route path={`${process.env.PUBLIC_URL + "/advance-tab"}`} element={AdvanceTab} />
                     <Route path={`${process.env.PUBLIC_URL + "/advance-pricing"}`} element={AdvancePricing} />

src/covisart/Configuration.js

@@ -6,21 +6,26 @@ export default function Configuration() {
     const snap = useSnapshot(state)
 
     return(
-        <div style={{ height: "100vh", justifyContent: "center", alignItems: "center", flexDirection: "column", display: "flex", position:"relative"  }}>
+        <>
             {
                 NGS(snap.color)
-
             }
             {
-                snap.accessory !='JustSim' && NGS(snap.accessory)
+                snap.accessory !='JustSim' && NGS_A(snap.accessory)
             }
-        </div>
+        </>
     )
 }
 
 function NGS(name) {
     const motorImage = './covisart/images/ngs/' + name + '.png'
     return (
-        <img id={name} style={{ borderRadius: "10%", position:"absolute" }} src={motorImage} alt={name} />
+        <img id={name} style={{ borderRadius: "10%",position: "relative"}} src={motorImage} alt={name} />
+    )
+}
+function NGS_A(name) {
+    const motorImage = './covisart/images/ngs/' + name + '.png'
+    return (
+        <img id={name} style={{ borderRadius: "10%", position: "absolute", top:0, left:0}} src={motorImage} alt={name} />
     )
 }

src/covisart/NGS.js

@@ -18,7 +18,7 @@ import Product from "./Product"
 class NGS extends Component {
     render() {
         return (
-            <main className="page-wrapper">
+            <main className="page-wrapper" >
                 <div className="main-content">
                     {/* Start Elements Area  */}
                     <div className="rwt-tab-area">

src/covisart/Product.js

@@ -1,26 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import { Grid, Input, Row, Space, Table, notification  } from 'antd';
+import React, { useState } from 'react';
+import {  Space, Table, notification } from 'antd';
+import { PhoneOutlined } from '@ant-design/icons';
+
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import SectionTitle from "../elements/sectionTitle/SectionTitle";
 import { ColorSelection } from './Selections/ColorSelection'
 import { AccessorySelection } from './Selections/AccessorySelection'
 import { PayloadSelection } from './Selections/PayloadSelection'
 import { useSnapshot } from 'valtio'
-import Simulator from './Simulator'
 import { state } from './store'
 import Configuration from './Configuration'
 import ReactGA from "react-ga4";
-import { uploadData } from './system/OrderRequest';
 
-const firebaseConfig = {
-    apiKey: "AIzaSyBRfVZpE4dKAjxq6zB7ja-H8Oo9TWaCiJg",
-    authDomain: "ngs-server.firebaseapp.com",
-    projectId: "ngs-server",
-    storageBucket: "ngs-server.appspot.com",
-    messagingSenderId: "1012345570821",
-    appId: "1:1012345570821:web:58a5bc3258cf43da4fbe6c",
-    measurementId: "G-4ZXME9T8HK"
-};
 
 const Product = () => {
     const [selectedTab, setSelectedTab] = useState(0);
@@ -42,31 +33,37 @@ const Product = () => {
             key: 'value',
         }
     ];
-    const openNotification = () => {
+    const openNotification = (placement) => {
         api.open({
-          message: 'We got your order.',
-          description:
-            'Dear ' + state.name + ', we got your order, our sales team will contact with you for further operation. Thanks for your interest our NGS-360 family motion platform.',
-          duration: 0,
+            message: 'We got your order.',
+            description:
+                'Dear ' + state.name + ', we got your order.  Our sales team will contact with you for further operation. Thanks for your interest our NGS-360 family motion platform.',
+            duration: 0,
+            placement,
+            icon:<PhoneOutlined style={{ color: 'green' }}/>
         });
-      };
+    };
+
     const handleSubmit = event => {
         event.preventDefault(); // 👈️ prevent page refresh
 
-        uploadData(state)
-        openNotification()
+        //uploadData(state)
+        openNotification('bottomRight')
     };
     return (
         <div className="row">
             {contextHolder}
             <div className="col-lg-12">
                 <Tabs selectedIndex={selectedTab} onSelect={(index) => setSelectedTab(index)}>
                     <div className="row row--30 align-items-center">
-                        <div className="col-lg-7" style={{ height: "100vh" }}>
-                            <Configuration />
+                        <div className="col-lg-6 mt_md--40 mt_sm--40">
+                            <div style={{ position: "relative" }}>
+                                <Configuration />
+                            </div>
+
                         </div>
-                        <div className="col-lg-5 mt_md--40 mt_sm--40" >
-                            <div className="row mb--40">
+                        <div className="col-lg-6 mt_md--40 mt_sm--40" >
+                            <div className="row mb--40 title_message">
                                 <div className="col-lg-12">
                                     <SectionTitle
                                         textAlign="text-center"
@@ -114,6 +111,7 @@ const Product = () => {
                                     <TabPanel tabid="0">
                                         <div className="rn-tab-content">
                                             <div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
+                                                <p>NGS-360-3 Motion Platform has <a style={{ color: 'yellow' }}>3</a> different color available. All colors are matte and powder painted</p>
                                                 <ColorSelection />
                                                 <div className="pricing-footer">
                                                     <a className="btn-default btn-border" onClick={() => setSelectedTab((selectedTab + 1) % tabCount)}>Next</a>
@@ -124,6 +122,7 @@ const Product = () => {
                                     <TabPanel tabid="1">
                                         <div className="rn-tab-content">
                                             <div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
+                                                <p>Unit of measurement  <a style={{ color: 'red' }}>Kg</a>. It can be changed after later for an extra fee.</p>
                                                 <PayloadSelection />
                                                 <div className="pricing-footer">
                                                     <a className="btn-default btn-border" onClick={() => setSelectedTab((selectedTab + 1) % tabCount)}>Next</a>
@@ -181,7 +180,7 @@ const Product = () => {
                                                 <form style={{ display: 'flex', width: "100%" }}
                                                     onSubmit={handleSubmit}>
                                                     <Space direction="vertical" size="middle" style={{ display: 'flex', width: "100%" }}>
-                                                        <input id="name" required type='text' placeholder="Name" onInput={(e)=>{console.log(e.currentTarget.value)}} onChange={(e) => { state.name = e.currentTarget.value; console.log(e.currentTarget.value) }} />
+                                                        <input id="name" required type='text' placeholder="Name" onInput={(e) => { console.log(e.currentTarget.value) }} onChange={(e) => { state.name = e.currentTarget.value; console.log(e.currentTarget.value) }} />
                                                         <input id="phone" required type='text' placeholder="Phone" onChange={(e) => { state.phone = e.currentTarget.value }} />
                                                         <input id="email" required type='email' placeholder="E-mail" onChange={(e) => { state.email = e.currentTarget.value }} />
                                                         <button className="btn-default btn-border" type="submit" value="Order">Order</button >

src/covisart/Selections/AccessorySelection.js

@@ -44,7 +44,7 @@ function Customizer() {
 function Accessory(name, selected) {
     const sizeImage = './covisart/images/ngs/' + name + '_icon.png'
     return (
-        <div key={name} className={selected} style={{ height: "20%", width: "20%", textAlign: "center" }} onClick={() => {name !='cockpit' && (state.accessory = name)}}>
+        <div key={name} className={selected} style={{ height: "20%", width: "20%", textAlign: "center", wordWrap:"break-word" }} onClick={() => {name !='cockpit' && (state.accessory = name)}}>
             {
                 name !='cockpit'
                 ?<img id={name} style={{ borderRadius: "10%" , }} src={sizeImage} alt={name} />

src/covisart/styles.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,600;1,900&display=swap');
 @import url('https://rsms.me/inter/inter.css');
 
+
 /* CUSTOMIZER */
 .customizer {
   display: flex;
@@ -176,17 +177,28 @@
     line-height: 6rem;
   }
 
-  .color-options {
+  /*.color-options {
     margin-bottom: 20px;
     flex-direction: column;
     position: absolute;
     top: 50%;
     right: 40px;
     transform: translateY(-50%);
-  }
+  }*/
 
   .support--content {
     top: -10%;
     left: 0;
   }
+
 }
+@media screen and (max-width: 600px) {
+  .title_message {
+    visibility: hidden;
+    clear: both;
+    float: left;
+    margin: 10px auto 5px 20px;
+    width: 28%;
+    display: none;
+  }
+}

src/elements/sectionTitle/SectionTitle.js

@@ -1,30 +1,11 @@
 import React from 'react';
-import ScrollAnimation from "react-animate-on-scroll";
-
 
 const SectionTitle = ({ subtitle, title, description, textAlign, radiusRounded }) => {
     return (
         <div className={`section-title ${textAlign}`}>
-            <ScrollAnimation
-                animateIn="fadeInUp"
-                animateOut="fadeInOut"
-                animateOnce={true}>
-                <h4 className={`subtitle ${radiusRounded}`}><span className="theme-gradient" dangerouslySetInnerHTML={{ __html: subtitle }}></span></h4>
-            </ScrollAnimation>
-
-            <ScrollAnimation
-                animateIn="fadeInUp"
-                animateOut="fadeInOut"
-                animateOnce={true}>
-                <h2 className="title w-600 mb--20" dangerouslySetInnerHTML={{ __html: title }}></h2>
-            </ScrollAnimation>
-
-            <ScrollAnimation
-                animateIn="fadeInUp"
-                animateOut="fadeInOut"
-                animateOnce={true}>
-                <p className="description b1" dangerouslySetInnerHTML={{ __html: description }}></p>
-            </ScrollAnimation>
+            <h4 className={`subtitle ${radiusRounded}`}><span className="theme-gradient" dangerouslySetInnerHTML={{ __html: subtitle }}></span></h4>
+            <h2 className="title w-600 mb--20" dangerouslySetInnerHTML={{ __html: title }}></h2>
+            <p className="description b1" dangerouslySetInnerHTML={{ __html: description }}></p>
         </div>
     )
 }