Merge version_9 into main

Merge version_9 into main

src/app/page.tsx

@@ -4,11 +4,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Sparkles, Users, Code, MessageSquare, Star, CheckCircle, ArrowRight } from "lucide-react";
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 
 export default function LandingPage() {
   return (
@@ -56,7 +57,7 @@ export default function LandingPage() {
             { src: "https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg", alt: "Design lead" }
           ]}
           avatarText="Trusted by 200+ clients"
-          imageSrc="https://img.b2bpic.net/free-photo/copy-space-colourful-abstract-background_23-2148227075.jpg"
+          imageSrc="https://img.b2bpic.net/free-photo/empty-floor-front-modern-building_1127-3154.jpg?id=1242858&_wi=1"
           imageAlt="Modern workspace with digital design tools"
           mediaAnimation="slide-up"
           marqueeItems={[
@@ -97,32 +98,56 @@ export default function LandingPage() {
       </div>
 
       <div id="features-section" data-section="features-section">
-        <FeatureCardSix 
+        <FeatureCardNineteen
-          title="Innovative Solutions for Modern Challenges"
-          description="We blend cutting-edge technology with thoughtful design to create digital experiences that inspire and engage. Our approach combines strategic thinking with creative execution to deliver results that exceed expectations."
-          tag="Our Process"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
           features={[
             {
               id: 1,
-              title: "Strategic Design Thinking",              description: "We begin every project with deep research and user empathy to ensure our solutions address real needs and create meaningful impact.",              imageSrc: "https://img.b2bpic.net/free-photo/working-process-boardroom_1098-15382.jpg",              imageAlt: "Design thinking process illustration"
+              tag: "Discovery",
+              title: "Research & Strategy",
+              subtitle: "Understanding Your Vision",
+              description: "We conduct comprehensive research and strategic planning to understand your goals, target audience, and market landscape.",
+              imageSrc: "https://img.b2bpic.net/free-photo/empty-floor-front-modern-building_1127-3154.jpg?id=1242858&_wi=2",
+              imageAlt: "Research and strategy phase"
             },
             {
               id: 2,
-              title: "Seamless Digital Integration",              description: "Our technical expertise ensures smooth implementation across platforms, delivering consistent experiences from concept to launch.",              imageSrc: "https://img.b2bpic.net/free-vector/flat-artificial-intelligence-background_23-2147734663.jpg",              imageAlt: "Digital integration workflow visualization"
+              tag: "Design",
+              title: "Creative Development",
+              subtitle: "Bringing Ideas to Life",
+              description: "Our design team creates innovative, user-centered solutions that balance aesthetics with functionality and performance.",
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg",
+              imageAlt: "Creative design development"
             },
             {
               id: 3,
-              title: "Creative Problem Solving",              description: "We approach challenges with fresh perspectives, turning complex problems into elegant solutions through innovation and craftsmanship.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-hand-holding-paper-piece_23-2149930956.jpg",              imageAlt: "Creative problem solving concept diagram"
+              tag: "Development",
+              title: "Technical Implementation",
+              subtitle: "Building with Excellence",
+              description: "We develop robust, scalable solutions using cutting-edge technologies and best practices to ensure optimal performance.",
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg",
+              imageAlt: "Technical development process"
+            },
+            {
+              id: 4,
+              tag: "Launch",
+              title: "Deployment & Support",
+              subtitle: "Going Live with Confidence",
+              description: "We manage seamless deployment and provide ongoing support to ensure your solution succeeds in the real world.",
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930734.jpg",
+              imageAlt: "Launch and deployment phase"
             }
           ]}
+          title="Our Process"
+          description="We follow a proven methodology that combines strategic thinking, creative excellence, and technical expertise to deliver exceptional results for every project."
+          tag="How We Work"
+          tagAnimation="slide-up"
           buttons={[
-            { text: "Explore Our Work", href: "#portfolio-section" }
+            { text: "Start Your Project", href: "#contact-section", dataWebildId: "btn_process_cta" }
           ]}
           buttonAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Our process timeline"
         />
       </div>
 
@@ -182,6 +207,78 @@ export default function LandingPage() {
         />
       </div>
 
+
+      <div id="pricingcardthree" data-section="pricingcardthree">
+        <PricingCardThree
+          plans={[
+            {
+              id: "starter",
+              price: "$29",
+              name: "Starter",
+              buttons: [
+                {
+                  label: "Get Started",
+                  href: "#contact",
+                  dataWebildId: "pricing_starter_btn"
+                }
+              ],
+              features: [
+                "Up to 5 projects",
+                "Basic design templates",
+                "Email support",
+                "1GB storage"
+              ]
+            },
+            {
+              id: "professional",
+              badge: "Popular",
+              price: "$79",
+              name: "Professional",
+              buttons: [
+                {
+                  label: "Choose Plan",
+                  href: "#contact",
+                  dataWebildId: "pricing_professional_btn"
+                }
+              ],
+              features: [
+                "Unlimited projects",
+                "Advanced design tools",
+                "Priority support",
+                "50GB storage",
+                "Team collaboration"
+              ]
+            },
+            {
+              id: "enterprise",
+              price: "$199",
+              name: "Enterprise",
+              buttons: [
+                {
+                  label: "Contact Sales",
+                  href: "#contact",
+                  dataWebildId: "pricing_enterprise_btn"
+                }
+              ],
+              features: [
+                "Custom solutions",
+                "Dedicated account manager",
+                "24/7 support",
+                "Unlimited storage",
+                "Advanced analytics"
+              ]
+            }
+          ]}
+          carouselMode="buttons"
+          animationType="fadeInUp"
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your building projects. Scale as you grow."
+          tag="Pricing Plans"
+          textboxLayout="center"
+          useInvertedBackground="light"
+          ariaLabel="Webild pricing plans"
+        />
+      </div>
       <div id="footer-section" data-section="footer-section">
         <FooterBase 
           columns={[

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f7f6f7;;
-  --card: #ffffff;;
+  --card: rgba(255, 255, 255, 0.7);;
   --foreground: #0a1f3f;;
-  --primary-cta: #0a1f3f;;
+  --primary-cta: rgba(10, 31, 63, 0.8);;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: rgba(255, 255, 255, 0.9);;
-  --accent: #4a90e2;;
+  --accent: #2ecc71;;
-  --background-accent: #a8c5e8;; */
+  --background-accent: rgba(168, 197, 232, 0.6);; */
 
   --background: #f0f4f9;;
-  --card: #ffffff;;
+  --card: rgba(255, 255, 255, 0.7);;
   --foreground: #0a1f3f;;
-  --primary-cta: #0a1f3f;;
+  --primary-cta: rgba(10, 31, 63, 0.8);;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: rgba(255, 255, 255, 0.9);;
   --secondary-cta-text: #1b0c25;;
-  --accent: #4a90e2;;
+  --accent: #2ecc71;;
-  --background-accent: #a8c5e8;;
+  --background-accent: rgba(168, 197, 232, 0.6);;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);