Update src/app/pricing/page.tsx

Merge version_19 into main

src/app/contact/page.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Mail } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumLarge"
+      background="circleGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Convrsn"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Process", id: "process" },
+            { name: "For", id: "for" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Get In Touch"
+          tagIcon={Mail}
+          title="See What's Possible for Your Business "
+          description="Ready to grow your business? Share your information and let's schedule a call to discuss your needs. Whether you're looking for a website, ads management, creative producti"
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/premium-photo/abstract-futuristic-blue-background-technology-glowing-lines_118195-51.jpg?id=5040937"
+          imageAlt="Contact us mockup"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          inputPlaceholder="your@email.com"
+          buttonText="Get Started"
+          termsText="We respect your privacy. We'll only use your information to discuss your customer acquisition needs."
+          onSubmit={(email) => console.log('Contact form submitted:', email)}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Convrsn"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,8 +34,9 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Process", id: "process" },
             { name: "For", id: "for" },
+            { name: "Pricing", id: "/pricing" },
             { name: "About", id: "about" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "/contact" }
           ]}
         />
       </div>
@@ -48,8 +49,8 @@ export default function LandingPage() {
           tag="Customer Acquisition Engine"
           tagIcon={Zap}
           buttons={[
-            { text: "Get Your Free Demo Website", href: "contact" },
-            { text: "Book a Call", href: "contact" }
+            { text: "Get Your Free Demo Website", href: "/contact" },
+            { text: "Schedule a meeting", href: "/contact" }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/a-modern-clean-website-design-mockup-dis-1773240171755-25981f6a.png"
           imageAlt="High-converting website design mockup"
@@ -75,15 +76,15 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              title: "Website Design",              description: "A multi-page, high-converting website designed to bring you customers. Optimized for mobile and desktop with clear CTAs, lead capture forms, click-to-call buttons, and fast turnaround within 24-48 hours.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-showing-website-design-elem-1773240172578-a3c8c2d4.png"
+              title: "Website Design",              description: "24-72 hour delivery badge: Multi-page, high-converting website designed to bring you customers. Optimized for mobile and desktop with clear CTAs, lead capture forms, and click-to-call buttons. Industry-leading turnaround time.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-showing-website-design-elem-1773240172578-a3c8c2d4.png"
             },
             {
               id: 2,
-              title: "Meta Ads Management",              description: "Strategic Facebook and Instagram advertising focused on customer acquisition. We research your audience, set up campaigns, optimize for leads or sales, and continuously improve performance based on results.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-audience-targ-1773240173056-7ab9eeb8.png"
+              title: "Meta Ads Management",              description: "✓ Proven results: Strategic Facebook and Instagram advertising focused on customer acquisition. We research your audience, set up campaigns, optimize for leads or sales, and continuously improve performance based on results.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-audience-targ-1773240173056-7ab9eeb8.png"
             },
             {
               id: 3,
-              title: "Monthly Ad Creative",              description: "Ongoing creative production to support your ad campaigns. Multiple hooks, copy variations, ad sizes, and formats delivered ready to upload. Stay competitive with fresh creative angles every month.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-of-creative-content-product-1773240172341-89b17938.png"
+              title: "Monthly Ad Creative",              description: "📦 Delivered monthly: Ongoing creative production to support your ad campaigns. Multiple hooks, copy variations, ad sizes, and formats delivered ready to upload. Stay competitive with fresh creative angles every month.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-of-creative-content-product-1773240172341-89b17938.png"
             }
           ]}
           textboxLayout="default"
@@ -91,6 +92,21 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="textbox" data-section="textbox">
+        <div style={{
+          maxWidth: "800px",          margin: "0 auto",          padding: "3rem 1.5rem",          textAlign: "center"
+        }}>
+          <h2 style={{
+            fontSize: "2rem",            fontWeight: "700",            marginBottom: "1rem",            color: "var(--foreground)"
+          }}>Welcome to Our Text Box</h2>
+          <p style={{
+            fontSize: "1.125rem",            lineHeight: "1.6",            color: "var(--foreground)",            opacity: "0.9"
+          }}>
+            This is a simple text box section added to the home page. You can add any content you want here, including text, paragraphs, or any other information you'd like to display to your visitors.
+          </p>
+        </div>
+      </div>
+
       <div id="demo-website" data-section="demo-website">
         <MetricSplitMediaAbout
           tag="Low-Friction Path to Results"
