Merge pull request #153 from priyanshuverma-dev/feat-landing-components

feat: landing and UI components

client/package.json

@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0"
+    "react-hook-form": "^7.53.1",
+    "react-router-dom": "^6.27.0",
+    "tailwind-merge": "^2.5.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

client/src/components/Button.tsx

@@ -0,0 +1,17 @@
+import { cn } from "../lib/utils";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export default function Button({ className, children, ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        className,
+        "inline-block bg-blue-600 text-white rounded-full px-4 py-2 transition hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 cursor-pointer"
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

client/src/components/Input.tsx

@@ -0,0 +1,23 @@
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export default function Input({ name, className, type, ...props }: InputProps) {
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="block text-lg font-medium text-neutral-700"
+      >
+        Name:
+      </label>
+      <input
+        type={type}
+        {...props}
+        name={name}
+        className="mt-1 block w-full border rounded-md p-3 text-lg
+                bg-white dark:bg-dark focus:outline-none dark:border-darker
+                focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                transition duration-200 ease-in-out shadow-sm"
+      />
+    </div>
+  );
+}

client/src/components/Navbar.tsx

@@ -0,0 +1,55 @@
+import { Link } from "react-router-dom";
+
+export default function Navbar() {
+  return (
+    <nav className="flex justify-between items-center px-6 py-4 rounded-md border-b-2 dark:border-darker border-lighter">
+      <Link
+        to="/"
+        className="text-5xl brand font-extrabold text-gray-500 hover:text-gray-700 dark:text-white dark:hover:text-gray-300"
+      >
+        Bot Verse
+      </Link>
+
+      <div className="flex space-x-6">
+        <div className="relative md:hidden">
+          <button
+            id="dropdown-button"
+            className="flex items-center text-gray-500 hover:text-gray-700 focus:outline-none px-3 py-2"
+          >
+            <i className="fas fa-bars"></i>
+          </button>
+          <div
+            id="dropdown-menu"
+            className="absolute right-0 hidden bg-white shadow-lg rounded-md mt-2 w-64"
+          >
+            <ul className="flex flex-col p-2">
+              <li className="w-full hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
+                <Link to="/signup" className="block px-4 py-2 text-gray-800">
+                  SignUp
+                </Link>
+              </li>
+              <li className="w-full  hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
+                <Link to="/login" className="block px-4 py-2 text-gray-800">
+                  LogIn
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <ul className="hidden md:flex space-x-6 items-center">
+          <li className="w-full hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
+            <Link to="/signup" className="block px-4 py-2 text-gray-800">
+              SignUp
+            </Link>
+          </li>
+          <li className="w-full  hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
+            <Link to="/login" className="block px-4 py-2 text-gray-800">
+              LogIn
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+}

client/src/components/Separator.tsx

@@ -0,0 +1,5 @@
+export default function Separator() {
+  return (
+    <hr className="my-12 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400" />
+  );
+}

client/src/index.css

@@ -1,9 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-
 html {
   font-family: "Poppins", sans-serif;
   font-weight: 500;

client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

client/src/pages/404.tsx

@@ -1,3 +1,15 @@
+import { Link } from "react-router-dom";
+
 export default function NotFound() {
-  return <div>NotFound</div>;
+  return (
+    <div className="flex flex-col items-center justify-center h-full w-full">
+      <h1 className="text-4xl font-bold text-gray-800 mb-4">
+        Oops! Looks like the page doesn't exist anymore
+      </h1>
+      <Link to="/" className="text-lg text-blue-500 hover:underline">
+        Click Here
+      </Link>
+      <p className="text-lg text-gray-600">To go to the Home Page</p>
+    </div>
+  );
 }

client/src/pages/Dashboard.tsx

@@ -1,3 +1,9 @@
+import Navbar from "../components/Navbar";
+
 export default function DashboardPage() {
-  return <div>DashboardPage</div>;
+  return (
+    <>
+      <Navbar />
+    </>
+  );
 }

client/src/pages/Landing.tsx

@@ -1,3 +1,106 @@
+import { Link } from "react-router-dom";
+import Navbar from "../components/Navbar";
+import Separator from "../components/Separator";
+
 export default function LandingPage() {
-  return <div>LandingPage</div>;
+  return (
+    <>
+      <Navbar />
+      <section className="text-center p-16 rounded-lg mt-8 dark:text-white">
+        <h1 className="text-5xl lg:text-7xl font-extrabold mb-4">
+          Welcome to Bot Verse
+        </h1>
+        <p className="text-lg mb-8">
+          Your hub for AI chatbots to solve queries effortlessly.
+        </p>
+
+        <Link
+          to="/login"
+          className="inline-block bg-blue-600 text-white rounded-full px-4 py-2 transition hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400"
+        >
+          Get Started
+        </Link>
+      </section>
+      <Separator />
+      <section className="relative text-gray-800 text-center p-16 mt-8 dark:text-gray-300">
+        <h2 className="text-3xl font-bold mb-4">About Bot Verse</h2>
+        <p className="text-lg">
+          A platform for creating, sharing, and interacting with AI chatbots to
+          enhance your productivity.
+        </p>
+      </section>
+      <Separator />
+
+      <section className="text-gray-800 text-center p-16 mt-8 dark:text-gray-300">
+        <h2 className="text-3xl font-bold mb-6">Features</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+          <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
+            <i className="fas fa-tachometer-alt text-3xl mb-4"></i>
+            <h3 className="text-xl font-semibold mb-2">Manage Your Chatbots</h3>
+            <p>
+              Effortlessly create, update, or delete your chatbots all in one
+              place.
+            </p>
+          </div>
+
+          <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
+            <i className="fas fa-share-alt text-3xl mb-4"></i>
+            <h3 className="text-xl font-semibold mb-2">Share and Discover</h3>
+            <p>
+              Show off your chatbots and explore others’ creations for
+              inspiration.
+            </p>
+          </div>
+          <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
+            <i className="fas fa-comments text-3xl mb-4"></i>
+            <h3 className="text-xl font-semibold mb-2">Chatbot Hub</h3>
+            <p>Interact with multiple chatbots in one convenient location.</p>
+          </div>
+          <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
+            <i className="fas fa-cogs text-3xl mb-4"></i>
+            <h3 className="text-xl font-semibold mb-2">Helpful Chatbots</h3>
+            <p>
+              Utilize our pre-made chatbots for quick solutions to common tasks.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <Separator />
+
+      <section className="relative text-center p-16 mt-8">
+        <h2 className="text-3xl font-bold mb-4 dark:text-white">Open Source</h2>
+        <p className="text-lg mb-6 dark:text-white">
+          Bot Verse is an open-source project.
+          <br />
+          Contribute to our development and join our growing community of
+          contributors!
+        </p>
+        <a
+          href="https://github.com/kom-senapati/bot-verse"
+          target="_blank"
+          className="inline-block bg-gray-600 text-white rounded-full px-4 py-2 transition hover:bg-gray-500 dark:bg-gray-500 dark:hover:bg-gray-400"
+        >
+          Contribute
+        </a>
+      </section>
+
+      <Separator />
+
+      <footer className="text-center p-6 flex justify-between dark:text-gray-300">
+        <p className="text-gray-600">
+          Made by{" "}
+          <a
+            href="https://github.com/kom-senapati"
+            className="text-gray-400 hover:underline"
+          >
+            kom-senapati
+          </a>
+        </p>
+        <p className="text-gray-600">
+          <span className="text-yellow-600">MIT</span> License
+        </p>
+      </footer>
+    </>
+  );
 }