From 9324559d41e30df3a8aecfc7bc25157d06f22c26 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 17 Mar 2026 12:55:18 +0000
Subject: [PATCH] Update src/app/pricing/page.tsx

---
 src/app/pricing/page.tsx | 200 ++++++++++++++++++++-------------------
 1 file changed, 102 insertions(+), 98 deletions(-)

diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 00fc4ec..d788748 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -1,11 +1,16 @@
 "use client";
 
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import Link from "next/link";
+import { Zap, Star, Crown } from "lucide-react";
 
 export default function PricingPage() {
   const navItems = [
@@ -17,17 +22,15 @@ export default function PricingPage() {
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
-        { label: "Features", href: "/#features" },
+      title: "Product",      items: [
+        { label: "Features", href: "#features" },
         { label: "Pricing", href: "/pricing" },
-        { label: "How It Works", href: "/#how-it-works" },
+        { label: "How It Works", href: "#how-it-works" },
         { label: "Dashboard", href: "/dashboard" },
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About Us", href: "#" },
         { label: "Blog", href: "#" },
         { label: "Careers", href: "#" },
@@ -35,8 +38,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -44,8 +46,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Connect",
-      items: [
+      title: "Connect",      items: [
         { label: "Twitter", href: "https://twitter.com" },
         { label: "GitHub", href: "https://github.com" },
         { label: "LinkedIn", href: "https://linkedin.com" },
@@ -71,6 +72,21 @@ export default function PricingPage() {
         <NavbarStyleApple brandName="UpscaleAI" navItems={navItems} />
       </div>
 
+      <div id="pricing-hero" data-section="pricing-hero">
+        <HeroLogo
+          logoText="Transparent, Flexible Pricing"
+          description="Choose the resolution tier that fits your needs. All users get 100 free credits to start upscaling immediately. Upgrade anytime to unlock HD, 2K, or premium 4K quality."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4b4Bdncaq28xNR8VUFdJI5Uzq/three-tier-pricing-cards-layout-comparin-1773751778870-c48cdec5.png"
+          imageAlt="Pricing comparison showing three tiers: Free HD, 2K, and Premium 4K"
+          buttons={[
+            { text: "Start Free", href: "/dashboard" },
+            { text: "Compare Plans", href: "#pricing" },
+          ]}
+          buttonAnimation="slide-up"
+          showDimOverlay={false}
+        />
+      </div>
+
       <div id="pricing" data-section="pricing">
         <PricingCardTwo
           title="Simple, Transparent Pricing"
@@ -80,117 +96,105 @@ export default function PricingPage() {
           animationType="slide-up"
           plans={[
             {
-              id: "hd",
-              badge: "Free Forever",
-              badgeIcon: "Zap",
-              price: "Free",
-              subtitle: "Perfect for social media",
-              features: [
-                "HD resolution (720p)",
-                "Unlimited uploads",
-                "Quick processing",
-                "Download results",
-              ],
-              buttons: [
-                {
-                  text: "Get Started",
-                  href: "/dashboard",
-                },
-              ],
+              id: "hd",              badge: "Free Forever",              badgeIcon: Zap,
+              price: "Free",              subtitle: "Perfect for social media",              features: ["HD resolution (720p)", "Unlimited uploads", "Quick processing", "Download results"],
+              buttons: [{ text: "Get Started", href: "/dashboard" }],
             },
             {
-              id: "2k",
-              badge: "Popular",
-              badgeIcon: "Star",
-              price: "10 Credits",
-              subtitle: "Best for creators",
-              features: [
-                "2K resolution (1440p)",
-                "Unlimited uploads",
-                "Priority processing",
-                "Enhanced details",
-                "Commercial use allowed",
-              ],
-              buttons: [
-                {
-                  text: "Start Now",
-                  href: "/dashboard",
-                },
-              ],
+              id: "2k",              badge: "Popular",              badgeIcon: Star,
+              price: "10 Credits",              subtitle: "Best for creators",              features: ["2K resolution (1440p)", "Unlimited uploads", "Priority processing", "Enhanced details", "Commercial use allowed"],
+              buttons: [{ text: "Start Now", href: "/dashboard" }],
             },
             {
-              id: "4k",
-              badge: "Premium",
-              badgeIcon: "Crown",
-              price: "$50",
-              subtitle: "For professionals",
-              features: [
-                "4K resolution (2160p)",
-                "Unlimited uploads",
-                "Express processing",
-                "AI enhancement",
-                "Batch processing",
-                "Premium support",
-              ],
-              buttons: [
-                {
-                  text: "Upgrade to 4K",
-                  href: "/pricing",
-                },
-              ],
+              id: "4k",              badge: "Premium",              badgeIcon: Crown,
+              price: "$50",              subtitle: "For professionals",              features: ["4K resolution (2160p)", "Unlimited uploads", "Express processing", "AI enhancement", "Batch processing", "Premium support"],
+              buttons: [{ text: "Upgrade to 4K", href: "#pricing" }],
             },
           ]}
         />
       </div>
 
-      <div id="pricing-faq" data-section="pricing-faq">
+      <div id="how-it-works" data-section="how-it-works">
+        <MetricCardTen
+          title="How It Works"
+          description="Three simple steps to transform your videos"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "step-1",              title: "Upload Your Video",              subtitle: "Select any video file from your computer",              category: "Step 1",              value: "Drag & Drop"},
+            {
+              id: "step-2",              title: "Choose Resolution",              subtitle: "Select HD, 2K, or premium 4K upscaling",              category: "Step 2",              value: "Instant"},
+            {
+              id: "step-3",              title: "Download Result",              subtitle: "Get your upscaled video in minutes",              category: "Step 3",              value: "Ready"},
+          ]}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSix
+          title="What Our Users Say"
+          description="Real feedback from content creators and production professionals"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="blur-reveal"
+          testimonials={[
+            {
+              id: "1",              name: "Marcus Chen",              handle: "@marcusproducer",              testimonial: "UpscaleAI transformed our workflow. We now deliver 4K content to clients in half the time with incredible quality. The AI upscaling is remarkably natural-looking.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4b4Bdncaq28xNR8VUFdJI5Uzq/professional-headshot-of-a-video-product-1773751764825-c02bc4fd.png",              imageAlt: "Marcus Chen profile photo",              icon: Star,
+            },
+            {
+              id: "2",              name: "Sarah Williams",              handle: "@sarahcreative",              testimonial: "As a freelance cinematographer, this tool is a game-changer. My clients are blown away by the quality improvement. Worth every credit!",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4b4Bdncaq28xNR8VUFdJI5Uzq/professional-headshot-of-a-creative-dire-1773752000285-edbb8c31.png",              imageAlt: "Sarah Williams profile photo",              icon: Star,
+            },
+            {
+              id: "3",              name: "David Rodriguez",              handle: "@davidfilmmaker",              testimonial: "We've cut our post-production time by 40%. The AI processing is smart, fast, and produces professional-grade results every single time.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4b4Bdncaq28xNR8VUFdJI5Uzq/professional-headshot-of-a-cinematograph-1773751768580-b8c2b669.png",              imageAlt: "David Rodriguez profile photo",              icon: Star,
+            },
+            {
+              id: "4",              name: "Emma Thompson",              handle: "@emmacontent",              testimonial: "Incredible platform. The free tier alone is generous, and the premium 4K option is a must-have for anyone serious about content quality.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4b4Bdncaq28xNR8VUFdJI5Uzq/professional-headshot-of-a-content-produ-1773751780316-2f0a37b3.png",              imageAlt: "Emma Thompson profile photo",              icon: Star,
+            },
+          ]}
+          speed={35}
+          topMarqueeDirection="left"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
         <FaqSplitText
-          sideTitle="Pricing Questions"
-          sideDescription="Have questions about our pricing tiers and credit system? Find answers below."
+          sideTitle="Common Questions"
+          sideDescription="Have questions about our AI video upscaling service? Find answers to the most common queries below."
           textPosition="left"
           useInvertedBackground={false}
           faqsAnimation="blur-reveal"
           faqs={[
             {
-              id: "1",
-              title: "What is the difference between HD, 2K, and 4K?",
-              content:
-                "HD (720p) provides free upscaling suitable for social media. 2K (1440p) uses 10 credits per video and is ideal for creators. 4K (2160p) is our premium option at $50/month with the highest quality enhancement.",
-            },
+              id: "1",              title: "What video formats are supported?",              content: "We support all major video formats including MP4, MKV, AVI, MOV, WebM, and more. Maximum file size is 4GB per upload."},
             {
-              id: "2",
-              title: "How many credits do I get for free?",
-              content:
-                "All new users receive 100 free credits upon signup, which provides ample opportunity to try our service at all quality levels.",
-            },
+              id: "2",              title: "How long does processing take?",              content: "Processing typically takes 3-5 minutes depending on video length and chosen resolution. Express processing is available with premium 4K subscription."},
             {
-              id: "3",
-              title: "Can I purchase additional credits?",
-              content:
-                "Yes, additional credits can be purchased as needed. Pricing is transparent and credit validity never expires.",
-            },
+              id: "3",              title: "Can I use upscaled videos commercially?",              content: "Yes! Free HD upscaling is for personal use. 2K and 4K tiers allow commercial use of upscaled videos."},
             {
-              id: "4",
-              title: "Is there a subscription plan?",
-              content:
-                "Our 4K premium tier is a monthly subscription at $50, which includes unlimited uploads, express processing, and priority support.",
-            },
+              id: "4",              title: "Do I lose the original video?",              content: "No, your original video remains on our servers for 30 days. We only store the upscaled output separately."},
             {
-              id: "5",
-              title: "What happens if I run out of credits?",
-              content:
-                "You can purchase more credits or upgrade to the premium 4K plan. HD upscaling remains free indefinitely.",
-            },
+              id: "5",              title: "What happens when I run out of credits?",              content: "You can purchase additional credits or upgrade to a premium plan. Free HD upscaling remains available indefinitely."},
             {
-              id: "6",
-              title: "Do credits roll over each month?",
-              content:
-                "Yes, unused credits do not expire and will roll over to the next month, giving you flexibility in your usage.",
-            },
+              id: "6",              title: "Is my data secure?",              content: "All uploads are encrypted with SSL/TLS. Videos are automatically deleted after 30 days, and we never share your content."},
           ]}
         />
       </div>
 
+      <div id="cta" data-section="cta">
+        <HeroLogo
+          logoText="Ready to Transform Your Videos?"
+          description="Start upscaling with 100 free credits today. No credit card required. Join thousands of creators and professionals already using UpscaleAI to deliver stunning 4K content."
+          buttons={[
+            { text: "Start Free Now", href: "/dashboard" },
+            { text: "View Features", href: "#features" },
+          ]}
+          buttonAnimation="slide-up"
+          showDimOverlay={false}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="UpscaleAI"