feat : make general changes for download account statement.

src/app/ValidateUser/page.tsx

@@ -1,10 +1,10 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState ,useRef } from "react";
 import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { Providers } from "@/app/providers";
 import NextImage from "next/image";
-import logo from '@/app/image/logo.jpg';
+import logo from '@/app/image/logo1.jpg';
 import changePwdImage from '@/app/image/changepw.png';
 import { useRouter } from "next/navigation";
 import { generateOTP } from '@/app/OTPGenerator';
@@ -16,6 +16,7 @@ export default function ValidateUser() {
     const [mobileNumber, setMobileNumber] = useState("");
     const [isCifValidated, setIsCifValidated] = useState(false);
     const [generateOtp, setGenerateOtp] = useState("");
+    const headerRef = useRef<HTMLHeadingElement>(null);
 
     const validUsers = [
         { cif: "11111111111", mobile: "7890544527" },
@@ -72,7 +73,7 @@ export default function ValidateUser() {
     };
 
     const handleSubmitOtp = () => {
-        if(!otp){
+        if (!otp) {
             notifications.show({
                 title: "Invalid OTP",
                 message: "Please Enter OTP Before You Submit.",
@@ -100,17 +101,72 @@ export default function ValidateUser() {
 
     }
 
+    useEffect(() => {
+        const headerData = [
+            "THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.",
+            "कांगड़ा केन्द्रीय सहकारी बैंक सीमित",
+        ];
+        let index = 0;
+        const interval = setInterval(() => {
+            index = (index + 1) % headerData.length;
+            if (headerRef.current) {
+                headerRef.current.textContent = headerData[index];
+            }
+        }, 2000);
+        return () => clearInterval(interval);
+    }, []);
+
     return (
         <Providers>
             <div style={{ backgroundColor: "#f8f9fa", width: "100%", paddingTop: "5%" }}>
-                <Box style={{
-                    position: 'fixed', width: '100%', height: '15%', top: 0, left: 0, zIndex: 100,
-                    display: "flex",
-                    justifyContent: "flex-start",
-                    background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)"
-                }}>
-                    <Image fit="cover" src={logo} component={NextImage} alt="ebanking"
-                        style={{ width: "100%", height: "100%" }} />
+                <Box
+                    style={{
+                        position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
+                    }}>
+                    <Image
+                        src={logo}
+                        component={NextImage}
+                        fit="contain"
+                        alt="ebanking"
+                        style={{ width: "100%", height: "auto", flexShrink: 0 }}
+                    />
+                    <Title ref={headerRef}
+                        order={2}
+                        style={{
+                            fontFamily: 'Roboto',
+                            position: 'absolute',
+                            top: '30%',
+                            left: '7%',
+                            color: 'White',
+                            transition: "opacity 0.5s ease-in-out",
+                        }}
+                    >
+                        THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
+                    </Title>
+                    <Text size="sm" c="white"
+                        style={{
+                            backgroundColor: '#1f1f14',
+                            fontFamily: 'Roboto',
+                            position: 'absolute',
+                            top: '59%',
+                            left: '72%',
+                            color: 'white',
+                            textShadow: '1px 1px 2px blue',
+                        }}
+                    >
+                        Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
+                    </Text>
+                    {/* <Box style={{ position: "absolute", right: "1rem", top: "50%", transform: 'translateY(-50%)' }}>
+                        <Tooltip
+                            label='Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215'
+                            position="right"
+                            withArrow>
+                            <IconBuildingBank size={40} style={{ cursor: "pointer", color: "white" }} />
+                        </Tooltip>
+                    </Box> */}
                 </Box>
                 <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
                     <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
@@ -123,10 +179,10 @@ export default function ValidateUser() {
                                 //  @ts-ignore
                                 <Text align="center"> Welcome {" "}{Cif}</Text>
                             )}
-                            <form onSubmit={(e)=>{
+                            <form onSubmit={(e) => {
                                 e.preventDefault();
-                                isCifValidated?handleSubmitOtp():handleValidateUser(e);
-                                }}>
+                                isCifValidated ? handleSubmitOtp() : handleValidateUser(e);
+                            }}>
                                 <TextInput
                                     label="Enter Your CIF Number"
                                     placeholder="Enter your CIF"