Update src/app/contact/page.tsx

Merge version_21 into main

src/app/contact/page.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+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: "About", id: "about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="See What's Possible for Your Business"
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Get In Touch", onClick: () => console.log('Contact clicked') }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Services", href: "#" },
+                { label: "Contact", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2024 Convrsn. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -35,7 +35,7 @@ export default function LandingPage() {
             { name: "Process", id: "process" },
             { name: "For", id: "for" },
             { name: "About", id: "about" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "/contact" }
           ]}
         />
       </div>
@@ -48,8 +48,8 @@ export default function LandingPage() {
           tag="Customer Acquisition Engine"
           tagIcon={Zap}
           buttons={[
-            { text: "Get Your Free Demo Website", href: "contact" },
+            { text: "Get Your Free Demo Website", href: "/contact" },
-            { text: "Book a Call", 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 +75,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"
@@ -101,7 +101,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 +122,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 +142,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 +170,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" }],
+              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"]
+              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"
@@ -246,8 +246,8 @@ 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" }
+            { text: "Schedule a Call", href: "/contact" }
           ]}
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
@@ -263,4 +263,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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