diff --git a/src/app/page.tsx b/src/app/page.tsx index fa3e2ea..2477700 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -23,7 +23,7 @@ export default function LandingPage() { borderRadius="soft" contentWidth="compact" sizing="mediumLargeSizeLargeTitles" - background="floatingGradient" + background="circleGradient" cardStyle="solid" primaryButtonStyle="radial-glow" secondaryButtonStyle="glass" @@ -50,14 +50,14 @@ export default function LandingPage() { tag="Diseño Profesional" tagIcon={Sparkles} tagAnimation="slide-up" - background={{ variant: "floatingGradient" }} + background={{ variant: "radial-gradient" }} buttons={[ { text: "Solicitar presupuesto", href: "contact" }, { text: "Ver ejemplos", href: "portfolio" } ]} buttonAnimation="slide-up" mediaItems={[ - { imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page-template_23-2148203339.jpg?_wi=1", imageAlt: "agencia digital website profesional moderno" } + { imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page-template_23-2148203339.jpg", imageAlt: "agencia digital website profesional moderno" } ]} mediaAnimation="slide-up" /> @@ -90,27 +90,27 @@ export default function LandingPage() { features={[ { id: "1", title: "Webs para Restaurantes y Bares", author: "Diseño Gastronómico", description: "Menús digitales, galería de platos, reservas online y ubicación. Convierte visitantes en comensales desde el primer vistazo.", tags: ["Menú Digital", "Reservas", "Galería"], - imageSrc: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg?_wi=1", imageAlt: "sitio web restaurante moderno elegante" + imageSrc: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg", imageAlt: "sitio web restaurante moderno elegante" }, { id: "2", title: "Webs para Peluquerías y Barberías", author: "Estilo Moderno", description: "Galería de trabajos, citas online, portafolio de estilos. Demuestra tu talento y permite que clientes agenden directamente.", tags: ["Citas Online", "Portafolio", "Estilos"], - imageSrc: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg?_wi=1", imageAlt: "sitio web peluqueria barberia moderno" + imageSrc: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg", imageAlt: "sitio web peluqueria barberia moderno" }, { id: "3", title: "Webs para Clínicas y Dentales", author: "Confianza Médica", description: "Información de servicios, perfiles de profesionales, citas médicas. Genera confianza y facilita que pacientes agendan citas.", tags: ["Citas Médicas", "Equipo", "Servicios"], - imageSrc: "http://img.b2bpic.net/free-vector/flat-design-financial-consultancy-landing-page_23-2150863943.jpg?_wi=1", imageAlt: "sitio web clinica dental medica moderno" + imageSrc: "http://img.b2bpic.net/free-vector/flat-design-financial-consultancy-landing-page_23-2150863943.jpg", imageAlt: "sitio web clinica dental medica moderno" }, { id: "4", title: "Webs para Gimnasios y Entrenadores", author: "Fitness Digital", description: "Clases, membresías, galería, testimonios. Inspira a nuevos miembros y facilita la inscripción online.", tags: ["Membresías", "Clases", "Logros"], - imageSrc: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg?_wi=1", imageAlt: "sitio web gimnasio fitness moderno" + imageSrc: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg", imageAlt: "sitio web gimnasio fitness moderno" }, { id: "5", title: "Webs para Discotecas y Eventos", author: "Entretenimiento", description: "Eventos, promociones, galerías de noches, reservas. Crea expectativa y convierte visitantes en clientes.", tags: ["Eventos", "Promociones", "Reservas"], - imageSrc: "http://img.b2bpic.net/free-psd/party-entertainment-landing-page-template_23-2151203613.jpg?_wi=1", imageAlt: "sitio web discoteca eventos moderno" + imageSrc: "http://img.b2bpic.net/free-psd/party-entertainment-landing-page-template_23-2151203613.jpg", imageAlt: "sitio web discoteca eventos moderno" }, { id: "6", title: "Webs para Negocios Locales", author: "Soluciones Personalizadas", description: "Agencias, tiendas, servicios y más. Cualquier negocio local merece una web que lo represente profesionalmente.", tags: ["Personalizado", "Profesional", "Resultados"], - imageSrc: "http://img.b2bpic.net/free-vector/minimal-architecture-project-landing-page_23-2149447724.jpg?_wi=1", imageAlt: "sitio web inmobiliaria bienes raices moderno" + imageSrc: "http://img.b2bpic.net/free-vector/minimal-architecture-project-landing-page_23-2149447724.jpg", imageAlt: "sitio web inmobiliaria bienes raices moderno" } ]} animationType="slide-up" @@ -156,22 +156,22 @@ export default function LandingPage() { tagAnimation="slide-up" products={[ { - id: "1", name: "Restaurante La Tradición", price: "Web Premium", variant: "Diseño Gastronómico • Menú Digital • Reservas", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg?_wi=2", imageAlt: "Sitio web restaurante" + id: "1", name: "Restaurante La Tradición", price: "Web Premium", variant: "Diseño Gastronómico • Menú Digital • Reservas", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg", imageAlt: "Sitio web restaurante" }, { - id: "2", name: "Barbería The Gentleman", price: "Web Profesional", variant: "Portafolio • Citas Online • Galería", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg?_wi=2", imageAlt: "Sitio web barbería" + id: "2", name: "Barbería The Gentleman", price: "Web Profesional", variant: "Portafolio • Citas Online • Galería", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg", imageAlt: "Sitio web barbería" }, { - id: "3", name: "Clínica Dental SmilePro", price: "Web Médica", variant: "Citas • Equipo • Servicios", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-financial-consultancy-landing-page_23-2150863943.jpg?_wi=2", imageAlt: "Sitio web clínica" + id: "3", name: "Clínica Dental SmilePro", price: "Web Médica", variant: "Citas • Equipo • Servicios", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-financial-consultancy-landing-page_23-2150863943.jpg", imageAlt: "Sitio web clínica" }, { - id: "4", name: "Gimnasio FitZone", price: "Web Fitness", variant: "Membresías • Clases • Resultados", imageSrc: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg?_wi=2", imageAlt: "Sitio web gimnasio" + id: "4", name: "Gimnasio FitZone", price: "Web Fitness", variant: "Membresías • Clases • Resultados", imageSrc: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg", imageAlt: "Sitio web gimnasio" }, { - id: "5", name: "Club Nocturno Vibe", price: "Web Entretenimiento", variant: "Eventos • Promociones • Reservas", imageSrc: "http://img.b2bpic.net/free-psd/party-entertainment-landing-page-template_23-2151203613.jpg?_wi=2", imageAlt: "Sitio web discoteca" + id: "5", name: "Club Nocturno Vibe", price: "Web Entretenimiento", variant: "Eventos • Promociones • Reservas", imageSrc: "http://img.b2bpic.net/free-psd/party-entertainment-landing-page-template_23-2151203613.jpg", imageAlt: "Sitio web discoteca" }, { - id: "6", name: "Agencia Inmobiliaria Elite", price: "Web Inmobiliaria", variant: "Propiedades • Búsqueda • Contacto", imageSrc: "http://img.b2bpic.net/free-vector/minimal-architecture-project-landing-page_23-2149447724.jpg?_wi=2", imageAlt: "Sitio web inmobiliaria" + id: "6", name: "Agencia Inmobiliaria Elite", price: "Web Inmobiliaria", variant: "Propiedades • Búsqueda • Contacto", imageSrc: "http://img.b2bpic.net/free-vector/minimal-architecture-project-landing-page_23-2149447724.jpg", imageAlt: "Sitio web inmobiliaria" } ]} animationType="slide-up" @@ -190,16 +190,16 @@ export default function LandingPage() { tagAnimation="slide-up" blogs={[ { - id: "1", category: "Paso 1", title: "Contacto", excerpt: "Te contamos sobre tu negocio, tus objetivos y tus clientes. Entendemos exactamente qué necesitas.", imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page-template_23-2148203339.jpg?_wi=2", imageAlt: "Reunión inicial", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page-template_23-2148203339.jpg", date: "Reunión inicial" + id: "1", category: "Paso 1", title: "Contacto", excerpt: "Te contamos sobre tu negocio, tus objetivos y tus clientes. Entendemos exactamente qué necesitas.", imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page-template_23-2148203339.jpg", imageAlt: "Reunión inicial", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page-template_23-2148203339.jpg", date: "Reunión inicial" }, { - id: "2", category: "Paso 2", title: "Propuesta", excerpt: "Diseño y presupuesto personalizados. Todo claro, sin sorpresas. Apruebas antes de empezar.", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg?_wi=3", imageAlt: "Propuesta clara", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg", date: "Propuesta clara" + id: "2", category: "Paso 2", title: "Propuesta", excerpt: "Diseño y presupuesto personalizados. Todo claro, sin sorpresas. Apruebas antes de empezar.", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg", imageAlt: "Propuesta clara", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-psd/landing-page-cook-book-template_23-2148652115.jpg", date: "Propuesta clara" }, { - id: "3", category: "Paso 3", title: "Diseño y Desarrollo", excerpt: "Nuestro equipo trabaja en tu web. Profesional, moderna, rápida. Te mantenemos informado.", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg?_wi=3", imageAlt: "Desarrollo ágil", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg", date: "Desarrollo ágil" + id: "3", category: "Paso 3", title: "Diseño y Desarrollo", excerpt: "Nuestro equipo trabaja en tu web. Profesional, moderna, rápida. Te mantenemos informado.", imageSrc: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg", imageAlt: "Desarrollo ágil", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-psd/landing-page-barber-shop-template_23-2148712466.jpg", date: "Desarrollo ágil" }, { - id: "4", category: "Paso 4", title: "Entrega", excerpt: "Tu web lista, funcionando perfectamente. Incluye hosting, dominio y soporte inicial.", imageSrc: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg?_wi=3", imageAlt: "Lanzamiento", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg", date: "Lanzamiento" + id: "4", category: "Paso 4", title: "Entrega", excerpt: "Tu web lista, funcionando perfectamente. Incluye hosting, dominio y soporte inicial.", imageSrc: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg", imageAlt: "Lanzamiento", authorName: "ClickLocal", authorAvatar: "http://img.b2bpic.net/free-vector/exercise-sport-landing-page_52683-23222.jpg", date: "Lanzamiento" } ]} animationType="slide-up" @@ -322,7 +322,7 @@ export default function LandingPage() { description="No esperes más. Cada día sin una web profesional es un cliente potencial que no tienes. Solicita tu presupuesto hoy y descubre qué podemos hacer por tu negocio." tagIcon={Rocket} tagAnimation="slide-up" - background={{ variant: "floatingGradient" }} + background={{ variant: "radial-gradient" }} useInvertedBackground={false} inputPlaceholder="Tu email" buttonText="Solicitar presupuesto" diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..fac62eb 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -1,51 +1,68 @@ -"use client"; - -import { memo } from "react"; -import useSvgTextLogo from "./useSvgTextLogo"; -import { cls } from "@/lib/utils"; +import React, { useMemo } from 'react'; interface SvgTextLogoProps { - logoText: string; - adjustHeightFactor?: number; - verticalAlign?: "top" | "center"; + text: string; + fontSize?: number; + fontWeight?: number | string; + fontFamily?: string; + fill?: string; + letterSpacing?: number; + lineHeight?: number; className?: string; } -const SvgTextLogo = memo(function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); +const SvgTextLogo: React.FC = ({ + text, + fontSize = 48, + fontWeight = 700, + fontFamily = 'Arial, sans-serif', + fill = '#000000', + letterSpacing = 0, + lineHeight = 1.2, + className = '', +}) => { + const measurements = useMemo(() => { + const tempSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + const tempText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); + tempText.setAttribute('font-size', fontSize.toString()); + tempText.setAttribute('font-weight', fontWeight.toString()); + tempText.setAttribute('font-family', fontFamily); + tempText.setAttribute('dominant-baseline', 'auto'); + tempText.textContent = text; + tempSvg.appendChild(tempText); + document.body.appendChild(tempSvg); + + const bbox = tempText.getBBox(); + document.body.removeChild(tempSvg); + + return { width: bbox.width, height: bbox.height, x: bbox.x, y: bbox.y }; + }, [text, fontSize, fontWeight, fontFamily]); + + const svgWidth = measurements.width + 20; + const svgHeight = measurements.height + 10; return ( - {logoText} + {text} ); -}); +}; -SvgTextLogo.displayName = "SvgTextLogo"; - -export default SvgTextLogo; +export default SvgTextLogo; \ No newline at end of file