add frontend application

frontend/App.css

+@media screen and (max-width: 400px) {
+  #features {
+    padding: 20px;
+    width: 111%;
+  }
+  #about,
+  #services,
+  #testimonials,
+  #team,
+  #contact,
+  #footer {
+    width: 111%;
+  }
+
+  #portfolio {
+    width: 110%;
+  }
+}

frontend/App.jsx

+import React, { useState, useEffect } from "react";
+
+import JsonData from "./data/data.json";
+import SmoothScroll from "smooth-scroll";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Login from "./components/login";
+import Home from "./components/home";
+import {Testimonials} from "./components/testimonials";
+import {Header} from "./components/header";
+import Register from "./components/register";
+
+import "./App.css";
+
+export const scroll = new SmoothScroll('a[href*="#"]', {
+  speed: 1000,
+  speedAsDuration: true,
+});
+
+const App = () => {
+  const [landingPageData, setLandingPageData] = useState({});
+  useEffect(() => {
+    setLandingPageData(JsonData);
+  }, []);
+
+
+  return (
+      <Router>
+        <Routes>
+          <Route exact path="/" element={<Login />} />
+          <Route exact path="/home" element={<Home />} />
+          <Route exact path="/register" element={<Register />} />
+          <Route exact path="/register" element={<Register />} />
+          <Route exact path="/summarizing" element={<Header  data={landingPageData.Testimonials} />} />
+          <Route exact path="/support" element={<Testimonials  data={landingPageData.Testimonials} />} />
+        </Routes>
+      </Router>
+      
+  );
+};
+
+export default App;

frontend/component/about.jsx

+import React from "react";
+import image from '../images/image.png'
+import { Link } from "react-router-dom";
+
+export const About = (props) => {
+  return (
+    <div id="about">
+      <div className="">
+        <div className="row">
+          <div className="col-xs-12 col-md-12">
+            {" "}
+            <img src={image} style={{ width: '100vw', objectFit: 'contain' }} alt="" />{" "}
+          </div>
+          <div className="col-xs-12 col-md-7" style={{ paddingInline: '5vw' }}>
+            <div>
+              <h2>Intelligent Support Services</h2>
+              <p style={{color:'#BBBBBB'}}>In Which Intelligent Support Services Are We provide?</p>
+              <p style={{fontWeight:'initial'}}>Bringing Al to the courtroom in order to make Sri Lanka a more just nation by increasing the availability
+                of justice for the general public by allowing judges and lawyers to handle more cases with comparability
+                reduced effort and time</p>
+            </div>
+          </div>
+          
+          <div className="col-xs-12 col-md-5">
+            <div className="row" style={{ display: 'flex', justifyContent: 'center' }}>
+          <Link to="/support" className="page-scroll">
+            
+              <div style={{ marginTop: '10px', width: '180px', textAlign: 'center' }} className="col-xs-3 col-md-4">
+                <p style={{ textAlign: 'center' }}>Q and A <br />Support</p>
+                <i style={{ textAlign: 'center' }} className="fa fa-group"></i>
+
+              </div> 
+              </Link>
+          <Link to="/Summarizing" className="page-scroll">
+
+              <div style={{ marginTop: '10px', width: '180px', textAlign: 'center' }} className="col-xs-3 col-md-4">
+                <p style={{ textAlign: 'center' }}>Content Summarizing Support</p>
+                <i className="fa fa-book"></i>
+
+              </div>
+</Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div >
+  );
+};

frontend/component/features.jsx

