diff --git a/src/app/page.tsx b/src/app/page.tsx index d60dcef..03b720d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -19,7 +19,7 @@ export default function LandingPage() { borderRadius="pill" contentWidth="compact" sizing="largeSmallSizeMediumTitles" - background="blurBottom" + background="circleGradient" cardStyle="gradient-mesh" primaryButtonStyle="shadow" secondaryButtonStyle="radial-glow" @@ -43,7 +43,7 @@ export default function LandingPage() { (function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); +const SvgTextLogo: React.FC = ({ + text, + fontSize = 48, + fontFamily = 'Arial, sans-serif', + fill = 'currentColor', + strokeWidth = 0, + stroke = 'none', + className = '', +}) => { + const textDimensions = useMemo(() => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + if (!ctx) return { width: 100, height: fontSize }; + + ctx.font = `${fontSize}px ${fontFamily}`; + const metrics = ctx.measureText(text); + return { + width: metrics.width, + height: fontSize, + }; + }, [text, fontSize, fontFamily]); + + const padding = 10; + const svgWidth = textDimensions.width + padding * 2; + const svgHeight = textDimensions.height + padding * 2; return ( - {logoText} + {text} ); -}); - -SvgTextLogo.displayName = "SvgTextLogo"; +}; export default SvgTextLogo;