Update src/app/page.tsx

Merge version_17 into main

src/app/page.tsx

@@ -5,14 +5,14 @@ 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 FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 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, CreditCard, Landmark, LayoutGrid } from "lucide-react";
+import { Building2, Globe, Utensils } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,18 +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"
@@ -53,51 +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>
@@ -107,23 +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: "/icons/credit-card-icon.png"},
-        {
-          id: "p2",          name: "Business Loans",          price: "Custom",          imageSrc: "/icons/loan-icon.png"},
-        {
-          id: "p3",          name: "POS Solutions",          price: "Modern",          imageSrc: "/icons/pos-icon.png"},
+        { 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."
@@ -135,14 +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."
     />
@@ -154,18 +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>
 
@@ -174,7 +133,8 @@ 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."
     />
@@ -185,12 +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."
@@ -201,8 +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."
@@ -213,31 +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"
-      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"},
-          ],
-        },
-      ]}
-      copyrightText="© 2025 | MCG Merchant Services Inc. All rights reserved."
+      <FooterLogoReveal
+      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CJIeKqO7zvo0s4wbiXzT3hoGtU/uploaded-1779129893777-rqhh2f16.png"
+      logoText="© 2025 MCG Merchant Services Inc."
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
+      className="bg-white !text-black"
+      logoClassName="bg-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);