src/app/contact/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { Mail } from "lucide-react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
@@ -17,8 +18,7 @@ export default function ContactPage() {
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "features" },
         { label: "Pricing", href: "pricing" },
         { label: "Dashboard", href: "dashboard" },
@@ -26,8 +26,7 @@ export default function ContactPage() {
       ]
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About Us", href: "about" },
         { label: "Contact", href: "contact" },
         { label: "Support", href: "faq" },
@@ -35,8 +34,7 @@ export default function ContactPage() {
       ]
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -70,11 +68,11 @@ export default function ContactPage() {
           tag="Get In Touch"
           title="Ready to Simplify Your Community?"
           description="Join Karim Residencia today and experience seamless community management. Contact our team to schedule a demo or discuss your specific needs."
-          tagIcon="Mail"
+          tagIcon={Mail}
           tagAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/cheerful-call-center-onboarding-specialist-training-worker_482257-125802.jpg?_wi=2"
+          imageSrc="http://img.b2bpic.net/free-photo/cheerful-call-center-onboarding-specialist-training-worker_482257-125802.jpg"
           imageAlt="professional team collaboration meeting"
           mediaAnimation="slide-up"
           mediaPosition="right"
@@ -86,7 +84,7 @@ export default function ContactPage() {
 
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-vector/city-with-beautiful-houses-background_23-2147557672.jpg?_wi=5"
+          imageSrc="http://img.b2bpic.net/free-vector/city-with-beautiful-houses-background_23-2147557672.jpg"
           imageAlt="residential community apartment buildings"
           logoText="Karim Residencia"
           copyrightText="© 2025 Karim Residencia. All rights reserved."

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,55 @@
-"use client";
-
-import { memo } from "react";
-import useSvgTextLogo from "./useSvgTextLogo";
-import { cls } from "@/lib/utils";
+import React, { useEffect, useRef } from 'react';
 
 interface SvgTextLogoProps {
-  logoText: string;
-  adjustHeightFactor?: number;
-  verticalAlign?: "top" | "center";
+  text: string;
   className?: string;
+  ariaLabel?: string;
 }
 
-const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
-  logoText,
-  adjustHeightFactor,
-  verticalAlign = "top",
-  className = "",
-}) {
-  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
+export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
+  text,
+  className = '',
+  ariaLabel = 'Logo'
+}) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+
+    const textElement = svg.querySelector('text');
+    if (!textElement) return;
+
+    // Calculate the width of the text
+    const bbox = textElement.getBBox();
+    const textWidth = bbox.width;
+    const textHeight = bbox.height;
+
+    // Set SVG viewBox based on text dimensions
+    svg.setAttribute('viewBox', `0 0 ${textWidth + 20} ${textHeight + 20}`);
+  }, [text]);
 
   return (
     <svg
       ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
+      className={className}
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid meet"
+      aria-label={ariaLabel}
       role="img"
-      aria-label={`${logoText} logo`}
     >
       <text
-        ref={textRef}
-        x="0"
-        y={verticalAlign === "center" ? "50%" : "0"}
-        className="font-bold fill-current"
-        style={{
-          fontSize: "20px",
-          letterSpacing: "-0.02em",
-          dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
-        }}
+        x="10"
+        y="70"
+        fontSize="64"
+        fontWeight="bold"
+        fill="currentColor"
+        dominantBaseline="middle"
       >
-        {logoText}
+        {text}
       </text>
     </svg>
   );
-});
+};
 
-SvgTextLogo.displayName = "SvgTextLogo";
-
-export default SvgTextLogo;
+export default SvgTextLogo;