9a751a04-ffb9-45c6-9d5a-eacf3d02574b/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { CreditCard, BarChart3, ShieldCheck, DollarSign, ListChecks } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Gateways", id: "#gateways" },
        { name: "Reporting", id: "#reporting" },
        { name: "Management", id: "#management" },
      ]}
      brandName="UzVest Pay"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "glowing-orb" }}
      title="Enterprise-Grade Payment Orchestration"
      description="Integrate multiple payment gateways, manage complex transactions, and generate real-time financial reports effortlessly."
      tag="Financial Infrastructure Platform"
      buttons={[
        { text: "Get Started", href: "#gateways" },
        { text: "Request Demo", href: "#contact" },
      ]}
      mediaItems={[
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=i9ns68&_wi=1",          imageAlt: "financial dashboard"
        },
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zst2qi",          imageAlt: "payment processing"
        }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 500+ Enterprises"
    />
  </div>

  <div id="gateways" data-section="market">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        { id: "1", value: "15+", title: "Payment Gateways", items: ["Global coverage", "Local processing", "Automatic routing"] },
        { id: "2", value: "99.9%", title: "Uptime SLA", items: ["High availability", "Redundant infrastructure", "Auto-failover"] },
        { id: "3", value: "500ms", title: "Latency", items: ["Global edge network", "Optimized flow", "Instant confirmation"] },
      ]}
      title="Unified Gateway Integration"
      description="Connect to all your preferred payment providers through a single, unified API."
      titleSegments={[{ type: 'text', content: 'Unified ' }, { type: 'text', content: 'Gateway Integration' }]}
    />
  </div>

  <div id="management" data-section="startups">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        { id: "m1", name: "Transaction Reconciliation", price: "Automated", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yhag5w&_wi=1" },
        { id: "m2", name: "Refund Management", price: "Centralized", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c57diq" },
        { id: "m3", name: "Fraud Prevention", price: "AI-Powered", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1rjo95" },
      ]}
      title="Transaction Management"
      description="Full visibility and control over every payment lifecycle event."
    />
  </div>

  <div id="reporting" data-section="works">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Real-time Analytics",          description: "Live dashboards for tracking revenue and volume.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z5p23z",          imageAlt: "analytics dashboard"
        },
        {
          title: "Custom Reporting",          description: "Export detailed financial insights for your stakeholders.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=i9ns68&_wi=2",          imageAlt: "report generation"
        },
        {
          title: "Compliance Ready",          description: "Audit-ready logs for seamless financial reporting.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yhag5w&_wi=2",          imageAlt: "compliance dashboard"
        },
      ]}
      title="Financial Reporting"
      description="Transform raw payment data into actionable business intelligence."
    />
  </div>

  <div id="why" data-section="why">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="Security First"
      title="Bank-Grade Security"
      description="We process millions in payments securely with PCI-DSS Level 1 certification."
      subdescription="Your data is encrypted, processed, and managed with highest security standards."
      icon={ShieldCheck}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k4vo3b"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "Does it support multi-currency?", content: "Yes, we support 130+ currencies with automated conversion." },
        { id: "f2", title: "How is reporting handled?", content: "Custom dashboards and automated daily exports to CSV/JSON/BI tools." },
        { id: "f3", title: "Can I add custom gateways?", content: "Yes, our modular API allows integration of any custom gateway." },
      ]}
      title="Technical FAQ"
      description="Answers regarding our payment infrastructure."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      text="Ready to modernize your payments?"
      buttons={[{ text: "Contact Sales", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="UzVest Pay"
      columns={[
        {
          title: "Infrastructure",          items: [
            { label: "Gateways", href: "#gateways" },
            { label: "Reporting", href: "#reporting" },
          ],
        },
        {
          title: "Compliance",          items: [
            { label: "Security", href: "#" },
            { label: "Terms", href: "#" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}