Merge version_31 into main

Merge version_31 into main

src/app/about/page.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { MessageCircle } from "lucide-react";
+
+export default function AboutPage() {
+  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: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactFaq
+          ctaTitle="Request Growth Plan"
+          ctaDescription="Ready for comprehensive creative support? Our $350/mo Growth Plan is designed for businesses scaling their ad campaigns. Get in touch to learn more."
+          ctaButton={{ text: "Request Growth Plan", href: "#" }}
+          ctaIcon={MessageCircle}
+          faqs={[
+            {
+              id: "1",              title: "What's included in the Growth Plan?",              content: "The Growth Plan includes 8-12 ad variations monthly, diverse visual angles, copy testing variations, multiple formats and sizes, platform-optimized specifications, and priority support. This is our most popular plan for growing businesses."
+            },
+            {
+              id: "2",              title: "How is this different from the Starter Plan?",              content: "The Growth Plan offers double the creative output, more diverse visual approaches, built-in copy variations for A/B testing, and priority support to ensure your creative needs are always met quickly."
+            },
+            {
+              id: "3",              title: "Do you provide platform optimization?",              content: "Yes, all creative is optimized for platform specifications. We ensure every ad is formatted correctly for Facebook, Instagram, Reels, and other Meta platforms."
+            },
+            {
+              id: "4",              title: "Can I request specific creative themes?",              content: "Absolutely. We work with you to understand your campaign goals and audience, then tailor creative themes and hooks to maximize your ad performance."
+            }
+          ]}
+          animationType="slide-up"
+          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/contact/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Mail, Rocket } from "lucide-react";
+import { MessageCircle } from "lucide-react";
 
 export default function ContactPage() {
   return (
@@ -27,28 +27,34 @@ export default function ContactPage() {
             { name: "Services", id: "services" },
             { name: "Process", id: "process" },
             { name: "For", id: "for" },
-            { name: "About", id: "about" },
+            { 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" }}
+        <ContactFaq
+          ctaTitle="Request Starter Plan"
+          ctaDescription="Interested in our $200/mo ad creative package? Fill out the form below and we'll get back to you within 24 hours."
+          ctaButton={{ text: "Request Starter Plan", href: "#" }}
+          ctaIcon={MessageCircle}
+          faqs={[
+            {
+              id: "1",              title: "What's included in the Starter Plan?",              content: "The Starter Plan includes 4-6 ad variations monthly with multiple hooks and angles, primary ad text and headlines, correct ad sizes and formats, and assets ready to upload. Perfect for businesses just getting started with paid advertising."
+            },
+            {
+              id: "2",              title: "How often do I receive new creative?",              content: "New creative is delivered monthly, giving you fresh angles and variations to test different messaging and visual approaches with your audience."
+            },
+            {
+              id: "3",              title: "Can I upgrade or downgrade anytime?",              content: "Yes, you can upgrade to our Professional or Growth plans at any time, or downgrade as needed. We offer flexible month-to-month billing."
+            },
+            {
+              id: "4",              title: "What if I need revisions?",              content: "We include revision rounds in our service. Let us know what adjustments you need and we'll refine the creative to better match your vision."
+            }
+          ]}
+          animationType="slide-up"
           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>
 

src/app/enterprise/page.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { MessageCircle } from "lucide-react";
+
+export default function EnterprisePage() {
+  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: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactFaq
+          ctaTitle="Request Premium Plan"
+          ctaDescription="Our $500/mo Premium Plan is designed for scaling brands that need maximum creative output and strategic support. Let's discuss how we can fuel your growth."
+          ctaButton={{ text: "Request Premium Plan", href: "#" }}
+          ctaIcon={MessageCircle}
+          faqs={[
+            {
+              id: "1",              title: "What's included in the Premium Plan?",              content: "The Premium Plan includes 15+ ad variations monthly, A/B testing frameworks, both video and static assets, campaign-specific creative tailored to your offer and audience, dedicated creative support, and structured revision rounds included. This is our premium offering for brands serious about scaling."
+            },
+            {
+              id: "2",              title: "Do you create video content?",              content: "Yes, the Premium Plan includes video and static assets. We produce professional video ads alongside static creative to give you diverse formats for testing and optimization."
+            },
+            {
+              id: "3",              title: "What does A/B testing framework mean?",              content: "We structure your creative with A/B testing in mind, providing variations that test different hooks, angles, headlines, and visuals. This helps you identify what resonates best with your audience and optimize your ad spend."
+            },
+            {
+              id: "4",              title: "How does dedicated support work?",              content: "You get a dedicated creative team member who understands your business, audience, and goals. They're your point of contact for faster turnarounds, strategic recommendations, and priority revision rounds."
+            },
+            {
+              id: "5",              title: "Can creative be tailored to specific campaigns?",              content: "Absolutely. With the Premium Plan, we create campaign-specific creative tailored to your particular offer and target audience. Every variation is strategically designed for maximum impact."
+            }
+          ]}
+          animationType="slide-up"
+          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/page.tsx

@@ -7,13 +7,27 @@ import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Zap, Layers, Sparkles, CheckCircle, Target, DollarSign, Quote, Rocket, Users, Star } from "lucide-react";
+import { Zap, Layers, Sparkles, CheckCircle, Target, DollarSign, Rocket, Users } from "lucide-react";
+import { useState } from "react";
+import ContactFormModal from '@/components/modals/ContactFormModal';
 
 export default function LandingPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+
+  const openModal = (planName: string) => {
+    setSelectedPlan(planName);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedPlan(null);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
@@ -34,7 +48,7 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Process", id: "process" },
             { name: "For", id: "for" },
-            { name: "About", id: "about" },
+            { name: "About", id: "/about" },
             { name: "Contact", id: "/contact" }
           ]}
         />
@@ -51,7 +65,7 @@ export default function LandingPage() {
             { 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"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/a-modern-clean-website-design-mockup-dis-1773240171755-25981f6a.png?_wi=1"
           imageAlt="High-converting website design mockup"
           mediaAnimation="slide-up"
           marqueeItems={[
@@ -75,15 +89,15 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              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"
+              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?_wi=1"
             },
             {
               id: 2,
-              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"
+              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?_wi=1"
             },
             {
               id: 3,
-              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"
+              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?_wi=1"
             }
           ]}
           textboxLayout="default"
@@ -126,7 +140,7 @@ export default function LandingPage() {
             },
             {
               id: 3,
-              title: "Start Getting Customers",              description: "Launch your site and support it with strategic Meta ads and professional creative. Watch leads, calls, and bookings come in. We continuously optimize to improve your customer acquisition.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-business-grow-1773240171504-de7950b3.png"
+              title: "Start Getting Customers",              description: "Launch your site and support it with strategic Meta ads and professional creative. Watch leads, calls, and bookings come in. We continuously optimize to improve your customer acquisition.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-business-grow-1773240171504-de7950b3.png?_wi=1"
             }
           ]}
           textboxLayout="default"
@@ -142,24 +156,22 @@ export default function LandingPage() {
           tagIcon={Target}
           products={[
             {
-              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: "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?_wi=1",              imageAlt: "Service Business 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: "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?_wi=1",              imageAlt: "Local Service 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: "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?_wi=1",              imageAlt: "E-Commerce 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"
+              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?_wi=1",              imageAlt: "Professional Services Logo"
             }
           ]}
-          gridVariant="uniform-all-items-equal"
+          gridVariant="bento-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
-          cardClassName="flex flex-col h-full overflow-hidden"
-          imageClassName="w-full h-64 object-cover object-center"
         />
       </div>
 
@@ -172,18 +184,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: "Request Starter Plan", onClick: () => openModal("Starter Plan") }],
               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" }],
+              id: "professional",              badge: "Most Popular",              badgeIcon: Zap,
+              price: "$350/mo",              subtitle: "Comprehensive creative support",              buttons: [{ text: "Request Growth Plan", onClick: () => openModal("Growth Plan") }],
               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"]
+              id: "enterprise",              badge: "For Scaling Brands",              badgeIcon: Rocket,
+              price: "$500/mo",              subtitle: "Maximum creative output and strategy",              buttons: [{ text: "Request Premium Plan", onClick: () => openModal("Premium Plan") }],
+              features: ["15+ ad variations monthly", "A/B testing frameworks", "Video and static assets", "Campaign-specific creative", " Creative tailored to your offer and audience", "Dedicated creative support", "Structured revision rounds included  "]
             }
           ]}
           animationType="slide-up"
