Update index.html

programinglive · Nov 28, 2024 · b547d83 · b547d83
1 parent 0ba1703
commit b547d83
Showing 1 changed file with 42 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -7,69 +7,90 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- Add Heroicons CDN -->
     <script src="https://cdn.jsdelivr.net/npm/@heroicons/react/24/outline"></script>
+    <style>
+        body {
+            font-family: 'Courier', monospace;
+        }
+        .retro-btn {
+            background-color: #222222;
+            color: #fff;
+            font-weight: bold;
+            padding: 12px 24px;
+            border-radius: 50px;
+            border: 2px solid #fff;
+            text-transform: uppercase;
+            transition: background-color 0.3s ease, border 0.3s ease;
+        }
+        .retro-btn:hover {
+            background-color: #fff;
+            color: #222222;
+            border: 2px solid #222222;
+        }
+    </style>
 </head>
-<body class="bg-gray-50 font-sans leading-normal tracking-normal">
+<body class="bg-gray-900 text-white leading-normal tracking-normal">
 
     <!-- Hero Section -->
-    <section class="bg-blue-600 text-white py-20 px-6">
+    <section class="bg-black text-white py-20 px-6">
         <div class="max-w-7xl mx-auto text-center">
-            <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">
+            <h1 class="text-5xl font-extrabold mb-6">
                 Streamline Your HR Processes with Our Open-Source Solution
             </h1>
-            <p class="text-lg sm:text-xl mb-8">
+            <p class="text-xl mb-8">
                 Simplify employee management, attendance tracking, and payroll. Experience the power of an integrated HRIS platform.
             </p>
-            <a href="#register" class="bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-lg text-lg">
+            <a href="#register" class="retro-btn">
                 Register Your Company
             </a>
         </div>
     </section>
 
     <!-- Feature Highlights Section -->
-    <section class="py-16 px-6 bg-white">
+    <section class="py-16 px-6 bg-gray-800">
         <div class="max-w-7xl mx-auto text-center">
             <h2 class="text-3xl font-semibold mb-10">Key Features</h2>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
                 <!-- Employee Management -->
-                <div class="bg-gray-100 p-6 rounded-lg shadow-md">
-                    <div class="mb-4 text-4xl text-green-700 text-center">
+                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
+                    <div class="mb-4 text-4xl text-white">
                         <!-- User Group Icon -->
+
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-12 w-12 mx-auto">
   <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
 </svg>
 
                     </div>
                     <h3 class="text-xl font-semibold mb-4">Employee Management</h3>
-                    <p class="text-gray-700">
+                    <p class="text-gray-300">
                         Efficiently manage employee profiles, track performance, and keep detailed records with ease.
                     </p>
                 </div>
 
                 <!-- Attendance Tracking -->
-                <div class="bg-gray-100 p-6 rounded-lg shadow-md">
-                    <div class="mb-4 text-4xl text-green-700">
+                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
+                    <div class="mb-4 text-4xl text-white">
                         <!-- Chart Icon -->
+
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-12 w-12 mx-auto">
   <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
 </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-4">Attendance Tracking</h3>
-                    <p class="text-gray-700">
+                    <p class="text-gray-300">
                         Seamlessly track attendance, manage leaves, and get real-time insights on employee presence.
                     </p>
                 </div>
 
                 <!-- Payroll Management -->
-                <div class="bg-gray-100 p-6 rounded-lg shadow-md">
-                    <div class="mb-4 text-4xl text-green-700">
+                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
+                    <div class="mb-4 text-4xl text-white">
                         <!-- Money Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-12 w-12 mx-auto">
+                               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-12 w-12 mx-auto">
   <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
 </svg>
-
                     </div>
                     <h3 class="text-xl font-semibold mb-4">Payroll Management</h3>
-                    <p class="text-gray-700">
+                    <p class="text-gray-300">
                         Simplify payroll calculations, deductions, and tax management with automated payroll processing.
                     </p>
                 </div>
@@ -78,16 +99,16 @@ <h3 class="text-xl font-semibold mb-4">Payroll Management</h3>
     </section>
 
     <!-- Call to Action Section -->
-    <section id="register" class="bg-blue-600 text-white py-16 px-6 text-center">
+    <section id="register" class="bg-black text-white py-16 px-6 text-center">
         <h2 class="text-3xl sm:text-4xl font-bold mb-4">Ready to Get Started?</h2>
         <p class="text-lg sm:text-xl mb-8">
             Register your company today and take the first step towards simplifying your HR processes.
         </p>
-        <div class="flex justify-center gap-4">
-            <a href="your-registration-link.html" class="bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-lg text-lg">
+        <div class="flex justify-center gap-6">
+            <a href="your-registration-link.html" class="retro-btn">
                 Register Now
             </a>
-            <a href="your-login-link.html" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-6 rounded-lg text-lg">
+            <a href="your-login-link.html" class="retro-btn">
                 Login
             </a>
         </div>