Update src/app/forgot-password/page.tsx

src/app/forgot-password/page.tsx

@@ -5,101 +5,72 @@ import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarS
 import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Lock } from "lucide-react";
 import Link from "next/link";
 
 export default function ForgotPasswordPage() {
-  const navItems = [
-    { name: "Home", id: "home" },
-    { name: "Services", id: "services" },
-    { name: "Features", id: "features" },
-    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "about" },
-  ];
-
   return (
     <ThemeProvider
-      defaultButtonVariant="icon-arrow"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="large"
-      background="aurora"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="radial-glow"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      headingFontWeight="normal"
     >
-      {/* Navbar */}
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          navItems={navItems}
-          button={{
-            text: "Start Now",
-            href: "/login",
-          }}
           brandName="DocFlow"
-          className="backdrop-blur-md"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Start Now", href: "/signup" }}
         />
       </div>
 
-      {/* Hero Section - Forgot Password */}
       <div id="forgot-password-hero" data-section="forgot-password-hero">
         <HeroBillboardScroll
           title="Reset Your Password"
-          description="Enter your email address and we'll send you a link to reset your password securely. If you don't have an account yet, you can sign up with a single click."
+          description="Enter your email address and we'll send you a link to reset your password. If you don't receive the email within a few minutes, please check your spam folder."
           tag="Account Recovery"
-          tagIcon="undefined"
+          tagIcon={Lock}
           tagAnimation="slide-up"
-          background={{ variant: "aurora" }}
+          background={{ variant: "plain" }}
           buttons={[
-            {
-              text: "Send Reset Link",
-              href: "contact",
-            },
-            {
-              text: "Back to Login",
-              href: "login",
-            },
+            { text: "Send Reset Link", href: "/" },
+            { text: "Back to Login", href: "/login" },
           ]}
           buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148358961.jpg?_wi=2"
-          imageAlt="DocFlow Dashboard Preview"
           className="min-h-screen"
         />
       </div>
 
-      {/* Contact CTA Section */}
       <div id="contact-cta" data-section="contact-cta">
         <ContactText
-          text="Need additional help recovering your account? Our support team is available 24/7 to assist you with account recovery and security inquiries."
+          text="Having trouble resetting your password? Our support team is here to help 24/7."
           animationType="reveal-blur"
           buttons={[
-            {
-              text: "Contact Support",
-              href: "contact",
-            },
-            {
-              text: "View Help Center",
-              href: "contact",
-            },
+            { text: "Contact Support", href: "/contact" },
+            { text: "Back to Home", href: "/" },
           ]}
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={true}
         />
       </div>
 
-      {/* Footer */}
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="DocFlow"
-          leftLink={{
-            text: "Privacy Policy",
-            href: "#",
-          }}
-          rightLink={{
-            text: "Terms of Service",
-            href: "#",
-          }}
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
         />
       </div>
     </ThemeProvider>