Update src/app/verify-otp/page.tsx

Update src/app/profile/page.tsx
Update src/app/page.tsx
2026-03-07 08:25:22 +00:00 · 2026-03-07 08:25:22 +00:00 · 2026-03-07 08:25:21 +00:00 · 2026-03-07 08:25:21 +00:00 · 2026-03-07 08:25:20 +00:00 · 2026-03-07 08:19:10 +00:00
5 changed files with 388 additions and 330 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,74 +1,25 @@
 import type { Metadata } from "next";
 import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Montserrat } from "next/font/google";
+import "./styles/variables.css";
-import "./globals.css";
+import "./styles/base.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 const halant = Halant({
  variable: "--font-halant",
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 const inter = Inter({
-  variable: "--font-inter",
+  variable: "--font-inter",  subsets: ["latin"],
  subsets: ["latin"],
 });
 const montserrat = Montserrat({
  variable: "--font-montserrat",
  subsets: ["latin"],
 });
 export const metadata: Metadata = {
-  title: "AuthVault - Enterprise Secure Authentication System",
+  title: "AuthVault - Secure Authentication",  description: "Enterprise-grade secure authentication system with military-grade encryption and two-factor authentication."};
  description: "Military-grade secure authentication with bcrypt encryption, 2FA, session management, and SQL injection protection. Trusted by enterprises worldwide.",
  keywords: "secure authentication, login system, 2FA, two-factor authentication, password hashing, bcrypt, session management, SQL injection protection",
  metadataBase: new URL("https://example.com"),
  alternates: {
    canonical: "https://example.com",
  },
  openGraph: {
    title: "AuthVault - Enterprise Secure Authentication",
    description: "Military-grade encryption and advanced security features for enterprise authentication.",
    url: "https://example.com",
    siteName: "AuthVault",
    type: "website",
    images: [
      {
        url: "http://img.b2bpic.net/free-photo/software-developers-using-laptop-data-center-managing-server-virtualization_482257-122525.jpg",
        alt: "Secure authentication dashboard",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "AuthVault - Secure Authentication System",
    description: "Enterprise-grade authentication with military-grade encryption and 2FA.",
    images: ["http://img.b2bpic.net/free-photo/software-developers-using-laptop-data-center-managing-server-virtualization_482257-122525.jpg"],
  },
  robots: {
    index: true,
    follow: true,
  },
 };
 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={`${inter.variable} antialiased`}>
-        <body
+        {children}
-          className={`${halant.variable} ${inter.variable} ${montserrat.variable} antialiased`}
+      
        >
          <Tag />
          {children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1436,7 +1387,6 @@ export default function RootLayout({
          }}
        />
      </body>
      </ServiceWrapper>
    </html>
  );
-}
+}
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,11 +1,18 @@
 "use client";
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Lock, Mail, Eye, EyeOff, Zap, AlertCircle } from "lucide-react";
 import Link from "next/link";
 export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [focusedField, setFocusedField] = useState<string | null>(null);
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "#features" },
@@ -14,44 +21,38 @@ export default function LoginPage() {
    { name: "Sign Up", id: "https://example.com/signup" },
  ];
