Update src/app/page.tsx

Merge version_20 into main

src/app/page.tsx

@@ -5,11 +5,11 @@ import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import { Building2, Globe, Utensils } from "lucide-react";
@@ -32,30 +32,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Why MCG",
-          id: "difference",
-        },
-        {
-          name: "Industries",
-          id: "industries",
-        },
-        {
-          name: "Process",
-          id: "process",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "About", id: "about"},
+        { name: "Services", id: "services"},
+        { name: "Why MCG", id: "difference"},
+        { name: "Industries", id: "industries"},
+        { name: "Process", id: "process"},
+        { name: "Contact", id: "contact"},
       ]}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CJIeKqO7zvo0s4wbiXzT3hoGtU/uploaded-1779127012413-b6g19ocl.png"
       logoAlt="MCG Merchant Services Logo"
@@ -65,82 +47,28 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient"}}
       title="Payment Processing, Reimagined."
       description="Total transparency. No contracts. 12–24 hour funding. Serving businesses across the United States."
       kpis={[
-        {
-          value: "15+",
-          label: "Years Experience",
-        },
-        {
-          value: "24/7",
-          label: "Expert Support",
-        },
-        {
-          value: "100%",
-          label: "PCI Compliant",
-        },
+        { value: "15+", label: "Years Experience"},
+        { value: "24/7", label: "Expert Support"},
+        { value: "100%", label: "PCI Compliant"},
       ]}
       enableKpiAnimation={true}
       buttons={[
-        {
-          text: "Get a Free Rate Review",
-          href: "#contact",
-        },
-        {
-          text: "Call 516.658.7646",
-          href: "tel:5166587646",
-        },
+        { text: "Get a Free Rate Review", href: "#contact"},
+        { text: "Call 516.658.7646", href: "tel:5166587646"},
       ]}
       mediaAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/person-paying-with-its-smartphone-wallet-app_23-2149167304.jpg?_wi=1"
       imageAlt="Professional payment processing dashboard"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg",
-          alt: "Client 5",
-        },
-      ]}
       marqueeItems={[
-        {
-          type: "text",
-          text: "Transparent Pricing",
-        },
-        {
-          type: "text",
-          text: "No Long-Term Contracts",
-        },
-        {
-          type: "text",
-          text: "Rapid Funding",
-        },
-        {
-          type: "text",
-          text: "Dedicated Support",
-        },
-        {
-          type: "text",
-          text: "Secure Infrastructure",
-        },
+        { type: "text", text: "Transparent Pricing"},
+        { type: "text", text: "No Long-Term Contracts"},
+        { type: "text", text: "Rapid Funding"},
+        { type: "text", text: "Dedicated Support"},
+        { type: "text", text: "Secure Infrastructure"},
       ]}
     />
   </div>
@@ -150,37 +78,21 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="A Consultative Approach to Your Payment Ecosystem."
       description={[
-        "With over 15 years' experience in the payment processing industry, MCG Merchant Services brings a genuine, consultative approach to your business's payment ecosystem.",
-        "We're a full-scale merchant solutions company specializing in Credit Card Processing, Small Business Loans & Lines of Credit.",
+        "With over 15 years' experience in the payment processing industry, MCG Merchant Services brings a genuine, consultative approach to your business's payment ecosystem.",        "We're a full-scale merchant solutions company specializing in Credit Card Processing, Business Loans and Lines of Credit."
       ]}
     />
   </div>
 
   <div id="services" data-section="services">
-      <ProductCardThree
+      <ProductCardTwo
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Credit Card Processing",
-          price: "Flagship",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CJIeKqO7zvo0s4wbiXzT3hoGtU/uploaded-1779127012413-b6g19ocl.png?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Business Loans",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-paying-with-its-smartphone-wallet-app_23-2149167304.jpg?_wi=2",
-        },
-        {
-          id: "p3",
-          name: "POS Solutions",
-          price: "Modern",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg",
-        },
+        { id: "p1", brand: "MCG", name: "Credit Card Processing", price: "Custom", rating: 5, reviewCount: "150+", imageSrc: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&q=80&w=800"},
+        { id: "p2", brand: "MCG", name: "Business Loans and Lines of Credit", price: "Custom", rating: 5, reviewCount: "80+", imageSrc: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&q=80&w=800"},
+        { id: "p3", brand: "MCG", name: "POS Solutions", price: "Custom", rating: 5, reviewCount: "200+", imageSrc: "https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&q=80&w=800"},
       ]}
       title="Built for Modern Merchants"
       description="Our core solutions designed to scale with your business."
