diff --git a/src/app/page.tsx b/src/app/page.tsx index a2b595f..0961c24 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -22,7 +22,7 @@ export default function HomePage() { borderRadius="pill" contentWidth="medium" sizing="mediumLarge" - background="noiseDiagonalGradient" + background="circleGradient" cardStyle="layered-gradient" primaryButtonStyle="gradient" secondaryButtonStyle="glass" @@ -46,42 +46,24 @@ export default function HomePage() { description="We design and develop beautiful, high-performance websites that elevate your brand and drive business growth. Transform your digital presence with our expert team." tag="Premium Design" tagIcon={Sparkles} - background={{ variant: "noiseDiagonalGradient" }} + background={{ variant: "sparkles-gradient" }} buttons={[ { text: "View Our Work", href: "/portfolio" }, { text: "Let's Talk", href: "/contact" }, ]} carouselItems={[ { - id: "1", - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/a-stunning-modern-website-hero-section-w-1773250967308-edd840cc.png", - imageAlt: "Premium website design showcase", - }, + id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/a-stunning-modern-website-hero-section-w-1773250967308-edd840cc.png", imageAlt: "Premium website design showcase"}, { - id: "2", - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/premium-saas-dashboard-interface-with-so-1773250968753-ff0f7d24.png", - imageAlt: "Modern interface design example", - }, + id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/premium-saas-dashboard-interface-with-so-1773250968753-ff0f7d24.png", imageAlt: "Modern interface design example"}, { - id: "3", - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/elegant-fashion-e-commerce-website-layou-1773250968204-1ac32e9a.png", - imageAlt: "Elegant web layout design", - }, + id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/elegant-fashion-e-commerce-website-layou-1773250968204-1ac32e9a.png", imageAlt: "Elegant web layout design"}, { - id: "4", - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/modern-creative-agency-website-with-bold-1773250967245-a4c5c2c4.png", - imageAlt: "Contemporary website interface", - }, + id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/modern-creative-agency-website-with-bold-1773250967245-a4c5c2c4.png", imageAlt: "Contemporary website interface"}, { - id: "5", - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/high-tech-fintech-platform-interface-wit-1773250967603-f6b08884.png", - imageAlt: "Professional brand design", - }, + id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/high-tech-fintech-platform-interface-wit-1773250967603-f6b08884.png", imageAlt: "Professional brand design"}, { - id: "6", - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/corporate-wellness-platform-website-with-1773250968306-f3afb7f5.png", - imageAlt: "Stylish website mockup", - }, + id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/corporate-wellness-platform-website-with-1773250968306-f3afb7f5.png", imageAlt: "Stylish website mockup"}, ]} autoPlay={true} autoPlayInterval={4000} @@ -92,9 +74,7 @@ export default function HomePage() { + + +
+
@@ -154,41 +151,17 @@ export default function HomePage() { animationType="slide-up" testimonials={[ { - id: "1", - name: "Sarah Mitchell", - role: "Founder & CEO", - company: "Luxe Boutique", - rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-headshot-portrait-of-a-conf-1773250967268-d4dc8be5.png?_wi=1", - imageAlt: "Sarah Mitchell", - }, + id: "1", name: "Sarah Mitchell", role: "Founder & CEO", company: "Luxe Boutique", rating: 5, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-headshot-portrait-of-a-conf-1773250967268-d4dc8be5.png", imageAlt: "Sarah Mitchell"}, { - id: "2", - name: "Marcus Chen", - role: "CTO", - company: "TechFlow Solutions", - rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-headshot-of-an-asian-man-in-1773250966430-c4bfc625.png?_wi=1", - imageAlt: "Marcus Chen", - }, + id: "2", name: "Marcus Chen", role: "CTO", company: "TechFlow Solutions", rating: 5, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-headshot-of-an-asian-man-in-1773250966430-c4bfc625.png", imageAlt: "Marcus Chen"}, { - id: "3", - name: "Elena Rodriguez", - role: "Marketing Director", - company: "Global Wellness Co", - rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-portrait-of-a-latina-woman--1773250967806-3cc79e84.png?_wi=1", - imageAlt: "Elena Rodriguez", - }, + id: "3", name: "Elena Rodriguez", role: "Marketing Director", company: "Global Wellness Co", rating: 5, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-portrait-of-a-latina-woman--1773250967806-3cc79e84.png", imageAlt: "Elena Rodriguez"}, { - id: "4", - name: "James Peterson", - role: "Business Owner", - company: "Creative Studios", - rating: 5, - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-headshot-of-a-man-in-creati-1773250967791-21fedb02.png?_wi=1", - imageAlt: "James Peterson", - }, + id: "4", name: "James Peterson", role: "Business Owner", company: "Creative Studios", rating: 5, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/professional-headshot-of-a-man-in-creati-1773250967791-21fedb02.png", imageAlt: "James Peterson"}, ]} /> @@ -204,29 +177,17 @@ export default function HomePage() { animationType="scale-rotate" metrics={[ { - id: "1", - icon: Award, - title: "Projects Completed", - value: "150+", - }, + id: "1", icon: Award, + title: "Projects Completed", value: "150+"}, { - id: "2", - icon: Users, - title: "Happy Clients", - value: "120+", - }, + id: "2", icon: Users, + title: "Happy Clients", value: "120+"}, { - id: "3", - icon: TrendingUp, - title: "Avg Growth Rate", - value: "240%", - }, + id: "3", icon: TrendingUp, + title: "Avg Growth Rate", value: "240%"}, { - id: "4", - icon: Zap, - title: "Years Experience", - value: "8+", - }, + id: "4", icon: Zap, + title: "Years Experience", value: "8+"}, ]} /> @@ -247,30 +208,15 @@ export default function HomePage() { animationType="smooth" faqs={[ { - id: "1", - title: "What is your design process?", - content: "We follow a collaborative discovery process starting with understanding your brand goals, target audience, and business objectives. Then we create wireframes, design mockups, and iterate based on your feedback before development begins.", - }, + id: "1", title: "What is your design process?", content: "We follow a collaborative discovery process starting with understanding your brand goals, target audience, and business objectives. Then we create wireframes, design mockups, and iterate based on your feedback before development begins."}, { - id: "2", - title: "How long does a typical project take?", - content: "Project timelines vary based on scope and complexity. A standard website typically takes 6-12 weeks from concept to launch. We'll provide a detailed timeline during our initial consultation.", - }, + id: "2", title: "How long does a typical project take?", content: "Project timelines vary based on scope and complexity. A standard website typically takes 6-12 weeks from concept to launch. We'll provide a detailed timeline during our initial consultation."}, { - id: "3", - title: "Do you offer ongoing support?", - content: "Yes, we provide ongoing maintenance, updates, and support packages tailored to your needs. We're committed to the long-term success of your website.", - }, + id: "3", title: "Do you offer ongoing support?", content: "Yes, we provide ongoing maintenance, updates, and support packages tailored to your needs. We're committed to the long-term success of your website."}, { - id: "4", - title: "What technologies do you use?", - content: "We work with modern, industry-standard technologies including Next.js, React, Node.js, and various CMS platforms. We choose the best tech stack for each project's specific needs.", - }, + id: "4", title: "What technologies do you use?", content: "We work with modern, industry-standard technologies including Next.js, React, Node.js, and various CMS platforms. We choose the best tech stack for each project's specific needs."}, { - id: "5", - title: "Can you redesign my existing website?", - content: "Absolutely. We can modernize your existing website with a fresh design, improved UX, better performance, and updated technology while preserving your valuable content and SEO.", - }, + id: "5", title: "Can you redesign my existing website?", content: "Absolutely. We can modernize your existing website with a fresh design, improved UX, better performance, and updated technology while preserving your valuable content and SEO."}, ]} /> @@ -283,7 +229,7 @@ export default function HomePage() { tagIcon={Send} background={{ variant: "sparkles-gradient" }} useInvertedBackground={false} - imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/collaborative-design-team-meeting-discus-1773250966687-13abaa93.png?_wi=1" + imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/collaborative-design-team-meeting-discus-1773250966687-13abaa93.png" imageAlt="Design team collaboration" mediaAnimation="slide-up" mediaPosition="right" @@ -298,22 +244,19 @@ export default function HomePage() { logoText="Webuild" columns={[ { - title: "Product", - items: [ + title: "Product", items: [ { label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, ], }, { - title: "Company", - items: [ + title: "Company", items: [ { label: "About", href: "/portfolio" }, { label: "Contact", href: "/contact" }, ], }, { - title: "Legal", - items: [ + title: "Legal", items: [ { label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }, ], diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..57b4600 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -1,50 +1,35 @@ -"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"; - className?: string; +interface SvgTextLogoProps extends SVGProps { + text?: string; + fontSize?: number; + dominantBaseline?: "auto" | "text-bottom" | "alphabetic" | "ideographic" | "middle" | "central" | "mathematical" | "hanging" | "text-top" | undefined; } -const SvgTextLogo = memo(function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); - - return ( - - ( + ({ text = "Your Logo", fontSize = 24, dominantBaseline = "middle", ...props }, ref) => { + return ( + - {logoText} - - - ); -}); + + {text} + + + ); + } +); SvgTextLogo.displayName = "SvgTextLogo";