[Feature] Merge new landing service

Author: MarSH-Up

src/pages/Home.tsx

@@ -1,12 +1,15 @@
-import { Box, Typography, Button, Container } from "@mui/material";
+import { Box, Typography, Button, Container, Grid } from "@mui/material";
+import { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
 import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { fetchRegistry } from "redux/neurojson/neurojson.action";
 import { NeurojsonSelector } from "redux/neurojson/neurojson.selector";
 
 const Home: React.FC = () => {
+	const navigate = useNavigate();
 	const dispatch = useAppDispatch();
 	const { registry } = useAppSelector(NeurojsonSelector);
 
@@ -15,12 +18,73 @@ const Home: React.FC = () => {
 	}, [dispatch]);
 
 	return (
-		<Container style={{ width: "100%", height: "100vh", padding: 0 }}>
-			{registry && registry.length > 0 ? (
-				<NeuroJsonGraph registry={registry} />
-			) : (
-				<div>No data available to display</div>
-			)}
+		<Container
+			style={{
+				minWidth: "100%",
+				height: "100vh",
+				padding: 0,
+				overflow: "hidden",
+				position: "relative",
+			}}
+		>
+			<Box
+				sx={{
+					zIndex: "2",
+					position: "relative",
+					width: "100%",
+					overflow: "hidden",
+				}}
+			>
+				{registry && registry.length > 0 ? (
+					<NeuroJsonGraph registry={registry} />
+				) : (
+					<div>No data available to display</div>
+				)}
+			</Box>
+
+			<Box
+				sx={{
+					maxWidth: "42%",
+					zIndex: "3",
+					position: "absolute",
+					top: "10%",
+					left: "5%",
+					backgroundColor: "rgba(255, 255, 255, 0.8)",
+					padding: "1.5rem",
+					borderRadius: "8px",
+					boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+				}}
+			>
+				{/* Header Section */}
+				<Typography
+					variant="h3"
+					gutterBottom
+					sx={{ color: Colors.primary.dark }}
+				>
+					Discover NeuroJSON IO
+				</Typography>
+				<Typography variant="body1" sx={{ color: Colors.textSecondary }}>
+					Efficiently manage and explore your CouchDB databases and datasets
+					with ease.
+				</Typography>
+
+				{/* Navigation to Database Page */}
+				<Box mt={4}>
+					<Button
+						variant="contained"
+						sx={{
+							backgroundColor: Colors.primary.main,
+							color: Colors.white,
+							"&:hover": {
+								backgroundColor: Colors.primary.dark,
+							},
+						}}
+						onClick={() => navigate("/databases")}
+					>
+						View Databases
+					</Button>
+				</Box>
+			</Box>
 		</Container>
 	);
 };

src/services/couchDb.service.ts

@@ -1,12 +1,12 @@
 import axios from "axios";
 
-const COUCHDB_URL = "http://127.0.0.1:5984"; // CouchDB URL
+const baseURL = "http://127.0.0.1:5984"; // CouchDB URL
 const username = "admin"; // Replace with your username
 const password = "mypassword"; // Replace with your password
 
 export const fetchDatabases = async (): Promise<string[]> => {
 	try {
-		const response = await axios.get(`${COUCHDB_URL}/_all_dbs`, {
+		const response = await axios.get(`${baseURL}/_all_dbs`, {
 			auth: { username, password },
 			headers: { Accept: "application/json" },
 		});
@@ -24,7 +24,7 @@ export const fetchDatabases = async (): Promise<string[]> => {
 
 export const fetchDocuments = async (dbName: string): Promise<any[]> => {
 	try {
-		const response = await axios.get(`${COUCHDB_URL}/${dbName}/_all_docs`, {
+		const response = await axios.get(`${baseURL}/${dbName}/_all_docs`, {
 			auth: { username, password },
 			params: { include_docs: true },
 		});
@@ -41,7 +41,7 @@ export const fetchDocumentById = async (
 	documentId: string
 ): Promise<any> => {
 	try {
-		const response = await axios.get(`${COUCHDB_URL}/${dbName}/${documentId}`, {
+		const response = await axios.get(`${baseURL}/${dbName}/${documentId}`, {
 			auth: { username, password },
 		});
 
@@ -63,7 +63,7 @@ export const fetchPaginatedDocument = async (
 ): Promise<any[]> => {
 	try {
 		console.log("Fetching paginated data:", { dbName, offset, limit });
-		const response = await axios.get(`${COUCHDB_URL}/${dbName}/_all_docs`, {
+		const response = await axios.get(`${baseURL}/${dbName}/_all_docs`, {
 			auth: { username, password },
 			params: { skip: offset, limit, include_docs: true },
 		});