<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teal & Green Website Redesign</title>
    <!-- Tailwind CSS for modern, utility-first styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Roboto for body, Luminari for logo (using a similar web font: Cinzel Decorative) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Cinzel+Decorative:wght@700&display=swap" rel="stylesheet">
    <style>
        /* Applying fonts and the primary background gradient from your CSS */
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(to right, #23555c, #21a0ab);
            color: #f2f2f2; /* Default text color for better contrast on dark background */
        }
        /* Custom font for the logo, as specified in your header.css */
        .font-logo {
            font-family: 'Cinzel Decorative', cursive;
        }
        /* Styling for the login form, adapted from your login.css */
        .login-form-container {
            background: rgba(10, 10, 10, 0.3);
            box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 10px 10px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 25px;
        }
        .login-form-container input {
            font-family: "Roboto", sans-serif;
            background: #f2f2f2;
            border: 0;
            margin: 0 0 15px;
            padding: 15px;
            box-sizing: border-box;
            font-size: 15px;
            border-radius: 0 25px;
            color: #333;
        }
        .login-form-container button {
            font-family: "Roboto", sans-serif;
            text-transform: uppercase;
            background: #008080; /* Teal color from login.css */
            border: 0;
            padding: 15px;
            color: #FFFFFF;
            font-size: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            border-radius: 0 25px;
        }
        .login-form-container button:hover {
            background: #067979;
        }
    </style>
