diff --git a/index.php b/index.php
new file mode 100644
index 0000000..d8bba78
--- /dev/null
+++ b/index.php
@@ -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>
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000..39987f0
--- /dev/null
+++ b/public/css/styles.css
@@ -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;
+}
diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js
new file mode 100644
index 0000000..b156aee
--- /dev/null
+++ b/src/pages/LandingPage.js
@@ -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;
