Componets added

client/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

client/package.json

@@ -9,18 +9,65 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^2.1.3",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "aos": "^3.0.0-beta.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.5.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.473.0",
+    "next": "14.2.23",
+    "next-themes": "^0.4.4",
     "react": "^18",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18",
-    "next": "14.2.23"
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.0",
+    "sonner": "^1.7.2",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.23",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.23"
+    "typescript": "^5"
   }
 }

client/src/app/(auth)/layout.tsx

@@ -0,0 +1,15 @@
+import PageIllustration from "@/components/page-illustration";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="relative flex grow flex-col">
+      <PageIllustration multiple />
+
+      {children}
+    </main>
+  );
+}

client/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,45 @@
+export const metadata = {
+  title: "Reset Password - Open PRO",
+  description: "Page description",
+};
+
+import Link from "next/link";
+
+export default function ResetPassword() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center">
+            <h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+              Reset your password
+            </h1>
+          </div>
+          {/* Contact form */}
+          <form className="mx-auto max-w-[400px]">
+            <div>
+              <label
+                className="mb-1 block text-sm font-medium text-indigo-200/65"
+                htmlFor="email"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                className="form-input w-full"
+                placeholder="Your email"
+              />
+            </div>
+            <div className="mt-6">
+              <button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
+                Reset Password
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}

client/src/app/(auth)/signin/page.tsx

@@ -0,0 +1,82 @@
+export const metadata = {
+  title: "Sign In - Open PRO",
+  description: "Page description",
+};
+
+import Link from "next/link";
+
+export default function SignIn() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center">
+            <h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+              Welcome back
+            </h1>
+          </div>
+          {/* Contact form */}
+          <form className="mx-auto max-w-[400px]">
+            <div className="space-y-5">
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="email"
+                >
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  className="form-input w-full"
+                  placeholder="Your email"
+                />
+              </div>
+              <div>
+                <div className="mb-1 flex items-center justify-between gap-3">
+                  <label
+                    className="block text-sm font-medium text-indigo-200/65"
+                    htmlFor="password"
+                  >
+                    Password
+                  </label>
+                  <Link
+                    className="text-sm text-gray-600 hover:underline"
+                    href="/reset-password"
+                  >
+                    Forgot?
+                  </Link>
+                </div>
+                <input
+                  id="password"
+                  type="password"
+                  className="form-input w-full"
+                  placeholder="Your password"
+                />
+              </div>
+            </div>
+            <div className="mt-6 space-y-5">
+              <button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
+                Sign in
+              </button>
+              <div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-gradient-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-gradient-to-r after:from-transparent after:via-gray-400/25">
+                or
+              </div>
+              <button className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
+                Sign In with Google
+              </button>
+            </div>
+          </form>
+          {/* Bottom link */}
+          <div className="mt-6 text-center text-sm text-indigo-200/65">
+            Don't you have an account?{" "}
+            <Link className="font-medium text-indigo-500" href="/signup">
+              Sign Up
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

client/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,104 @@
+export const metadata = {
+  title: "Sign Up - Open PRO",
+  description: "Page description",
+};
+
+import Link from "next/link";
+
+export default function SignUp() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center">
+            <h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+              Create an account
+            </h1>
+          </div>
+          {/* Contact form */}
+          <form className="mx-auto max-w-[400px]">
+            <div className="space-y-5">
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="name"
+                >
+                  Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  className="form-input w-full"
+                  placeholder="Your full name"
+                  required
+                />
+              </div>
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="name"
+                >
+                  Company Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="company"
+                  type="text"
+                  className="form-input w-full"
+                  placeholder="Your company name"
+                  required
+                />
+              </div>
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="email"
+                >
+                  Work Email <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  className="form-input w-full"
+                  placeholder="Your work email"
+                />
+              </div>
+              <div>
+                <label
+                  className="block text-sm font-medium text-indigo-200/65"
+                  htmlFor="password"
+                >
+                  Password <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  className="form-input w-full"
+                  placeholder="Password (at least 10 characters)"
+                />
+              </div>
+            </div>
+            <div className="mt-6 space-y-5">
+              <button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
+                Register
+              </button>
+              <div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-gradient-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-gradient-to-r after:from-transparent after:via-gray-400/25">
+                or
+              </div>
+              <button className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
+                Sign In with Google
+              </button>
+            </div>
+          </form>
+          {/* Bottom link */}
+          <div className="mt-6 text-center text-sm text-indigo-200/65">
+            Already have an account?{" "}
+            <Link className="font-medium text-indigo-500" href="/signin">
+              Sign in
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

client/src/app/(default)/layout.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+import Footer from "@/components/ui/footer";
+
+export default function DefaultLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    AOS.init({
+      once: true,
+      disable: "phone",
+      duration: 600,
+      easing: "ease-out-sine",
+    });
+  });
+
+  return (
+    <>
+      <main className="relative flex grow flex-col">{children}</main>
+
+      <Footer />
+    </>
+  );
+}