Add src/app/checkout/page.tsx

2026-06-09 09:18:20 +00:00
parent 6202723bbe
commit a936ef3436
1 changed files with 125 additions and 0 deletions
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { Sparkles } from "lucide-react";
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home", id: "#home"},
+              {
+                name: "Products", id: "#products"},
+              {
+                name: "Features", id: "#features"},
+              {
+                name: "Testimonials", id: "#testimonials"},
+              {
+                name: "Pricing", id: "#pricing"},
+              {
+                name: "FAQ", id: "#faq"},
+              {
+                name: "Checkout", id: "/checkout"},
+              {
+                name: "Downloads", id: "/downloads"},
+              {
+                name: "Contact", id: "#contact"},
+            ]}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started", href: "#products"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="checkout-hero" data-section="checkout-hero">
+          <HeroBillboardTestimonial
+            useInvertedBackground={false}
+            background={{
+              variant: "animated-grid"}}
+            title="Secure Checkout"
+            description="Your payment is safe with us. Complete your purchase with confidence using our encrypted payment gateway. Instant access to your digital products awaits!"
+            testimonials={[]}
+            testimonialRotationInterval={5000}
+            buttons={[
+              {
+                text: "Back to Products", href: "#products"},
+            ]}
+            avatars={[]}
+            avatarText=""
+            imageSrc="http://img.b2bpic.net/free-photo/data-security-payment-online_1491-187.jpg"
+            imageAlt="Secure payment transaction"
+            mediaAnimation="slide-up"
+            tag="Transaction Secured"
+            tagIcon={Sparkles}
+            marqueeItems={[]}
+            marqueeSpeed={30}
+            showMarqueeCard={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates", href: "#products"},
+                  {
+                    label: "Logos", href: "#products"},
+                  {
+                    label: "Social Media Kits", href: "#products"},
+                  {
+                    label: "Banners & Flyers", href: "#products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us", href: "#about"},
+                  {
+                    label: "Features", href: "#features"},
+                  {
+                    label: "Pricing", href: "#pricing"},
+                  {
+                    label: "Contact", href: "#contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy", href: "#"},
+                  {
+                    label: "Terms of Service", href: "#"},
+                  {
+                    label: "Refund Policy", href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}