src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroTextCenter from "@/components/sections/hero/HeroTextCenter";
+import HeroTextCenter from "@/components/sections/hero/HeroTextCenter/HeroTextCenter";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
 import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
@@ -34,7 +34,7 @@ export default function LandingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
-      defaultTextAnimation="background-highlight"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
@@ -70,7 +70,7 @@ export default function LandingPage() {
           tag="Next Generation AI Platform"
           tagIcon={Sparkles}
           useInvertedBackground={false}
-          animationType="background-highlight"
+          animationType="entrance-slide"
         />
       </div>
 
@@ -103,7 +103,7 @@ export default function LandingPage() {
               ]
             }
           ]}
-          animationType="background-highlight"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           carouselMode="buttons"
@@ -134,7 +134,7 @@ export default function LandingPage() {
               title: "Predictive Analytics",              description: "Forecast trends, identify patterns, and make data-driven decisions with machine learning models"
             }
           ]}
-          animationType="background-highlight"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
@@ -152,8 +152,8 @@ export default function LandingPage() {
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqvkCznsVO4qv85V72vnLTpHjI/a-modern-workspace-with-team-members-col-1773333123641-5a2e0330.png"
           imageAlt="AIFlow team collaboration"
-          mediaAnimation="background-highlight"
-          metricsAnimation="background-highlight"
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
@@ -164,7 +164,7 @@ export default function LandingPage() {
           description="See how enterprise teams are transforming their business with AIFlow"
           tag="Testimonials"
           tagIcon={Quote}
-          animationType="background-highlight"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           testimonials={[
@@ -196,7 +196,7 @@ export default function LandingPage() {
           description="Choose the perfect plan for your organization. All plans include core AI features with dedicated support."
           tag="Pricing"
           tagIcon={DollarSign}
-          animationType="background-highlight"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           plans={[
@@ -239,10 +239,10 @@ export default function LandingPage() {
           description="Find answers to common questions about AIFlow capabilities, pricing, and implementation"
           tag="FAQ"
           tagIcon={HelpCircle}
-          animationType="background-highlight"
+          animationType="smooth"
           textboxLayout="default"
           useInvertedBackground={false}
-          faqsAnimation="background-highlight"
+          faqsAnimation="slide-up"
           faqs={[
             {
               id: "1",              title: "What is AIFlow and how does it work?",              content: "AIFlow is an enterprise-grade AI platform that combines advanced machine learning models with easy-to-use interfaces. It processes your data, applies proprietary AI algorithms, and delivers actionable insights in real-time through our cloud infrastructure."

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,78 @@
 "use client";
 
-import { memo } from "react";
-import useSvgTextLogo from "./useSvgTextLogo";
-import { cls } from "@/lib/utils";
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
 
 interface SvgTextLogoProps {
-  logoText: string;
-  adjustHeightFactor?: number;
-  verticalAlign?: "top" | "center";
+  text?: string;
   className?: string;
+  containerClassName?: string;
+  textClassName?: string;
+  id?: string;
 }
 
-const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
-  logoText,
-  adjustHeightFactor,
-  verticalAlign = "top",
-  className = "",
-}) {
-  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
+const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
+  (
+    {
+      text = "Webild",      className = "",      containerClassName = "",      textClassName = "",      id = "svg-text-logo"
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const svgRef = useRef<SVGSVGElement>(null);
+    const textRef = useRef<SVGTextElement>(null);
 
-  return (
-    <svg
-      ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
-      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"
-        }}
-      >
-        {logoText}
-      </text>
-    </svg>
-  );
-});
+    // Combine refs
+    React.useImperativeHandle(ref, () => svgRef.current as SVGSVGElement);
+
+    useEffect(() => {
+      if (!containerRef.current || !svgRef.current || !textRef.current) return;
+
+      const container = containerRef.current;
+      const svg = svgRef.current;
+      const textElement = textRef.current;
+
+      // Get text width
+      const bbox = textElement.getBBox();
+      const textWidth = bbox.width;
+      const textHeight = bbox.height;
+
+      // Set SVG dimensions based on text
+      svg.setAttribute("width", String(textWidth + 40));
+      svg.setAttribute("height", String(textHeight + 20));
+      svg.setAttribute("viewBox", `0 0 ${textWidth + 40} ${textHeight + 20}`);
+
+      // Position text in the center
+      textElement.setAttribute("x", String(20));
+      textElement.setAttribute("y", String(textHeight + 10));
+    }, [text]);
+
+    return (
+      <div ref={containerRef} className={containerClassName}>
+        <svg
+          ref={svgRef}
+          id={id}
+          xmlns="http://www.w3.org/2000/svg"
+          className={`${className}`}
+        >
+          <text
+            ref={textRef}
+            x="0"
+            y="0"
+            className={`font-bold text-2xl fill-current ${textClassName}`}
+            dominantBaseline="hanging"
+          >
+            {text}
+          </text>
+        </svg>
+      </div>
+    );
+  }
+);
 
 SvgTextLogo.displayName = "SvgTextLogo";
 
-export default SvgTextLogo;
+export default SvgTextLogo;