Merge version_1 into main #1

Merged
bender merged 2 commits from version_1 into main 2026-03-11 16:30:02 +00:00
2 changed files with 44 additions and 41 deletions

View File

@@ -69,6 +69,7 @@ export default function LandingPage() {
imageAlt="Our professional dermatology team"
useInvertedBackground={false}
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
@@ -80,16 +81,13 @@ export default function LandingPage() {
tagIcon={Sparkles}
features={[
{
id: 1,
title: "Advanced Facial Treatments", description: "Customized facials using the latest technologies and premium serums to rejuvenate, brighten, and restore your skin's natural radiance. Perfect for all skin types.", imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334265.jpg", imageAlt: "Professional facial treatment"
id: "1", title: "Advanced Facial Treatments", description: "Customized facials using the latest technologies and premium serums to rejuvenate, brighten, and restore your skin's natural radiance. Perfect for all skin types.", imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334265.jpg", imageAlt: "Professional facial treatment"
},
{
id: 2,
title: "Laser Skin Resurfacing", description: "Innovative laser technology to reduce fine lines, improve texture, minimize pores, and treat acne scars. Non-invasive with outstanding results and quick recovery.", imageSrc: "http://img.b2bpic.net/free-photo/physiotherapist-performs-device-therapy-patient-foot-device-heel_169016-70872.jpg", imageAlt: "Laser skin treatment technology"
id: "2", title: "Laser Skin Resurfacing", description: "Innovative laser technology to reduce fine lines, improve texture, minimize pores, and treat acne scars. Non-invasive with outstanding results and quick recovery.", imageSrc: "http://img.b2bpic.net/free-photo/physiotherapist-performs-device-therapy-patient-foot-device-heel_169016-70872.jpg", imageAlt: "Laser skin treatment technology"
},
{
id: 3,
title: "Microneedling Therapy", description: "Stimulate collagen production and enhance skin elasticity with our professional microneedling treatments. Ideal for fine lines, acne scars, and overall skin rejuvenation.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-applying-moisturizing-cream_23-2152029129.jpg", imageAlt: "Microneedling treatment procedure"
id: "3", title: "Microneedling Therapy", description: "Stimulate collagen production and enhance skin elasticity with our professional microneedling treatments. Ideal for fine lines, acne scars, and overall skin rejuvenation.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-applying-moisturizing-cream_23-2152029129.jpg", imageAlt: "Microneedling treatment procedure"
}
]}
animationType="blur-reveal"

View File

@@ -1,51 +1,56 @@
"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;
pathClassName?: string;
textClassName?: string;
textXClassName?: string;
dominantBaseline?: 'auto' | 'baseline' | 'before-edge' | 'after-edge' | 'central' | 'hanging' | 'math' | 'ideographic';
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = '',
pathClassName = '',
textClassName = '',
textXClassName = '',
dominantBaseline = 'central',
}) => {
const pathId = `textPath-${Math.random().toString(36).substr(2, 9)}`;
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 1000 200"
className={`w-full h-auto ${className}`}
preserveAspectRatio="xMidYMid meet"
>
<defs>
<path
id={pathId}
d="M 50,100 Q 250,50 500,100 T 950,100"
fill="none"
className={pathClassName}
/>
</defs>
<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"
}}
className={textClassName}
fontSize="48"
fontWeight="bold"
fill="currentColor"
dominantBaseline={dominantBaseline}
textAnchor="middle"
>
{logoText}
<textPath
href={`#${pathId}`}
startOffset="50%"
className={textXClassName}
>
{text}
</textPath>
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;