From 33d747951cea2816eddb120c6c823adcf9362080 Mon Sep 17 00:00:00 2001
From: Francis Longsaar <longsaarmuknaan@gmail.com>
Date: Thu, 26 Dec 2024 19:36:28 +0000
Subject: [PATCH] Added a more warm and cool background for a more comfortable
 sight and updated left hand side design to display logo correctly

---
 app/client/src/app/page.tsx | 65 ++++++++++---------------------------
 1 file changed, 17 insertions(+), 48 deletions(-)

diff --git a/app/client/src/app/page.tsx b/app/client/src/app/page.tsx
index 5398bb9..1a8e611 100644
--- a/app/client/src/app/page.tsx
+++ b/app/client/src/app/page.tsx
@@ -76,10 +76,10 @@ const Home = () => {
     );
 
     return (
-        <div className="min-h-screen bg-gray-50 py-8 px-4 overflow-y-auto flex justify-center items-center">
+        <div className="min-h-screen bg-[#E9F3F1] py-8 px-4 overflow-y-auto flex flex-col justify-center items-center">
             <div className="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-8 bg-white rounded-2xl shadow-2xl">
                 {/* Left Side - Descriptive Section */}
-                <div className="bg-gradient-to-br from-purple-600 to-indigo-700 p-8 md:flex flex-col justify-center text-white hidden ">
+                <div className="bg-gradient-to-br from-purple-400 to-indigo-700 p-8 md:flex flex-col justify-center text-white hidden">
                     <Image
                         src="/images/logo.svg"
                         alt="landver logo"
@@ -87,14 +87,10 @@ const Home = () => {
                         width={100}
                         className="mb-6"
                     />
-                    <h1 className="text-3xl font-bold mb-4">
-                        Land Registry Protocol
-                    </h1>
+                    <h1 className="text-3xl font-bold mb-4">Land Registry Protocol</h1>
                     <p className="text-lg mb-6 opacity-80">
-                        Secure, transparent, and efficient land registration
-                        powered by blockchain technology.
+                        Secure, transparent, and efficient land registration powered by blockchain technology.
                     </p>
-
                     <div className="space-y-4">
                         <div className="flex items-center">
                             <LandPlot className="mr-3 text-yellow-300" />
@@ -111,41 +107,27 @@ const Home = () => {
                 <div className="p-8 flex flex-col justify-center">
                     {status !== "connected" ? (
                         <div className="text-center">
-                            <Wallet
-                                className="mx-auto text-purple-600 mb-4"
-                                size={64}
-                            />
-                            <h2 className="text-2xl font-bold mb-4">
-                                Connect Your Wallet
-                            </h2>
-                            <p className="text-gray-600 mb-6">
-                                Connect a supported wallet to access Land
-                                Registry
-                            </p>
+                            <Wallet className="mx-auto text-purple-600 mb-4" size={64} />
+                            <h2 className="text-2xl font-bold mb-4">Connect Your Wallet</h2>
+                            <p className="text-gray-600 mb-6">Connect a supported wallet to access Land Registry</p>
                             <Button
                                 onClick={toggleModal}
                                 classname="mx-auto flex items-center gap-2 bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700"
                             >
-                                {!isModalOpen && (
+                                {!isModalOpen ? (
                                     <>
                                         Connect Wallet
                                         <ArrowRight size={20} />
                                     </>
-                                )}
-                                {isModalOpen && (
+                                ) : (
                                     <MoonLoader color="#fff" size={20} />
                                 )}
                             </Button>
 
                             {isModalOpen && (
-                                <Modal
-                                    onClose={toggleModal}
-                                    isOpen={isModalOpen}
-                                >
+                                <Modal onClose={toggleModal} isOpen={isModalOpen}>
                                     <div className="text-center">
-                                        <h2 className="text-2xl font-bold mb-4">
-                                            Connect Your Wallet
-                                        </h2>
+                                        <h2 className="text-2xl font-bold mb-4">Connect Your Wallet</h2>
                                         <WalletConnector />
                                     </div>
                                 </Modal>
@@ -154,18 +136,11 @@ const Home = () => {
                     ) : (
                         <form onSubmit={handleFormSubmit}>
                             <div className="text-center mb-6">
-                                <p className="text-gray-600">
-                                    Connected Wallet:
-                                </p>
-                                <p className="font-bold text-purple-600">
-                                    {address?.slice(0, 6)}...
-                                    {address?.slice(-4)}
-                                </p>
+                                <p className="text-gray-600">Connected Wallet:</p>
+                                <p className="font-bold text-purple-600">{address?.slice(0, 6)}...{address?.slice(-4)}</p>
                             </div>
 
-                            <h2 className="text-2xl font-bold mb-4 text-center">
-                                Select Your Role
-                            </h2>
+                            <h2 className="text-2xl font-bold mb-4 text-center">Select Your Role</h2>
 
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                                 <UserTypeCard
@@ -182,24 +157,18 @@ const Home = () => {
                                 />
                             </div>
 
-                            {error && (
-                                <p className="text-red-500 text-sm mb-4 text-center">
-                                    {error}
-                                </p>
-                            )}
+                            {error && <p className="text-red-500 text-sm mb-4 text-center">{error}</p>}
 
                             <Button
                                 type="submit"
                                 classname="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 flex items-center justify-center gap-2"
                             >
-                                {!isLoading && (
+                                {!isLoading ? (
                                     <>
                                         Proceed to Dashboard
                                         <ArrowRight size={20} />
                                     </>
-                                )}
-
-                                {isLoading && (
+                                ) : (
                                     <MoonLoader color="#fff" size={20} />
                                 )}
                             </Button>