diff --git a/src/app/page.tsx b/src/app/page.tsx index d527b16..31282b5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -20,7 +20,7 @@ export default function LandingPage() { borderRadius="soft" contentWidth="compact" sizing="mediumLargeSizeLargeTitles" - background="noise" + background="circleGradient" cardStyle="inset" primaryButtonStyle="double-inset" secondaryButtonStyle="layered" @@ -49,13 +49,13 @@ export default function LandingPage() { tag="Portfolio" tagIcon={Sparkles} tagAnimation="slide-up" - background={{ variant: "noise" }} + background={{ variant: "plain" }} mediaItems={[ { - imageSrc: "http://img.b2bpic.net/free-psd/portfolio-interior-design-by-samantha-doe_23-2151969881.jpg?_wi=1", imageAlt: "Featured design work showcase" + imageSrc: "http://img.b2bpic.net/free-psd/portfolio-interior-design-by-samantha-doe_23-2151969881.jpg", imageAlt: "Featured design work showcase" }, { - imageSrc: "http://img.b2bpic.net/free-vector/abstract-classic-blue-business-card-template_23-2148423751.jpg?_wi=1", imageAlt: "Creative project portfolio" + imageSrc: "http://img.b2bpic.net/free-vector/abstract-classic-blue-business-card-template_23-2148423751.jpg", imageAlt: "Creative project portfolio" } ]} rating={5} @@ -101,19 +101,19 @@ export default function LandingPage() { products={[ { id: "1", brand: "E-Commerce Platform", name: "Shopify Theme Redesign", price: "UX/UI Design", rating: 5, - reviewCount: "2 months", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853785.jpg?_wi=1", imageAlt: "E-commerce redesign project" + reviewCount: "2 months", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853785.jpg", imageAlt: "E-commerce redesign project" }, { id: "2", brand: "SaaS Application", name: "Dashboard Interface System", price: "Product Design", rating: 5, - reviewCount: "3 months", imageSrc: "http://img.b2bpic.net/free-photo/cosmetics-product-advertising-stand-exhibition-wooden-podium-green-background-with-leaves-sha_1258-170138.jpg?_wi=1", imageAlt: "SaaS dashboard design" + reviewCount: "3 months", imageSrc: "http://img.b2bpic.net/free-photo/cosmetics-product-advertising-stand-exhibition-wooden-podium-green-background-with-leaves-sha_1258-170138.jpg", imageAlt: "SaaS dashboard design" }, { id: "3", brand: "Brand Identity", name: "Tech Startup Visual System", price: "Branding", rating: 5, - reviewCount: "6 weeks", imageSrc: "http://img.b2bpic.net/free-vector/soccer-youtube-channel-art-cover_23-2149325941.jpg?_wi=1", imageAlt: "Brand identity project" + reviewCount: "6 weeks", imageSrc: "http://img.b2bpic.net/free-vector/soccer-youtube-channel-art-cover_23-2149325941.jpg", imageAlt: "Brand identity project" }, { id: "4", brand: "Digital Campaign", name: "Holiday Marketing Campaign", price: "Creative Direction", rating: 5, - reviewCount: "4 weeks", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-marketing-strategy-landing-page-template_23-2150094439.jpg?_wi=1", imageAlt: "Marketing campaign design" + reviewCount: "4 weeks", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-marketing-strategy-landing-page-template_23-2150094439.jpg", imageAlt: "Marketing campaign design" } ]} buttonAnimation="opacity" @@ -131,19 +131,19 @@ export default function LandingPage() { useInvertedBackground={true} features={[ { - title: "UI/UX Design", description: "Creating user-centered interfaces that are both beautiful and functional, focusing on accessibility and conversion optimization.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853785.jpg?_wi=2", imageAlt: "UI/UX design showcase", buttonIcon: ArrowRight, + title: "UI/UX Design", description: "Creating user-centered interfaces that are both beautiful and functional, focusing on accessibility and conversion optimization.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853785.jpg", imageAlt: "UI/UX design showcase", buttonIcon: ArrowRight, buttonHref: "#" }, { - title: "Web Development", description: "Building responsive, performant websites using modern technologies like React, Next.js, and Tailwind CSS.", imageSrc: "http://img.b2bpic.net/free-photo/cosmetics-product-advertising-stand-exhibition-wooden-podium-green-background-with-leaves-sha_1258-170138.jpg?_wi=2", imageAlt: "Web development project", buttonIcon: ArrowRight, + title: "Web Development", description: "Building responsive, performant websites using modern technologies like React, Next.js, and Tailwind CSS.", imageSrc: "http://img.b2bpic.net/free-photo/cosmetics-product-advertising-stand-exhibition-wooden-podium-green-background-with-leaves-sha_1258-170138.jpg", imageAlt: "Web development project", buttonIcon: ArrowRight, buttonHref: "#" }, { - title: "Brand Strategy", description: "Developing cohesive brand identities including logo design, color systems, typography, and brand guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/soccer-youtube-channel-art-cover_23-2149325941.jpg?_wi=2", imageAlt: "Brand strategy work", buttonIcon: ArrowRight, + title: "Brand Strategy", description: "Developing cohesive brand identities including logo design, color systems, typography, and brand guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/soccer-youtube-channel-art-cover_23-2149325941.jpg", imageAlt: "Brand strategy work", buttonIcon: ArrowRight, buttonHref: "#" }, { - title: "Motion Design", description: "Crafting engaging animations and micro-interactions that enhance user experience and bring designs to life.", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-marketing-strategy-landing-page-template_23-2150094439.jpg?_wi=2", imageAlt: "Motion design", buttonIcon: ArrowRight, + title: "Motion Design", description: "Crafting engaging animations and micro-interactions that enhance user experience and bring designs to life.", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-marketing-strategy-landing-page-template_23-2150094439.jpg", imageAlt: "Motion design", buttonIcon: ArrowRight, buttonHref: "#" } ]} @@ -163,13 +163,13 @@ export default function LandingPage() { animationType="slide-up" metrics={[ { - id: "1", value: "50+", title: "Projects Completed", description: "Successful projects delivered to satisfied clients", imageSrc: "http://img.b2bpic.net/free-psd/portfolio-interior-design-by-samantha-doe_23-2151969881.jpg?_wi=2", imageAlt: "Projects showcase" + id: "1", value: "50+", title: "Projects Completed", description: "Successful projects delivered to satisfied clients", imageSrc: "http://img.b2bpic.net/free-psd/portfolio-interior-design-by-samantha-doe_23-2151969881.jpg", imageAlt: "Projects showcase" }, { - id: "2", value: "98%", title: "Client Satisfaction", description: "Average satisfaction rating from all projects", imageSrc: "http://img.b2bpic.net/free-vector/abstract-classic-blue-business-card-template_23-2148423751.jpg?_wi=2", imageAlt: "Client feedback" + id: "2", value: "98%", title: "Client Satisfaction", description: "Average satisfaction rating from all projects", imageSrc: "http://img.b2bpic.net/free-vector/abstract-classic-blue-business-card-template_23-2148423751.jpg", imageAlt: "Client feedback" }, { - id: "3", value: "30+", title: "Happy Clients", description: "Businesses transformed through design and development", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853785.jpg?_wi=3", imageAlt: "Client portfolio" + id: "3", value: "30+", title: "Happy Clients", description: "Businesses transformed through design and development", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853785.jpg", imageAlt: "Client portfolio" } ]} buttonAnimation="opacity" diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..591fdf7 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -1,51 +1,38 @@ -"use client"; +import React, { SVGProps } from 'react'; -import { memo } from "react"; -import useSvgTextLogo from "./useSvgTextLogo"; -import { cls } from "@/lib/utils"; - -interface SvgTextLogoProps { - logoText: string; - adjustHeightFactor?: number; - verticalAlign?: "top" | "center"; +interface SvgTextLogoProps extends SVGProps { + text?: string; + fontSize?: number; + 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 = 'Logo', + fontSize = 32, + fill = 'currentColor', + className = '', + ...props +}) => { return ( - {logoText} + {text} ); -}); - -SvgTextLogo.displayName = "SvgTextLogo"; +}; export default SvgTextLogo;