jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Update landingPage Ui and add responsiveness

Browse source
This commit is contained in:
jaanvi 2025-04-07 18:15:53 +05:30
parent fed0e9db04
commit 6c69c361bd
12 changed files with 672 additions and 386 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/arrow-top-right.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

28
public/bg.svg Normal file
View file

@ -0,0 +1,28 @@
<svg width="1920" height="751" viewBox="0 0 1920 751" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.1" filter="url(#filter0_f_1407_4696)">
<path d="M357.765 483.542C426.213 434.499 1144.46 549.989 1258.37 579.451C1372.28 608.913 1757.57 743.868 1689.13 792.911C1620.68 841.954 527.424 923.713 413.507 894.245C299.59 864.776 289.318 532.588 357.765 483.542Z" fill="#0DB3D5"/>
</g>
<g opacity="0.2" filter="url(#filter1_f_1407_4696)">
<path d="M605.311 371.098C596.35 427.875 656.872 561.013 526.007 556.64C395.141 552.267 122.44 412.046 131.401 355.264C140.363 298.481 198.295 172.294 329.163 176.666C460.031 181.038 614.27 314.317 605.311 371.098Z" fill="#EAF1B8"/>
</g>
<g opacity="0.2" filter="url(#filter2_f_1407_4696)">
<path d="M1222 456.032C1222 409.041 1493.74 156 1551.77 156C1609.81 156 1882 384.378 1882 431.369C1882 478.359 1515.47 735 1457.43 735C1399.39 735 1222 503.022 1222 456.032Z" fill="#B59EDB"/>
</g>
<defs>
<filter id="filter0_f_1407_4696" x="6.99048" y="163.563" width="1998.22" height="1044.92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="154" result="effect1_foregroundBlur_1407_4696"/>
</filter>
<filter id="filter1_f_1407_4696" x="-176.814" y="-131.445" width="1096.48" height="996.19" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="154" result="effect1_foregroundBlur_1407_4696"/>
</filter>
<filter id="filter2_f_1407_4696" x="914" y="-152" width="1276" height="1195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="154" result="effect1_foregroundBlur_1407_4696"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/bgBottom.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 316 KiB

BIN
public/bgEV.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 316 KiB

34
public/bgev.svg Normal file
View file

@ -0,0 +1,34 @@
<svg width="1920" height="1425" viewBox="0 0 1920 1425" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1407_4268)">
<rect width="1920" height="1425" fill="#111111"/>
<g opacity="0.1" filter="url(#filter0_f_1407_4268)">
<path d="M357.765 483.542C426.213 434.499 1144.46 549.989 1258.37 579.451C1372.28 608.913 1757.57 743.868 1689.13 792.911C1620.68 841.955 527.425 923.713 413.508 894.245C299.591 864.776 289.318 532.588 357.765 483.542Z" fill="#0DB3D5"/>
</g>
<g opacity="0.2" filter="url(#filter1_f_1407_4268)">
<path d="M605.311 371.098C596.349 427.875 656.872 561.013 526.007 556.64C395.141 552.267 122.439 412.046 131.401 355.264C140.363 298.481 198.295 172.294 329.163 176.666C460.031 181.038 614.27 314.317 605.311 371.098Z" fill="#EAF1B8"/>
</g>
<g opacity="0.2" filter="url(#filter2_f_1407_4268)">
<path d="M1222 456.032C1222 409.042 1493.74 156 1551.77 156C1609.81 156 1882 384.379 1882 431.369C1882 478.359 1515.47 735 1457.43 735C1399.39 735 1222 503.022 1222 456.032Z" fill="#B59EDB"/>
</g>
</g>
<defs>
<filter id="filter0_f_1407_4268" x="6.99072" y="163.564" width="1998.22" height="1044.92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="154" result="effect1_foregroundBlur_1407_4268"/>
</filter>
<filter id="filter1_f_1407_4268" x="-176.814" y="-131.445" width="1096.48" height="996.19" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="154" result="effect1_foregroundBlur_1407_4268"/>
</filter>
<filter id="filter2_f_1407_4268" x="914" y="-152" width="1276" height="1195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="154" result="effect1_foregroundBlur_1407_4268"/>
</filter>
<clipPath id="clip0_1407_4268">
<rect width="1920" height="1425" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/hero.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
public/left-bottom-arrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

15
src/components/AddManagerModal/addManagerModal.tsx
View file

@ -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
},
})}
/>

24
src/components/AddUserModal/addUserModal.tsx
View file

@ -264,19 +264,17 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
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 }) => (

18
src/components/EditManagerModal/editManagerModal.tsx
View file

@ -208,7 +208,21 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
<Controller
name="phone"
control={control}
rules={{ required: "Phone number is required" }}
rules={{
required: "Phone number is required",
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 }) => (
<CustomTextField
{...field}
@ -236,7 +250,7 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}}
disabled={loading}
disabled={loading}
>
{loading ? (
<CircularProgress size={24} color="inherit" />

53
src/components/EditUserModal/editUserModal.tsx
View file

@ -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<EditUserModalProps> = ({
@ -59,12 +55,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
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<EditUserModalProps> = ({
<Controller
name="name"
control={control}
rules={{ required: "Name is required" }}
rules={{
required: "User Name is required",
minLength: {
value: 3,
message: "Minimum 3 characters required",
},
maxLength: {
value: 30,
message: "Maximum 30 characters allowed",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
@ -147,7 +148,14 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
<Controller
name="email"
control={control}
rules={{ required: "Email is required" }}
rules={{
required: "Email is required",
pattern: {
value: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
@ -170,7 +178,21 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
<Controller
name="phone"
control={control}
rules={{ required: "Phone number is required" }}
rules={{
required: "Phone number is required",
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 }) => (
<CustomTextField
{...field}
@ -183,7 +205,6 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
)}
/>
</Box>
</Box>
{/* Submit Button */}

886
src/pages/LandingPage/index.tsx
View file

File diff suppressed because it is too large Load diff