Auto commit: 2025-12-04T19:20:09.844Z
This commit is contained in:
Flatlogic Bot
parent
7563ea20a3
commit
156d39a9c8
43
index.php
Normal file
43
index.php
Normal file
@ -0,0 +1,43 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GenFleet IoT Command Center</title>
|
||||
|
||||
<!-- PrimeReact CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-dark-indigo/theme.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/primeflex/primeflex.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="public/css/styles.css">
|
||||
|
||||
<!-- React and Babel for JSX in browser -->
|
||||
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<script src="https://unpkg.com/primereact/core/core.min.js"></script>
|
||||
<script src="https://unpkg.com/primereact/button/button.min.js"></script>
|
||||
<script src="https://unpkg.com/primereact/card/card.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="text/babel">
|
||||
const App = () => {
|
||||
return (
|
||||
<LandingPage />
|
||||
);
|
||||
};
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
</script>
|
||||
|
||||
<!-- Load React components -->
|
||||
<script type="text/babel" data-type="module" data-presets="react" data-plugins="transform-modules-umd" src="src/pages/LandingPage.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
29
public/css/styles.css
Normal file
29
public/css/styles.css
Normal file
@ -0,0 +1,29 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
|
||||
|
||||
body {
|
||||
background-color: #1E1E1E;
|
||||
color: #F5F5F5;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.25rem;
|
||||
color: #E0E0E0;
|
||||
}
|
||||
77
src/pages/LandingPage.js
Normal file
77
src/pages/LandingPage.js
Normal file
@ -0,0 +1,77 @@
|
||||
const LandingPage = () => {
|
||||
const { Button } = primereact.button;
|
||||
const { Card } = primereact.card;
|
||||
return (
|
||||
<div className="landing-page-content">
|
||||
{/* Hero Section */}
|
||||
<div className="hero-section text-center p-6 surface-900 text-white">
|
||||
<div className="p-4">
|
||||
<h1 className="mb-3 text-6xl" style={{ color: '#4DD0E1' }}>GenFleet IoT Command Center</h1>
|
||||
<p className="mb-4 text-2xl">Unified telemetry for gensets, fleets, and heavy equipment.</p>
|
||||
<p className="mb-5 text-lg max-w-30rem mx-auto text-color-secondary">Monitor uptime, optimize fuel consumption, and enable predictive maintenance to keep your operations running at peak efficiency.</p>
|
||||
<Button label="Go to Dashboard / Login" size="large" className="p-button-info" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personas Section */}
|
||||
<div className="personas-section py-8 px-4 surface-800 text-white-alpha-80 mb-5">
|
||||
<h2 className="text-center text-4xl mb-6" style={{ color: '#4DD0E1' }}>Who Benefits?</h2>
|
||||
<div className="grid justify-content-center">
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Fleet Manager" subTitle="Optimize routes & reduce costs." className="text-center h-full surface-900 border-round-md">
|
||||
<p className="text-color-secondary">Track vehicle locations, monitor driver behavior, and schedule preventative maintenance to ensure your fleet runs smoothly and efficiently.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Equipment Operator" subTitle="Enhance productivity & safety." className="text-center h-full surface-900 border-round-md">
|
||||
<p className="text-color-secondary">Receive real-time alerts on equipment status, perform pre-operational checks, and access maintenance history on the go.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Maintenance Lead" subTitle="Streamline repairs & minimize downtime." className="text-center h-full surface-900 border-round-md">
|
||||
<p className="text-color-secondary">Diagnose issues remotely, manage work orders, and track parts inventory to keep your assets in top condition.</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="features-section py-8 px-4 surface-900 text-white-alpha-80">
|
||||
<h2 className="text-center text-4xl mb-6" style={{ color: '#4DD0E1' }}>Key Features</h2>
|
||||
<div className="grid justify-content-center">
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Real-time Telemetry" className="text-center h-full surface-800 border-round-md">
|
||||
<p className="text-color-secondary">Live data streams from all your connected assets, including location, fuel levels, engine diagnostics, and more.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Predictive Analytics" className="text-center h-full surface-800 border-round-md">
|
||||
<p className="text-color-secondary">Leverage AI-driven insights to predict equipment failures and optimize maintenance schedules before issues arise.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Automated Workflows" className="text-center h-full surface-800 border-round-md">
|
||||
<p className="text-color-secondary">Set up automated alerts, notifications, and task assignments based on predefined rules and thresholds.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Geofencing & Security" className="text-center h-full surface-800 border-round-md">
|
||||
<p className="text-color-secondary">Define virtual boundaries and receive instant alerts for unauthorized movement or entry/exit from designated areas.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Reporting & Compliance" className="text-center h-full surface-800 border-round-md">
|
||||
<p className="text-color-secondary">Generate comprehensive reports for operational efficiency, regulatory compliance, and performance analysis.</p>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-6 lg:col-4">
|
||||
<Card title="Mobile Accessibility" className="text-center h-full surface-800 border-round-md">
|
||||
<p className="text-color-secondary">Access all features and data on the go with a fully responsive design optimized for mobile devices.</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
window.LandingPage = LandingPage;
|
||||
Loading…
x
Reference in New Issue
Block a user