Merge pull request #45 from rishi-golla/“arnab”

“arnab”
rishi-golla · Sep 23, 2024 · 6b62798 · 6b62798
2 parents 1afd4ba + 7ef3165
commit 6b62798
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 229 deletions.
diff --git a/legal-ai/src/App.js b/legal-ai/src/App.js
@@ -26,10 +26,10 @@ function App() {
   return (
     <div className="relative bg-primary overflow-y-auto w-full">
       <SpaceBackground />
-      <ChatbotButton setActiveSection={setActiveSection} />
+      <ChatbotButton setActiveSection={setActiveSection} activeSection={activeSection}/>
       <div className=' pt-6 min-h-screen w-full'>
         <Header setActiveSection={setActiveSection} language={language} setLanguage={setLanguage} />
-        <div className="pt-[100px] w-full">
+        <div className="pt-[100px] w-full flex flex-row justify-center">
           {activeSection === "home" && <Home setActiveSection={setActiveSection} language={language} />}
           {activeSection === "about" && <About language={language} />}
           {activeSection === "chatbot" && <Chatbot userInfo={userInfo} />}
@@ -38,9 +38,10 @@ function App() {
           {activeSection === "Template" && <Template />}
           {activeSection === "experience" && <ExperienceComponent language={language} />}
         </div>
+        <Footer />
 
       </div>
-      <Footer />
+
     </div>
   );
 }

diff --git a/legal-ai/src/components/ChatbotButton.js b/legal-ai/src/components/ChatbotButton.js
@@ -1,15 +1,12 @@
 "use client";
-import { useState, useRef, useEffect } from "react";
-
+import { useState, useEffect } from "react";
 
 import icon1 from "./icons/1.png";
 import icon2 from "./icons/2.png";
 // import icon3 from "./icons/3.png";
 // import icon4 from "./icons/4.png";
 
-
-const ChatbotButton = ({setActiveSection}) => {
-
+const ChatbotButton = ({ setActiveSection, activeSection }) => {
     const [iconSrc, setIconSrc] = useState(icon1);
     const images = [icon1, icon2];
 
@@ -23,26 +20,28 @@ const ChatbotButton = ({setActiveSection}) => {
         }, 500);
 
         return () => clearInterval(interval); // Cleanup interval on component unmount
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // Conditionally render the component
+    if (activeSection === "chatbot") {
+        return null; // Don't render anything if activeSection is "chatbot"
+    }
 
     return (
         <div className="fixed z-20 bottom-4 right-4">
-                <div>
-                    <img
-                        src={iconSrc}
-                        alt="icon"
-                        width={64}
-                        height={64}
-                        quality={100}
-                        className="w-auto h-auto cursor-pointer float-right"
-                        onClick={() => setActiveSection("questions")}
-                    />
-                </div>
-
+            <div>
+                <img
+                    src={iconSrc}
+                    alt="icon"
+                    width={64}
+                    height={64}
+                    quality={100}
+                    className="w-auto h-auto cursor-pointer float-right"
+                    onClick={() => setActiveSection("questions")}
+                />
+            </div>
         </div>
     );
 };
 
-export default ChatbotButton;
+export default ChatbotButton;
diff --git a/legal-ai/src/components/Header.js b/legal-ai/src/components/Header.js
@@ -38,7 +38,7 @@ const Header = ({ setActiveSection, language, setLanguage }) => {
           {translations[language].legalAI}
         </h1>
       </div>
-      <nav className="md:flex hidden space-x-6 mx-auto">
+      <nav className="middle lg:flex hidden absolute left-1/2 transform -translate-x-1/2 space-x-6">
         <button
           className="text-purple-300 hover:opacity-80 duration-300 "
           onClick={() => setActiveSection("home")}

diff --git a/legal-ai/src/components/Home.js b/legal-ai/src/components/Home.js
@@ -27,7 +27,7 @@ const Home = ({ setActiveSection, language }) => {
   // }, [text]);
 
   return (
-    <section className="min-h-screen bg-primary text-textPrimary flex flex-col justify-center items-center text-center space-y-8">
+    <section className="min-h-screen bg-primary text-textPrimary flex flex-col justify-center items-center text-center space-y-8 w-full">
 
       <div className='flex flex-col lg:flex-row h-auto lg:min-h-screen w-full lg:justify-center lg:items-start'>
         <motion.div
@@ -137,9 +137,9 @@ const Home = ({ setActiveSection, language }) => {
       </motion.div>
 
       <About language={language} />
-      <Uses/>
+      <Uses language={language} />
       <div  className='bg-white w-full text-center text-lg-start text-muted'>
-        <section className='d-flex justify-content-center justify-content-lg-between p-4 border-bottom'>
+        {/* <section className='d-flex justify-content-center justify-content-lg-between p-4 border-bottom'>
           <div className='mb-2 d-none d-lg-block'>
             <span>Get connected with us on social networks:</span>
           </div>
@@ -148,9 +148,9 @@ const Home = ({ setActiveSection, language }) => {
             <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2048px-Instagram_logo_2016.svg.png" alt="Instagram" className="w-6 h-6 hover:opacity-75" />
           </a>
             
-        </section>
+        </section> */}
 
-        <section className=' bg-white w-full'>
+        <section className=' bg-white w-full mt-16'>
           <div className='bg-white w-full text-center text-md-start mt-5'>
             <div className='flex flex-row mt-3'>
               <div className=' flex flex-col mx-auto mb-4'>
@@ -211,7 +211,7 @@ const Home = ({ setActiveSection, language }) => {
               </div> */}
 
               <div className='flex flex-col mx-auto mb-md-0 mb-4'>
-                <h6 className='text-uppercase fw-bold mb-4'>Contact</h6>
+                <h6 className='text-uppercase font-bold mb-2'>Contact</h6>
                 <p>
                   {/* <MDBIcon icon="home" className="me-2" /> */}
                   800 W Campbell Rd, Richardson, TX
@@ -224,6 +224,9 @@ const Home = ({ setActiveSection, language }) => {
                   {/* <MDBIcon icon="print" className="me-3" />  */}
                   + 1 469 947 4379
                 </p>
+                <a className='text-center me-4 flex items-center justify-center w-full  ' href="https://www.instagram.com/legal.ai_" target="_blank" rel="noopener noreferrer">
+                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2048px-Instagram_logo_2016.svg.png" alt="Instagram" className="w-6 h-6 hover:opacity-75" />
+                </a>
               </div>
             </div>
           </div>

diff --git a/legal-ai/src/components/Questions.js b/legal-ai/src/components/Questions.js
@@ -149,6 +149,11 @@ const Questions = ({ isOpen, onClose, handleSubmit }) => {
                                         onClick={() => setBackground('married_with_issues')}>
                                         Married with Issues
                                     </button>
+                                    <button
+                                        className={`py-3 px-6 rounded-lg text-md ${background === 'married_with_issues' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
+                                        onClick={() => setBackground('immigrant')}>
+                                        Immigrant
+                                    </button>
                                     <button
                                         className={`py-3 px-6 rounded-lg text-md ${background === 'employed_with_issues' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
                                         onClick={() => setBackground('employed_with_issues')}>
@@ -157,7 +162,7 @@ const Questions = ({ isOpen, onClose, handleSubmit }) => {
                                     <button
                                         className={`py-3 px-6 rounded-lg text-md ${background === 'seeking_advice' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
                                         onClick={() => setBackground('seeking_advice')}>
-                                        Seeking Legal Advice
+                                        Seeking legal advice for business
                                     </button>
                                     <button
                                         className={`py-3 px-6 rounded-lg text-md ${background === 'others' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}

diff --git a/legal-ai/src/components/Uses.js b/legal-ai/src/components/Uses.js
@@ -1,43 +1,61 @@
 import React, { useState, useEffect, useRef } from "react";
 import { motion, useAnimation } from "framer-motion";
 import './index.css';
-const sections = {
-    "Students": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for students</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-    "Workers": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for workers</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-    "Couples": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for couples</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-    "Businesses": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for businesses</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-};
+import translations from '../translations'; // Import translations
 
-const App = () => {
-    const [activeSection, setActiveSection] = useState("Students");
+
+const App = ({language}) => {
+    const sections = {
+        "Individuals": (
+            <div className="">
+                <h2 className="text-white text-3xl font-bold mb-4">{translations[language].individualsHeader}</h2>
+                <p className="text-purple-300 ">
+                    {translations[language].individuals}
+                </p>
+            </div>
+        ),
+        "Students": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for students</h2>
+                <p className="text-purple-300 ">
+                    Students often encounter legal questions related to academic integrity, housing rights, and student loans. LegalAI can help students understand their rights in educational settings and provide insights into financial agreements. This ensures they are well-informed, enabling them to focus on their studies while being aware of their legal protections.
+                </p>
+            </div>
+        ),
+        "Workers": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for workers</h2>
+                <p className="text-purple-300 ">
+                    Workers can benefit significantly from LegalAI when it comes to understanding their employment rights, such as wage disputes, workplace harassment, and benefits. This chatbot can help employees identify their rights and provide information on how to address workplace issues. With LegalAI, workers are empowered to stand up for themselves and seek justice in the workplace.
+                </p>
+            </div>
+        ),
+        "Immigrants": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for immigrants</h2>
+                <p className="text-purple-300 ">
+                    For those navigating the complexities of immigration law, LegalAI can offer vital information on visas, green cards, and citizenship processes. It helps users understand the requirements and documents needed for their immigration journey, providing peace of mind during what can be a stressful and uncertain time.
+                </p>
+            </div>
+        ),
+        "Couples": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for couples</h2>
+                <p className="text-purple-300 ">
+                    For couples, understanding legal implications in areas like marriage, divorce, and property rights is essential. LegalAI can provide guidance on prenuptial agreements, custody arrangements, and division of assets. This resource helps couples navigate their legal responsibilities and rights, fostering better communication and planning for their future together.
+                </p>
+            </div>
+        ),
+        "Businesses": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for businesses</h2>
+                <p className="text-purple-300 ">
+                    For small business owners, LegalAI is an invaluable resource for understanding compliance, contracts, and employment law. It can answer common questions about business formation, licensing, and intellectual property, allowing entrepreneurs to focus on growing their businesses with confidence, knowing they have access to legal support when needed.
+                </p>
+            </div>
+        ),
+    };
+    const [activeSection, setActiveSection] = useState("Individuals");
     const controls = useAnimation();
     const ref = useRef(null);
 

diff --git a/legal-ai/src/components/chatbot.js b/legal-ai/src/components/chatbot.js
@@ -154,9 +154,10 @@ const Chatbot = ({ userInfo }) => {
   };
 
   return (
-    <section className="mb-14 flex justify-center items-center w-screen">
-      <div className="bg-transparent shadow-lg rounded-lg px-8 w-full flex justify-center items-center flex-col">
-        <div className="flex items-center justify-center flex-col">
+    <section className="mb-14 flex justify-center items-center w-[90vw]">
+      <div className="bg-transparent shadow-lg rounded-lg w-full flex justify-center items-center flex-col">
+        <div className="flex w-full items-center justify-center flex-col">
+
           <img src="/logo.png" alt="logo" className="h-8 w-8" />
           <p className="text-white">Mike</p>
           <p className="text-white opacity-70 text-[12px]">By Shower Champions</p>