bender/7535110a-b7d4-41f6-82d5-cccd151dccae
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
bender
2026-03-09 08:15:59 +00:00
parent c7464392cc 493772a6a3
commit 54db82b9d1
7 changed files with 902 additions and 1407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1419
src/app/layout.tsx
View File

File diff suppressed because it is too large Load Diff

16
src/app/page.tsx
View File

@@ -8,8 +8,15 @@ import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { useRouter } from "next/navigation";
export default function LandingPage() {
const router = useRouter();
const handleProjectClick = (projectId: string) => {
router.push(`/project/${projectId}`);
};
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -72,13 +79,16 @@ export default function LandingPage() {
features={[
{
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", onFeatureClick: () => handleProjectClick("1"),
},
{
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", onFeatureClick: () => handleProjectClick("2"),
},
{
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", onFeatureClick: () => handleProjectClick("3"),
},
]}
animationType="slide-up"
textboxLayout="default"

220
src/app/project/[id]/page.tsx Normal file
View File

@@ -0,0 +1,220 @@
"use client";
import { useParams, useRouter } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
// Project data
const projectsData: Record<string, any> = {
"1": {
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description:
"Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", fullDescription:
"This comprehensive project involved a complete visual identity redesign for a growing tech startup. We developed extensive brand guidelines covering typography, color systems, and application patterns. Created a modular digital asset library that scales across all platforms. The result was a 40% increase in brand recognition within six months of launch.", tags: ["Branding", "Identity", "Design System"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", challenges: [
"Balancing innovation with brand consistency", "Creating a system scalable across digital and print", "Ensuring accessibility compliance across all assets"],
solutions: [
"Developed a modular design system with clear documentation", "Created adaptive color palettes for different contexts", "Implemented WCAG AA compliance throughout the identity"],
results: [
"40% increase in brand recognition", "30% improvement in design consistency", "50+ assets in comprehensive asset library"],
},
"2": {
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description:
"User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", fullDescription:
"This project involved a comprehensive redesign of an enterprise e-commerce platform serving millions of monthly users. We implemented a mobile-first approach, streamlined navigation, and optimized the checkout flow. The result was a 35% improvement in conversion rate and significant reduction in cart abandonment.", tags: ["UX Design", "E-commerce", "Accessibility"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", challenges: [
"Managing complex product hierarchies", "Optimizing for mobile without losing desktop functionality", "Reducing checkout friction while adding trust signals"],
solutions: [
"Implemented progressive disclosure for product filters", "Created responsive layouts that adapt to all screen sizes", "Added contextual help and security indicators"],
results: [
"35% improvement in conversion rate", "42% reduction in cart abandonment", "28% increase in average order value"],
},
"3": {
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description:
"Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", fullDescription:
"This project focused on designing a user-friendly interface for a complex data analytics SaaS platform. We created an extensive design system with 15+ component variations and built interactive prototypes. The redesigned onboarding flow resulted in a 50% reduction in support tickets.", tags: ["SaaS", "Product Design", "UI Design"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", challenges: [
"Simplifying complex data visualization", "Creating intuitive onboarding for technical users", "Maintaining consistency across multiple product modules"],
solutions: [
"Implemented guided tours and contextual help", "Created reusable visualization components", "Built comprehensive design system documentation"],
results: [
"50% reduction in support tickets", "35% faster user adoption", "25% increase in feature adoption rate"],
},
};
export default function ProjectPage() {
const params = useParams();
const router = useRouter();
const projectId = params.id as string;
const project = projectsData[projectId];
if (!project) {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">Project Not Found</h1>
<button
onClick={() => router.push("/")}
className="mt-8 px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90"
>
Back to Portfolio
</button>
</div>
</div>
</ThemeProvider>
);
}
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "/" },
{ name: "About", id: "/" },
{ name: "Services", id: "/" },
{ name: "Contact", id: "/" },
]}
button={{
text: "Get in Touch", href: "/#contact"}}
/>
</div>
<main className="py-20">
<div className="container mx-auto px-4">
{/* Back button */}
<button
onClick={() => router.push("/#work")}
className="text-secondary-cta hover:text-primary-cta transition-colors mb-8"
>
← Back to Work
</button>
{/* Project Hero */}
<section className="mb-20">
<div className="space-y-8">
<div>
<div className="text-sm text-secondary-cta mb-4">{project.author}</div>
<h1 className="text-5xl md:text-6xl font-bold mb-6">{project.title}</h1>
<p className="text-xl text-foreground/80 max-w-3xl">
{project.fullDescription}
</p>
</div>
{/* Tags */}
<div className="flex flex-wrap gap-2">
{project.tags.map((tag: string, index: number) => (
<span
key={index}
className="px-4 py-2 bg-card text-foreground rounded-full text-sm border border-accent"
>
{tag}
</span>
))}
</div>
{/* Project Image */}
<div className="mt-12">
<img
src={project.imageSrc}
alt={project.imageAlt}
className="w-full h-auto rounded-lg object-cover"
/>
</div>
</div>
</section>
{/* Project Details */}
<section className="grid md:grid-cols-2 gap-12 mb-20">
{/* Challenges */}
<div>
<h2 className="text-2xl font-bold mb-6">Challenges</h2>
<ul className="space-y-4">
{project.challenges.map((challenge: string, index: number) => (
<li key={index} className="flex items-start gap-4">
<div className="w-2 h-2 bg-primary-cta rounded-full mt-2 flex-shrink-0"></div>
<span className="text-foreground/80">{challenge}</span>
</li>
))}
</ul>
</div>
{/* Solutions */}
<div>
<h2 className="text-2xl font-bold mb-6">Solutions</h2>
<ul className="space-y-4">
{project.solutions.map((solution: string, index: number) => (
<li key={index} className="flex items-start gap-4">
<div className="w-2 h-2 bg-primary-cta rounded-full mt-2 flex-shrink-0"></div>
<span className="text-foreground/80">{solution}</span>
</li>
))}
</ul>
</div>
</section>
{/* Results */}
<section className="mb-20">
<h2 className="text-2xl font-bold mb-6">Results & Impact</h2>
<div className="grid md:grid-cols-3 gap-8">
{project.results.map((result: string, index: number) => (
<div
key={index}
className="p-6 bg-card rounded-lg border border-accent text-center"
>
<p className="text-foreground/80">{result}</p>
</div>
))}
</div>
</section>
{/* CTA */}
<section className="text-center py-12">
<h2 className="text-3xl font-bold mb-6">Ready to Work Together?</h2>
<button
onClick={() => router.push("/#contact")}
className="px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity"
>
Start Your Project
</button>
</section>
</div>
</main>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