@@ -101,7 +117,7 @@ export default function LandingPage() {
             { value: "24-48 hrs", title: "Turnaround Time" },
             { value: "Free", title: "Demo Website" }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/a-gorgeous-professional-website-mockup-d-1773240173927-fb2f8a9b.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/a-gorgeous-professional-website-mockup-d-1773240173927-fb2f8a9b.png?_wi=1"
           imageAlt="Demo website preview mockup"
           useInvertedBackground={true}
           mediaAnimation="slide-up"
@@ -122,7 +138,7 @@ export default function LandingPage() {
             },
             {
               id: 2,
-              title: "We Build Your Website",              description: "We create a customer-focused, high-converting website designed to generate leads, calls, bookings, or sales. Typically completed within 24-48 hours. Most agencies take 3-6 weeks. We move faster.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-a-designer-or-1773240172767-2a1dd349.png"
+              title: "We Build Your Website",              description: "24-72 hour delivery: We create a customer-focused, high-converting website designed to generate leads, calls, bookings, or sales. Most agencies take 3-6 weeks. We move faster with industry-leading speed.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-a-designer-or-1773240172767-2a1dd349.png"
             },
             {
               id: 3,
@@ -142,19 +158,19 @@ export default function LandingPage() {
           tagIcon={Target}
           products={[
             {
-              id: "1",              name: "Service Businesses",              price: "Contractors • Landscapers • Roofers",              variant: "Handymen • Plumbers • HVAC • Remodelers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-company-logo-featuring-a-cl-1773240171168-edcfb9af.png",              imageAlt: "Service Business Logo"
+              id: "1",              name: "",              price: "",              variant: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/professional-local-contractor-standing-n-1773326968021-51e00a46.png",              imageAlt: "Service Business Logo"
             },
             {
-              id: "2",              name: "Local Service Industries",              price: "Barbershops • Gyms • Salons",              variant: "Aesthetics • Hair Services • Fitness Studios",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-company-logo-for-a-home-ser-1773240172200-a52bb718.png",              imageAlt: "Local Service Logo"
+              id: "2",              name: "",              price: "",              variant: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/modern-barber-or-aesthetic-professional--1773327044104-512242e1.png",              imageAlt: "Local Service Logo"
             },
             {
-              id: "3",              name: "E-Commerce Brands",              price: "Online Retail • Direct-to-Consumer",              variant: "Product-Based • Dropshipping • SaaS",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-company-logo-for-an-e-comme-1773240170868-abdef8d7.png",              imageAlt: "E-Commerce Logo"
+              id: "3",              name: "",              price: "",              variant: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-modern-workspace-with-product-pack-1773327115199-5b2b44d1.png",              imageAlt: "E-Commerce Logo"
             },
             {
-              id: "4",              name: "Professional Services",              price: "Consulting • Agencies • Advisors",              variant: "Brokers • Coaches • Digital Agencies",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-company-logo-for-a-consulti-1773240171175-4c6b60a1.png",              imageAlt: "Professional Services Logo"
+              id: "4",              name: "",              price: "",              variant: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/confident-business-professional-working--1773327576054-cf3ce66b.png",              imageAlt: "Professional Services Logo"
             }
           ]}
-          gridVariant="uniform-all-items-equal"
+          gridVariant="bento-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
@@ -170,18 +186,18 @@ export default function LandingPage() {
           plans={[
             {
               id: "starter",              badge: "Good for Beginners",              badgeIcon: Sparkles,
-              price: "$200/mo",              subtitle: "Fresh creative angles monthly",              buttons: [{ text: "Get Started", href: "contact" }],
+              price: "$200/mo",              subtitle: "Fresh creative angles monthly",              buttons: [{ text: "Get Started", href: "/contact" }],
               features: ["4-6 ad variations", "Multiple hooks and angles", "Primary ad text and headlines", "Correct ad sizes and formats", "Ready to upload"]
             },
             {
               id: "professional",              badge: "Most Popular",              badgeIcon: Star,
-              price: "$350/mo",              subtitle: "Comprehensive creative support",              buttons: [{ text: "Get Started", href: "contact" }],
+              price: "$350/mo",              subtitle: "Comprehensive creative support",              buttons: [{ text: "Get Started", href: "/contact" }],
               features: ["8-12 ad variations", "Diverse visual angles", "Copy testing variations", "Multiple formats and sizes", "Platform-optimized specs", "Priority support"]
             },
             {
               id: "enterprise",              badge: "For Scaling Brands",              badgeIcon: Zap,
-              price: "$500/mo",              subtitle: "Maximum creative output and strategy",              buttons: [{ text: "Get Started", href: "contact" }],
-              features: ["15+ ad variations monthly", "A/B testing frameworks", "Video and static assets", "Campaign-specific creative", "Unlimited revisions", "Dedicated creative support", "Quarterly strategy sessions"]
+              price: "$500/mo",              subtitle: "Maximum creative output and strategy",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["15+ ad variations monthly", "A/B testing frameworks", "Video and static assets", "Campaign-specific creative", "Unlimited revisions", "Dedicated creative support", ""]
             }
           ]}
           animationType="slide-up"
@@ -246,7 +262,7 @@ export default function LandingPage() {
           title="Start Getting More Customers Today"
           description="Let's discuss your customer acquisition goals and build a strategy that brings you results. Whether you need a website, ads, creative, or a complete system, we're ready to help."
           buttons={[
-            { text: "Request Your Free Demo Website", href: "contact" },
+            { text: "Request Your Free Demo Website", href: "/contact" },
             { text: "Schedule a Call", href: "/contact" }
           ]}
           background={{ variant: "sparkles-gradient" }}
@@ -263,4 +279,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { DollarSign, Sparkles, Star, Zap, Rocket } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumLarge"
+      background="circleGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Convrsn"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Process", id: "process" },
+            { name: "For", id: "for" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardEight
+          title="Ad Creative Pricing"
+          description="Professional monthly ad creative packages to keep your campaigns fresh and competitive. These plans cover ad creative production only. For website design and Meta ads management, please contact us for a custom quote or book a strategy call."
+          tag="Transparent Pricing"
+          tagIcon={DollarSign}
+          plans={[
+            {
+              id: "starter",              subtitle: "Popular",              price: "$200/mo",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["4-6 ad variations", "Multiple hooks and angles", "Primary ad text and headlines", "Correct ad sizes and formats", "Ready to upload"]
+            },
+            {
+              id: "professional",              subtitle: "Most Popular",              price: "$350/mo",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["8-12 ad variations", "Diverse visual angles", "Copy testing variations", "Multiple formats and sizes", "Platform-optimized specs", "Priority support"]
+            },
+            {
+              id: "enterprise",              subtitle: "Enterprise",              price: "$500/mo",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["15+ ad variations monthly", "A/B testing frameworks", "Video and static assets", "Campaign-specific creative", "Unlimited revisions", "Dedicated creative support"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="pricing-nine" data-section="pricing-nine">
+        <PricingCardNine
+          title="Service Plans"
+          description="Comprehensive packages designed to help your business grow with our complete customer acquisition system."
+          tag="All-in-One Solutions"
+          tagIcon={Zap}
+          plans={[
+            {
+              id: "essential",              subtitle: "Getting Started",              price: "$1,500",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["Custom website design", "Basic Meta ads setup", "Initial creative package", "30-day support"]
+            },
+            {
+              id: "professional",              subtitle: "Most Popular",              price: "$2,500",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["Advanced website design", "Full Meta ads management", "Monthly creative production", "3-month strategy support", "Performance optimization"]
+            },
+            {
+              id: "enterprise",              subtitle: "Maximum Growth",              price: "$4,000",              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: ["Premium website design", "Dedicated ads manager", "Weekly creative delivery", "6-month strategy support", "Custom reporting", "Priority support"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Grow?"
+          tagIcon={Rocket}
+          title="Start Getting More Customers Today"
+          description="Let's discuss your customer acquisition goals and build a strategy that brings you results. Whether you need a website, ads, creative, or a complete system, we're ready to help."
+          buttons={[
+            { text: "Request Your Free Demo Website", href: "/contact" },
+            { text: "Schedule a Call", href: "/contact" }
+          ]}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Convrsn"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffffe6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);