bender/9b83040a-66be-442d-8560-b8ced26e5d10
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #3

Merged
bender merged 3 commits from version_1 into main 2026-03-13 09:46:47 +00:00
Conversation 0 Commits 3 Files Changed 3 +83 -380
3 changed files with 83 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
src/app/contact/page.tsx
View File

@@ -2,56 +2,10 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import Link from "next/link";
import { Sparkles, Zap, Award, CheckCircle, Briefcase, Star } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Career", id: "team" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Services", href: "/#services" },
{ label: "Portfolio", href: "/#portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Documentation", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#" },
{ label: "Team", href: "/#team" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "#" },
],
},
{
title: "Connect",
items: [
{ label: "Contact", href: "/#contact" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "GitHub", href: "https://github.com" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -67,315 +21,60 @@ export default function ContactPage() {
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id === "/" ? "/" : item.id,
}))}
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Career", id: "team" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get Started",
href: "contact",
}}
text: "Get Started", href: "contact"}}
brandName="Webuild Studios"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Transforming Ideas Into Powerful Digital Solutions"
description="We craft cutting-edge websites, mobile applications, and AI-powered solutions that drive business growth. Partner with award-winning engineers and designers to build your next breakthrough product."
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "150+", label: "Projects Delivered" },
{ value: "98%", label: "Client Satisfaction" },
{ value: "50+", label: "Team Members" },
]}
enableKpiAnimation={true}
tag="Premium Tech Agency"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "View Our Services", href: "/#services" },
{ text: "Start Your Project", href: "#contact" },
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/a-stunning-3d-isometric-illustration-of--1773394871775-cf4caf1f.png?_wi=2"
imageAlt="Modern software development illustration with AI and technology"
mediaAnimation="blur-reveal"
imagePosition="right"
ariaLabel="Hero section showcasing our premium software solutions"
/>
</div>
<div id="services" data-section="services">
<FeatureCardOne
title="Our Premium Services"
description="Comprehensive digital solutions tailored to elevate your business. From web development to AI automation, we deliver excellence across every discipline."
tag="Service Categories"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="asymmetric-60-wide-40-narrow"
animationType="slide-up"
features={[
{
title: "Web Development",
description: "WordPress, MERN Stack, UI/UX Design, Website Maintenance, SEO Services, QA Testing",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/modern-web-development-illustration-show-1773394871524-9193d7bf.png?_wi=3",
imageAlt: "Web development services showcase",
},
{
title: "Mobile Apps",
description: "iOS and Android Development, Cross-Platform Solutions, UI/UX Design, Performance Optimization",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/beautiful-mobile-app-development-interfa-1773394871614-94299868.png?_wi=3",
imageAlt: "Mobile app development services",
},
{
title: "AI & Automation",
description: "AI Bot Development, Chatbots, Intelligent Automation, Machine Learning Solutions, Process Optimization",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/futuristic-ai-chatbot-and-automation-ill-1773394871730-0c081637.png?_wi=3",
imageAlt: "AI and automation services",
},
{
title: "Design & UX",
description: "Graphic Design, UI/UX Design, Social Media Graphics, Brand Identity, User Experience Strategy",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-ui-ux-design-showcase-with--1773394871797-f18ff053.png?_wi=3",
imageAlt: "UI/UX design services",
},
]}
/>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardTwo
title="Featured Portfolio"
description="Showcase of our award-winning projects that transformed businesses and set new industry standards."
tag="Case Studies"
tagIcon={Award}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "1",
brand: "TechCorp",
name: "Enterprise Dashboard Platform",
price: "$2.5M Investment",
rating: 5,
reviewCount: "50+ Team Reviews",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/enterprise-software-dashboard-illustrati-1773394871938-03148028.png?_wi=3",
imageAlt: "Enterprise dashboard analytics platform",
},
{
id: "2",
brand: "StartupXYZ",
name: "Mobile-First SaaS Application",
price: "$1.2M ARR",
rating: 5,
reviewCount: "10k+ Active Users",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/stunning-mobile-app-interface-design-wit-1773394872006-e9a318f8.png?_wi=3",
imageAlt: "Mobile SaaS app interface",
},
{
id: "3",
brand: "Innovation Labs",
name: "AI-Powered Web Platform",
price: "$3.8M Valuation",
rating: 5,
reviewCount: "15 Industry Awards",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/award-winning-modern-website-design-show-1773394871869-398ffdb1.png?_wi=3",
imageAlt: "AI web platform design",
},
]}
/>
</div>
<div id="why-choose-us" data-section="why-choose-us">
<MetricCardSeven
title="Why Choose Webuild Studios"
description="We combine cutting-edge technology with creative excellence to deliver transformational results."
tag="Our Strengths"
tagIcon={CheckCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="scale-rotate"
metrics={[
{
id: "1",
value: "10+",
title: "Years of Innovation",
items: [
"Industry-leading expertise",
"Proven track record",
"Continuous evolution",
],
},
{
id: "2",
value: "50+",
title: "Elite Team Members",
items: [
"Expert engineers & designers",
"Certified professionals",
"Dedicated specialists",
],
},
{
id: "3",
value: "150+",
title: "Successful Projects",
items: [
"Diverse industry experience",
"Complex problem solving",
"Proven delivery excellence",
],
},
{
id: "4",
value: "98%",
title: "Client Satisfaction",
items: [
"Long-term partnerships",
"Consistent quality",
"Professional approach",
],
},
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Join Our Growing Team"
description="We're always looking for talented developers, designers, and innovators to join our mission of creating digital excellence."
tag="We're Hiring"
tagIcon={Briefcase}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
buttons={[{ text: "View Open Positions", href: "/careers" }]}
team={[
{
id: "1",
name: "Senior Developer",
role: "Full Stack Engineer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-headshot-of-a-talented-soft-1773394871831-8ca9144a.png?_wi=3",
imageAlt: "Senior developer team member",
},
{
id: "2",
name: "Creative Lead",
role: "UX/UI Designer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-headshot-of-a-creative-desi-1773394871641-eee30638.png?_wi=3",
imageAlt: "Creative designer team member",
},
{
id: "3",
name: "Project Manager",
role: "Tech Lead",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-headshot-of-a-project-manag-1773394872638-7866e3d7.png?_wi=3",
imageAlt: "Project manager team member",
},
{
id: "4",
name: "QA Specialist",
role: "Quality Assurance",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-headshot-of-a-qa-specialist-1773394871544-e0152004.png?_wi=3",
imageAlt: "QA specialist team member",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Client Testimonials"
description="Hear from the industry leaders we've partnered with to transform their digital vision into reality."
tag="Success Stories"
tagIcon={Star}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
role: "CEO",
testimonial: "Webuild Studios transformed our vision into a world-class platform. Their technical expertise and creative approach delivered results that exceeded our expectations. A truly exceptional team.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-corporate-executive-headsho-1773394871122-c022aa1b.png?_wi=2",
imageAlt: "Sarah Johnson CEO",
icon: Sparkles,
},
{
id: "2",
name: "Michael Chen",
role: "CTO",
testimonial: "The team's attention to detail and commitment to excellence is unmatched. They didn't just build our product; they became strategic partners in our growth journey. Highly recommended.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-business-manager-portrait-m-1773394871685-086e7b8b.png?_wi=2",
imageAlt: "Michael Chen CTO",
icon: CheckCircle,
},
{
id: "3",
name: "Emily Rodriguez",
role: "Founder",
testimonial: "Working with Webuild Studios was transformational for our startup. Their innovative solutions and smooth collaboration process accelerated our time-to-market significantly. Outstanding results.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/creative-business-professional-headshot--1773394871275-62505e64.png?_wi=2",
imageAlt: "Emily Rodriguez Founder",
icon: Award,
},
{
id: "4",
name: "David Kim",
role: "VP Product",
testimonial: "Their technical excellence combined with creative problem-solving sets them apart. The team delivered a premium product that impressed both users and investors. Truly world-class service.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-product-manager-or-director-1773394871460-897f6266.png?_wi=2",
imageAlt: "David Kim VP Product",
icon: Zap,
},
{
id: "5",
name: "Jessica Williams",
role: "CMO",
testimonial: "Exceptional project management and delivery. Webuild Studios proved to be a reliable, innovative partner who understood our goals and executed flawlessly. Our go-to team for future projects.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/professional-tech-industry-executive-hea-1773394870965-7c17b44c.png?_wi=2",
imageAlt: "Jessica Williams CMO",
icon: Star,
},
{
id: "6",
name: "Robert Martinez",
role: "Director",
testimonial: "The professionalism and technical depth demonstrated by Webuild Studios is impressive. They transformed complex requirements into elegant, scalable solutions. Absolutely fantastic to work with.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AswSxZp1C0MasR0mddQMK4BeH7/business-professional-headshot-consultan-1773394870464-c771436d.png?_wi=2",
imageAlt: "Robert Martinez Director",
icon: CheckCircle,
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to build something extraordinary? Let's transform your vision into a powerful digital solution. Get in touch with our team today to discuss your project."
animationType="entrance-slide"
buttons={[
{ text: "Start Your Project", href: "#contact" },
{ text: "Schedule a Call", href: "#contact" },
{ text: "Start Your Project", href: "/" },
{ text: "Schedule a Call", href: "/" },
]}
background={{ variant: "glowing-orb" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
columns={[
{
title: "Product", items: [
{ label: "Services", href: "#services" },
{ label: "Portfolio", href: "#portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Documentation", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Team", href: "#team" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "#" },
],
},
{
title: "Connect", items: [
{ label: "Contact", href: "#contact" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "GitHub", href: "https://github.com" },
],
},
]}
copyrightText="© 2025 Webuild Studios. All rights reserved. Crafting digital excellence."
/>
</div>

2
src/app/page.tsx
View File

@@ -46,7 +46,7 @@ export default function HomePage() {
<HeroSplitKpi
title="Transforming Ideas Into Powerful Digital Solutions"
description="We craft cutting-edge websites, mobile applications, and AI-powered solutions that drive business growth. Partner with award-winning engineers and designers to build your next breakthrough product."
background={{ variant: "circleGradient" }}
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "150+", label: "Projects Delivered" },
{ value: "98%", label: "Client Satisfaction" },

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

@@ -1,51 +1,55 @@
"use client";
import React, { useEffect, useRef } from 'react';
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
const SvgTextLogo = ({ text = 'WEBUILD' }: { text?: string }) => {
const svgRef = useRef<SVGSVGElement>(null);
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
className?: string;
}
useEffect(() => {
if (svgRef.current) {
const letters = text.split('');
const radius = 80;
const cx = 100;
const cy = 100;
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
letters.forEach((letter, i) => {
const angle = (i / letters.length) * 2 * Math.PI - Math.PI / 2;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
const rotation = ((i / letters.length) * 360) + 90;
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'text');
tspan.setAttribute('x', x.toString());
tspan.setAttribute('y', y.toString());
tspan.setAttribute('transform', `rotate(${rotation} ${x} ${y})`);
tspan.setAttribute('text-anchor', 'middle');
tspan.setAttribute('dominant-baseline', 'central');
tspan.setAttribute('font-size', '16');
tspan.setAttribute('font-weight', 'bold');
tspan.setAttribute('fill', 'currentColor');
tspan.textContent = letter;
svgRef.current?.appendChild(tspan);
});
}
return () => {
if (svgRef.current) {
while (svgRef.current.firstChild) {
svgRef.current.removeChild(svgRef.current.firstChild);
}
}
};
}, [text]);
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"
}}
>
{logoText}
</text>
</svg>
width="200"
height="200"
viewBox="0 0 200 200"
className="text-current"
/>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;