264
src/app/projects/[id]/page.tsx Normal file
View File

@@ -0,0 +1,264 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { useParams } from "next/navigation";
// Project data - can be moved to a separate data file or API
const projectsData: Record<
string,
{
title: string;
description: string;
tag: string;
heroImages: Array<{ imageSrc: string; imageAlt: string }>;
overview: string[];
challenge: string;
solution: string;
results: string;
details: Array<{
id: string;
title: string;
author: string;
description: string;
tags: string[];
imageSrc: string;
imageAlt: string;
}>;
nextProjectId?: string;
nextProjectName?: string;
}
> = {
"1": {
title: "Digital Brand Identity System", description: "Complete visual identity redesign for tech startup", tag: "Brand Strategy", heroImages: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "Brand identity secondary view"},
],
overview: [
"This project involved a comprehensive rebrand for a rapidly growing tech startup. The client needed a modern, cohesive visual identity that reflected their innovation and positioned them as a market leader.", "Working closely with the leadership team, we developed a complete brand system including logo design, color palette, typography guidelines, and a comprehensive asset library for all digital and print applications."],
challenge:
"The startup had outgrown their initial branding and needed a more professional identity that would resonate with enterprise clients while maintaining the energy and innovation of their brand culture.", solution:
"We conducted extensive brand research, stakeholder interviews, and competitive analysis. The result was a bold, modern brand identity featuring a distinctive logomark, carefully curated color system, and a flexible typography hierarchy that works across all mediums.", results:
"Post-rebrand, the company experienced a 40% increase in brand recognition, improved website conversion rates by 28%, and successfully closed three major enterprise deals attributed partially to the strengthened brand positioning.", details: [
{
id: "1", title: "Logo Design & Variations", author: "Visual Identity", description: "Primary logo, secondary mark, and application variations for different contexts", tags: ["Logo", "Identity", "Design"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Logo design variations"},
{
id: "2", title: "Color System & Palette", author: "Brand System", description: "Comprehensive color palette with primary, secondary, and accent colors", tags: ["Color", "System", "Branding"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "Color palette"},
{
id: "3", title: "Typography Guidelines", author: "Brand System", description: "Font selection, sizing scales, and usage guidelines for consistency", tags: ["Typography", "System", "Branding"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Typography guidelines"},
],
nextProjectId: "2", nextProjectName: "E-commerce Platform Redesign"},
"2": {
title: "E-commerce Platform Redesign", description: "User-centered redesign of enterprise e-commerce platform", tag: "UX Design", heroImages: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "E-commerce platform secondary view"},
],
overview: [
"This enterprise e-commerce platform was experiencing high cart abandonment rates and low user satisfaction. The redesign focused on streamlining the user journey and creating an intuitive, accessible interface.", "Through user research, usability testing, and iterative design, we transformed the platform into a modern, conversion-focused experience that caters to diverse user needs and accessibility requirements."],
challenge:
"The existing platform had accumulated complex features over years of updates, resulting in a cluttered interface and confusing navigation. Users struggled to find products and complete purchases efficiently.", solution:
"We conducted extensive user research including interviews and usability testing. The redesign involved a complete information architecture overhaul, simplified navigation, optimized product discovery, and a streamlined checkout process with clear progress indicators.", results:
"The redesign resulted in a 35% improvement in conversion rate, 42% reduction in cart abandonment, and 60% decrease in support inquiries. Mobile traffic increased significantly, and user satisfaction scores improved by 48%.", details: [
{
id: "1", title: "Product Discovery & Search", author: "UX Design", description: "Enhanced search functionality and filtering system for better product discovery", tags: ["UX", "Search", "Discovery"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "Product discovery interface"},
{
id: "2", title: "Checkout Flow Optimization", author: "UX Design", description: "Streamlined checkout process reducing steps and friction points", tags: ["UX", "Checkout", "Conversion"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Checkout interface"},
{
id: "3", title: "Accessibility Implementation", author: "UX Design", description: "WCAG 2.1 AA compliance across all interface elements", tags: ["Accessibility", "WCAG", "UX"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Accessibility features"},
],
nextProjectId: "3", nextProjectName: "SaaS Product Interface Design"},
"3": {
title: "SaaS Product Interface Design", description: "Intuitive interface for data analytics SaaS platform", tag: "Product Design", heroImages: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "SaaS product secondary view"},
],
overview: [
"Designed a comprehensive product interface for a data analytics SaaS platform targeting enterprise users. The challenge was creating an intuitive interface for complex data visualization without overwhelming users.", "Working with the product team, we developed a scalable design system with 15+ core components and established clear interaction patterns for data exploration and visualization."],
challenge:
"The platform handles complex data analytics with hundreds of potential configurations. Previous iterations were confusing and had a steep learning curve, resulting in poor user adoption and high support costs.", solution:
"We designed a progressive disclosure interface that reveals complexity gradually. Created interactive component library, conducted extensive user testing, developed onboarding flows, and established clear mental models for data exploration.", results:
"User onboarding time reduced by 65%, support tickets decreased by 50%, and feature adoption increased significantly. Users reported 75% improvement in interface intuitiveness compared to the previous version.", details: [
{
id: "1", title: "Data Visualization Components", author: "Product Design", description: "Interactive charts, graphs, and data display components", tags: ["Visualization", "Components", "Design"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Data visualization components"},
{
id: "2", title: "Dashboard Configuration", author: "Product Design", description: "Flexible dashboard builder with drag-and-drop functionality", tags: ["Dashboard", "UI", "Product"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "Dashboard configuration"},
{
id: "3", title: "Onboarding Experience", author: "Product Design", description: "Interactive tutorial and guided onboarding for new users", tags: ["Onboarding", "UX", "Product"],
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Onboarding experience"},
],
nextProjectId: "1", nextProjectName: "Digital Brand Identity System"},
};
export default function ProjectDetailPage() {
const params = useParams();
const projectId = params.id as string;
const project = projectsData[projectId];
if (!project) {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"}}
/>
</div>
<div style={{ padding: "4rem 2rem", textAlign: "center" }}>
<h1>Project not found</h1>
<p>Sorry, we couldn't find the project you're looking for.</p>
</div>
</ThemeProvider>
);
}
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title={project.title}
description={project.description}
tag={project.tag}
background={{ variant: "sparkles-gradient" }}
mediaItems={project.heroImages}
buttons={[
{ text: "View More Work", href: "/" },
{ text: "Start a Project", href: "/contact" },
]}
/>
</div>
<div id="overview" data-section="overview">
<TextSplitAbout
title="Project Overview"
description={project.overview}
buttons={[]}
useInvertedBackground={false}
/>
</div>
<div id="details" data-section="details">
<FeatureCardTwentyFour
title="Project Details"
description="Comprehensive breakdown of the design solution and components"
features={project.details}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="approach" data-section="approach">
<TextSplitAbout
title="Design Approach"
description={[
`Challenge: ${project.challenge}`,
`Solution: ${project.solution}`,
`Results: ${project.results}`,
]}
buttons={[]}
useInvertedBackground={true}
/>
</div>
{project.nextProjectId && (
<div id="next-project" data-section="next-project">
<ContactCenter
tag="Next Project"
title={`Ready to explore our next work?`}
description={`Check out ${project.nextProjectName} to see another example of design excellence and strategic thinking.`}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="View Next Project"
termsText="Interested in learning more about our design process and capabilities."
/>
</div>
)}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

130
src/app/projects/digital-brand-identity/page.tsx Normal file
View File

@@ -0,0 +1,130 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function DigitalBrandIdentityPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "/" },
{ name: "About", id: "/" },
{ name: "Services", id: "/" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Digital Brand Identity System"
description="Complete visual identity redesign for a forward-thinking tech startup. This comprehensive project encompassed brand strategy, visual identity development, and full design system creation that elevated brand presence and market positioning."
tag="Case Study"
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Digital brand identity system showcase"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Brand identity design details"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Brand guidelines documentation"},
]}
buttons={[
{ text: "Back to Work", href: "/" },
{ text: "Next Project", href: "/projects/ecommerce-platform-redesign" },
]}
/>
</div>
<div id="overview" data-section="overview">
<TextSplitAbout
title="Project Overview"
description={[
"Our client, a rapidly growing SaaS company, needed a cohesive visual identity to stand out in a competitive market. Their existing branding felt generic and didn't communicate their innovative spirit.", "We conducted extensive market research and stakeholder interviews to understand their vision, values, and target audience. This informed every design decision from color palette to typography.", "The result was a comprehensive brand system that included logo redesign, color palette, typography guidelines, imagery style, and a complete digital asset library. The new identity increased brand recognition by 40% and contributed to a 25% growth in customer acquisition within six months."]}
buttons={[
{ text: "View More Projects", href: "/" },
]}
showBorder={false}
useInvertedBackground={false}
/>
</div>
<div id="challenge" data-section="challenge">
<FeatureCardTwentyFour
title="Challenges & Solutions"
description="Key obstacles and our strategic approach to solving them"
tag="Strategy"
features={[
{
id: "1", title: "Brand Differentiation", author: "Challenge", description: "The tech startup market is saturated with similar visual identities. We needed to create something distinctive that would cut through the noise while remaining professional and trustworthy.", tags: ["Market Research", "Strategy", "Differentiation"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1", imageAlt: "Brand differentiation strategy"},
{
id: "2", title: "Scalability Requirements", author: "Challenge", description: "The design system needed to work across web, mobile, print, and emerging platforms. We created flexible guidelines that maintained consistency while adapting to different mediums and formats.", tags: ["Scalability", "Design System", "Flexibility"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png", imageAlt: "Scalable design system approach"},
{
id: "3", title: "Brand Evolution", author: "Challenge", description: "The client needed flexibility for future growth and brand evolution. We designed a modular system that could evolve without losing its core identity. This approach has allowed them to expand into new markets with confidence.", tags: ["Growth", "Evolution", "Modularity"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=2", imageAlt: "Brand evolution framework"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="results" data-section="results">
<TextSplitAbout
title="Project Results & Impact"
description={[
"Following the implementation of the new brand identity, the client experienced significant business improvements. Brand recognition increased by 40% as measured by customer surveys and market research.", "Customer acquisition grew by 25% in the six months following the rebrand, demonstrating the direct impact of stronger brand positioning. The new identity helped the company communicate its innovative approach more effectively.", "The design system reduced internal design time by 35%, allowing the team to focus on strategic projects rather than repetitive design work. Developers also reported a smoother handoff process thanks to comprehensive documentation."]}
buttons={[
{ text: "Start Your Project", href: "contact" },
]}
showBorder={true}
useInvertedBackground={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Let's Collaborate"
title="Ready to Transform Your Brand?"
description="Let's discuss how strategic branding and design can elevate your business and create lasting impact in your market."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Send Message"
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

130
src/app/projects/ecommerce-platform-redesign/page.tsx Normal file
View File

@@ -0,0 +1,130 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function EcommercePlatformRedesignPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "/" },
{ name: "About", id: "/" },
{ name: "Services", id: "/" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="E-commerce Platform Redesign"
description="A complete UX/UI overhaul of an enterprise e-commerce platform that resulted in significant conversion improvements. This project focused on user-centered design, accessibility compliance, and mobile-first optimization."
tag="Case Study"
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform redesign showcase"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png", imageAlt: "Platform interface design"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png", imageAlt: "Checkout flow optimization"},
]}
buttons={[
{ text: "Back to Work", href: "/" },
{ text: "Next Project", href: "/projects/saas-product-interface-design" },
]}
/>
</div>
<div id="overview" data-section="overview">
<TextSplitAbout
title="Project Overview"
description={[
"Our enterprise e-commerce client was struggling with declining conversion rates and high cart abandonment. The existing platform felt cluttered, confusing, and not optimized for mobile shopping.", "We conducted extensive user research through surveys, interviews, and usability testing. The findings revealed critical pain points in product discovery, checkout flow, and mobile experience.", "Through iterative design and testing, we improved the conversion rate by 35%, reduced cart abandonment by 40%, and achieved WCAG 2.1 AA accessibility compliance. The mobile-first redesign resulted in a 60% increase in mobile revenue."]}
buttons={[
{ text: "View More Projects", href: "/" },
]}
showBorder={false}
useInvertedBackground={false}
/>
</div>
<div id="key-improvements" data-section="key-improvements">
<FeatureCardTwentyFour
title="Key Design Improvements"
description="Major changes that drove business results"
tag="Design"
features={[
{
id: "1", title: "Streamlined Checkout Flow", author: "UX Improvement", description: "Reduced checkout steps from 6 to 3, implemented auto-fill for returning customers, and added clear progress indicators. Guest checkout option was made more prominent, reducing friction for new users.", tags: ["Checkout", "Conversion", "UX"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Checkout flow redesign"},
{
id: "2", title: "Mobile-First Navigation", author: "Mobile Optimization", description: "Redesigned navigation architecture for touch interaction. Implemented sticky product recommendations and simplified category hierarchy. Mobile revenue increased by 60% following these changes.", tags: ["Mobile", "Navigation", "Responsive"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "Mobile navigation redesign"},
{
id: "3", title: "Accessibility First", author: "Compliance", description: "Achieved WCAG 2.1 AA compliance with proper color contrast, keyboard navigation, screen reader support, and semantic HTML. Created accessible patterns for complex components like product filters and carousels.", tags: ["Accessibility", "WCAG", "Compliance"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Accessibility improvements"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="results" data-section="results">
<TextSplitAbout
title="Measurable Results"
description={[
"The redesigned platform delivered exceptional business results. Conversion rate increased by 35%, translating to significant revenue growth. Cart abandonment decreased by 40% as the streamlined checkout reduced friction.", "Mobile optimization proved critical, with mobile revenue increasing by 60%. The mobile-first approach ensured the platform performed excellently across all devices, from smartphones to tablets and desktops.", "Customer satisfaction improved significantly. Support ticket volume decreased by 30%, indicating users found the interface more intuitive. The accessibility improvements expanded the addressable market by making the platform usable for everyone."]}
buttons={[
{ text: "Start Your Project", href: "contact" },
]}
showBorder={true}
useInvertedBackground={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Let's Collaborate"
title="Ready to Improve Your Platform?"
description="Let's discuss how user-centered design and optimization can boost your conversions and customer satisfaction."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Send Message"
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

130
src/app/projects/saas-product-interface-design/page.tsx Normal file
View File

@@ -0,0 +1,130 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function SaasProductInterfaceDesignPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "/" },
{ name: "About", id: "/" },
{ name: "Services", id: "/" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="SaaS Product Interface Design"
description="Designed an intuitive data analytics interface for a growing SaaS platform. Created a comprehensive design system that improved user onboarding, reduced support tickets by 50%, and accelerated feature development."
tag="Case Study"
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface showcase"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Data visualization design"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Dashboard interface design"},
]}
buttons={[
{ text: "Back to Work", href: "/" },
{ text: "View All Projects", href: "/" },
]}
/>
</div>
<div id="overview" data-section="overview">
<TextSplitAbout
title="Project Overview"
description={[
"A data analytics SaaS company approached us with a complex challenge: their product was powerful but difficult to use. New customers struggled during onboarding, and support costs were escalating rapidly.", "We conducted extensive user research and discovered that the complexity wasn't the features themselves, but the interface that presented them. Users felt overwhelmed by options and uncertain where to start.", "Our solution was a thoughtful redesign that prioritized clarity, progressive disclosure, and contextual guidance. We created an interactive design system with 15+ component variations that maintained consistency while supporting the product's sophisticated capabilities."]}
buttons={[
{ text: "View More Projects", href: "/" },
]}
showBorder={false}
useInvertedBackground={false}
/>
</div>
<div id="design-strategy" data-section="design-strategy">
<FeatureCardTwentyFour
title="Design Strategy & Approach"
description="Our methodical approach to solving complex product challenges"
tag="Strategy"
features={[
{
id: "1", title: "Progressive Disclosure", author: "UX Pattern", description: "Implemented progressive disclosure patterns to surface advanced features only when needed. Guided users through workflows step-by-step with contextual help and smart defaults that made quick wins possible.", tags: ["UX", "Onboarding", "Progressive Disclosure"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1", imageAlt: "Progressive disclosure implementation"},
{
id: "2", title: "Design System Creation", author: "System Design", description: "Built a comprehensive design system with 15+ interactive component variations. Documented every component with usage guidelines, do's and don'ts, and code examples. This system enabled developers to build new features 40% faster.", tags: ["Design System", "Components", "Documentation"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png", imageAlt: "Design system components"},
{
id: "3", title: "User Onboarding Experience", author: "Product Experience", description: "Redesigned the onboarding flow with interactive tutorials, contextual tooltips, and guided tours. New users could complete key tasks within 15 minutes instead of hours. Support tickets decreased by 50%.", tags: ["Onboarding", "User Education", "Experience"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Onboarding flow design"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="outcomes" data-section="outcomes">
<TextSplitAbout
title="Project Outcomes & Impact"
description={[
"The redesigned interface delivered measurable improvements across all key metrics. Support tickets decreased by 50% as users found the product more intuitive and easier to navigate. The onboarding experience was transformed from frustrating to delightful.", "Customer retention improved significantly, with churn decreasing by 25%. Users reported higher satisfaction scores and were more likely to recommend the product to colleagues. The design system became a core competitive advantage.", "Development velocity increased by 40% as the comprehensive design system eliminated design-to-development friction. New features could be implemented consistently and quickly. The company used this efficiency to accelerate their product roadmap."]}
buttons={[
{ text: "Start Your Project", href: "contact" },
]}
showBorder={true}
useInvertedBackground={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Let's Collaborate"
title="Ready to Simplify Your Product?"
description="Let's discuss how thoughtful design and strategic product thinking can make your complex product intuitive and delightful to use."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Send Message"
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}