src/app/page.tsx

@@ -21,7 +21,7 @@ export default function LandingPage() {
       borderRadius="rounded"
       contentWidth="mediumLarge"
       sizing="large"
-      background="floatingGradient"
+      background="circleGradient"
       cardStyle="solid"
       primaryButtonStyle="radial-glow"
       secondaryButtonStyle="layered"
@@ -47,7 +47,7 @@ export default function LandingPage() {
         <HeroSplitKpi
           title="Travel the World with Confidence"
           description="Visa processing, air tickets, and luxury tours handled by professionals who deliver fast responses, expert guidance, and successful travel experiences. From UK visas to Schengen documentation, we handle your travel paperwork with precision."
-          background={{ variant: "floatingGradient" }}
+          background={{ variant: "glowing-orb" }}
           kpis={[
             { value: "15+", label: "Years Travel Expertise" },
             { value: "98%", label: "Visa Approval Rate" },
@@ -84,6 +84,7 @@ export default function LandingPage() {
           imageSrc="http://img.b2bpic.net/free-photo/business-professionals-using-analytics-reports-papers-review-progress_482257-122889.jpg"
           imageAlt="Travel agency expertise and professional team"
           mediaAnimation="blur-reveal"
+          metricsAnimation="slide-up"
         />
       </div>
 

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,49 @@
-"use client";
-
-import { memo } from "react";
-import useSvgTextLogo from "./useSvgTextLogo";
-import { cls } from "@/lib/utils";
+import React from 'react';
 
 interface SvgTextLogoProps {
-  logoText: string;
-  adjustHeightFactor?: number;
-  verticalAlign?: "top" | "center";
+  text: string;
+  size?: number;
+  fill?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number | string;
+  letterSpacing?: number;
   className?: 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,
+  size = 200,
+  fill = 'currentColor',
+  fontFamily = 'system-ui, -apple-system, sans-serif',
+  fontSize = 24,
+  fontWeight = 700,
+  letterSpacing = 0,
+  className = '',
+}) => {
   return (
     <svg
-      ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
-      role="img"
-      aria-label={`${logoText} logo`}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <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={size / 2}
+        y={size / 2}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        fill={fill}
+        fontFamily={fontFamily}
+        fontSize={fontSize}
+        fontWeight={fontWeight}
+        letterSpacing={letterSpacing}
       >
-        {logoText}
+        {text}
       </text>
     </svg>
   );
-});
-
-SvgTextLogo.displayName = "SvgTextLogo";
+};
 
 export default SvgTextLogo;