Validation and frontend mod

Author: SyedAthar25

src/components/sections/GetStartedModal/components/SignInForm.tsx

@@ -141,8 +141,9 @@ const SignInForm = ({ toggleSignUp, loginSuccess, setLoginSuccess }: Props) => {
   return (
     <div
       className={cn(
-        "w-full mx-4 my-4 lg:mx-0 lg:mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700 md:max-w-[450px] ",
-        loginSuccess && "md:max-w-max"
+        "w-full mx-4 my-4 lg:mx-0 lg:mt-7 border border-gray-200 rounded-xl shadow-sm dark:border-gray-700 md:max-w-[450px] ",
+        loginSuccess && "md:max-w-max",
+        "bg-gradient-to-br from-[#ffffff] to-[#c7a8bd]" // Added gradient background here
       )}
     >
       {!loginSuccess && (

src/components/sections/GetStartedModal/components/SignUpForm.tsx

@@ -326,10 +326,9 @@ const SignUpForm = ({ toggleSignUp }: Props) => {
 
   return (
     <div className="hide-scrollbar w-full h-screen overflow-auto bg-gray-50 dark:bg-gray-900 p-4 flex justify-center items-center">
-      <div className="hide-scrollbar w-full max-w-[700px] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-y-auto max-h-full">
+      <div className="hide-scrollbar w-full max-w-[700px] bg-gradient-to-br from-[#ffffff] to-[#c7a8bd] border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-y-auto max-h-full"> {/* Added gradient background here */}
         <div className="p-6 sm:p-10">
           <h1 className="text-4xl font-bold text-center text-gray-800 dark:text-[#00f0ff] neon-glow">
-          {/* <h1 className="text-2xl font-bold text-center text-gray-800 dark:text-white"> */}
             Create account
           </h1>
 
@@ -371,7 +370,6 @@ const SignUpForm = ({ toggleSignUp }: Props) => {
                     <p className="text-xs text-red-600 mt-2">{formErrors.lastName.message}</p>
                   )}
                 </div>
-
               </div>
 
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -390,7 +388,6 @@ const SignUpForm = ({ toggleSignUp }: Props) => {
                   )}
                 </div>
 
-
                 <div className="focus-within:border-[#774A67] focus-within:shadow-[0_0_15px_#774A67] transition duration-300 rounded-lg border p-1 dark:border-gray-700">
                   <label className="block text-base mb-2 dark:text-white">
                     Company Logo <span className="text-red-400">*</span>
@@ -604,10 +601,10 @@ const SignUpForm = ({ toggleSignUp }: Props) => {
                   {/* Step bubble */}
                   <div
                     className={`z-10 flex items-center justify-center w-7 h-7 rounded-full transition-all duration-500 ${index < currentStep
-                        ? "bg-gradient-to-r from-purple-500 to-blue-500"
-                        : index === currentStep
-                          ? "bg-gradient-to-r from-purple-400 to-blue-400 border-2 border-white animate-pulse"
-                          : "bg-gray-700"
+                      ? "bg-gradient-to-r from-purple-500 to-blue-500"
+                      : index === currentStep
+                        ? "bg-gradient-to-r from-purple-400 to-blue-400 border-2 border-white animate-pulse"
+                        : "bg-gray-700"
                       }`}
                   >
                     {index < currentStep ? (

src/components/sections/Hero/index.tsx

@@ -9,9 +9,9 @@ const Hero = () => {
     <section className="wrapper relative overflow-hidden">
       {/* Background Image */}
       <img
-        src="/images/Colorful_bg.png"
+        src="src/images/gradient2.jpg"
         alt="Colorful Background"
-        className="absolute top-0 left-0 w-full h-full object-cover z-0 opacity-90 pointer-events-none"
+        className="absolute top-0 left-0 w-full h-full object-cover z-20 opacity-90 pointer-events-none"
       />
 
       {/* Optional Blur + Brightness Overlay */}

src/components/sections/Pricing/index.tsx

@@ -164,7 +164,7 @@ const Pricing = ({ isInModal, isExpiredPlan }: Props) => {
         {plans.map((plan, index) => (
           <div
             key={index}
-            className='flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700 shadow-lg hover:shadow-2xl transition-shadow bg-white dark:bg-gray-900 transform hover:scale-105 transition-transform'
+            className='flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700 shadow-lg hover:shadow-2xl transition-shadow bg-gradient-to-br from-[#ffffff] to-[#c7a8bd] dark:bg-gray-900 transform hover:scale-105 transition-transform'
           >
             <h4 className='font-semibold text-3xl text-gray-800 dark:text-gray-200'>
               {plan.title}
@@ -212,10 +212,16 @@ const Pricing = ({ isInModal, isExpiredPlan }: Props) => {
           </div>
         </div>
       )}
+    </div>
+  );
+};
 
-      {/*  */}
-      {/* Test */}
-      {/* <div
+export default Pricing;
+
+
+{/*  */ }
+{/* Test */ }
+{/* <div
       className='max-w-[90rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto max-h-[620px] lg:max-h-max overflow-y-auto no-scrollbar'
       id='pricing'
     >
@@ -255,8 +261,9 @@ const Pricing = ({ isInModal, isExpiredPlan }: Props) => {
         ))}
       </div>
     </div> */}
-      {/* test end */}
-      {/* <div className={cn('mt-12 grid grid-cols-1 md:grid-cols-2 gap-6 lg:items-center', { "md:grid-cols-1": isExpiredPlan })}>
+
+{/* test end */ }
+{/* <div className={cn('mt-12 grid grid-cols-1 md:grid-cols-2 gap-6 lg:items-center', { "md:grid-cols-1": isExpiredPlan })}>
         {!isExpiredPlan && (
           <div className='flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700'>
             <h4 className='font-medium text-lg text-gray-800 dark:text-gray-200'>
@@ -390,9 +397,4 @@ const Pricing = ({ isInModal, isExpiredPlan }: Props) => {
             {cta}
           </a>
         </div>
-      </div> */}
-    </div>
-  );
-};
-
-export default Pricing;
+      </div> */}