src/app/page.tsx

@@ -14,11 +14,11 @@ export default function LandingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
       borderRadius="pill"
       contentWidth="small"
       sizing="mediumLargeSizeLargeTitles"
-      background="fluid"
+      background="circleGradient"
       cardStyle="gradient-radial"
       primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
@@ -43,7 +43,7 @@ export default function LandingPage() {
         <HeroLogoBillboardSplit
           logoText="BRYAN\nLP GAS"
           description="Fast propane tank refills, competitive pricing, and hometown service that keeps your home warm when it matters most. Most customers are in and out in minutes—no corporate hassle, just dependable fuel."
-          background={{ variant: "fluid" }}
+          background={{ variant: "plain" }}
           buttons={[
             { text: "Get Your Tank Filled Today", href: "#contact" },
             { text: "Learn More", href: "#about" }
@@ -129,7 +129,7 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
-          tagAnimation="reveal-blur"
+          tagAnimation="slide-up"
           carouselMode="buttons"
           ariaLabel="Testimonials section - Customer reviews"
         />

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,19 @@
-"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;
   className?: string;
+  dominantBaseline?: 'auto' | 'baseline' | 'middle' | 'hanging' | 'mathematical' | 'ideographic';
 }
 
-const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
-  logoText,
-  adjustHeightFactor,
-  verticalAlign = "top",
-  className = "",
-}) {
-  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
-
+const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ text, className = '', dominantBaseline = 'middle' }) => {
   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}
+    <svg className={className} viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+      <text x="50%" y="50%" textAnchor="middle" dominantBaseline={dominantBaseline} fontSize="48" fontWeight="bold" fill="currentColor">
+        {text}
       </text>
     </svg>
   );
-});
+};
 
-SvgTextLogo.displayName = "SvgTextLogo";
-
-export default SvgTextLogo;
+export default SvgTextLogo;