-  const footerColumns = [
+  const handleLogin = async (e: React.FormEvent) => {
-    {
+    e.preventDefault();
-      title: "Product",
+    setError("");
-      items: [
+    setIsLoading(true);
-        { label: "Features", href: "#features" },
+
-        { label: "Security", href: "#metrics" },
+    try {
-        { label: "Pricing", href: "#" },
+      if (!email || !password) {
-        { label: "Documentation", href: "#" },
+        setError("Please fill in all fields");
-      ],
+        return;
-    },
+      }
-    {
+
-      title: "Company",
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      items: [
+        setError("Please enter a valid email address");
-        { label: "About Us", href: "#" },
+        return;
-        { label: "Blog", href: "#" },
+      }
-        { label: "Careers", href: "#" },
+
-        { label: "Contact", href: "#" },
+      if (password.length < 8) {
-      ],
+        setError("Password must be at least 8 characters");
-    },
+        return;
-    {
+      }
-      title: "Resources",
+
-      items: [
+      // Simulate API call with delay
-        { label: "API Docs", href: "#" },
+      await new Promise((resolve) => setTimeout(resolve, 2000));
-        { label: "Security Guide", href: "#" },
+
-        { label: "FAQ", href: "#faq" },
+      // Redirect to verify OTP page
-        { label: "Status", href: "#" },
+      window.location.href = "/verify-otp";
-      ],
+    } catch (err) {
-    },
+      setError("Login failed. Please try again.");
-    {
+    } finally {
-      title: "Legal",
+      setIsLoading(false);
-      items: [
+    }
-        { label: "Privacy Policy", href: "#" },
+  };
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Compliance", href: "#" },
      ],
    },
  ];
  return (
    <ThemeProvider
@@ -60,7 +61,7 @@ export default function LoginPage() {
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
-      background="noiseDiagonalGradient"
+      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
@@ -70,101 +71,168 @@ export default function LoginPage() {
        <NavbarStyleApple brandName="AuthVault" navItems={navItems} />
      </div>
-      <div id="login-hero" data-section="login-hero" className="min-h-screen flex items-center justify-center py-12 px-4">
+      <div id="login" data-section="login" className="min-h-screen flex items-center justify-center px-4 py-20 relative overflow-hidden">
-        <div className="w-full max-w-md">
+        {/* Animated background grid */}
-          <div className="rounded-theme bg-card border border-accent/20 shadow-lg p-8">
+        <div className="absolute inset-0 -z-10">
-            <h1 className="text-3xl font-bold text-foreground mb-2">Sign In</h1>
+          <div className="absolute inset-0 bg-gradient-to-br from-background via-card to-background" />
-            <p className="text-foreground/60 mb-8">Access your secure account</p>
+          <div className="absolute inset-0 opacity-30">
            <div
              className="absolute inset-0"
              style={{
                backgroundImage: `
                  linear-gradient(0deg, transparent 24%, rgba(155, 155, 155, .15) 25%, rgba(155, 155, 155, .15) 26%, transparent 27%, transparent 74%, rgba(155, 155, 155, .15) 75%, rgba(155, 155, 155, .15) 76%, transparent 77%, transparent),
                  linear-gradient(90deg, transparent 24%, rgba(155, 155, 155, .15) 25%, rgba(155, 155, 155, .15) 26%, transparent 27%, transparent 74%, rgba(155, 155, 155, .15) 75%, rgba(155, 155, 155, .15) 76%, transparent 77%, transparent)
                `,
                backgroundSize: "50px 50px"}}
            />
          </div>
        </div>
-            <form className="space-y-6">
+        <div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
-              <div>
+          {/* Header */}
-                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+          <div className="text-center mb-8">
            <div className="flex justify-center mb-4">
              <div className="relative">
                <div className="absolute inset-0 bg-gradient-to-br from-primary-cta to-accent rounded-lg blur-lg opacity-60 animate-pulse" />
                <div className="relative bg-background p-3 rounded-lg border border-primary-cta/20 animate-bounce">
                  <Lock className="w-8 h-8 text-primary-cta" />
                </div>
              </div>
            </div>
            <h1 className="text-4xl font-bold text-foreground mb-2 animate-in slide-in-from-bottom duration-700">
              Secure Login
            </h1>
            <p className="text-foreground/70 animate-in slide-in-from-bottom duration-700 delay-100">
              Access your AuthVault account with enterprise-grade security
            </p>
          </div>
          {/* Login Card */}
          <div className="bg-card border border-accent/30 rounded-lg p-8 shadow-lg backdrop-blur-sm animate-in scale-in duration-700 delay-200">
            <form onSubmit={handleLogin} className="space-y-6">
              {/* Email Field */}
              <div className="group relative">
                <label className="block text-sm font-medium text-foreground mb-2 transition-all group-focus-within:text-primary-cta">
                  Email Address
                </label>
-                <input
+                <div
-                  id="email"
+                  className={`relative transition-all duration-300 ${
-                  type="email"
+                    focusedField === "email"
-                  placeholder="your@email.com"
+                      ? "ring-2 ring-primary-cta/50 border-primary-cta"
-                  className="w-full px-4 py-3 rounded-theme bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta transition-colors"
+                      : "border-accent/30"
-                />
+                  } rounded-lg border`}
-              </div>
+                >
-
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent pointer-events-none transition-colors group-focus-within:text-primary-cta" />
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
                  Password
                </label>
                <input
                  id="password"
                  type="password"
                  placeholder="••••••••"
                  className="w-full px-4 py-3 rounded-theme bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta transition-colors"
                />
              </div>
              <div className="flex items-center justify-between">
                <label className="flex items-center space-x-2">
                  <input
-                    type="checkbox"
+                    type="email"
-                    className="w-4 h-4 rounded border-accent/30 text-primary-cta focus:ring-primary-cta"
+                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    onFocus={() => setFocusedField("email")}
                    onBlur={() => setFocusedField(null)}
                    placeholder="you@example.com"
                    className="w-full bg-transparent pl-10 pr-4 py-3 text-foreground placeholder-foreground/50 focus:outline-none transition-all"
                  />
-                  <span className="text-sm text-foreground/70">Remember me</span>
+                </div>
                </label>
                <Link href="#" className="text-sm text-primary-cta hover:text-primary-cta/80 transition-colors">
                  Forgot password?
                </Link>
              </div>
              {/* Password Field */}
              <div className="group relative">
                <div className="flex justify-between items-center mb-2">
                  <label className="block text-sm font-medium text-foreground transition-all group-focus-within:text-primary-cta">
                    Password
                  </label>
                  <a href="#" className="text-xs text-primary-cta hover:text-primary-cta/80 transition-colors">
                    Forgot?
                  </a>
                </div>
                <div
                  className={`relative transition-all duration-300 ${
                    focusedField === "password"
                      ? "ring-2 ring-primary-cta/50 border-primary-cta"
                      : "border-accent/30"
                  } rounded-lg border`}
                >
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent pointer-events-none transition-colors group-focus-within:text-primary-cta" />
                  <input
                    type={showPassword ? "text" : "password"}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    onFocus={() => setFocusedField("password")}
                    onBlur={() => setFocusedField(null)}
                    placeholder="••••••••"
                    className="w-full bg-transparent pl-10 pr-12 py-3 text-foreground placeholder-foreground/50 focus:outline-none transition-all"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-accent hover:text-primary-cta transition-colors"
                  >
                    {showPassword ? (
                      <EyeOff className="w-5 h-5" />
                    ) : (
                      <Eye className="w-5 h-5" />
                    )}
                  </button>
                </div>
              </div>
              {/* Error Message */}
              {error && (
                <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg animate-in shake duration-300">
                  <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
                  <span className="text-sm text-red-500">{error}</span>
                </div>
              )}
              {/* Login Button */}
              <button
                type="submit"
-                className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-theme font-semibold hover:opacity-90 transition-opacity"
+                disabled={isLoading}
                className="w-full relative group bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 px-4 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-primary-cta/50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
-                Sign In
+                <div className="absolute inset-0 bg-gradient-to-r from-accent to-primary-cta opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                <div className="relative flex items-center justify-center gap-2">
                  {isLoading ? (
                    <>
                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      <span>Authenticating...</span>
                    </>
                  ) : (
                    <>
                      <Zap className="w-4 h-4" />
                      <span>Secure Login</span>
                    </>
                  )}
                </div>
              </button>
            </form>
-            <div className="mt-6 relative">
+            {/* Divider */}
-              <div className="absolute inset-0 flex items-center">
+            <div className="my-6 flex items-center gap-3">
-                <div className="w-full border-t border-accent/20"></div>
+              <div className="flex-1 h-px bg-accent/20" />
-              </div>
+              <span className="text-xs text-foreground/50 font-medium">OR</span>
-              <div className="relative flex justify-center text-sm">
+              <div className="flex-1 h-px bg-accent/20" />
                <span className="px-2 bg-card text-foreground/60">New to AuthVault?</span>
              </div>
            </div>
-            <p className="mt-6 text-center text-foreground/70">
+            {/* Sign Up Link */}
-              <Link href="https://example.com/signup" className="text-primary-cta hover:text-primary-cta/80 font-medium transition-colors">
+            <p className="text-center text-sm text-foreground/70">
-                Create an account
+              Don't have an account?{" "}
-              </Link>
+              <a
-            </p>
+                href="https://example.com/signup"
-
+                className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors"
-            <p className="mt-8 text-xs text-foreground/50 text-center">
+              >
-              This site is protected by reCAPTCHA and the Google{" "}
+                Create one now
-              <a href="#" className="underline hover:text-foreground/70">
+              </a>
                Privacy Policy
              </a>{" "}
              and{" "}
              <a href="#" className="underline hover:text-foreground/70">
                Terms of Service
              </a>{" "}
              apply.
            </p>
          </div>
-          <div className="mt-8 p-4 rounded-theme bg-background-accent/20 border border-background-accent/40">
+          {/* Security Badge */}
-            <p className="text-sm text-foreground/80">
+          <div className="mt-8 flex items-center justify-center gap-2 text-xs text-foreground/60 animate-in fade-in duration-700 delay-500">
-              <span className="font-semibold">🔒 Security First:</span> We use military-grade AES-256 encryption to protect your credentials. Your password is never stored in plain text.
+            <Lock className="w-4 h-4" />
-            </p>
+            <span>AES-256 Encrypted Connection</span>
          </div>
        </div>
      </div>
      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2025 AuthVault. All rights reserved. Enterprise-grade security solutions."
          bottomRightText="Made with security in mind"
        />
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -223,4 +223,4 @@ export default function HomePage() {
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -9,6 +9,14 @@ import { Lock, Shield, Zap, Users } from "lucide-react";
 import Link from "next/link";
 export default function ProfilePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "#features" },
    { name: "Security", id: "#security" },
    { name: "Sign In", id: "https://example.com/login" },
    { name: "Sign Up", id: "https://example.com/signup" },
  ];
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
@@ -25,13 +33,7 @@ export default function ProfilePage() {
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="AuthVault"
-          navItems={[
+          navItems={navItems}
            { name: "Home", id: "/" },
            { name: "Features", id: "#features" },
            { name: "Security", id: "#security" },
            { name: "Sign In", id: "https://example.com/login" },
            { name: "Sign Up", id: "https://example.com/signup" },
          ]}
        />
      </div>
@@ -168,4 +170,4 @@ export default function ProfilePage() {
      </footer>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/verify-otp/page.tsx
+++ b/src/app/verify-otp/page.tsx
@@ -1,14 +1,65 @@
 "use client";
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import { Lock, Shield, Zap, Users, CheckCircle } from "lucide-react";
 import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
 import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
 import { Lock, Shield, Zap, Users } from "lucide-react";
 import Link from "next/link";
 export default function VerifyOtpPage() {
  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
  const [isLoading, setIsLoading] = useState(false);
  const [isVerified, setIsVerified] = useState(false);
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "#features" },
    { name: "Security", id: "#security" },
    { name: "Sign In", id: "https://example.com/login" },
    { name: "Sign Up", id: "https://example.com/signup" },
  ];
  const handleOtpChange = (index: number, value: string) => {
    if (value.length > 1) return;
    if (!/^[0-9]*$/.test(value)) return;
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);
    if (value && index < 5) {
      const nextInput = document.getElementById(`otp-${index + 1}`);
      if (nextInput) nextInput.focus();
    }
  };
  const handleKeyDown = (
    e: React.KeyboardEvent<HTMLInputElement>,
    index: number
  ) => {
    if (e.key === "Backspace" && !otp[index] && index > 0) {
      const prevInput = document.getElementById(`otp-${index - 1}`);
      if (prevInput) prevInput.focus();
    }
  };
  const handleVerify = async () => {
    const otpString = otp.join("");
    if (otpString.length !== 6) return;
    setIsLoading(true);
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000));
      setIsVerified(true);
      setTimeout(() => {
        window.location.href = "/profile";
      }, 2000);
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
@@ -23,149 +74,136 @@ export default function VerifyOtpPage() {
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
-        <NavbarStyleApple
+        <NavbarStyleApple brandName="AuthVault" navItems={navItems} />
          brandName="AuthVault"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "#features" },
            { name: "Security", id: "#security" },
            { name: "Sign In", id: "https://example.com/login" },
            { name: "Sign Up", id: "https://example.com/signup" },
          ]}
        />
      </div>