</head>
<body class="antialiased">

    <!-- ===== Header Section ===== -->
    <!-- Styled based on your header.css with a #187881 background -->
    <header class="bg-[#187881] shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
            <!-- Logo styled as per your .logo a class -->
            <a href="#" class="font-logo text-4xl text-black italic">
                YourLogo
            </a>
            <!-- Navigation Links -->
            <nav class="hidden md:flex space-x-6 items-center">
                <a href="#features" class="text-gray-200 hover:text-white hover:bg-[#20a1ac] px-3 py-2 rounded-md transition-colors duration-300">Features</a>
                <a href="#users" class="text-gray-200 hover:text-white hover:bg-[#20a1ac] px-3 py-2 rounded-md transition-colors duration-300">Users</a>
                <a href="#login" class="text-gray-200 hover:text-white hover:bg-[#20a1ac] px-3 py-2 rounded-md transition-colors duration-300">Login</a>
            </nav>
            <!-- Mobile Menu Button -->
            <button class="md:hidden text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </header>

    <!-- ===== Main Content ===== -->
    <main>
        <!-- ===== Hero Section ===== -->
        <section class="py-20 sm:py-32">
            <div class="container mx-auto px-6 text-center">
                <h1 class="text-4xl md:text-6xl font-bold text-white leading-tight" style="font-family: 'New Century Schoolbook', 'TeX Gyre Schola', serif;">
                    A Fresh & Modern Interface
                </h1>
                <p class="mt-4 text-lg text-gray-300 max-w-2xl mx-auto">
                    Discover the new look and feel of our platform, redesigned for a better, more intuitive user experience.
                </p>
                <div class="mt-8">
                    <a href="#login" class="bg-[#388994] text-white px-8 py-3 rounded-full font-semibold text-lg hover:bg-[#3f9aa6] transition-transform duration-300 transform hover:scale-105 shadow-lg">Get Started</a>
                </div>
            </div>
        </section>

        <!-- ===== Features Section (Styled as Panels) ===== -->
        <!-- This section is styled to look like the .panel class from your devices.css -->
        <section id="features" class="py-20 bg-black bg-opacity-10">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-white" style="font-family: 'New Century Schoolbook', 'TeX Gyre Schola', serif;">Platform Features</h2>
                    <p class="text-gray-300 mt-2">Core functionalities that drive results.</p>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <!-- Panel 1 -->
                    <div class="rounded-lg overflow-hidden shadow-xl transform hover:-translate-y-2 transition-transform duration-300">
                        <div class="p-4 bg-[#388994] text-white text-xl font-bold">User Management</div>
                        <div class="p-6 bg-[#46abb9]">
                            <p class="text-white">Easily add, remove, and manage user permissions with our intuitive interface.</p>
                        </div>
                    </div>
                    <!-- Panel 2 -->
                    <div class="rounded-lg overflow-hidden shadow-xl transform hover:-translate-y-2 transition-transform duration-300">
                        <div class="p-4 bg-[#388994] text-white text-xl font-bold">Device Control</div>
                        <div class="p-6 bg-[#46abb9]">
                            <p class="text-white">Monitor and control all connected devices from a centralized dashboard.</p>
                        </div>
                    </div>
                    <!-- Panel 3 -->
                    <div class="rounded-lg overflow-hidden shadow-xl transform hover:-translate-y-2 transition-transform duration-300">
                        <div class="p-4 bg-[#388994] text-white text-xl font-bold">Activity Logs</div>
                        <div class="p-6 bg-[#46abb9]">
                            <p class="text-white">Keep track of all user activities and system events with detailed, real-time logs.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ===== Users Table Section ===== -->
        <!-- A table styled based on your Users.css and manageusers.css -->
        <section id="users" class="py-20">
            <div class="container mx-auto px-6">
                 <h2 class="text-3xl font-bold text-white text-center mb-8" style="font-family: 'New Century Schoolbook', 'TeX Gyre Schola', serif;">Manage Users</h2>
                 <div class="bg-black bg-opacity-20 rounded-lg shadow-lg overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-white/30">
                            <tr>
                                <th class="p-4 text-left font-bold text-white uppercase tracking-wider">Name</th>
                                <th class="p-4 text-left font-bold text-white uppercase tracking-wider">Email</th>
                                <th class="p-4 text-left font-bold text-white uppercase tracking-wider">Gender</th>
                                <th class="p-4 text-left font-bold text-white uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bg-[#3f9aa6] border-b border-black/20">
                                <td class="p-4">John Doe</td>
                                <td class="p-4">john.doe@example.com</td>
                                <td class="p-4">Male</td>
                                <td class="p-4"><button class="text-black font-semibold border-b-2 border-[#0e2225] hover:text-white hover:border-white transition">Edit</button></td>
                            </tr>
                            <tr class="bg-[#388994] border-b border-black/20">
                                <td class="p-4">Jane Smith</td>
                                <td class="p-4">jane.smith@example.com</td>
                                <td class="p-4">Female</td>
                                <td class="p-4"><button class="text-black font-semibold border-b-2 border-[#0e2225] hover:text-white hover:border-white transition">Edit</button></td>
                            </tr>
                             <tr class="bg-[#3f9aa6] border-b border-black/20">
                                <td class="p-4">Sam Wilson</td>
                                <td class="p-4">sam.wilson@example.com</td>
                                <td class="p-4">Male</td>
                                <td class="p-4"><button class="text-black font-semibold border-b-2 border-[#0e2225] hover:text-white hover:border-white transition">Edit</button></td>
                            </tr>
                        </tbody>
                    </table>
                 </div>
            </div>
        </section>

        <!-- ===== Login Section ===== -->
        <!-- This form is styled based on your login.css -->
        <section id="login" class="py-20">
            <div class="container mx-auto px-6">
                <div class="max-w-md mx-auto login-form-container">
                    <div class="p-8 sm:p-12">
                        <h2 class="text-2xl font-bold text-center text-white mb-6" style="font-family: 'New Century Schoolbook', 'TeX Gyre Schola', serif;">Secure Login</h2>
                        <form>
                            <div class="mb-4">
                                <input type="email" id="email" name="email" class="w-full" placeholder="Email Address">
                            </div>
                            <div class="mb-6">
                                <input type="password" id="password" name="password" class="w-full" placeholder="Password">
                            </div>
                            <div class="mb-6">
                                <button type="submit" class="w-full">Login</button>
                            </div>
                            <p class="text-center text-gray-300 text-sm">
                                Forgot your password? <a href="#" class="text-white hover:underline font-semibold">Reset It</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- ===== Footer Section ===== -->
    <footer class="bg-[#187881] mt-20">
        <div class="container mx-auto px-6 py-8 text-center text-gray-300">
            <p>&copy; 2025 Your Company. All Rights Reserved.</p>
        </div>
    </footer>

</body>
</html>
