Switch to version 1: modified src/app/pricing/page.tsx

src/app/pricing/page.tsx

@@ -1,13 +1,22 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { CreditCard, Star, Sparkles, Crown, HelpCircle } from "lucide-react";
+import { CreditCard, HelpCircle, Star, Sparkles, Crown } from "lucide-react";
+
+const PricingPage = () => {
+  const navItems = [
+    { name: "Features", id: "features" },
+    { name: "Pricing", id: "pricing" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+    { name: "Blog", id: "https://blog.webild.io" },
+  ];
 
-export default function PricingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -21,26 +30,19 @@ export default function PricingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="semibold"
     >
+      {/* Navbar */}
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
-          brandName="Webild"
-          navItems={[
-            { name: "Features", id: "features" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-            { name: "Blog", id: "https://blog.webild.io" },
-          ]}
-        />
+        <NavbarStyleApple brandName="Webild" navItems={navItems} />
       </div>
 
+      {/* Pricing Section */}
       <div id="pricing" data-section="pricing">
         <PricingCardEight
           title="Simple, Transparent Pricing"
           description="Choose the perfect plan for your business. All plans include our core features and 24/7 support."
           tag="Pricing"
           tagIcon={CreditCard}
-          tagAnimation="slide-up"
+          tagAnimation="entrance-slide"
           plans={[
             {
               id: "starter",              badge: "Most Popular",              badgeIcon: Star,
@@ -71,10 +73,11 @@ export default function PricingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           uniformGridCustomHeightClasses="min-h-[500px]"
-          buttonAnimation="slide-up"
+          buttonAnimation="entrance-slide"
         />
       </div>
 
+      {/* FAQ Section */}
       <div id="faq" data-section="faq">
         <FaqDouble
           faqs={[
@@ -104,19 +107,20 @@ export default function PricingPage() {
                 "Yes, we offer a 14-day money-back guarantee for all new subscriptions. If Webild doesn't meet your needs, we'll refund your subscription cost with no questions asked."},
           ]}
           title="Frequently Asked Questions"
-          description="Find answers to common questions about Webild pricing, features, and support."
+          description="Find answers to common questions about Webild, pricing, and how it works."
           tag="Help & Support"
           tagIcon={HelpCircle}
-          tagAnimation="slide-up"
+          tagAnimation="entrance-slide"
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="smooth"
           faqsAnimation="blur-reveal"
           buttons={[{ text: "Contact Support", href: "/contact" }]}
-          buttonAnimation="slide-up"
+          buttonAnimation="entrance-slide"
         />
       </div>
 
+      {/* Footer */}
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="Webild"
@@ -126,4 +130,6 @@ export default function PricingPage() {
       </div>
     </ThemeProvider>
   );
-}
+};
+
+export default PricingPage;