@@ -192,25 +104,8 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Hidden fees",
-          "Complex contracts",
-          "Delayed support",
-          "High rates",
-          "Limited transparency",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Total Transparency",
-          "12-24h Funding",
-          "Consultative Service",
-          "PCI Compliant",
-          "Low Rates",
-          "24/7 Support",
-        ],
-      }}
+      negativeCard={{ items: ["Hidden fees", "Complex contracts", "Delayed support", "High rates", "Limited transparency"]}}
+      positiveCard={{ items: ["Total Transparency", "12-24h Funding", "Consultative Service", "PCI Compliant", "Low Rates", "24/7 Support"]}}
       title="What Makes Us Different"
       description="We stand behind transparency and speed."
     />
@@ -222,27 +117,14 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          icon: Building2,
-          title: "Retail",
-          value: "Serving",
-        },
-        {
-          id: "m2",
-          icon: Utensils,
-          title: "Restaurants",
-          value: "Serving",
-        },
-        {
-          id: "m3",
-          icon: Globe,
-          title: "Ecommerce",
-          value: "Serving",
-        },
+        { id: "m1", icon: Building2, title: "Retail", value: "Retail Solutions"},
+        { id: "m2", icon: Utensils, title: "Restaurants", value: "Restaurant Solutions"},
+        { id: "m3", icon: Globe, title: "Ecommerce", value: "Ecommerce Solutions"},
       ]}
       title="Industries We Power"
       description="Trusted by businesses across various sectors."
+      metricTitleClassName="text-sm md:text-base"
+      valueClassName="text-base md:text-lg"
     />
   </div>
 
@@ -251,11 +133,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Brookhaven Coalition of Chambers",
-        "Center Moriches Chamber of Commerce",
-        "Regional Business Council",
-        "National Merchant Alliance",
-        "Merchant Services Trust",
+        "Brookhaven Coalition of Chambers", "Center Moriches Chamber of Commerce", "Regional Business Council", "National Merchant Alliance", "Merchant Services Trust"
       ]}
       title="Trusted Leadership"
       description="Active members of our business community."
@@ -267,21 +145,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "s1",
-          title: "Free Statement Analysis",
-          content: "We review your current rates to identify savings.",
-        },
-        {
-          id: "s2",
-          title: "Custom Solution Design",
-          content: "We tailor a solution that fits your business needs.",
-        },
-        {
-          id: "s3",
-          title: "Approved & Funded",
-          content: "Get setup and funded within 12-24 hours.",
-        },
+        { id: "s1", title: "Free Statement Analysis", content: "We review your current rates to identify savings."},
+        { id: "s2", title: "Custom Solution Design", content: "We tailor a solution that fits your business needs."},
+        { id: "s3", title: "Approved & Funded", content: "Get setup and funded within 12-24 hours."},
       ]}
       title="Three Steps to Better Processing"
       description="Simple, fast, and transparent."
@@ -292,9 +158,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient"}}
       tag="GET IN TOUCH"
       title="Request Your Free Rate Review"
       description="Start your journey toward lower costs today."
@@ -305,41 +169,16 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CJIeKqO7zvo0s4wbiXzT3hoGtU/uploaded-1779127012413-b6g19ocl.png?_wi=2"
+      <FooterLogoEmphasis
+      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CJIeKqO7zvo0s4wbiXzT3hoGtU/uploaded-1779131050506-0utjqe19.png"
       logoText="MCG Merchant Services"
       columns={[
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "516.658.7646",
-              href: "tel:5166587646",
-            },
-            {
-              label: "info@mcgmerchantservices.com",
-              href: "mailto:info@mcgmerchantservices.com",
-            },
-          ],
-        },
+        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
       ]}
-      copyrightText="© 2025 | MCG Merchant Services Inc. All rights reserved."
+      className="bg-[#000612] text-white"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #0A2540;
-  --primary-cta: #C9A961;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #0A2540;
+  --secondary-cta: #041633;
   --secondary-cta-text: #ffffff;
-  --accent: #C9A961;
-  --background-accent: #F4F6FA;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);