@@ -192,41 +204,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
-        <TestimonialCardSixteen
-          title="What Our Clients Say"
-          description="Real results from businesses that trusted Convrsn to transform their customer acquisition online."
-          tag="Client Testimonials"
-          tagIcon={Quote}
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              role: "Founder & CEO",              company: "Johnson Construction",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-headshot-of-a-confident-ent-1773240173131-9be7d8c7.png"
-            },
-            {
-              id: "2",              name: "Michael Chen",              role: "Owner",              company: "Digital Marketing Agency",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-headshot-of-a-business-prof-1773240172753-c1cf042a.png"
-            },
-            {
-              id: "3",              name: "Emily Rodriguez",              role: "E-Commerce Director",              company: "Fashion & Retail Co",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-headshot-of-a-female-busine-1773240171458-9b3db851.png"
-            },
-            {
-              id: "4",              name: "David Williams",              role: "Service Business Owner",              company: "Premium Home Services",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/professional-headshot-of-a-creative-prof-1773240172454-7572c59b.png"
-            }
-          ]}
-          kpiItems={[
-            { value: "3.2x", label: "Average ROI Improvement" },
-            { value: "47%", label: "Lead Generation Increase" },
-            { value: "2.1x", label: "Customer Acquisition Growth" }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
       <div id="social-proof" data-section="social-proof">
         <SocialProofOne
           title="Trusted by Growing Businesses"
@@ -263,6 +240,13 @@ export default function LandingPage() {
           rightLink={{ text: "Terms of Service", href: "#" }}
         />
       </div>
+
+      {isModalOpen && (
+        <ContactFormModal
+          planName={selectedPlan}
+          onClose={closeModal}
+        />
+      )}
     </ThemeProvider>
   );
 }

src/app/professional-tier/page.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Zap, CheckCircle, Sparkles } from "lucide-react";
+
+export default function ProfessionalTierPage() {
+  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: "/" },
+            { name: "Process", id: "/" },
+            { name: "For", id: "/" },
+            { name: "Starter Tier", id: "/starter-tier" },
+            { name: "Professional Tier", id: "/professional-tier" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Professional Tier - Ad Creative Bundle"
+          description="Our most popular package for growing brands. Get comprehensive ad creative support with double the variations, copy testing, and priority support to scale your campaigns."
+          background={{ variant: "sparkles-gradient" }}
+          tag="$350/month"
+          tagIcon={Zap}
+          buttons={[
+            { text: "Get Started with Professional", href: "#contact-form" },
+            { text: "Back to Pricing", href: "/" }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/a-modern-clean-website-design-mockup-dis-1773240171755-25981f6a.png?_wi=1"
+          imageAlt="Professional tier ad creative overview"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardEight
+          title="What's Included in Professional Tier"
+          description="Double the creative output, comprehensive testing frameworks, and priority support to help you scale your ad campaigns confidently."
+          tag="Tier Benefits"
+          tagIcon={CheckCircle}
+          features={[
+            {
+              id: 1,
+              title: "8-12 Ad Variations Monthly",              description: "Nearly double the creative options from Starter. Get more testing possibilities and maintain campaign freshness across multiple audience segments.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-showing-website-design-elem-1773240172578-a3c8c2d4.png?_wi=3"
+            },
+            {
+              id: 2,
+              title: "Diverse Visual Angles",              description: "Multiple photography styles, design approaches, and visual treatments to appeal to different audience segments and preferences.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-audience-targ-1773240173056-7ab9eeb8.png?_wi=3"
+            },
+            {
+              id: 3,
+              title: "Copy Testing Variations",              description: "Multiple ad copy and headline variations designed to test different value propositions, pain points, and CTAs with your audience.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-of-creative-content-product-1773240172341-89b17938.png?_wi=3"
+            },
+            {
+              id: 4,
+              title: "Platform-Optimized Specs",              description: "Creatives optimized for all major ad platforms and placements. Facebook, Instagram, Reels - all delivered in perfect specifications.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-business-grow-1773240171504-de7950b3.png?_wi=3"
+            },
+            {
+              id: 5,
+              title: "Multiple Formats & Sizes",              description: "Static images, carousel ads, video ads in multiple formats to test what drives best performance for your specific campaigns.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/professional-local-contractor-standing-n-1773326968021-51e00a46.png?_wi=3"
+            },
+            {
+              id: 6,
+              title: "Priority Support",              description: "Direct line to your creative team. Fast turnarounds on revisions and ongoing strategic guidance to optimize your ad performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/modern-barber-or-aesthetic-professional--1773327044104-512242e1.png?_wi=3"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="ideal-for" data-section="ideal-for">
+        <FeatureCardEight
+          title="Ideal For"
+          description="The Professional Tier is designed for growing businesses ready to scale their ad spend and need comprehensive creative support."
+          tag="Best For"
+          tagIcon={Sparkles}
+          features={[
+            {
+              id: 1,
+              title: "Scaling E-Commerce Brands",              description: "Running consistent ad budgets and ready to test multiple creative approaches? Get the variety and support you need to find winning ads.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-modern-workspace-with-product-pack-1773327115199-5b2b44d1.png?_wi=3"
+            },
+            {
+              id: 2,
+              title: "Growth-Phase Agencies",              description: "Serve multiple clients with consistent monthly creative delivery. Get reliable, quality output to maintain client satisfaction and retention.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/confident-business-professional-working--1773327576054-cf3ce66b.png?_wi=2"
+            },
+            {
+              id: 3,
+              title: "Businesses with Proven PMF",              description: "You know your model works. Now you need professional creative support to scale acquisition without bottlenecking on in-house production.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-business-grow-1773240171504-de7950b3.png?_wi=4"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Start with Professional Tier"
+          description="Ready to level up your ad creative? Tell us about your campaigns and goals. We'll work with you to develop a comprehensive creative strategy tailored to your business."
+          inputs={[
+            { name: "businessName", type: "text", placeholder: "Business Name", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "currentAdSpend", type: "text", placeholder: "Current Monthly Ad Spend (optional)", required: false }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Describe your current ad campaigns, what's working, and where you need more creative options...",            rows: 5,
+            required: true
+          }}
+          buttonText="Get Started with Professional Tier"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          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="Professional tier signup"
+        />
+      </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/starter-tier/page.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Zap, CheckCircle, Sparkles } from "lucide-react";
+
+export default function StarterTierPage() {
+  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: "/" },
+            { name: "Process", id: "/" },
+            { name: "For", id: "/" },
+            { name: "Starter Tier", id: "/starter-tier" },
+            { name: "Professional Tier", id: "/professional-tier" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Starter Tier - Ad Creative Bundle"
+          description="Perfect for businesses just getting started with ad creative. Get fresh, conversion-focused ad variations every month to keep your campaigns competitive and engaging."
+          background={{ variant: "sparkles-gradient" }}
+          tag="$200/month"
+          tagIcon={Zap}
+          buttons={[
+            { text: "Get Started with Starter", href: "#contact-form" },
+            { text: "Back to Pricing", href: "/" }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/a-modern-clean-website-design-mockup-dis-1773240171755-25981f6a.png?_wi=1"
+          imageAlt="Starter tier ad creative overview"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardEight
+          title="What's Included in Starter Tier"
+          description="Everything you need to launch your first ad creative production cycle and start testing what works for your audience."
+          tag="Tier Benefits"
+          tagIcon={CheckCircle}
+          features={[
+            {
+              id: 1,
+              title: "4-6 Ad Variations",              description: "Multiple creative options each month with different visual styles and messaging angles to test what resonates with your audience.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-showing-website-design-elem-1773240172578-a3c8c2d4.png?_wi=2"
+            },
+            {
+              id: 2,
+              title: "Multiple Hooks and Angles",              description: "Different opening statements and visual approaches to capture attention and drive engagement. Perfect for A/B testing.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-audience-targ-1773240173056-7ab9eeb8.png?_wi=2"
+            },
+            {
+              id: 3,
+              title: "Ready-to-Upload Specs",              description: "All creatives delivered in correct ad sizes and formats optimized for Facebook and Instagram. No technical adjustments needed.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/illustration-of-creative-content-product-1773240172341-89b17938.png?_wi=2"
+            },
+            {
+              id: 4,
+              title: "Primary Ad Copy & Headlines",              description: "Professionally written ad text and headlines tailored to your business, with variations to test different messaging angles.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-illustration-showing-business-grow-1773240171504-de7950b3.png?_wi=2"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="ideal-for" data-section="ideal-for">
+        <FeatureCardEight
+          title="Ideal For"
+          description="The Starter Tier is perfect if you're just beginning your ad creative journey and want to test what works before scaling up."
+          tag="Best For"
+          tagIcon={Sparkles}
+          features={[
+            {
+              id: 1,
+              title: "Bootstrapping Startups",              description: "Get professional creative production at a lean budget. Test campaigns with limited ad spend while validating your market.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/professional-local-contractor-standing-n-1773326968021-51e00a46.png?_wi=2"
+            },
+            {
+              id: 2,
+              title: "Testing New Markets",              description: "Launching in a new niche or trying new audiences? Get fresh creative angles monthly to test different approaches.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/tmp/modern-barber-or-aesthetic-professional--1773327044104-512242e1.png?_wi=2"
+            },
+            {
+              id: 3,
+              title: "Service Businesses",              description: "Local service providers who need consistent fresh ads without the overhead of in-house creative production.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai86BRUMbva0WDBhojvh7eeV0v/clean-modern-workspace-with-product-pack-1773327115199-5b2b44d1.png?_wi=2"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Start with Starter Tier"
+          description="Tell us about your business and what you're looking to achieve with ad creative. We'll get you set up and start producing custom creatives tailored to your brand."
+          inputs={[
+            { name: "businessName", type: "text", placeholder: "Business Name", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "industry", type: "text", placeholder: "Industry or Service", required: true }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Tell us about your current ad strategy and what you hope to achieve with monthly creative production...",            rows: 5,
+            required: true
+          }}
+          buttonText="Get Started with Starter Tier"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          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="Starter tier signup"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Convrsn"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/components/modals/ContactFormModal.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import { useState } from 'react';
+import { X } from 'lucide-react';
+
+interface ContactFormModalProps {
+  planName: string | null;
+  onClose: () => void;
+}
+
+export default function ContactFormModal({ planName, onClose }: ContactFormModalProps) {
+  const [formData, setFormData] = useState({
+    fullName: '',
+    businessName: '',
+    email: '',
+    websiteOrInstagram: '',
+    businessGoal: '',
+    projectDetails: ''
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setSubmitStatus('idle');
+
+    try {
+      const payload = {
+        ...formData,
+        selectedPlan: planName,
+        timestamp: new Date().toISOString()
+      };
+
+      // Send to your backend or email service
+      const response = await fetch('/api/contact-form', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (response.ok) {
+        setSubmitStatus('success');
+        setFormData({
+          fullName: '',
+          businessName: '',
+          email: '',
+          websiteOrInstagram: '',
+          businessGoal: '',
+          projectDetails: ''
+        });
+        setTimeout(() => {
+          onClose();
+        }, 2000);
+      } else {
+        setSubmitStatus('error');
+      }
+    } catch (error) {
+      console.error('Form submission error:', error);
+      setSubmitStatus('error');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const getModalTitle = () => {
+    if (planName === 'Starter Plan') return 'Starter Plan Inquiry';
+    if (planName === 'Growth Plan') return 'Growth Plan Inquiry';
+    if (planName === 'Premium Plan') return 'Premium Plan Inquiry';
+    return 'Contact Us';
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-lg bg-[var(--card)] rounded-lg shadow-lg max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="sticky top-0 flex items-center justify-between border-b border-[var(--accent)] p-6 bg-[var(--card)]">
+          <h2 className="text-xl font-semibold text-[var(--foreground)]">
+            {getModalTitle()}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-[var(--accent)]/20 rounded transition"
+            aria-label="Close modal"
+          >
+            <X size={24} className="text-[var(--foreground)]" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {submitStatus === 'success' ? (
+            <div className="text-center py-8">
+              <div className="mb-4 text-4xl">✓</div>
+              <h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">
+                Thank you!
+              </h3>
+              <p className="text-[var(--foreground)]/70">
+                Your {planName} inquiry has been received. We'll be in touch within 24 hours.
+              </p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {/* Full Name */}
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                  Full Name *
+                </label>
+                <input
+                  type="text"
+                  name="fullName"
+                  value={formData.fullName}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-2.5 bg-[var(--background)] border border-[var(--accent)]/30 rounded-lg text-[var(--foreground)] placeholder-[var(--foreground)]/50 focus:outline-none focus:border-[var(--primary-cta)] transition"
+                  placeholder="Your full name"
+                />
+              </div>
+
+              {/* Business Name */}
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                  Business Name *
+                </label>
+                <input
+                  type="text"
+                  name="businessName"
+                  value={formData.businessName}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-2.5 bg-[var(--background)] border border-[var(--accent)]/30 rounded-lg text-[var(--foreground)] placeholder-[var(--foreground)]/50 focus:outline-none focus:border-[var(--primary-cta)] transition"
+                  placeholder="Your business name"
+                />
+              </div>
+
+              {/* Email Address */}
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                  Email Address *
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-2.5 bg-[var(--background)] border border-[var(--accent)]/30 rounded-lg text-[var(--foreground)] placeholder-[var(--foreground)]/50 focus:outline-none focus:border-[var(--primary-cta)] transition"
+                  placeholder="your@email.com"
+                />
+              </div>
+
+              {/* Instagram or Website Link */}
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                  Instagram or Website Link *
+                </label>
+                <input
+                  type="text"
+                  name="websiteOrInstagram"
+                  value={formData.websiteOrInstagram}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-2.5 bg-[var(--background)] border border-[var(--accent)]/30 rounded-lg text-[var(--foreground)] placeholder-[var(--foreground)]/50 focus:outline-none focus:border-[var(--primary-cta)] transition"
+                  placeholder="https://instagram.com/yourprofile or yourwebsite.com"
+                />
+              </div>
+
+              {/* Business Goal */}
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                  Business Goal *
+                </label>
+                <input
+                  type="text"
+                  name="businessGoal"
+                  value={formData.businessGoal}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-2.5 bg-[var(--background)] border border-[var(--accent)]/30 rounded-lg text-[var(--foreground)] placeholder-[var(--foreground)]/50 focus:outline-none focus:border-[var(--primary-cta)] transition"
+                  placeholder="e.g., Generate leads, increase sales, build brand awareness"
+                />
+              </div>
+
+              {/* Project Details */}
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                  Project Details *
+                </label>
+                <textarea
+                  name="projectDetails"
+                  value={formData.projectDetails}
+                  onChange={handleChange}
+                  required
+                  rows={4}
+                  className="w-full px-4 py-2.5 bg-[var(--background)] border border-[var(--accent)]/30 rounded-lg text-[var(--foreground)] placeholder-[var(--foreground)]/50 focus:outline-none focus:border-[var(--primary-cta)] transition resize-none"
+                  placeholder="Tell us about your project, timeline, and what you're looking to achieve..."
+                />
+              </div>
+
+              {/* Error Message */}
+              {submitStatus === 'error' && (
+                <div className="p-3 bg-red-500/10 border border-red-500/30 rounded text-red-500 text-sm">
+                  There was an error submitting your form. Please try again.
+                </div>
+              )}
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full px-6 py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-lg font-medium hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isSubmitting ? 'Submitting...' : `Submit ${planName} Request`}
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}