bender/3db6dc8f-f693-4035-b6df-b027b5eda9fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #3

Merged
bender merged 6 commits from version_1 into main 2026-03-08 11:14:37 +00:00
Conversation 0 Commits 6 Files Changed 6 +391 -669
6 changed files with 391 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/app/about/page.tsx
View File

@@ -1,144 +1,134 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Users } from "lucide-react";
import { Users, Zap } from "lucide-react";
import Link from "next/link";
export default function AboutPage() {
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"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" },
]}
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>
<div id="team" data-section="team">
<TeamCardEleven
title="Leadership Team"
description="Meet the experienced professionals dedicated to transforming HR document management"
tag="Our Team"
tagIcon={Users}
<div id="about-hero" data-section="about-hero">
<MetricSplitMediaAbout
title="Building Tomorrow's HR Solutions"
description="DocFlow was founded with a mission to simplify employee documentation management for companies across the globe. We believe that administrative work shouldn't be a burden, and that's why we built a platform that just works."
tag="Our Story"
tagIcon={Zap}
tagAnimation="slide-up"
groups={[
{
id: "executive",
groupTitle: "Executive Team",
members: [
{
id: "1",
title: "Dr. Amira Al-Zahrani",
subtitle: "Founder & CEO",
detail: "amira@docflow.com",
imageSrc:
"http://img.b2bpic.net/free-photo/cheerful-handsome-businessman_1262-21003.jpg?_wi=2",
imageAlt: "Dr. Amira Al-Zahrani",
},
{
id: "2",
title: "James Patterson",
subtitle: "Chief Technology Officer",
detail: "james@docflow.com",
imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg?_wi=2",
imageAlt: "James Patterson",
},
{
id: "3",
title: "Dr. Khalid Al-Harmi",
subtitle: "Chief Legal Officer",
detail: "khalid@docflow.com",
imageSrc:
"http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900147.jpg?_wi=2",
imageAlt: "Dr. Khalid Al-Harmi",
},
{
id: "4",
title: "Samantha Rodriguez",
subtitle: "Chief Operations Officer",
detail: "samantha@docflow.com",
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg?_wi=2",
imageAlt: "Samantha Rodriguez",
},
],
},
metrics={[
{ value: "10+", title: "Years Experience" },
{ value: "50", title: "Team Members" },
]}
imageSrc="http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148358961.jpg"
imageAlt="modern HR dashboard interface blue"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="company-values" data-section="company-values">
<FeatureCardTwentySeven
features={[
{
id: "innovation", title: "Innovation First", description:
"We constantly push boundaries to deliver cutting-edge solutions that exceed expectations and drive industry standards forward.", imageSrc:
"http://img.b2bpic.net/free-vector/scrum-agile-2-flat-banners-set_1284-8575.jpg", imageAlt: "real-time status tracking interface"},
{
id: "security", title: "Security & Compliance", description:
"Your data's security is our top priority. We maintain enterprise-grade encryption, regular audits, and full compliance with international standards.", imageSrc:
"http://img.b2bpic.net/free-photo/executive-doing-regular-server-checking_482257-89083.jpg", imageAlt: "secure employee file storage cloud"},
{
id: "customer-success", title: "Customer Success", description:
"Your success is our success. We're committed to providing 24/7 support and working closely with you to achieve your goals.", imageSrc:
"http://img.b2bpic.net/free-photo/close-up-volunteer-oganizing-stuff-donation_23-2149134494.jpg", imageAlt: "HR manager professional portrait"},
{
id: "global-reach", title: "Global Reach", description:
"With offices across multiple continents and support for 20+ languages, we're truly a global platform for global companies.", imageSrc:
"http://img.b2bpic.net/free-vector/website-setup-concept-landing-page_23-2148309892.jpg", imageAlt: "Arabic English bilingual interface design"},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
title="Our Core Values"
description="The principles that guide everything we do"
tag="What Matters"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="about-mission" data-section="about-mission">
<MetricSplitMediaAbout
title="Our Mission & Vision"
description="We believe that managing employee documentation should be simple, secure, and seamless. DocFlow was founded to eliminate the complexity of government procedures, allowing companies to focus on what matters most—their people. Our commitment is to provide enterprise-grade solutions that foster trust, ensure compliance, and drive operational excellence."
tag="Who We Are"
tagIcon={Users}
tagAnimation="slide-up"
metrics={[
<div id="team" data-section="team">
<TeamCardEleven
groups={[
{
value: "Since 2020",
title: "Innovating HR Solutions",
},
{
value: "15+",
title: "Countries Served",
id: "executive", groupTitle: "Executive Team", members: [
{
id: "1", title: "Dr. Amira Al-Zahrani", subtitle: "Founder & CEO", detail: "amira@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/cheerful-handsome-businessman_1262-21003.jpg", imageAlt: "CEO founder business portrait"},
{
id: "2", title: "James Patterson", subtitle: "Chief Technology Officer", detail: "james@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", imageAlt: "CTO chief technology officer portrait"},
{
id: "3", title: "Dr. Khalid Al-Harmi", subtitle: "Chief Legal Officer", detail: "khalid@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900147.jpg", imageAlt: "legal counsel head portrait professional"},
{
id: "4", title: "Samantha Rodriguez", subtitle: "Chief Operations Officer", detail: "samantha@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg", imageAlt: "operations director professional portrait"},
],
},
]}
imageSrc="http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148368862.jpg?_wi=2"
imageAlt="DocFlow Mission"
mediaAnimation="slide-up"
useInvertedBackground={true}
animationType="slide-up"
title="Leadership Team"
description="Meet the experienced professionals dedicated to transforming HR document management"
tag="Our Team"
tagIcon={Users}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactText
text="Interested in joining our team or learning more about DocFlow? Get in touch with us today and discover how we can transform your HR operations."
text="Interested in learning more about our story or joining the DocFlow team? We'd love to connect with you."
animationType="reveal-blur"
buttons={[
{
text: "Join Our Team",
href: "contact",
},
{
text: "Contact Us",
href: "contact",
},
{ text: "Contact Us", href: "/contact" },
{ text: "Join Our Team", href: "#" },
]}
background={{
variant: "radial-gradient",
}}
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
@@ -146,14 +136,8 @@ export default function AboutPage() {
<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>

131
src/app/dashboard-preview/page.tsx
View File

@@ -1,130 +1,69 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Eye, Sparkles } from "lucide-react";
import { Eye } from "lucide-react";
import Link from "next/link";
export default function DashboardPreviewPage() {
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"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" },
]}
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>
<div id="dashboard-interface" data-section="dashboard-interface">
<div id="dashboard-preview" data-section="dashboard-preview">
<MetricSplitMediaAbout
title="Intuitive Dashboard Experience"
description="Our dashboard is built for company owners and HR managers who need instant visibility into all employee documents and government procedures. Get a bird's-eye view of compliance status, upcoming deadlines, and action items. The interface features intuitive navigation, real-time updates, and comprehensive filtering options to streamline your workflow."
description="Our dashboard is built for company owners and HR managers who need instant visibility into all employee documents and government procedures. Get a bird's-eye view of compliance status, upcoming deadlines, and action items."
tag="User Experience"
tagIcon={Eye}
tagAnimation="slide-up"
metrics={[
{
value: "1000+",
title: "Employees Managed",
},
{
value: "99.9%",
title: "System Uptime",
},
{ value: "1000+", title: "Employees Managed" },
{ value: "99.9%", title: "System Uptime" },
]}
imageSrc="http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148368862.jpg?_wi=3"
imageAlt="DocFlow Dashboard Interface"
imageSrc="http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148368862.jpg"
imageAlt="company admin dashboard mockup professional"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="dashboard-features" data-section="dashboard-features">
<FeatureCardTwentySeven
title="Dashboard Capabilities"
description="Powerful tools for managing your entire employee documentation workflow from one centralized location"
tag="Advanced Controls"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
id: "employee-overview",
title: "Employee Overview",
description:
"View all employees at a glance with real-time status indicators. See who has upcoming document expirations, pending approvals, or required actions.",
imageSrc:
"http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148368862.jpg?_wi=4",
imageAlt: "Employee overview dashboard",
},
{
id: "document-workflow",
title: "Document Workflow Management",
description:
"Track documents through every stage of processing. Assign tasks, set reminders, and manage approvals directly from the dashboard with full audit trails.",
imageSrc:
"http://img.b2bpic.net/free-vector/scrum-agile-2-flat-banners-set_1284-8575.jpg?_wi=7",
imageAlt: "Document workflow management",
},
{
id: "compliance-monitoring",
title: "Compliance Monitoring",
description:
"Automated compliance checks ensure all documents meet regulatory requirements. Receive alerts for non-compliance and track remediation efforts in real-time.",
imageSrc:
"http://img.b2bpic.net/free-photo/executive-doing-regular-server-checking_482257-89083.jpg?_wi=7",
imageAlt: "Compliance monitoring system",
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactText
text="Experience the power of DocFlow's dashboard firsthand. Schedule a personalized demo to see how our platform can transform your HR operations and simplify employee document management."
text="Want to see our dashboard in action? Schedule a personalized demo and discover how DocFlow can transform your HR operations."
animationType="reveal-blur"
buttons={[
{
text: "Request Dashboard Demo",
href: "contact",
},
{
text: "Start Free Trial",
href: "contact",
},
{ text: "Request Demo", href: "/contact" },
{ text: "Start Free Trial", href: "/signup" },
]}
background={{
variant: "radial-gradient",
}}
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
@@ -132,14 +71,8 @@ export default function DashboardPreviewPage() {
<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>

85
src/app/forgot-password/page.tsx
View File

@@ -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>

428
src/app/page.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
@@ -8,50 +7,49 @@ import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwe
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
Shield,
Zap,
Sparkles,
Eye,
Award,
Quote,
Building2,
HelpCircle,
Users,
Building2,
FileCheck,
HeadsetIcon,
Headphones,
} from "lucide-react";
import Link from "next/link";
export default function HomePage() {
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"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" },
]}
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>
@@ -62,73 +60,45 @@ export default function HomePage() {
tag="Enterprise-Grade Document Management"
tagIcon={Shield}
tagAnimation="slide-up"
background={{
variant: "aurora",
}}
background={{ variant: "circleGradient" }}
buttons={[
{
text: "Start Free Trial",
href: "signup",
},
{
text: "Request Demo",
href: "contact",
},
{ text: "Start Free Trial", href: "/signup" },
{ text: "Request Demo", href: "/contact" },
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148358961.jpg?_wi=1"
imageAlt="DocFlow Dashboard Preview"
imageSrc="http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148358961.jpg"
imageAlt="modern HR dashboard interface blue"
className="min-h-screen"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySeven
features={[
{
id: "residency-renewal", title: "Residency Renewals", description:
"Automated tracking and reminders for residency permit renewals. Set expiration alerts and manage renewal workflows seamlessly with government agency integration.", imageSrc:
"http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office_181624-25579.jpg", imageAlt: "residency visa document management system"},
{
id: "work-permits", title: "Work Permit Updates", description:
"Centralized work permit management with status tracking, document uploads, and approval workflows. Keep all permits organized and up-to-date.", imageSrc:
"http://img.b2bpic.net/free-photo/calendar-with-postponed-date-concept_23-2148570704.jpg", imageAlt: "work permit renewal reminder system"},
{
id: "sponsorship-transfer", title: "Sponsorship Transfers", description:
"Streamlined sponsorship transfer workflows with multi-party coordination, documentation requirements, and approval tracking for seamless employee transitions.", imageSrc:
"http://img.b2bpic.net/free-photo/close-up-chief-executive-officer-establishing-new-company-goals-business-development_482257-136148.jpg", imageAlt: "sponsorship transfer process visualization"},
{
id: "visa-applications", title: "Visa Applications", description:
"End-to-end visa application management including document collection, submission tracking, and status updates with real-time notifications.", imageSrc:
"http://img.b2bpic.net/free-photo/calendar-with-postponed-date-concept_23-2148570704.jpg", imageAlt: "work permit renewal reminder system"},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
title="Core Services"
description="Comprehensive solutions for all your employee documentation and government procedure needs"
tag="What We Offer"
tagIcon={Zap}
tagAnimation="slide-up"
features={[
{
id: "residency-renewal",
title: "Residency Renewals",
description:
"Automated tracking and reminders for residency permit renewals. Set expiration alerts and manage renewal workflows seamlessly with government agency integration.",
imageSrc:
"http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office_181624-25579.jpg?_wi=1",
imageAlt: "Residency renewal management",
},
{
id: "work-permits",
title: "Work Permit Updates",
description:
"Centralized work permit management with status tracking, document uploads, and approval workflows. Keep all permits organized and up-to-date.",
imageSrc:
"http://img.b2bpic.net/free-photo/calendar-with-postponed-date-concept_23-2148570704.jpg?_wi=1",
imageAlt: "Work permit management system",
},
{
id: "sponsorship-transfer",
title: "Sponsorship Transfers",
description:
"Streamlined sponsorship transfer workflows with multi-party coordination, documentation requirements, and approval tracking for seamless employee transitions.",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-chief-executive-officer-establishing-new-company-goals-business-development_482257-136148.jpg?_wi=1",
imageAlt: "Sponsorship transfer workflow",
},
{
id: "visa-applications",
title: "Visa Applications",
description:
"End-to-end visa application management including document collection, submission tracking, and status updates with real-time notifications.",
imageSrc:
"http://img.b2bpic.net/free-photo/calendar-with-postponed-date-concept_23-2148570704.jpg?_wi=2",
imageAlt: "Visa application tracking",
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
@@ -136,69 +106,39 @@ export default function HomePage() {
<div id="features" data-section="features">
<FeatureCardTwentySeven
title="Platform Features"
description="Advanced capabilities designed to reduce administrative burden and ensure compliance"
tag="Powerful Tools"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
id: "employee-document-mgmt",
title: "Employee File Management",
description:
"Organize and centralize all employee documents in secure digital files. Upload, categorize, and retrieve documents instantly with version control.",
imageSrc:
"http://img.b2bpic.net/free-photo/executive-doing-regular-server-checking_482257-89083.jpg?_wi=1",
imageAlt: "Employee file management interface",
},
id: "employee-document-mgmt", title: "Employee File Management", description:
"Organize and centralize all employee documents in secure digital files. Upload, categorize, and retrieve documents instantly with version control.", imageSrc:
"http://img.b2bpic.net/free-photo/executive-doing-regular-server-checking_482257-89083.jpg", imageAlt: "secure employee file storage cloud"},
{
id: "government-tracking",
title: "Government Procedure Tracking",
description:
"Monitor the status of every government procedure in real-time. Receive updates directly from agencies and track progress at each stage of the process.",
imageSrc:
"http://img.b2bpic.net/free-vector/scrum-agile-2-flat-banners-set_1284-8575.jpg?_wi=1",
imageAlt: "Government procedure tracking",
},
id: "government-tracking", title: "Government Procedure Tracking", description:
"Monitor the status of every government procedure in real-time. Receive updates directly from agencies and track progress at each stage of the process.", imageSrc:
"http://img.b2bpic.net/free-vector/scrum-agile-2-flat-banners-set_1284-8575.jpg", imageAlt: "real-time status tracking interface"},
{
id: "expiry-reminders",
title: "Expiration Reminders",
description:
"Intelligent notification system alerts you before documents expire. Set custom reminder intervals and assign responsible parties for timely action.",
imageSrc:
"http://img.b2bpic.net/free-photo/calendar-with-postponed-date-concept_23-2148570704.jpg?_wi=3",
imageAlt: "Document expiration alerts",
},
id: "expiry-reminders", title: "Expiration Reminders", description:
"Intelligent notification system alerts you before documents expire. Set custom reminder intervals and assign responsible parties for timely action.", imageSrc:
"http://img.b2bpic.net/free-photo/calendar-with-postponed-date-concept_23-2148570704.jpg", imageAlt: "work permit renewal reminder system"},
{
id: "secure-storage",
title: "Secure Cloud Storage",
description:
"Enterprise-grade encryption and compliance with international data protection standards. Your data is protected with military-level security protocols.",
imageSrc:
"http://img.b2bpic.net/free-photo/executive-doing-regular-server-checking_482257-89083.jpg?_wi=2",
imageAlt: "Secure file storage",
},
id: "secure-storage", title: "Secure Cloud Storage", description:
"Enterprise-grade encryption and compliance with international data protection standards. Your data is protected with military-level security protocols.", imageSrc:
"http://img.b2bpic.net/free-photo/executive-doing-regular-server-checking_482257-89083.jpg", imageAlt: "secure employee file storage cloud"},
{
id: "status-tracking",
title: "Request Status Tracking",
description:
"Track each employee request through every stage of processing. Detailed timeline views show exactly where each document or procedure stands.",
imageSrc:
"http://img.b2bpic.net/free-vector/scrum-agile-2-flat-banners-set_1284-8575.jpg?_wi=2",
imageAlt: "Real-time status tracking",
},
id: "status-tracking", title: "Request Status Tracking", description:
"Track each employee request through every stage of processing. Detailed timeline views show exactly where each document or procedure stands.", imageSrc:
"http://img.b2bpic.net/free-vector/scrum-agile-2-flat-banners-set_1284-8575.jpg", imageAlt: "real-time status tracking interface"},
{
id: "bilingual-support",
title: "Bilingual Interface",
description:
"Seamless English and Arabic support with full RTL compatibility. Manage operations in your preferred language with culturally-aware workflows.",
imageSrc:
"http://img.b2bpic.net/free-vector/website-setup-concept-landing-page_23-2148309892.jpg?_wi=1",
imageAlt: "Bilingual interface design",
},
id: "bilingual-support", title: "Bilingual Interface", description:
"Seamless English and Arabic support with full RTL compatibility. Manage operations in your preferred language with culturally-aware workflows.", imageSrc:
"http://img.b2bpic.net/free-vector/website-setup-concept-landing-page_23-2148309892.jpg", imageAlt: "Arabic English bilingual interface design"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
title="Platform Features"
description="Advanced capabilities designed to reduce administrative burden and ensure compliance"
tag="Powerful Tools"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
@@ -212,61 +152,40 @@ export default function HomePage() {
tagIcon={Eye}
tagAnimation="slide-up"
metrics={[
{
value: "1000+",
title: "Employees Managed",
},
{
value: "99.9%",
title: "System Uptime",
},
{ value: "1000+", title: "Employees Managed" },
{ value: "99.9%", title: "System Uptime" },
]}
imageSrc="http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148368862.jpg?_wi=1"
imageAlt="DocFlow Dashboard"
imageSrc="http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148368862.jpg"
imageAlt="company admin dashboard mockup professional"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
metrics={[
{
id: "1", value: "500", title: "Active Companies", description: "Enterprises trust us with their documentation", icon: Building2,
},
{
id: "2", value: "50K", title: "Employees Managed", description: "Documents processed monthly", icon: Users,
},
{
id: "3", value: "10M", title: "Documents Stored", description: "Securely managed in our system", icon: FileCheck,
},
{
id: "4", value: "24", title: "Hours Support", description: "Dedicated customer success team", icon: Headphones,
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
title="Trusted by Growing Companies"
description="Industry-leading metrics that demonstrate our commitment to excellence and customer success"
tag="Our Impact"
tagIcon={Award}
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "500",
title: "Active Companies",
description: "Enterprises trust us with their documentation",
icon: Building2,
},
{
id: "2",
value: "50K",
title: "Employees Managed",
description: "Documents processed monthly",
icon: Users,
},
{
id: "3",
value: "10M",
title: "Documents Stored",
description: "Securely managed in our system",
icon: FileCheck,
},
{
id: "4",
value: "24/7",
title: "Support Available",
description: "Dedicated customer success team",
icon: HeadsetIcon,
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
@@ -274,75 +193,104 @@ export default function HomePage() {
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
testimonials={[
{
id: "1", name: "Fatima Al-Mansouri", role: "HR Director", company: "Gulf Trading Corp", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-volunteer-oganizing-stuff-donation_23-2149134494.jpg", imageAlt: "HR manager professional portrait"},
{
id: "2", name: "Mohammed Al-Rashid", role: "Operations Manager", company: "Emirates Tech Solutions", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg", imageAlt: "operations manager professional portrait"},
{
id: "3", name: "Sarah Johnson", role: "Company Owner", company: "International Services Ltd", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/closeup-serious-handsome-middle-aged-boss_1262-4837.jpg", imageAlt: "professional business executive portrait"},
{
id: "4", name: "Ahmed Al-Maktoum", role: "Sponsorship Manager", company: "Regional Development Partners", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/dealership-salesman-answering-customers-questions-about-cars-financing-purchase-process-vehicle_482257-133046.jpg", imageAlt: "business sponsor professional portrait"},
{
id: "5", name: "Lisa Chen", role: "Compliance Officer", company: "Global HR Consulting", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/happy-confident-grey-haired-executive-with-laptop_74855-3472.jpg", imageAlt: "legal compliance officer professional portrait"},
{
id: "6", name: "David Miller", role: "CEO", company: "International Import Export", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg", imageAlt: "professional man business portrait"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
title="What Our Customers Say"
description="Real feedback from HR managers, company owners, and sponsors who trust DocFlow"
tag="Testimonials"
tagIcon={Quote}
tagAnimation="slide-up"
testimonials={[
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="faq-section" data-section="faq-section">
<FaqBase
faqs={[
{
id: "1",
name: "Fatima Al-Mansouri",
role: "HR Director",
company: "Gulf Trading Corp",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-volunteer-oganizing-stuff-donation_23-2149134494.jpg",
imageAlt: "Fatima Al-Mansouri",
},
id: "1", title: "Is DocFlow compliant with GDPR and data protection regulations?", content:
"Yes, DocFlow is fully compliant with GDPR, ISO 27001, and other international data protection standards. We perform regular security audits and maintain SOC 2 Type II certification. Your data is encrypted both in transit and at rest using military-grade encryption protocols."},
{
id: "2",
name: "Mohammed Al-Rashid",
role: "Operations Manager",
company: "Emirates Tech Solutions",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg",
imageAlt: "Mohammed Al-Rashid",
},
id: "2", title: "How long does implementation take?", content:
"Typical implementation takes 2-4 weeks depending on your organization size and complexity. Our dedicated onboarding team works with you to migrate existing data, configure workflows, and train your team. We provide 24/7 support during and after implementation."},
{
id: "3",
name: "Sarah Johnson",
role: "Company Owner",
company: "International Services Ltd",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/closeup-serious-handsome-middle-aged-boss_1262-4837.jpg",
imageAlt: "Sarah Johnson",
},
id: "3", title: "Can DocFlow integrate with our existing HR systems?", content:
"Yes, DocFlow offers integrations with popular HR platforms including SAP SuccessFactors, Workday, BambooHR, and many others. We also provide API access for custom integrations and can work with your development team on tailored solutions."},
{
id: "4",
name: "Ahmed Al-Maktoum",
role: "Sponsorship Manager",
company: "Regional Development Partners",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/dealership-salesman-answering-customers-questions-about-cars-financing-purchase-process-vehicle_482257-133046.jpg",
imageAlt: "Ahmed Al-Maktoum",
},
id: "4", title: "Does DocFlow support Arabic and other languages?", content:
"DocFlow has full bilingual support for English and Arabic with complete RTL interface compatibility. Additional languages can be added based on customer demand. All government procedure templates are available in both English and Arabic."},
{
id: "5",
name: "Lisa Chen",
role: "Compliance Officer",
company: "Global HR Consulting",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/happy-confident-grey-haired-executive-with-laptop_74855-3472.jpg",
imageAlt: "Lisa Chen",
},
id: "5", title: "What happens if I need to migrate away from DocFlow?", content:
"We provide complete data export capabilities in multiple formats (CSV, JSON, PDF). Your data is always yours and can be exported at any time. We'll assist with migration and provide 30 days of technical support during the transition process."},
{
id: "6",
name: "David Miller",
role: "CEO",
company: "International Import Export",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
imageAlt: "David Miller",
id: "6", title: "How does pricing work for large enterprises?", content:
"Our pricing scales with your organization. We offer volume discounts for enterprises managing 500+ employees. Contact our sales team for custom quotes, dedicated support, and enterprise-grade SLAs tailored to your specific needs."},
]}
faqsAnimation="slide-up"
title="Frequently Asked Questions"
description="Find answers to common questions about DocFlow's features, security, and implementation"
tag="Need Help?"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="smooth"
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
groups={[
{
id: "executive", groupTitle: "Executive Team", members: [
{
id: "1", title: "Dr. Amira Al-Zahrani", subtitle: "Founder & CEO", detail: "amira@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/cheerful-handsome-businessman_1262-21003.jpg", imageAlt: "CEO founder business portrait"},
{
id: "2", title: "James Patterson", subtitle: "Chief Technology Officer", detail: "james@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", imageAlt: "CTO chief technology officer portrait"},
{
id: "3", title: "Dr. Khalid Al-Harmi", subtitle: "Chief Legal Officer", detail: "khalid@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900147.jpg", imageAlt: "legal counsel head portrait professional"},
{
id: "4", title: "Samantha Rodriguez", subtitle: "Chief Operations Officer", detail: "samantha@docflow.com", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg", imageAlt: "operations director professional portrait"},
],
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
title="Leadership Team"
description="Meet the experienced professionals dedicated to transforming HR document management"
tag="Our Team"
tagIcon={Users}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
@@ -353,18 +301,10 @@ export default function HomePage() {
text="Ready to transform your employee documentation process? Connect with our team to schedule a personalized demo and learn how DocFlow can streamline your operations."
animationType="reveal-blur"
buttons={[
{
text: "Schedule Demo",
href: "contact",
},
{
text: "Contact Sales",
href: "contact",
},
{ text: "Schedule Demo", href: "/contact" },
{ text: "Contact Sales", href: "/contact" },
]}
background={{
variant: "radial-gradient",
}}
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
@@ -372,14 +312,8 @@ export default function HomePage() {
<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>

121
src/app/pricing/page.tsx
View File

@@ -3,24 +3,24 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Award, HelpCircle, Building2, Users, FileCheck, HeadsetIcon } from "lucide-react";
import { Users, Building2, FileCheck, Headphones } from "lucide-react";
import Link from "next/link";
export default function PricingPage() {
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"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
@@ -28,118 +28,47 @@ export default function PricingPage() {
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Start Now", href: "/login" }}
className="backdrop-blur-md"
button={{ text: "Start Now", href: "/signup" }}
/>
</div>
<div id="metrics" data-section="metrics">
<div id="pricing-metrics" data-section="pricing-metrics">
<MetricCardOne
title="Trusted by Growing Companies"
description="Industry-leading metrics that demonstrate our commitment to excellence and customer success"
tag="Our Impact"
tagIcon={Award}
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "500+",
title: "Active Companies",
description: "Enterprises trust us with their documentation",
icon: Building2,
id: "1", value: "500", title: "Active Companies", description: "Enterprises trust us with their documentation", icon: Building2,
},
{
id: "2",
value: "50K+",
title: "Employees Managed",
description: "Documents processed monthly",
icon: Users,
id: "2", value: "50K", title: "Employees Managed", description: "Documents processed monthly", icon: Users,
},
{
id: "3",
value: "10M+",
title: "Documents Stored",
description: "Securely managed in our system",
icon: FileCheck,
id: "3", value: "10M", title: "Documents Stored", description: "Securely managed in our system", icon: FileCheck,
},
{
id: "4",
value: "24/7",
title: "Support Available",
description: "Dedicated customer success team",
icon: HeadsetIcon,
id: "4", value: "24", title: "Hours Support", description: "Dedicated customer success team", icon: Headphones,
},
]}
gridVariant="four-items-2x2-equal-grid"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
title="Pricing That Scales With You"
description="Choose a plan that fits your organization size and growth trajectory"
tag="Transparent Pricing"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="faq-section" data-section="faq-section">
<FaqBase
title="Frequently Asked Questions"
description="Find answers to common questions about DocFlow's features, security, and implementation"
tag="Need Help?"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "1",
title: "Is DocFlow compliant with GDPR and data protection regulations?",
content:
"Yes, DocFlow is fully compliant with GDPR, ISO 27001, and other international data protection standards. We perform regular security audits and maintain SOC 2 Type II certification. Your data is encrypted both in transit and at rest using military-grade encryption protocols.",
},
{
id: "2",
title: "How long does implementation take?",
content:
"Typical implementation takes 2-4 weeks depending on your organization size and complexity. Our dedicated onboarding team works with you to migrate existing data, configure workflows, and train your team. We provide 24/7 support during and after implementation.",
},
{
id: "3",
title: "Can DocFlow integrate with our existing HR systems?",
content:
"Yes, DocFlow offers integrations with popular HR platforms including SAP SuccessFactors, Workday, BambooHR, and many others. We also provide API access for custom integrations and can work with your development team on tailored solutions.",
},
{
id: "4",
title: "Does DocFlow support Arabic and other languages?",
content:
"DocFlow has full bilingual support for English and Arabic with complete RTL interface compatibility. Additional languages can be added based on customer demand. All government procedure templates are available in both English and Arabic.",
},
{
id: "5",
title: "What happens if I need to migrate away from DocFlow?",
content:
"We provide complete data export capabilities in multiple formats (CSV, JSON, PDF). Your data is always yours and can be exported at any time. We'll assist with migration and provide 30 days of technical support during the transition process.",
},
{
id: "6",
title: "How does pricing work for large enterprises?",
content:
"Our pricing scales with your organization. We offer volume discounts for enterprises managing 500+ employees. Contact our sales team for custom quotes, dedicated support, and enterprise-grade SLAs tailored to your specific needs.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="smooth"
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactText
text="Ready to transform your employee documentation process? Connect with our team to schedule a personalized demo and learn how DocFlow can streamline your operations."
text="Ready to find the perfect plan for your organization? Contact our sales team for a personalized quote and custom enterprise options."
animationType="reveal-blur"
buttons={[
{ text: "Schedule Demo", href: "/contact" },
{ text: "Contact Sales", href: "/contact" },
{ text: "Get In Touch", href: "/contact" },
{ text: "View Demo", href: "/contact" },
]}
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}

89
src/app/reset-password/page.tsx
View File

@@ -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 ResetPasswordPage() {
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 - Reset Password */}
<div id="reset-password-hero" data-section="reset-password-hero">
<HeroBillboardScroll
title="Create Your New Password"
description="Set a strong, secure password for your DocFlow account. Your password should be at least 12 characters long and include a mix of uppercase, lowercase, numbers, and special characters for maximum security."
tag="Secure Password Update"
tagIcon="undefined"
title="Create a New Password"
description="Please enter a new password for your account. Make sure it's strong and unique to keep your account secure."
tag="Set New Password"
tagIcon={Lock}
tagAnimation="slide-up"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
buttons={[
{
text: "Update Password",
href: "contact",
},
{
text: "Back to Login",
href: "login",
},
{ text: "Update Password", href: "/" },
{ text: "Cancel", href: "/login" },
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148358961.jpg?_wi=3"
imageAlt="DocFlow Dashboard Preview"
className="min-h-screen"
/>
</div>
{/* Contact CTA Section */}
<div id="contact-cta" data-section="contact-cta">
<ContactText
text="Password security is critical to protecting your employee data. If you have any concerns about your account security or need to verify your identity, please contact our security team immediately."
text="Need assistance? Our support team is available around the clock to help you secure your account."
animationType="reveal-blur"
buttons={[
{
text: "Security Support",
href: "contact",
},
{
text: "View Security Guidelines",
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>