Add src/app/payment-methods/page.tsx

src/app/payment-methods/page.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import { CreditCard } from 'lucide-react';
+
+export default function PaymentMethods() {
+  const paymentMethods = [
+    {
+      id: 1,
+      title: 'iDEAL',
+      description: 'Dutch online banking payment method. Direct bank transfers with instant confirmation and high security standards.',
+      imageSrc: '/images/ideal-payment.svg',
+    },
+    {
+      id: 2,
+      title: 'PayPal',
+      description: 'Secure digital wallet solution. Buy and pay online with buyer protection and flexible payment options.',
+      imageSrc: '/images/paypal-payment.svg',
+    },
+    {
+      id: 3,
+      title: 'Mastercard',
+      description: 'Global credit card payment method. Fast, secure transactions with fraud protection and rewards.',
+      imageSrc: '/images/mastercard-payment.svg',
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingInline
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Payment Methods', id: '/payment-methods' },
+          { name: 'Community', id: '/community' },
+        ]}
+        brandName="Webild"
+        button={{ text: 'Get Started', href: '#' }}
+        animateOnLoad={true}
+      />
+      <div id="payment-methods" data-section="payment-methods" className="py-20">
+        <FeatureCardSix
+          title="Payment Integration"
+          description="Choose from our secure and reliable payment methods"
+          tag="Payment Methods"
+          features={paymentMethods}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}