src/app/page.tsx

@@ -18,7 +18,7 @@ export default function LandingPage() {
       borderRadius="pill"
       contentWidth="medium"
       sizing="mediumSizeLargeTitles"
-      background="grid"
+      background="circleGradient"
       cardStyle="gradient-bordered"
       primaryButtonStyle="flat"
       secondaryButtonStyle="glass"
@@ -45,13 +45,13 @@ export default function LandingPage() {
           tag="PC Power Calculator"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          background={{ variant: "grid" }}
+          background={{ variant: "plain" }}
           mediaItems={[
             {
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ams1jraLIkGsywOuiykL1iewq1/a-modern-computer-hardware-setup-showing-1773208931969-21df4edb.png",              imageAlt: "High-end gaming PC setup"
             },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ams1jraLIkGsywOuiykL1iewq1/a-sleek-calculator-interface-screen-show-1773208934347-422b6032.png?_wi=1",              imageAlt: "Calculator interface"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ams1jraLIkGsywOuiykL1iewq1/a-sleek-calculator-interface-screen-show-1773208934347-422b6032.png",              imageAlt: "Calculator interface"
             },
             {
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ams1jraLIkGsywOuiykL1iewq1/a-collection-of-different-power-supply-u-1773208931933-b6c47b43.png",              imageAlt: "PSU product collection"
@@ -101,7 +101,7 @@ export default function LandingPage() {
           description="We combine accurate hardware database specifications with smart recommendation algorithms. Our calculator takes into account power efficiency ratings, surge protection requirements, and future upgrade headroom to ensure your PSU can handle anything you throw at it."
           tag="Why Us"
           tagIcon={CheckCircle}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ams1jraLIkGsywOuiykL1iewq1/a-sleek-calculator-interface-screen-show-1773208934347-422b6032.png?_wi=2"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ams1jraLIkGsywOuiykL1iewq1/a-sleek-calculator-interface-screen-show-1773208934347-422b6032.png"
           imageAlt="PowerCalc calculator interface"
           useInvertedBackground={true}
           buttons={[

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,44 @@
-"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";
-  className?: string;
+interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
+  text?: string;
+  fontSize?: number;
+  fontFamily?: string;
+  fill?: string;
+  strokeWidth?: number;
+  stroke?: 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> = ({
+  text = 'Logo',
+  fontSize = 48,
+  fontFamily = 'Arial, sans-serif',
+  fill = '#000000',
+  strokeWidth = 0,
+  stroke = 'none',
+  ...props
+}) => {
   return (
     <svg
-      ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
-      role="img"
-      aria-label={`${logoText} logo`}
+      viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
+      xmlns="http://www.w3.org/2000/svg"
+      {...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="50%"
+        y="50%"
+        fontSize={fontSize}
+        fontFamily={fontFamily}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        textAnchor="middle"
+        dominantBaseline="middle"
       >
-        {logoText}
+        {text}
       </text>
     </svg>
   );
-});
+};
 
-SvgTextLogo.displayName = "SvgTextLogo";
-
-export default SvgTextLogo;
+export default SvgTextLogo;