PreRelease v1

2026-03-25 13:52:45 +01:00
parent 94b0c68703
commit 6bf998a52a
56 changed files with 11427 additions and 847 deletions
--- a/components/views/Home/Hero.tsx
+++ b/components/views/Home/Hero.tsx
@@ -8,13 +8,15 @@ import {
  Lock,
  Check,
  Zap,
-  Link,
+  Link2,
  FileText,
  MessageSquare,
  Shield,
  TrendingUp,
  Bell,
 } from "lucide-react";
+import Link from "next/link";
+import { SignedIn, SignedOut } from "@clerk/nextjs";

 // Ripple Effect Component
 function BackgroundRipple() {
@@ -407,7 +409,7 @@ export function Hero() {
    { icon: Lock, label: "Bank-Level Security" },
    { icon: Check, label: "GDPR Certified" },
    { icon: Zap, label: "Real-Time AI" },
-    { icon: Link, label: "Blockchain Verified" },
+    { icon: Link2, label: "Blockchain Verified" },
  ];

  return (
@@ -544,8 +546,10 @@ export function Hero() {
          }`}
        >
          {/* Primary CTA */}
-          <Button
-            className="
+          <SignedOut>
+            <Button
+              asChild
+              className="
  group relative px-12 py-5 
  text-lg md:text-xl font-semibold 
  text-white rounded-2xl
@@ -560,10 +564,11 @@ export function Hero() {
  hover:shadow-xl hover:shadow-blue-500/40
  active:scale-[0.98]
 "
-          >
-            {/* Glow background layer */}
-            <div
-              className="
+            >
+              <Link href="/sign-in">
+                {/* Glow background layer */}
+                <div
+                  className="
    absolute inset-0 
    opacity-0 group-hover:opacity-100
    transition-opacity duration-500
@@ -573,31 +578,89 @@ export function Hero() {
    to-teal-400/20
    blur-xl
  "
-            />
+                />

-            {/* Animated gradient shift layer */}
-            <div
-              className="
+                {/* Animated gradient shift layer */}
+                <div
+                  className="
    absolute inset-0 
    bg-[length:200%_200%]
    animate-gradient-shift
    opacity-70
    mix-blend-overlay
  "
-            />
+                />

-            <span className="relative z-10 flex items-center gap-3">
-              Get Started
-              <Rocket
-                className="
+                <span className="relative z-10 flex items-center gap-3">
+                  Get Started
+                  <Rocket
+                    className="
      w-6 h-6 
      transition-transform duration-300 
      group-hover:translate-x-1 
      group-hover:-translate-y-1
    "
-              />
-            </span>
-          </Button>
+                  />
+                </span>
+              </Link>
+            </Button>
+          </SignedOut>
+
+          <SignedIn>
+            <Button
+              asChild
+              className="
+  group relative px-12 py-5 
+  text-lg md:text-xl font-semibold 
+  text-white rounded-2xl
+  overflow-hidden
+  bg-gradient-to-r 
+  from-[hsl(var(--primary))] 
+  via-[hsl(var(--accent))] 
+  to-[hsl(var(--secondary))]
+  shadow-lg shadow-blue-500/20
+  transition-all duration-300 ease-out
+  hover:scale-[1.04]
+  hover:shadow-xl hover:shadow-blue-500/40
+  active:scale-[0.98]
+"
+            >
+              <Link href="/dashboard">
+                <div
+                  className="
+    absolute inset-0 
+    opacity-0 group-hover:opacity-100
+    transition-opacity duration-500
+    bg-gradient-to-r 
+    from-blue-400/20 
+    via-purple-400/20 
+    to-teal-400/20
+    blur-xl
+  "
+                />
+                <div
+                  className="
+    absolute inset-0 
+    bg-[length:200%_200%]
+    animate-gradient-shift
+    opacity-70
+    mix-blend-overlay
+  "
+                />
+                <span className="relative z-10 flex items-center gap-3">
+                  Go To Dashboard
+                  <Rocket
+                    className="
+      w-6 h-6 
+      transition-transform duration-300 
+      group-hover:translate-x-1 
+      group-hover:-translate-y-1
+    "
+                  />
+                </span>
+              </Link>
+            </Button>
+          </SignedIn>
        </div>

        {/* Trust Indicators */}
--- a/components/views/Home/HowItWorks.tsx
+++ b/components/views/Home/HowItWorks.tsx
@@ -440,7 +440,7 @@ export function HowItWorks() {
      number: "02",
      title: "AI Analysis",
      description:
-        "GPT-4 Turbo extracts and analyzes every clause, term, and detail automatically.",
+        "AI extracts and analyzes every clause, term, and detail automatically.",
      icon: Cpu,
      gradient: "bg-gradient-to-br from-violet-500 to-purple-600",
      glowColor: "rgba(139, 92, 246, 0.5)",
--- a/components/views/Home/Navbar.tsx
+++ b/components/views/Home/Navbar.tsx
@@ -3,8 +3,16 @@
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { ModeToggle } from "@/components/ui/mode-toggle";
-import { Sparkles, X, ArrowRight } from "lucide-react";
+import { X, ArrowRight } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
+import {
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  SignUpButton,
+  UserButton,
+} from "@clerk/nextjs";

 const navLinks = [
  { label: "Features", href: "#features" },
@@ -17,12 +25,6 @@ export function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [activeLink, setActiveLink] = useState("");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
@@ -46,26 +48,6 @@ export function Navbar() {
      setIsMobileMenuOpen(false);
    }
  };
-
-  if (!mounted) {
-    return (
-      <nav className="fixed top-0 left-0 right-0 z-50 mt-6 px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="glass rounded-full px-8 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Sparkles className="w-6 h-6 text-blue-600" />
-                <span className="text-xl font-bold gradient-text">
-                  LexiChain
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-    );
-  }
-
  return (
    <>
      <nav
@@ -100,44 +82,15 @@ export function Navbar() {
                }}
              >
                <div className="relative flex items-center justify-center">
-                  {/* Subtle background badge */}
-                  <div
-                    className="
-        absolute inset-0 
-        rounded-xl 
-        bg-gradient-to-tr 
-        from-blue-500/10 
-        via-purple-500/10 
-        to-teal-500/10
-        opacity-0 
-        group-hover:opacity-100
-        transition-opacity duration-300
-      "
-                  />
-
-                  {/* Logo */}
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-tr from-blue-500/10 via-purple-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  <Image
                    src="/LexiChain.png"
                    alt="LexiChain Logo"
                    width={34}
                    height={34}
-                    className="
-        relative z-10
-        w-8 h-8 object-contain
-        transition-all duration-300 ease-out
-        group-hover:scale-110
-      "
+                    className="relative z-10 w-8 h-8 object-contain transition-all duration-300 ease-out group-hover:scale-110"
                  />
                </div>
-                <span
-                  className="
-      text-lg font-semibold
-      gradient-text
-      sm:hidden
-    "
-                >
-                  LC
-                </span>
              </a>

              {/* Desktop Navigation */}
@@ -163,46 +116,45 @@ export function Navbar() {

              {/* Right Section */}
              <div className="flex items-center gap-2 md:gap-3">
-                {/* Theme Toggle */}
                <ModeToggle />
+                {/* Global Clerk context usage */}
+                <SignedOut>
+                  <SignInButton mode="modal">
+                    <Button variant="outline" className="hidden md:flex">
+                      Sign In
+                    </Button>
+                  </SignInButton>

-                {/* Sign In - Desktop */}
-                <Button
-                  variant="outline"
-                  className="hidden md:flex items-center gap-2 px-5 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600 rounded-full hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
-                >
-                  Sign In
-                </Button>
+                  <SignUpButton mode="modal">
+                    <Button className="hidden md:flex btn-gradient">
+                      Get Started
+                      <ArrowRight className="w-4 h-4 ml-2" />
+                    </Button>
+                  </SignUpButton>
+                </SignedOut>
+                <SignedIn>
+                  <Link href="/dashboard" className="hidden md:inline-block">
+                    <Button variant="outline">Dashboard</Button>
+                  </Link>

-                {/* Get Started - Desktop */}
-                <Button className="hidden md:flex items-center gap-2 px-6 py-2.5 text-sm font-semibold text-white btn-gradient rounded-full group">
-                  Get Started
-                  <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
-                </Button>
+                  <UserButton afterSignOutUrl="/" />
+                </SignedIn>

-                {/* Mobile Menu Button */}
                <Button
                  onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                  className="lg:hidden p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-200"
-                  aria-label="Toggle menu"
+                  className="lg:hidden"
                  variant="ghost"
                  size="icon"
                >
                  <div className="relative w-6 h-6">
                    <span
-                      className={`absolute left-0 w-6 h-0.5 bg-slate-700 dark:bg-slate-300 transition-all duration-300 ${
-                        isMobileMenuOpen ? "top-3 rotate-45" : "top-1"
-                      }`}
+                      className={`absolute left-0 w-6 h-0.5 bg-current transition-all ${isMobileMenuOpen ? "top-3 rotate-45" : "top-1"}`}
                    />
                    <span
-                      className={`absolute left-0 top-3 w-6 h-0.5 bg-slate-700 dark:bg-slate-300 transition-all duration-300 ${
-                        isMobileMenuOpen ? "opacity-0" : "opacity-100"
-                      }`}
+                      className={`absolute left-0 top-3 w-6 h-0.5 bg-current transition-all ${isMobileMenuOpen ? "opacity-0" : "opacity-100"}`}
                    />
                    <span
-                      className={`absolute left-0 w-6 h-0.5 bg-slate-700 dark:bg-slate-300 transition-all duration-300 ${
-                        isMobileMenuOpen ? "top-3 -rotate-45" : "top-5"
-                      }`}
+                      className={`absolute left-0 w-6 h-0.5 bg-current transition-all ${isMobileMenuOpen ? "top-3 -rotate-45" : "top-5"}`}
                    />
                  </div>
                </Button>
@@ -214,27 +166,20 @@ export function Navbar() {

      {/* Mobile Menu */}
      <div
-        className={`fixed inset-0 z-40 lg:hidden transition-all duration-500 ${
-          isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"
-        }`}
+        className={`fixed inset-0 z-40 lg:hidden transition-all duration-500 ${isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"}`}
      >
-        {/* Backdrop */}
        <div
          className="absolute inset-0 bg-black/50 backdrop-blur-sm"
          onClick={() => setIsMobileMenuOpen(false)}
        />

-        {/* Menu Panel */}
        <div
-          className={`absolute right-0 top-0 h-full w-80 max-w-full bg-white dark:bg-slate-900 shadow-2xl transition-transform duration-500 ${
-            isMobileMenuOpen ? "translate-x-0" : "translate-x-full"
-          }`}
+          className={`absolute right-0 top-0 h-full w-80 max-w-full bg-white dark:bg-slate-900 shadow-2xl transition-transform duration-500 ${isMobileMenuOpen ? "translate-x-0" : "translate-x-full"}`}
        >
          <div className="p-6 pt-20">
            <Button
              onClick={() => setIsMobileMenuOpen(false)}
-              className="absolute top-6 right-6 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
-              aria-label="Close menu"
+              className="absolute top-6 right-6"
              variant="ghost"
              size="icon"
            >
@@ -242,36 +187,54 @@ export function Navbar() {
            </Button>

            <div className="flex flex-col gap-4">
-              {navLinks.map((link, index) => (
+              {navLinks.map((link) => (
                <a
                  key={link.href}
                  href={link.href}
                  onClick={(e) => handleLinkClick(e, link.href)}
-                  className="px-4 py-3 text-lg font-medium text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-all duration-200"
-                  style={{
-                    animationDelay: `${index * 0.1}s`,
-                    animation: isMobileMenuOpen
-                      ? "slide-up 0.4s ease-out forwards"
-                      : "none",
-                    opacity: isMobileMenuOpen ? 1 : 0,
-                  }}
+                  className="px-4 py-3 text-lg font-medium"
                >
                  {link.label}
                </a>
              ))}
-            </div>

-            <div className="mt-8 flex flex-col gap-3">
-              <Button
-                variant="outline"
-                className="w-full px-5 py-3 text-sm font-medium text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600 rounded-full hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
-              >
-                Sign In
-              </Button>
-              <Button className="w-full flex items-center justify-center gap-2 px-6 py-3 text-sm font-semibold text-white btn-gradient rounded-full">
-                Get Started
-                <ArrowRight className="w-4 h-4" />
-              </Button>
+              <div className="mt-4 border-t border-slate-200/70 dark:border-slate-700/70 pt-5 space-y-3">
+                <SignedOut>
+                  <Link
+                    href="/sign-in"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    <Button variant="outline" className="w-full">
+                      Sign In
+                    </Button>
+                  </Link>
+                  <Link
+                    href="/sign-up"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    <Button className="w-full btn-gradient">
+                      Get Started
+                      <ArrowRight className="w-4 h-4 ml-2" />
+                    </Button>
+                  </Link>
+                </SignedOut>
+
+                <SignedIn>
+                  <Link
+                    href="/dashboard"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block"
+                  >
+                    <Button className="w-full">Go to Dashboard</Button>
+                  </Link>
+                  <div className="flex items-center justify-between rounded-xl border border-slate-200/70 dark:border-slate-700/70 px-3 py-2">
+                    <span className="text-sm text-slate-600 dark:text-slate-300">
+                      Account
+                    </span>
+                    <UserButton afterSignOutUrl="/" />
+                  </div>
+                </SignedIn>
+              </div>
            </div>
          </div>
        </div>