Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-12 16:38:36 +00:00
2 changed files with 36 additions and 45 deletions

View File

@@ -45,7 +45,7 @@ export default function LandingPage() {
title="Transform Your Skin with Science"
description="Discover our revolutionary skincare collection featuring cutting-edge formulations and premium natural ingredients. Experience the luxury of professional-grade skincare at home."
tag="Luxury Skincare"
background={{ variant: "circleGradient" }}
background={{ variant: "canvas-reveal" }}
imageSrc="http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307219.jpg"
imageAlt="Premium luxury skincare product collection"
buttons={[
@@ -66,7 +66,7 @@ export default function LandingPage() {
{ title: "Visible Results", description: "See noticeable improvements in texture, radiance, and firmness within weeks", icon: CheckCircle },
{ title: "Sustainable Luxury", description: "Eco-conscious packaging and ethical sourcing of all premium ingredients", icon: Leaf }
]}
imageSrc="http://img.b2bpic.net/free-photo/front-view-composition-natural-argan-product_23-2148955801.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/front-view-composition-natural-argan-product_23-2148955801.jpg"
imageAlt="Premium skincare ingredients and formulation"
mediaAnimation="slide-up"
textboxLayout="default"
@@ -81,9 +81,9 @@ export default function LandingPage() {
description="Discover our best-selling skincare products, each formulated to address specific skin concerns and deliver professional results."
tag="Best Sellers"
products={[
{ id: "1", name: "Luminous Radiance Serum", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg?_wi=1", imageAlt: "Luminous Radiance Serum bottle", initialQuantity: 1 },
{ id: "2", name: "Supreme Renewal Cream", price: "$124.00", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232240.jpg?_wi=1", imageAlt: "Supreme Renewal Cream jar", initialQuantity: 1 },
{ id: "3", name: "Intensive Repair Mask", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/gray-venetian-mask-dark-background_23-2147596851.jpg?_wi=1", imageAlt: "Intensive Repair Mask jar", initialQuantity: 1 }
{ id: "1", name: "Luminous Radiance Serum", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg", imageAlt: "Luminous Radiance Serum bottle", initialQuantity: 1 },
{ id: "2", name: "Supreme Renewal Cream", price: "$124.00", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232240.jpg", imageAlt: "Supreme Renewal Cream jar", initialQuantity: 1 },
{ id: "3", name: "Intensive Repair Mask", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/gray-venetian-mask-dark-background_23-2147596851.jpg", imageAlt: "Intensive Repair Mask jar", initialQuantity: 1 }
]}
textboxLayout="default"
animationType="slide-up"
@@ -99,10 +99,10 @@ export default function LandingPage() {
description="Experience the difference that premium skincare expertise and innovative formulations make in your daily routine."
tag="Benefits"
features={[
{ id: "01", title: "Advanced Hydration", description: "Deep moisturizing complex that locks in hydration for 24-hour supple, plump skin", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg?_wi=2", imageAlt: "Advanced Hydration feature" },
{ id: "02", title: "Anti-Aging Excellence", description: "Powerful peptides and retinol alternatives reduce fine lines and boost collagen production", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232240.jpg?_wi=2", imageAlt: "Anti-Aging Excellence feature" },
{ id: "03", title: "Brightening & Radiance", description: "Vitamin C derivatives and botanical extracts deliver visible luminosity and even skin tone", imageSrc: "http://img.b2bpic.net/free-photo/gray-venetian-mask-dark-background_23-2147596851.jpg?_wi=2", imageAlt: "Brightening & Radiance feature" },
{ id: "04", title: "Sensitive Skin Friendly", description: "Hypoallergenic formulations with soothing chamomile and aloe for all skin types", imageSrc: "http://img.b2bpic.net/free-photo/front-view-composition-natural-argan-product_23-2148955801.jpg?_wi=2", imageAlt: "Sensitive Skin Friendly feature" }
{ id: "01", title: "Advanced Hydration", description: "Deep moisturizing complex that locks in hydration for 24-hour supple, plump skin", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg", imageAlt: "Advanced Hydration feature" },
{ id: "02", title: "Anti-Aging Excellence", description: "Powerful peptides and retinol alternatives reduce fine lines and boost collagen production", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232240.jpg", imageAlt: "Anti-Aging Excellence feature" },
{ id: "03", title: "Brightening & Radiance", description: "Vitamin C derivatives and botanical extracts deliver visible luminosity and even skin tone", imageSrc: "http://img.b2bpic.net/free-photo/gray-venetian-mask-dark-background_23-2147596851.jpg", imageAlt: "Brightening & Radiance feature" },
{ id: "04", title: "Sensitive Skin Friendly", description: "Hypoallergenic formulations with soothing chamomile and aloe for all skin types", imageSrc: "http://img.b2bpic.net/free-photo/front-view-composition-natural-argan-product_23-2148955801.jpg", imageAlt: "Sensitive Skin Friendly feature" }
]}
textboxLayout="default"
animationType="slide-up"

View File

@@ -1,51 +1,42 @@
"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;
textClassName?: 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, className = '', textClassName = '' }) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
className={`inline-block ${className}`}
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
>
<defs>
<style>
{`
.svg-text-logo-text {
font-family: inherit;
font-weight: bold;
font-size: 48px;
fill: currentColor;
}
`}
</style>
</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"
}}
x="50%"
y="50%"
className={`svg-text-logo-text ${textClassName}`}
textAnchor="middle"
dominantBaseline="central"
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;