diff --git a/Frontend/App.css b/Frontend/App.css
new file mode 100644
index 0000000..9df32c3
--- /dev/null
+++ b/Frontend/App.css
@@ -0,0 +1,145 @@
+body {
+ font-family: 'Raleway', sans-serif;
+ background-color: #3B3D3B;
+}
+.wrapper {
+ width: 800px;
+ height: 600px;
+ position: relative;
+ margin: 3% auto;
+ box-shadow: 2px 18px 70px 0px #9D9D9D;
+ overflow: hidden;
+}
+
+.login-text {
+ width: 800px;
+ height:450px;
+ background: linear-gradient(to left, #ab68ca, #de67a3);
+ position: absolute;
+ top: -300px;
+ box-sizing: border-box;
+ padding: 6%;
+ transition: all 0.5s ease-in-out;
+ z-index: 11;
+}
+
+.text {
+ margin-left: 20px;
+ color: #fff;
+ display: none;
+ transition: all 0.5s ease-in-out;
+ transition-delay: 0.3s;
+
+ a, a:visited {
+ font-size: 36px;
+ color: #fff;
+ text-decoration: none;
+ font-weight: bold;
+ display: block;
+ }
+
+ hr {
+ width: 10%;
+ float: left;
+ background-color: #fff;
+ font-size: 16px;
+ }
+
+ input {
+ margin-top: 30px;
+ height: 40px;
+ width: 300px;
+ border-radius: 2px;
+ border: none;
+ background-color: #444;
+ opacity: 0.6;
+ outline: none;
+ color: #fff;
+ padding-left: 10px;
+ }
+
+ input[type=text] {
+ margin-top: 60px;
+ }
+
+ button {
+ margin-top: 60px;
+ height: 40px;
+ width: 140px;
+ outline: none;
+ }
+
+ .login-btn {
+ background: #fff;
+ border: none;
+ border-radius: 2px;
+ color: #696a86;
+ }
+
+ .signup-btn {
+ background: transparent;
+ border: 2px solid #fff;;
+ border-radius: 2px;
+ color: #fff;
+ margin-left: 30px;
+ }
+}
+
+.cta {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ background: #696a86;
+ border: 2px solid #fff;
+ position: absolute;
+ bottom: -30px;
+ left: 370px;
+ color: #fff;
+ outline: none;
+ cursor: pointer;
+ z-index: 11;
+}
+
+.call-text {
+ background-color: #fff;
+ width: 800px;
+ height: 450px;
+ position: absolute;
+ bottom: 0;
+ padding: 10%;
+ box-sizing: border-box;
+ text-align: center;
+
+ h1 {
+ font-size: 42px;
+ margin-top: 10%;
+ color: #696a86;
+
+ span {
+ color: #333;
+ font-weight: bolder;
+
+ }
+ }
+
+ button {
+ height: 40px;
+ width: 180px;
+ border: none;
+ border-radius: 20px;
+ background: linear-gradient(to left, #ab68ca, #de67a3);
+ color: #fff;
+ font-weight: bolder;
+ margin-top: 30px;
+ cursor: pointer;
+ outline: none;
+ }
+}
+
+.show-hide {
+ display: block;
+}
+
+.expand {
+ transform: translateY(300px);
+}
diff --git a/Frontend/App.jsx b/Frontend/App.jsx
new file mode 100644
index 0000000..24797de
--- /dev/null
+++ b/Frontend/App.jsx
@@ -0,0 +1,69 @@
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './App.css'; // Your global styles
+
+const App = () => {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const navigate = useNavigate();
+ const [showLogin, setShowLogin] = useState(false); // Toggle Login Section
+ const [ctaIcon, setCtaIcon] = useState('fas fa-chevron-down'); // Initial icon state
+
+ const handleLogin = () => {
+ // Check credentials
+ if (username === 'luminous' && password === 'luminous') {
+ navigate('/home'); // Redirect to Home Page
+ } else {
+ alert('Invalid Username or Password'); // Simple Alert for Error
+ }
+ };
+
+ const handleToggle = () => {
+ setShowLogin((prev) => !prev);
+ // Change icon based on the current state
+ setCtaIcon((prev) => (prev === 'fas fa-chevron-down' ? 'fas fa-chevron-up' : 'fas fa-chevron-down'));
+ };
+
+ return (
+
+
+
+ ^
+
+ {/* Show the login form based on the showLogin state */}
+
+
Login
+
+
+
setUsername(e.target.value)}
+ />
+
+
setPassword(e.target.value)}
+ />
+
+
+ Log In
+
+
+
+
+
+
+ LUMINOUS MEANS SAVING'S
+
+
+
+
{/* Use a viewport height for the main container */}
+ {/* First Part: 25-35-40 Ratio */}
+
+
+ {/* Second Part: 35-65 Ratio */}
+
+
+
+ Ochi is a strategic presentation agency for forward-thinking businesses that need to raise funds, sell products, explain complex ideas, and hire great people.
+
+
+
+
kri
+
+
Loading...
;
+ }
+
+ return (
+
+
{dashboard.dashboard.title}
+
+
+ );
+};
+
+export default GrafanaDashboard;
diff --git a/Frontend/components/Huffer.jsx b/Frontend/components/Huffer.jsx
new file mode 100644
index 0000000..88b4834
--- /dev/null
+++ b/Frontend/components/Huffer.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+function Huffer() {
+ return (
+
+
+
+ WE ARE OCHI
+
+
+ WE ARE OCHI WE ARE OCHI
+
+
+ WE ARE OCHI WE ARE OCHI
+
+
+
+ {/* First Section (1/4 height) */}
+
+
+
+
+
+
+ {/* Middle Section (1/2 height) */}
+
+
+
+
+
+
+ {/* Third Section (1/4 height) */}
+
+
+
+
+
+
+
+
+ {["Services", "Our Work", "About Us","Insights","Contact Us"].map((item,index) => (
+
+ {item}
+
+ ))}
+
+
+
+
+
+
+
+
+);
diff --git a/Frontend/services/grafanaService.jsx b/Frontend/services/grafanaService.jsx
new file mode 100644
index 0000000..57db2d8
--- /dev/null
+++ b/Frontend/services/grafanaService.jsx
@@ -0,0 +1,23 @@
+// src/services/grafanaService.js
+import axios from 'axios';
+
+const GRAFANA_URL = 'https://krishnafauj02.grafana.net/api'; // Replace with your Grafana URL
+const API_KEY = 'your_api_key'; // Replace with your API Key
+
+const grafanaClient = axios.create({
+ baseURL: GRAFANA_URL,
+ headers: {
+ 'Authorization': `Bearer ${API_KEY}`,
+ 'Content-Type': 'application/json',
+ },
+});
+
+export const getDashboard = async (dashboardId) => {
+ try {
+ const response = await grafanaClient.get(`/dashboards/uid/${dashboardId}`);
+ return response.data;
+ } catch (error) {
+ console.error('Error fetching dashboard:', error);
+ throw error;
+ }
+};
diff --git a/Frontend/services/index.html b/Frontend/services/index.html
new file mode 100644
index 0000000..f9b2400
--- /dev/null
+++ b/Frontend/services/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file