added register form

Author: mahek0620

components/home-layouts/Register.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Button } from '@radix-ui/react-button';
+import { SunIcon, MoonIcon } from '@heroicons/react/solid';
+
+const backgroundImageUrl = 'https://source.unsplash.com/random/1920x1080'; // Replace with desired URL from Unsplash
+
+const RegisterPage: React.FC = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    if (darkMode) {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+  };
+
+  return (
+    <div className={`${darkMode ? 'dark' : ''} min-h-screen flex flex-col items-center justify-center bg-cover`} style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
+      <div className="absolute top-4 right-4">
+        <Button onClick={toggleDarkMode} className="p-2 bg-gray-800 text-white rounded-full">
+          {darkMode ? <SunIcon className="h-6 w-6" /> : <MoonIcon className="h-6 w-6" />}
+        </Button>
+      </div>
+      <div className="bg-white dark:bg-gray-800 dark:text-white p-6 rounded-lg shadow-lg max-w-md w-full">
+        <h2 className="text-2xl font-bold mb-6 text-center">Create an account</h2>
+        <form>
+          <div className="mb-4">
+            <label className="block text-sm font-bold mb-2" htmlFor="email">Email</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="email" id="email" required />
+          </div>
+          <div className="mb-4">
+            <label className="block text-sm font-bold mb-2" htmlFor="displayName">Display Name</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="text" id="displayName" required />
+          </div>
+          <div className="mb-4">
+            <label className="block text-sm font-bold mb-2" htmlFor="username">Username</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="text" id="username" required />
+          </div>
+          <div className="mb-4">
+            <label className="block text-sm font-bold mb-2" htmlFor="password">Password</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="password" id="password" required />
+          </div>
+          <div className="flex items-center justify-between mb-6">
+            <Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">
+              Continue
+            </Button>
+          </div>
+        </form>
+        <Button className="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded flex items-center justify-center">
+          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Google_Logo.png" alt="Google Logo" className="w-6 h-6 mr-2" />
+          Continue with Google
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default RegisterPage;