diff --git a/src/app/page.tsx b/src/app/page.tsx index 949d136..83bf867 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,7 +18,7 @@ export default function LandingPage() { borderRadius="pill" contentWidth="mediumLarge" sizing="large" - background="aurora" + background="circleGradient" cardStyle="outline" primaryButtonStyle="flat" secondaryButtonStyle="radial-glow" @@ -46,8 +46,8 @@ export default function LandingPage() { tag="Interactive Experience" tagIcon={Sparkles} tagAnimation="slide-up" - background={{ variant: "aurora" }} - imageSrc="http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg?_wi=1" + background={{ variant: "plain" }} + imageSrc="http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg" imageAlt="Hand-drawn photobooth machine" buttons={[ { text: "Enter the Booth", href: "#photo-method" } @@ -80,13 +80,13 @@ export default function LandingPage() { features={[ { id: 1, - title: "Choose Your Method", description: "Decide whether to capture fresh photos with your camera or upload your favorite images to create your perfect photobooth strip.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg?_wi=2" }, - phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/arrangement-eco-friendly-tableware_23-2148902922.jpg?_wi=1" } + title: "Choose Your Method", description: "Decide whether to capture fresh photos with your camera or upload your favorite images to create your perfect photobooth strip.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg" }, + phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/arrangement-eco-friendly-tableware_23-2148902922.jpg" } }, { id: 2, - title: "Select Your Style", description: "Toggle between black & white sketched aesthetic and vibrant color modes. Watch the pencil doodles animate as you decide.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/vintage-ornamental-logo-set_52683-26637.jpg?_wi=1" }, - phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-curtain-with-embroidery_23-2149551422.jpg?_wi=1" } + title: "Select Your Style", description: "Toggle between black & white sketched aesthetic and vibrant color modes. Watch the pencil doodles animate as you decide.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/vintage-ornamental-logo-set_52683-26637.jpg" }, + phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-curtain-with-embroidery_23-2149551422.jpg" } }, { id: 3, @@ -113,16 +113,16 @@ export default function LandingPage() { useInvertedBackground={false} testimonials={[ { - id: "1", title: "Pure Creative Joy", quote: "The hand-drawn aesthetic makes every photo feel like a treasured memory. The animations are smooth and delightful!", name: "Emma Parker", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg?_wi=3", imageAlt: "Emma Parker" + id: "1", title: "Pure Creative Joy", quote: "The hand-drawn aesthetic makes every photo feel like a treasured memory. The animations are smooth and delightful!", name: "Emma Parker", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg", imageAlt: "Emma Parker" }, { - id: "2", title: "Magical Animation", quote: "Watching the pencil lines come to life is absolutely mesmerizing. This is the most fun I've had with a photobooth tool.", name: "Lucas Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-curtain-with-embroidery_23-2149551422.jpg?_wi=2", imageAlt: "Lucas Chen" + id: "2", title: "Magical Animation", quote: "Watching the pencil lines come to life is absolutely mesmerizing. This is the most fun I've had with a photobooth tool.", name: "Lucas Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-curtain-with-embroidery_23-2149551422.jpg", imageAlt: "Lucas Chen" }, { - id: "3", title: "Perfect for Events", quote: "Our wedding guests couldn't stop playing with Sketch Booth. The cute aesthetic and smooth animations stole the show!", name: "Sophie Morgan", role: "Event Planner", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-eco-friendly-tableware_23-2148902922.jpg?_wi=2", imageAlt: "Sophie Morgan" + id: "3", title: "Perfect for Events", quote: "Our wedding guests couldn't stop playing with Sketch Booth. The cute aesthetic and smooth animations stole the show!", name: "Sophie Morgan", role: "Event Planner", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-eco-friendly-tableware_23-2148902922.jpg", imageAlt: "Sophie Morgan" }, { - id: "4", title: "Simple & Delightful", quote: "The step-by-step interface feels intuitive and playful. Every interaction brings a smile. Absolutely love it!", name: "Marco Rossi", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-vector/vintage-ornamental-logo-set_52683-26637.jpg?_wi=2", imageAlt: "Marco Rossi" + id: "4", title: "Simple & Delightful", quote: "The step-by-step interface feels intuitive and playful. Every interaction brings a smile. Absolutely love it!", name: "Marco Rossi", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-vector/vintage-ornamental-logo-set_52683-26637.jpg", imageAlt: "Marco Rossi" } ]} /> diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..2772b3e 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -1,51 +1,65 @@ -"use client"; - -import { memo } from "react"; -import useSvgTextLogo from "./useSvgTextLogo"; -import { cls } from "@/lib/utils"; +import React, { useState, useEffect } from 'react'; interface SvgTextLogoProps { - logoText: string; - adjustHeightFactor?: number; - verticalAlign?: "top" | "center"; + text: string; + width?: number; + height?: number; + fontSize?: number; + fontWeight?: number; + fill?: string; + fontFamily?: string; + letterSpacing?: number; + textAnchor?: 'start' | 'middle' | 'end'; + dominantBaseline?: 'auto' | 'baseline' | 'middle' | 'central' | 'hanging'; className?: string; } -const SvgTextLogo = memo(function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); +export const SvgTextLogo: React.FC = ({ + text, + width = 300, + height = 100, + fontSize = 48, + fontWeight = 700, + fill = '#000000', + fontFamily = 'Arial, sans-serif', + letterSpacing = 0, + textAnchor = 'middle', + dominantBaseline = 'central', + className = '', +}) => { + const [isMounted, setIsMounted] = useState(false); + + useEffect(() => { + setIsMounted(true); + }, []); + + if (!isMounted) { + return null; + } return ( - {logoText} + {text} ); -}); +}; -SvgTextLogo.displayName = "SvgTextLogo"; - -export default SvgTextLogo; +export default SvgTextLogo; \ No newline at end of file