bender/0662a09c-45eb-4f7a-9212-0dcad7763cc6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-11 17:44:49 +00:00
Conversation 0 Commits 2 Files Changed 2 +99 -171
2 changed files with 99 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/app/page.tsx
View File

@@ -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() {
<TextSplitAbout
title="About Webuild"
description={[
"We are a boutique web design agency passionate about creating stylish, premium digital experiences. Since our founding, we've partnered with ambitious brands to transform their visions into stunning online realities.",
"Our team combines creative excellence with technical expertise. We believe that great design isn't just beautiful—it's strategic, functional, and delivers measurable results for our clients.",
]}
"We are a boutique web design agency passionate about creating stylish, premium digital experiences. Since our founding, we've partnered with ambitious brands to transform their visions into stunning online realities.", "Our team combines creative excellence with technical expertise. We believe that great design isn't just beautiful—it's strategic, functional, and delivers measurable results for our clients."]}
buttons={[{ text: "Learn More", href: "/portfolio" }]}
useInvertedBackground={false}
showBorder={true}
@@ -112,32 +92,49 @@ export default function HomePage() {
features={[
{
id: 1,
title: "Web Design",
description: "Beautiful, responsive websites that showcase your brand and engage your audience with stunning visual design.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/designer-working-on-premium-website-layo-1773250968264-1e5edefe.png?_wi=1",
imageAlt: "Web design service",
},
title: "Web Design", description: "Beautiful, responsive websites that showcase your brand and engage your audience with stunning visual design.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/designer-working-on-premium-website-layo-1773250968264-1e5edefe.png", imageAlt: "Web design service"},
{
id: 2,
title: "Brand Identity",
description: "Comprehensive branding solutions including logo design, color palettes, and visual systems that define your market position.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/brand-identity-design-showcase-including-1773250967907-6ba80fad.png?_wi=1",
imageAlt: "Brand identity service",
},
title: "Brand Identity", description: "Comprehensive branding solutions including logo design, color palettes, and visual systems that define your market position.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/brand-identity-design-showcase-including-1773250967907-6ba80fad.png", imageAlt: "Brand identity service"},
{
id: 3,
title: "UX/UI Design",
description: "User-centered design approaches that create intuitive, accessible interfaces delivering exceptional user experiences.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/ux-ui-designer-creating-user-interface-m-1773250968094-a513f285.png?_wi=1",
imageAlt: "UX/UI design service",
},
title: "UX/UI Design", description: "User-centered design approaches that create intuitive, accessible interfaces delivering exceptional user experiences.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/ux-ui-designer-creating-user-interface-m-1773250968094-a513f285.png", imageAlt: "UX/UI design service"},
{
id: 4,
title: "Web Development",
description: "High-performance, scalable websites built with cutting-edge technologies for optimal speed and reliability.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/web-developer-writing-clean-code-in-mode-1773250967177-3779f120.png?_wi=1",
imageAlt: "Web development service",
},
title: "Web Development", description: "High-performance, scalable websites built with cutting-edge technologies for optimal speed and reliability.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/web-developer-writing-clean-code-in-mode-1773250967177-3779f120.png", imageAlt: "Web development service"},
]}
/>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardTwo
title="Recent Projects"
description="Explore our portfolio of premium web design projects that have transformed brands and driven business success."
tag="Portfolio Showcase"
tagIcon={Award}
textboxLayout="default"
useInvertedBackground={false}
gridVariant="bento-grid"
animationType="slide-up"
products={[
{
id: "1", brand: "Fashion Retail", name: "Luxury E-Commerce Platform", price: "$15,000", rating: 5,
reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/luxury-fashion-e-commerce-website-homepa-1773250968080-10a7270c.png", imageAlt: "Luxury E-Commerce Platform"},
{
id: "2", brand: "Tech Startup", name: "SaaS Dashboard Interface", price: "$18,000", rating: 5,
reviewCount: "8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/advanced-saas-platform-dashboard-with-so-1773250967736-981aac46.png", imageAlt: "SaaS Dashboard Interface"},
{
id: "3", brand: "Creative Agency", name: "Portfolio Website Design", price: "$12,000", rating: 5,
reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/creative-agency-portfolio-website-with-b-1773250971626-a5eb0167.png", imageAlt: "Portfolio Website Design"},
{
id: "4", brand: "Health & Wellness", name: "Wellness App Landing Page", price: "$10,000", rating: 5,
reviewCount: "9", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/health-and-wellness-app-landing-page-wit-1773250969876-d698578b.png", imageAlt: "Wellness App Landing Page"},
{
id: "5", brand: "Finance Company", name: "Investment Platform UI", price: "$20,000", rating: 5,
reviewCount: "11", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/investment-and-financial-technology-plat-1773250969416-8d5f979b.png", imageAlt: "Investment Platform UI"},
{
id: "6", brand: "Education Platform", name: "E-Learning Course Portal", price: "$14,000", rating: 5,
reviewCount: "10", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoExd7KUTSWyr52ctFF96Y8TFb/e-learning-platform-course-portal-with-i-1773250967773-00d32104.png", imageAlt: "E-Learning Course Portal"},
]}
/>
</div>
@@ -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"},
]}
/>
</div>
@@ -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+"},
]}
/>
</div>
@@ -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."},
]}
/>
</div>
@@ -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" },
],

71
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -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<SVGSVGElement> {
text?: string;
fontSize?: number;
dominantBaseline?: "auto" | "text-bottom" | "alphabetic" | "ideographic" | "middle" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
({ text = "Your Logo", fontSize = 24, dominantBaseline = "middle", ...props }, ref) => {
return (
<svg
ref={ref}
viewBox="0 0 200 60"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
{logoText}
</text>
</svg>
);
});
<text
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline={dominantBaseline}
fontSize={fontSize}
fontWeight="bold"
fill="currentColor"
>
{text}
</text>
</svg>
);
}
);
SvgTextLogo.displayName = "SvgTextLogo";