Merge version_6 into main

Merge version_6 into main

src/app/page.tsx

@@ -33,7 +33,8 @@ export default function LandingPage() {
           navItems={[
             { name: "Services", id: "services" },
             { name: "Portfolio", id: "portfolio" },
-            { name: "About", id: "about" }
+            { name: "About", id: "about" },
+            { name: "Pricing", id: "pricing" }
           ]}
           button={{ text: "Get Started", href: "#contact" }}
         />
@@ -235,6 +236,7 @@ export default function LandingPage() {
                 { label: "Home", href: "/" },
                 { label: "Services", href: "#services" },
                 { label: "Portfolio", href: "#portfolio" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "About", href: "#about" }
               ]
             },
@@ -261,4 +263,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { CheckCircle, Sparkles } from 'lucide-react';
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Webild Design Studio"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Portfolio", id: "portfolio" },
+            { name: "About", id: "about" },
+            { name: "Pricing", id: "pricing" }
+          ]}
+          button={{ text: "Get Started", href: "#contact" }}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing" className="relative">
+        <PricingCardEight
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your web design needs. All plans include ongoing support and revisions."
+          plans={[
+            {
+              id: "starter",              badge: "Starter",              badgeIcon: Sparkles,
+              price: "$2,500",              subtitle: "Perfect for small businesses getting started online",              buttons: [
+                { text: "Choose Plan", href: "#contact" }
+              ],
+              features: [
+                "5-page responsive website",                "Mobile-first design",                "Basic SEO optimization",                "Contact form integration",                "3 rounds of revisions",                "30-day support included",                "SSL certificate included"
+              ]
+            },
+            {
+              id: "professional",              badge: "Professional",              badgeIcon: CheckCircle,
+              price: "$5,500",              subtitle: "Ideal for growing businesses with advanced requirements",              buttons: [
+                { text: "Choose Plan", href: "#contact" }
+              ],
+              features: [
+                "Up to 15-page custom website",                "Advanced responsive design",                "Comprehensive SEO strategy",                "E-commerce integration",                "Blog setup and optimization",                "5 rounds of revisions",                "90-day support included",                "Analytics setup",                "Custom animations and effects"
+              ]
+            },
+            {
+              id: "enterprise",              badge: "Enterprise",              badgeIcon: CheckCircle,
+              price: "Custom",              subtitle: "Tailored solutions for large-scale digital transformation",              buttons: [
+                { text: "Request Quote", href: "#contact" }
+              ],
+              features: [
+                "Unlimited pages and custom functionality",                "Full design system development",                "Advanced SEO and SEM strategy",                "Complex integrations and APIs",                "CMS implementation",                "Unlimited revisions",                "6-month dedicated support",                "Performance optimization",                "Security audit and hardening",                "Ongoing maintenance retainer"
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          tag="Pricing Plans"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          className="relative"
+          containerClassName="max-w-7xl mx-auto px-4 py-16 md:py-24"
+          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4 text-center"
+          textBoxDescriptionClassName="text-lg text-center text-opacity-80 mb-12"
+        />
+      </div>
+
+      <div id="contact" data-section="contact" className="relative">
+        <ContactText
+          text="Ready to get started? Our team is here to help you choose the right plan and answer any questions you may have. Let's discuss your project and create a custom proposal if needed."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Send Us a Message", href: "mailto:hello@webild-design.com" },
+            { text: "Schedule a Consultation", href: "#" }
+          ]}
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          ariaLabel="Contact us section"
+          className="relative"
+          containerClassName="max-w-4xl mx-auto px-4 py-20 md:py-32"
+          contentClassName="text-center"
+          textClassName="text-3xl md:text-4xl font-bold mb-8"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
+        />
+      </div>
+
+      <div id="footer" data-section="footer" className="relative border-t border-opacity-20">
+        <FooterLogoEmphasis
+          logoText="Webild Design Studio"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Services", href: "/#services" },
+                { label: "Portfolio", href: "/#portfolio" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "About", href: "/#about" }
+              ]
+            },
+            {
+              items: [
+                { label: "Contact", href: "/#contact" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Email", href: "mailto:hello@webild-design.com" },
+                { label: "Phone", href: "tel:+1-850-555-0123" },
+                { label: "Northwest Florida", href: "#" },
+                { label: "Serving USA", href: "#" }
+              ]
+            }
+          ]}
+          ariaLabel="Site footer"
+          className="relative"
+          containerClassName="max-w-7xl mx-auto px-4 py-16"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}