diff --git a/public/arrow-top-right.png b/public/arrow-top-right.png new file mode 100644 index 0000000..2ba9780 Binary files /dev/null and b/public/arrow-top-right.png differ diff --git a/public/bg.svg b/public/bg.svg new file mode 100644 index 0000000..e9c6b80 --- /dev/null +++ b/public/bg.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/bgBottom.png b/public/bgBottom.png new file mode 100644 index 0000000..850f6cf Binary files /dev/null and b/public/bgBottom.png differ diff --git a/public/bgEV.png b/public/bgEV.png new file mode 100644 index 0000000..850f6cf Binary files /dev/null and b/public/bgEV.png differ diff --git a/public/bgev.svg b/public/bgev.svg new file mode 100644 index 0000000..0460a89 --- /dev/null +++ b/public/bgev.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/hero.png b/public/hero.png new file mode 100644 index 0000000..46cafee Binary files /dev/null and b/public/hero.png differ diff --git a/public/left-bottom-arrow.png b/public/left-bottom-arrow.png new file mode 100644 index 0000000..be38e68 Binary files /dev/null and b/public/left-bottom-arrow.png differ diff --git a/src/components/AddManagerModal/addManagerModal.tsx b/src/components/AddManagerModal/addManagerModal.tsx index 78d5c3c..b0d5fb2 100644 --- a/src/components/AddManagerModal/addManagerModal.tsx +++ b/src/components/AddManagerModal/addManagerModal.tsx @@ -300,10 +300,17 @@ export default function AddManagerModal({ } {...register("phone", { required: "Phone Number is required", - pattern: { - value: /^[0-9]{10}$/, - message: - "Phone number must be 10 digits", + validate: (value) => { + if (!/^[0-9]*$/.test(value)) { + return "Only numbers are allowed"; + } + if (value.length < 6) { + return "Phone number must be at least 6 digits"; + } + if (value.length > 14) { + return "Phone number must be at most 14 digits"; + } + return true; // No errors }, })} /> diff --git a/src/components/AddUserModal/addUserModal.tsx b/src/components/AddUserModal/addUserModal.tsx index d751d97..c438db3 100644 --- a/src/components/AddUserModal/addUserModal.tsx +++ b/src/components/AddUserModal/addUserModal.tsx @@ -264,19 +264,17 @@ const AddUserModal: React.FC = ({ control={control} rules={{ required: "Phone number is required", - pattern: { - value: /^[0-9]*$/, - message: "Only numbers are allowed", - }, - minLength: { - value: 6, - message: - "Phone number must be at least 6 digits", - }, - maxLength: { - value: 14, - message: - "Phone number must be at most 14 digits", + validate: (value) => { + if (!/^[0-9]*$/.test(value)) { + return "Only numbers are allowed"; + } + if (value.length < 6) { + return "Phone number must be at least 6 digits"; + } + if (value.length > 14) { + return "Phone number must be at most 14 digits"; + } + return true; // No errors }, }} render={({ field }) => ( diff --git a/src/components/EditManagerModal/editManagerModal.tsx b/src/components/EditManagerModal/editManagerModal.tsx index 8782105..9b6752e 100644 --- a/src/components/EditManagerModal/editManagerModal.tsx +++ b/src/components/EditManagerModal/editManagerModal.tsx @@ -208,7 +208,21 @@ const EditManagerModal: React.FC = ({ { + if (!/^[0-9]*$/.test(value)) { + return "Only numbers are allowed"; + } + if (value.length < 6) { + return "Phone number must be at least 6 digits"; + } + if (value.length > 14) { + return "Phone number must be at most 14 digits"; + } + return true; // No errors + }, + }} render={({ field }) => ( = ({ width: "117px", "&:hover": { backgroundColor: "#439BC1" }, }} - disabled={loading} + disabled={loading} > {loading ? ( diff --git a/src/components/EditUserModal/editUserModal.tsx b/src/components/EditUserModal/editUserModal.tsx index 23bf1c3..f549677 100644 --- a/src/components/EditUserModal/editUserModal.tsx +++ b/src/components/EditUserModal/editUserModal.tsx @@ -2,10 +2,7 @@ import React, { useEffect } from "react"; import { Box, Button, Typography, Modal } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import { useForm, Controller } from "react-hook-form"; -import { - CustomIconButton, - CustomTextField, -} from "../AddUserModal/styled.css"; +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; interface EditUserModalProps { open: boolean; @@ -14,7 +11,7 @@ interface EditUserModalProps { id: number, name: string, email: string, - phone: string, + phone: string ) => void; editRow: any; } @@ -23,7 +20,6 @@ interface FormData { name: string; email: string; phone: string; - } const EditUserModal: React.FC = ({ @@ -59,12 +55,7 @@ const EditUserModal: React.FC = ({ const onSubmit = (data: FormData) => { if (editRow) { - handleUpdate( - editRow.id, - data.name, - data.email, - data.phone, - ); + handleUpdate(editRow.id, data.name, data.email, data.phone); } handleClose(); // Close the modal reset(); // Reset the form fields @@ -125,7 +116,17 @@ const EditUserModal: React.FC = ({ ( = ({ ( = ({ { + if (!/^[0-9]*$/.test(value)) { + return "Only numbers are allowed"; + } + if (value.length < 6) { + return "Phone number must be at least 6 digits"; + } + if (value.length > 14) { + return "Phone number must be at most 14 digits"; + } + return true; // No errors + }, + }} render={({ field }) => ( = ({ )} /> - {/* Submit Button */} diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx index 888e6e5..1dd7367 100644 --- a/src/pages/LandingPage/index.tsx +++ b/src/pages/LandingPage/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; + import { Box, Button, @@ -8,7 +8,7 @@ import { Grid, Typography, } from "@mui/material"; -import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation +import { useNavigate } from "react-router-dom"; import SearchIcon from "@mui/icons-material/Search"; import EvStationIcon from "@mui/icons-material/EvStation"; import BatteryChargingFullIcon from "@mui/icons-material/BatteryChargingFull"; @@ -33,7 +33,7 @@ const features = [ "Access a vast network of EV stations across multiple locations with ease.", }, { - icon: , // New feature icon + icon: , title: "Smart Search Functionality", description: "Find EV stations nearby with advanced filters for location, availability, and pricing.", @@ -50,46 +50,52 @@ const LandingPage = () => { return ( {/* Navbar */} DigiEv Logo { onClick={handleLoginClick} sx={{ backgroundColor: "#52ACDF", - color: "white", - borderRadius: "8px", - width: "117px", + color: "#FFFFFF", + borderRadius: "6px", + width: { xs: "90px", sm: "117px" }, fontFamily: "Inter", textTransform: "none", "&:hover": { backgroundColor: "#439BC1" }, + fontWeight: 500, + fontSize: { xs: "14px", sm: "16px" }, }} > Login + {/* Hero Section */} - - - {/* Text Section */} - - - Empower Your Business With{" "} - - Digital Evolution - - . - - - DigiEv is your one-stop destination for transforming - challenges into opportunities through innovative - technology, seamless integration, and expert - solutions. - - - - - {/* Image Section */} - - Dashboard - - - - - - - - + + {/* Text Section */} + - 50+ - - + Empower Your Business With{" "} + + Digital Evolution + + . + + + DigiEv is your one-stop destination for + transforming challenges into opportunities + through innovative technology, seamless + integration, and expert solutions. + + + + + {/* Image Section */} + - Successful Digital Transformations - + Dashboard + - - - 100% - - - Client Satisfaction - + + + {/* Statistics Section */} + + + + + 50+ + + + Successful Digital Transformations + + + + + 100% + + + Client Satisfaction + + + + + 20+ + + + Global Partnerships + + + + + 10+ + + + Years of Innovation + + - - - 20+ - - - Global Partnerships - - - {/* New Statistic */} - - - 10+ - - - Years of Innovation - - - - + + + {/* Welcome Message */} Welcome to DigiEv{" "} - Your EV Charging Partner - + Simplifying Electric Vehicle Charging + + {/* Description */} DigiEv helps EV owners locate, book, and manage their charging needs efficiently. With our intuitive platform, you can ensure a smooth and hassle-free charging experience. + + {/* Image Section */} { }} /> + + {/* Features Section */} { mt={2} > {features.map((feature, index) => ( - + { flexDirection: "column", alignItems: "center", justifyContent: "center", - height: "100%", // Fills the parent card + height: "100%", textAlign: "center", }} > { color: "#52ACDF", fontFamily: "Inter", fontWeight: 600, - fontSize: "18px", // Slightly reduced to fit uniformly + fontSize: { + xs: "16px", + md: "18px", + }, lineHeight: "160%", }} > @@ -442,8 +548,11 @@ const LandingPage = () => { color: "#D9D8D8", fontFamily: "Inter", fontWeight: 400, - fontSize: "14px", - lineHeight: "20px", + fontSize: { + xs: "12px", + md: "14px", + }, + lineHeight: "140%", mt: 1, }} > @@ -455,38 +564,50 @@ const LandingPage = () => { ))} - + Key Features + + - - Key Features - iMockup - iPhone { position: "absolute", width: "100%", height: "100%", - pointerEvents: "none", // Prevents interaction issues + pointerEvents: "none", }} > {/* Top Left */} - {/* Arrow pointing to mockup */} Arrow { variant="h6" fontWeight={400} color="#FFFFFF" - fontSize={"20px"} - lineHeight={"30px"} + fontSize={{ xs: "16px", md: "20px" }} + lineHeight="30px" > Seamless Navigation - + Effortlessly locate and access EV charging stations with our intuitive map integration. + {/* Top Right */} - {/* Arrow pointing to mockup */} Arrow Live Availability - + View real-time charger availability to plan your trips efficiently. + {/* Bottom Left */} - {/* Arrow pointing to mockup */} Arrow Smart Recommendations - + Get personalized station suggestions based on your location and usage patterns. + {/* Bottom Right */} - {/* Arrow pointing to mockup */} Arrow { variant="h6" fontWeight={400} color="#FFFFFF" - fontSize={"20px"} - lineHeight={"30px"} + fontSize={{ xs: "16px", md: "20px" }} + lineHeight="30px" > Secure Payments - + Make hassle-free transactions with our secure payment gateway. @@ -656,89 +813,110 @@ const LandingPage = () => { + {/* Footer */} - {/* Primary Image */} - Developer - {/* Overlapping Image */} - developer + > + {/* Primary Image */} + Developer + {/* Overlapping Image */} + developer + + + {/* Text */} Get your application developed by our certified experts today! + {/* Button */}