diff --git a/src/app/page.tsx b/src/app/page.tsx index cf54e17..e24a68a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -20,7 +20,7 @@ export default function LandingPage() { borderRadius="rounded" contentWidth="medium" sizing="mediumSizeLargeTitles" - background="noise" + background="circleGradient" cardStyle="subtle-shadow" primaryButtonStyle="shadow" secondaryButtonStyle="radial-glow" @@ -48,7 +48,7 @@ export default function LandingPage() { description="Build, document, and scale your design system with powerful tools. Create consistent, reusable components that empower your entire team." tag="Design Excellence" tagIcon={Sparkles} - background={{ variant: "noise" }} + background={{ variant: "canvas-reveal" }} imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/a-modern-design-system-dashboard-interfa-1773364812134-26e1471a.png" imageAlt="Design system dashboard showcase" buttons={[ @@ -68,13 +68,13 @@ export default function LandingPage() { animationType="slide-up" features={[ { - id: "1", title: "Color System", description: "Complete color palettes with semantic naming and accessibility compliance built in.", tag: "Colors", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png?_wi=1", imageAlt: "Design tokens illustration" + id: "1", title: "Color System", description: "Complete color palettes with semantic naming and accessibility compliance built in.", tag: "Colors", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png", imageAlt: "Design tokens illustration" }, { - id: "2", title: "Typography Scale", description: "Harmonious font hierarchies with predefined sizes, weights, and line heights.", tag: "Typography", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png?_wi=2", imageAlt: "Typography scale illustration" + id: "2", title: "Typography Scale", description: "Harmonious font hierarchies with predefined sizes, weights, and line heights.", tag: "Typography", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png", imageAlt: "Typography scale illustration" }, { - id: "3", title: "Spacing & Layout", description: "Consistent spacing rules and grid systems that scale across all breakpoints.", tag: "Layout", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png?_wi=3", imageAlt: "Spacing and layout illustration" + id: "3", title: "Spacing & Layout", description: "Consistent spacing rules and grid systems that scale across all breakpoints.", tag: "Layout", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png", imageAlt: "Spacing and layout illustration" } ]} /> @@ -92,15 +92,15 @@ export default function LandingPage() { products={[ { id: "1", brand: "Webild", name: "Button Components", price: "Included", rating: 5, - reviewCount: "1.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png?_wi=1", imageAlt: "Button component variations" + reviewCount: "1.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png", imageAlt: "Button component variations" }, { id: "2", brand: "Webild", name: "Card System", price: "Included", rating: 5, - reviewCount: "890", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png?_wi=2", imageAlt: "Card component system" + reviewCount: "890", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png", imageAlt: "Card component system" }, { id: "3", brand: "Webild", name: "Form Elements", price: "Included", rating: 5, - reviewCount: "756", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png?_wi=3", imageAlt: "Form input components" + reviewCount: "756", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png", imageAlt: "Form input components" } ]} /> @@ -142,20 +142,16 @@ export default function LandingPage() { animationType="slide-up" testimonials={[ { - id: "1", name: "Sarah Chen", role: "Design Director", company: "TechFlow Inc", rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-design-profes-1773364810258-33cc33d6.png", imageAlt: "Sarah Chen headshot" + id: "1", name: "Sarah Chen", role: "Design Director", company: "TechFlow Inc", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-design-profes-1773364810258-33cc33d6.png", imageAlt: "Sarah Chen headshot" }, { - id: "2", name: "Marcus Johnson", role: "Lead Developer", company: "InnovateLab", rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-developer-mod-1773364810100-1ef352a1.png", imageAlt: "Marcus Johnson headshot" + id: "2", name: "Marcus Johnson", role: "Lead Developer", company: "InnovateLab", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-developer-mod-1773364810100-1ef352a1.png", imageAlt: "Marcus Johnson headshot" }, { - id: "3", name: "Emily Rodriguez", role: "Product Manager", company: "GrowthCo", rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-product-manag-1773364809970-e2bc669a.png", imageAlt: "Emily Rodriguez headshot" + id: "3", name: "Emily Rodriguez", role: "Product Manager", company: "GrowthCo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-product-manag-1773364809970-e2bc669a.png", imageAlt: "Emily Rodriguez headshot" }, { - id: "4", name: "David Park", role: "Design Lead", company: "CreativeStudio", rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-design-lead-w-1773364810383-39c756fc.png", imageAlt: "David Park headshot" + id: "4", name: "David Park", role: "Design Lead", company: "CreativeStudio", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-design-lead-w-1773364810383-39c756fc.png", imageAlt: "David Park headshot" } ]} /> @@ -201,7 +197,7 @@ export default function LandingPage() { { text: "Launch Your System", href: "#signup" }, { text: "Schedule Demo", href: "#demo" } ]} - background={{ variant: "noise" }} + background={{ variant: "canvas-reveal" }} useInvertedBackground={false} /> diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..2dbf9b9 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -1,51 +1,39 @@ -"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; + fontSize?: number; + fontFamily?: string; + fill?: string; 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 = 32, + fontFamily = 'Arial, sans-serif', + fill = 'currentColor', + className = '', +}) => { return ( - {logoText} + {text} ); -}); - -SvgTextLogo.displayName = "SvgTextLogo"; +}; export default SvgTextLogo;