-      <div id="hero" data-section="hero">
+      <div id="otp-verify" data-section="otp-verify" className="min-h-screen flex items-center justify-center px-4 py-20 relative overflow-hidden">
-        <HeroBillboardGallery
+        {/* Animated background */}
-          title="Two-Factor Authentication Verification"
+        <div className="absolute inset-0 -z-10">
-          description="Secure your account with enterprise-grade OTP verification. Complete two-step authentication to verify your identity and access your AuthVault account safely."
+          <div className="absolute inset-0 bg-gradient-to-br from-background via-card to-background" />
-          background={{ variant: "animated-grid" }}
+          <div className="absolute inset-0 opacity-20">
-          tag="Identity Verification"
+            <div className="absolute top-0 -right-1/3 w-96 h-96 bg-primary-cta/20 rounded-full blur-3xl animate-pulse" />
-          tagIcon={Shield}
+            <div className="absolute bottom-0 -left-1/3 w-96 h-96 bg-accent/20 rounded-full blur-3xl animate-pulse delay-1000" />
          tagAnimation="slide-up"
          buttons={[
            { text: "Verify Now", href: "https://example.com/otp" },
            { text: "Back to Login", href: "https://example.com/login" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/register-sign-up-membership-concept_53876-121221.jpg?_wi=5",              imageAlt: "Two-factor authentication verification"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-keyboard-with-lock-metal-chain_23-2148578114.jpg?_wi=6",              imageAlt: "Secure password protection"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/software-developers-using-laptop-data-center-managing-server-virtualization_482257-122525.jpg?_wi=6",              imageAlt: "Authentication dashboard"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/antibacterial-logo-template_23-2148502706.jpg?_wi=6",              imageAlt: "Security encryption technology"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-discussing-with-disabled-woman_482257-2402.jpg?_wi=6",              imageAlt: "Secure session verification"},
          ]}
          mediaAnimation="slide-up"
          ariaLabel="OTP verification interface"
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardNine
          title="OTP Verification Process"
          description="Multi-layered identity verification with secure one-time password delivery and real-time authentication confirmation across all devices."
          tag="Security Features"
          tagIcon={Zap}
          tagAnimation="opacity"
          features={[
            {
              id: 1,
              title: "OTP Code Delivery",              description: "Receive one-time passwords via SMS, email, or authenticator applications. Time-limited codes (valid for 5-10 minutes) ensure only authorized users can access accounts. No codes are reusable.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/register-sign-up-membership-concept_53876-121221.jpg?_wi=6",                imageAlt: "OTP delivery methods"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-discussing-with-disabled-woman_482257-2402.jpg?_wi=7",                imageAlt: "Authentication confirmation"},
            },
            {
              id: 2,
              title: "Authenticator App Integration",              description: "Support for industry-standard authenticator apps like Google Authenticator and Microsoft Authenticator. TOTP (Time-based One-Time Password) algorithm generates unique codes every 30 seconds without internet connection.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/software-developers-using-laptop-data-center-managing-server-virtualization_482257-122525.jpg?_wi=7",                imageAlt: "Authenticator app setup"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/antibacterial-logo-template_23-2148502706.jpg?_wi=7",                imageAlt: "App-based verification"},
            },
            {
              id: 3,
              title: "Backup Codes & Recovery",              description: "Generate and securely store backup codes for emergency access if you lose your authenticator device. Recovery codes bypass 2FA and restore account access. Single-use codes prevent unauthorized access.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/top-view-keyboard-with-lock-metal-chain_23-2148578114.jpg?_wi=7",                imageAlt: "Backup code generation"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/register-sign-up-membership-concept_53876-121221.jpg?_wi=7",                imageAlt: "Recovery code storage"},
            },
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          ariaLabel="OTP verification features"
        />
      </div>
      <div id="security" data-section="security">
        <MetricCardThree
          title="OTP Security Standards"
          description="Industry-leading verification standards and security metrics for two-factor authentication across all platforms."
          metrics={[
            { id: "1", icon: Lock, title: "Code Encryption", value: "AES-256" },
            { id: "2", icon: Shield, title: "Uptime Guarantee", value: "99.99%" },
            { id: "3", icon: Zap, title: "Verification Time", value: "<100ms" },
            { id: "4", icon: Users, title: "Code Validity", value: "5-10min" },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="OTP security metrics"
        />
      </div>
      <footer className="border-t border-gray-200 bg-white py-12">
        <div className="mx-auto max-w-6xl px-4 md:px-6">
          <div className="grid grid-cols-2 gap-8 md:grid-cols-4 mb-8">
            <div>
              <h3 className="font-semibold text-sm text-foreground mb-4">Product</h3>
              <ul className="space-y-2 text-sm">
                <li><Link href="#features" className="text-gray-600 hover:text-primary-cta transition">Features</Link></li>
                <li><Link href="#security" className="text-gray-600 hover:text-primary-cta transition">Security</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Pricing</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Documentation</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-sm text-foreground mb-4">Company</h3>
              <ul className="space-y-2 text-sm">
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">About Us</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Blog</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Careers</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Contact</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-sm text-foreground mb-4">Resources</h3>
              <ul className="space-y-2 text-sm">
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">API Docs</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Security Guide</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">FAQ</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Status</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-sm text-foreground mb-4">Legal</h3>
              <ul className="space-y-2 text-sm">
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Privacy Policy</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Terms of Service</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Cookie Policy</Link></li>
                <li><Link href="#" className="text-gray-600 hover:text-primary-cta transition">Compliance</Link></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-gray-600">© 2025 AuthVault. All rights reserved. Enterprise-grade security solutions.</p>
            <p className="text-sm text-gray-600">Made with security in mind</p>
          </div>
        </div>
-      </footer>
+
        <div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
          {/* Header */}
          <div className="text-center mb-8">
            <div className="flex justify-center mb-4">
              {isVerified ? (
                <div className="animate-in bounce duration-500">
                  <div className="relative">
                    <div className="absolute inset-0 bg-gradient-to-br from-green-400 to-green-600 rounded-lg blur-lg opacity-60" />
                    <div className="relative bg-background p-3 rounded-lg border border-green-500/40">
                      <CheckCircle className="w-8 h-8 text-green-500" />
                    </div>
                  </div>
                </div>
              ) : (
                <div className="relative">
                  <div className="absolute inset-0 bg-gradient-to-br from-primary-cta to-accent rounded-lg blur-lg opacity-60 animate-pulse" />
                  <div className="relative bg-background p-3 rounded-lg border border-primary-cta/20 animate-bounce">
                    <Lock className="w-8 h-8 text-primary-cta" />
                  </div>
                </div>
              )}
            </div>
            <h1 className="text-4xl font-bold text-foreground mb-2 animate-in slide-in-from-bottom duration-700">
              {isVerified ? "Verified!" : "Enter OTP"}
            </h1>
            <p className="text-foreground/70 animate-in slide-in-from-bottom duration-700 delay-100">
              {isVerified
                ? "Your identity has been confirmed. Redirecting to dashboard..."
                : "We've sent a 6-digit code to your registered email address"}
            </p>
          </div>
          {/* OTP Card */}
          <div className="bg-card border border-accent/30 rounded-lg p-8 shadow-lg backdrop-blur-sm animate-in scale-in duration-700 delay-200">
            {!isVerified ? (
              <>
                {/* OTP Input Fields */}
                <div className="mb-8">
                  <label className="block text-sm font-medium text-foreground mb-4">
                    Enter 6-digit code
                  </label>
                  <div className="flex gap-3 justify-center">
                    {otp.map((digit, index) => (
                      <input
                        key={index}
                        id={`otp-${index}`}
                        type="text"
                        inputMode="numeric"
                        maxLength={1}
                        value={digit}
                        onChange={(e) => handleOtpChange(index, e.target.value)}
                        onKeyDown={(e) => handleKeyDown(e, index)}
                        className={`w-14 h-14 text-center text-2xl font-bold border-2 rounded-lg transition-all duration-300 focus:outline-none ${
                          digit
                            ? "bg-accent/10 border-primary-cta text-foreground"
                            : "bg-transparent border-accent/30 text-foreground/50"
                        } focus:border-primary-cta focus:ring-2 focus:ring-primary-cta/20`}
                      />
                    ))}
                  </div>
                </div>
                {/* Verify Button */}
                <button
                  onClick={handleVerify}
                  disabled={otp.join("").length !== 6 || isLoading}
                  className="w-full relative group bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 px-4 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-primary-cta/50 disabled:opacity-50 disabled:cursor-not-allowed mb-4"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-accent to-primary-cta opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  <div className="relative flex items-center justify-center gap-2">
                    {isLoading ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                        <span>Verifying...</span>
                      </>
                    ) : (
                      <>
                        <Zap className="w-4 h-4" />
                        <span>Verify Code</span>
                      </>
                    )}
                  </div>
                </button>
                {/* Resend Link */}
                <p className="text-center text-sm text-foreground/70">
                  Didn't receive the code?{" "}
                  <button className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
                    Resend OTP
                  </button>
                </p>
              </>
            ) : (
              <div className="text-center space-y-4 animate-in fade-in duration-500">
                <div className="flex justify-center">
                  <div className="relative">
                    <div className="absolute inset-0 bg-green-400/20 rounded-full blur-lg" />
                    <div className="relative w-16 h-16 rounded-full bg-green-400/10 border-2 border-green-500 flex items-center justify-center">
                      <CheckCircle className="w-10 h-10 text-green-500" />
                    </div>
                  </div>
                </div>
                <h2 className="text-2xl font-bold text-foreground">Authentication Successful</h2>
                <p className="text-foreground/70">Your account is now secured with two-factor authentication.</p>
              </div>
            )}
          </div>
          {/* Info Box */}
          <div className="mt-6 p-4 bg-accent/5 border border-accent/20 rounded-lg animate-in fade-in duration-700 delay-500">
            <p className="text-xs text-foreground/70 flex items-start gap-2">
              <Shield className="w-4 h-4 mt-0.5 flex-shrink-0 text-primary-cta" />
              <span>Your OTP code is valid for 5 minutes and can only be used once.</span>
            </p>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
-}
+}
Author	SHA1	Message	Date
bender	7df2b9211b	Update src/app/verify-otp/page.tsx	2026-03-07 08:25:22 +00:00
bender	6368c138ac	Update src/app/profile/page.tsx	2026-03-07 08:25:22 +00:00
bender	e78ff3e422	Update src/app/page.tsx	2026-03-07 08:25:21 +00:00
bender	e28665f4cb	Update src/app/login/page.tsx	2026-03-07 08:25:21 +00:00
bender	4461cc87fd	Update src/app/layout.tsx	2026-03-07 08:25:20 +00:00
bender	6f9ab59baf	Merge version_1 into main Merge version_1 into main	2026-03-07 08:19:10 +00:00
bender	c5db9c9080	Merge version_1 into main Merge version_1 into main	2026-03-07 08:18:09 +00:00
bender	72585e24c2	Merge version_1 into main Merge version_1 into main	2026-03-07 08:15:59 +00:00