Update src/app/page.tsx

src/app/page.tsx

@@ -1,7 +1,45 @@
 'use client';
 
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { ThemeProvider } from '@/context/ThemeProvider';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import ContactForm from '@/components/form/ContactForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { CreditCard, AlertCircle, CheckCircle2, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send } from 'lucide-react';
+
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Features', id: '#features' },
+  { name: 'Pricing', id: '#pricing' },
+  { name: 'Contact', id: '#contact' },
+];
+
+const footerColumns = [
+  {
+    title: 'Product',
+    items: [
+      { label: 'Features', href: '#features' },
+      { label: 'Pricing', href: '#pricing' },
+      { label: 'Security', href: '#' },
+    ],
+  },
+  {
+    title: 'Company',
+    items: [
+      { label: 'About', href: '#' },
+      { label: 'Blog', href: '#' },
+      { label: 'Careers', href: '#' },
+    ],
+  },
+  {
+    title: 'Legal',
+    items: [
+      { label: 'Privacy', href: '#' },
+      { label: 'Terms', href: '#' },
+      { label: 'Contact', href: '#contact' },
+    ],
+  },
+];
 
 export default function Home() {
   return (
@@ -11,36 +49,187 @@ export default function Home() {
       borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
+      background="circleGradient"
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
       <NavbarLayoutFloatingInline
-        navItems={[
-          { name: 'Home', id: '/' },
-          { name: 'Payment Methods', id: '/payment-methods' },
-          { name: 'Community', id: '/community' },
-        ]}
-        brandName="Webild"
-        button={{ text: 'Get Started', href: '#' }}
-        animateOnLoad={true}
+        navItems={navItems}
+        brandName="PayFlow"
+        button={{
+          text: 'Get Started',
+          href: '#contact',
+        }}
+        animateOnLoad
       />
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-5xl font-bold mb-4">Welcome to Webild</h1>
-          <p className="text-lg text-foreground/75 mb-8">Explore our payment solutions and community</p>
-          <div className="flex gap-4 justify-center">
-            <a href="/payment-methods" className="px-6 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90">
-              Payment Methods
-            </a>
-            <a href="/community" className="px-6 py-2 bg-secondary-cta text-white rounded-lg hover:opacity-90">
-              Community
-            </a>
+
+      <section id="hero">
+        <HeroBillboardDashboard
+          background={{ variant: 'radial-gradient' }}
+          tag="Secure Payment Processing"
+          tagIcon={CreditCard}
+          title="Unified Payment Gateway for Modern Businesses"
+          description="Accept iDEAL, PayPal, and Mastercard payments with secure processing, real-time confirmations, and comprehensive order management."
+          buttons={[
+            { text: 'Start Accepting Payments', href: '#features' },
+            { text: 'View Documentation', href: '#' },
+          ]}
+          dashboard={{
+            title: 'Payment Dashboard',
+            logoIcon: Hexagon,
+            imageSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
+            buttons: [{ text: 'View Transactions', href: '#' }, { text: 'Export Reports', href: '#' }],
+            sidebarItems: [{ icon: House, active: true }, { icon: CreditCard }, { icon: Settings }],
+            stats: [
+              { title: 'Daily Revenue', values: [2450, 3890, 5120], valuePrefix: '$', description: 'Total transaction value.' },
+              { title: 'Success Rate', values: [98.5, 99.2, 99.8], valueSuffix: '%', description: 'Payment completion rate.' },
+              { title: 'Transactions', values: [1240, 1980, 2650], description: 'Processed orders today.' },
+            ],
+            chartTitle: 'Payment Volume Trend',
+            chartData: [{ value: 60 }, { value: 45 }, { value: 80 }, { value: 55 }, { value: 90 }],
+            listTitle: 'Recent Payments',
+            listItems: [
+              { icon: CheckCircle2, title: '€150.00 iDEAL', status: 'Confirmed' },
+              { icon: CreditCard, title: 'Mastercard $89.99', status: 'Confirmed' },
+              { icon: AlertCircle, title: 'PayPal $250.00', status: 'Pending' },
+            ],
+          }}
+        />
+      </section>
+
+      <section id="features" className="py-20">
+        <div className="space-y-12">
+          <div className="text-center">
+            <h2 className="text-4xl font-bold mb-4">Payment Method Integration</h2>
+            <p className="text-foreground/70 max-w-2xl mx-auto">Support multiple payment methods with seamless integration and automatic order confirmation.</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
+            {/* iDEAL Card */}
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 mb-4">
+                <CreditCard className="w-6 h-6 text-primary-cta" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">iDEAL Payments</h3>
+              <p className="text-foreground/70 mb-4">Popular in the Netherlands and Belgium. Direct bank transfers with real-time confirmation.</p>
+              <ul className="space-y-2 text-sm text-foreground/60">
+                <li className="flex items-center">✓ Instant verification</li>
+                <li className="flex items-center">✓ Lower fees</li>
+                <li className="flex items-center">✓ High conversion</li>
+              </ul>
+            </div>
+
+            {/* PayPal Card */}
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 mb-4">
+                <CreditCard className="w-6 h-6 text-primary-cta" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">PayPal Integration</h3>
+              <p className="text-foreground/70 mb-4">Global coverage with buyer protection and flexible payment options.</p>
+              <ul className="space-y-2 text-sm text-foreground/60">
+                <li className="flex items-center">✓ Global reach</li>
+                <li className="flex items-center">✓ Buyer protection</li>
+                <li className="flex items-center">✓ Recurring payments</li>
+              </ul>
+            </div>
+
+            {/* Mastercard Card */}
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 mb-4">
+                <CreditCard className="w-6 h-6 text-primary-cta" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Mastercard Processing</h3>
+              <p className="text-foreground/70 mb-4">Secure credit card processing with advanced fraud detection.</p>
+              <ul className="space-y-2 text-sm text-foreground/60">
+                <li className="flex items-center">✓ PCI DSS compliant</li>
+                <li className="flex items-center">✓ 3D Secure ready</li>
+                <li className="flex items-center">✓ Fraud prevention</li>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
+      </section>
+
+      <section id="pricing" className="py-20">
+        <div className="space-y-12">
+          <div className="text-center">
+            <h2 className="text-4xl font-bold mb-4">Order Confirmation System</h2>
+            <p className="text-foreground/70 max-w-2xl mx-auto">Automatic order confirmations with real-time status updates and customer notifications.</p>
+          </div>
+
+          <div className="max-w-4xl mx-auto px-4 space-y-6">
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0">
+                  <CheckCircle2 className="w-6 h-6 text-green-500" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">Instant Payment Confirmation</h3>
+                  <p className="text-foreground/70">Customers receive immediate confirmation emails upon successful payment across all payment methods.</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0">
+                  <CheckCircle2 className="w-6 h-6 text-green-500" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">Real-Time Order Status Updates</h3>
+                  <p className="text-foreground/70">Customers can track their order status from payment initiation through delivery with webhook-based notifications.</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0">
+                  <CheckCircle2 className="w-6 h-6 text-green-500" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">Secure Order Data Management</h3>
+                  <p className="text-foreground/70">All order information is encrypted and stored securely with audit trails for compliance.</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 rounded-lg bg-card border border-foreground/10">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0">
+                  <CheckCircle2 className="w-6 h-6 text-green-500" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">Multi-Language Support</h3>
+                  <p className="text-foreground/70">Order confirmations are automatically sent in the customer's preferred language.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="contact" className="py-20">
+        <ContactForm
+          title="Get Started with PayFlow"
+          description="Join hundreds of businesses integrating secure payment processing today. Set up your account in minutes."
+          tag="Contact Us"
+          inputPlaceholder="Enter your email"
+          buttonText="Request Demo"
+          centered
+        />
+      </section>
+
+      <footer className="border-t border-foreground/10">
+        <FooterBaseCard
+          logoText="PayFlow"
+          columns={footerColumns}
+          copyrightText="© 2025 PayFlow. All rights reserved."
+          onPrivacyClick={() => console.log('Privacy policy clicked')}
+        />
+      </footer>
     </ThemeProvider>
   );
-}
+}