+import React from "react";
+
+export const Features = (props) => {
+  return (
+    <div id="features" className="text-center">
+      <div className="container">
+        <div className="col-md-12">
+          <h2 className="small-text">By analysing:</h2>
+        </div>
+        <div className="row" style={{display:'flex',justifyContent:'center'}}>
+          {props.data
+            ? props.data.map((d, i) => (
+                <div key={`${d.title}-${i}`} style={{marginInline:'30px', marginTop:'10px'}} className="col-xs-3 col-md-1">
+                  {" "}
+                  <i className={d.icon}></i>
+                  <p>{d.title}</p>
+                  {/* <p>{d.text}</p> */}
+                </div>
+              ))
+            : "Loading..."}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/component/header.jsx

+import React ,{CSSProperties}from "react";
+import axios from 'axios';
+import BarLoader from "react-spinners/ClipLoader";
+import { Navigation } from "../components/navigation";
+
+import image from '../images/image.png'
+
+const options = ["facts of the case", "judicial reasoning"];
+const override= {
+  display: "block",
+  margin: "0 auto",
+  borderColor: "red",
+};
+
+export const Header = (props) => {
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [selected, setSelected] = React.useState(options[0]);
+  const [response, setResponse] = React.useState({
+    "violationData": {
+        "Court": "the Supreme Court",
+        "DocumentShouldBring": "medical evidence Documents",
+        "Lawyers": "Shantha Jayawardena with Niranjan Arulpragasam , Upul Kumarapperuma , Ms. Nayomi Wickramasekera",
+        "Suggetion": "Considering all these things, we hold that the Petitioners have not presented their  case to the satisfaction of this Court. We therefore can’t rely on the complaint of both  Petitioners. For the above reasons, we dismiss the Petition of the Petitioner."
+    },
+    "violationType": "article 11. of the constitution"
+});
+  const handleSubmit = async(event) => {
+    event.preventDefault()
+    setIsLoading(false)
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+    try {
+      const resp = await axios({
+        method: "post",
+        url: "http://ec2-13-229-183-94.ap-southeast-1.compute.amazonaws.com:5006/summary",
+        data: formData,
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      console.log("🚀 ~ file: header.jsx:16 ~ handleSubmit ~ response:", resp)
+      setResponse(resp)
+      setIsLoading(true)
+    } catch(error) {
+      console.log(error)
+    }
+  }
+  const handleFileSelect = (event) => {
+    setSelectedFile(event.target.files[0])
+  }
+  return (
+    <div><Navigation />
+    <header id="header" style={{marginTop:'20vh'}}>
+         <img src={image} style={{ width: '100vw', objectFit: 'contain',height:'30vh' }} alt="" />{" "}
+      <div className="intro">
+        <div className="overlay">
+          <div className="container">
+            <div className="row">
+              <div className="col-md-12 ">
+                <h1 className="large-text">
+                Case Summarizing Support For A Better Decision To Get Started, Upload The Case File
+                  <span></span>
+                </h1>
+
+                <p  style={{ textTransform: 'capitalize' }} className="small-text">To Get Started, Upload A Case File</p>
+              <div className="col-md-2">
+                
+                <input type="file" onChange={handleFileSelect}/>
+                </div><div className="col-md-2">
+                
+                <select  value={selected} 
+       onChange={e => setSelected(e.target.value)}>
+        {options.map((value) => (
+          <option value={value} key={value}>
+            {value}
+          </option>
+        ))}
+      </select>
+      
+                </div>
+             
+                <div className="col-md-12">
+      <button
+              type="submit"
+              form="myForm"
+              className="btn btn-custom btn-lg page-scroll"
+              alt="submit Checkout"
+              style={{marginBlock:'20px'}}
+              onClick={handleSubmit}
+            >
+              submit 
+            </button>
+      <BarLoader loading={!isLoading} height={1} width={1} color="#36d7b7" />
+
+            </div>
+                {/* <a
+                  href="#features"
+                  style={{ textTransform: 'capitalize' }}
+                  className="btn btn-custom btn-lg page-scroll"
+                >
+                  Build a graph and predict the decision
+                </a>{" "} */}
+              </div>
+            </div>
+            {response&&<div style={{ backgroundColor: "#F6ECE8" }}>
+              <div className="testimonial">
+                <div className="testimonial-content">
+                  <div>
+                <div className="col-md-3">
+      <button
+              type="submit"
+              form="myForm"
+              className="btn btn-custom btn-lg page-scroll"
+              alt="submit Checkout"
+              onClick={handleSubmit}
+            >
+              save
+            </button></div> <div className="col-md-3">
+      <button
+              type="submit"
+              form="myForm"
+              className="btn btn-custom btn-lg page-scroll"
+              alt="submit Checkout"
+              onClick={handleSubmit}
+            >
+              print
+            </button></div> <div className="col-md-6">
+      <button
+              type="submit"
+              form="myForm"
+              className="btn btn-custom btn-lg page-scroll"
+              alt="submit Checkout"
+              onClick={handleSubmit}
+            >
+              share
+            </button></div></div>
+                  <div className="testimonial-meta" style={{marginTop:'20px',color:'black'}}>Court: {response?.violationData?.Court}</div>
+                  <p style={{marginTop:'10px',color:'black'}}> DocumentShouldBring: {response?.violationData?.DocumentShouldBring}</p>
+                  <p style={{marginTop:'10px',color:'black'}}> Lawyers: {response?.violationData?.Lawyers}</p>
+                  <p style={{marginTop:'10px',color:'black'}}> Suggetion: {response?.violationData?.Suggetion}</p>
+                  <p style={{marginTop:'10px',color:'black'}}> violationType: {response?.violationType}</p>
+                </div>
+              </div>
+            </div>}
+          </div>
+        </div>
+      </div>
+    </header>
+    </div>
+  );
+};

frontend/component/home.jsx

+import React, { useState, useEffect } from "react";
+import { Navigation } from "../components/navigation";
+import { Header } from "../components/header";
+import { Features } from "../components/features";
+import { About } from "../components/about";
+import { Testimonials } from "../components/testimonials";
+
+import JsonData from "../data/data.json";
+import SmoothScroll from "smooth-scroll";
+
+import "../App.css";
+
+export const scroll = new SmoothScroll('a[href*="#"]', {
+  speed: 1000,
+  speedAsDuration: true,
+});
+
+const App = () => {
+  const [landingPageData, setLandingPageData] = useState({});
+  useEffect(() => {
+    setLandingPageData(JsonData);
+  }, []);
+
+  return (
+    <div>
+     
+      <Navigation />
+      <About data={landingPageData.About} />
+      {/* <Header data={landingPageData.Header} /> */}
+      <Features data={landingPageData.Features} />
+      {/* <Testimonials data={landingPageData.Testimonials} /> */}
+     
+    </div>
+  );
+};
+
+export default App;

frontend/component/image.jsx

+import React from "react";
+
+export const Image = ({ title, largeImage, smallImage }) => {
+  return (
+    <div className="portfolio-item">
+      <div className="hover-bg">
+        {" "}
+        <a href={largeImage} title={title} data-lightbox-gallery="gallery1">
+          <div className="hover-text">
+            <h4>{title}</h4>
+          </div>
+          <img src={smallImage} className="img-responsive" alt={title} />{" "}
+        </a>{" "}
+      </div>
+    </div>
+  );
+};

frontend/component/login.css

+.login {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .login__container {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    /* background-color: #dcdcdc; */
+    padding: 30px;
+    width: 30%;
+    margin-left: 40%;
+    margin-top: -1%;
+  }
+  .login__textBox {
+    padding: 10px;
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .login__btn {
+    padding: 10px;
+    font-size: 18px;
+    margin-bottom: 10px;
+    border: none;
+    color: white;
+    background-color: #BBBBBB;
+  }
+  .login__google {
+    background-color: #4285f4;
+  }
+  .login div {
+    margin-top: 7px;
+  }
\ No newline at end of file

frontend/component/login.jsx

+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { auth, logInWithEmailAndPassword, signInWithGoogle } from "../firebase";
+import { useAuthState } from "react-firebase-hooks/auth";
+import "./login.css";
+import image from '../images/image.png'
+
+function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [user, loading, error] = useAuthState(auth);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (loading) {
+      // maybe trigger a loading screen
+      return;
+    }
+    // if (user) navigate("/home");
+  }, [user, loading]);
+  const userLogin=async(email, password)=>{
+    console.log('email, password',email, password)
+    // await logInWithEmailAndPassword(email, password)
+    if(await logInWithEmailAndPassword(email, password)){
+      navigate("/home")
+    }
+  
+
+  }
+  return (
+    <div className="">
+       <img src={image} style={{ width: '100vw', objectFit: 'contain' }} alt="" />{" "}
+      <div className="login__container" >
+        <input
+          type="text"
+          className="login__textBox"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="E-mail Address"
+        />
+        <input
+          type="password"
+          className="login__textBox"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <button
+          className="login__btn"
+          onClick={() => userLogin(email, password)}
+        >
+          Login
+        </button>
+        <button className="login__btn login__google" onClick={signInWithGoogle}>
+          Login with Google
+        </button>
+        <div>
+          <Link to="/reset">Forgot Password</Link>
+        </div>
+        <div>
+          Don't have an account? <Link to="/register">Register</Link> now.
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Login;
\ No newline at end of file

frontend/component/navigation.jsx

+import React from "react";
+import logo from "../images/logo.png"
+import { Link } from "react-router-dom";
+import {
+  auth,
+  registerWithEmailAndPassword,
+  logout,
+} from "../firebase";
+export const Navigation = (props) => {
+  return (
+    <nav id="menu" className="navbar navbar-default navbar-fixed-top">
+      <div className="">
+        <div
+          className="collapse navbar-collapse"
+          id="bs-example-navbar-collapse-1"
+        >
+          <ul className="nav navbar-nav navbar-left">
+
+            <li>
+              <img style={{ width: '170px', height: '150px' }} src={logo} alt="" />{" "}
+
+            </li>
+            <li>
+              <p className="navbar-brand page-scroll" href="#page-top">
+                Ceylon LawMate<span className="navbar-brand-text" style={{}}><br /><br/>Bringing Data into the Sri lankan Courtroom</span>
+              </p>
+            </li>
+
+          </ul>
+          <ul className="nav navbar-nav navbar-right" style={{marginTop:'40px'}}>
+            <li>
+              <a href="/home" className="page-scroll">
+                Home
+              </a>
+            </li>
+            <li>
+              <a href="#about" className="page-scroll">
+                Services
+              </a>
+            </li>
+            <li>
+              <a href="#services" className="page-scroll">
+                About
+              </a>
+            </li>
+            <li>
+              <Link to="/" className="page-scroll">
+               Log in
+              </Link>
+            </li>
+            
+            <li>
+              <a href="#contact" className="page-scroll">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};

frontend/component/register.css

+.register {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.register__container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  /* background-color: #dcdcdc; */
+  padding: 30px;
+  padding: 30px;
+  width: 30%;
+  margin-left: 40%;
+  margin-top: -1%;
+}
+.register__textBox {
+  padding: 10px;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.register__btn {
+  padding: 10px;
+  font-size: 18px;
+  margin-bottom: 10px;
+  border: none;
+  color: white;
+  background-color: black;
+}
+.register__google {
+  background-color: #4285f4;
+}
+.register div {
+  margin-top: 7px;
+}
\ No newline at end of file

frontend/component/register.jsx

+import React, { useEffect, useState } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  auth,
+  registerWithEmailAndPassword,
+  signInWithGoogle,
+} from "../firebase";
+import "../components/register.css";
+import image from '../images/image.png'
+
+function Register() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [user, loading, error] = useAuthState(auth);
+  // const history = useHistory();
+  const navigate = useNavigate();
+  const register = async() => {
+    if (!name) alert("Please enter name");
+    if(await registerWithEmailAndPassword(name, email, password)){
+      navigate("/home")
+    }
+  };
+  useEffect(() => {
+    if (loading) return;
+    // if (user) navigate('/home');;
+  }, [user, loading]);
+  return (
+    <div className="">
+      <img src={image} style={{ width: '100vw', objectFit: 'contain' }} alt="" />{" "}
+      <div className="register__container">
+        <input
+          type="text"
+          className="register__textBox"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Full Name"
+        />
+        <input
+          type="text"
+          className="register__textBox"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="E-mail Address"
+        />
+        <input
+          type="password"
+          className="register__textBox"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <button className="register__btn" onClick={register}>
+          Register
+        </button>
+        <button
+          className="register__btn register__google"
+          onClick={signInWithGoogle}
+        >
+          Register with Google
+        </button>
+        <div>
+          Already have an account? <Link to="/">Login</Link> now.
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Register;
\ No newline at end of file

frontend/component/testimonials.jsx

+import React, { useState } from "react";
+import myGif from "../images/gif.gif";
+import axios from "axios";
+import BarLoader from "react-spinners/ClipLoader";
+import { Navigation } from "../components/navigation";
+
+export const Testimonials = (props) => {
+  const [commentText, setCommentText] = useState("");
+  const [isLoading, setIsLoading] = React.useState(true);
+ 
+  const [response, setResponse] = useState({
+    "answer": "-",
+    "reference": "-"
+});
+
+  const handleOnSubmit = (event) => {
+    event.preventDefault();
+    setIsLoading(false)
+    console.log(commentText);
+    axios
+      .post(
+        "http://ec2-13-229-183-94.ap-southeast-1.compute.amazonaws.com:5006/qna",
+        {
+          question:
+          commentText,
+        }
+      )
+      .then((response) => {
+        console.log(
+          "🚀 ~ file: testimonials.jsx:15 ~ .then ~ response:",
+          response
+        );
+        setIsLoading(true)
+        setResponse(response.data);
+      });
+  };
+
+  return (<div><Navigation />
+    <div id="testimonials" style={{marginTop:'20vh'}}>
+      <div className="container-fluid">
+        <div className="section-title text-center">
+          {/* <h2>What our clients say</h2> */}
+        </div>
+          
+          <div
+            className="col-md-12"
+            style={{
+              border: "solid #F6ECE8 1px",
+              height: "80vh",
+              marginLeft: "30px",
+            }}
+          >
+            <textarea
+              name="commentTextArea"
+              type="text"
+              style={{width:'90vw',height:'60%'}}
+              id="CommentsOrAdditionalInformation"
+              value={commentText}
+              onChange={(e) => setCommentText(e.target.value)}
+            />
+            <button
+              type="submit"
+              form="myForm"
+              className="btn btn-custom btn-lg page-scroll"
+              alt="submit Checkout"
+              style={{marginBlock:'20px'}}
+              onClick={handleOnSubmit}
+            >
+              submit
+            </button>
+      <BarLoader loading={!isLoading} height={1} width={1} color="#36d7b7" />
+
+            {response&&<div style={{ backgroundColor: "#F6ECE8" }}>
+              <div className="testimonial">
+                <div className="testimonial-content">
+                  <div className="testimonial-meta">Answer: {response?.answer}</div>
+                  <p style={{marginTop:'10px'}}> Reference: {response?.reference}</p>
+                </div>
+              </div>
+            </div>}
+          </div>
+          {/* <div
+            className="col-md-4"
+            style={{
+              border: "solid #F6ECE8 1px",
+              height: "80vh",
+              marginLeft: "30px",
+            }}
+          >
+            <img
+              src={myGif}
+              alt="my-gif"
+              style={{ height: "70%", width: "100%", objectFit: "cover" }}
+            />
+            <div>
+              <div
+                className="testimonial"
+                style={{ border: "solid #F6ECE8 1px" }}
+              >
+                <div className="testimonial-content">
+                  <div className="testimonial-meta">i- Prediction</div>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Praesent ac risus nisi. Duis al blandit eros. Pellentesque
+                    pretiumLorem ipsum dolor sit amet, consectetur adipiscing
+                    elit. Praesent ac risus nisi. Duis al blandit eros.
+                    Pellentesque pretium
+                  </p>
+                </div>
+              </div> */}
+            {/* </div> */}
+          {/* </div> */}
+      </div>
+      </div>
+    </div>
+  );
+};

frontend/data/data.json

+{
+  "Header": {
+    "title": "Case summarizing support for a better decision To get started, upload the case file",
+    "paragraph": "To get started, upload a case file"
+  },
+  "About": {
+    "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    "Why": [
+      "Lorem ipsum dolor",
+      "Tempor incididunt",
+      "Lorem ipsum dolor",
+      "Incididunt ut labore"
+    ],
+    "Why2": [
+      "Aliquip ex ea commodo",
+      "Lorem ipsum dolor",
+      "Exercitation ullamco",
+      "Lorem ipsum dolor"
+    ]
+  },
+  "Gallery": [
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/01-large.jpg",
+      "smallImage": "img/portfolio/01-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/02-large.jpg",
+      "smallImage": "img/portfolio/02-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/03-large.jpg",
+      "smallImage": "img/portfolio/03-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/04-large.jpg",
+      "smallImage": "img/portfolio/04-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/05-large.jpg",
+      "smallImage": "img/portfolio/05-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/06-large.jpg",
+      "smallImage": "img/portfolio/06-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/07-large.jpg",
+      "smallImage": "img/portfolio/07-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/08-large.jpg",
+      "smallImage": "img/portfolio/08-small.jpg"
+    },
+    {
+      "title": "Project Title",
+      "largeImage": "img/portfolio/09-large.jpg",
+      "smallImage": "img/portfolio/09-small.jpg"
+    }
+  ],
+  "Services": [
+    {
+      "icon": "fa fa-wordpress",
+      "name": "Lorem ipsum dolor",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
+    },
+    {
+      "icon": "fa fa-cart-arrow-down",
+      "name": "Consectetur adipiscing",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
+    },
+    {
+      "icon": "fa fa-cloud-download",
+      "name": "Lorem ipsum dolor",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
+    },
+    {
+      "icon": "fa fa-language",
+      "name": "Consectetur adipiscing",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
+    },
+    {
+      "icon": "fa fa-plane",
+      "name": "Lorem ipsum dolor",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
+    },
+    {
+      "icon": "fa fa-pie-chart",
+      "name": "Consectetur adipiscing",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
+    }
+  ],
+  "Testimonials": [
+    {
+      "img": "#FFFFFF",
+      "text": "This prediction Is supported by the following sources",
+      "name": "The sources that are used to predict"
+    },
+    {
+      "img": "#C0BEBD",
+      "text": "Title and / or reference number of the case file",
+      "name": "Current case file"
+    },
+    {
+      "img": "#FFFFFF",
+      "text": "Title and / or reference number of the source",
+      "name": "01 source to the prediction"
+    },
+    {
+      "img": "#F6ECE8",
+      "text": "Title and / or reference number of the source",
+      "name": "02 source to the prediction"
+    },
+    {
+      "img": "#FFFFFF",
+      "text": "Title and / or reference number of the source",
+      "name": "03 source to the prediction"
+    },
+    {
+      "img": "#FFFFFF",
+      "text": "Title and / or reference number of the source",
+      "name": "04 source to the prediction"
+    }
+  ],
+  "Team": [
+    {
+      "img": "img/team/01.jpg",
+      "name": "John Doe",
+      "job": "Director"
+    },
+    {
+      "img": "img/team/02.jpg",
+      "name": "Mike Doe",
+      "job": "Senior Designer"
+    },
+    {
+      "img": "img/team/03.jpg",
+      "name": "Jane Doe",
+      "job": "Senior Designer"
+    },
+    {
+      "img": "img/team/04.jpg",
+      "name": "Karen Doe",
+      "job": "Project Manager"
+    }
+  ],
+  "Contact": {
+    "address": "4321 California St, San Francisco, CA 12345 ",
+    "phone": "+1 123 456 1234",
+    "email": "info@company.com",
+    "facebook": "fb.com",
+    "twitter": "twitter.com",
+    "youtube": "youtube.com"
+  },
+  "Features": [
+    {
+      "icon": "fa fa-book",
+      "title": "Constitution of Sri Lanka",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },
+    {
+      "icon": "fa fa-lastfm",
+      "title": "Penal Code of Sri Lanka",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },
+    {
+      "icon": "fa fa-calendar-o",
+      "title": "Acts",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },
+    {
+      "icon": "fa fa-drupal",
+      "title": "Local Previous Cases",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },  {
+      "icon": "fa fa-bullhorn",
+      "title": "Internationa Cases",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },
+    {
+      "icon": "fa fa-group",
+      "title": "International Treaties",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },
+    {
+      "icon": "fa fa-institution",
+      "title": "Reference Books",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    },{
+      "icon": "fa fa-newspaper-o",
+      "title": "Research Articles",
+      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
+    }
+  ]
+}

frontend/firebase.js

+import { initializeApp } from "firebase/app";
+import {GoogleAuthProvider,getAuth,signInWithPopup, signInWithEmailAndPassword,createUserWithEmailAndPassword, sendPasswordResetEmail ,signOut} from "firebase/auth";
+import {getFirestore,query,getDocs,collection,where, addDoc} from "firebase/firestore";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyAoPfOqaCqV9TbOdcbWCGYdX9cU8HDFFgU",
+    authDomain: "ceylon-law.firebaseapp.com",
+    projectId: "ceylon-law",
+    storageBucket: "ceylon-law.appspot.com",
+    messagingSenderId: "1012913036810",
+    appId: "1:1012913036810:web:b38d082586ad095343c9f3"
+  };
+  const app =initializeApp(firebaseConfig);
+    const auth = getAuth(app);
+  const db = getFirestore(app);
+  
+  const googleProvider = new GoogleAuthProvider();
+const signInWithGoogle = async () => {
+  try {
+    const res = await signInWithPopup(auth, googleProvider);
+    const user = res.user;
+    const q = query(collection(db, "users"), where("uid", "==", user.uid));
+    const docs = await getDocs(q);
+    if (docs.docs.length === 0) {
+      await addDoc(collection(db, "users"), {
+        uid: user.uid,
+        name: user.displayName,
+        authProvider: "google",
+        email: user.email,
+      });
+    }
+  } catch (err) {
+    console.error(err);
+    alert(err.message);
+  }
+};
+const logInWithEmailAndPassword = async (email, password) => {
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      return true;
+    } catch (err) {
+      
+      console.error(err);
+      alert(err.message);
+      return false;
+    }
+  };
+  const registerWithEmailAndPassword = async (name, email, password) => {
+    try {
+      const res = await createUserWithEmailAndPassword(auth, email, password);
+      const user = res.user;
+      await addDoc(collection(db, "users"), {
+        uid: user.uid,
+        name,
+        authProvider: "local",
+        email,
+      });
+      return true
+    } catch (err) {
+      console.error(err);
+      alert(err.message);
+      return false
+    }
+  };
+  const sendPasswordReset = async (email) => {
+    try {
+      await sendPasswordResetEmail(auth, email);
+      alert("Password reset link sent!");
+    } catch (err) {
+      console.error(err);
+      alert(err.message);
+    }
+  };
+  const logout = () => {
+    signOut(auth);
+  };
+
+export {
+    auth,
+    db,
+    signInWithGoogle,
+    logInWithEmailAndPassword,
+    registerWithEmailAndPassword,
+    sendPasswordReset,
+    logout,
+  };
\ No newline at end of file

frontend/index.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

frontend/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

frontend/serviceWorker.js

+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

frontend/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';