Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-12 06:59:50 +00:00
2 changed files with 78 additions and 171 deletions

View File

@@ -1,16 +1,16 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from "next/link";
import { Sparkles, Zap, Award, Users, Mail, TrendingUp } from "lucide-react";
@@ -60,7 +60,7 @@ export default function HomePage() {
borderRadius="pill"
contentWidth="medium"
sizing="mediumLargeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
@@ -80,38 +80,31 @@ export default function HomePage() {
tag="Web Design Excellence"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "aurora" }}
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/modern-minimalist-website-interface-desi-1773298645286-0a4cb084.png",
imageAlt: "Modern website interface design"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/modern-minimalist-website-interface-desi-1773298645286-0a4cb084.png", imageAlt: "Modern website interface design"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/web-design-portfolio-mockup-displaying-m-1773298645326-e75e6ee6.png",
imageAlt: "Web design mockup showcase"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/web-design-portfolio-mockup-displaying-m-1773298645326-e75e6ee6.png", imageAlt: "Web design mockup showcase"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/creative-digital-design-workspace-with-t-1773298644814-08423686.png",
imageAlt: "Digital design portfolio"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/creative-digital-design-workspace-with-t-1773298644814-08423686.png", imageAlt: "Digital design portfolio"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/premium-website-interface-design-showing-1773298645316-f0501756.png",
imageAlt: "Creative web interface"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/premium-website-interface-design-showing-1773298645316-f0501756.png", imageAlt: "Creative web interface"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-web-design-agency-homepage--1773298645011-efa33dbd.png",
imageAlt: "Professional website design"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-web-design-agency-homepage--1773298645011-efa33dbd.png", imageAlt: "Professional website design"
}
]}
mediaAnimation="slide-up"
buttons={[
{
text: "View Our Work",
href: "#portfolio"
text: "View Our Work", href: "#portfolio"
},
{
text: "Start Your Project",
href: "/contact"
text: "Start Your Project", href: "/contact"
}
]}
buttonAnimation="slide-up"
@@ -122,15 +115,13 @@ export default function HomePage() {
<TextSplitAbout
title="We're Designers & Developers Who Create Impact"
description={[
"Webuild is a full-service web design and development agency. We combine strategic thinking, creative design, and technical expertise to build websites that don't just look good—they drive real results for your business.",
"With over 50 successful projects across diverse industries, we've learned what it takes to create digital experiences that engage users and convert visitors into customers. Our collaborative approach ensures your vision becomes reality."
"Webuild is a full-service web design and development agency. We combine strategic thinking, creative design, and technical expertise to build websites that don't just look good—they drive real results for your business.", "With over 50 successful projects across diverse industries, we've learned what it takes to create digital experiences that engage users and convert visitors into customers. Our collaborative approach ensures your vision becomes reality."
]}
showBorder={true}
useInvertedBackground={false}
buttons={[
{
text: "Learn More About Us",
href: "/about"
text: "Learn More About Us", href: "/about"
}
]}
buttonAnimation="slide-up"
@@ -149,53 +140,32 @@ export default function HomePage() {
useInvertedBackground={false}
features={[
{
id: "web-design",
label: "Design",
title: "Strategic Web Design",
items: [
"Responsive layouts for all devices",
"User-centered design approach",
"Brand-aligned visual identity",
"Modern interface design"
id: "web-design", label: "Design", title: "Strategic Web Design", items: [
"Responsive layouts for all devices", "User-centered design approach", "Brand-aligned visual identity", "Modern interface design"
],
buttons: [
{
text: "Learn More",
href: "/services"
text: "Learn More", href: "/services"
}
]
},
{
id: "development",
label: "Development",
title: "Full-Stack Development",
items: [
"Fast, optimized performance",
"SEO-ready architecture",
"Secure and scalable solutions",
"Cross-browser compatibility"
id: "development", label: "Development", title: "Full-Stack Development", items: [
"Fast, optimized performance", "SEO-ready architecture", "Secure and scalable solutions", "Cross-browser compatibility"
],
buttons: [
{
text: "Learn More",
href: "/services"
text: "Learn More", href: "/services"
}
]
},
{
id: "strategy",
label: "Strategy",
title: "Digital Strategy & Consulting",
items: [
"Business goal alignment",
"Market research insights",
"User journey optimization",
"Growth-focused recommendations"
id: "strategy", label: "Strategy", title: "Digital Strategy & Consulting", items: [
"Business goal alignment", "Market research insights", "User journey optimization", "Growth-focused recommendations"
],
buttons: [
{
text: "Learn More",
href: "/services"
text: "Learn More", href: "/services"
}
]
}
@@ -216,34 +186,18 @@ export default function HomePage() {
gridVariant="three-columns-all-equal-width"
products={[
{
id: "project-1",
name: "TechFlow - SaaS Platform",
price: "Enterprise Solution",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/saas-dashboard-interface-with-data-visua-1773298645355-89df8d87.png?_wi=1",
imageAlt: "TechFlow SaaS dashboard design",
initialQuantity: 1
id: "project-1", name: "TechFlow - SaaS Platform", price: "Enterprise Solution", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/saas-dashboard-interface-with-data-visua-1773298645355-89df8d87.png", imageAlt: "TechFlow SaaS dashboard design", initialQuantity: 1
},
{
id: "project-2",
name: "Luxe Retail - E-commerce Store",
price: "Full Development",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/luxury-e-commerce-website-showcasing-hig-1773298645364-f348b668.png?_wi=1",
imageAlt: "Luxe Retail e-commerce website",
initialQuantity: 1
id: "project-2", name: "Luxe Retail - E-commerce Store", price: "Full Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/luxury-e-commerce-website-showcasing-hig-1773298645364-f348b668.png", imageAlt: "Luxe Retail e-commerce website", initialQuantity: 1
},
{
id: "project-3",
name: "HealthHub - Medical Platform",
price: "Custom Build",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/medical-platform-interface-with-healthca-1773298645303-7a218c92.png?_wi=1",
imageAlt: "HealthHub medical platform interface",
initialQuantity: 1
id: "project-3", name: "HealthHub - Medical Platform", price: "Custom Build", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/medical-platform-interface-with-healthca-1773298645303-7a218c92.png", imageAlt: "HealthHub medical platform interface", initialQuantity: 1
}
]}
buttons={[
{
text: "View Full Portfolio",
href: "#portfolio"
text: "View Full Portfolio", href: "#portfolio"
}
]}
buttonAnimation="slide-up"
@@ -263,28 +217,16 @@ export default function HomePage() {
gridVariant="four-items-2x2-equal-grid"
members={[
{
id: "member-1",
name: "Sarah Chen",
role: "Creative Director",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-creative-woma-1773298643520-d3685aa1.png?_wi=1"
id: "member-1", name: "Sarah Chen", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-creative-woma-1773298643520-d3685aa1.png"
},
{
id: "member-2",
name: "Marcus Johnson",
role: "Lead Developer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-male-develope-1773298643388-04e6310f.png?_wi=1"
id: "member-2", name: "Marcus Johnson", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-male-develope-1773298643388-04e6310f.png"
},
{
id: "member-3",
name: "Elena Rodriguez",
role: "UI/UX Designer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-ui-ux-d-1773298645213-acd425bf.png?_wi=1"
id: "member-3", name: "Elena Rodriguez", role: "UI/UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-ui-ux-d-1773298645213-acd425bf.png"
},
{
id: "member-4",
name: "David Kumar",
role: "Strategy Lead",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-strategy--1773298645064-9c05ec17.png?_wi=1"
id: "member-4", name: "David Kumar", role: "Strategy Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-strategy--1773298645064-9c05ec17.png"
}
]}
/>
@@ -300,28 +242,22 @@ export default function HomePage() {
useInvertedBackground={false}
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-confident-wom-1773298645405-26516181.png",
alt: "Jennifer Williams"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-confident-wom-1773298645405-26516181.png", alt: "Jennifer Williams"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-in-busine-1773298645239-ead247b3.png",
alt: "Client testimonial"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-in-busine-1773298645239-ead247b3.png", alt: "Client testimonial"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-with-wa-1773298643311-142996d5.png",
alt: "Satisfied customer"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-with-wa-1773298643311-142996d5.png", alt: "Satisfied customer"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-diverse-man-i-1773298645259-5b0324ee.png",
alt: "Business partner"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-diverse-man-i-1773298645259-5b0324ee.png", alt: "Business partner"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-entrepr-1773298645138-b5061219.png",
alt: "Happy client"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-entrepr-1773298645138-b5061219.png", alt: "Happy client"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-in-modern-1773298644720-3c698e00.png",
alt: "Webuild client"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-in-modern-1773298644720-3c698e00.png", alt: "Webuild client"
}
]}
/>
@@ -339,46 +275,30 @@ export default function HomePage() {
useInvertedBackground={false}
metrics={[
{
id: "clients",
value: "50+",
title: "Happy Clients",
items: [
"Across 12+ industries",
"98% satisfaction rate"
id: "clients", value: "50+", title: "Happy Clients", items: [
"Across 12+ industries", "98% satisfaction rate"
]
},
{
id: "projects",
value: "150+",
title: "Projects Delivered",
items: [
"From startups to enterprises",
"Award-winning work"
id: "projects", value: "150+", title: "Projects Delivered", items: [
"From startups to enterprises", "Award-winning work"
]
},
{
id: "team",
value: "25",
title: "Team Members",
items: [
"Designers and developers",
"Strategic thinkers"
id: "team", value: "25", title: "Team Members", items: [
"Designers and developers", "Strategic thinkers"
]
},
{
id: "experience",
value: "10+",
title: "Years in Industry",
items: [
"Proven track record",
"Continuous innovation"
id: "experience", value: "10+", title: "Years in Industry", items: [
"Proven track record", "Continuous innovation"
]
}
]}
/>
</div>
<div id="contact-section" data-section="contact-section">
<div id="contact" data-section="contact">
<ContactSplit
tag="Get Started"
title="Ready to Build Something Amazing?"
@@ -387,7 +307,7 @@ export default function HomePage() {
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/team-collaboration-scene-showing-designe-1773298645817-616aa0fd.png?_wi=1"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/team-collaboration-scene-showing-designe-1773298645817-616aa0fd.png"
imageAlt="Team collaboration scene showing designers and developers working together on web projects. Modern o"
mediaAnimation="slide-up"
mediaPosition="right"

View File

@@ -1,51 +1,38 @@
"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;
className?: string;
fontSize?: number;
fontWeight?: string | number;
fill?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className,
fontSize = 24,
fontWeight = 'bold',
fill = 'currentColor',
}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox="0 0 200 50"
className={className}
preserveAspectRatio="xMidYMid meet"
>
<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"
}}
x="10"
y="35"
fontSize={fontSize}
fontWeight={fontWeight}
fill={fill}
dominantBaseline="hanging"
>
{logoText}
{text}
</text>
</svg>
);
});
};
SvgTextLogo.displayName = "SvgTextLogo";
export default SvgTextLogo;
export default SvgTextLogo;