Update src/app/page.tsx

Merge version_31 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 NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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";
@@ -30,74 +30,44 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+      <NavbarLayoutFloatingInline
       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: "Services", id: "services"},
+        { 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"
       brandName="MCG Merchant Services"
+      button={{ text: "Get Started", href: "#contact" }}
+      className="bg-[#020617] pl-0 pr-4 md:pr-8"
+      logoClassName="h-24 w-auto scale-150 origin-left mr-auto"
     />
   </div>
 
   <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 +77,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://img.b2bpic.net/free-photo/close-up-of-credit-card-terminal_1262-15967.jpg"},
-        {
-          id: "p2",          name: "Business Loans",          price: "Custom",          imageSrc: "https://img.b2bpic.net/free-photo/modern-office-desk-with-financial-documents_1262-15743.jpg"},
-        {
-          id: "p3",          name: "POS Solutions",          price: "Modern",          imageSrc: "https://img.b2bpic.net/free-photo/point-of-sale-system-in-store_1262-15822.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."
@@ -135,14 +103,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,15 +116,9 @@ 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."
@@ -174,7 +130,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 +142,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 +155,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,28 +166,13 @@ 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>

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);