src/app/page.tsx

@@ -20,7 +20,7 @@ export default function LandingPage() {
       borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
+      background="circleGradient"
       cardStyle="outline"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="radial-glow"
@@ -48,7 +48,7 @@ export default function LandingPage() {
           description="Discover Jenna's collection of beautifully handmade knitted products. Each piece is crafted with care using premium yarns and traditional techniques. From cozy sweaters to elegant scarves, find your perfect handmade treasure."
           tag="Artisan Crafted"
           tagIcon={Sparkles}
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           buttons={[
             { text: "Explore Products", href: "products" },
             { text: "Learn the Story", href: "about" }
@@ -87,6 +87,7 @@ export default function LandingPage() {
           imageAlt="Jenna knitting in her studio workspace"
           useInvertedBackground={false}
           mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
         />
       </div>
 

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,29 @@
-"use client";
+import React, { SVGProps } from 'react';
 
-import { memo } from "react";
-import useSvgTextLogo from "./useSvgTextLogo";
-import { cls } from "@/lib/utils";
-
-interface SvgTextLogoProps {
-  logoText: string;
-  adjustHeightFactor?: number;
-  verticalAlign?: "top" | "center";
+interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
   className?: string;
 }
 
-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> = ({ className = '', ...props }) => {
   return (
     <svg
-      ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
-      role="img"
-      aria-label={`${logoText} logo`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 200 50"
+      className={className}
+      {...props}
     >
       <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="35"
+        fontSize="32"
+        fontWeight="bold"
+        dominantBaseline="middle"
+        fill="currentColor"
       >
-        {logoText}
+        Logo
       </text>
     </svg>
   );
-});
+};
 
-SvgTextLogo.displayName = "SvgTextLogo";
-
-export default SvgTextLogo;
+export default SvgTextLogo;